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]>
2025-11-21 12:18:04 +01:00
parent 2145782385
commit cbf6ae7e63
499 changed files with 19708 additions and 15603 deletions
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import EllipsisIcon from '@lucide/svelte/icons/ellipsis';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef, type WithoutChildren } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    ...restProps
+  }: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="breadcrumb-ellipsis"
+  role="presentation"
+  aria-hidden="true"
+  class={cn('flex size-9 items-center justify-center', className)}
+  {...restProps}
+>
+  <EllipsisIcon class="size-4" />
+  <span class="sr-only">More</span>
+</span>
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn, type WithElementRef } from '../../tools';
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+	bind:this={ref}
+	data-slot="breadcrumb-item"
+	class={cn("inline-flex items-center gap-1.5", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</li>
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { HTMLAnchorAttributes } from 'svelte/elements';
+  import type { Snippet } from 'svelte';
+  import { cn, type WithElementRef } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    href = undefined,
+    child,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAnchorAttributes> & {
+    child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
+  } = $props();
+
+  const attrs = $derived({
+    'data-slot': 'breadcrumb-link',
+    class: cn('hover:text-foreground transition-colors', className),
+    href,
+    ...restProps
+  });
+</script>
+
+{#if child}
+  {@render child({ props: attrs })}
+{:else}
+  <a bind:this={ref} {...attrs}>
+    {@render children?.()}
+  </a>
+{/if}
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { HTMLOlAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../../tools';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLOlAttributes> = $props();
+</script>
+
+<ol
+  bind:this={ref}
+  data-slot="breadcrumb-list"
+  class={cn('text-muted-foreground flex flex-wrap items-center gap-1.5 break-words text-sm sm:gap-2.5', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</ol>
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import type { HTMLAttributes } from 'svelte/elements';
+  import { cn, type WithElementRef } from '../../tools';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> = $props();
+</script>
+
+<span
+  bind:this={ref}
+  data-slot="breadcrumb-page"
+  role="link"
+  aria-disabled="true"
+  aria-current="page"
+  class={cn('text-foreground font-normal', className)}
+  {...restProps}
+>
+  {@render children?.()}
+</span>
@@ -0,0 +1,22 @@
+<script lang="ts">
+  import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLLiAttributes } from 'svelte/elements';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: WithElementRef<HTMLLiAttributes> = $props();
+</script>
+
+<li
+  bind:this={ref}
+  data-slot="breadcrumb-separator"
+  role="presentation"
+  aria-hidden="true"
+  class={cn('[&>svg]:size-3.5', className)}
+  {...restProps}
+>
+  {#if children}
+    {@render children?.()}
+  {:else}
+    <ChevronRightIcon />
+  {/if}
+</li>
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> = $props();
+</script>
+
+<nav bind:this={ref} data-slot="breadcrumb" class={className} aria-label="breadcrumb" {...restProps}>
+  {@render children?.()}
+</nav>
@@ -0,0 +1,25 @@
+import Root from "./breadcrumb.svelte";
+import Ellipsis from "./breadcrumb-ellipsis.svelte";
+import Item from "./breadcrumb-item.svelte";
+import Separator from "./breadcrumb-separator.svelte";
+import Link from "./breadcrumb-link.svelte";
+import List from "./breadcrumb-list.svelte";
+import Page from "./breadcrumb-page.svelte";
+
+export {
+	Root,
+	Ellipsis,
+	Item,
+	Separator,
+	Link,
+	List,
+	Page,
+	//
+	Root as Breadcrumb,
+	Ellipsis as BreadcrumbEllipsis,
+	Item as BreadcrumbItem,
+	Separator as BreadcrumbSeparator,
+	Link as BreadcrumbLink,
+	List as BreadcrumbList,
+	Page as BreadcrumbPage,
+};