@usefragments/ui 1.0.2 → 1.2.0

package/src/components/ColorPicker/ColorPicker.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ColorPicker } from '.';
-
-/**
- * Color selection control with a swatch, hex input, and visual picker.
- * Accepts controlled `value` or uncontrolled `defaultValue` hex strings,
- * sizes sm/md/lg, an optional hex input, and an error state.
- */
-const meta = {
-  title: 'Forms/ColorPicker',
-  component: ColorPicker,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Color selection control with hex input and visual picker.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant',
-    },
-    showInput: { control: 'boolean', description: 'Show the hex input field' },
-    error: { control: 'boolean', description: 'Show error styling' },
-    disabled: { control: 'boolean' },
-  },
-  args: {
-    label: 'Brand Color',
-    defaultValue: '#3b82f6',
-    size: 'md',
-    showInput: true,
-  },
-} satisfies Meta<typeof ColorPicker>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Brand Color', defaultValue: '#3b82f6' },
-};
-
-export const WithHelperText: Story = {
-  args: {
-    label: 'Primary Color',
-    defaultValue: '#10b981',
-    helperText: 'This color will be used for buttons and links',
-  },
-};
-
-export const SwatchOnly: Story = {
-  args: { defaultValue: '#ef4444', size: 'sm', showInput: false },
-};
-
-export const ErrorState: Story = {
-  args: {
-    label: 'Brand Color',
-    defaultValue: '#000000',
-    error: true,
-    helperText: 'Please select a valid brand color',
-  },
-};
-
-export const Disabled: Story = {
-  args: {
-    label: 'Locked Color',
-    defaultValue: '#64748b',
-    helperText: 'This color cannot be changed',
-    disabled: true,
-  },
-};

package/src/components/Combobox/Combobox.stories.tsx

@@ -1,133 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Combobox } from '.';
-
-/**
- * Searchable select that filters a dropdown of options as you type.
- * Compose Combobox.Input and Combobox.Content with Combobox.Item children.
- * Supports single and multiple selection, groups, and an empty state.
- */
-const meta = {
-  title: 'Forms/Combobox',
-  component: Combobox,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Searchable select that filters options as you type.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Size variant',
-    },
-    multiple: { control: 'boolean', description: 'Allow multiple selections' },
-    autoHighlight: {
-      control: 'boolean',
-      description: 'Auto-highlight first match while filtering',
-    },
-    disabled: { control: 'boolean' },
-  },
-  args: {
-    size: 'md',
-    placeholder: 'Select a fruit',
-    children: (
-      <>
-        <Combobox.Input />
-        <Combobox.Content>
-          <Combobox.Empty>No matches</Combobox.Empty>
-          <Combobox.Item value="apple">Apple</Combobox.Item>
-        </Combobox.Content>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Combobox>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <Combobox {...args}>
-      <Combobox.Input />
-      <Combobox.Content>
-        <Combobox.Empty>No matches</Combobox.Empty>
-        <Combobox.Item value="apple">Apple</Combobox.Item>
-        <Combobox.Item value="banana">Banana</Combobox.Item>
-        <Combobox.Item value="orange">Orange</Combobox.Item>
-        <Combobox.Item value="grape">Grape</Combobox.Item>
-      </Combobox.Content>
-    </Combobox>
-  ),
-};
-
-export const Multiple: Story = {
-  args: { multiple: true, placeholder: 'Select fruits...' },
-  render: (args) => (
-    <Combobox {...args}>
-      <Combobox.Input />
-      <Combobox.Content>
-        <Combobox.Item value="apple">Apple</Combobox.Item>
-        <Combobox.Item value="banana">Banana</Combobox.Item>
-        <Combobox.Item value="orange">Orange</Combobox.Item>
-        <Combobox.Item value="mango">Mango</Combobox.Item>
-      </Combobox.Content>
-    </Combobox>
-  ),
-};
-
-export const WithLabel: Story = {
-  args: {
-    label: 'Assignee',
-    placeholder: 'Search assignees...',
-    helperText: 'Type to filter the list of available assignees.',
-  },
-  render: (args) => (
-    <Combobox {...args}>
-      <Combobox.Input />
-      <Combobox.Content>
-        <Combobox.Empty>No matches</Combobox.Empty>
-        <Combobox.Item value="alice">Alice Johnson</Combobox.Item>
-        <Combobox.Item value="bob">Bob Chen</Combobox.Item>
-        <Combobox.Item value="carol">Carol Smith</Combobox.Item>
-      </Combobox.Content>
-    </Combobox>
-  ),
-};
-
-export const WithGroups: Story = {
-  args: { placeholder: 'Search countries...' },
-  render: (args) => (
-    <Combobox {...args}>
-      <Combobox.Input />
-      <Combobox.Content>
-        <Combobox.Group>
-          <Combobox.GroupLabel>North America</Combobox.GroupLabel>
-          <Combobox.Item value="us">United States</Combobox.Item>
-          <Combobox.Item value="ca">Canada</Combobox.Item>
-        </Combobox.Group>
-        <Combobox.Group>
-          <Combobox.GroupLabel>Europe</Combobox.GroupLabel>
-          <Combobox.Item value="uk">United Kingdom</Combobox.Item>
-          <Combobox.Item value="de">Germany</Combobox.Item>
-        </Combobox.Group>
-      </Combobox.Content>
-    </Combobox>
-  ),
-};
-
-export const ErrorState: Story = {
-  args: { label: 'Reviewer', placeholder: 'Search reviewers...' },
-  render: (args) => (
-    <Combobox {...args} error="Please select a reviewer">
-      <Combobox.Input />
-      <Combobox.Content>
-        <Combobox.Item value="alice">Alice</Combobox.Item>
-        <Combobox.Item value="bob">Bob</Combobox.Item>
-      </Combobox.Content>
-    </Combobox>
-  ),
-};

package/src/components/Command/Command.stories.tsx

@@ -1,102 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Command } from '.';
-
-/**
- * Searchable command palette combining an input with a filterable,
- * keyboard-navigable list of actions. Compose Command.Input and Command.List
- * with Command.Item children; group with Command.Group and Command.Separator.
- */
-const meta = {
-  title: 'Navigation/Command',
-  component: Command,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Searchable command palette for quick actions.',
-      },
-    },
-  },
-  argTypes: {
-    loop: { control: 'boolean', description: 'Loop keyboard navigation' },
-  },
-  args: {
-    loop: true,
-    children: (
-      <>
-        <Command.Input placeholder="Type a command..." />
-        <Command.List>
-          <Command.Item onItemSelect={() => {}}>Open File</Command.Item>
-          <Command.Empty>No results found.</Command.Empty>
-        </Command.List>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Command>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <div style={{ maxWidth: '400px', width: '100%' }}>
-      <Command {...args}>
-        <Command.Input placeholder="Type a command..." />
-        <Command.List>
-          <Command.Item onItemSelect={() => {}}>Open File</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Save Document</Command.Item>
-          <Command.Item onItemSelect={() => {}}>Print</Command.Item>
-          <Command.Empty>No results found.</Command.Empty>
-        </Command.List>
-      </Command>
-    </div>
-  ),
-};
-
-export const WithGroups: Story = {
-  render: (args) => (
-    <div style={{ maxWidth: '400px', width: '100%' }}>
-      <Command {...args}>
-        <Command.Input placeholder="Search..." />
-        <Command.List>
-          <Command.Group heading="Suggestions">
-            <Command.Item onItemSelect={() => {}}>Calendar</Command.Item>
-            <Command.Item onItemSelect={() => {}}>Calculator</Command.Item>
-          </Command.Group>
-          <Command.Separator />
-          <Command.Group heading="Settings">
-            <Command.Item onItemSelect={() => {}}>Profile</Command.Item>
-            <Command.Item onItemSelect={() => {}}>Billing</Command.Item>
-            <Command.Item disabled onItemSelect={() => {}}>
-              Team (coming soon)
-            </Command.Item>
-          </Command.Group>
-          <Command.Empty>No results found.</Command.Empty>
-        </Command.List>
-      </Command>
-    </div>
-  ),
-};
-
-export const WithKeywords: Story = {
-  render: (args) => (
-    <div style={{ maxWidth: '400px', width: '100%' }}>
-      <Command {...args}>
-        <Command.Input placeholder="What do you need?" />
-        <Command.List>
-          <Command.Item keywords={['create', 'add']} onItemSelect={() => {}}>
-            New Document
-          </Command.Item>
-          <Command.Item keywords={['browse']} onItemSelect={() => {}}>
-            Open Folder
-          </Command.Item>
-          <Command.Item keywords={['find']} onItemSelect={() => {}}>
-            Search
-          </Command.Item>
-          <Command.Empty>No results found.</Command.Empty>
-        </Command.List>
-      </Command>
-    </div>
-  ),
-};

package/src/components/ConversationList/ConversationList.stories.tsx

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ConversationList } from '.';
-
-/**
- * Scrollable message container with auto-scroll and history loading.
- * Holds message children, with autoScroll behavior (true/false/"smart"),
- * an optional empty state, and ConversationList.DateSeparator /
- * ConversationList.TypingIndicator subcomponents.
- */
-const meta = {
-  title: 'Ai/ConversationList',
-  component: ConversationList,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Scrollable message container with auto-scroll and history loading.',
-      },
-    },
-  },
-  argTypes: {
-    loadingHistory: {
-      control: 'boolean',
-      description: 'Show loading spinner at top while loading history',
-    },
-  },
-  args: {
-    autoScroll: 'smart',
-    loadingHistory: false,
-    children: (
-      <>
-        <div>Hello!</div>
-        <div>Hi there! How can I help you today?</div>
-      </>
-    ),
-  },
-} satisfies Meta<typeof ConversationList>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  render: (args) => (
-    <ConversationList {...args} style={{ height: 280 }}>
-      <div>Hello!</div>
-      <div>Hi there! How can I help you today?</div>
-      <div>Can you explain React hooks?</div>
-    </ConversationList>
-  ),
-};
-
-export const WithDateSeparators: Story = {
-  render: (args) => (
-    <ConversationList {...args} style={{ height: 280 }}>
-      <ConversationList.DateSeparator date={new Date(Date.now() - 86400000)} />
-      <div>A message from yesterday</div>
-      <ConversationList.DateSeparator date={new Date()} />
-      <div>And a message from today!</div>
-    </ConversationList>
-  ),
-};
-
-export const WithTypingIndicator: Story = {
-  render: (args) => (
-    <ConversationList {...args} style={{ height: 280 }}>
-      <div>What is TypeScript?</div>
-      <ConversationList.TypingIndicator name="Assistant" />
-    </ConversationList>
-  ),
-};
-
-export const LoadingHistory: Story = {
-  args: { loadingHistory: true },
-  render: (args) => (
-    <ConversationList {...args} style={{ height: 280 }}>
-      <div>This is the latest message</div>
-    </ConversationList>
-  ),
-};
-
-export const Empty: Story = {
-  render: (args) => (
-    <ConversationList
-      {...args}
-      style={{ height: 280 }}
-      emptyState={<div>Start the conversation</div>}
-    >
-      {null}
-    </ConversationList>
-  ),
-};

package/src/components/DataTable/DataTable.stories.tsx

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { DataTable } from '.';
-import type { ColumnDef, DataTableProps } from '.';
-
-/**
- * Data table with sorting, selection, and column management, powered by
- * TanStack Table. Requires `columns` and `data`; supports sortable headers,
- * checkbox selection, clickable rows, striped/bordered styling, and sizes.
- */
-
-type User = {
-  id: string;
-  name: string;
-  email: string;
-  role: string;
-  status: string;
-};
-
-const columns: ColumnDef<User>[] = [
-  { accessorKey: 'name', header: 'Name' },
-  { accessorKey: 'email', header: 'Email' },
-  { accessorKey: 'role', header: 'Role' },
-  { accessorKey: 'status', header: 'Status' },
-];
-
-const data: User[] = [
-  {
-    id: '1',
-    name: 'Alice Johnson',
-    email: 'alice@example.com',
-    role: 'Admin',
-    status: 'active',
-  },
-  {
-    id: '2',
-    name: 'Bob Chen',
-    email: 'bob@example.com',
-    role: 'Member',
-    status: 'pending',
-  },
-  {
-    id: '3',
-    name: 'Carol Smith',
-    email: 'carol@example.com',
-    role: 'Member',
-    status: 'active',
-  },
-];
-
-const meta = {
-  title: 'Display/DataTable',
-  component: DataTable,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Data table with sorting, selection, and column management.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md'],
-      description: 'Table density',
-    },
-    sortable: { control: 'boolean', description: 'Enable column sorting' },
-    selectable: { control: 'boolean', description: 'Enable row selection' },
-    showCheckbox: {
-      control: 'boolean',
-      description: 'Show checkbox column (requires selectable)',
-    },
-    striped: { control: 'boolean', description: 'Alternating row backgrounds' },
-    bordered: { control: 'boolean', description: 'Bordered container' },
-    captionHidden: { control: 'boolean' },
-  },
-  args: { columns, data, size: 'md' },
-} satisfies Meta<DataTableProps<User>>;
-
-export default meta;
-
-type Story = StoryObj<DataTableProps<User>>;
-
-export const Default: Story = {
-  args: { columns, data },
-};
-
-export const Sortable: Story = {
-  args: {
-    columns,
-    data,
-    sortable: true,
-    bordered: true,
-    caption: 'Team members',
-    captionHidden: true,
-  },
-};
-
-export const CheckboxSelection: Story = {
-  args: {
-    columns,
-    data,
-    selectable: true,
-    showCheckbox: true,
-    bordered: true,
-    getRowId: (row: User) => row.id,
-  },
-};
-
-export const Striped: Story = {
-  args: { columns, data, striped: true, size: 'sm' },
-};
-
-export const ClickableRows: Story = {
-  args: {
-    columns,
-    data,
-    onRowClick: (row: User) => alert(row.name),
-    size: 'sm',
-  },
-};
-
-export const Empty: Story = {
-  args: {
-    columns,
-    data: [],
-    emptyMessage: 'No users match your search criteria',
-  },
-};

package/src/components/DatePicker/DatePicker.stories.tsx

@@ -1,129 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { DatePicker } from ".";
-
-/**
- * Date picker with a calendar dropdown for single dates or date ranges,
- * built on react-day-picker. Compose DatePicker.Trigger, DatePicker.Content,
- * and DatePicker.Calendar. Supports modes single/range and disabled dates.
- */
-const meta = {
-  title: "Forms/DatePicker",
-  component: DatePicker,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: "Date picker with calendar dropdown for dates or ranges.",
-      },
-    },
-  },
-  argTypes: {
-    mode: {
-      control: "select",
-      options: ["single", "range"],
-      description: "Selection mode",
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-      description: "Trigger size variant",
-    },
-    disabled: { control: "boolean" },
-    fixedWeeks: { control: "boolean", description: "Always show 6 rows" },
-  },
-  args: {
-    mode: "single",
-    size: "md",
-    placeholder: "Pick a date",
-    children: (
-      <>
-        <DatePicker.Trigger />
-        <DatePicker.Content>
-          <DatePicker.Calendar />
-        </DatePicker.Content>
-      </>
-    ),
-  },
-} satisfies Meta<typeof DatePicker>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (args) => (
-    <DatePicker {...args}>
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  ),
-};
-
-export const Range: Story = {
-  args: { mode: "range", placeholder: "Select date range", numberOfMonths: 2 },
-  render: (args) => (
-    <DatePicker {...args}>
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  ),
-};
-
-export const DisabledDates: Story = {
-  args: {
-    placeholder: "Select a future date",
-    disabledDates: (date: Date) => date < new Date(),
-  },
-  render: (args) => (
-    <DatePicker {...args}>
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  ),
-};
-
-export const WithLabel: Story = {
-  args: {
-    label: "Start Date",
-    placeholder: "Pick a date",
-    helperText: "Choose when the project begins.",
-  },
-  render: (args) => (
-    <DatePicker {...args}>
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  ),
-};
-
-export const ErrorState: Story = {
-  args: { label: "Start Date", placeholder: "Pick a date" },
-  render: (args) => (
-    <DatePicker {...args} error="Please select a start date">
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  ),
-};
-
-export const Disabled: Story = {
-  args: { placeholder: "Pick a date", disabled: true },
-  render: (args) => (
-    <DatePicker {...args}>
-      <DatePicker.Trigger />
-      <DatePicker.Content>
-        <DatePicker.Calendar />
-      </DatePicker.Content>
-    </DatePicker>
-  ),
-};