Rotimi BestandAbdulmuizz Hamzat
9fb6c7cbaa
* 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 <[email protected]> * 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 <[email protected]>
89 lines
2.4 KiB
TypeScript
89 lines
2.4 KiB
TypeScript
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());
|
|
}
|