feat: migrate dashboard to svelte 5 (#577)

* chore: migration to SvelteKit 2 * stage 1: migrate to svelte 5 and fix rerendering issues * stage 2: fix more $: reactivity across dashboard * fix merge conflicts * chore: migrate code in main to svelte 5 * chore: update preventDefault * chore: simplify tsconfig and remove unused mobileMenuRef in MobileMenu.svelte * chore: enforce .ts across dashboard * rename from classroomio-com to website * stage-3: Replace carbon icon svelte with lucide icon * update lock file * chore: finish icon replacement * fix: settings and setup page multiple rerender * stage 3: More icon and rerendering fixes * feat: checkpoint * feat: update editor * [not working] connect everything with ui build * storybook + ui + dashboard all working independently * add bg-black to +page.svelte * feat: add editor to storybook * chore: animate lucid icons (#590) * v1 animations * feat: change some course navigation icons & animate org navigation icons * chore: change settings icon * chore: use css instead of js for hover * rename animations --------- Co-authored-by: tunny17 <tvnji01@gmail.com> * chore: update path to node_modules types in api tsconfig * fix: update import path for DropdownMenu component * fix: add rollupOptions to build configuration in vite.config.ts * fix: remove rollupOptions from build configuration and add @floating-ui/dom dependency * install --------- Co-authored-by: tunny17 <tvnji01@gmail.com>
2025-11-01 16:18:29 +01:00
parent 0fb66a3782
commit f5a4156c8b
159 changed files with 15225 additions and 3722 deletions
@@ -0,0 +1,14 @@
+import { type ComponentProps } from 'svelte';
+import { Input } from '@cio/ui/base/input';
+
+export const FIELDS: (keyof ComponentProps<typeof Input>)[] = [
+  'value',
+  'type',
+  'placeholder',
+  'disabled',
+  'class',
+  'id',
+  'name',
+  'required',
+  'readonly'
+];
@@ -0,0 +1,66 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Input } from '@cio/ui/base/input';
+  import { Label } from '@cio/ui/base/label';
+  import { FIELDS } from './fields';
+
+  const { Story } = defineMeta({
+    title: 'Atom/Input',
+    component: Input,
+    parameters: {
+      layout: 'centered',
+      controls: {
+        include: FIELDS
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default" args={{ placeholder: 'Enter text...' }} />
+
+<Story name="With Label">
+  {#snippet template()}
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <Label for="email">Email</Label>
+      <Input type="email" id="email" placeholder="Email" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Password">
+  {#snippet template()}
+    <Input type="password" placeholder="Password" />
+  {/snippet}
+</Story>
+
+<Story name="Disabled">
+  {#snippet template()}
+    <Input disabled placeholder="Disabled input" />
+  {/snippet}
+</Story>
+
+<Story name="With Error">
+  {#snippet template()}
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <Label for="email-error">Email</Label>
+      <Input type="email" id="email-error" placeholder="Email" class="border-red-500" />
+      <p class="text-sm text-red-500">This field is required</p>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="File Input">
+  {#snippet template()}
+    <div class="grid w-full max-w-sm items-center gap-1.5">
+      <Label for="picture">Picture</Label>
+      <Input id="picture" type="file" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Search">
+  {#snippet template()}
+    <Input type="search" placeholder="Search..." />
+  {/snippet}
+</Story>