@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/ui/toolbar-button/ToolbarButton.stories.tsx

@@ -0,0 +1,415 @@
+import React, { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import { ToolbarButton, ToolbarButtonGroup } from './ToolbarButton'
+
+const meta: Meta<typeof ToolbarButton> = {
+  title: 'Components/ToolbarButton',
+  component: ToolbarButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'neumorphic'],
+    },
+    isActive: {
+      control: 'select',
+      options: [undefined, true, false],
+      description: 'undefined/true = pressed look, false = raised look',
+    },
+    isDisabled: {
+      control: 'boolean',
+    },
+    showLabel: {
+      control: 'boolean',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View className="bg-surface-elevated p-6 rounded-lg">
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof ToolbarButton>
+
+// Icon components matching MUI icon sizing (20px for fontSize="small")
+// These simulate MUI SvgIcon components at 20x20
+const SettingsIcon = ({ color }: { color?: string }) => (
+  <View style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}>
+    <Text className={color ? undefined : 'text-text-secondary'} style={{ fontSize: 16, ...(color ? { color } : {}) }}>⚙</Text>
+  </View>
+)
+
+const FilterIcon = ({ color }: { color?: string }) => (
+  <View style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}>
+    <Text className={color ? undefined : 'text-text-secondary'} style={{ fontSize: 16, ...(color ? { color } : {}) }}>⏣</Text>
+  </View>
+)
+
+const ViewIcon = ({ color }: { color?: string }) => (
+  <View style={{ width: 20, height: 20, alignItems: 'center', justifyContent: 'center' }}>
+    <Text className={color ? undefined : 'text-text-secondary'} style={{ fontSize: 16, ...(color ? { color } : {}) }}>◉</Text>
+  </View>
+)
+
+export const Default: Story = {
+  args: {
+    label: 'Settings',
+    icon: <SettingsIcon />,
+    variant: 'neumorphic',
+    showLabel: true,
+  },
+}
+
+export const ActiveVsInactive: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <View>
+        <Text className="text-text-secondary text-xs mb-1">
+          isActive=true - sunken/dark look, ORANGE icon, white text
+        </Text>
+        <ToolbarButton 
+          label="Active (orange icon)" 
+          icon={<FilterIcon />} 
+          isActive={true}
+        />
+      </View>
+      <View>
+        <Text className="text-text-secondary text-xs mb-1">
+          isActive=undefined - sunken/dark look, white icon (default state)
+        </Text>
+        <ToolbarButton 
+          label="Default (white icon)" 
+          icon={<FilterIcon />}
+        />
+      </View>
+      <View>
+        <Text className="text-text-secondary text-xs mb-1">
+          isActive=false - elevated/light look, gray icon
+        </Text>
+        <ToolbarButton 
+          label="Inactive (gray icon)" 
+          icon={<FilterIcon />} 
+          isActive={false}
+        />
+      </View>
+    </View>
+  ),
+}
+
+export const Interactive: Story = {
+  render: function Render() {
+    const [active, setActive] = useState(false)
+    return (
+      <View style={{ gap: 16 }}>
+        <Text className="text-text-secondary text-xs">
+          Click to toggle. When active=true, icon turns orange:
+        </Text>
+        <ToolbarButton 
+          label="Toggle Me" 
+          icon={<SettingsIcon />}
+          isActive={active}
+          onPress={() => setActive(!active)}
+        />
+        <Text className="text-text-secondary text-xs">
+          isActive: {active ? 'true (sunken, orange icon)' : 'false (elevated, gray icon)'}
+        </Text>
+      </View>
+    )
+  },
+}
+
+export const IconOnly: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Text className="text-text-secondary text-xs">
+        Icon-only buttons. Active button has orange icon:
+      </Text>
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <ToolbarButton 
+          label="Settings" 
+          icon={<SettingsIcon />} 
+          showLabel={false}
+          isActive={false}
+        />
+        <ToolbarButton 
+          label="Filter (active)" 
+          icon={<FilterIcon />} 
+          showLabel={false} 
+          isActive={true}
+        />
+        <ToolbarButton 
+          label="View" 
+          icon={<ViewIcon />} 
+          showLabel={false}
+          isActive={false}
+        />
+      </View>
+    </View>
+  ),
+}
+
+export const Disabled: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Text className="text-text-secondary text-xs">
+        Disabled buttons use MUI&apos;s default dark theme styling.
+      </Text>
+      <Text className="text-text-secondary text-[11px]">
+        Background: rgba(255,255,255,0.12) | No shadows | Colors preserved with opacity
+      </Text>
+      <Text className="text-text-secondary text-[11px]">
+        Note: Orange icon IS shown when isActive=true (matching original XP behavior)
+      </Text>
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <ToolbarButton 
+          label="Disabled Active" 
+          icon={<SettingsIcon />} 
+          isActive={true}
+          isDisabled={true}
+        />
+        <ToolbarButton 
+          label="Disabled Inactive" 
+          icon={<SettingsIcon />} 
+          isActive={false}
+          isDisabled={true}
+        />
+      </View>
+    </View>
+  ),
+}
+
+export const HoverStates: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Text className="text-text-secondary text-xs">
+        Hover over buttons to see the hover effect (background lightens, shadows removed)
+      </Text>
+      <Text className="text-text-secondary text-[11px]">
+        Active: #3C3C3C → #4C4C4C | Inactive: #6E6E6E → #5D5D5D | Shadows: removed
+      </Text>
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <ToolbarButton 
+          label="Hover Me (Active)" 
+          icon={<SettingsIcon />}
+          isActive={true}
+        />
+        <ToolbarButton 
+          label="Hover Me (Inactive)" 
+          icon={<SettingsIcon />}
+          isActive={false}
+        />
+      </View>
+    </View>
+  ),
+}
+
+export const WithMenu: Story = {
+  render: function Render() {
+    return (
+      <ToolbarButton
+        label="View Options"
+        icon={<ViewIcon />}
+        isActive={false}
+        menuContent={
+          <View style={{ paddingVertical: 8 }}>
+            <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>Grid View</Text>
+            <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>List View</Text>
+            <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>Compact View</Text>
+          </View>
+        }
+      />
+    )
+  },
+}
+
+export const ButtonGroup: Story = {
+  render: function Render() {
+    const [activeIndex, setActiveIndex] = useState<number | null>(1)
+    
+    return (
+      <View style={{ gap: 16 }}>
+        <Text className="text-text-secondary text-xs mb-1">
+          Click to select (one active at a time):
+        </Text>
+        <ToolbarButtonGroup gap="sm">
+          <ToolbarButton 
+            label="Filter" 
+            icon={<FilterIcon />}
+            isActive={activeIndex === 0}
+            onPress={() => setActiveIndex(activeIndex === 0 ? null : 0)}
+          />
+          <ToolbarButton 
+            label="Settings" 
+            icon={<SettingsIcon />}
+            isActive={activeIndex === 1}
+            onPress={() => setActiveIndex(activeIndex === 1 ? null : 1)}
+          />
+          <ToolbarButton 
+            label="View" 
+            icon={<ViewIcon />}
+            isActive={activeIndex === 2}
+            onPress={() => setActiveIndex(activeIndex === 2 ? null : 2)}
+          />
+        </ToolbarButtonGroup>
+      </View>
+    )
+  },
+}
+
+export const ToolbarExample: Story = {
+  render: function Render() {
+    const [filterActive, setFilterActive] = useState(true)
+    const [settingsActive, setSettingsActive] = useState(false)
+    
+    return (
+      <View>
+        <Text className="text-text-secondary text-xs mb-3">
+          Typical toolbar usage - filters active, settings inactive:
+        </Text>
+        <ToolbarButtonGroup gap="sm">
+          <ToolbarButton
+            label="Filters"
+            icon={<FilterIcon />}
+            isActive={filterActive}
+            onPress={() => setFilterActive(!filterActive)}
+          />
+          <ToolbarButton
+            label="Settings"
+            icon={<SettingsIcon />}
+            isActive={settingsActive}
+            onPress={() => setSettingsActive(!settingsActive)}
+          />
+          <ToolbarButton
+            label="View"
+            icon={<ViewIcon />}
+            isActive={false}
+            menuContent={
+              <View style={{ paddingVertical: 8 }}>
+                <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>Grid</Text>
+                <Text className="text-text-primary" style={{ paddingHorizontal: 16, paddingVertical: 8 }}>List</Text>
+              </View>
+            }
+          />
+        </ToolbarButtonGroup>
+      </View>
+    )
+  },
+}
+
+export const CompactMode: Story = {
+  render: function Render() {
+    const [isCompact, setIsCompact] = useState(false)
+    
+    return (
+      <View style={{ gap: 16 }}>
+        <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+          <Text className="text-text-secondary text-xs">
+            Mode: {isCompact ? 'Compact (icon only)' : 'Full (icon + label)'}
+          </Text>
+          <ToolbarButton
+            label="Toggle"
+            icon={<ViewIcon />}
+            showLabel={false}
+            isActive={isCompact}
+            onPress={() => setIsCompact(!isCompact)}
+          />
+        </View>
+        <View className="h-px bg-border-default" />
+        <ToolbarButtonGroup gap="sm">
+          <ToolbarButton
+            label="Filter"
+            icon={<FilterIcon />}
+            showLabel={!isCompact}
+            isActive={true}
+          />
+          <ToolbarButton
+            label="Settings"
+            icon={<SettingsIcon />}
+            showLabel={!isCompact}
+            isActive={false}
+          />
+          <ToolbarButton
+            label="View"
+            icon={<ViewIcon />}
+            showLabel={!isCompact}
+            isActive={false}
+          />
+        </ToolbarButtonGroup>
+      </View>
+    )
+  },
+}
+
+export const Variants: Story = {
+  render: () => (
+    <View style={{ gap: 24 }}>
+      <View>
+        <Text className="text-text-secondary text-xs mb-2">Neumorphic (with 3D inset shadows)</Text>
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <ToolbarButton label="Inactive" icon={<SettingsIcon />} variant="neumorphic" isActive={false} />
+          <ToolbarButton label="Active" icon={<SettingsIcon />} variant="neumorphic" isActive={true} />
+        </View>
+      </View>
+      <View>
+        <Text className="text-text-secondary text-xs mb-2">Flat (no shadows)</Text>
+        <View style={{ flexDirection: 'row', gap: 8 }}>
+          <ToolbarButton label="Inactive" icon={<SettingsIcon />} variant="default" isActive={false} />
+          <ToolbarButton label="Active" icon={<SettingsIcon />} variant="default" isActive={true} />
+        </View>
+      </View>
+    </View>
+  ),
+}
+
+export const CSSReference: Story = {
+  render: () => (
+    <View style={{ gap: 16 }}>
+      <Text className="text-text-secondary text-xs">
+        Computed CSS properties (derived from original SettingsButton):
+      </Text>
+      <View className="bg-surface-base p-4 rounded-lg">
+        <Text className="text-text-secondary text-[11px] font-mono">
+          {`/* Button base */
+padding: 6px 16px;
+border-radius: 4px;
+display: flex;
+align-items: center;
+
+/* Active (isActive !== false) - sunken look */
+background-color: #3C3C3C;
+box-shadow: inset -1px -1px 6px #3C3C3C,
+            inset 1px 2px 1px #6E6E6E,
+            1px 1px 1px #6E6E6E;
+color: #FFFFFF;
+
+/* Inactive (isActive === false) - elevated look */
+background-color: #6E6E6E;
+box-shadow: inset 2px 2px 2px #1F1F1F,
+            inset -1px -1px 2px #6E6E6E;
+color: #D1D1D1;
+
+/* Text (Typography subtitle2 + bold) */
+font-size: 14px;
+font-weight: 700;
+font-family: Nunito Sans;
+line-height: 1.57;
+
+/* Icon */
+width: 20px;
+height: 20px;
+margin-right: 8px; /* when label shown */
+color: #FF7900; /* when isActive=true */`}
+        </Text>
+      </View>
+      <View style={{ flexDirection: 'row', gap: 8 }}>
+        <ToolbarButton label="Inactive" icon={<SettingsIcon />} isActive={false} />
+        <ToolbarButton label="Active" icon={<SettingsIcon />} isActive={true} />
+      </View>
+    </View>
+  ),
+}

package/src/components/ui/toolbar-button/ToolbarButton.test.tsx

@@ -0,0 +1,224 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import { ToolbarButton, ToolbarButtonGroup } from './ToolbarButton'
+
+describe('ToolbarButton', () => {
+  it('renders with label', () => {
+    render(<ToolbarButton label="Settings" />)
+    expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument()
+    expect(screen.getByText('Settings')).toBeInTheDocument()
+  })
+
+  it('renders icon when provided', () => {
+    render(
+      <ToolbarButton
+        label="Settings"
+        icon={<span data-testid="icon">gear</span>}
+      />
+    )
+    expect(screen.getByTestId('icon')).toBeInTheDocument()
+  })
+
+  it('hides label when showLabel is false', () => {
+    render(<ToolbarButton label="Settings" showLabel={false} />)
+    expect(screen.getByRole('button', { name: 'Settings' })).toBeInTheDocument()
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument()
+  })
+
+  describe('press handling', () => {
+    it('calls onPress when clicked', () => {
+      const onPress = vi.fn()
+      render(<ToolbarButton label="Action" onPress={onPress} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'Action' }))
+      expect(onPress).toHaveBeenCalledTimes(1)
+    })
+
+    it('does not call onPress when disabled', () => {
+      const onPress = vi.fn()
+      render(<ToolbarButton label="Disabled" isDisabled onPress={onPress} />)
+
+      fireEvent.click(screen.getByRole('button', { name: 'Disabled' }))
+      expect(onPress).not.toHaveBeenCalled()
+    })
+  })
+
+  describe('active state', () => {
+    it('communicates selected state when isActive is true', () => {
+      render(<ToolbarButton label="Active" isActive />)
+      const button = screen.getByRole('button', { name: 'Active' })
+      expect(button).toBeInTheDocument()
+    })
+
+    it('communicates unselected state when isActive is false', () => {
+      render(<ToolbarButton label="Inactive" isActive={false} />)
+      const button = screen.getByRole('button', { name: 'Inactive' })
+      expect(button).toBeInTheDocument()
+    })
+
+    it('renders without explicit active state', () => {
+      render(<ToolbarButton label="Default" />)
+      expect(screen.getByRole('button', { name: 'Default' })).toBeInTheDocument()
+    })
+  })
+
+  describe('disabled state', () => {
+    it('renders as disabled when isDisabled is true', () => {
+      render(<ToolbarButton label="Disabled" isDisabled />)
+      const button = screen.getByRole('button', { name: 'Disabled' })
+      expect(button).toBeDisabled()
+    })
+
+    it('communicates disabled state to assistive technology', () => {
+      render(<ToolbarButton label="Disabled" isDisabled />)
+      const button = screen.getByRole('button', { name: 'Disabled' })
+      expect(button).toHaveAttribute('aria-disabled', 'true')
+    })
+  })
+
+  describe('sizes', () => {
+    it('renders with sm size', () => {
+      render(<ToolbarButton label="Small" size="sm" />)
+      expect(screen.getByRole('button', { name: 'Small' })).toBeInTheDocument()
+    })
+
+    it('renders with md size (default)', () => {
+      render(<ToolbarButton label="Medium" size="md" />)
+      expect(screen.getByRole('button', { name: 'Medium' })).toBeInTheDocument()
+    })
+
+    it('renders with lg size', () => {
+      render(<ToolbarButton label="Large" size="lg" />)
+      expect(screen.getByRole('button', { name: 'Large' })).toBeInTheDocument()
+    })
+  })
+
+  describe('variants', () => {
+    it('renders with neumorphic variant (default)', () => {
+      render(<ToolbarButton label="Neumorphic" variant="neumorphic" />)
+      expect(screen.getByRole('button', { name: 'Neumorphic' })).toBeInTheDocument()
+    })
+
+    it('renders with default variant', () => {
+      render(<ToolbarButton label="Default" variant="default" />)
+      expect(screen.getByRole('button', { name: 'Default' })).toBeInTheDocument()
+    })
+  })
+
+  describe('menu content', () => {
+    it('shows menu when pressed with menuContent', () => {
+      render(
+        <ToolbarButton
+          label="Options"
+          menuContent={<span>Menu item</span>}
+        />
+      )
+
+      fireEvent.click(screen.getByRole('button', { name: 'Options' }))
+      expect(screen.getByText('Menu item')).toBeInTheDocument()
+    })
+
+    it('hides menu when pressed again', () => {
+      render(
+        <ToolbarButton
+          label="Options"
+          menuContent={<span>Menu item</span>}
+        />
+      )
+
+      const button = screen.getByRole('button', { name: 'Options' })
+      fireEvent.click(button)
+      expect(screen.getByText('Menu item')).toBeInTheDocument()
+
+      fireEvent.click(button)
+      expect(screen.queryByText('Menu item')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(<ToolbarButton label="Accessible Button" />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('has correct accessibility label', () => {
+      render(<ToolbarButton label="Settings" />)
+      expect(screen.getByLabelText('Settings')).toBeInTheDocument()
+    })
+
+    it('applies tooltip as accessibility hint', () => {
+      render(<ToolbarButton label="Help" tooltip="Show help panel" />)
+      const button = screen.getByRole('button', { name: 'Help' })
+      expect(button).toBeInTheDocument()
+    })
+  })
+})
+
+describe('ToolbarButtonGroup', () => {
+  it('renders children', () => {
+    render(
+      <ToolbarButtonGroup>
+        <ToolbarButton label="One" />
+        <ToolbarButton label="Two" />
+      </ToolbarButtonGroup>
+    )
+    expect(screen.getByText('One')).toBeInTheDocument()
+    expect(screen.getByText('Two')).toBeInTheDocument()
+  })
+
+  it('has toolbar accessibility role', () => {
+    render(
+      <ToolbarButtonGroup>
+        <ToolbarButton label="Action" />
+      </ToolbarButtonGroup>
+    )
+    expect(screen.getByRole('toolbar')).toBeInTheDocument()
+  })
+
+  it('renders with different orientations', () => {
+    const { rerender } = render(
+      <ToolbarButtonGroup orientation="horizontal">
+        <ToolbarButton label="H" />
+      </ToolbarButtonGroup>
+    )
+    expect(screen.getByRole('toolbar')).toBeInTheDocument()
+
+    rerender(
+      <ToolbarButtonGroup orientation="vertical">
+        <ToolbarButton label="V" />
+      </ToolbarButtonGroup>
+    )
+    expect(screen.getByRole('toolbar')).toBeInTheDocument()
+  })
+
+  it('renders with different gap sizes', () => {
+    const { rerender } = render(
+      <ToolbarButtonGroup gap="none">
+        <ToolbarButton label="A" />
+      </ToolbarButtonGroup>
+    )
+    expect(screen.getByRole('toolbar')).toBeInTheDocument()
+
+    rerender(
+      <ToolbarButtonGroup gap="md">
+        <ToolbarButton label="A" />
+      </ToolbarButtonGroup>
+    )
+    expect(screen.getByRole('toolbar')).toBeInTheDocument()
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = render(
+        <ToolbarButtonGroup>
+          <ToolbarButton label="Bold" />
+          <ToolbarButton label="Italic" />
+        </ToolbarButtonGroup>
+      )
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+  })
+})