121 lines
3.6 KiB
TypeScript
121 lines
3.6 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/react';
|
|
import { Check, Clock } from 'lucide-react';
|
|
import { Button } from './Button.js';
|
|
import { DataList, DataListItem, DataListMeta } from './DataList.js';
|
|
import {
|
|
DataTable,
|
|
DataTableBody,
|
|
DataTableCell,
|
|
DataTableHead,
|
|
DataTableHeader,
|
|
DataTableRow,
|
|
} from './DataTable.js';
|
|
import { DiffCard } from './DiffCard.js';
|
|
import { IconButton } from './IconButton.js';
|
|
import { ListItemButton } from './ListItemButton.js';
|
|
import { Panel, PanelBody, PanelDescription, PanelHeader, PanelTitle } from './Panel.js';
|
|
import { StatusBadge } from './StatusBadge.js';
|
|
import { Surface, SurfaceList, SurfaceListItem } from './Surface.js';
|
|
import { Timeline } from './Timeline.js';
|
|
|
|
const meta: Meta = {
|
|
title: 'Components/Operational Primitives',
|
|
};
|
|
|
|
export default meta;
|
|
type Story = StoryObj;
|
|
|
|
export const SurfacesAndLists: Story = {
|
|
render: () => (
|
|
<div className="grid max-w-2xl gap-4">
|
|
<Panel>
|
|
<PanelHeader>
|
|
<div>
|
|
<PanelTitle>Review queue</PanelTitle>
|
|
<PanelDescription>Dense operator work surface</PanelDescription>
|
|
</div>
|
|
<IconButton icon={<Check className="h-4 w-4" />} label="Approve selected" />
|
|
</PanelHeader>
|
|
<PanelBody>
|
|
<ListItemButton selected>
|
|
<div className="font-medium">Merge duplicate research notes</div>
|
|
<div className="text-sm text-[var(--bl-text-secondary)]">2 linked notes affected</div>
|
|
</ListItemButton>
|
|
<SurfaceList>
|
|
<SurfaceListItem selected>Selected surface row</SurfaceListItem>
|
|
<SurfaceListItem>Normal surface row</SurfaceListItem>
|
|
</SurfaceList>
|
|
</PanelBody>
|
|
</Panel>
|
|
<Surface variant="muted">Reusable muted surface</Surface>
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const StatusTimelineAndDiff: Story = {
|
|
render: () => (
|
|
<div className="grid max-w-2xl gap-4">
|
|
<div className="flex gap-2">
|
|
<StatusBadge tone="success" dot>
|
|
Approved
|
|
</StatusBadge>
|
|
<StatusBadge tone="warning" dot>
|
|
Needs review
|
|
</StatusBadge>
|
|
</div>
|
|
<Timeline
|
|
items={[
|
|
{
|
|
id: '1',
|
|
title: 'Draft created',
|
|
description: 'Agent proposed a note update',
|
|
status: 'Draft',
|
|
tone: 'info',
|
|
},
|
|
{
|
|
id: '2',
|
|
title: 'Human review',
|
|
description: 'Awaiting decision',
|
|
status: 'Pending',
|
|
tone: 'warning',
|
|
},
|
|
]}
|
|
/>
|
|
<DiffCard before="Original note body" after="Improved note body with extracted actions" />
|
|
</div>
|
|
),
|
|
};
|
|
|
|
export const DataDisplay: Story = {
|
|
render: () => (
|
|
<div className="grid max-w-3xl gap-4">
|
|
<DataList>
|
|
<DataListItem selected>
|
|
<div className="font-medium">Workspace intelligence</div>
|
|
<DataListMeta>
|
|
<Clock className="h-3.5 w-3.5" /> Updated 4 minutes ago
|
|
</DataListMeta>
|
|
</DataListItem>
|
|
<DataListItem>Inbox processing</DataListItem>
|
|
</DataList>
|
|
<DataTable>
|
|
<DataTableHeader>
|
|
<DataTableRow>
|
|
<DataTableHead>Name</DataTableHead>
|
|
<DataTableHead>Status</DataTableHead>
|
|
</DataTableRow>
|
|
</DataTableHeader>
|
|
<DataTableBody>
|
|
<DataTableRow>
|
|
<DataTableCell>Research notes</DataTableCell>
|
|
<DataTableCell>
|
|
<StatusBadge tone="success">Healthy</StatusBadge>
|
|
</DataTableCell>
|
|
</DataTableRow>
|
|
</DataTableBody>
|
|
</DataTable>
|
|
<Button variant="subtle">Open details</Button>
|
|
</div>
|
|
),
|
|
};
|