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,62 @@
+import type { EditorProps } from '@cio/ui/custom/editor/types';
+
+export const FIELDS: (keyof EditorProps)[] = [
+  'showToolBar',
+  'editable',
+  'enablePersistence',
+  'contentStorageKey',
+  'editableStorageKey',
+  'class',
+  'editorClass'
+];
+
+export const DEFAULT_CONTENT = {
+  type: 'doc',
+  content: [
+    {
+      type: 'heading',
+      attrs: { level: 1 },
+      content: [{ type: 'text', text: 'Welcome to the Editor' }]
+    },
+    {
+      type: 'paragraph',
+      content: [
+        { type: 'text', text: 'This is a ' },
+        { type: 'text', marks: [{ type: 'bold' }], text: 'rich text editor' },
+        { type: 'text', text: ' with support for various formatting options.' }
+      ]
+    },
+    {
+      type: 'bulletList',
+      content: [
+        {
+          type: 'listItem',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'Support for lists' }]
+            }
+          ]
+        },
+        {
+          type: 'listItem',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'Rich text formatting' }]
+            }
+          ]
+        },
+        {
+          type: 'listItem',
+          content: [
+            {
+              type: 'paragraph',
+              content: [{ type: 'text', text: 'And much more!' }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
@@ -0,0 +1,82 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { Editor } from '@cio/ui/custom/editor';
+  import { FIELDS, DEFAULT_CONTENT } from './constants';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/Editor',
+    component: Editor,
+    parameters: {
+      layout: 'padded',
+      controls: {
+        include: FIELDS
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Editor />
+  {/snippet}
+</Story>
+
+<Story name="With Sample Content">
+  {#snippet template()}
+    <Editor content={DEFAULT_CONTENT} />
+  {/snippet}
+</Story>
+
+<Story name="Read Only">
+  {#snippet template()}
+    <Editor content={DEFAULT_CONTENT} editable={false} />
+  {/snippet}
+</Story>
+
+<Story name="Without Toolbar">
+  {#snippet template()}
+    <Editor content={DEFAULT_CONTENT} showToolBar={false} />
+  {/snippet}
+</Story>
+
+<Story name="With Persistence">
+  {#snippet template()}
+    <Editor content={DEFAULT_CONTENT} enablePersistence={true} contentStorageKey="storybook-editor-content" />
+  {/snippet}
+</Story>
+
+<Story name="Custom Styling">
+  {#snippet template()}
+    <Editor
+      content={DEFAULT_CONTENT}
+      class="mx-auto max-w-4xl rounded-lg border-2 border-blue-300"
+      editorClass="h-64 p-4 bg-gray-50"
+    />
+  {/snippet}
+</Story>
+
+<Story name="With Callbacks">
+  {#snippet template()}
+    <Editor
+      content={DEFAULT_CONTENT}
+      onContentChange={(content) => console.log('Content changed:', content)}
+      onEditorReady={(editor) => console.log('Editor ready:', editor)}
+    />
+  {/snippet}
+</Story>
+
+<Story name="Multiple Editors">
+  {#snippet template()}
+    <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+      <div>
+        <h3 class="mb-2 text-lg font-semibold">Article</h3>
+        <Editor content={DEFAULT_CONTENT} contentStorageKey="article-content" enablePersistence={true} />
+      </div>
+      <div>
+        <h3 class="mb-2 text-lg font-semibold">Notes</h3>
+        <Editor showToolBar={false} editorClass="h-48" contentStorageKey="notes-content" enablePersistence={true} />
+      </div>
+    </div>
+  {/snippet}
+</Story>