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>
2025-12-22 02:36:48 +01:00
parent e6a3cf9332
commit 9fb6c7cbaa
401 changed files with 10489 additions and 11679 deletions
@@ -0,0 +1,88 @@
+import { Context } from 'runed';
+import type { ReadableBoxedValues, WritableBoxedValues } from 'svelte-toolbelt';
+import type { Tabs as TabsPrimitive } from 'bits-ui';
+import { crossfade } from 'svelte/transition';
+
+export const [send, receive] = crossfade({
+	duration: (d) => Math.sqrt(d * 200)
+});
+
+type UnderlineTabsRootProps = WritableBoxedValues<{
+	value: string;
+}> &
+	ReadableBoxedValues<{
+		id: string;
+	}>;
+
+class UnderlineTabsRootState {
+	hoveredTab = $state<string | null>(null);
+	isHovered = $state(false);
+	constructor(readonly opts: UnderlineTabsRootProps) {
+		this.hoveredTab = this.opts.value.current;
+	}
+}
+
+type UnderlineTabsTriggerProps = ReadableBoxedValues<{
+	value: string;
+	onmouseenter: TabsPrimitive.TriggerProps['onmouseenter'];
+	onmouseleave: TabsPrimitive.TriggerProps['onmouseleave'];
+	onfocus: TabsPrimitive.TriggerProps['onfocus'];
+	onblur: TabsPrimitive.TriggerProps['onblur'];
+}>;
+
+class UnderlineTabsTriggerState {
+	constructor(
+		readonly opts: UnderlineTabsTriggerProps,
+		readonly rootState: UnderlineTabsRootState
+	) {}
+
+	handleFocus() {
+		this.rootState.isHovered = true;
+		this.rootState.hoveredTab = this.opts.value.current;
+	}
+
+	handleBlur() {
+		if (this.rootState.hoveredTab === this.opts.value.current) {
+			this.rootState.isHovered = false;
+		}
+	}
+
+	onmouseenter(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseenter']>>[0]) {
+		this.handleFocus();
+		this.opts.onmouseenter.current?.(e);
+	}
+
+	onmouseleave(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseleave']>>[0]) {
+		this.handleBlur();
+		this.opts.onmouseleave.current?.(e);
+	}
+
+	onfocus(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onfocus']>>[0]) {
+		this.handleFocus();
+		this.opts.onfocus.current?.(e);
+	}
+
+	onblur(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onblur']>>[0]) {
+		this.handleBlur();
+
+		this.opts.onblur.current?.(e);
+	}
+
+	props = $derived.by(() => ({
+		value: this.opts.value.current,
+		onmouseenter: this.onmouseenter.bind(this),
+		onmouseleave: this.onmouseleave.bind(this),
+		onfocus: this.onfocus.bind(this),
+		onblur: this.onblur.bind(this)
+	}));
+}
+
+const ctx = new Context<UnderlineTabsRootState>('underline-tabs-root-ctx');
+
+export function useUnderlineTabs(opts: UnderlineTabsRootProps) {
+	return ctx.set(new UnderlineTabsRootState(opts));
+}
+
+export function useUnderlineTabsTrigger(opts: UnderlineTabsTriggerProps) {
+	return new UnderlineTabsTriggerState(opts, ctx.get());
+}