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
@@ -0,0 +1,400 @@
|
||||
<script module>
|
||||
import { defineMeta } from '@storybook/addon-svelte-csf';
|
||||
|
||||
import Bot from '@lucide/svelte/icons/bot';
|
||||
import AlertTriangle from '@lucide/svelte/icons/alert-triangle';
|
||||
import Check from '@lucide/svelte/icons/check';
|
||||
import ChevronDown from '@lucide/svelte/icons/chevron-down';
|
||||
import Copy from '@lucide/svelte/icons/copy';
|
||||
import Share from '@lucide/svelte/icons/share';
|
||||
import Trash from '@lucide/svelte/icons/trash';
|
||||
import UserRoundX from '@lucide/svelte/icons/user-round-x';
|
||||
import VolumeOff from '@lucide/svelte/icons/volume-off';
|
||||
import AudioLines from '@lucide/svelte/icons/audio-lines';
|
||||
import ArrowLeft from '@lucide/svelte/icons/arrow-left';
|
||||
import ArrowRight from '@lucide/svelte/icons/arrow-right';
|
||||
import Search from '@lucide/svelte/icons/search';
|
||||
import Archive from '@lucide/svelte/icons/archive';
|
||||
import CalendarPlus from '@lucide/svelte/icons/calendar-plus';
|
||||
import Clock from '@lucide/svelte/icons/clock';
|
||||
import ListFilter from '@lucide/svelte/icons/list-filter';
|
||||
import MailCheck from '@lucide/svelte/icons/mail-check';
|
||||
import MoreHorizontal from '@lucide/svelte/icons/more-horizontal';
|
||||
import Tag from '@lucide/svelte/icons/tag';
|
||||
import Trash2 from '@lucide/svelte/icons/trash-2';
|
||||
import Minus from '@lucide/svelte/icons/minus';
|
||||
import Plus from '@lucide/svelte/icons/plus';
|
||||
|
||||
import { Button } from '@cio/ui/base/button';
|
||||
import { Input } from '@cio/ui/base/input';
|
||||
import { Separator } from '@cio/ui/base/separator';
|
||||
import * as Popover from '@cio/ui/base/popover';
|
||||
import * as Select from '@cio/ui/base/select';
|
||||
import * as InputGroup from '@cio/ui/base/input-group';
|
||||
import * as Tooltip from '@cio/ui/base/tooltip';
|
||||
import * as ButtonGroup from '@cio/ui/base/button-group';
|
||||
import * as DropdownMenu from '@cio/ui/base/dropdown-menu';
|
||||
|
||||
import { FIELDS } from './fields';
|
||||
|
||||
const { Story } = defineMeta({
|
||||
title: 'Molecules/ButtonGroup',
|
||||
component: ButtonGroup.Root,
|
||||
parameters: {
|
||||
layout: 'centered',
|
||||
controls: {
|
||||
include: FIELDS
|
||||
}
|
||||
},
|
||||
tags: ['autodocs']
|
||||
});
|
||||
|
||||
let label = $state('personal');
|
||||
let voiceEnabled = $state(false);
|
||||
|
||||
const CURRENCIES = [
|
||||
{
|
||||
value: '$',
|
||||
label: 'US Dollar'
|
||||
},
|
||||
{
|
||||
value: '€',
|
||||
label: 'Euro'
|
||||
},
|
||||
{
|
||||
value: '£',
|
||||
label: 'British Pound'
|
||||
}
|
||||
];
|
||||
|
||||
let currency = $state('$');
|
||||
</script>
|
||||
|
||||
<Story name="Default">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<ButtonGroup.Root class="hidden sm:flex">
|
||||
<Button variant="outline" size="icon" aria-label="Go Back">
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline">Archive</Button>
|
||||
<Button variant="outline">Report</Button>
|
||||
</ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline">Snooze</Button>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="outline" size="icon" aria-label="More Options">
|
||||
<MoreHorizontal />
|
||||
</Button>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content align="end" class="w-52">
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item>
|
||||
<MailCheck />
|
||||
Mark as Read
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<Archive />
|
||||
Archive
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item>
|
||||
<Clock />
|
||||
Snooze
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<CalendarPlus />
|
||||
Add to Calendar
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<ListFilter />
|
||||
Add to List
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Sub>
|
||||
<DropdownMenu.SubTrigger>
|
||||
<Tag />
|
||||
Label As...
|
||||
</DropdownMenu.SubTrigger>
|
||||
<DropdownMenu.SubContent>
|
||||
<DropdownMenu.RadioGroup bind:value={label}>
|
||||
<DropdownMenu.RadioItem value="personal">Personal</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem value="work">Work</DropdownMenu.RadioItem>
|
||||
<DropdownMenu.RadioItem value="other">Other</DropdownMenu.RadioItem>
|
||||
</DropdownMenu.RadioGroup>
|
||||
</DropdownMenu.SubContent>
|
||||
</DropdownMenu.Sub>
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item class="text-destructive focus:text-destructive">
|
||||
<Trash2 />
|
||||
Trash
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</ButtonGroup.Root>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Orientation">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root orientation="vertical" aria-label="Media controls" class="h-fit">
|
||||
<Button variant="outline" size="icon">
|
||||
<Plus />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<Minus />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Sizes">
|
||||
{#snippet template()}
|
||||
<div class="flex flex-col items-start gap-8">
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline" size="sm">Small</Button>
|
||||
<Button variant="outline" size="sm">Button</Button>
|
||||
<Button variant="outline" size="sm">Group</Button>
|
||||
<Button variant="outline" size="icon-sm">
|
||||
<Plus />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline">Default</Button>
|
||||
<Button variant="outline">Button</Button>
|
||||
<Button variant="outline">Group</Button>
|
||||
<Button variant="outline" size="icon">
|
||||
<Plus />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline" size="lg">Large</Button>
|
||||
<Button variant="outline" size="lg">Button</Button>
|
||||
<Button variant="outline" size="lg">Group</Button>
|
||||
<Button variant="outline" size="icon-lg">
|
||||
<Plus />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
</div>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Nested">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline" size="sm">1</Button>
|
||||
<Button variant="outline" size="sm">2</Button>
|
||||
<Button variant="outline" size="sm">3</Button>
|
||||
<Button variant="outline" size="sm">4</Button>
|
||||
<Button variant="outline" size="sm">5</Button>
|
||||
</ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline" size="icon-sm" aria-label="Previous">
|
||||
<ArrowLeft />
|
||||
</Button>
|
||||
<Button variant="outline" size="icon-sm" aria-label="Next">
|
||||
<ArrowRight />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Separator">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="secondary" size="sm">Copy</Button>
|
||||
<ButtonGroup.Separator />
|
||||
<Button variant="secondary" size="sm">Paste</Button>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Split">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="secondary">Button</Button>
|
||||
<ButtonGroup.Separator />
|
||||
<Button variant="secondary" size="icon">
|
||||
<Plus />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Input">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<Input placeholder="Search..." />
|
||||
<Button variant="outline" size="icon" aria-label="Search">
|
||||
<Search />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Input Group">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root class="[--radius:9999rem]">
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline" size="icon">
|
||||
<Plus />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<InputGroup.Root>
|
||||
<InputGroup.Input
|
||||
placeholder={voiceEnabled ? 'Record and send audio...' : 'Send a message...'}
|
||||
disabled={voiceEnabled}
|
||||
/>
|
||||
<InputGroup.Addon align="inline-end">
|
||||
<Tooltip.Provider>
|
||||
<Tooltip.Root>
|
||||
<Tooltip.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<InputGroup.Button
|
||||
{...props}
|
||||
onclick={() => (voiceEnabled = !voiceEnabled)}
|
||||
size="icon-xs"
|
||||
data-active={voiceEnabled}
|
||||
class="ui:data-[active=true]:bg-orange-100 ui:data-[active=true]:text-orange-700 ui:dark:data-[active=true]:bg-orange-800 ui:dark:data-[active=true]:text-orange-100"
|
||||
aria-pressed={voiceEnabled}
|
||||
>
|
||||
<AudioLines />
|
||||
</InputGroup.Button>
|
||||
{/snippet}
|
||||
</Tooltip.Trigger>
|
||||
<Tooltip.Content>Voice Mode</Tooltip.Content>
|
||||
</Tooltip.Root></Tooltip.Provider
|
||||
>
|
||||
</InputGroup.Addon>
|
||||
</InputGroup.Root>
|
||||
</ButtonGroup.Root>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Dropdown Menu">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline">Follow</Button>
|
||||
<DropdownMenu.Root>
|
||||
<DropdownMenu.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="outline" class="ps-2!">
|
||||
<ChevronDown />
|
||||
</Button>
|
||||
{/snippet}
|
||||
</DropdownMenu.Trigger>
|
||||
<DropdownMenu.Content align="end" class="[--radius:1rem]">
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item>
|
||||
<VolumeOff />
|
||||
Mute Conversation
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<Check />
|
||||
Mark as Read
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<AlertTriangle />
|
||||
Report Conversation
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<UserRoundX />
|
||||
Block User
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<Share />
|
||||
Share Conversation
|
||||
</DropdownMenu.Item>
|
||||
<DropdownMenu.Item>
|
||||
<Copy />
|
||||
Copy Conversation
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
<DropdownMenu.Separator />
|
||||
<DropdownMenu.Group>
|
||||
<DropdownMenu.Item variant="destructive">
|
||||
<Trash />
|
||||
Delete Conversation
|
||||
</DropdownMenu.Item>
|
||||
</DropdownMenu.Group>
|
||||
</DropdownMenu.Content>
|
||||
</DropdownMenu.Root>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Select">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Select.Root type="single" bind:value={currency}>
|
||||
<Select.Trigger class="font-mono">
|
||||
{currency}
|
||||
</Select.Trigger>
|
||||
<Select.Content class="min-w-24">
|
||||
{#each CURRENCIES as currencyOption (currencyOption.value)}
|
||||
<Select.Item value={currencyOption.value}>
|
||||
{currencyOption.value}
|
||||
<span class="text-muted-foreground">{currencyOption.label}</span>
|
||||
</Select.Item>
|
||||
{/each}
|
||||
</Select.Content>
|
||||
</Select.Root>
|
||||
<Input placeholder="10.00" pattern="[0-9]*" />
|
||||
</ButtonGroup.Root>
|
||||
<ButtonGroup.Root>
|
||||
<Button aria-label="Send" size="icon" variant="outline">
|
||||
<ArrowRight />
|
||||
</Button>
|
||||
</ButtonGroup.Root>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
|
||||
<Story name="Popover">
|
||||
{#snippet template()}
|
||||
<ButtonGroup.Root>
|
||||
<Button variant="outline">
|
||||
<Bot />
|
||||
Copilot
|
||||
</Button>
|
||||
<Popover.Root>
|
||||
<Popover.Trigger>
|
||||
{#snippet child({ props })}
|
||||
<Button {...props} variant="outline" size="icon" aria-label="Open Popover">
|
||||
<ChevronDown />
|
||||
</Button>
|
||||
{/snippet}
|
||||
</Popover.Trigger>
|
||||
<Popover.Content align="end" class="rounded-xl p-0 text-sm">
|
||||
<div class="px-4 py-3">
|
||||
<div class="text-sm font-medium">Agent Tasks</div>
|
||||
</div>
|
||||
<Separator />
|
||||
<div class="*:[p:not(:last-child)]:mb-2 p-4 text-sm">
|
||||
<Textarea placeholder="Describe your task in natural language." class="mb-4 resize-none" />
|
||||
<p class="font-medium">Start a new task with Copilot</p>
|
||||
<p class="text-muted-foreground">
|
||||
Describe your task in natural language. Copilot will work in the background and open a pull request for
|
||||
your review.
|
||||
</p>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
</ButtonGroup.Root>
|
||||
{/snippet}
|
||||
</Story>
|
||||
@@ -0,0 +1 @@
|
||||
export const FIELDS = ['class', 'orientation'] as string[];
|
||||
Reference in New Issue
Block a user