@sovereignfs/ui 0.83.1 → 0.89.1

package/src/stories/NavList.stories.tsx

@@ -1,147 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { NavList } from '../components/NavList/NavList';
-
-const overviewGroup = {
-  id: 'overview',
-  items: [
-    { id: 'overview', label: 'Overview', href: '#overview', icon: 'layout-dashboard' as const },
-  ],
-};
-
-const peopleGroup = {
-  id: 'people',
-  label: 'People',
-  items: [
-    { id: 'users', label: 'Users', href: '#users', icon: 'users' as const },
-    { id: 'groups', label: 'Groups', href: '#groups', icon: 'layers' as const },
-  ],
-};
-
-const appsGroup = {
-  id: 'apps',
-  label: 'Apps',
-  items: [
-    { id: 'plugins', label: 'Apps', href: '#plugins', icon: 'layout-grid' as const },
-    { id: 'entitlements', label: 'Entitlements', href: '#entitlements', icon: 'shield' as const },
-  ],
-};
-
-const meta = {
-  title: 'Components/NavList',
-  component: NavList,
-  parameters: { layout: 'padded' },
-  args: {
-    groups: [overviewGroup, peopleGroup, appsGroup],
-    variant: 'static',
-    'aria-label': 'Example sections',
-  },
-} satisfies Meta<typeof NavList>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Desktop sidebar shape — active row highlighted, no chevron. */
-export const StaticActiveItem: Story = {
-  args: {
-    groups: [
-      {
-        id: 'overview',
-        items: [
-          {
-            id: 'overview',
-            label: 'Overview',
-            href: '#overview',
-            icon: 'layout-dashboard',
-            active: true,
-          },
-        ],
-      },
-      peopleGroup,
-      appsGroup,
-    ],
-  },
-};
-
-/**
- * `density="compact"` — shrinks row height/padding for a short, always-
- * visible `static` list (e.g. Warden's sidebar "New chat"/"Providers"/
- * "Models" rows above its longer session list), where the default's full
- * touch-target height reads as needlessly spaced out. Only meaningful with
- * `variant="static"`; every other story on this page stays at the default
- * density, unaffected.
- */
-export const CompactDensity: Story = {
-  args: {
-    density: 'compact',
-    groups: [
-      {
-        id: 'primary',
-        items: [
-          { id: 'new', label: 'New chat', href: '#new', icon: 'plus' },
-          { id: 'providers', label: 'Providers', href: '#providers', icon: 'link' },
-          { id: 'models', label: 'Models', href: '#models', icon: 'layers' },
-        ],
-      },
-    ],
-  },
-};
-
-/** Mobile index shape — every row gets a trailing chevron, no active state; tapping navigates to a full-screen section. */
-export const Drilldown: Story = {
-  args: { variant: 'drilldown' },
-  parameters: { viewport: { defaultViewport: 'mobile' } },
-};
-
-/** `group.label` omitted entirely renders a flat list with no section headers. */
-export const Ungrouped: Story = {
-  args: {
-    groups: [
-      {
-        id: 'flat',
-        items: [
-          { id: 'a', label: 'First', href: '#a', icon: 'house' },
-          { id: 'b', label: 'Second', href: '#b', icon: 'settings' },
-        ],
-      },
-    ],
-  },
-};
-
-/** Simulates a consumer swapping in a client-side router link (e.g. Next's `<Link>`) instead of a plain `<a>`. */
-export const WithCustomLinkRenderer: Story = {
-  args: {
-    groups: [
-      {
-        id: 'overview',
-        items: [
-          {
-            id: 'overview',
-            label: 'Overview',
-            href: '#overview',
-            icon: 'layout-dashboard',
-            active: true,
-          },
-        ],
-      },
-      peopleGroup,
-    ],
-    renderLink: (item, linkProps) => (
-      <button
-        type="button"
-        className={linkProps.className}
-        aria-current={linkProps['aria-current']}
-        onClick={() => console.log(`client-side navigate to ${item.href}`)}
-        style={{
-          background: 'none',
-          border: 'none',
-          cursor: 'pointer',
-          font: 'inherit',
-          textAlign: 'left',
-          width: '100%',
-        }}
-      >
-        {linkProps.children}
-      </button>
-    ),
-  },
-};

package/src/stories/NavTabs.stories.tsx

@@ -1,53 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { NavTabs } from '../components/NavTabs/NavTabs';
-
-const items = [
-  { label: 'Overview', href: '#overview', active: true },
-  { label: 'Users', href: '#users' },
-  { label: 'Plugins', href: '#plugins' },
-  { label: 'Settings', href: '#settings' },
-];
-
-const meta = {
-  title: 'Components/NavTabs',
-  component: NavTabs,
-  parameters: { layout: 'padded' },
-  args: { items },
-} satisfies Meta<typeof NavTabs>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const ManyTabs: Story = {
-  args: {
-    items: [
-      { label: 'Profile', href: '#profile', active: true },
-      { label: 'Security', href: '#security' },
-      { label: 'Notifications', href: '#notifications' },
-      { label: 'Preferences', href: '#preferences' },
-      { label: 'Data & Privacy', href: '#data' },
-      { label: 'Sessions', href: '#sessions' },
-    ],
-  },
-  parameters: { viewport: { defaultViewport: 'mobile' } },
-};
-
-/** Simulates a consumer swapping in a client-side router link (e.g. Next's
- * `<Link replace>` inside an overlay-shell plugin) instead of a plain `<a>`. */
-export const WithCustomLinkRenderer: Story = {
-  args: {
-    renderLink: (item, linkProps) => (
-      <button
-        type="button"
-        className={linkProps.className}
-        aria-current={linkProps['aria-current']}
-        onClick={() => console.log(`client-side navigate to ${item.href}`)}
-        style={{ background: 'none', border: 'none', cursor: 'pointer', font: 'inherit' }}
-      >
-        {linkProps.children}
-      </button>
-    ),
-  },
-};

package/src/stories/OfflineGate.stories.tsx

@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { OfflineGate } from '../components/OfflineGate/OfflineGate';
-import { EmptyState } from '../components/EmptyState/EmptyState';
-
-const sampleContent = (
-  <div style={{ padding: 'var(--sv-space-4)' }}>
-    <p style={{ margin: 0, fontFamily: 'var(--sv-font-family)' }}>
-      The wrapped content — a user list, a settings form, anything that shouldn&rsquo;t operate
-      against a stale cached snapshot.
-    </p>
-  </div>
-);
-
-const meta = {
-  title: 'Components/OfflineGate',
-  component: OfflineGate,
-  parameters: { layout: 'padded' },
-} satisfies Meta<typeof OfflineGate>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// `OfflineGate` reads the live `useIsOffline()` hook, which Storybook can't
-// drive via args — toggle DevTools > Network > Offline (or throttling) in this
-// preview to see it swap `children` for the blocked state below.
-export const Default: Story = {
-  args: { children: sampleContent, surfaceName: 'Console' },
-};
-
-// The offline state is not independently controllable here (same reason as
-// Default), so this renders the exact EmptyState output OfflineGate produces
-// when useIsOffline() is true, for visual review without a live toggle.
-export const OfflineState: Story = {
-  args: { children: sampleContent, surfaceName: 'Console' },
-  render: () => (
-    <EmptyState
-      icon="alert-triangle"
-      heading="You're offline"
-      description="Console needs a connection — reconnect to continue."
-    />
-  ),
-};

package/src/stories/PageContainer.stories.tsx

@@ -1,82 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PageContainer } from '../components/PageContainer/PageContainer';
-
-const demoBlock = (
-  <div
-    style={{
-      background: 'var(--sv-color-surface-raised)',
-      border: '1px dashed var(--sv-color-border)',
-      borderRadius: 'var(--sv-radius-md)',
-      padding: 'var(--sv-space-4)',
-    }}
-  >
-    Page content goes here. This component supplies the page&apos;s gutter and constrains its width
-    — the runtime shell contributes neither.
-  </div>
-);
-
-const meta = {
-  title: 'Components/PageContainer',
-  component: PageContainer,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          'The wrapper every plugin page renders through. `padding` is the page gutter (the ' +
-          'runtime shell no longer applies one) and `maxWidth` constrains content, padding ' +
-          'included. Both default to the common case: a full-width page with the standard ' +
-          '32px/16px gutter.',
-      },
-    },
-  },
-  args: { children: demoBlock },
-} satisfies Meta<typeof PageContainer>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/** Defaults: full width, `md` gutter. */
-export const Default: Story = {};
-
-// ── maxWidth ──────────────────────────────────────────────────────────────
-
-export const WidthSmall: Story = { args: { maxWidth: 'sm' } };
-export const WidthMedium: Story = { args: { maxWidth: 'md' } };
-export const WidthLarge: Story = { args: { maxWidth: 'lg' } };
-
-// ── padding ───────────────────────────────────────────────────────────────
-
-/** For a page whose ancestor already supplies the gutter, or a full-bleed layout. */
-export const PaddingNone: Story = { args: { padding: 'none' } };
-export const PaddingSmall: Story = { args: { padding: 'sm' } };
-export const PaddingLarge: Story = { args: { padding: 'lg' } };
-
-/** Every gutter step tightens below 768px. */
-export const MobileViewport: Story = {
-  args: { maxWidth: 'md' },
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-};
-
-/**
- * An ancestor that already pads its content sets `--sv-page-gutter: 0` and
- * PageContainer stands its own gutter down — how `Dialog` keeps an overlay
- * plugin from being padded twice when the same page renders inside it.
- */
-export const GutterSuppressedByAncestor: Story = {
-  args: { maxWidth: 'md' },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          // eslint-disable-next-line @typescript-eslint/no-explicit-any -- CSS custom property
-          ['--sv-page-gutter' as any]: '0px',
-          border: '1px solid var(--sv-color-border)',
-          padding: 'var(--sv-space-6)',
-        }}
-      >
-        <Story />
-      </div>
-    ),
-  ],
-};

package/src/stories/PageHeader.stories.tsx

@@ -1,95 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { PageHeader } from '../components/PageHeader/PageHeader';
-import { Button } from '../components/Button/Button';
-
-const meta = {
-  title: 'Components/PageHeader',
-  component: PageHeader,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          "A page's title section. Web: title + description on the left, action on the right. Mobile: an optional back button, a single-line title (description drops out), the same action slot, and an optional vertical-ellipsis menu trigger — a compact single row, generalized from Kanban's own hand-rolled MobileBoardHeader. The web/mobile fork is ResponsiveSurface; only one tree is ever mounted.",
-      },
-    },
-  },
-} satisfies Meta<typeof PageHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: { title: 'Users' },
-};
-
-export const WithDescription: Story = {
-  args: {
-    title: 'Users',
-    description: 'Manage who has access to this instance.',
-  },
-};
-
-export const WithAction: Story = {
-  args: {
-    title: 'Users',
-    description: 'Manage who has access to this instance.',
-    action: <Button size="sm">Invite user</Button>,
-  },
-};
-
-/** A leading icon before the title text, on both breakpoints — e.g. a
- * folder-detail page pairing `folder-open` with the folder's own name. */
-export const WithIcon: Story = {
-  args: {
-    title: 'Handbook',
-    icon: 'folder-open',
-    action: <Button size="sm">Share</Button>,
-  },
-};
-
-/** For use under a shell/plugin that already renders its own `<h1>` — e.g.
- * Console's per-page headers sitting below `<h1>Console</h1>`. Visually
- * identical to the default story; only the rendered tag changes. */
-export const NestedHeadingLevel: Story = {
-  args: {
-    title: 'Users',
-    description: 'Manage who has access to this instance.',
-    headingLevel: 2,
-  },
-};
-
-/** Below the mobile breakpoint: description drops out of the compact row
- * (generalized from Kanban's own hand-rolled MobileBoardHeader, which has
- * no subtitle handling either), action stays — same content, adapts itself
- * if it needs to look different at this width. */
-export const Mobile: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-  args: {
-    title: 'Users',
-    description: 'Manage who has access to this instance.',
-    action: <Button size="sm">Invite user</Button>,
-  },
-};
-
-/** onBack shows a back button to the left of the title — mobile only, no
- * web equivalent. */
-export const MobileWithBack: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-  args: {
-    title: 'Sv Wallet',
-    onBack: () => undefined,
-  },
-};
-
-/** onMenuClick shows a vertical-ellipsis trigger at the far right — mobile
- * only, no web equivalent. Typically opens a drawer/menu; PageHeader has no
- * opinion on what it contains. */
-export const MobileWithMenu: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-  args: {
-    title: 'Sovereign Platform',
-    onBack: () => undefined,
-    onMenuClick: () => undefined,
-  },
-};

package/src/stories/ResponsiveSurface.stories.tsx

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ResponsiveSurface } from '../components/ResponsiveSurface/ResponsiveSurface';
-
-function demoTree(label: string) {
-  return (
-    <div
-      style={{
-        padding: 'var(--sv-space-6)',
-        textAlign: 'center',
-        fontFamily: 'var(--sv-font-family)',
-        fontSize: 'var(--sv-font-size-sm)',
-        color: 'var(--sv-color-text-primary)',
-        border: '1px dashed var(--sv-color-border)',
-        borderRadius: 'var(--sv-radius-md)',
-      }}
-    >
-      {label}
-    </div>
-  );
-}
-
-const meta = {
-  title: 'Components/ResponsiveSurface',
-  component: ResponsiveSurface,
-  parameters: {
-    layout: 'padded',
-    docs: {
-      description: {
-        component:
-          'Renders an entirely different component tree below a breakpoint, not a CSS squeeze of the same one — only the active side is ever mounted. See also the useResponsiveLayout hook for non-JSX values.',
-      },
-    },
-  },
-  args: {
-    web: demoTree('Web tree — e.g. a three-column layout'),
-    mobile: demoTree('Mobile tree — an entirely different component'),
-  },
-} satisfies Meta<typeof ResponsiveSurface>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-
-export const MobileViewport: Story = {
-  parameters: { viewport: { defaultViewport: 'mobile1' } },
-};

package/src/stories/Spinner.stories.tsx

@@ -1,25 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Spinner } from '../components/Spinner/Spinner';
-
-const meta = {
-  title: 'Components/Spinner',
-  component: Spinner,
-  parameters: { layout: 'centered' },
-} satisfies Meta<typeof Spinner>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};
-export const Small: Story = { args: { size: 'sm' } };
-export const Large: Story = { args: { size: 'lg' } };
-
-export const AllSizes: Story = {
-  render: () => (
-    <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
-      <Spinner size="sm" />
-      <Spinner size="md" />
-      <Spinner size="lg" />
-    </div>
-  ),
-};

package/src/stories/StepStrip.stories.tsx

@@ -1,76 +0,0 @@
-import { useState } from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { StepStrip, type StepStripItem } from '../components/StepStrip/StepStrip';
-
-const meta: Meta<typeof StepStrip> = {
-  title: 'Components/StepStrip',
-  component: StepStrip,
-  parameters: { layout: 'padded' },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof StepStrip>;
-
-interface Stop extends StepStripItem {
-  label: string;
-  sublabel: string;
-}
-
-const STOPS: Stop[] = [
-  { id: 'lisbon', label: 'Lisbon', sublabel: 'Aug 26 – 28 · 2 days' },
-  { id: 'porto', label: 'Porto', sublabel: 'Aug 28 – 30 · 2 days' },
-];
-
-const chipStyle = (isActive: boolean) => ({
-  boxSizing: 'border-box' as const,
-  minWidth: '160px',
-  padding: 'var(--sv-space-3) var(--sv-space-4)',
-  borderRadius: 'var(--sv-radius-lg)',
-  border: `1px solid ${isActive ? 'var(--sv-color-text-primary)' : 'var(--sv-color-border)'}`,
-  background: isActive ? 'var(--sv-color-text-primary)' : 'var(--sv-color-surface-raised)',
-  color: isActive ? 'var(--sv-color-surface)' : 'var(--sv-color-text-primary)',
-  cursor: 'pointer',
-  textAlign: 'left' as const,
-});
-
-function StopStripDemo() {
-  const [activeId, setActiveId] = useState<string>('lisbon');
-
-  return (
-    <StepStrip
-      items={STOPS}
-      activeId={activeId}
-      aria-label="Trip stops"
-      onAdd={() => alert('Add a stop')}
-      addLabel="Add a stop"
-      renderItem={(stop, { isActive }) => (
-        <button type="button" style={chipStyle(isActive)} onClick={() => setActiveId(stop.id)}>
-          <div style={{ fontWeight: 600, fontSize: 'var(--sv-font-size-sm)' }}>{stop.label}</div>
-          <div style={{ fontSize: 'var(--sv-font-size-xs)', opacity: 0.8 }}>{stop.sublabel}</div>
-        </button>
-      )}
-    />
-  );
-}
-
-export const Default: Story = {
-  render: () => <StopStripDemo />,
-  name: 'Stop strip (click to select, trailing add chip)',
-};
-
-export const NoAddAffordance: Story = {
-  render: () => (
-    <StepStrip
-      items={STOPS}
-      activeId="porto"
-      aria-label="Trip stops"
-      renderItem={(stop, { isActive }) => (
-        <div style={chipStyle(isActive)}>
-          <div style={{ fontWeight: 600, fontSize: 'var(--sv-font-size-sm)' }}>{stop.label}</div>
-          <div style={{ fontSize: 'var(--sv-font-size-xs)', opacity: 0.8 }}>{stop.sublabel}</div>
-        </div>
-      )}
-    />
-  ),
-};