@usefragments/ui 1.1.1 → 1.3.0

package/src/components/AppShell/AppShell.stories.tsx

@@ -1,156 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { AppShell } from ".";
-import { Header } from "../Header";
-import { Sidebar } from "../Sidebar";
-
-/**
- * AppShell is the full application layout wrapper integrating header, sidebar,
- * main content, and an optional aside panel. It is a compound component:
- * compose AppShell.Header, AppShell.Sidebar, AppShell.Main, and AppShell.Aside.
- */
-const meta = {
-  title: "Layout/AppShell",
-  component: AppShell,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          "Full layout wrapper integrating sidebar, header, main content, and optional aside panel.",
-      },
-    },
-  },
-  argTypes: {
-    layout: {
-      control: "select",
-      options: ["default", "sidebar", "sidebar-floating", "floating"],
-      description: "Structural layout for CSS grid areas",
-    },
-    bg: {
-      control: "text",
-      description: "Background color override for the shell container",
-    },
-  },
-  args: {
-    layout: "default",
-    children: (
-      <>
-        <AppShell.Header>
-          <Header>
-            <Header.Brand>MyApp</Header.Brand>
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px">
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Content</AppShell.Main>
-      </>
-    ),
-  },
-} satisfies Meta<typeof AppShell>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const DefaultLayout: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="default">
-        <AppShell.Header>
-          <Header>
-            <Header.Brand>MyApp</Header.Brand>
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px" collapsible="offcanvas">
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-              <Sidebar.Item>Analytics</Sidebar.Item>
-              <Sidebar.Item>Settings</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Header spans full width. Logo is in the header.</AppShell.Main>
-      </AppShell>
-    </div>
-  ),
-};
-
-export const SidebarLayout: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="sidebar">
-        <AppShell.Header>
-          <Header>
-            <Header.Trigger />
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px" collapsible="offcanvas">
-          <Sidebar.Header>MyApp</Sidebar.Header>
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-              <Sidebar.Item>Analytics</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Sidebar is full height. Logo is in the sidebar.</AppShell.Main>
-      </AppShell>
-    </div>
-  ),
-};
-
-export const WithAside: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="default">
-        <AppShell.Header>
-          <Header>
-            <Header.Brand>App</Header.Brand>
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="180px" collapsible="offcanvas">
-          <Sidebar.Nav>
-            <Sidebar.Section>
-              <Sidebar.Item active>Home</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md">Content with an aside panel on the right.</AppShell.Main>
-        <AppShell.Aside width="180px">
-          Additional context, filters, or quick actions.
-        </AppShell.Aside>
-      </AppShell>
-    </div>
-  ),
-};
-
-export const FloatingMain: Story = {
-  render: () => (
-    <div style={{ height: "360px", overflow: "hidden" }}>
-      <AppShell layout="sidebar">
-        <AppShell.Header>
-          <Header>
-            <Header.Trigger />
-          </Header>
-        </AppShell.Header>
-        <AppShell.Sidebar width="200px" collapsible="offcanvas" variant="floating">
-          <Sidebar.Header>MyApp</Sidebar.Header>
-          <Sidebar.Nav>
-            <Sidebar.Section label="Menu">
-              <Sidebar.Item active>Home</Sidebar.Item>
-            </Sidebar.Section>
-          </Sidebar.Nav>
-        </AppShell.Sidebar>
-        <AppShell.Main padding="md" variant="floating">
-          Main content has rounded corners and visual separation from the sidebar.
-        </AppShell.Main>
-      </AppShell>
-    </div>
-  ),
-};

package/src/components/Avatar/Avatar.stories.tsx

@@ -1,74 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Avatar } from '.';
-
-/**
- * Avatar is the visual representation of a user or entity. It renders an image
- * when available and falls back to initials or a placeholder icon. Use
- * Avatar.Group to stack multiple avatars in a row.
- */
-const meta = {
-  title: 'Display/Avatar',
-  component: Avatar,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: { component: 'Visual representation of a user or entity.' },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size variant',
-    },
-    shape: {
-      control: 'select',
-      options: ['circle', 'square'],
-      description: 'Shape variant',
-    },
-    src: { control: 'text', description: 'Image source URL' },
-    name: { control: 'text', description: 'Full name - used to generate initials' },
-    initials: { control: 'text', description: 'Fallback initials (1-2 characters)' },
-  },
-  args: {
-    name: 'Jane Doe',
-    size: 'md',
-    shape: 'circle',
-  },
-} satisfies Meta<typeof Avatar>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const WithImage: Story = {
-  args: {
-    src: 'https://i.pravatar.cc/150?u=jane',
-    alt: 'Jane Doe',
-    name: 'Jane Doe',
-  },
-};
-
-export const WithInitials: Story = {
-  args: { name: 'John Smith' },
-};
-
-export const Large: Story = {
-  args: { name: 'Conan McNicholl', size: 'xl' },
-};
-
-export const Square: Story = {
-  args: { name: 'App', shape: 'square' },
-};
-
-export const Group: Story = {
-  render: () => (
-    <Avatar.Group max={3} size="md">
-      <Avatar name="Alice Johnson" />
-      <Avatar name="Bob Smith" />
-      <Avatar name="Carol Williams" />
-      <Avatar name="David Brown" />
-      <Avatar name="Eve Davis" />
-    </Avatar.Group>
-  ),
-};

package/src/components/Badge/Badge.stories.tsx

@@ -1,92 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from ".";
-
-/**
- * Badge is a compact label for status, counts, or categorization. It draws
- * attention to metadata without dominating the layout and supports semantic
- * variants, an optional status dot, and a removable affordance.
- */
-const meta = {
-  title: "Display/Badge",
-  component: Badge,
-  tags: ["autodocs"],
-  parameters: {
-    docs: {
-      description: {
-        component: "Compact label for status, counts, or categorization.",
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "success", "warning", "error", "info", "outline"],
-      description: "Visual style indicating severity or category",
-    },
-    size: {
-      control: "select",
-      options: ["sm", "md", "lg"],
-      description: "Badge size",
-    },
-    dot: {
-      control: "boolean",
-      description: "Show a colored dot indicator before the label",
-    },
-    announce: {
-      control: "boolean",
-      description: 'Opt into role="status" live announcement semantics',
-    },
-  },
-  args: {
-    variant: "default",
-    size: "md",
-    children: "Default",
-  },
-} satisfies Meta<typeof Badge>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { variant: "default", children: "Default" },
-};
-
-export const Success: Story = {
-  args: { variant: "success", children: "Active" },
-};
-
-export const Error: Story = {
-  args: { variant: "error", children: "Failed" },
-};
-
-export const SemanticStatus: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: "var(--fui-space-2)", alignItems: "center" }}>
-      <Badge variant="success" size="lg">
-        Delivered
-      </Badge>
-      <Badge variant="error" size="lg">
-        Bounced
-      </Badge>
-      <Badge variant="warning" size="lg">
-        Delayed
-      </Badge>
-      <Badge variant="info" size="lg">
-        Queued
-      </Badge>
-    </div>
-  ),
-};
-
-export const WithDot: Story = {
-  args: { variant: "success", dot: true, children: "Online" },
-};
-
-export const Outline: Story = {
-  args: { variant: "outline", children: "Outline" },
-};
-
-export const Removable: Story = {
-  args: { variant: "info", children: "React", onRemove: () => {} },
-};

package/src/components/BentoGrid/BentoGrid.stories.tsx

@@ -1,98 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BentoGrid } from '.';
-
-/**
- * BentoGrid is an asymmetric grid layout with responsive column/row spans and
- * built-in surface styling for bento-style feature sections. Compose
- * BentoGrid.Item children, optionally with colSpan and rowSpan.
- */
-const meta = {
-  title: 'Layout/BentoGrid',
-  component: BentoGrid,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Asymmetric grid layout with responsive spans and built-in surface styling.',
-      },
-    },
-  },
-  argTypes: {
-    columns: {
-      control: 'select',
-      options: ['2', '3', '4'],
-      description: 'Number of columns — auto-collapses responsively',
-    },
-    gap: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Gap between grid items',
-    },
-  },
-  args: {
-    columns: 3,
-    gap: 'md',
-    children: (
-      <>
-        <BentoGrid.Item>Item 1</BentoGrid.Item>
-        <BentoGrid.Item>Item 2</BentoGrid.Item>
-        <BentoGrid.Item>Item 3</BentoGrid.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof BentoGrid>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <BentoGrid columns={3} gap="md">
-      <BentoGrid.Item>Item 1</BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item>Item 3</BentoGrid.Item>
-      <BentoGrid.Item>Item 4</BentoGrid.Item>
-      <BentoGrid.Item>Item 5</BentoGrid.Item>
-      <BentoGrid.Item>Item 6</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};
-
-export const HeroLayout: Story = {
-  render: () => (
-    <BentoGrid columns={3} gap="md">
-      <BentoGrid.Item colSpan={{ base: 1, lg: 2 }} rowSpan={{ base: 1, lg: 2 }}>
-        Hero content
-      </BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item>Item 3</BentoGrid.Item>
-      <BentoGrid.Item>Item 4</BentoGrid.Item>
-      <BentoGrid.Item>Item 5</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};
-
-export const TwoColumn: Story = {
-  render: () => (
-    <BentoGrid columns={2} gap="md">
-      <BentoGrid.Item>Item 1</BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item colSpan={2}>Wide item</BentoGrid.Item>
-      <BentoGrid.Item>Item 4</BentoGrid.Item>
-      <BentoGrid.Item>Item 5</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};
-
-export const FullWidthBanner: Story = {
-  render: () => (
-    <BentoGrid columns={3} gap="md">
-      <BentoGrid.Item>Item 1</BentoGrid.Item>
-      <BentoGrid.Item>Item 2</BentoGrid.Item>
-      <BentoGrid.Item>Item 3</BentoGrid.Item>
-      <BentoGrid.Item colSpan={3}>Full-width banner</BentoGrid.Item>
-    </BentoGrid>
-  ),
-};

package/src/components/Box/Box.stories.tsx

@@ -1,150 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Box } from '.';
-
-/**
- * Box is the primitive layout container for applying spacing, backgrounds, and
- * borders. It renders any semantic element via the `as` prop and is the
- * building block for custom layouts not covered by Stack or Grid.
- */
-const meta = {
-  title: 'Layout/Box',
-  component: Box,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Primitive layout container for applying spacing, backgrounds, and borders.',
-      },
-    },
-  },
-  argTypes: {
-    as: {
-      control: 'select',
-      options: ['div', 'section', 'article', 'aside', 'main', 'header', 'footer', 'nav', 'span'],
-      description: 'HTML element to render',
-    },
-    padding: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Padding on all sides',
-    },
-    paddingX: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Horizontal padding',
-    },
-    paddingY: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Vertical padding',
-    },
-    margin: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
-      description: 'Margin on all sides',
-    },
-    marginX: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
-      description: 'Horizontal margin',
-    },
-    marginY: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'],
-      description: 'Vertical margin',
-    },
-    background: {
-      control: 'select',
-      options: ['none', 'primary', 'secondary', 'tertiary', 'elevated'],
-      description: 'Background color',
-    },
-    rounded: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg', 'full'],
-      description: 'Border radius',
-    },
-    borderColor: {
-      control: 'select',
-      options: ['default', 'strong', 'accent', 'danger'],
-      description: 'Border color variant',
-    },
-    shadow: {
-      control: 'select',
-      options: ['none', 'sm', 'md', 'lg'],
-      description: 'Box shadow',
-    },
-    overflow: {
-      control: 'select',
-      options: ['hidden', 'auto', 'scroll', 'visible'],
-      description: 'Overflow behavior',
-    },
-    color: {
-      control: 'select',
-      options: ['primary', 'secondary', 'tertiary', 'accent', 'inverse'],
-      description: 'Text color',
-    },
-    display: {
-      control: 'select',
-      options: ['none', 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid'],
-      description: 'Display type',
-    },
-    border: { control: 'boolean', description: 'Show border' },
-    borderTop: { control: 'boolean', description: 'Show top border only' },
-    borderBottom: { control: 'boolean', description: 'Show bottom border only' },
-    borderLeft: { control: 'boolean', description: 'Show left border only' },
-    borderRight: { control: 'boolean', description: 'Show right border only' },
-  },
-  args: {
-    padding: 'md',
-    background: 'secondary',
-    rounded: 'md',
-    children: 'Content with padding and background',
-  },
-} satisfies Meta<typeof Box>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    padding: 'md',
-    background: 'secondary',
-    rounded: 'md',
-    children: 'Content with padding and background',
-  },
-};
-
-export const Bordered: Story = {
-  args: { padding: 'lg', border: true, rounded: 'md', children: 'Bordered content area' },
-};
-
-export const Elevated: Story = {
-  args: {
-    padding: 'lg',
-    rounded: 'md',
-    shadow: 'md',
-    background: 'primary',
-    children: 'Elevated content with shadow',
-  },
-};
-
-export const DirectionalPadding: Story = {
-  args: {
-    paddingX: 'xl',
-    paddingY: 'sm',
-    background: 'tertiary',
-    rounded: 'sm',
-    children: 'Wide horizontal padding, short vertical',
-  },
-};
-
-export const DirectionalBorders: Story = {
-  args: {
-    padding: 'md',
-    borderTop: true,
-    borderBottom: true,
-    children: 'Top and bottom borders only',
-  },
-};

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,87 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Breadcrumbs } from '.';
-
-/**
- * Breadcrumbs show the current page location within a hierarchy and let users
- * navigate back through parent pages. It is a compound component: compose
- * Breadcrumbs.Item children, marking the last one with `current`.
- */
-const meta = {
-  title: 'Navigation/Breadcrumbs',
-  component: Breadcrumbs,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Breadcrumb navigation showing the current page location within a hierarchy.',
-      },
-    },
-  },
-  argTypes: {
-    maxItems: {
-      control: 'number',
-      description: 'Maximum visible items before collapsing middle items with ellipsis',
-    },
-    label: {
-      control: 'text',
-      description: 'Custom aria-label for the breadcrumb nav landmark',
-    },
-  },
-  args: {
-    children: (
-      <>
-        <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-        <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
-        <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Breadcrumbs>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Breadcrumbs>
-      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Products</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};
-
-export const Collapsed: Story = {
-  render: () => (
-    <Breadcrumbs maxItems={3}>
-      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Category</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Subcategory</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Section</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Current Page</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};
-
-export const CustomSeparator: Story = {
-  render: () => (
-    <Breadcrumbs separator=">">
-      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Settings</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Profile</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};
-
-export const CustomLandmarkLabel: Story = {
-  render: () => (
-    <Breadcrumbs label="Documentation breadcrumbs">
-      <Breadcrumbs.Item href="#">Docs</Breadcrumbs.Item>
-      <Breadcrumbs.Item href="#">Components</Breadcrumbs.Item>
-      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
-    </Breadcrumbs>
-  ),
-};