Updated branch and packages

package.json

@@ -24,16 +24,16 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "^8.0.8",
+    "@storybook/addon-a11y": "^8.4.2",
     "@storybook/addon-coverage": "^1.0.1",
-    "@storybook/addon-essentials": "^8.0.8",
-    "@storybook/addon-interactions": "^8.0.8",
-    "@storybook/addon-links": "^8.0.8",
-    "@storybook/blocks": "^8.0.8",
+    "@storybook/addon-essentials": "^8.4.2",
+    "@storybook/addon-interactions": "^8.4.2",
+    "@storybook/addon-links": "^8.4.2",
+    "@storybook/blocks": "^8.4.2",
     "@storybook/jest": "^0.2.3",
-    "@storybook/svelte": "^8.0.8",
-    "@storybook/sveltekit": "^8.0.8",
-    "@storybook/test": "^8.0.8",
+    "@storybook/svelte": "^8.4.2",
+    "@storybook/sveltekit": "^8.4.2",
+    "@storybook/test": "^8.4.2",
     "@storybook/test-runner": "^0.17.0",
     "@storybook/testing-library": "^0.2.2",
     "@sveltejs/adapter-auto": "^3.2.0",
@@ -57,7 +57,7 @@
     "prettier-plugin-tailwindcss": "^0.5.13",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "^8.0.8",
+    "storybook": "^8.4.2",
     "svelte": "^4.2.13",
     "svelte-check": "^3.6.9",
     "svelte-icons-pack": "^3.1.3",

src/lib/components/icons/icon.svelte

@@ -4,15 +4,16 @@
 
   export let src: IconType;
   export let href: string | undefined = undefined;
-  export let color: string | undefined;
+  export let color: string | undefined = undefined;
   export let size: string | undefined;
   export let ariaLabel: string | undefined = undefined;
+  export let className: string | undefined = undefined;
 </script>
 
 {#if href}
   <a {href} target="_blank" rel="noreferrer" class="w-min" aria-label={ariaLabel}>
-    <Icon {src} {color} {size} />
+    <Icon {src} {color} {size} {className} />
   </a>
 {:else}
-  <Icon {src} {color} {size} />
+  <Icon {src} {color} {size} {className} />
 {/if}

src/lib/components/icons/icons.ts

@@ -8,7 +8,8 @@ import {
   FaSolidBars,
   FaSolidGlobe
 } from 'svelte-icons-pack/fa';
-import { IoMail, IoClose } from 'svelte-icons-pack/io';
+import { BiMap } from 'svelte-icons-pack/bi';
+import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -20,7 +21,10 @@ const Icons = {
   User: FaSolidUser,
   Bars: FaSolidBars,
   Close: IoClose,
-  Globe: FaSolidGlobe
+  Globe: FaSolidGlobe,
+  Pin: BiMap,
+  Visible: IoEye,
+  Hidden: IoEyeOff
 };
 
 export default Icons;

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

@@ -0,0 +1,34 @@
+import LabelInput from './label-input.svelte';
+
+export default {
+  title: 'Atoms/LabelInput',
+  component: LabelInput,
+  argTypes: {
+    label: { control: 'text' },
+    placeholder: { control: 'text' },
+    isTextArea: { control: 'boolean' }
+  },
+  parameters: {
+    layout: 'centered',
+    controls: {
+      exclude: ['id', 'type']
+    }
+  }
+};
+
+export const NonTextAreaInput = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text'
+  }
+};
+
+export const TextAreaInput = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    isTextArea: true
+  }
+};

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

@@ -0,0 +1,26 @@
+<script>
+  export let label = '';
+  export let id = '';
+  export let type = 'text';
+  export let placeholder = '';
+  export let isTextArea = false;
+</script>
+
+<label class="m-1 font-source_code font-bold text-white" for={id}>{label}</label><br class="mb-1" />
+{#if isTextArea}
+  <textarea
+    aria-label="textarea-input"
+    class="mb-2 min-h-[100px] w-full rounded-lg bg-white p-2 font-source_code text-primary placeholder-primary"
+    {id}
+    {placeholder}
+    rows="4"
+  /><br />
+{:else}
+  <input
+    aria-label="text-input"
+    class="mb-2 w-full rounded-lg bg-white p-2 text-primary placeholder-primary"
+    {type}
+    {id}
+    {placeholder}
+  /><br />
+{/if}

src/lib/utils.ts

@@ -2,7 +2,12 @@ import { type ClassValue, clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cubicOut } from 'svelte/easing';
 import type { TransitionConfig } from 'svelte/transition';
+import { createNotification } from '@/routes/(app)/_components/layout/notifications';
 
+export function copyToClipboard(content: string) {
+  navigator.clipboard.writeText(content);
+  createNotification('O email foi copiado para o teu clipboard :)');
+}
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }

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

@@ -6,7 +6,8 @@ export default {
   title: 'Pages/HomePage',
   component: Page,
   parameters: {
-    layout: 'fullscreen'
+    layout: 'fullscreen',
+    backgrounds: { default: 'transparent' }
   },
   decorators: [() => Layout, () => LayoutDecorator]
 };

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

@@ -20,10 +20,12 @@
 
 <style>
   :global(html) {
+    height: 100%;
     min-height: 100vh;
   }
 
   :global(body) {
+    height: 100%;
     min-height: 100vh;
     display: flex;
     flex-direction: column;

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

@@ -119,7 +119,7 @@
       </div>
     </div>
     <div
-      class="footer-icons grid grid-cols-3 grid-rows-2 items-center justify-items-center gap-4 px-6 py-5"
+      class="footer-icons grid grid-cols-3 grid-rows-2 items-center justify-items-center gap-4 px-6 py-4"
     >
       <Icon
         src={Icons.Instagram}

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

@@ -4,7 +4,7 @@
 </script>
 
 <a
-  href="/#"
+  href="/login"
   class="grid grid-cols-[1fr_fit-content(100%)] items-center gap-3 rounded-md bg-muted-red-400/60"
 >
   <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

@@ -12,6 +12,6 @@
     <a href="#/">Equipa</a>
     <a href="#/">Projetos</a>
     <a href="#/">Eventos</a>
-    <a href="#/">Contactos</a>
+    <a href="/contacts">Contactos</a>
   </div>
 </nav>

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

@@ -11,7 +11,7 @@
 
 {#if sidebarClosed}
   <nav
-    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"
+    class="fixed grid h-fit w-full grid-cols-[1fr_4em] grid-rows-1 justify-items-center px-2 py-4 text-white"
   >
     <button
       class="col-start-2 h-fit w-1/2 sm:invisible"
@@ -23,7 +23,7 @@
   </nav>
 {:else}
   <nav
-    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"
+    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"
   >
     <BackgroundHexagon position="left" />
     <button

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

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Icon } from 'svelte-icons-pack';
+  import Graph from './_components/graph.svelte';
+  import LabelInput from '@/lib/components/icons/label-input.svelte';
+  import Icons from '$lib/components/icons/icons';
+</script>
+
+<section class="-10 my-20 flex flex-col justify-center">
+  <section class="mb-4 flex flex-col text-center font-raleway text-white">
+    <h1 class="text-2xl font-bold">&lt; Contacta-nos /&gt;</h1>
+  </section>
+  <div class="mx-10 grid-cols-2 md:grid">
+    <form class="min-w-[85%] justify-self-end">
+      <LabelInput label="// Email" id="email" type="email" placeholder="[email protected]" />
+      <LabelInput label="// Nome" id="name" type="text" />
+      <LabelInput label="// Assunto" id="subject" type="text" />
+      <LabelInput label="// Mensagem" id="message" type="text" isTextArea={true} />
+
+      <button
+        class="m-1 justify-self-start rounded-lg bg-vivid-red-900 px-5 py-1 text-white"
+        type="submit">Enviar</button
+      >
+    </form>
+    <div class="m-2 flex w-full justify-center md:m-5 md:my-0">
+      <Graph />
+    </div>
+  </div>
+  <picture>
+    <source media="(max-width: 767px)" srcset="/images/feup_buildings.svg" />
+    <source media="(min-width: 767px)" srcset="/images/feup_buildings_md.svg" />
+    <img
+      src="/images/feup_buildings.svg"
+      alt="Feup Buildings Outline"
+      class="align-center h-52 w-full justify-self-center object-none object-center"
+    />
+  </picture>
+  <span
+    id="location"
+    class="ml-3 flex justify-center overflow-x-hidden text-white md:justify-start md:self-center lg:w-[1039px]"
+  >
+    <Icon src={Icons.Pin} color="white" size="40" className="py-2 pl-1" />
+    <div>
+      <p>Rua Dr. Roberto Frias 4200-465, Porto</p>
+      <p>Sala B315</p>
+    </div>
+  </span>
+</section>

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

@@ -0,0 +1,11 @@
+import Graph from './graph.svelte';
+
+export default {
+  title: 'Organisms/Graph',
+  component: Graph,
+  parameters: {
+    layout: 'fullscreen'
+  }
+};
+
+export const Default = {};