@titan-design/react-ui 0.12.1 → 0.13.0

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

@@ -1,65 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite'
-import { View, Text } from 'react-native'
-import { DashboardShell } from './DashboardShell'
-
-/**
- * `Pages/DashboardShell` — the wall-dashboard chrome as one registered surface.
- * Composes the shell-nav island (SideNav + TopBar and everything they pull in) over a
- * `children` content slot, so the dashboard app mounts a single component.
- */
-const meta: Meta<typeof DashboardShell> = {
-  title: 'Pages/DashboardShell',
-  component: DashboardShell,
-  tags: ['autodocs'],
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      description: {
-        component:
-          '**Page shell.** The wall-dashboard chrome. Composes ' +
-          '[SideNav](?path=/docs/shell-sidenav--docs) + ' +
-          '[TopBar](?path=/docs/shell-topbar--docs) — which pulls in DeviceMenu, DeviceRow, ' +
-          'DeviceIndicator, SessionStatePill, BrandLockup, DateTime and Divider — over a ' +
-          '`children` content slot. Mount this instead of re-assembling the chrome per view.',
-      },
-    },
-  },
-  argTypes: {
-    state: { control: 'select', options: ['live', 'rest', 'idle'] },
-    activeKey: { control: 'select', options: ['live', 'review', 'program', 'body'] },
-    liveKey: { control: 'select', options: [null, 'live', 'review', 'program', 'body'] },
-    onNavigate: { control: false },
-    onSelectDevice: { control: false },
-  },
-  decorators: [
-    (Story) => (
-      <View style={{ height: '100vh' as unknown as number, backgroundColor: '#0E0E0E' }}>
-        <Story />
-      </View>
-    ),
-  ],
-}
-
-export default meta
-type Story = StoryObj<typeof DashboardShell>
-
-export const Default: Story = {
-  args: { activeKey: 'live', state: 'live' },
-}
-
-export const WithContent: Story = {
-  args: { activeKey: 'review', state: 'rest', liveKey: 'live' },
-  render: (args) => (
-    <DashboardShell {...args}>
-      <View style={{ flex: 1, padding: 28 }}>
-        <Text style={{ color: '#E5E5E5', fontSize: 22, fontWeight: '700' }}>Review</Text>
-        <Text style={{ color: '#8A8A8A', fontSize: 13, marginTop: 6 }}>
-          A page mounts its content here; the shell keeps the nav + top-bar chrome persistent.
-        </Text>
-      </View>
-    </DashboardShell>
-  ),
-  parameters: {
-    docs: { description: { story: 'The shell with a page mounted in its content slot.' } },
-  },
-}

package/src/components/shell/DashboardShell.tsx

@@ -1,75 +0,0 @@
-import type { ReactNode } from 'react'
-import { View, Text } from 'react-native'
-import { cn } from '../../utils/cn'
-import { Surface } from '../ui/surface'
-import { SideNav, type SideNavItem } from './SideNav'
-import { TopBar } from './TopBar'
-import { type Device } from './DeviceRow'
-import { type SessionState } from './SessionStatePill'
-
-/**
- * `DashboardShell` — the wall-dashboard chrome: a persistent {@link SideNav} rail +
- * {@link TopBar} over a main content region. A thin frame that wires the shell-nav
- * organisms together and exposes a `children` content slot, so the dashboard app
- * mounts one component instead of re-assembling the chrome. Driven entirely by props.
- */
-export interface DashboardShellProps {
-  /** Active nav category key. */
-  activeKey?: string
-  /** Nav categories, top → bottom. Defaults to SideNav's four dashboard categories. */
-  navItems?: SideNavItem[]
-  /** A category with off-view live activity → a quiet cue on that item. */
-  liveKey?: string | null
-  /** Global session state → the TopBar status pill. */
-  state?: SessionState
-  /** Connected devices → the TopBar connection glyph + dropdown. */
-  devices?: Device[]
-  /** TopBar brand subtitle. */
-  subtitle?: string
-  onNavigate?: (key: string) => void
-  onSelectDevice?: (device: Device) => void
-  /** Main content region. A placeholder renders when omitted. */
-  children?: ReactNode
-  className?: string
-}
-
-const DEMO_DEVICES: Device[] = [
-  { id: 'Voltra-A3F2', nickname: 'Left Cable', slot: 'L', state: 'connected' },
-  { id: 'Voltra-9B1C', nickname: 'Right Cable', slot: 'R', state: 'connected' },
-]
-
-function ContentPlaceholder() {
-  return (
-    <View className="flex-1 items-center justify-center">
-      <Text className="font-heading text-sm text-text-tertiary">main content region</Text>
-    </View>
-  )
-}
-
-export function DashboardShell({
-  activeKey = 'live',
-  navItems,
-  liveKey = null,
-  state = 'live',
-  devices = DEMO_DEVICES,
-  subtitle = 'wall dashboard',
-  onNavigate,
-  onSelectDevice,
-  children,
-  className,
-}: DashboardShellProps) {
-  return (
-    // Column: the TopBar spans the FULL width across the top, and the SideNav sits BELOW it
-    // in the content row (not a full-height left rail). This keeps the brand/status band
-    // unbroken edge-to-edge and lets the nav align under it. The shell is the outermost
-    // Surface — it owns the base plane and seeds the on-surface colour context (mode) for
-    // the whole dashboard tree.
-    <Surface level="base" className={cn('flex-1', className)}>
-      <TopBar state={state} devices={devices} subtitle={subtitle} onSelectDevice={onSelectDevice} />
-      <View className="flex-1 flex-row">
-        <SideNav activeKey={activeKey} items={navItems} liveKey={liveKey} onNavigate={onNavigate} />
-        <View className="flex-1">{children ?? <ContentPlaceholder />}</View>
-      </View>
-    </Surface>
-  )
-}