feat: redo settings and all org pages. (#601)
* feat: new components, deploy storybook * refactor: simplify component field definitions and enhance button loading state - Removed unnecessary type imports and simplified the FIELDS array definitions across multiple components in Storybook. - Updated button component to use a loading state instead of isLoading, improving clarity and consistency in props. - Adjusted button stories to reflect the new loading prop and enhanced the button's loading visual feedback. - Minor CSS adjustments for better layout and styling consistency. * chore: add field, card, password components * feat: improve page component & update AuthUI path * chore: update bits-ui to version 2.14.4 and all org related UI's - Updated bits-ui dependency in pnpm-lock.yaml and package.json to version 2.14.4. - Refactored imports for RoleBasedSecurity and UpgradeBanner components to use the new ui feature directory. - Removed unused Course components and related files to clean up the codebase. - Enhanced various components to improve consistency and maintainability. * chore: move all setting buttons to the top and update auth ui styles * chore: remove svelte-loading-spinners and replace with @cio/ui/base/spinner - Removed all instances of svelte-loading-spinners from the project. - Updated components to use the new Spinner from @cio/ui/base/spinner. - Cleaned up pnpm-lock.yaml and package.json to reflect the removal of svelte-loading-spinners. - Added new CSS animations for rocket launch effects in app.css. - Enhanced email change flow with updated verification messages in translations. * chore: remove supabase file upload from dashboard and move to r2 * chore: update organization API and UI components - Added new API methods for organization plan operations and team management. - Introduced middleware for API key authentication and organization admin checks. - Refactored organization-related components to utilize the new API structure. - Updated various UI components to improve consistency and maintainability. - Enhanced error handling and validation for organization-related actions. - Removed deprecated services and streamlined the codebase.
This commit is contained in:
Rotimi Best
@@ -1,7 +1,4 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Accordion } from '@cio/ui/base/accordion';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Accordion>)[] = [
|
||||
export const FIELDS = [
|
||||
'type',
|
||||
'value',
|
||||
'onValueChange',
|
||||
@@ -9,4 +6,4 @@ export const FIELDS: (keyof ComponentProps<typeof Accordion>)[] = [
|
||||
'name',
|
||||
'loop',
|
||||
'orientation'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Avatar } from '@cio/ui/base/avatar';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Avatar>)[] = ['loadingStatus', 'onLoadingStatusChange', 'delayMs'];
|
||||
export const FIELDS = ['loadingStatus', 'onLoadingStatusChange', 'delayMs'] as string[];
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<Button>Default Button</Button>
|
||||
{#snippet template(args)}
|
||||
<Button {...args}>Default Button</Button>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -72,7 +72,7 @@
|
||||
|
||||
<Story name="Loading">
|
||||
{#snippet template(args)}
|
||||
<Button {...args} isLoading>Loading Button</Button>
|
||||
<Button {...args} loading>Loading Button</Button>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Button>)[] = ['variant', 'size', 'disabled', 'class', 'type', 'href'];
|
||||
export const FIELDS = ['variant', 'size', 'disabled', 'class', 'type', 'href', 'loading'] as string[];
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Checkbox } from '@cio/ui/base/checkbox';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Checkbox>)[] = [
|
||||
export const FIELDS = [
|
||||
'checked',
|
||||
'onCheckedChange',
|
||||
'disabled',
|
||||
'name',
|
||||
'value',
|
||||
'required'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Collapsible } from '@cio/ui/base/collapsible';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Collapsible>)[] = [
|
||||
export const FIELDS = [
|
||||
'open',
|
||||
'onOpenChange',
|
||||
'onOpenChangeComplete',
|
||||
'disabled'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Command } from '@cio/ui/base/command';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Command>)[] = [
|
||||
export const FIELDS = [
|
||||
'value',
|
||||
'onValueChange',
|
||||
'label',
|
||||
'filter',
|
||||
'columns',
|
||||
'disablePointerSelection'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import * as Dialog from '@cio/ui/base/dialog';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Dialog.Root>)[] = ['open', 'onOpenChange'];
|
||||
export const FIELDS = ['open', 'onOpenChange'] as string[];
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Input>)[] = [
|
||||
export const FIELDS = [
|
||||
'value',
|
||||
'type',
|
||||
'placeholder',
|
||||
@@ -11,4 +8,4 @@ export const FIELDS: (keyof ComponentProps<typeof Input>)[] = [
|
||||
'name',
|
||||
'required',
|
||||
'readonly'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -0,0 +1,416 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
|
||||
import * as Item from '@cio/ui/base/item';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import * as Avatar from '@cio/ui/base/avatar';
|
||||
import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
|
||||
|
||||
import BadgeCheckIcon from '@lucide/svelte/icons/badge-check';
|
||||
import ChevronRightIcon from '@lucide/svelte/icons/chevron-right';
|
||||
import ExternalLinkIcon from '@lucide/svelte/icons/external-link';
|
||||
import ShieldAlertIcon from '@lucide/svelte/icons/shield-alert';
|
||||
import PlusIcon from '@lucide/svelte/icons/plus';
|
||||
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Atom/Item',
|
||||
component: Item.Root,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: []
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
const music = [
|
||||
{
|
||||
title: 'Midnight City Lights',
|
||||
artist: 'Neon Dreams',
|
||||
album: 'Electric Nights',
|
||||
duration: '3:45'
|
||||
},
|
||||
{
|
||||
title: 'Coffee Shop Conversations',
|
||||
artist: 'The Morning Brew',
|
||||
album: 'Urban Stories',
|
||||
duration: '4:05'
|
||||
},
|
||||
{
|
||||
title: 'Digital Rain',
|
||||
artist: 'Cyber Symphony',
|
||||
album: 'Binary Beats',
|
||||
duration: '3:30'
|
||||
}
|
||||
];
|
||||
|
||||
const people = [
|
||||
{
|
||||
username: 'shadcn',
|
||||
avatar: 'https://github.com/shadcn.png',
|
||||
email: '[email protected]'
|
||||
},
|
||||
{
|
||||
username: 'maxleiter',
|
||||
avatar: 'https://github.com/maxleiter.png',
|
||||
email: '[email protected]'
|
||||
},
|
||||
{
|
||||
username: 'evilrabbit',
|
||||
avatar: 'https://github.com/evilrabbit.png',
|
||||
email: '[email protected]'
|
||||
}
|
||||
];
|
||||
|
||||
const models = [
|
||||
{
|
||||
name: 'v0-1.5-sm',
|
||||
description: 'Everyday tasks and UI generation.',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1650804068570-7fb2e3dbf888?q=80&w=640&auto=format&fit=crop',
|
||||
credit: 'Valeria Reverdo on Unsplash'
|
||||
},
|
||||
{
|
||||
name: 'v0-1.5-lg',
|
||||
description: 'Advanced thinking or reasoning.',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1610280777472-54133d004c8c?q=80&w=640&auto=format&fit=crop',
|
||||
credit: 'Michael Oeser on Unsplash'
|
||||
},
|
||||
{
|
||||
name: 'v0-2.0-mini',
|
||||
description: 'Open Source model for everyone.',
|
||||
image:
|
||||
'https://images.unsplash.com/photo-1602146057681-08560aee8cde?q=80&w=640&auto=format&fit=crop',
|
||||
credit: 'Cherry Laithang on Unsplash'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<Story name="Basic Item">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-md flex-col gap-6">
|
||||
<Item.Root variant="outline">
|
||||
<Item.Content>
|
||||
<Item.Title>Basic Item</Item.Title>
|
||||
<Item.Description>A simple item with title and description.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button variant="outline" size="sm">Action</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
<Item.Root variant="outline" size="sm">
|
||||
{#snippet child({ props })}
|
||||
<a href="#/" {...props}>
|
||||
<Item.Media>
|
||||
<BadgeCheckIcon class="size-5" />
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title>Your profile has been verified.</Item.Title>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<ChevronRightIcon class="size-4" />
|
||||
</Item.Actions>
|
||||
</a>
|
||||
{/snippet}
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Variants">
|
||||
{#snippet template()}
|
||||
<div class="flex flex-col gap-6">
|
||||
<Item.Root>
|
||||
<Item.Content>
|
||||
<Item.Title>Default Variant</Item.Title>
|
||||
<Item.Description>Standard styling with subtle background and borders.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button variant="outline" size="sm">Open</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
<Item.Root variant="outline">
|
||||
<Item.Content>
|
||||
<Item.Title>Outline Variant</Item.Title>
|
||||
<Item.Description>Outlined style with clear borders and transparent background.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button variant="outline" size="sm">Open</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
<Item.Root variant="muted">
|
||||
<Item.Content>
|
||||
<Item.Title>Muted Variant</Item.Title>
|
||||
<Item.Description>Subdued appearance with muted colors for secondary content.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button variant="outline" size="sm">Open</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Size">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-md flex-col gap-6">
|
||||
<Item.Root variant="outline">
|
||||
<Item.Content>
|
||||
<Item.Title>Basic Item</Item.Title>
|
||||
<Item.Description>A simple item with title and description.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button variant="outline" size="sm">Action</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
<Item.Root variant="outline" size="sm">
|
||||
{#snippet child({ props })}
|
||||
<a href="#/" {...props}>
|
||||
<Item.Media>
|
||||
<BadgeCheckIcon class="size-5" />
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title>Your profile has been verified.</Item.Title>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<ChevronRightIcon class="size-4" />
|
||||
</Item.Actions>
|
||||
</a>
|
||||
{/snippet}
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Icon">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-lg flex-col gap-6">
|
||||
<Item.Root variant="outline">
|
||||
<Item.Media variant="icon">
|
||||
<ShieldAlertIcon />
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title>Security Alert</Item.Title>
|
||||
<Item.Description>New login detected from unknown device.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button size="sm" variant="outline">Review</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Avatar">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-lg flex-col gap-6">
|
||||
<Item.Root variant="outline">
|
||||
<Item.Media>
|
||||
<Avatar.Root class="size-10">
|
||||
<Avatar.Image src="https://github.com/evilrabbit.png" />
|
||||
<Avatar.Fallback>ER</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title>Evil Rabbit</Item.Title>
|
||||
<Item.Description>Last seen 5 months ago</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button size="icon" variant="outline" class="rounded-full" aria-label="Invite">
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
<Item.Root variant="outline">
|
||||
<Item.Media>
|
||||
<div
|
||||
class="*:data-[slot=avatar]:ring-background flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:grayscale"
|
||||
>
|
||||
<Avatar.Root class="hidden sm:flex">
|
||||
<Avatar.Image src="https://github.com/shadcn.png" alt="@shadcn" />
|
||||
<Avatar.Fallback>CN</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<Avatar.Root class="hidden sm:flex">
|
||||
<Avatar.Image src="https://github.com/maxleiter.png" alt="@maxleiter" />
|
||||
<Avatar.Fallback>LR</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
<Avatar.Root>
|
||||
<Avatar.Image src="https://github.com/evilrabbit.png" alt="@evilrabbit" />
|
||||
<Avatar.Fallback>ER</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</div>
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title>No Team Members</Item.Title>
|
||||
<Item.Description>Invite your team to collaborate on this project.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button size="sm" variant="outline">Invite</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Image">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-md flex-col gap-6">
|
||||
<div class="flex w-full max-w-md flex-col gap-4">
|
||||
{#each music as song (song)}
|
||||
<Item.Root variant="outline">
|
||||
{#snippet child({ props })}
|
||||
<a href="#/" {...props}>
|
||||
<Item.Media variant="image">
|
||||
<img
|
||||
src={`https://avatar.vercel.sh/${song.title}`}
|
||||
alt={song.title}
|
||||
width="32"
|
||||
height="32"
|
||||
class="size-8 rounded object-cover grayscale"
|
||||
/>
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title class="line-clamp-1">
|
||||
{song.title} - <span class="text-muted-foreground">{song.album}</span>
|
||||
</Item.Title>
|
||||
<Item.Description>{song.artist}</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Content class="flex-none text-center">
|
||||
<Item.Description>{song.duration}</Item.Description>
|
||||
</Item.Content>
|
||||
</a>
|
||||
{/snippet}
|
||||
</Item.Root>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Group">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-md flex-col gap-6">
|
||||
<Item.Group>
|
||||
{#each people as person, index (person.username)}
|
||||
<Item.Root>
|
||||
<Item.Media>
|
||||
<Avatar.Root>
|
||||
<Avatar.Image src={person.avatar} class="grayscale" />
|
||||
<Avatar.Fallback>{person.username.charAt(0)}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</Item.Media>
|
||||
<Item.Content class="gap-1">
|
||||
<Item.Title>{person.username}</Item.Title>
|
||||
<Item.Description>{person.email}</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<Button variant="ghost" size="icon" class="rounded-full">
|
||||
<PlusIcon />
|
||||
</Button>
|
||||
</Item.Actions>
|
||||
</Item.Root>
|
||||
{#if index !== people.length - 1}
|
||||
<Item.Separator />
|
||||
{/if}
|
||||
{/each}
|
||||
</Item.Group>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Header">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-xl flex-col gap-6">
|
||||
<Item.Group class="grid grid-cols-3 gap-4">
|
||||
{#each models as model (model.name)}
|
||||
<Item.Root variant="outline">
|
||||
<Item.Header>
|
||||
<img
|
||||
src={model.image}
|
||||
alt={model.name}
|
||||
width="128"
|
||||
height="128"
|
||||
class="aspect-square w-full rounded-sm object-cover"
|
||||
/>
|
||||
</Item.Header>
|
||||
<Item.Content>
|
||||
<Item.Title>{model.name}</Item.Title>
|
||||
<Item.Description>{model.description}</Item.Description>
|
||||
</Item.Content>
|
||||
</Item.Root>
|
||||
{/each}
|
||||
</Item.Group>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Link">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-md flex-col gap-4">
|
||||
<Item.Root>
|
||||
{#snippet child({ props })}
|
||||
<a href="#/" {...props}>
|
||||
<Item.Content>
|
||||
<Item.Title>Visit our documentation</Item.Title>
|
||||
<Item.Description>Learn how to get started with our components.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<ChevronRightIcon class="size-4" />
|
||||
</Item.Actions>
|
||||
</a>
|
||||
{/snippet}
|
||||
</Item.Root>
|
||||
<Item.Root variant="outline">
|
||||
{#snippet child({ props })}
|
||||
<a href="#/" target="_blank" rel="noopener noreferrer" {...props}>
|
||||
<Item.Content>
|
||||
<Item.Title>External resource</Item.Title>
|
||||
<Item.Description>Opens in a new tab with security attributes.</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions>
|
||||
<ExternalLinkIcon class="size-4" />
|
||||
</Item.Actions>
|
||||
</a>
|
||||
{/snippet}
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Dropdown">
|
||||
{#snippet template()}
|
||||
<div class="flex min-h-64 w-full max-w-md flex-col items-center gap-6">
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="outline" size="sm" class="w-fit">
|
||||
Select <ChevronDownIcon />
|
||||
</Button>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content class="w-72 [--radius:0.65rem]" align="end">
|
||||
{#each people as person (person.username)}
|
||||
<DropdownMenu.Item class="p-0">
|
||||
<Item.Root size="sm" class="w-full p-2">
|
||||
<Item.Media>
|
||||
<Avatar.Root class="size-8">
|
||||
<Avatar.Image src={person.avatar} class="grayscale" />
|
||||
<Avatar.Fallback>{person.username.charAt(0)}</Avatar.Fallback>
|
||||
</Avatar.Root>
|
||||
</Item.Media>
|
||||
<Item.Content class="gap-0.5">
|
||||
<Item.Title>{person.username}</Item.Title>
|
||||
<Item.Description>{person.email}</Item.Description>
|
||||
</Item.Content>
|
||||
</Item.Root>
|
||||
</DropdownMenu.Item>
|
||||
{/each}
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Label } from '@cio/ui/base/label';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Label>)[] = ['children', 'child'];
|
||||
export const FIELDS = ['children', 'child'] as string[];
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Menubar } from '@cio/ui/base/menubar';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Menubar>)[] = [
|
||||
export const FIELDS = [
|
||||
'onValueChange',
|
||||
'value',
|
||||
'dir',
|
||||
'onOpenChange',
|
||||
'disabled'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Pagination } from '@cio/ui/base/pagination';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Pagination>)[] = [
|
||||
export const FIELDS = [
|
||||
'count',
|
||||
'page',
|
||||
'onPageChange',
|
||||
'perPage',
|
||||
'orientation'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Progress } from '@cio/ui/base/progress';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Progress>)[] = ['max', 'min', 'value'];
|
||||
export const FIELDS = ['max', 'min', 'value'] as string[];
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { RadioGroup } from '@cio/ui/base/radio-group';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof RadioGroup>)[] = [
|
||||
export const FIELDS = [
|
||||
'value',
|
||||
'onValueChange',
|
||||
'disabled',
|
||||
@@ -9,4 +6,4 @@ export const FIELDS: (keyof ComponentProps<typeof RadioGroup>)[] = [
|
||||
'name',
|
||||
'loop',
|
||||
'orientation'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,7 +1,4 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Select.Root>)[] = [
|
||||
export const FIELDS = [
|
||||
'value',
|
||||
'onValueChange',
|
||||
'disabled',
|
||||
@@ -11,4 +8,4 @@ export const FIELDS: (keyof ComponentProps<typeof Select.Root>)[] = [
|
||||
'required',
|
||||
'autocomplete',
|
||||
'allowDeselect'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Separator } from '@cio/ui/base/separator';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Separator>)[] = ['orientation', 'decorative'];
|
||||
export const FIELDS = ['orientation', 'decorative'] as string[];
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Sheet } from '@cio/ui/base/sheet';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Sheet>)[] = ['open', 'onOpenChange'];
|
||||
export const FIELDS = ['open', 'onOpenChange'] as string[];
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
>Make changes to your profile here. Click save when you're done.</Sheet.SheetDescription
|
||||
>
|
||||
</Sheet.SheetHeader>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div class="grid gap-4 p-4">
|
||||
<div class="grid grid-cols-4 items-center gap-4">
|
||||
<Label.Root for="name" class="text-right">Name</Label.Root>
|
||||
<Input.Root id="name" value="Pedro Duarte" class="col-span-3" />
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Skeleton } from '@cio/ui/base/skeleton';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Skeleton>)[] = ['class'];
|
||||
export const FIELDS = ['class'] as string[];
|
||||
|
||||
@@ -1,4 +1 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Toaster as Sonner } from '@cio/ui/base/sonner';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Sonner>)[] = ['types', 'position', 'expand'];
|
||||
export const FIELDS = ['types', 'position', 'expand'] as string[];
|
||||
|
||||
@@ -1,6 +1,13 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
import { Spinner } from '@cio/ui/base/spinner';
|
||||
import * as Item from '@cio/ui/base/item';
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { Badge } from '@cio/ui/base/badge';
|
||||
import * as InputGroup from '@cio/ui/base/input-group';
|
||||
import * as Empty from '@cio/ui/base/empty';
|
||||
import { Progress } from '@cio/ui/base/progress';
|
||||
import ArrowUpIcon from '@lucide/svelte/icons/arrow-up';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Atom/Spinner',
|
||||
@@ -18,34 +25,144 @@
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Small">
|
||||
<Story name="Size">
|
||||
{#snippet template()}
|
||||
<Spinner class="h-4 w-4" />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Large">
|
||||
{#snippet template()}
|
||||
<Spinner class="h-12 w-12" />
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Custom Color">
|
||||
{#snippet template()}
|
||||
<div class="flex gap-4">
|
||||
<Spinner class="text-blue-500" />
|
||||
<Spinner class="text-green-500" />
|
||||
<Spinner class="text-red-500" />
|
||||
<Spinner class="text-purple-500" />
|
||||
<div class="flex items-center gap-6">
|
||||
<Spinner class="size-3" />
|
||||
<Spinner class="size-4" />
|
||||
<Spinner class="size-6" />
|
||||
<Spinner class="size-8" />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="With Text">
|
||||
<Story name="Color">
|
||||
{#snippet template()}
|
||||
<div class="flex items-center gap-2">
|
||||
<Spinner />
|
||||
<span>Loading...</span>
|
||||
<div class="flex items-center gap-6">
|
||||
<Spinner class="size-6 text-red-500" />
|
||||
<Spinner class="size-6 text-green-500" />
|
||||
<Spinner class="size-6 text-blue-500" />
|
||||
<Spinner class="size-6 text-yellow-500" />
|
||||
<Spinner class="size-6 text-purple-500" />
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Button">
|
||||
{#snippet template()}
|
||||
<div class="flex flex-col items-center gap-4">
|
||||
<Button disabled size="sm">
|
||||
<Spinner />
|
||||
Loading...
|
||||
</Button>
|
||||
<Button variant="outline" disabled size="sm">
|
||||
<Spinner />
|
||||
Please wait
|
||||
</Button>
|
||||
<Button variant="secondary" disabled size="sm">
|
||||
<Spinner />
|
||||
Processing
|
||||
</Button>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Badge">
|
||||
{#snippet template()}
|
||||
<div class="flex items-center gap-4 [--radius:1.2rem]">
|
||||
<Badge>
|
||||
<Spinner />
|
||||
Syncing
|
||||
</Badge>
|
||||
<Badge variant="secondary">
|
||||
<Spinner />
|
||||
Updating
|
||||
</Badge>
|
||||
<Badge variant="outline">
|
||||
<Spinner />
|
||||
Processing
|
||||
</Badge>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Input Group">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-md flex-col gap-4">
|
||||
<InputGroup.Root>
|
||||
<InputGroup.Input placeholder="Send a message..." disabled />
|
||||
<InputGroup.Addon align="inline-end">
|
||||
<Spinner />
|
||||
</InputGroup.Addon>
|
||||
</InputGroup.Root>
|
||||
<InputGroup.Root>
|
||||
<InputGroup.Textarea placeholder="Send a message..." disabled />
|
||||
<InputGroup.Addon align="block-end">
|
||||
<Spinner />
|
||||
Validating...
|
||||
<InputGroup.Button class="ms-auto" variant="default">
|
||||
<ArrowUpIcon />
|
||||
<span class="sr-only">Send</span>
|
||||
</InputGroup.Button>
|
||||
</InputGroup.Addon>
|
||||
</InputGroup.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Empty">
|
||||
{#snippet template()}
|
||||
<Empty.Root class="w-full">
|
||||
<Empty.Header>
|
||||
<Empty.Media variant="icon">
|
||||
<Spinner />
|
||||
</Empty.Media>
|
||||
<Empty.Title>Processing your request</Empty.Title>
|
||||
<Empty.Description>Please wait while we process your request. Do not refresh the page.</Empty.Description>
|
||||
</Empty.Header>
|
||||
<Empty.Content>
|
||||
<Button variant="outline" size="sm">Cancel</Button>
|
||||
</Empty.Content>
|
||||
</Empty.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Item">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-md flex-col gap-4 [--radius:1rem]">
|
||||
<Item.Root variant="outline">
|
||||
<Item.Media variant="icon">
|
||||
<Spinner />
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title>Downloading...</Item.Title>
|
||||
<Item.Description>129 MB / 1000 MB</Item.Description>
|
||||
</Item.Content>
|
||||
<Item.Actions class="hidden sm:flex">
|
||||
<Button variant="outline" size="sm">Cancel</Button>
|
||||
</Item.Actions>
|
||||
<Item.Footer>
|
||||
<Progress value={75} />
|
||||
</Item.Footer>
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Item with Payment">
|
||||
{#snippet template()}
|
||||
<div class="flex w-full max-w-xs flex-col gap-4 [--radius:1rem]">
|
||||
<Item.Root variant="muted">
|
||||
<Item.Media>
|
||||
<Spinner />
|
||||
</Item.Media>
|
||||
<Item.Content>
|
||||
<Item.Title class="line-clamp-1">Processing payment...</Item.Title>
|
||||
</Item.Content>
|
||||
<Item.Content class="flex-none justify-end">
|
||||
<span class="text-sm tabular-nums">$100.00</span>
|
||||
</Item.Content>
|
||||
</Item.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
@@ -1,11 +1,8 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Switch } from '@cio/ui/base/switch';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Switch>)[] = [
|
||||
export const FIELDS = [
|
||||
'checked',
|
||||
'onCheckedChange',
|
||||
'disabled',
|
||||
'name',
|
||||
'required',
|
||||
'value'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Tabs } from '@cio/ui/base/tabs';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Tabs>)[] = [
|
||||
export const FIELDS = [
|
||||
'value',
|
||||
'onValueChange',
|
||||
'disabled',
|
||||
'activationMode',
|
||||
'orientation'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
@@ -1,9 +1,6 @@
|
||||
import { type ComponentProps } from 'svelte';
|
||||
import { Tooltip } from '@cio/ui/base/tooltip';
|
||||
|
||||
export const FIELDS: (keyof ComponentProps<typeof Tooltip>)[] = [
|
||||
export const FIELDS = [
|
||||
'disableHoverableContent',
|
||||
'delayDuration',
|
||||
'ignoreNonKeyboardFocus',
|
||||
'disabled'
|
||||
];
|
||||
] as string[];
|
||||
|
||||
Reference in New Issue
Block a user