chore: format code

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

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

@@ -7,7 +7,7 @@ export default {
     text: { control: 'text' }
   },
   parameters: {
-    layout: 'centered',
+    layout: 'centered'
   }
 };
 

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

@@ -1,38 +1,74 @@
-<script lang='ts'>
-    import Icon from '$lib/components/icons/icon.svelte';
-    import Icons from '$lib/components/icons/icons';
+<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>
+  export let text: string;
+  let avatar, fileinput;
 
-<div id="app" class="flex items-center justify-center flex-col">
-
-        {#if avatar}
-        <div class="flex h-[200px] w-[200px] rounded-md overflow-hidden relative">
-            <img class="h-[200px] w-[200px] object-cover" src="{avatar}" alt="Avatar" />
-            <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" 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="bg-muted-red-400 flex items-center justify-center rounded-md h-[200px] w-[200px] text-center relative">
-            <p class="text-white font-medium">{text}<span class="text-4xl">*</span></p>
-            <button type="button" aria-label="Change Avatar" class="bg-rose-950 rounded-md h-[15%] w-[15%] flex items-center justify-center cursor-pointer absolute bottom-0 right-0 m-2" 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}
+  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

@@ -7,7 +7,7 @@ export default {
     options: { control: 'array' }
   },
   parameters: {
-    layout: 'centered',
+    layout: 'centered'
   }
 };
 

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

@@ -1,23 +1,29 @@
-<script lang='ts'>
-    export let options: string[];
-    let selectedOption: string;
+<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}
+  {#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');
-    }
+  .radio-button:checked + label {
+    background-color: theme('colors.muted-red.400');
+    color: theme('colors.taupe.100');
+  }
 </style>

src/lib/components/icons/icons.ts

@@ -10,7 +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";
+import { FiEdit2 } from 'svelte-icons-pack/fi';
 
 const Icons = {
   Instagram: FaBrandsInstagram,

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

@@ -1,5 +0,0 @@
-<script>
-    import PictureInput from '$lib/components/forms/picture-input.svelte';
-</script>
-
-<PictureInput text="Adicionar logo"/>