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,80 @@
+<script lang="ts">
+  import { cn, type WithElementRef } from '../../tools';
+  import type { HTMLAttributes } from 'svelte/elements';
+  import ChartStyle from './chart-style.svelte';
+  import { setChartContext, type ChartConfig } from './chart-utils.js';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    id = uid,
+    class: className,
+    children,
+    config,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>> & {
+    config: ChartConfig;
+  } = $props();
+
+  const chartId = `chart-${id || uid.replace(/:/g, '')}`;
+
+  setChartContext({
+    get config() {
+      return config;
+    }
+  });
+</script>
+
+<div
+  bind:this={ref}
+  data-chart={chartId}
+  data-slot="chart"
+  class={cn(
+    'flex aspect-video justify-center overflow-visible text-xs',
+    // Overrides
+    //
+    // Stroke around dots/marks when hovering
+    '[&_.stroke-white]:stroke-transparent',
+    // override the default stroke color of lines
+    '[&_.lc-line]:stroke-border/50',
+
+    // by default, layerchart shows a line intersecting the point when hovering, this hides that
+    '[&_.lc-highlight-line]:stroke-0',
+
+    // by default, when you hover a point on a stacked series chart, it will drop the opacity
+    // of the other series, this overrides that
+    '[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text-svg]:overflow-visible [&_.lc-text]:text-xs',
+
+    // We don't want the little tick lines between the axis labels and the chart, so we remove
+    // the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+    // chart.
+    '[&_.lc-axis-tick]:stroke-0',
+
+    // We don't want to display the rule on the x/y axis, as there is already going to be
+    // a grid line there and rule ends up overlapping the marks because it is rendered after
+    // the marks
+    '[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0',
+    '[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border',
+    '[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border',
+
+    // Legend adjustments
+    '[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5',
+    '[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4',
+    '[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]',
+
+    // Labels
+    '[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent',
+
+    // Tick labels on th x/y axes
+    '[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal',
+    '[&_.lc-tooltip-rects-g]:fill-transparent',
+    '[&_.lc-layout-svg-g]:fill-transparent',
+    '[&_.lc-root-container]:w-full',
+    className
+  )}
+  {...restProps}
+>
+  <ChartStyle id={chartId} {config} />
+  {@render children?.()}
+</div>