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>

packages/storybook/src/atoms/radio-group/fields.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps } from 'svelte';
+import { RadioGroup } from '@cio/ui/base/radio-group';
+
+export const FIELDS: (keyof ComponentProps<typeof RadioGroup>)[] = [
+  'value',
+  'onValueChange',
+  'disabled',
+  'required',
+  'name',
+  'loop',
+  'orientation'
+];

packages/storybook/src/atoms/radio-group/radio-group.stories.svelte

@@ -0,0 +1,65 @@
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import * as RadioGroup from '@cio/ui/base/radio-group';
+  import { Label } from '@cio/ui/base/label';
+  import { FIELDS } from './fields';
+
+  const { Story } = defineMeta({
+    title: 'Atom/RadioGroup',
+    component: RadioGroup.Root,
+    parameters: {
+      layout: 'centered',
+      controls: {
+        include: FIELDS
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template()}
+    <RadioGroup.Root value="option-1">
+      <div class="flex items-center space-x-2">
+        <RadioGroup.Item value="option-1" id="option-1" />
+        <Label for="option-1">Option 1</Label>
+      </div>
+      <div class="flex items-center space-x-2">
+        <RadioGroup.Item value="option-2" id="option-2" />
+        <Label for="option-2">Option 2</Label>
+      </div>
+      <div class="flex items-center space-x-2">
+        <RadioGroup.Item value="option-3" id="option-3" />
+        <Label for="option-3">Option 3</Label>
+      </div>
+    </RadioGroup.Root>
+  {/snippet}
+</Story>
+
+<Story name="With Descriptions">
+  {#snippet template()}
+    <RadioGroup.Root value="comfortable" class="space-y-4">
+      <div class="flex items-start space-x-2">
+        <RadioGroup.Item value="default" id="r1" class="mt-1" />
+        <div>
+          <Label for="r1" class="font-medium">Default</Label>
+          <p class="text-muted-foreground text-sm">The standard spacing for your app</p>
+        </div>
+      </div>
+      <div class="flex items-start space-x-2">
+        <RadioGroup.Item value="comfortable" id="r2" class="mt-1" />
+        <div>
+          <Label for="r2" class="font-medium">Comfortable</Label>
+          <p class="text-muted-foreground text-sm">More space for easier interaction</p>
+        </div>
+      </div>
+      <div class="flex items-start space-x-2">
+        <RadioGroup.Item value="compact" id="r3" class="mt-1" />
+        <div>
+          <Label for="r3" class="font-medium">Compact</Label>
+          <p class="text-muted-foreground text-sm">Less space, more content</p>
+        </div>
+      </div>
+    </RadioGroup.Root>
+  {/snippet}
+</Story>