@usefragments/ui 1.0.2 → 1.2.0

package/src/components/Dialog/Dialog.stories.tsx

@@ -1,154 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Dialog } from '.';
-import { Button } from '../Button';
-
-/**
- * Modal overlay for focused user interactions such as confirmations and
- * forms. Compose Dialog.Trigger, Dialog.Content, Dialog.Header, Dialog.Body,
- * Dialog.Footer, and Dialog.Close. Supports controlled open and modal mode.
- */
-const meta = {
-  title: 'Feedback/Dialog',
-  component: Dialog,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Modal overlay for focused user interactions.',
-      },
-    },
-  },
-  argTypes: {
-    defaultOpen: { control: 'boolean', description: 'Default open state' },
-    modal: {
-      control: 'boolean',
-      description: 'Block interaction with the rest of the page',
-    },
-  },
-  args: {
-    modal: true,
-    defaultOpen: false,
-    children: (
-      <>
-        <Dialog.Trigger asChild>
-          <Button>Open Dialog</Button>
-        </Dialog.Trigger>
-        <Dialog.Content>
-          <Dialog.Close />
-          <Dialog.Header>
-            <Dialog.Title>Dialog Title</Dialog.Title>
-            <Dialog.Description>
-              A brief description of what this dialog is for.
-            </Dialog.Description>
-          </Dialog.Header>
-        </Dialog.Content>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Dialog {...args}>
-      <Dialog.Trigger asChild>
-        <Button>Open Dialog</Button>
-      </Dialog.Trigger>
-      <Dialog.Content>
-        <Dialog.Close />
-        <Dialog.Header>
-          <Dialog.Title>Dialog Title</Dialog.Title>
-          <Dialog.Description>
-            A brief description of what this dialog is for.
-          </Dialog.Description>
-        </Dialog.Header>
-        <Dialog.Body>
-          <p>Dialog content goes here.</p>
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button variant="secondary">Cancel</Button>
-          </Dialog.Close>
-          <Button variant="primary">Confirm</Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
-  ),
-};
-
-export const Confirmation: Story = {
-  render: (args) => (
-    <Dialog {...args}>
-      <Dialog.Trigger asChild>
-        <Button variant="danger">Delete Item</Button>
-      </Dialog.Trigger>
-      <Dialog.Content size="sm">
-        <Dialog.Header>
-          <Dialog.Title>Delete item?</Dialog.Title>
-          <Dialog.Description>
-            This action cannot be undone. The item will be permanently removed.
-          </Dialog.Description>
-        </Dialog.Header>
-        <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button variant="secondary">Cancel</Button>
-          </Dialog.Close>
-          <Button variant="danger">Delete</Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
-  ),
-};
-
-export const Large: Story = {
-  render: (args) => (
-    <Dialog {...args}>
-      <Dialog.Trigger asChild>
-        <Button>Open Large Dialog</Button>
-      </Dialog.Trigger>
-      <Dialog.Content size="lg">
-        <Dialog.Close />
-        <Dialog.Header>
-          <Dialog.Title>Settings</Dialog.Title>
-          <Dialog.Description>
-            Configure your application preferences.
-          </Dialog.Description>
-        </Dialog.Header>
-        <Dialog.Body>
-          <p>This dialog has more space for complex forms or layouts.</p>
-        </Dialog.Body>
-        <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button variant="secondary">Cancel</Button>
-          </Dialog.Close>
-          <Button variant="primary">Save Changes</Button>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
-  ),
-};
-
-export const OpenByDefault: Story = {
-  args: { defaultOpen: true },
-  render: (args) => (
-    <Dialog {...args}>
-      <Dialog.Content size="sm">
-        <Dialog.Close />
-        <Dialog.Header>
-          <Dialog.Title>Welcome</Dialog.Title>
-          <Dialog.Description>
-            This dialog is open when the story first renders.
-          </Dialog.Description>
-        </Dialog.Header>
-        <Dialog.Footer>
-          <Dialog.Close asChild>
-            <Button variant="secondary">Close</Button>
-          </Dialog.Close>
-        </Dialog.Footer>
-      </Dialog.Content>
-    </Dialog>
-  ),
-};

package/src/components/Drawer/Drawer.stories.tsx

@@ -1,144 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Drawer } from '.';
-import { Button } from '../Button';
-
-/**
- * Drawer is a panel that slides in from a screen edge, extending the Dialog
- * pattern with slide animations and edge positioning. It is a compound
- * component: compose Drawer.Trigger, Drawer.Content, Drawer.Header,
- * Drawer.Body, and Drawer.Footer inside the root.
- */
-const meta = {
-  title: 'Feedback/Drawer',
-  component: Drawer,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Slide-in panel for navigation, forms, or supplementary content.',
-      },
-    },
-  },
-  argTypes: {
-    open: { control: 'boolean', description: 'Controlled open state' },
-    defaultOpen: {
-      control: 'boolean',
-      description: 'Default open state (uncontrolled)',
-    },
-    modal: {
-      control: 'boolean',
-      description: 'Whether the drawer blocks interaction with the page',
-    },
-  },
-  args: {
-    modal: true,
-    children: (
-      <>
-        <Drawer.Trigger asChild>
-          <Button>Open Drawer</Button>
-        </Drawer.Trigger>
-        <Drawer.Content>
-          <Drawer.Close />
-          <Drawer.Header>
-            <Drawer.Title>Drawer Title</Drawer.Title>
-            <Drawer.Description>
-              A panel sliding in from the right.
-            </Drawer.Description>
-          </Drawer.Header>
-          <Drawer.Body>
-            <p>Drawer content goes here.</p>
-          </Drawer.Body>
-        </Drawer.Content>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Drawer>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Drawer>
-      <Drawer.Trigger asChild>
-        <Button>Open Drawer</Button>
-      </Drawer.Trigger>
-      <Drawer.Content>
-        <Drawer.Close />
-        <Drawer.Header>
-          <Drawer.Title>Drawer Title</Drawer.Title>
-          <Drawer.Description>
-            A panel sliding in from the right.
-          </Drawer.Description>
-        </Drawer.Header>
-        <Drawer.Body>
-          <p>Drawer content goes here.</p>
-        </Drawer.Body>
-        <Drawer.Footer>
-          <Drawer.Close asChild>
-            <Button variant="secondary">Cancel</Button>
-          </Drawer.Close>
-          <Button variant="primary">Save</Button>
-        </Drawer.Footer>
-      </Drawer.Content>
-    </Drawer>
-  ),
-};
-
-export const LeftSide: Story = {
-  render: () => (
-    <Drawer>
-      <Drawer.Trigger asChild>
-        <Button variant="secondary">Open Left</Button>
-      </Drawer.Trigger>
-      <Drawer.Content side="left">
-        <Drawer.Close />
-        <Drawer.Header>
-          <Drawer.Title>Navigation</Drawer.Title>
-        </Drawer.Header>
-        <Drawer.Body>
-          <p>Left-side drawer for navigation or filters.</p>
-        </Drawer.Body>
-      </Drawer.Content>
-    </Drawer>
-  ),
-};
-
-export const BottomSheet: Story = {
-  render: () => (
-    <Drawer>
-      <Drawer.Trigger asChild>
-        <Button variant="secondary">Open Bottom Sheet</Button>
-      </Drawer.Trigger>
-      <Drawer.Content side="bottom" size="sm">
-        <Drawer.Header>
-          <Drawer.Title>Actions</Drawer.Title>
-        </Drawer.Header>
-        <Drawer.Body>
-          <p>Bottom sheet for mobile-style actions.</p>
-        </Drawer.Body>
-      </Drawer.Content>
-    </Drawer>
-  ),
-};
-
-export const NonModal: Story = {
-  render: () => (
-    <Drawer modal={false}>
-      <Drawer.Trigger asChild>
-        <Button>Open Non-Modal</Button>
-      </Drawer.Trigger>
-      <Drawer.Content side="right" size="md">
-        <Drawer.Close />
-        <Drawer.Header>
-          <Drawer.Title>Details</Drawer.Title>
-        </Drawer.Header>
-        <Drawer.Body>
-          <p>The rest of the page stays interactive.</p>
-        </Drawer.Body>
-      </Drawer.Content>
-    </Drawer>
-  ),
-};

package/src/components/Editor/Editor.stories.tsx

@@ -1,99 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Editor } from '.';
-
-/**
- * Editor is a rich-text editor with a formatting toolbar, auto-save, and word
- * count. It falls back to a markdown-aware textarea when TipTap is not
- * installed. It is a compound component: compose Editor.Toolbar,
- * Editor.ToolbarGroup, Editor.ToolbarButton, Editor.Content, and
- * Editor.StatusBar for custom layouts.
- */
-const meta = {
-  title: 'Forms/Editor',
-  component: Editor,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Rich text editor with formatting toolbar, auto-save, and word count.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Editor height preset',
-    },
-    disabled: { control: 'boolean', description: 'Disable the editor' },
-    readOnly: { control: 'boolean', description: 'Make the editor read-only' },
-    toolbar: { control: 'boolean', description: 'Show default toolbar' },
-    statusBar: {
-      control: 'boolean',
-      description: 'Show word/character counts',
-    },
-  },
-  args: {
-    placeholder: 'Start typing your masterpiece here...',
-    size: 'md',
-    toolbar: true,
-    statusBar: true,
-  },
-} satisfies Meta<typeof Editor>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { placeholder: 'Start typing your masterpiece here...' },
-};
-
-export const Minimal: Story = {
-  args: {
-    placeholder: 'Quick note...',
-    formats: ['bold', 'italic', 'code'],
-  },
-};
-
-export const ReadOnly: Story = {
-  args: {
-    readOnly: true,
-    defaultValue:
-      'This content is read-only. You can select and copy text but cannot modify it.',
-  },
-};
-
-export const WithCharacterLimit: Story = {
-  args: {
-    placeholder: 'Write a tweet-sized message...',
-    maxLength: 280,
-    size: 'sm',
-    formats: ['bold', 'italic', 'link'],
-  },
-};
-
-export const CustomToolbar: Story = {
-  render: () => (
-    <Editor placeholder="Write your blog post...">
-      <Editor.Toolbar>
-        <Editor.ToolbarGroup aria-label="Basic formatting">
-          <Editor.ToolbarButton format="bold" />
-          <Editor.ToolbarButton format="italic" />
-        </Editor.ToolbarGroup>
-        <Editor.Separator />
-        <Editor.ToolbarGroup aria-label="Advanced formatting">
-          <Editor.ToolbarButton format="link" />
-          <Editor.ToolbarButton format="code" />
-          <Editor.ToolbarButton format="bulletList" />
-        </Editor.ToolbarGroup>
-        <Editor.ToolbarGroup aria-label="Status">
-          <Editor.StatusIndicator status="saving" />
-        </Editor.ToolbarGroup>
-      </Editor.Toolbar>
-      <Editor.Content />
-      <Editor.StatusBar showWordCount showCharCount />
-    </Editor>
-  ),
-};

package/src/components/EmptyState/EmptyState.stories.tsx

@@ -1,97 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { EmptyState } from '.';
-import { Button } from '../Button';
-
-/**
- * EmptyState is a placeholder for empty content areas, providing context,
- * guidance, and actions when no data is available. It is a compound component:
- * compose EmptyState.Icon, EmptyState.Title, EmptyState.Description, and
- * EmptyState.Actions inside the root.
- */
-const meta = {
-  title: 'Feedback/EmptyState',
-  component: EmptyState,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Placeholder for empty content areas with context, guidance, and actions.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant',
-    },
-  },
-  args: {
-    size: 'md',
-    children: (
-      <>
-        <EmptyState.Title>No projects yet</EmptyState.Title>
-        <EmptyState.Description>
-          Get started by creating your first project.
-        </EmptyState.Description>
-      </>
-    ),
-  },
-} satisfies Meta<typeof EmptyState>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <EmptyState>
-      <EmptyState.Title>No projects yet</EmptyState.Title>
-      <EmptyState.Description>
-        Get started by creating your first project.
-      </EmptyState.Description>
-      <EmptyState.Actions>
-        <Button>Create Project</Button>
-      </EmptyState.Actions>
-    </EmptyState>
-  ),
-};
-
-export const NoResults: Story = {
-  render: () => (
-    <EmptyState>
-      <EmptyState.Title>No results found</EmptyState.Title>
-      <EmptyState.Description>
-        Try adjusting your search terms or filters.
-      </EmptyState.Description>
-      <EmptyState.Actions>
-        <Button variant="secondary">Clear Filters</Button>
-      </EmptyState.Actions>
-    </EmptyState>
-  ),
-};
-
-export const Small: Story = {
-  render: () => (
-    <EmptyState size="sm">
-      <EmptyState.Title>No items</EmptyState.Title>
-      <EmptyState.Description>Add items to see them here.</EmptyState.Description>
-    </EmptyState>
-  ),
-};
-
-export const Large: Story = {
-  render: () => (
-    <EmptyState size="lg">
-      <EmptyState.Title>Welcome to your workspace</EmptyState.Title>
-      <EmptyState.Description>
-        This is where your projects will appear. Create your first project to get
-        started.
-      </EmptyState.Description>
-      <EmptyState.Actions>
-        <Button>Create Your First Project</Button>
-      </EmptyState.Actions>
-    </EmptyState>
-  ),
-};

package/src/components/Field/Field.stories.tsx

@@ -1,109 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Field } from '.';
-import { Input } from '../Input';
-
-/**
- * Field is a compositional form-field wrapper providing validation, labels,
- * descriptions, and error messages. It is a compound component: compose
- * Field.Label, Field.Control, Field.Description, and Field.Error inside the
- * root. Field.Control connects any form control to the field context.
- */
-const meta = {
-  title: 'Forms/Field',
-  component: Field,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Form field wrapper providing labels, descriptions, validation, and error messages.',
-      },
-    },
-  },
-  argTypes: {
-    disabled: {
-      control: 'boolean',
-      description: 'Disables the field and its control',
-    },
-    invalid: { control: 'boolean', description: 'Marks the field as invalid' },
-    validationMode: {
-      control: 'select',
-      options: ['onSubmit', 'onBlur', 'onChange'],
-      description: 'When to trigger validation',
-    },
-  },
-  args: {
-    name: 'email',
-    children: (
-      <>
-        <Field.Label>Email address</Field.Label>
-        <Field.Control>
-          <Input type="email" placeholder="jane@example.com" />
-        </Field.Control>
-        <Field.Description>We will never share your email.</Field.Description>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Field>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Field name="email">
-      <Field.Label>Email address</Field.Label>
-      <Field.Control>
-        <Input type="email" placeholder="jane@example.com" />
-      </Field.Control>
-      <Field.Description>We will never share your email.</Field.Description>
-    </Field>
-  ),
-};
-
-export const WithError: Story = {
-  render: () => (
-    <Field name="email" invalid>
-      <Field.Label>Email</Field.Label>
-      <Field.Control>
-        <Input type="email" defaultValue="not-an-email" />
-      </Field.Control>
-      <Field.Error match="typeMismatch">Enter a valid email address</Field.Error>
-    </Field>
-  ),
-};
-
-export const CustomValidation: Story = {
-  render: () => (
-    <Field
-      name="age"
-      validate={(value) => {
-        const num = Number(value);
-        if (isNaN(num) || num < 18) return 'Must be 18 or older';
-        return null;
-      }}
-      validationMode="onChange"
-      validationDebounceTime={500}
-    >
-      <Field.Label>Age</Field.Label>
-      <Field.Control>
-        <Input type="number" placeholder="18" />
-      </Field.Control>
-      <Field.Description>You must be at least 18 years old.</Field.Description>
-      <Field.Error match="customError" />
-    </Field>
-  ),
-};
-
-export const Disabled: Story = {
-  render: () => (
-    <Field name="username" disabled>
-      <Field.Label>Username</Field.Label>
-      <Field.Control>
-        <Input defaultValue="janedoe" />
-      </Field.Control>
-      <Field.Description>This field cannot be edited.</Field.Description>
-    </Field>
-  ),
-};