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 <[email protected]> * 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 <[email protected]>
2025-11-01 16:18:29 +01:00
parent 0fb66a3782
commit f5a4156c8b
159 changed files with 15225 additions and 3722 deletions
@@ -0,0 +1,4 @@
+import { type ComponentProps } from 'svelte';
+import { Skeleton } from '@cio/ui/base/skeleton';
+
+export const FIELDS: (keyof ComponentProps<typeof Skeleton>)[] = ['class'];
@@ -0,0 +1,77 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Skeleton } from '@cio/ui/base/skeleton';
+  import { FIELDS } from './fields';
+
+  const { Story } = defineMeta({
+    title: 'Atom/Skeleton',
+    component: Skeleton,
+    parameters: {
+      layout: 'centered',
+      controls: {
+        include: FIELDS
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template(args)}
+    <Skeleton {...args} class="h-4 w-[250px]" />
+  {/snippet}
+</Story>
+
+<Story name="Circle">
+  {#snippet template(args)}
+    <Skeleton {...args} class="h-12 w-12 rounded-full" />
+  {/snippet}
+</Story>
+
+<Story name="Card">
+  {#snippet template()}
+    <div class="flex items-center space-x-4">
+      <Skeleton class="h-12 w-12 rounded-full" />
+      <div class="space-y-2">
+        <Skeleton class="h-4 w-[250px]" />
+        <Skeleton class="h-4 w-[200px]" />
+      </div>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Multiple Lines">
+  {#snippet template()}
+    <div class="space-y-2">
+      <Skeleton class="h-4 w-[350px]" />
+      <Skeleton class="h-4 w-[300px]" />
+      <Skeleton class="h-4 w-[250px]" />
+      <Skeleton class="h-4 w-[200px]" />
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Button">
+  {#snippet template(args)}
+    <Skeleton {...args} class="h-10 w-20" />
+  {/snippet}
+</Story>
+
+<Story name="Loading State">
+  {#snippet template()}
+    <div class="space-y-4 rounded-lg border p-4">
+      <div class="flex items-center space-x-4">
+        <Skeleton class="h-12 w-12 rounded-full" />
+        <div class="space-y-2">
+          <Skeleton class="h-4 w-[200px]" />
+          <Skeleton class="h-4 w-40" />
+        </div>
+      </div>
+      <Skeleton class="h-[200px] w-full" />
+      <div class="flex space-x-2">
+        <Skeleton class="h-8 w-16" />
+        <Skeleton class="h-8 w-16" />
+      </div>
+    </div>
+  {/snippet}
+</Story>