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/button/button.svelte

@@ -2,6 +2,7 @@
   import { cn, type WithElementRef } from '../../tools';
   import type { HTMLAnchorAttributes, HTMLButtonAttributes } from 'svelte/elements';
   import { type VariantProps, tv } from 'tailwind-variants';
+  import { Spinner } from '../spinner';
 
   export const buttonVariants = tv({
     base: "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium outline-none transition-all focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
@@ -38,6 +39,7 @@
     WithElementRef<HTMLAnchorAttributes> & {
       variant?: ButtonVariant;
       size?: ButtonSize;
+      isLoading?: boolean;
     };
 </script>
 
@@ -48,11 +50,13 @@
     size = 'default',
     ref = $bindable(null),
     href = undefined,
+    isLoading = false,
     type = 'button',
-    disabled,
     children,
     ...restProps
   }: ButtonProps = $props();
+
+  let disabled = $derived(restProps.disabled || isLoading);
 </script>
 
 {#if href}
@@ -66,6 +70,9 @@
     tabindex={disabled ? -1 : undefined}
     {...restProps}
   >
+    {#if isLoading}
+      <Spinner />
+    {/if}
     {@render children?.()}
   </a>
 {:else}
@@ -77,6 +84,9 @@
     {disabled}
     {...restProps}
   >
+    {#if isLoading}
+      <Spinner />
+    {/if}
     {@render children?.()}
   </button>
 {/if}