Skip to content

Commit b6910a9

Browse files
MRita443MRita443
committed
Updated branch and packages
2 parents 859bbf2 + 4c671ba commit b6910a9

27 files changed

+3714
-7683
lines changed

‎package-lock.json

+2,961-7,600
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@
2424
"build-storybook": "storybook build"
2525
},
2626
"devDependencies": {
27-
"@storybook/addon-a11y": "^8.0.8",
27+
"@storybook/addon-a11y": "^8.4.2",
2828
"@storybook/addon-coverage": "^1.0.1",
29-
"@storybook/addon-essentials": "^8.0.8",
30-
"@storybook/addon-interactions": "^8.0.8",
31-
"@storybook/addon-links": "^8.0.8",
32-
"@storybook/blocks": "^8.0.8",
29+
"@storybook/addon-essentials": "^8.4.2",
30+
"@storybook/addon-interactions": "^8.4.2",
31+
"@storybook/addon-links": "^8.4.2",
32+
"@storybook/blocks": "^8.4.2",
3333
"@storybook/jest": "^0.2.3",
34-
"@storybook/svelte": "^8.0.8",
35-
"@storybook/sveltekit": "^8.0.8",
36-
"@storybook/test": "^8.0.8",
34+
"@storybook/svelte": "^8.4.2",
35+
"@storybook/sveltekit": "^8.4.2",
36+
"@storybook/test": "^8.4.2",
3737
"@storybook/test-runner": "^0.17.0",
3838
"@storybook/testing-library": "^0.2.2",
3939
"@sveltejs/adapter-auto": "^3.2.0",
@@ -57,7 +57,7 @@
5757
"prettier-plugin-tailwindcss": "^0.5.13",
5858
"react": "^18.2.0",
5959
"react-dom": "^18.2.0",
60-
"storybook": "^8.0.8",
60+
"storybook": "^8.4.2",
6161
"svelte": "^4.2.13",
6262
"svelte-check": "^3.6.9",
6363
"svelte-icons-pack": "^3.1.3",

‎src/lib/components/icons/icon.svelte

+4-3
Original file line numberDiff line numberDiff line change
@@ -4,15 +4,16 @@
44
55
export let src: IconType;
66
export let href: string | undefined = undefined;
7-
export let color: string | undefined;
7+
export let color: string | undefined = undefined;
88
export let size: string | undefined;
99
export let ariaLabel: string | undefined = undefined;
10+
export let className: string | undefined = undefined;
1011
</script>
1112

1213
{#if href}
1314
<a {href} target="_blank" rel="noreferrer" class="w-min" aria-label={ariaLabel}>
14-
<Icon {src} {color} {size} />
15+
<Icon {src} {color} {size} {className} />
1516
</a>
1617
{:else}
17-
<Icon {src} {color} {size} />
18+
<Icon {src} {color} {size} {className} />
1819
{/if}

‎src/lib/components/icons/icons.ts

+6-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,8 @@ import {
88
FaSolidBars,
99
FaSolidGlobe
1010
} from 'svelte-icons-pack/fa';
11-
import { IoMail, IoClose } from 'svelte-icons-pack/io';
11+
import { BiMap } from 'svelte-icons-pack/bi';
12+
import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
1213

1314
const Icons = {
1415
Instagram: FaBrandsInstagram,
@@ -20,7 +21,10 @@ const Icons = {
2021
User: FaSolidUser,
2122
Bars: FaSolidBars,
2223
Close: IoClose,
23-
Globe: FaSolidGlobe
24+
Globe: FaSolidGlobe,
25+
Pin: BiMap,
26+
Visible: IoEye,
27+
Hidden: IoEyeOff
2428
};
2529

2630
export default Icons;

‎src/lib/components/icons/label-input.stories.ts

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import LabelInput from './label-input.svelte';
2+
3+
export default {
4+
title: 'Atoms/LabelInput',
5+
component: LabelInput,
6+
argTypes: {
7+
label: { control: 'text' },
8+
placeholder: { control: 'text' },
9+
isTextArea: { control: 'boolean' }
10+
},
11+
parameters: {
12+
layout: 'centered',
13+
controls: {
14+
exclude: ['id', 'type']
15+
}
16+
}
17+
};
18+
19+
export const NonTextAreaInput = {
20+
args: {
21+
label: 'Label',
22+
placeholder: 'Placeholder',
23+
type: 'text'
24+
}
25+
};
26+
27+
export const TextAreaInput = {
28+
args: {
29+
label: 'Label',
30+
placeholder: 'Placeholder',
31+
type: 'text',
32+
isTextArea: true
33+
}
34+
};

‎src/lib/components/icons/label-input.svelte

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<script>
2+
export let label = '';
3+
export let id = '';
4+
export let type = 'text';
5+
export let placeholder = '';
6+
export let isTextArea = false;
7+
</script>
8+
9+
<label class="m-1 font-source_code font-bold text-white" for={id}>{label}</label><br class="mb-1" />
10+
{#if isTextArea}
11+
<textarea
12+
aria-label="textarea-input"
13+
class="mb-2 min-h-[100px] w-full rounded-lg bg-white p-2 font-source_code text-primary placeholder-primary"
14+
{id}
15+
{placeholder}
16+
rows="4"
17+
/><br />
18+
{:else}
19+
<input
20+
aria-label="text-input"
21+
class="mb-2 w-full rounded-lg bg-white p-2 text-primary placeholder-primary"
22+
{type}
23+
{id}
24+
{placeholder}
25+
/><br />
26+
{/if}

‎src/lib/utils.ts

+5
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,12 @@ import { type ClassValue, clsx } from 'clsx';
22
import { twMerge } from 'tailwind-merge';
33
import { cubicOut } from 'svelte/easing';
44
import type { TransitionConfig } from 'svelte/transition';
5+
import { createNotification } from '@/routes/(app)/_components/layout/notifications';
56

7+
export function copyToClipboard(content: string) {
8+
navigator.clipboard.writeText(content);
9+
createNotification('O email foi copiado para o teu clipboard :)');
10+
}
611
export function cn(...inputs: ClassValue[]) {
712
return twMerge(clsx(inputs));
813
}

‎src/routes/(app)/(home)/page.stories.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,8 @@ export default {
66
title: 'Pages/HomePage',
77
component: Page,
88
parameters: {
9-
layout: 'fullscreen'
9+
layout: 'fullscreen',
10+
backgrounds: { default: 'transparent' }
1011
},
1112
decorators: [() => Layout, () => LayoutDecorator]
1213
};

‎src/routes/(app)/+layout.svelte

+2
Original file line numberDiff line numberDiff line change
@@ -20,10 +20,12 @@
2020

2121
<style>
2222
:global(html) {
23+
height: 100%;
2324
min-height: 100vh;
2425
}
2526
2627
:global(body) {
28+
height: 100%;
2729
min-height: 100vh;
2830
display: flex;
2931
flex-direction: column;

‎src/routes/(app)/_components/layout/Sidebar.svelte

-50
This file was deleted.

‎src/routes/(app)/_components/layout/footer.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@
119119
</div>
120120
</div>
121121
<div
122-
class="footer-icons grid grid-cols-3 grid-rows-2 items-center justify-items-center gap-4 px-6 py-5"
122+
class="footer-icons grid grid-cols-3 grid-rows-2 items-center justify-items-center gap-4 px-6 py-4"
123123
>
124124
<Icon
125125
src={Icons.Instagram}

‎src/routes/(app)/_components/layout/member-button.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
</script>
55

66
<a
7-
href="/#"
7+
href="/login"
88
class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-muted-red-400/60"
99
>
1010
<p class="w-full whitespace-nowrap pl-2 font-source_code text-sm text-white">Área Membro</p>

‎src/routes/(app)/_components/layout/navbar.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,6 @@
1212
<a href="#/">Equipa</a>
1313
<a href="#/">Projetos</a>
1414
<a href="#/">Eventos</a>
15-
<a href="#/">Contactos</a>
15+
<a href="/contacts">Contactos</a>
1616
</div>
1717
</nav>

‎src/routes/(app)/_components/layout/sidebar.svelte

+2-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111

1212
{#if sidebarClosed}
1313
<nav
14-
class="fixed grid h-fit w-full grid-cols-[1fr_4em] grid-rows-1 justify-items-center bg-transparent px-2 py-4 text-white"
14+
class="fixed grid h-fit w-full grid-cols-[1fr_4em] grid-rows-1 justify-items-center px-2 py-4 text-white"
1515
>
1616
<button
1717
class="col-start-2 h-fit w-1/2 sm:invisible"
@@ -23,7 +23,7 @@
2323
</nav>
2424
{:else}
2525
<nav
26-
class="bg-ni-sidebar absolute grid h-screen w-screen grid-cols-[1fr_4em] grid-rows-[4em_1fr] justify-items-center px-2 py-4 sm:invisible"
26+
class="bg-ni-sidebar absolute z-50 grid h-screen w-screen grid-cols-[1fr_4em] grid-rows-[4em_1fr] justify-items-center px-2 py-4 sm:invisible"
2727
>
2828
<BackgroundHexagon position="left" />
2929
<button

‎src/routes/(app)/contacts/+page.svelte

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<script lang="ts">
2+
import { Icon } from 'svelte-icons-pack';
3+
import Graph from './_components/graph.svelte';
4+
import LabelInput from '@/lib/components/icons/label-input.svelte';
5+
import Icons from '$lib/components/icons/icons';
6+
</script>
7+
8+
<section class="-10 my-20 flex flex-col justify-center">
9+
<section class="mb-4 flex flex-col text-center font-raleway text-white">
10+
<h1 class="text-2xl font-bold">&lt; Contacta-nos /&gt;</h1>
11+
</section>
12+
<div class="mx-10 grid-cols-2 md:grid">
13+
<form class="min-w-[85%] justify-self-end">
14+
<LabelInput label="// Email" id="email" type="email" placeholder="[email protected]" />
15+
<LabelInput label="// Nome" id="name" type="text" />
16+
<LabelInput label="// Assunto" id="subject" type="text" />
17+
<LabelInput label="// Mensagem" id="message" type="text" isTextArea={true} />
18+
19+
<button
20+
class="m-1 justify-self-start rounded-lg bg-vivid-red-900 px-5 py-1 text-white"
21+
type="submit">Enviar</button
22+
>
23+
</form>
24+
<div class="m-2 flex w-full justify-center md:m-5 md:my-0">
25+
<Graph />
26+
</div>
27+
</div>
28+
<picture>
29+
<source media="(max-width: 767px)" srcset="/images/feup_buildings.svg" />
30+
<source media="(min-width: 767px)" srcset="/images/feup_buildings_md.svg" />
31+
<img
32+
src="/images/feup_buildings.svg"
33+
alt="Feup Buildings Outline"
34+
class="align-center h-52 w-full justify-self-center object-none object-center"
35+
/>
36+
</picture>
37+
<span
38+
id="location"
39+
class="ml-3 flex justify-center overflow-x-hidden text-white md:justify-start md:self-center lg:w-[1039px]"
40+
>
41+
<Icon src={Icons.Pin} color="white" size="40" className="py-2 pl-1" />
42+
<div>
43+
<p>Rua Dr. Roberto Frias 4200-465, Porto</p>
44+
<p>Sala B315</p>
45+
</div>
46+
</span>
47+
</section>

‎src/routes/(app)/contacts/_components/graph.stories.ts

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import Graph from './graph.svelte';
2+
3+
export default {
4+
title: 'Organisms/Graph',
5+
component: Graph,
6+
parameters: {
7+
layout: 'fullscreen'
8+
}
9+
};
10+
11+
export const Default = {};

0 commit comments

Comments
 (0)