noecosystem-design 0.1.0

package/apps/storybook/stories/catalog/content-section.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { ContentSection } from '../../../../packages/ui/src/content-section';
+
+const meta = {
+  title: 'Catalog/Marketing / Content/Content Section',
+  component: ContentSection,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ContentSection>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <ContentSection />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/context-menu.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../../../packages/ui/src/button';
+import {
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+} from '../../../../packages/ui/src/context-menu';
+
+function ContextMenuDemo() {
+  return (
+    <ContextMenu>
+      <ContextMenuTrigger render={<Button variant="outline">Right-click me</Button>} />
+      <ContextMenuContent>
+        <ContextMenuItem>Cut</ContextMenuItem>
+        <ContextMenuItem>Copy</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Overlays/Context Menu',
+  component: ContextMenuDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ContextMenuDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithDestructive: Story = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger
+        render={
+          <button type="button" className="rounded-md border border-border p-8 text-sm">
+            Right-click area
+          </button>
+        }
+      />
+      <ContextMenuContent>
+        <ContextMenuItem>Rename</ContextMenuItem>
+        <ContextMenuItem>Duplicate</ContextMenuItem>
+        <ContextMenuSeparator />
+        <ContextMenuItem variant="destructive">Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <ContextMenu>
+        <ContextMenuTrigger render={<Button>راست کلیک</Button>} />
+        <ContextMenuContent>
+          <ContextMenuItem>برش</ContextMenuItem>
+          <ContextMenuItem>کپی</ContextMenuItem>
+        </ContextMenuContent>
+      </ContextMenu>
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/credit-card.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CreditCard } from '../../../../packages/ui/src/credit-card';
+
+const meta = {
+  title: 'Catalog/Base / Identity/Credit Card',
+  component: CreditCard,
+  tags: ['autodocs'],
+} satisfies Meta<typeof CreditCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <CreditCard />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/cta-section.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { CtaSection } from '../../../../packages/ui/src/cta-section';
+
+const meta = {
+  title: 'Catalog/Marketing / CTA/CTA Section',
+  component: CtaSection,
+  tags: ['autodocs'],
+} satisfies Meta<typeof CtaSection>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <CtaSection />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/dashboard-01.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Dashboard01 } from '../../../../packages/data-ui/src/dashboard-01';
+
+export function Dashboard01Demo() {
+  return (
+    <div style={{ height: '24rem' }}>
+      <Dashboard01 />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Examples/Dashboard 01',
+  component: Dashboard01Demo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dashboard01Demo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <Dashboard01Demo />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/dashboard-02.stories.tsx

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Dashboard02 } from '../../../../packages/data-ui/src/dashboard-02';
+
+export function Dashboard02Demo() {
+  return (
+    <div style={{ height: '24rem' }}>
+      <Dashboard02 />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Examples/Dashboard 02',
+  component: Dashboard02Demo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dashboard02Demo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <Dashboard02Demo />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/dashboard-shell.stories.tsx

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DashboardShell } from '../../../../packages/data-ui/src/dashboard-shell';
+import { MetricCard } from '../../../../packages/data-ui/src/metric-card';
+import { Button } from '../../../../packages/ui/src/button';
+import { Input } from '../../../../packages/ui/src/input';
+import { Skeleton } from '../../../../packages/ui/src/skeleton';
+import { Spinner } from '../../../../packages/ui/src/spinner';
+
+function DashboardShellDemo() {
+  return (
+    <DashboardShell
+      filters={<Input aria-label="Search services" placeholder="Search services…" />}
+      label="Service dashboard"
+      metrics={[
+        <MetricCard
+          delta="+4 this week"
+          key="1"
+          label="Active services"
+          status="positive"
+          value="128"
+        />,
+        <MetricCard
+          delta="+6 today"
+          key="2"
+          label="Pending approvals"
+          status="warning"
+          value="9"
+        />,
+      ]}
+      pagination={<span className="text-sm tabular-nums text-muted-foreground">Page 1 of 8</span>}
+      table={
+        <div className="flex flex-col gap-2 rounded-lg border border-border p-4">
+          <Skeleton style={{ height: '0.875rem', width: '70%' }} />
+          <Skeleton style={{ height: '0.875rem', width: '45%' }} />
+        </div>
+      }
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Pages/Dashboard Shell',
+  component: DashboardShellDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DashboardShellDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const States: Story = {
+  name: 'States — loading, disabled, pending',
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Spinner aria-label="Loading" className="size-5" />
+      <Skeleton style={{ height: '1rem', width: '10rem' }} />
+      <Button disabled variant="outline">
+        Disabled
+      </Button>
+      <Button loading size="sm" variant="primary">
+        Saving
+      </Button>
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/data-list.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DataList } from '../../../../packages/ui/src/data-list';
+
+const meta = {
+  title: 'Catalog/Patterns/Mobile/Data List',
+  component: DataListDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DataListDemo>;
+
+const items = [
+  {
+    id: '1',
+    href: '#run-1',
+    title: 'Review quarterly report',
+    subtitle: 'run_9f21ac · NOFinix',
+    trailing: '12:04',
+    current: true,
+  },
+  {
+    id: '2',
+    href: '#run-2',
+    title: 'Sync ledger entries',
+    subtitle: 'run_9f21ad',
+    trailing: '11:58',
+  },
+  { id: '3', href: '#agent-1', title: 'review-agent', subtitle: 'noe-agent-1' },
+] as const;
+
+function DataListDemo() {
+  return <DataList items={items} label="Recent runs" />;
+}
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/data-table.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { type DataColumn, DataTable } from '../../../../packages/data-ui/src/data-table';
+
+type ServiceRow = { id: string; service: string; owner: string; status: string; updated: string };
+
+const columns: DataColumn<ServiceRow>[] = [
+  { key: 'service', header: 'Service' },
+  { key: 'owner', header: 'Owner' },
+  { key: 'status', header: 'Status' },
+  { key: 'updated', header: 'Updated', technical: true, align: 'end' },
+];
+
+const rows: ServiceRow[] = [
+  { id: '1', service: 'catalog-api', owner: 'Platform', status: 'Healthy', updated: '2m ago' },
+  {
+    id: '2',
+    service: 'agent-runner',
+    owner: 'AI Platform',
+    status: 'Degraded',
+    updated: '11m ago',
+  },
+  {
+    id: '3',
+    service: 'registry-sync',
+    owner: 'Design Systems',
+    status: 'Healthy',
+    updated: '1h ago',
+  },
+];
+
+function DataTableDemo() {
+  return (
+    <DataTable columns={columns} rows={rows} caption="Service health" empty="No services yet." />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Data/Data Table',
+  component: DataTableDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DataTableDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Empty: Story = {
+  render: () => (
+    <DataTable columns={columns} rows={[]} caption="Service health" empty="No services yet." />
+  ),
+};

package/apps/storybook/stories/catalog/date-picker.stories.tsx

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { DatePicker } from '../../../../packages/ui/src/date-picker';
+
+const meta = {
+  title: 'Catalog/Base / Pickers/Date Picker',
+  component: DatePicker,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DatePicker>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <DatePicker />
+    </div>
+  ),
+};
+export const WithMinMax: Story = {
+  args: { min: new Date('2025-03-10T00:00:00Z'), max: new Date('2025-03-20T00:00:00Z'), value: new Date('2025-03-15T00:00:00Z') },
+};
+export const Jalali: Story = {
+  args: { calendar: 'persian', locale: 'fa-IR', value: new Date('2025-03-20T00:00:00Z') },
+};
+export const PortalRTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <DatePicker locale="fa-IR" calendar="persian" value={new Date('2025-03-20T00:00:00Z')} />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/dialog.stories.tsx

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Button } from '../../../../packages/ui/src/button';
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPanel,
+  DialogTitle,
+  DialogTrigger,
+} from '../../../../packages/ui/src/dialog';
+
+function DialogDemo() {
+  return (
+    <Dialog>
+      <DialogTrigger render={<Button>Review change</Button>} />
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Publish executive brief</DialogTitle>
+          <DialogDescription>
+            This shares the brief with the leadership workspace.
+          </DialogDescription>
+        </DialogHeader>
+        <DialogPanel>
+          <p style={{ margin: 0, fontSize: '0.875rem' }}>
+            The document will be visible to 12 people immediately after publishing.
+          </p>
+        </DialogPanel>
+        <DialogFooter>
+          <DialogClose render={<Button variant="quiet">Cancel</Button>} />
+          <Button variant="primary">Publish</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Overlays/Dialog',
+  component: DialogDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DialogDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const OpenAndClose: Story = {
+  name: 'Interaction — open, verify, close',
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole('button', { name: /review change/i }));
+    const dialog = within(document.body).getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await userEvent.click(within(dialog).getByRole('button', { name: /cancel/i }));
+  },
+};
+export const PersianRTL: Story = {
+  name: 'Persian — portal follows RTL',
+  globals: { locale: 'fa', direction: 'rtl' },
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole('button', { name: /review change/i }));
+    const dialog = within(document.body).getByRole('dialog');
+    await expect(dialog).toHaveAttribute('dir', 'rtl');
+  },
+};

package/apps/storybook/stories/catalog/direction-provider.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { DirectionProvider } from '../../../../packages/ui/src/direction';
+
+function NestedDirectionDemo() {
+  return (
+    <div style={{ display: 'grid', gap: '1rem', maxWidth: '28rem' }}>
+      <p style={{ margin: 0, fontSize: '0.8125rem', color: 'var(--noe-color-muted-foreground)' }}>
+        The outer page direction comes from the global locale/direction toolbar. This block forces
+        an RTL scope regardless of the page direction, to prove nested overrides work.
+      </p>
+      <DirectionProvider direction="rtl">
+        <div
+          style={{
+            border: '1px solid var(--noe-color-border)',
+            borderRadius: 'var(--noe-radius-md)',
+            padding: '1rem',
+            background: 'var(--noe-color-surface-raised)',
+          }}
+        >
+          یک ناحیه‌ی راست‌به‌چپ تودرتو، مستقل از جهت صفحه.
+        </div>
+      </DirectionProvider>
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Foundations/Direction Provider',
+  component: NestedDirectionDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof NestedDirectionDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/drawer.stories.tsx

@@ -0,0 +1,58 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Button } from '../../../../packages/ui/src/button';
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerPanel,
+  DrawerTitle,
+  DrawerTrigger,
+} from '../../../../packages/ui/src/drawer';
+
+function DrawerDemo({ side }: { side: 'start' | 'end' }) {
+  return (
+    <Drawer side={side}>
+      <DrawerTrigger render={<Button>Open run inspector</Button>} />
+      <DrawerContent>
+        <DrawerHeader>
+          <DrawerTitle>Run inspector</DrawerTitle>
+          <DrawerDescription>
+            Logical {side} side, resolved against active direction.
+          </DrawerDescription>
+        </DrawerHeader>
+        <DrawerPanel>
+          <p style={{ margin: 0, fontSize: '0.875rem' }}>Trace, tool calls and token usage.</p>
+        </DrawerPanel>
+        <DrawerFooter>
+          <DrawerClose render={<Button variant="quiet">Close</Button>} />
+        </DrawerFooter>
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Overlays/Drawer',
+  component: DrawerDemo,
+  tags: ['autodocs'],
+  args: { side: 'end' },
+} satisfies Meta<typeof DrawerDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const StartSide: Story = { name: 'Logical start side', args: { side: 'start' } };
+export const OpenAndClose: Story = {
+  name: 'Interaction — open and close',
+  play: async ({ canvas }) => {
+    await userEvent.click(canvas.getByRole('button', { name: /open run inspector/i }));
+    const dialog = within(document.body).getByRole('dialog');
+    await expect(dialog).toBeVisible();
+    await userEvent.click(within(dialog).getByRole('button', { name: /close/i }));
+  },
+};

package/apps/storybook/stories/catalog/dropdown.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../../../packages/ui/src/button';
+import {
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownTrigger,
+} from '../../../../packages/ui/src/dropdown';
+
+function DropdownDemo() {
+  return (
+    <Dropdown>
+      <DropdownTrigger render={<Button>Actions</Button>} />
+      <DropdownContent>
+        <DropdownItem>Rename</DropdownItem>
+        <DropdownItem>Duplicate</DropdownItem>
+        <DropdownSeparator />
+        <DropdownItem variant="destructive">Delete</DropdownItem>
+      </DropdownContent>
+    </Dropdown>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Overlays/Dropdown',
+  component: DropdownDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof DropdownDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Variants: Story = {
+  render: () => (
+    <div className="flex gap-4">
+      <Dropdown>
+        <DropdownTrigger render={<Button variant="outline">Outline trigger</Button>} />
+        <DropdownContent>
+          <DropdownItem>Action 1</DropdownItem>
+          <DropdownItem>Action 2</DropdownItem>
+        </DropdownContent>
+      </Dropdown>
+      <Dropdown>
+        <DropdownTrigger render={<Button variant="ghost">Ghost trigger</Button>} />
+        <DropdownContent>
+          <DropdownItem>Action A</DropdownItem>
+          <DropdownItem variant="destructive">Destructive</DropdownItem>
+        </DropdownContent>
+      </Dropdown>
+    </div>
+  ),
+};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <Dropdown>
+        <DropdownTrigger render={<Button>منو</Button>} />
+        <DropdownContent>
+          <DropdownItem>گزینه ۱</DropdownItem>
+          <DropdownItem>گزینه ۲</DropdownItem>
+        </DropdownContent>
+      </Dropdown>
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/email-template.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { EmailTemplate } from '../../../../packages/ui/src/email-template';
+
+const meta = {
+  title: 'Catalog/Shared / Auth/Email Template',
+  component: EmailTemplate,
+  tags: ['autodocs'],
+} satisfies Meta<typeof EmailTemplate>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <EmailTemplate />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/empty-state.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../../../packages/ui/src/button';
+import { EmptyState } from '../../../../packages/ui/src/empty-state';
+
+const meta = {
+  title: 'Catalog/Feedback/Empty State',
+  component: EmptyState,
+  tags: ['autodocs'],
+  args: {
+    title: 'No runs yet',
+    description: 'Start a run to see agent activity, tool calls and artifacts here.',
+    action: <Button variant="primary">Start a run</Button>,
+  },
+} satisfies Meta<typeof EmptyState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/error-state.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../../../packages/ui/src/button';
+import { ErrorState } from '../../../../packages/ui/src/error-state';
+
+const meta = {
+  title: 'Catalog/Feedback/Error State',
+  component: ErrorState,
+  tags: ['autodocs'],
+  args: {
+    title: 'Could not load the run',
+    description: 'The run may have expired or you may not have access to this workspace.',
+    action: <Button variant="outline">Retry</Button>,
+  },
+} satisfies Meta<typeof ErrorState>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};