feat: migrate course UI from supabase (#615)

* chore: fix storybook build

* chore: implement theming

* community list not showing properly

* refactor: migrate Chip component to @cio/ui/custom/chip

- Updated imports for the Chip component across multiple files to use the new location in the @cio/ui package.
- Replaced the previous Chip implementation with a new version that utilizes a Badge for better styling and functionality.
- Adjusted related components to ensure consistent usage of the updated Chip component.

* fix: align course sidebar design to match organization design (#611)

* fix: align course sidebar design to match organization design

* feat: add hideSearch prop to AppHeader and update sidebar layout

---------

Co-authored-by: Rotimi Best <best@classroomio.com>

* refactor: replace PrimaryButton with Button component across multiple files

- Updated various components to use the new Button component from @cio/ui/base/button instead of the deprecated PrimaryButton.
- Ensured consistent button usage throughout the application for improved styling and functionality.
- Removed the PrimaryButton component and its associated constants from the codebase.

* refactor: standardize button and input usage across components

- Replaced instances of deprecated components such as TextField, TextArea, and IconButton with their updated counterparts (InputField, TextareaField, and updated IconButton).
- Ensured consistent event handling by changing `onClick` to `onclick` for better alignment with Svelte's event binding conventions.
- Removed unused components and streamlined imports to enhance code maintainability and readability.

* chore: themeing, course card, use $features

* refactor: centralize UI components and update modal implementations

- Refactored various components to centralize UI elements, improving discoverability and maintainability.
- Replaced deprecated modal components with the new Dialog component for consistent modal behavior across the application.
- Removed unused components and streamlined imports to enhance code clarity and reduce complexity.

* feat: add new documentation and refactor org and lms UI components

- Introduced new documentation files for Auth Flow, Breadcrumbs Refactoring, Page and Route Creation, and Route Page Setup to enhance developer onboarding and reference.
- Refactored various UI components, including the Course Sidebar and Lesson Modal, to improve layout and functionality.
- Removed deprecated components and streamlined imports for better maintainability.
- Updated translations across multiple languages to ensure consistency in user experience.

* refactor: update UI components and improve styling consistency

- Refactored various components to enhance styling consistency, including updates to button and text color classes.
- Removed deprecated components and streamlined imports for better maintainability.
- Replaced instances of PageBody with a more flexible Page component structure across multiple routes.
- Updated translations and UI elements to align with the new design system.
- Deleted unused components to reduce code complexity and improve clarity.

* update output.css

---------

Co-authored-by: Abdulmuizz Hamzat <103611443+canhamzacode@users.noreply.github.com>

packages/ui/src/base/button/button.svelte

@@ -117,7 +117,7 @@
   {#if type !== undefined && loading}
     <div class="ui:absolute ui:flex ui:size-full ui:place-items-center ui:justify-center ui:bg-inherit">
       <div class="ui:flex ui:animate-spin ui:place-items-center ui:justify-center">
-        <LoaderCircleIcon class="ui:size-4" />
+        <LoaderCircleIcon class="custom ui:size-4" />
       </div>
     </div>
     <span class="ui:sr-only">Loading</span>

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

@@ -14,7 +14,7 @@
   bind:this={ref}
   data-slot="item-description"
   class={cn(
-    'ui:text-muted-foreground ui:line-clamp-2 ui:text-balance ui:text-sm ui:font-normal ui:leading-normal',
+    'ui:text-muted-foreground ui:line-clamp-3 ui:text-balance ui:text-sm ui:font-normal ui:leading-normal',
     'ui:[&>a:hover]:text-primary ui:[&>a]:underline ui:[&>a]:underline-offset-4',
     className
   )}

packages/ui/src/base/page/page-body.svelte

@@ -16,7 +16,7 @@
 <div
   bind:this={ref}
   data-slot="page-body"
-  class={cn('ui:flex-1 ui:flex ui:gap-4 ui:flex-col ui:overflow-y-auto', className)}
+  class={cn('ui:flex-1 ui:flex ui:gap-4 ui:flex-col ui:mb-4', className)}
   {...restProps}
 >
   {#if child}

packages/ui/src/base/page/page.svelte

@@ -13,7 +13,7 @@
 <div
   bind:this={ref}
   data-slot="page"
-  class={cn('ui:flex ui:flex-col ui:gap-4 ui:min-h-[calc(100vh-48px)]', className)}
+  class={cn('ui:flex ui:flex-col ui:gap-4 ui:min-h-[calc(100vh-48px)] ui:w-full', className)}
   {...restProps}
 >
   {@render children?.()}

packages/ui/src/base/progress/progress.svelte

@@ -14,7 +14,7 @@
 <ProgressPrimitive.Root
   bind:ref
   data-slot="progress"
-  class={cn('ui:bg-primary/20 ui:relative ui:h-2 ui:w-full ui:overflow-hidden ui:rounded-full', className)}
+  class={cn('ui:bg-primary/20 ui:relative ui:h-2 ui:w-full ui:overflow-hidden ui:rounded-md', className)}
   {value}
   {max}
   {...restProps}

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

@@ -9,7 +9,7 @@
   bind:ref
   data-slot="tabs-trigger"
   class={cn(
-    "ui:data-[state=active]:bg-background ui:dark:data-[state=active]:text-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:focus-visible:outline-ring ui:dark:data-[state=active]:border-input ui:dark:data-[state=active]:bg-input/30 ui:text-foreground ui:dark:text-muted-foreground ui:inline-flex ui:h-[calc(100%-1px)] ui:flex-1 ui:items-center ui:justify-center ui:gap-1.5 ui:whitespace-nowrap ui:rounded-md ui:border ui:border-transparent ui:px-2 ui:py-1 ui:text-sm ui:font-medium ui:transition-[color,box-shadow] ui:focus-visible:outline-1 ui:focus-visible:ring-[3px] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:data-[state=active]:shadow-sm ui:[&_svg:not([class*='size-'])]:size-4 ui:[&_svg]:pointer-events-none ui:[&_svg]:shrink-0",
+    "ui:data-[state=active]:bg-background ui:dark:data-[state=active]:text-foreground ui:focus-visible:border-ring ui:focus-visible:ring-ring/50 ui:focus-visible:outline-ring ui:dark:data-[state=active]:border-input ui:dark:data-[state=active]:bg-input/30 ui:text-foreground ui:dark:text-muted-foreground ui:inline-flex ui:h-[calc(100%-1px)] ui:flex-1 ui:items-center ui:justify-center ui:gap-1.5 ui:whitespace-nowrap ui:rounded-md ui:border ui:border-transparent ui:px-2 ui:py-1 ui:text-sm ui:font-medium ui:transition-[color,box-shadow] ui:focus-visible:outline-1 ui:focus-visible:ring-[3px] ui:data-disabled:pointer-events-none ui:data-disabled:opacity-50 ui:data-[state=active]:shadow-sm ui:[&_svg:not([class*='size-'])]:size-4 ui:[&_svg]:pointer-events-none ui:[&_svg]:shrink-0 ui:cursor-pointer",
     className
   )}
   {...restProps}