feat: move away from carbon components and TinyMCE (#597)

* feat: remove tinymce & replace org sidebar * chore: PR Fixes * chore: move ui font into src dir * remove files in vite config * use google font import for loading font * remove custom font * more fonts update * remove font bold * more removals of font bold * fix import * checkpoint * chore: checkpoint (add course & lms shadcn sidebar) * minor css improvements and try out font sans * chore: replace carbon components with shadcn's * chore: replace carbon components with shadcn _ v3 * chore: ui fixes & storybook update * feat: UI cleanup * fix: quick ui fixes * chore: update pnpm-lock.yaml with new dependencies and versions; fix output.css formatting * chore: add isloading to button * feat: add loading state to button stories * chore: feedback fixes * fix: feedback fixes * chore: remove console * fix: PR comments * fix: PR comments --------- Co-authored-by: Rotimi Best <best@classroomio.com>
2025-11-21 12:18:04 +01:00
parent 2145782385
commit cbf6ae7e63
499 changed files with 19708 additions and 15603 deletions
@@ -0,0 +1,10 @@
+import { type ComponentProps } from 'svelte';
+import { Menubar } from '@cio/ui/base/menubar';
+
+export const FIELDS: (keyof ComponentProps<typeof Menubar>)[] = [
+  'onValueChange',
+  'value',
+  'dir',
+  'onOpenChange',
+  'disabled'
+];
@@ -0,0 +1,90 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import * as Menubar from '@cio/ui/base/menubar';
+  import { FIELDS } from './fields';
+
+  const { Story } = defineMeta({
+    title: 'Atom/Menubar',
+    component: Menubar.Root,
+    parameters: {
+      layout: 'centered',
+      controls: {
+        include: FIELDS
+      }
+    },
+    argTypes: {
+      value: {
+        control: 'text',
+        description: 'The controlled value of the active menu'
+      },
+      onValueChange: {
+        control: false,
+        description: 'Callback function when the active menu changes'
+      },
+      dir: {
+        control: 'select',
+        options: ['ltr', 'rtl'],
+        description: 'The reading direction of the menubar'
+      },
+      onOpenChange: {
+        control: false,
+        description: 'Callback function when the open state changes'
+      },
+      ref: {
+        control: false,
+        description: 'The underlying DOM element reference'
+      },
+      disabled: {
+        control: 'boolean',
+        description: 'Whether the menubar is disabled'
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <Menubar.Root>
+      <Menubar.Menu>
+        <Menubar.Trigger>File</Menubar.Trigger>
+        <Menubar.Content>
+          <Menubar.Item>
+            New Tab <span class="ml-auto text-xs">⌘T</span>
+          </Menubar.Item>
+          <Menubar.Item>
+            New Window <span class="ml-auto text-xs">⌘N</span>
+          </Menubar.Item>
+          <Menubar.Separator />
+          <Menubar.Item>Share</Menubar.Item>
+          <Menubar.Separator />
+          <Menubar.Item>Print</Menubar.Item>
+        </Menubar.Content>
+      </Menubar.Menu>
+      <Menubar.Menu>
+        <Menubar.Trigger>Edit</Menubar.Trigger>
+        <Menubar.Content>
+          <Menubar.Item>
+            Undo <span class="ml-auto text-xs">⌘Z</span>
+          </Menubar.Item>
+          <Menubar.Item>
+            Redo <span class="ml-auto text-xs">⇧⌘Z</span>
+          </Menubar.Item>
+          <Menubar.Separator />
+          <Menubar.Item>Cut</Menubar.Item>
+          <Menubar.Item>Copy</Menubar.Item>
+          <Menubar.Item>Paste</Menubar.Item>
+        </Menubar.Content>
+      </Menubar.Menu>
+      <Menubar.Menu>
+        <Menubar.Trigger>View</Menubar.Trigger>
+        <Menubar.Content>
+          <Menubar.CheckboxItem checked={true}>Always Show Bookmarks Bar</Menubar.CheckboxItem>
+          <Menubar.CheckboxItem>Always Show Full URLs</Menubar.CheckboxItem>
+          <Menubar.Separator />
+          <Menubar.Item>Reload <span class="ml-auto text-xs">⌘R</span></Menubar.Item>
+        </Menubar.Content>
+      </Menubar.Menu>
+    </Menubar.Root>
+  {/snippet}
+</Story>