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 <[email protected]>

packages/ui/src/base/select/index.ts

@@ -0,0 +1,37 @@
+import { Select as SelectPrimitive } from "bits-ui";
+
+import Group from "./select-group.svelte";
+import Label from "./select-label.svelte";
+import Item from "./select-item.svelte";
+import Content from "./select-content.svelte";
+import Trigger from "./select-trigger.svelte";
+import Separator from "./select-separator.svelte";
+import ScrollDownButton from "./select-scroll-down-button.svelte";
+import ScrollUpButton from "./select-scroll-up-button.svelte";
+import GroupHeading from "./select-group-heading.svelte";
+
+const Root = SelectPrimitive.Root;
+
+export {
+	Root,
+	Group,
+	Label,
+	Item,
+	Content,
+	Trigger,
+	Separator,
+	ScrollDownButton,
+	ScrollUpButton,
+	GroupHeading,
+	//
+	Root as Select,
+	Group as SelectGroup,
+	Label as SelectLabel,
+	Item as SelectItem,
+	Content as SelectContent,
+	Trigger as SelectTrigger,
+	Separator as SelectSeparator,
+	ScrollDownButton as SelectScrollDownButton,
+	ScrollUpButton as SelectScrollUpButton,
+	GroupHeading as SelectGroupHeading,
+};

packages/ui/src/base/select/select-content.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import SelectScrollUpButton from './select-scroll-up-button.svelte';
+  import SelectScrollDownButton from './select-scroll-down-button.svelte';
+  import { cn, type WithoutChild } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    sideOffset = 4,
+    portalProps,
+    children,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ContentProps> & {
+    portalProps?: SelectPrimitive.PortalProps;
+  } = $props();
+</script>
+
+<SelectPrimitive.Portal {...portalProps}>
+  <SelectPrimitive.Content
+    bind:ref
+    {sideOffset}
+    data-slot="select-content"
+    class={cn(
+      'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) relative z-50 min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border shadow-md data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+      className
+    )}
+    {...restProps}
+  >
+    <SelectScrollUpButton />
+    <SelectPrimitive.Viewport
+      class={cn('h-(--bits-select-anchor-height) min-w-(--bits-select-anchor-width) w-full scroll-my-1 p-1')}
+    >
+      {@render children?.()}
+    </SelectPrimitive.Viewport>
+    <SelectScrollDownButton />
+  </SelectPrimitive.Content>
+</SelectPrimitive.Portal>

packages/ui/src/base/select/select-group-heading.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+  import type { ComponentProps } from 'svelte';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();
+</script>
+
+<SelectPrimitive.GroupHeading
+  bind:ref
+  data-slot="select-group-heading"
+  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</SelectPrimitive.GroupHeading>

packages/ui/src/base/select/select-group.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Select as SelectPrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: SelectPrimitive.GroupProps = $props();
+</script>
+
+<SelectPrimitive.Group data-slot="select-group" {...restProps} />

packages/ui/src/base/select/select-item.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+  import CheckIcon from '@lucide/svelte/icons/check';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChild } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    value,
+    label,
+    children: childrenProp,
+    ...restProps
+  }: WithoutChild<SelectPrimitive.ItemProps> = $props();
+</script>
+
+<SelectPrimitive.Item
+  bind:ref
+  {value}
+  data-slot="select-item"
+  class={cn(
+    "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground outline-hidden *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {#snippet children({ selected, highlighted })}
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      {#if selected}
+        <CheckIcon class="size-4" />
+      {/if}
+    </span>
+    {#if childrenProp}
+      {@render childrenProp({ selected, highlighted })}
+    {:else}
+      {label || value}
+    {/if}
+  {/snippet}
+</SelectPrimitive.Item>

packages/ui/src/base/select/select-label.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();
+</script>
+
+<div
+  bind:this={ref}
+  data-slot="select-label"
+  class={cn('text-muted-foreground px-2 py-1.5 text-xs', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</div>

packages/ui/src/base/select/select-scroll-down-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollDownButton
+  bind:ref
+  data-slot="select-scroll-down-button"
+  class={cn('flex cursor-default items-center justify-center py-1', className)}
+  {...restProps}
+>
+  <ChevronDownIcon class="size-4" />
+</SelectPrimitive.ScrollDownButton>

packages/ui/src/base/select/select-scroll-up-button.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import { cn, type WithoutChildrenOrChild } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();
+</script>
+
+<SelectPrimitive.ScrollUpButton
+  bind:ref
+  data-slot="select-scroll-up-button"
+  class={cn('flex cursor-default items-center justify-center py-1', className)}
+  {...restProps}
+>
+  <ChevronUpIcon class="size-4" />
+</SelectPrimitive.ScrollUpButton>

packages/ui/src/base/select/select-separator.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Separator as SeparatorPrimitive } from 'bits-ui';
+  import { Separator } from '../separator';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: SeparatorPrimitive.RootProps = $props();
+</script>
+
+<Separator
+  bind:ref
+  data-slot="select-separator"
+  class={cn('bg-border pointer-events-none -mx-1 my-1 h-px', className)}
+  {...restProps}
+/>

packages/ui/src/base/select/select-trigger.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Select as SelectPrimitive } from 'bits-ui';
+  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
+  import { cn, type WithoutChild } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    size = 'default',
+    ...restProps
+  }: WithoutChild<SelectPrimitive.TriggerProps> & {
+    size?: 'sm' | 'default';
+  } = $props();
+</script>
+
+<SelectPrimitive.Trigger
+  bind:ref
+  data-slot="select-trigger"
+  data-size={size}
+  class={cn(
+    "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 shadow-xs flex w-fit select-none items-center justify-between gap-2 whitespace-nowrap rounded-md border bg-transparent px-3 py-2 text-sm outline-none transition-[color,box-shadow] focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+  <ChevronDownIcon class="size-4 opacity-50" />
+</SelectPrimitive.Trigger>