Rotimi Best
c7854efae3
* 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.
103 lines
3.1 KiB
Svelte
103 lines
3.1 KiB
Svelte
<script module>
|
|
import { defineMeta } from '@storybook/addon-svelte-csf';
|
|
|
|
import { CopyButton } from '@cio/ui/base/copy-button';
|
|
import { Input } from '@cio/ui/base/input';
|
|
import { Button } from '@cio/ui/base/button';
|
|
import * as InputGroup from '@cio/ui/base/input-group';
|
|
|
|
import { FIELDS } from './fields';
|
|
|
|
const { Story } = defineMeta({
|
|
title: 'Molecules/CopyButton',
|
|
component: CopyButton,
|
|
parameters: {
|
|
layout: 'centered',
|
|
controls: {
|
|
include: FIELDS
|
|
}
|
|
},
|
|
tags: ['autodocs']
|
|
});
|
|
|
|
let textToCopy = $state('Hello, World!');
|
|
let copiedText = $state('');
|
|
</script>
|
|
|
|
<Story name="Default">
|
|
{#snippet template()}
|
|
<CopyButton text="Copy this text to clipboard" />
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="With Text">
|
|
{#snippet template()}
|
|
<CopyButton text="npm install @cio/ui" variant="outline">Copy Command</CopyButton>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Variants">
|
|
{#snippet template()}
|
|
<div class="ui:flex ui:flex-col ui:gap-4 ui:items-start">
|
|
<CopyButton text="Default variant" variant="default" />
|
|
<CopyButton text="Outline variant" variant="outline" />
|
|
<CopyButton text="Secondary variant" variant="secondary" />
|
|
<CopyButton text="Ghost variant" variant="ghost" />
|
|
<CopyButton text="Destructive variant" variant="destructive" />
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="With Input Group">
|
|
{#snippet template()}
|
|
<InputGroup.Root class="ui:w-96">
|
|
<InputGroup.Input value="https://classroomio.com/courses/123" readonly />
|
|
<InputGroup.Addon align="inline-end">
|
|
<CopyButton text="https://classroomio.com/courses/123" size="icon-sm" />
|
|
</InputGroup.Addon>
|
|
</InputGroup.Root>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Reactive Text">
|
|
{#snippet template()}
|
|
<div class="ui:flex ui:flex-col ui:gap-4 ui:w-96">
|
|
<InputGroup.Root>
|
|
<InputGroup.Input bind:value={textToCopy} placeholder="Enter text to copy" />
|
|
<InputGroup.Addon align="inline-end">
|
|
<CopyButton text={textToCopy} size="icon-sm" />
|
|
</InputGroup.Addon>
|
|
</InputGroup.Root>
|
|
<div class="ui:text-sm ui:text-muted-foreground">
|
|
<p>Text to copy: <code class="ui:bg-muted ui:px-2 ui:py-1 ui:rounded">{textToCopy}</code></p>
|
|
</div>
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|
|
|
|
<Story name="Code Block">
|
|
{#snippet template()}
|
|
<div class="ui:rounded-lg ui:border ui:bg-muted/50 ui:p-4 ui:w-full ui:max-w-2xl">
|
|
<div class="ui:flex ui:items-center ui:justify-between ui:mb-2">
|
|
<span class="ui:text-sm ui:font-medium">Installation</span>
|
|
<CopyButton
|
|
text="pnpm add @cio/ui"
|
|
size="sm"
|
|
variant="ghost"
|
|
onCopy={(status) => {
|
|
if (status === 'success') {
|
|
copiedText = 'pnpm add @cio/ui';
|
|
}
|
|
}}
|
|
>
|
|
Copy
|
|
</CopyButton>
|
|
</div>
|
|
<pre class="ui:text-sm"><code>pnpm add @cio/ui</code></pre>
|
|
{#if copiedText}
|
|
<p class="ui:mt-2 ui:text-green-600">Last copied: {copiedText}</p>
|
|
{/if}
|
|
</div>
|
|
{/snippet}
|
|
</Story>
|