@usefragments/ui 1.1.1 → 1.2.0

package/src/components/Card/Card.stories.tsx

@@ -1,144 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import { Card } from ".";
-import { Progress } from "../Progress";
-import { Stack } from "../Stack";
-import { Text } from "../Text";
-
-/**
- * Card is a container for grouping related content into a distinct surface. It
- * is a compound component: compose Card.Header, Card.Title, Card.Description,
- * Card.Body, and Card.Footer inside the root.
- */
-const meta = {
-  title: "Layout/Card",
-  component: Card,
-  tags: ["autodocs", "canonical"],
-  parameters: {
-    docs: {
-      description: { component: "Container for grouping related content." },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: "select",
-      options: ["default", "outlined", "outline", "elevated", "stat", "panel"],
-      description: "Visual style of the card surface",
-    },
-    padding: {
-      control: "select",
-      options: ["none", "sm", "md", "lg"],
-      description: "Internal padding size",
-    },
-    as: {
-      control: "select",
-      options: ["article", "div", "section"],
-      description: "Semantic HTML element for the card root",
-    },
-  },
-  args: {
-    variant: "default",
-    padding: "md",
-    children: (
-      <>
-        <Card.Header>
-          <Card.Title>Card Title</Card.Title>
-          <Card.Description>A brief description</Card.Description>
-        </Card.Header>
-        <Card.Body>Card content goes here.</Card.Body>
-      </>
-    ),
-  },
-} satisfies Meta<typeof Card>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: () => (
-    <Card>
-      <Card.Header>
-        <Card.Title>Card Title</Card.Title>
-        <Card.Description>A brief description</Card.Description>
-      </Card.Header>
-      <Card.Body>Card content goes here.</Card.Body>
-    </Card>
-  ),
-};
-
-export const Outlined: Story = {
-  render: () => (
-    <Card variant="outlined">
-      <Card.Header>
-        <Card.Title>Outlined Card</Card.Title>
-      </Card.Header>
-      <Card.Body>Content with border.</Card.Body>
-    </Card>
-  ),
-};
-
-export const Elevated: Story = {
-  render: () => (
-    <Card variant="elevated">
-      <Card.Header>
-        <Card.Title>Featured Item</Card.Title>
-      </Card.Header>
-      <Card.Body>Important content.</Card.Body>
-    </Card>
-  ),
-};
-
-export const Stat: Story = {
-  render: () => (
-    <Card variant="stat" style={{ width: 280 }}>
-      <Stack gap="md">
-        <Stack gap="xs">
-          <Text as="strong" size="2xl" weight="bold" letterSpacing="tighter" tabularNums>
-            94%
-          </Text>
-          <Text as="p" size="sm" color="secondary">
-            Component coverage
-          </Text>
-        </Stack>
-        <Progress value={94} variant="success" size="sm" />
-      </Stack>
-    </Card>
-  ),
-};
-
-export const Panel: Story = {
-  render: () => (
-    <Card variant="panel" padding="none" style={{ width: 360 }}>
-      <Card.Header divided>
-        <Card.Title>System states</Card.Title>
-      </Card.Header>
-      <Card.Body padding="md">
-        <Text as="p" size="sm" color="secondary">
-          Use panel cards for bordered dashboard regions with their own internal header and body
-          rhythm.
-        </Text>
-      </Card.Body>
-    </Card>
-  ),
-};
-
-export const WithFooter: Story = {
-  render: () => (
-    <Card>
-      <Card.Header>
-        <Card.Title>Card with Footer</Card.Title>
-        <Card.Description>Complete card layout</Card.Description>
-      </Card.Header>
-      <Card.Body>Main content area.</Card.Body>
-      <Card.Footer>Footer actions go here</Card.Footer>
-    </Card>
-  ),
-};
-
-export const ContentOnly: Story = {
-  render: () => (
-    <Card>
-      <Card.Body>Just content, no header or footer.</Card.Body>
-    </Card>
-  ),
-};

package/src/components/Chart/Chart.stories.tsx

@@ -1,119 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { BarChart, Bar, LineChart, Line, CartesianGrid, XAxis, YAxis } from 'recharts';
-import { ChartContainer, ChartTooltip, ChartLegend } from '.';
-
-/**
- * ChartContainer is a composable wrapper for recharts charts with theme-aware
- * tooltips, legends, and color integration. Pass a ChartConfig mapping data
- * keys to labels and colors, with a recharts chart element as the child.
- */
-const meta = {
-  title: 'Display/Chart',
-  component: ChartContainer,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.',
-      },
-    },
-  },
-  argTypes: {
-    summary: {
-      control: 'text',
-      description: 'Non-visual summary announced to assistive technology users',
-    },
-  },
-  args: {
-    config: {
-      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },
-    },
-    children: <BarChart data={[]} />,
-  },
-} satisfies Meta<typeof ChartContainer>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-const monthlyData = [
-  { month: 'Jan', revenue: 4200, users: 1200 },
-  { month: 'Feb', revenue: 5100, users: 1500 },
-  { month: 'Mar', revenue: 4800, users: 1400 },
-  { month: 'Apr', revenue: 6300, users: 1900 },
-  { month: 'May', revenue: 7100, users: 2200 },
-  { month: 'Jun', revenue: 6800, users: 2100 },
-];
-
-const deviceData = [
-  { device: 'Desktop', sessions: 4300 },
-  { device: 'Mobile', sessions: 3100 },
-  { device: 'Tablet', sessions: 900 },
-];
-
-export const Line_: Story = {
-  name: 'Line Chart',
-  render: () => (
-    <div style={{ width: '100%', height: 300 }}>
-      <ChartContainer
-        config={{
-          revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },
-          users: { label: 'Users', color: 'var(--fui-color-info)' },
-        }}
-      >
-        <LineChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="month" />
-          <YAxis />
-          <ChartTooltip />
-          <ChartLegend />
-          <Line type="monotone" dataKey="revenue" stroke="var(--fui-color-accent)" strokeWidth={2} dot={false} />
-          <Line type="monotone" dataKey="users" stroke="var(--fui-color-info)" strokeWidth={2} dot={false} />
-        </LineChart>
-      </ChartContainer>
-    </div>
-  ),
-};
-
-export const Bar_: Story = {
-  name: 'Bar Chart',
-  render: () => (
-    <div style={{ width: '100%', height: 300 }}>
-      <ChartContainer
-        config={{
-          sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },
-        }}
-      >
-        <BarChart data={deviceData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="device" />
-          <YAxis />
-          <ChartTooltip />
-          <Bar dataKey="sessions" fill="var(--fui-color-accent)" radius={[4, 4, 0, 0]} />
-        </BarChart>
-      </ChartContainer>
-    </div>
-  ),
-};
-
-export const WithSummary: Story = {
-  render: () => (
-    <div style={{ width: '100%', height: 300 }}>
-      <ChartContainer
-        config={{
-          sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },
-        }}
-        summary="Sessions by device: Desktop 4300, Mobile 3100, Tablet 900."
-      >
-        <BarChart data={deviceData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
-          <CartesianGrid strokeDasharray="3 3" />
-          <XAxis dataKey="device" />
-          <YAxis />
-          <ChartTooltip />
-          <Bar dataKey="sessions" fill="var(--fui-color-accent)" radius={[4, 4, 0, 0]} />
-        </BarChart>
-      </ChartContainer>
-    </div>
-  ),
-};

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,68 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Checkbox } from '.';
-
-/**
- * Binary toggle for form fields that require explicit submission.
- * Supports controlled and uncontrolled use, an indeterminate state, and
- * sizes sm/md/lg. Prefer Switch for immediate-effect settings.
- */
-const meta = {
-  title: 'Forms/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs', 'canonical'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Binary toggle for form fields requiring explicit submission.',
-      },
-    },
-  },
-  argTypes: {
-    size: {
-      control: 'select',
-      options: ['sm', 'md', 'lg'],
-      description: 'Checkbox size',
-    },
-    variant: {
-      control: 'select',
-      options: ['default', 'card'],
-      description: 'Inline checkbox or full-width clickable card',
-    },
-    indeterminate: { control: 'boolean', description: 'Partial selection state' },
-    disabled: { control: 'boolean' },
-    required: { control: 'boolean' },
-  },
-  args: { size: 'md', variant: 'default', label: 'Accept terms and conditions' },
-} satisfies Meta<typeof Checkbox>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { label: 'Accept terms and conditions' },
-};
-
-export const Checked: Story = {
-  args: { defaultChecked: true, label: 'Subscribe to newsletter' },
-};
-
-export const WithHelperText: Story = {
-  args: {
-    label: 'Email notifications',
-    helperText: 'Receive email updates about your account activity',
-  },
-};
-
-export const Indeterminate: Story = {
-  args: { indeterminate: true, label: 'Select all' },
-};
-
-export const Large: Story = {
-  args: { size: 'lg', label: 'Large checkbox' },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, defaultChecked: true, label: 'Disabled checked' },
-};

package/src/components/Chip/Chip.stories.tsx

@@ -1,70 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { Chip } from '.';
-
-/**
- * Interactive pill-shaped element for filtering, selecting, and tagging.
- * Supports selected state, removable chips via onRemove, and multi-select
- * sets through Chip.Group.
- */
-const meta = {
-  title: 'Forms/Chip',
-  component: Chip,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component: 'Interactive pill for filtering, selecting, and tagging.',
-      },
-    },
-  },
-  argTypes: {
-    variant: {
-      control: 'select',
-      options: ['filled', 'outlined', 'outline', 'soft'],
-      description: 'Visual style variant',
-    },
-    size: {
-      control: 'select',
-      options: ['xs', 'sm', 'md', 'lg'],
-      description: 'Chip size',
-    },
-    selected: { control: 'boolean', description: 'Selection state' },
-    disabled: { control: 'boolean' },
-  },
-  args: { variant: 'filled', size: 'md', children: 'Default' },
-} satisfies Meta<typeof Chip>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { children: 'Default' },
-};
-
-export const Outline: Story = {
-  args: { variant: 'outline', children: 'Outline' },
-};
-
-export const Selected: Story = {
-  args: { variant: 'soft', selected: true, children: 'Selected' },
-};
-
-export const Removable: Story = {
-  args: { children: 'TypeScript', onRemove: () => {} },
-};
-
-export const Disabled: Story = {
-  args: { disabled: true, selected: true, children: 'Disabled' },
-};
-
-export const Group: Story = {
-  render: () => (
-    <Chip.Group defaultValue={['react']}>
-      <Chip value="react">React</Chip>
-      <Chip value="vue">Vue</Chip>
-      <Chip value="angular">Angular</Chip>
-      <Chip value="svelte">Svelte</Chip>
-    </Chip.Group>
-  ),
-};

package/src/components/Cloud/CloudGovernanceShell.module.scss

@@ -1,88 +0,0 @@
-.frame {
-  position: fixed;
-  inset: 0;
-  overflow: hidden;
-  background: var(--fui-app-canvas-bg);
-}
-
-.shell {
-  height: 100%;
-  min-height: 0;
-}
-
-.main {
-  overflow: auto;
-}
-
-.page {
-  width: 100%;
-  max-width: 1320px;
-  margin-inline: auto;
-  padding: clamp(var(--fui-space-4), 3vw, var(--fui-space-6));
-}
-
-.brandMark {
-  display: grid;
-  width: var(--fui-target-size-min);
-  height: var(--fui-target-size-min);
-  flex: 0 0 auto;
-  place-items: center;
-  color: var(--fui-text-primary);
-  background: var(--fui-bg-elevated);
-  border: 1px solid var(--fui-border-strong);
-  border-radius: var(--fui-radius-md);
-}
-
-.brandCopy {
-  min-width: 0;
-}
-
-.contentGrid {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
-  gap: var(--fui-space-4);
-  align-items: start;
-}
-
-.tableColumn {
-  min-width: 0;
-}
-
-.toolbar {
-  display: grid;
-  grid-template-columns: minmax(260px, 1fr) minmax(150px, 180px) minmax(150px, 180px);
-  gap: var(--fui-space-2);
-  align-items: center;
-}
-
-.panelHeader {
-  width: 100%;
-}
-
-.stateRow {
-  min-height: var(--fui-target-size-min);
-}
-
-.actions {
-  width: 100%;
-}
-
-@media (max-width: 1120px) {
-  .contentGrid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 720px) {
-  .frame {
-    min-height: 100vh;
-  }
-
-  .page {
-    padding: var(--fui-space-3);
-  }
-
-  .toolbar {
-    grid-template-columns: 1fr;
-  }
-}