@titan-design/react-ui 0.5.0 → 0.7.0

package/src/components/shell/SessionStatePill.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { SessionStatePill } from './SessionStatePill'
+
+const meta: Meta<typeof SessionStatePill> = {
+  title: 'Shell/SessionStatePill',
+  component: SessionStatePill,
+  tags: ['autodocs'],
+  args: { state: 'live' },
+  argTypes: {
+    state: { control: 'select', options: ['live', 'rest', 'idle'] },
+    label: { control: 'text' },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '**Molecule** (= the ledger’s reusable StatusPill — also used by the Live-view header). Composes ' +
+          '[Indicator](?path=/docs/components-atoms-indicator--docs) (pulse `ping` + vivid color for live) + ' +
+          '[Typography](?path=/docs/foundations-typography--docs) (`monoLabel`). Use the `state` control to switch.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof SessionStatePill>
+
+export const Default: Story = {}

package/src/components/shell/SessionStatePill.test.tsx

@@ -0,0 +1,25 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SessionStatePill } from './SessionStatePill'
+
+describe('SessionStatePill', () => {
+  it('labels each state', () => {
+    const { rerender } = render(<SessionStatePill state="live" />)
+    expect(screen.getByText('LIVE')).toBeInTheDocument()
+    rerender(<SessionStatePill state="rest" />)
+    expect(screen.getByText('REST')).toBeInTheDocument()
+    rerender(<SessionStatePill state="idle" />)
+    expect(screen.getByText('IDLE')).toBeInTheDocument()
+  })
+
+  it('supports a custom label', () => {
+    render(<SessionStatePill state="live" label="SET LIVE" />)
+    expect(screen.getByText('SET LIVE')).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<SessionStatePill state="live" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/SessionStatePill.tsx

@@ -0,0 +1,46 @@
+import { View, type ViewProps } from 'react-native'
+import { cn } from '../../utils/cn'
+import { Indicator, type IndicatorColor, type IndicatorPulse } from '../ui/indicator'
+import { Typography, type TypographyColor } from '../custom/Typography'
+
+export type SessionState = 'live' | 'rest' | 'idle'
+
+export interface SessionStatePillProps extends ViewProps {
+  /** Session state → dot color + pulse + label. */
+  state: SessionState
+  /** Override the default label (LIVE / REST / IDLE). */
+  label?: string
+  className?: string
+}
+
+const stateConfig: Record<
+  SessionState,
+  {
+    label: string
+    color: IndicatorColor
+    pulse: boolean | IndicatorPulse
+    textColor: TypographyColor
+  }
+> = {
+  // live = vivid green with an expanding ring; rest = solid amber (no pulse — operator); idle is dim.
+  live: { label: 'LIVE', color: 'live', pulse: 'ping', textColor: 'primary' },
+  rest: { label: 'REST', color: 'warning', pulse: false, textColor: 'primary' },
+  idle: { label: 'IDLE', color: 'default', pulse: false, textColor: 'secondary' },
+}
+
+/**
+ * The global session-state readout (dot + label). Shared: the top bar's status
+ * and the Live-view header both use it (this is the ledger's "StatusPill",
+ * Family C — built once). S1 · SessionStatePill.
+ */
+export function SessionStatePill({ state, label, className, ...props }: SessionStatePillProps) {
+  const cfg = stateConfig[state]
+  return (
+    <View className={cn('flex-row items-center gap-2', className)} {...props}>
+      <Indicator size="md" color={cfg.color} pulse={cfg.pulse} />
+      <Typography variant="monoLabel" color={cfg.textColor} className="text-[11px]">
+        {label ?? cfg.label}
+      </Typography>
+    </View>
+  )
+}

package/src/components/shell/SideNav.stories.tsx

@@ -0,0 +1,81 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useArgs } from 'storybook/preview-api'
+import { View } from 'react-native'
+import { SideNav } from './SideNav'
+import { Typography } from '../custom/Typography'
+
+const meta: Meta<typeof SideNav> = {
+  title: 'Shell/SideNav',
+  component: SideNav,
+  tags: ['autodocs'],
+  args: { activeKey: 'live', liveKey: null },
+  argTypes: {
+    activeKey: { control: 'select', options: ['live', 'review', 'program', 'body'] },
+    liveKey: { control: 'select', options: [null, 'live', 'review', 'program', 'body'] },
+    onNavigate: { action: 'navigate' },
+  },
+  // Interactive AND Controls-synced: clicking a category writes `activeKey` back to the
+  // story args (canvas + Controls stay in lock-step) and still fires the `onNavigate`
+  // action. `useArgs` must be called directly in the story/render fn (not a child
+  // component), so the rules-of-hooks lint is disabled here — the idiomatic SB pattern.
+  render: (args) => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const [, updateArgs] = useArgs()
+    return (
+      <SideNav
+        {...args}
+        onNavigate={(key) => {
+          updateArgs({ activeKey: key })
+          args.onNavigate?.(key)
+        }}
+      />
+    )
+  },
+  // Render in-context: full-height shell frame so the rail snaps to the left edge and
+  // stretches with the viewport (resize the canvas height to see it hold).
+  decorators: [
+    (Story) => (
+      <View className="min-h-screen flex-row bg-background-default">
+        <Story />
+        <View className="flex-1 items-center justify-center">
+          <Typography variant="body2" color="tertiary">
+            main viewport
+          </Typography>
+        </View>
+      </View>
+    ),
+  ],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Organism** (shell region). The persistent 60px left rail switching Live · Review · Plan · ' +
+          'Body. Composes [NavItem](?path=/docs/shell-navitem--docs) × the four categories + the ' +
+          'shared [icon set](?path=/docs/foundations-icons--docs). Presentational — drive it with `activeKey` / ' +
+          '`onNavigate` / `liveKey`. Active = left accent bar; `liveKey` (when not active) tints that ' +
+          'label a muted green.\n\n' +
+          '**Try it:** stories render in a full-height shell frame — the rail pins to the left edge and ' +
+          'stretches to the viewport, items staying top-aligned. **Resize the canvas** to see it hold at ' +
+          'any height. Use the **Controls** to move `activeKey` / `liveKey`.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof SideNav>
+
+export const Default: Story = {}
+
+export const LiveElsewhere: Story = {
+  args: { activeKey: 'program', liveKey: 'live' },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'A set runs on Live while the operator is on Plan → the Live item carries a quiet green label cue. ' +
+          '(Still clickable — try switching away and back.)',
+      },
+    },
+  },
+}

package/src/components/shell/SideNav.test.tsx

@@ -0,0 +1,51 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent, within } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { SideNav } from './SideNav'
+
+describe('SideNav', () => {
+  it('renders the four default categories as tabs in a tablist', () => {
+    render(<SideNav activeKey="live" />)
+    expect(screen.getByRole('tablist')).toBeInTheDocument()
+    ;['Live', 'Review', 'Plan', 'Body'].forEach((name) => {
+      expect(screen.getByRole('tab', { name })).toBeInTheDocument()
+    })
+  })
+
+  it('shows the accent bar only on the active category', () => {
+    render(<SideNav activeKey="program" />)
+    expect(screen.getAllByTestId('nav-item-accent')).toHaveLength(1)
+    expect(
+      within(screen.getByRole('tab', { name: 'Plan' })).getByTestId('nav-item-accent')
+    ).toBeInTheDocument()
+    expect(
+      within(screen.getByRole('tab', { name: 'Live' })).queryByTestId('nav-item-accent')
+    ).toBeNull()
+  })
+
+  it('reports the tapped key via onNavigate', () => {
+    const onNavigate = vi.fn()
+    render(<SideNav activeKey="live" onNavigate={onNavigate} />)
+    fireEvent.click(screen.getByRole('tab', { name: 'Body' }))
+    expect(onNavigate).toHaveBeenCalledWith('body')
+  })
+
+  it('keeps the active item as active even when it is also the liveKey (no double-state)', () => {
+    render(<SideNav activeKey="live" liveKey="live" />)
+    // active wins: exactly one accent bar, on Live (the live cue never applies to the active view)
+    expect(screen.getAllByTestId('nav-item-accent')).toHaveLength(1)
+    expect(
+      within(screen.getByRole('tab', { name: 'Live' })).getByTestId('nav-item-accent')
+    ).toBeInTheDocument()
+  })
+
+  it('accepts custom items', () => {
+    render(<SideNav activeKey="a" items={[{ key: 'a', label: 'Alpha', icon: null }]} />)
+    expect(screen.getByRole('tab', { name: 'Alpha' })).toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<SideNav activeKey="live" />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/SideNav.tsx

@@ -0,0 +1,74 @@
+import type { ReactNode } from 'react'
+import { View } from 'react-native'
+import { cn } from '../../utils/cn'
+import { ActivityIcon, HistoryIcon, LayersIcon, PersonStandingIcon } from '../icons'
+import { NavItem } from './NavItem'
+
+export interface SideNavItem {
+  /** Stable category key — matches `activeKey` / `liveKey`. */
+  key: string
+  /** Micro-label shown under the glyph. */
+  label: string
+  /** The glyph node (rendered ~20px via `currentColor`). */
+  icon: ReactNode
+}
+
+export interface SideNavProps {
+  /** Category items, top → bottom. Defaults to the four dashboard categories. */
+  items?: SideNavItem[]
+  /** Key of the active category. */
+  activeKey: string
+  /** Called with the tapped item's key. */
+  onNavigate?: (key: string) => void
+  /**
+   * Key of a category with live activity while it is NOT active (e.g. a set
+   * running off its view) → a quiet green cue on that item's label.
+   */
+  liveKey?: string | null
+  className?: string
+}
+
+/** The four dashboard categories with their locked S2 glyphs (activity · history · layers · figure). */
+export const defaultNavItems: SideNavItem[] = [
+  { key: 'live', label: 'Live', icon: <ActivityIcon size={20} color="currentColor" /> },
+  { key: 'review', label: 'Review', icon: <HistoryIcon size={20} color="currentColor" /> },
+  { key: 'program', label: 'Plan', icon: <LayersIcon size={20} color="currentColor" /> },
+  { key: 'body', label: 'Body', icon: <PersonStandingIcon size={20} color="currentColor" /> },
+]
+
+/**
+ * Shell S2 · SideNav — the persistent 60px left rail that switches the main
+ * viewport between categories (Live · Review · Program · Body). Presentational:
+ * it renders `items` and reports taps via `onNavigate`; the app owns routing and
+ * which key is `live`. Active item shows a left accent bar; `liveKey` (when not
+ * the active view) tints that item's label a muted green. Fixed 60px at every
+ * width — labels sit under the glyph, so they never change the rail width.
+ */
+export function SideNav({
+  items = defaultNavItems,
+  activeKey,
+  onNavigate,
+  liveKey = null,
+  className,
+}: SideNavProps) {
+  return (
+    <View
+      accessibilityRole="tablist"
+      className={cn(
+        'w-[60px] items-center gap-[6px] border-r border-border bg-background-base py-3',
+        className
+      )}
+    >
+      {items.map((item) => (
+        <NavItem
+          key={item.key}
+          icon={item.icon}
+          label={item.label}
+          active={item.key === activeKey}
+          live={item.key === liveKey && item.key !== activeKey}
+          onPress={() => onNavigate?.(item.key)}
+        />
+      ))}
+    </View>
+  )
+}

package/src/components/shell/TopBar.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { TopBar } from './TopBar'
+import { type Device } from './DeviceRow'
+
+const DEVICES: Device[] = [
+  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
+  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
+  { id: 'Voltra-77E0', nickname: 'Spare', slot: null, state: 'available' },
+]
+
+const meta: Meta<typeof TopBar> = {
+  title: 'Shell/TopBar',
+  component: TopBar,
+  tags: ['autodocs'],
+  args: { state: 'live', devices: DEVICES },
+  argTypes: {
+    state: { control: 'select', options: ['live', 'rest', 'idle'] },
+    devices: { control: 'object' },
+    subtitle: { control: 'text' },
+    showSubtitle: { control: 'boolean' },
+    showClock: { control: 'boolean' },
+    time: { control: false },
+    onSelectDevice: { control: false },
+  },
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          '**Organism** — the persistent shell chrome band, and the root of the top-bar family ' +
+          '(see `shell/README.md` for the full dependency map). Composes ' +
+          '[BrandLockup](?path=/docs/shell-brandlockup--docs) + ' +
+          '[SessionStatePill](?path=/docs/shell-sessionstatepill--docs) + ' +
+          '[Divider](?path=/docs/components-atoms-divider--docs) (`bg-border-prominent`) + ' +
+          '[DeviceMenu](?path=/docs/shell-devicemenu--docs) + ' +
+          '[DateTime](?path=/docs/components-molecules-datetime--docs) (`variant="mono"` live clock). ' +
+          'Background = the shared `surfaceGradient.chrome` primitive.\n\n' +
+          '**Try it:** use the **Controls** to change `state`, edit `devices` (set one to `lost` to see the ' +
+          'fault), or toggle `showSubtitle` / `showClock`. **Resize the canvas** to watch the ' +
+          'container-responsive collapse (SIZE-D01) — subtitle drops < 1024px, clock < 720px. ' +
+          'Click the device glyph to open the menu.',
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof TopBar>
+
+export const Default: Story = {}

package/src/components/shell/TopBar.test.tsx

@@ -0,0 +1,36 @@
+import { describe, it, expect } from 'vitest'
+import { render, screen } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { TopBar } from './TopBar'
+import { type Device } from './DeviceRow'
+
+const devices: Device[] = [
+  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
+  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
+]
+
+const AT_1612 = new Date(2024, 0, 1, 16, 12) // local 16:12
+
+describe('TopBar', () => {
+  it('renders brand, state and a 24h clock', () => {
+    render(<TopBar state="live" devices={devices} time={AT_1612} showClock />)
+    expect(screen.getByText('VOLTRAS')).toBeInTheDocument()
+    expect(screen.getByText('LIVE')).toBeInTheDocument()
+    expect(screen.getByText('16:12')).toBeInTheDocument()
+  })
+
+  it('hides the clock when showClock is false', () => {
+    render(<TopBar state="live" devices={devices} time={AT_1612} showClock={false} />)
+    expect(screen.queryByText('16:12')).not.toBeInTheDocument()
+  })
+
+  it('hides the subtitle when showSubtitle is false', () => {
+    render(<TopBar state="rest" devices={devices} showSubtitle={false} />)
+    expect(screen.queryByText('/ wall dashboard')).not.toBeInTheDocument()
+  })
+
+  it('has no accessibility violations', async () => {
+    const { container } = render(<TopBar state="live" devices={devices} time={AT_1612} showClock />)
+    expect(await axe(container)).toHaveNoViolations()
+  })
+})

package/src/components/shell/TopBar.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react'
+import { View, type LayoutChangeEvent } from 'react-native'
+import { cn } from '../../utils/cn'
+import { surfaceGradient } from '../../theme/gradients'
+import { Divider } from '../ui/divider'
+import { DateTime } from '../custom/DateTime'
+import { BrandLockup } from './BrandLockup'
+import { SessionStatePill, type SessionState } from './SessionStatePill'
+import { DeviceMenu } from './DeviceMenu'
+import { type Device } from './DeviceRow'
+
+export interface TopBarProps {
+  /** Global session state → the status pill. */
+  state: SessionState
+  /** Devices for the connection glyph + dropdown. */
+  devices: Device[]
+  /** The moment to display in the clock (Date/timestamp). Omit for a live ticking clock. */
+  time?: number | Date
+  /** Brand subtitle. Default "wall dashboard". */
+  subtitle?: string
+  /** Force the subtitle on/off; defaults to container-responsive (hidden below ~1024px). */
+  showSubtitle?: boolean
+  /** Force the clock on/off; defaults to container-responsive (hidden below ~720px). */
+  showClock?: boolean
+  onSelectDevice?: (device: Device) => void
+  className?: string
+}
+
+// SIZE-D01: responsiveness is container-driven (measured width), not a fixed size prop.
+const SUBTITLE_MIN = 1024
+const CLOCK_MIN = 720
+
+/**
+ * S1 · TopBar — the persistent shell chrome band. Brand (left) + a right cluster
+ * of session state · device glyph · clock (clock edge-pinned so spacing stays
+ * stable as the state text changes). Collapses subtitle then clock as its
+ * container narrows.
+ */
+export function TopBar({
+  state,
+  devices,
+  time,
+  subtitle = 'wall dashboard',
+  showSubtitle,
+  showClock,
+  onSelectDevice,
+  className,
+}: TopBarProps) {
+  const [width, setWidth] = useState(SUBTITLE_MIN)
+  const onLayout = (e: LayoutChangeEvent) => setWidth(e.nativeEvent.layout.width)
+
+  const subtitleVisible = showSubtitle ?? width >= SUBTITLE_MIN
+  const clockVisible = showClock ?? width >= CLOCK_MIN
+
+  return (
+    <View
+      onLayout={onLayout}
+      // shared chrome gradient (web); solid bg-surface-elevated is the native fallback
+      style={surfaceGradient.chrome() as object}
+      className={cn(
+        'h-[46px] flex-row items-center gap-[14px] px-4 bg-surface-elevated border-b border-border',
+        className
+      )}
+    >
+      <BrandLockup subtitle={subtitle} showSubtitle={subtitleVisible} />
+
+      {/* right cluster — order: state · device · time (time pinned to the edge) */}
+      <View className="ml-auto flex-row items-center gap-[12px]">
+        <SessionStatePill state={state} />
+        <Divider orientation="vertical" className="h-4 bg-border-prominent" />
+        <DeviceMenu devices={devices} onSelectDevice={onSelectDevice} />
+        {clockVisible ? (
+          <>
+            <Divider orientation="vertical" className="h-4 bg-border-prominent" />
+            <DateTime
+              value={time}
+              live={time == null}
+              format="time"
+              hour12={false}
+              variant="mono"
+              color="secondary"
+              className="text-[11px] min-w-[38px] text-right"
+            />
+          </>
+        ) : null}
+      </View>
+    </View>
+  )
+}

package/src/components/shell/index.ts

@@ -0,0 +1,13 @@
+// Shell chrome — persistent dashboard frame (nav / top bar / rail / drawers / strip).
+// S1 · Top bar family. (Icons live in the shared `components/icons` primitive.)
+export * from './BrandLockup'
+export * from './SessionStatePill'
+export * from './DeviceIndicator'
+export * from './DeviceRow'
+export * from './DeviceMenu'
+export * from './TopBar'
+// S2 · Side nav family.
+export * from './NavItem'
+export * from './SideNav'
+// S3 · Dashboard shell — composes the nav + top-bar chrome over a content slot.
+export * from './DashboardShell'

package/src/components/ui/alert/Alert.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Alert, AlertTitle, AlertDescription } from './Alert'
 
 const meta: Meta<typeof Alert> = {
-  title: 'Components/Alert',
+  title: 'Components/Molecules/Alert',
   component: Alert,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/autocomplete/Autocomplete.stories.tsx

@@ -4,7 +4,7 @@ import { View, Text } from 'react-native'
 import { Autocomplete, AutocompleteOption } from './Autocomplete'
 
 const meta: Meta<typeof Autocomplete> = {
-  title: 'Components/Autocomplete',
+  title: 'Components/Molecules/Autocomplete',
   component: Autocomplete,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/avatar/Avatar.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Avatar, AvatarBadge, AvatarGroup } from './Avatar'
 
 const meta: Meta<typeof Avatar> = {
-  title: 'Components/Avatar',
+  title: 'Components/Atoms/Avatar',
   component: Avatar,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/badge/Badge.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Badge, BadgeText } from './Badge'
 
 const meta: Meta<typeof Badge> = {
-  title: 'Components/Badge',
+  title: 'Components/Atoms/Badge',
   component: Badge,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/breadcrumbs/Breadcrumbs.stories.tsx

@@ -3,7 +3,7 @@ import { Text } from 'react-native'
 import { Breadcrumbs, BreadcrumbItem } from './Breadcrumbs'
 
 const meta: Meta<typeof Breadcrumbs> = {
-  title: 'Components/Breadcrumbs',
+  title: 'Components/Molecules/Breadcrumbs',
   component: Breadcrumbs,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/button/Button.stories.tsx

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Button, ButtonText, ButtonIcon } from './Button'
 
 const meta: Meta<typeof Button> = {
-  title: 'Components/Button',
+  title: 'Components/Molecules/Button',
   component: Button,
   tags: ['autodocs'],
   argTypes: {

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

@@ -13,7 +13,7 @@ import {
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Card> = {
-  title: 'Components/Card',
+  title: 'Components/Molecules/Card',
   component: Card,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Checkbox, CheckboxGroup } from './Checkbox'
 
 const meta: Meta<typeof Checkbox> = {
-  title: 'Components/Checkbox',
+  title: 'Components/Molecules/Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
   argTypes: {

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

@@ -3,7 +3,7 @@ import { View } from 'react-native'
 import { Chip } from './Chip'
 
 const meta: Meta<typeof Chip> = {
-  title: 'Components/Chip',
+  title: 'Components/Atoms/Chip',
   component: Chip,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/collapse/Collapse.stories.tsx

@@ -12,7 +12,7 @@ import {
 } from './Collapse'
 
 const meta: Meta<typeof Accordion> = {
-  title: 'Components/Accordion',
+  title: 'Components/Organisms/Accordion',
   component: Accordion,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/data-row/DataRow.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { DataRow } from './DataRow'
 
 const meta: Meta<typeof DataRow> = {
-  title: 'Components/DataRow',
+  title: 'Components/Molecules/DataRow',
   component: DataRow,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/divider/Divider.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { Divider } from './Divider'
 
 const meta: Meta<typeof Divider> = {
-  title: 'Components/Divider',
+  title: 'Components/Atoms/Divider',
   component: Divider,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/drawer/Drawer.stories.tsx

@@ -5,7 +5,7 @@ import { Drawer, DrawerBody, DrawerFooter } from './Drawer'
 import { Button, ButtonText } from '../button'
 
 const meta: Meta<typeof Drawer> = {
-  title: 'Components/Drawer',
+  title: 'Components/Organisms/Drawer',
   component: Drawer,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/form-field/FormField.stories.tsx

@@ -5,7 +5,7 @@ import { Button, ButtonText } from '../button'
 import { Input } from '../input'
 
 const meta: Meta<typeof FormField> = {
-  title: 'Components/FormField',
+  title: 'Components/Molecules/FormField',
   component: FormField,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/help-tip/HelpTip.stories.tsx

@@ -3,7 +3,7 @@ import { View, Text } from 'react-native'
 import { HelpTip, LabelWithHelp } from './HelpTip'
 
 const meta: Meta<typeof HelpTip> = {
-  title: 'Components/HelpTip',
+  title: 'Components/Molecules/HelpTip',
   component: HelpTip,
   tags: ['autodocs'],
   argTypes: {

package/src/components/ui/icon-box/IconBox.stories.tsx

@@ -53,7 +53,7 @@ function BoltIcon({ size = 20, className }: { size?: number; className?: string
 }
 
 const meta: Meta<typeof IconBox> = {
-  title: 'Components/IconBox',
+  title: 'Components/Atoms/IconBox',
   component: IconBox,
   tags: ['autodocs'],
   argTypes: {