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 <[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]>
This commit is contained in:
Rotimi Best
co-authored by
Abdulmuizz Hamzat
Abdulmuizz Hamzat
parent
e6a3cf9332
commit
9fb6c7cbaa
@@ -1,5 +1,5 @@
|
||||
<script module>
|
||||
import { UnderlineTabs } from '@cio/ui';
|
||||
import * as UnderlineTabs from '@cio/ui/custom/underline-tabs';
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
@@ -43,33 +43,31 @@
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template(args)}
|
||||
<div class="ui:w-[400px]">
|
||||
<UnderlineTabs.Root {...args} value="home">
|
||||
<div class="w-lg">
|
||||
<UnderlineTabs.Root {...args} value="note">
|
||||
<UnderlineTabs.List>
|
||||
<UnderlineTabs.Trigger value="home">Home</UnderlineTabs.Trigger>
|
||||
<UnderlineTabs.Trigger value="profile">Profile</UnderlineTabs.Trigger>
|
||||
<UnderlineTabs.Trigger value="settings">Settings</UnderlineTabs.Trigger>
|
||||
<UnderlineTabs.Trigger value="note">Note</UnderlineTabs.Trigger>
|
||||
<UnderlineTabs.Trigger value="slides">Slides</UnderlineTabs.Trigger>
|
||||
<UnderlineTabs.Trigger value="video">Video</UnderlineTabs.Trigger>
|
||||
</UnderlineTabs.List>
|
||||
<UnderlineTabs.Content value="home">
|
||||
<UnderlineTabs.Content value="note">
|
||||
<div class="ui:py-4">
|
||||
<h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Home Content</h3>
|
||||
<h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Note Content</h3>
|
||||
<p class="ui:text-muted-foreground ui:text-sm">
|
||||
Welcome to the home tab. This is where your main content lives.
|
||||
Welcome to the note tab. This is where your note content lives.
|
||||
</p>
|
||||
</div>
|
||||
</UnderlineTabs.Content>
|
||||
<UnderlineTabs.Content value="profile">
|
||||
<UnderlineTabs.Content value="slides">
|
||||
<div class="ui:py-4">
|
||||
<h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Profile Content</h3>
|
||||
<p class="ui:text-muted-foreground ui:text-sm">
|
||||
Manage your profile settings and personal information here.
|
||||
</p>
|
||||
<h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Slides Content</h3>
|
||||
<p class="ui:text-muted-foreground ui:text-sm">Manage your slides content and personal information here.</p>
|
||||
</div>
|
||||
</UnderlineTabs.Content>
|
||||
<UnderlineTabs.Content value="settings">
|
||||
<UnderlineTabs.Content value="video">
|
||||
<div class="ui:py-4">
|
||||
<h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Settings Content</h3>
|
||||
<p class="ui:text-muted-foreground ui:text-sm">Configure your application settings and preferences.</p>
|
||||
<h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Video Content</h3>
|
||||
<p class="ui:text-muted-foreground ui:text-sm">Configure your video content and preferences.</p>
|
||||
</div>
|
||||
</UnderlineTabs.Content>
|
||||
</UnderlineTabs.Root>
|
||||
@@ -79,7 +77,7 @@
|
||||
|
||||
<Story name="Disabled Tab">
|
||||
{#snippet template(args)}
|
||||
<div class="w-[400px]">
|
||||
<div class="w-lg">
|
||||
<UnderlineTabs.Root {...args} value="home">
|
||||
<UnderlineTabs.List>
|
||||
<UnderlineTabs.Trigger value="home">Home</UnderlineTabs.Trigger>
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
<div class="ui:grid ui:gap-2">
|
||||
<div class="ui:flex ui:items-center">
|
||||
<Label for="password">Password</Label>
|
||||
<a href="#" class="ui:ms-auto ui:inline-block ui:text-sm ui:underline-offset-4 hover:ui:underline">
|
||||
<a href="/" class="ui:ms-auto ui:inline-block ui:text-sm ui:underline-offset-4 hover:ui:underline">
|
||||
Forgot your password?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,2 @@
|
||||
export const FIELDS = ['disabled', 'class', 'type', 'tooltip', 'tooltipSide'] as string[];
|
||||
|
||||
@@ -0,0 +1,114 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { IconButton } from '@cio/ui/custom/icon-button';
|
||||
import SettingsIcon from '@lucide/svelte/icons/settings';
|
||||
import HeartIcon from '@lucide/svelte/icons/heart';
|
||||
import TrashIcon from '@lucide/svelte/icons/trash';
|
||||
import EditIcon from '@lucide/svelte/icons/edit';
|
||||
import SaveIcon from '@lucide/svelte/icons/save';
|
||||
import SearchIcon from '@lucide/svelte/icons/search';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/IconButton',
|
||||
component: IconButton,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<IconButton>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Tooltip">
|
||||
{#snippet template()}
|
||||
<IconButton tooltip="Settings">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Disabled">
|
||||
{#snippet template()}
|
||||
<IconButton disabled>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Disabled With Tooltip">
|
||||
{#snippet template()}
|
||||
<IconButton tooltip="Settings" disabled>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Multiple Icons">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:items-center ui:gap-4">
|
||||
<IconButton tooltip="Settings">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Like">
|
||||
<HeartIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Delete">
|
||||
<TrashIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Edit">
|
||||
<EditIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Save">
|
||||
<SaveIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Search">
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Tooltip Positions">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:items-center ui:gap-8 ui:p-8">
|
||||
<IconButton tooltip="Top tooltip" tooltipSide="top">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<div class="ui:flex ui:items-center ui:gap-8">
|
||||
<IconButton tooltip="Left tooltip" tooltipSide="left">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
<IconButton tooltip="Right tooltip" tooltipSide="right">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
<IconButton tooltip="Bottom tooltip" tooltipSide="bottom">
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Click Handler">
|
||||
{#snippet template()}
|
||||
<IconButton
|
||||
tooltip="Click me"
|
||||
onclick={() => {
|
||||
alert('IconButton clicked!');
|
||||
}}
|
||||
>
|
||||
<SettingsIcon />
|
||||
</IconButton>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1,18 @@
|
||||
export const FIELDS = [
|
||||
'label',
|
||||
'placeholder',
|
||||
'value',
|
||||
'name',
|
||||
'type',
|
||||
'isRequired',
|
||||
'isDisabled',
|
||||
'autoFocus',
|
||||
'errorMessage',
|
||||
'helperMessage',
|
||||
'className',
|
||||
'inputClassName',
|
||||
'labelClassName',
|
||||
'min',
|
||||
'max',
|
||||
'autoComplete'
|
||||
] as string[];
|
||||
@@ -0,0 +1,215 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { InputField } from '@cio/ui/custom/input-field';
|
||||
import * as Field from '@cio/ui/base/field';
|
||||
import { Password } from '@cio/ui/custom/password';
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/InputField',
|
||||
component: InputField,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
let studentName = $state('');
|
||||
let studentEmail = $state('');
|
||||
let courseTitle = $state('');
|
||||
let password = $state('');
|
||||
let enrollmentDate = $state('');
|
||||
let coursePrice = $state('');
|
||||
let invalidEmail = $state('invalid-email');
|
||||
let disabledValue = $state('[email protected]');
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Student Name"
|
||||
placeholder="Enter student's full name"
|
||||
bind:value={studentName}
|
||||
name="student-name"
|
||||
/>
|
||||
<p class="ui:text-sm ui:text-muted-foreground">Value: {studentName || '(empty)'}</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Label and Helper">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Student Email"
|
||||
placeholder="[email protected]"
|
||||
bind:value={studentEmail}
|
||||
name="student-email"
|
||||
type="email"
|
||||
helperMessage="We'll use this email to send course notifications and updates"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Required Field">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Course Title"
|
||||
placeholder="Introduction to Web Development"
|
||||
bind:value={courseTitle}
|
||||
name="course-title"
|
||||
isRequired={true}
|
||||
helperMessage="Enter a descriptive title for your course"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Password Field">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<Field.Field>
|
||||
<Field.Label for="password">Password</Field.Label>
|
||||
<Field.Content>
|
||||
<Password id="password" bind:value={password} placeholder="Enter your password" />
|
||||
<Field.Description>Must be at least 8 characters long</Field.Description>
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
<p class="ui:text-sm ui:text-muted-foreground">Value: {password ? '•'.repeat(password.length) : '(empty)'}</p>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Error">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Student Email"
|
||||
placeholder="[email protected]"
|
||||
bind:value={invalidEmail}
|
||||
name="student-email-error"
|
||||
type="email"
|
||||
errorMessage="Please enter a valid email address"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Disabled">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Student Email"
|
||||
placeholder="[email protected]"
|
||||
bind:value={disabledValue}
|
||||
name="student-email-disabled"
|
||||
type="email"
|
||||
isDisabled={true}
|
||||
helperMessage="This field cannot be modified"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Number Input">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Course Price"
|
||||
placeholder="0.00"
|
||||
bind:value={coursePrice}
|
||||
name="course-price"
|
||||
type="number"
|
||||
min={0}
|
||||
helperMessage="Enter the price in your local currency"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Date Input">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Enrollment Date"
|
||||
bind:value={enrollmentDate}
|
||||
name="enrollment-date"
|
||||
type="date"
|
||||
helperMessage="Select the date when the student enrolled"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Auto Focus">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Course Title"
|
||||
placeholder="Introduction to Web Development"
|
||||
bind:value={courseTitle}
|
||||
name="course-title-autofocus"
|
||||
autoFocus={true}
|
||||
helperMessage="This field will be automatically focused when the page loads"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom Styling">
|
||||
{#snippet template()}
|
||||
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
||||
<InputField
|
||||
label="Student Name"
|
||||
placeholder="Enter student's full name"
|
||||
bind:value={studentName}
|
||||
name="student-name-custom"
|
||||
className="ui:border ui:border-primary ui:rounded-lg ui:p-4"
|
||||
inputClassName="ui:bg-primary/5"
|
||||
labelClassName="ui:font-semibold ui:text-primary"
|
||||
/>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Form Example">
|
||||
{#snippet template()}
|
||||
<form class="ui:flex ui:flex-col ui:gap-4 ui:w-96" onsubmit={(e) => e.preventDefault()}>
|
||||
<InputField
|
||||
label="Full Name"
|
||||
placeholder="John Doe"
|
||||
bind:value={studentName}
|
||||
name="full-name"
|
||||
isRequired={true}
|
||||
/>
|
||||
<InputField
|
||||
label="Email Address"
|
||||
placeholder="[email protected]"
|
||||
bind:value={studentEmail}
|
||||
name="email"
|
||||
type="email"
|
||||
isRequired={true}
|
||||
helperMessage="We'll use this to send course updates"
|
||||
/>
|
||||
<Field.Field>
|
||||
<Field.Label for="password-form">Password</Field.Label>
|
||||
<Field.Content>
|
||||
<Password id="password-form" bind:value={password} placeholder="Enter password" required />
|
||||
<Field.Description>Must be at least 8 characters</Field.Description>
|
||||
</Field.Content>
|
||||
</Field.Field>
|
||||
<button
|
||||
type="submit"
|
||||
class="ui:mt-2 ui:rounded-md ui:bg-primary ui:px-4 ui:py-2 ui:text-primary-foreground ui:hover:bg-primary/90"
|
||||
>
|
||||
Enroll Student
|
||||
</button>
|
||||
</form>
|
||||
{/snippet}
|
||||
</Story>
|
||||
Reference in New Issue
Block a user