noecosystem-design 0.1.0

package/apps/storybook/stories/catalog/marketing-header.stories.tsx

@@ -0,0 +1,35 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../../../../packages/ui/src/button';
+import { MarketingHeader } from '../../../../packages/ui/src/marketing-header';
+
+export function MarketingHeaderDemo() {
+  return (
+    <MarketingHeader
+      brand={<span>NOE</span>}
+      links={
+        <>
+          <a href="/product">Product</a>
+          <a href="/pricing">Pricing</a>
+        </>
+      }
+      actions={<Button size="sm">Sign in</Button>}
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Marketing/Marketing Header',
+  component: MarketingHeaderDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof MarketingHeaderDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <MarketingHeaderDemo />
+    </div>
+  ),
+};

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { Button } from '../../../../packages/ui/src/button';
+import {
+  Menu,
+  MenuItem,
+  MenuPopup,
+  MenuSeparator,
+  MenuTrigger,
+} from '../../../../packages/ui/src/menu';
+
+function MenuDemo() {
+  return (
+    <Menu>
+      <MenuTrigger render={<Button>Actions</Button>} />
+      <MenuPopup>
+        <MenuItem>Rerun</MenuItem>
+        <MenuItem>Duplicate</MenuItem>
+        <MenuSeparator />
+        <MenuItem variant="destructive">Cancel run</MenuItem>
+      </MenuPopup>
+    </Menu>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Overlays/Menu',
+  component: MenuDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof MenuDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const KeyboardOpen: Story = {
+  name: 'Interaction — open with keyboard',
+  play: async ({ canvas }) => {
+    const trigger = canvas.getByRole('button', { name: /actions/i });
+    trigger.focus();
+    await userEvent.keyboard('{Enter}');
+    const menu = within(document.body).getByRole('menu');
+    await expect(menu).toBeVisible();
+    await expect(within(menu).getByText('Rerun')).toBeVisible();
+  },
+};

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../../../../packages/ui/src/button';
+import { Messaging } from '../../../../packages/ui/src/messaging';
+
+export function MessagingDemo() {
+  return (
+    <Messaging
+      label="Conversation"
+      messages={[
+        { id: '1', author: 'Ali', content: 'Hello' },
+        { id: '2', author: 'NOa', content: 'Hi there', variant: 'assistant' },
+      ]}
+      composer={<Button size="sm">Send</Button>}
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Communication/Messaging',
+  component: MessagingDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof MessagingDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <MessagingDemo />
+    </div>
+  ),
+};

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { MetricCard } from '../../../../packages/data-ui/src/metric-card';
+
+const meta = {
+  title: 'Catalog/Data/Metric Card',
+  component: MetricCard,
+  tags: ['autodocs'],
+  args: { label: 'Active services', value: '128', delta: '+4 this week', status: 'positive' },
+} satisfies Meta<typeof MetricCard>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Warning: Story = {
+  args: { label: 'Pending approvals', value: '9', delta: '+6 today', status: 'warning' },
+};
+export const Neutral: Story = {
+  args: { label: 'Median latency', value: '212ms', delta: undefined, status: 'neutral' },
+};

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

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

package/apps/storybook/stories/catalog/mobile-screen.stories.tsx

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { BottomNavigation } from '../../../../packages/ui/src/bottom-navigation';
+import { DataList } from '../../../../packages/ui/src/data-list';
+import { HeaderNavigation } from '../../../../packages/ui/src/header-navigation';
+import { MobileScreen } from '../../../../packages/ui/src/mobile-screen';
+
+const meta = {
+  title: 'Catalog/Patterns/Pages/Mobile Screen',
+  component: MobileScreenDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof MobileScreenDemo>;
+
+function MobileScreenDemo() {
+  return (
+    <MobileScreen
+      appBar={
+        <HeaderNavigation
+          brand={<span className="font-heading text-sm font-semibold">NOEcosystem</span>}
+          label="Primary"
+        />
+      }
+      bottomNavigation={
+        <BottomNavigation
+          items={[
+            { href: '#home', label: 'Home', current: true },
+            { href: '#agents', label: 'Agents', badge: '3' },
+            { href: '#runs', label: 'Runs' },
+          ]}
+          label="Mobile"
+        />
+      }
+      label="Runs screen"
+    >
+      <DataList
+        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' },
+        ]}
+        label="Recent runs"
+      />
+    </MobileScreen>
+  );
+}
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/multi-select.stories.tsx

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

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

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

package/apps/storybook/stories/catalog/not-found.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { Button } from '../../../../packages/ui/src/button';
+import { NotFound } from '../../../../packages/ui/src/not-found';
+
+export function NotFoundDemo() {
+  return (
+    <NotFound
+      title="Page not found"
+      description="The page you are looking for does not exist."
+      action={<Button>Go home</Button>}
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Pages/Not Found',
+  component: NotFoundDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof NotFoundDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <NotFoundDemo />
+    </div>
+  ),
+};

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

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

package/apps/storybook/stories/catalog/page-header.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../../../packages/ui/src/button';
+import { Breadcrumb, PageHeader } from '../../../../packages/ui/src/page-header';
+
+function PageHeaderDemo() {
+  return (
+    <PageHeader
+      breadcrumb={
+        <Breadcrumb
+          items={[
+            { label: 'Workspace', href: '#' },
+            { label: 'Agents', href: '#' },
+            { label: 'Review agent', current: true },
+          ]}
+        />
+      }
+      title="Review agent"
+      description="Configuration, tools and recent activity for this agent."
+      actions={
+        <Button size="sm" variant="primary">
+          New run
+        </Button>
+      }
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Application/Page Header',
+  component: PageHeaderDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof PageHeaderDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Pagination } from '../../../../packages/data-ui/src/pagination';
+
+function PaginationDemo() {
+  return (
+    <div style={{ maxWidth: '32rem' }}>
+      <Pagination
+        canPrevious={false}
+        label="Runs pagination"
+        nextLabel="Next page"
+        previousLabel="Previous page"
+        status="Page 1 of 8"
+      />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Data/Pagination',
+  component: PaginationDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof PaginationDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/apps/storybook/stories/catalog/pie-chart.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { PieChart } from '../../../../packages/data-ui/src/pie-chart';
+
+const meta = {
+  title: 'Catalog/Data / Visualization/Pie Chart',
+  component: PieChart,
+  tags: ['autodocs'],
+} satisfies Meta<typeof PieChart>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <PieChart />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/pricing-page.stories.tsx

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

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

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

package/apps/storybook/stories/catalog/progress-indicator.stories.tsx

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

package/apps/storybook/stories/catalog/progress-steps.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { ProgressSteps } from '../../../../packages/ui/src/progress-steps';
+
+export function ProgressStepsDemo() {
+  return (
+    <ProgressSteps
+      label="Onboarding"
+      steps={[
+        { id: '1', label: 'Account', state: 'completed' },
+        { id: '2', label: 'Profile', state: 'current' },
+        { id: '3', label: 'Done', state: 'pending' },
+      ]}
+    />
+  );
+}
+
+const meta = {
+  title: 'Catalog/Navigation/Progress Steps',
+  component: ProgressStepsDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ProgressStepsDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <ProgressStepsDemo />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/qr-code.stories.tsx

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

package/apps/storybook/stories/catalog/radar-chart.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RadarChart } from '../../../../packages/data-ui/src/radar-chart';
+
+const meta = {
+  title: 'Catalog/Data / Visualization/Radar Chart',
+  component: RadarChart,
+  tags: ['autodocs'],
+} satisfies Meta<typeof RadarChart>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <RadarChart />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/radio-group.stories.tsx

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

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

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

package/apps/storybook/stories/catalog/rich-text-editor.stories.tsx

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { RichTextEditor } from '../../../../packages/ui/src/rich-text-editor';
+
+const meta = {
+  title: 'Catalog/Base / Pickers/Rich Text Editor',
+  component: RichTextEditor,
+  tags: ['autodocs'],
+} satisfies Meta<typeof RichTextEditor>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default: Story = {};
+export const RTL: Story = {
+  render: () => (
+    <div dir="rtl">
+      <RichTextEditor />
+    </div>
+  ),
+};

package/apps/storybook/stories/catalog/run-inspector.stories.tsx

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { RunInspector } from '../../../../packages/ai-ui/src/run-inspector';
+
+const meta = {
+  title: 'Catalog/Agentic/Run Inspector',
+  component: RunInspector,
+  tags: ['autodocs'],
+  args: {
+    runId: 'run_9f21ac',
+    status: 'Running',
+    latency: '842ms',
+    tokenUsage: '12,480 / 128,000',
+    labels: { run: 'Run', latency: 'Latency', tokens: 'Tokens' },
+  },
+} satisfies Meta<typeof RunInspector>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Completed: Story = {
+  args: { status: 'Completed', latency: '2.1s', tokenUsage: '48,910 / 128,000' },
+};

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

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

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

@@ -0,0 +1,31 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { Button } from '../../../../packages/ui/src/button';
+import { SectionHeader } from '../../../../packages/ui/src/section-header';
+
+function SectionHeaderDemo() {
+  return (
+    <div style={{ display: 'grid', gap: '2rem', maxWidth: '36rem' }}>
+      <SectionHeader
+        title="Recent runs"
+        description="Executions from the last 24 hours across every workspace."
+        actions={
+          <Button size="sm" variant="outline">
+            View all
+          </Button>
+        }
+      />
+      <SectionHeader title="Tools" />
+    </div>
+  );
+}
+
+const meta = {
+  title: 'Catalog/Patterns/Application/Section Header',
+  component: SectionHeaderDemo,
+  tags: ['autodocs'],
+} satisfies Meta<typeof SectionHeaderDemo>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};