Add initial forms components

src/lib/components/forms/files-input.svelte

@@ -0,0 +1,31 @@
+<script>
+  let files = null;
+
+  $: () => {
+    if (files) {
+      console.log(files);
+      for (const file of files) {
+        console.log(`${file.name}: ${file.size} bytes`);
+      }
+    }
+  };
+</script>
+
+<div class="flex items-center space-x-4">
+  <label
+    for="file-upload"
+    class="muted-red cursor-pointer rounded-lg px-4 py-2 text-white hover:bg-red-600"
+  >
+    Selecionar ficheiro
+  </label>
+
+  <input id="file-upload" multiple type="file" bind:files class="hidden" />
+
+  {#if files}
+    {#each Array.from(files) as file}
+      <div class="rounded-lg bg-taupe-200 px-4 py-2 text-rose-950">
+        <p>{file.name}</p>
+      </div>
+    {/each}
+  {/if}
+</div>

src/lib/components/forms/picture-input.stories.ts

@@ -0,0 +1,18 @@
+import PictureInput from './picture-input.svelte';
+
+export default {
+  title: 'Atoms/Forms/Picture Input',
+  component: PictureInput,
+  argTypes: {
+    text: { control: 'text' }
+  },
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export const Example = {
+  args: {
+    text: 'Adicionar logo'
+  }
+};

src/lib/components/forms/picture-input.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+  import Icon from '$lib/components/icons/icon.svelte';
+  import Icons from '$lib/components/icons/icons';
+
+  export let text: string;
+  let avatar, fileinput;
+
+  const onFileSelected = (e) => {
+    let image = e.target.files[0];
+    let reader = new FileReader();
+    reader.readAsDataURL(image);
+    reader.onload = (e) => {
+      avatar = e.target.result;
+    };
+  };
+</script>
+
+<div id="app" class="flex flex-col items-center justify-center">
+  {#if avatar}
+    <div class="relative flex h-[200px] w-[200px] overflow-hidden rounded-md">
+      <img class="h-[200px] w-[200px] object-cover" src={avatar} alt="Avatar" />
+      <button
+        type="button"
+        aria-label="Change Avatar"
+        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+        on:click={() => {
+          fileinput.click();
+        }}
+        on:keydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            fileinput.click();
+          }
+        }}
+      >
+        <Icon src={Icons.Edit} color="white" size="70%" />
+      </button>
+      <input
+        style="display:none"
+        type="file"
+        accept=".jpg, .jpeg, .png"
+        on:change={(e) => onFileSelected(e)}
+        bind:this={fileinput}
+      />
+    </div>
+  {:else}
+    <div
+      class="relative flex h-[200px] w-[200px] items-center justify-center rounded-md bg-muted-red-400 text-center"
+    >
+      <p class="font-medium text-white">{text}<span class="text-4xl">*</span></p>
+      <button
+        type="button"
+        aria-label="Change Avatar"
+        class="absolute bottom-0 right-0 m-2 flex h-[15%] w-[15%] cursor-pointer items-center justify-center rounded-md bg-rose-950"
+        on:click={() => {
+          fileinput.click();
+        }}
+        on:keydown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            fileinput.click();
+          }
+        }}
+      >
+        <Icon src={Icons.Edit} color="white" size="60%" />
+      </button>
+      <input
+        style="display:none"
+        type="file"
+        accept=".jpg, .jpeg, .png"
+        on:change={(e) => onFileSelected(e)}
+        bind:this={fileinput}
+      />
+    </div>
+  {/if}
+</div>

src/lib/components/forms/radio-buttons.stories.ts

@@ -0,0 +1,18 @@
+import RadioButtons from './radio-buttons.svelte';
+
+export default {
+  title: 'Atoms/Forms/Radio Buttons',
+  component: RadioButtons,
+  argTypes: {
+    options: { control: 'array' }
+  },
+  parameters: {
+    layout: 'centered'
+  }
+};
+
+export const Example = {
+  args: {
+    options: ['English', 'Spanish']
+  }
+};

src/lib/components/forms/radio-buttons.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  export let options: string[];
+  let selectedOption: string;
+</script>
+
+<div>
+  {#each options as option}
+    <input
+      id="radio-{option}"
+      class="radio-button hidden text-center"
+      type="radio"
+      bind:group={selectedOption}
+      value={option}
+    />
+    <label
+      class="m-1 justify-self-start rounded-lg bg-taupe-200 px-5 py-1 text-rose-950"
+      for="radio-{option}"
+    >
+      {option}
+    </label>
+  {/each}
+</div>
+
+<style>
+  .radio-button:checked + label {
+    background-color: theme('colors.muted-red.400');
+    color: theme('colors.taupe.100');
+  }
+</style>

src/lib/components/icons/icons.ts

@@ -10,6 +10,7 @@ import {
 } from 'svelte-icons-pack/fa';
 import { BiMap } from 'svelte-icons-pack/bi';
 import { IoMail, IoClose, IoEye, IoEyeOff } from 'svelte-icons-pack/io';
+import { FiEdit2 } from 'svelte-icons-pack/fi';
 
 const Icons = {
   Instagram: FaBrandsInstagram,
@@ -24,7 +25,8 @@ const Icons = {
   Globe: FaSolidGlobe,
   Pin: BiMap,
   Visible: IoEye,
-  Hidden: IoEyeOff
+  Hidden: IoEyeOff,
+  Edit: FiEdit2
 };
 
 export default Icons;

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

@@ -1,7 +1,7 @@
 <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 LabelInput from '@/lib/components/forms/label-input.svelte';
   import Icons from '$lib/components/icons/icons';
 </script>