@titan-design/react-ui 0.1.0 → 0.2.5

package/src/components/custom/Sidebar/Sidebar.stories.tsx

@@ -0,0 +1,227 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { View, Text } from 'react-native'
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarSection,
+  SidebarItem,
+  SidebarDivider,
+} from './Sidebar'
+
+const meta: Meta<typeof Sidebar> = {
+  title: 'Custom/Sidebar',
+  component: Sidebar,
+  tags: ['autodocs'],
+  argTypes: {
+    isCollapsed: {
+      control: 'boolean',
+      description: 'Whether sidebar is collapsed (icon-only mode)',
+    },
+    activeItem: {
+      control: 'text',
+      description: 'ID of the currently active item',
+    },
+    width: {
+      control: 'number',
+      description: 'Width when expanded',
+    },
+    collapsedWidth: {
+      control: 'number',
+      description: 'Width when collapsed',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <View style={{ height: 500 }}>
+        <Story />
+      </View>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof Sidebar>
+
+// Simple icon components for demos
+function HomeIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return <Text style={{ fontSize: size }} className={className}>&#8962;</Text>
+}
+
+function ChartIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return <Text style={{ fontSize: size }} className={className}>&#9632;</Text>
+}
+
+function UserIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return <Text style={{ fontSize: size }} className={className}>&#9786;</Text>
+}
+
+function GearIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return <Text style={{ fontSize: size }} className={className}>&#9881;</Text>
+}
+
+function MailIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return <Text style={{ fontSize: size }} className={className}>&#9993;</Text>
+}
+
+function FileIcon({ size = 20, className }: { size?: number; className?: string }) {
+  return <Text style={{ fontSize: size }} className={className}>&#128196;</Text>
+}
+
+export const Default: Story = {
+  args: {
+    activeItem: 'home',
+  },
+  render: (args) => (
+    <Sidebar {...args}>
+      <SidebarHeader>
+        <Text className="text-text-primary text-lg font-bold">Titan</Text>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSection>
+          <SidebarItem id="home" label="Home" />
+          <SidebarItem id="dashboard" label="Dashboard" />
+          <SidebarItem id="projects" label="Projects" />
+          <SidebarItem id="settings" label="Settings" />
+        </SidebarSection>
+      </SidebarContent>
+    </Sidebar>
+  ),
+}
+
+export const WithIcons: Story = {
+  args: {
+    activeItem: 'dashboard',
+  },
+  render: (args) => (
+    <Sidebar {...args}>
+      <SidebarHeader>
+        <Text className="text-text-primary text-lg font-bold">Titan</Text>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSection>
+          <SidebarItem id="home" icon={HomeIcon} label="Home" />
+          <SidebarItem id="dashboard" icon={ChartIcon} label="Dashboard" />
+          <SidebarItem id="users" icon={UserIcon} label="Users" />
+          <SidebarItem id="messages" icon={MailIcon} label="Messages" />
+        </SidebarSection>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarItem id="settings" icon={GearIcon} label="Settings" />
+      </SidebarFooter>
+    </Sidebar>
+  ),
+}
+
+export const Collapsed: Story = {
+  args: {
+    isCollapsed: true,
+    activeItem: 'home',
+  },
+  render: (args) => (
+    <Sidebar {...args}>
+      <SidebarHeader>
+        <Text className="text-text-primary text-lg font-bold text-center">T</Text>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSection>
+          <SidebarItem id="home" icon={HomeIcon} label="Home" />
+          <SidebarItem id="dashboard" icon={ChartIcon} label="Dashboard" />
+          <SidebarItem id="users" icon={UserIcon} label="Users" />
+          <SidebarItem id="messages" icon={MailIcon} label="Messages" />
+        </SidebarSection>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarItem id="settings" icon={GearIcon} label="Settings" />
+      </SidebarFooter>
+    </Sidebar>
+  ),
+}
+
+export const WithSections: Story = {
+  args: {
+    activeItem: 'dashboard',
+  },
+  render: (args) => (
+    <Sidebar {...args}>
+      <SidebarHeader>
+        <Text className="text-text-primary text-lg font-bold">Titan</Text>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSection title="Main">
+          <SidebarItem id="home" icon={HomeIcon} label="Home" />
+          <SidebarItem id="dashboard" icon={ChartIcon} label="Dashboard" />
+        </SidebarSection>
+        <SidebarDivider />
+        <SidebarSection title="Content">
+          <SidebarItem id="files" icon={FileIcon} label="Files" />
+          <SidebarItem id="messages" icon={MailIcon} label="Messages" />
+        </SidebarSection>
+        <SidebarDivider />
+        <SidebarSection title="Account">
+          <SidebarItem id="profile" icon={UserIcon} label="Profile" />
+          <SidebarItem id="settings" icon={GearIcon} label="Settings" />
+        </SidebarSection>
+      </SidebarContent>
+    </Sidebar>
+  ),
+}
+
+export const WithBadge: Story = {
+  args: {
+    activeItem: 'home',
+  },
+  render: (args) => (
+    <Sidebar {...args}>
+      <SidebarHeader>
+        <Text className="text-text-primary text-lg font-bold">Titan</Text>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSection>
+          <SidebarItem id="home" icon={HomeIcon} label="Home" />
+          <SidebarItem id="dashboard" icon={ChartIcon} label="Dashboard" />
+          <SidebarItem
+            id="messages"
+            icon={MailIcon}
+            label="Messages"
+            badge={
+              <View className="bg-status-error rounded-full px-1.5 py-0.5">
+                <Text className="text-white text-xs font-bold">5</Text>
+              </View>
+            }
+          />
+          <SidebarItem id="users" icon={UserIcon} label="Users" />
+        </SidebarSection>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarItem id="settings" icon={GearIcon} label="Settings" />
+      </SidebarFooter>
+    </Sidebar>
+  ),
+}
+
+export const WithActiveItem: Story = {
+  render: () => (
+    <View style={{ flexDirection: 'row', gap: 16, height: 400 }}>
+      <Sidebar activeItem="home" width={200}>
+        <SidebarContent>
+          <SidebarSection>
+            <SidebarItem id="home" icon={HomeIcon} label="Home" />
+            <SidebarItem id="dashboard" icon={ChartIcon} label="Dashboard" />
+            <SidebarItem id="settings" icon={GearIcon} label="Settings" />
+          </SidebarSection>
+        </SidebarContent>
+      </Sidebar>
+      <Sidebar activeItem="dashboard" width={200}>
+        <SidebarContent>
+          <SidebarSection>
+            <SidebarItem id="home" icon={HomeIcon} label="Home" />
+            <SidebarItem id="dashboard" icon={ChartIcon} label="Dashboard" />
+            <SidebarItem id="settings" icon={GearIcon} label="Settings" />
+          </SidebarSection>
+        </SidebarContent>
+      </Sidebar>
+    </View>
+  ),
+}

package/src/components/custom/Sidebar/Sidebar.test.tsx

@@ -0,0 +1,185 @@
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import { axe } from 'jest-axe'
+import {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarSection,
+  SidebarItem,
+  SidebarDivider,
+} from './Sidebar'
+
+function MockIcon({ size, className }: { size?: number; className?: string }) {
+  return <span data-testid="mock-icon" data-size={size} className={className}>I</span>
+}
+
+function renderSidebar(props: Partial<React.ComponentProps<typeof Sidebar>> = {}) {
+  return render(
+    <Sidebar activeItem="home" onItemSelect={vi.fn()} {...props}>
+      <SidebarHeader>
+        <span>Logo</span>
+      </SidebarHeader>
+      <SidebarContent>
+        <SidebarSection title="Main">
+          <SidebarItem id="home" icon={MockIcon} label="Home" />
+          <SidebarItem id="dashboard" icon={MockIcon} label="Dashboard" />
+        </SidebarSection>
+        <SidebarDivider />
+        <SidebarSection title="Settings">
+          <SidebarItem id="settings" icon={MockIcon} label="Settings" />
+        </SidebarSection>
+      </SidebarContent>
+      <SidebarFooter>
+        <SidebarItem id="logout" label="Logout" />
+      </SidebarFooter>
+    </Sidebar>
+  )
+}
+
+describe('Sidebar', () => {
+  it('renders with all sections', () => {
+    renderSidebar()
+    expect(screen.getByText('Logo')).toBeInTheDocument()
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+    expect(screen.getAllByText('Settings').length).toBeGreaterThanOrEqual(1)
+    expect(screen.getByText('Logout')).toBeInTheDocument()
+  })
+
+  it('renders section titles', () => {
+    renderSidebar()
+    expect(screen.getByText('Main')).toBeInTheDocument()
+  })
+
+  it('hides section titles when collapsed', () => {
+    renderSidebar({ isCollapsed: true })
+    expect(screen.queryByText('Main')).not.toBeInTheDocument()
+    expect(screen.queryByText('Settings')).not.toBeInTheDocument()
+  })
+
+  it('hides item labels when collapsed', () => {
+    renderSidebar({ isCollapsed: true })
+    expect(screen.queryByText('Home')).not.toBeInTheDocument()
+    expect(screen.queryByText('Dashboard')).not.toBeInTheDocument()
+  })
+
+  it('shows item labels when expanded', () => {
+    renderSidebar({ isCollapsed: false })
+    expect(screen.getByText('Home')).toBeInTheDocument()
+    expect(screen.getByText('Dashboard')).toBeInTheDocument()
+  })
+
+  describe('SidebarItem', () => {
+    it('calls onItemSelect when item is pressed', () => {
+      const onItemSelect = vi.fn()
+      renderSidebar({ onItemSelect })
+
+      fireEvent.click(screen.getByLabelText('Dashboard'))
+      expect(onItemSelect).toHaveBeenCalledWith('dashboard')
+    })
+
+    it('highlights active item', () => {
+      renderSidebar({ activeItem: 'home' })
+      const homeItem = screen.getByLabelText('Home')
+      expect(homeItem).toBeInTheDocument()
+    })
+
+    it('renders icon', () => {
+      renderSidebar()
+      const icons = screen.getAllByTestId('mock-icon')
+      expect(icons.length).toBeGreaterThan(0)
+    })
+
+    it('renders badge content', () => {
+      render(
+        <Sidebar>
+          <SidebarContent>
+            <SidebarItem id="inbox" label="Inbox" badge={<span>5</span>} />
+          </SidebarContent>
+        </Sidebar>
+      )
+      expect(screen.getByText('5')).toBeInTheDocument()
+    })
+
+    it('renders expand indicator for items with children', () => {
+      render(
+        <Sidebar>
+          <SidebarContent>
+            <SidebarItem id="nav" label="Navigation" hasChildren isExpanded={false} />
+          </SidebarContent>
+        </Sidebar>
+      )
+      expect(screen.getByLabelText('Navigation')).toBeInTheDocument()
+    })
+
+    it('calls custom onPress handler alongside onItemSelect', () => {
+      const onItemSelect = vi.fn()
+      const onPress = vi.fn()
+      render(
+        <Sidebar onItemSelect={onItemSelect}>
+          <SidebarContent>
+            <SidebarItem id="custom" label="Custom" onPress={onPress} />
+          </SidebarContent>
+        </Sidebar>
+      )
+
+      fireEvent.click(screen.getByLabelText('Custom'))
+      expect(onItemSelect).toHaveBeenCalledWith('custom')
+      expect(onPress).toHaveBeenCalled()
+    })
+  })
+
+  describe('SidebarDivider', () => {
+    it('renders divider', () => {
+      renderSidebar()
+      // The divider renders as a View with a separator style, just verify the sidebar renders completely
+      expect(screen.getByText('Logout')).toBeInTheDocument()
+    })
+  })
+
+  describe('width props', () => {
+    it('uses default width', () => {
+      renderSidebar()
+      expect(screen.getByText('Logo')).toBeInTheDocument()
+    })
+
+    it('uses custom width', () => {
+      renderSidebar({ width: 300 })
+      expect(screen.getByText('Logo')).toBeInTheDocument()
+    })
+
+    it('uses collapsed width when collapsed', () => {
+      renderSidebar({ isCollapsed: true, collapsedWidth: 80 })
+      // Items still render but labels are hidden
+      expect(screen.queryByText('Home')).not.toBeInTheDocument()
+    })
+  })
+
+  describe('accessibility', () => {
+    it('has no accessibility violations', async () => {
+      const { container } = renderSidebar()
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+    })
+
+    it('items have button role', () => {
+      renderSidebar()
+      const buttons = screen.getAllByRole('button')
+      expect(buttons.length).toBeGreaterThan(0)
+    })
+
+    it('items have accessible labels', () => {
+      renderSidebar()
+      expect(screen.getByLabelText('Home')).toBeInTheDocument()
+      expect(screen.getByLabelText('Dashboard')).toBeInTheDocument()
+    })
+
+    it('communicates selected state', () => {
+      renderSidebar({ activeItem: 'home' })
+      const homeButton = screen.getByLabelText('Home')
+      expect(homeButton).toBeInTheDocument()
+    })
+  })
+})

package/src/components/custom/Sidebar/Sidebar.tsx

@@ -0,0 +1,257 @@
+import React, { createContext, useContext } from 'react'
+import { View, Text, Pressable, ScrollView, type ViewProps, type PressableProps } from 'react-native'
+import { cn } from '../../../utils/cn'
+
+interface SidebarContextType {
+  isCollapsed: boolean
+  activeItem?: string
+  onItemSelect?: (id: string) => void
+}
+
+const SidebarContext = createContext<SidebarContextType>({
+  isCollapsed: false,
+})
+
+export interface SidebarProps extends ViewProps {
+  /** Whether sidebar is collapsed (icon-only mode) */
+  isCollapsed?: boolean
+  /** Currently active item ID */
+  activeItem?: string
+  /** Callback when an item is selected */
+  onItemSelect?: (id: string) => void
+  /** Width when expanded */
+  width?: number
+  /** Width when collapsed */
+  collapsedWidth?: number
+  /** Additional className */
+  className?: string
+  children?: React.ReactNode
+}
+
+/**
+ * Sidebar navigation component.
+ *
+ * @example
+ * <Sidebar activeItem={activeNav} onItemSelect={setActiveNav}>
+ *   <SidebarHeader>
+ *     <Logo />
+ *   </SidebarHeader>
+ *   <SidebarContent>
+ *     <SidebarSection title="Main">
+ *       <SidebarItem id="home" icon={HomeIcon} label="Home" />
+ *       <SidebarItem id="dashboard" icon={DashboardIcon} label="Dashboard" />
+ *     </SidebarSection>
+ *   </SidebarContent>
+ *   <SidebarFooter>
+ *     <SidebarItem id="settings" icon={SettingsIcon} label="Settings" />
+ *   </SidebarFooter>
+ * </Sidebar>
+ */
+export function Sidebar({
+  isCollapsed = false,
+  activeItem,
+  onItemSelect,
+  width = 256,
+  collapsedWidth = 64,
+  className,
+  children,
+  ...props
+}: SidebarProps) {
+  const currentWidth = isCollapsed ? collapsedWidth : width
+
+  return (
+    <SidebarContext.Provider value={{ isCollapsed, activeItem, onItemSelect }}>
+      <View
+        style={{ width: currentWidth }}
+        className={cn(
+          'h-full flex-col bg-surface-base border-r border-border-default transition-all duration-200',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </View>
+    </SidebarContext.Provider>
+  )
+}
+
+export interface SidebarHeaderProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Header section of sidebar (typically contains logo).
+ */
+export function SidebarHeader({ children, className }: SidebarHeaderProps) {
+  return (
+    <View className={cn('px-4 py-4 border-b border-border-subtle', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface SidebarContentProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Scrollable content area of sidebar.
+ */
+export function SidebarContent({ children, className }: SidebarContentProps) {
+  return (
+    <ScrollView
+      className={cn('flex-1', className)}
+      showsVerticalScrollIndicator={false}
+    >
+      {children}
+    </ScrollView>
+  )
+}
+
+export interface SidebarFooterProps {
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Footer section of sidebar.
+ */
+export function SidebarFooter({ children, className }: SidebarFooterProps) {
+  return (
+    <View className={cn('px-2 py-4 border-t border-border-subtle', className)}>
+      {children}
+    </View>
+  )
+}
+
+export interface SidebarSectionProps {
+  /** Section title */
+  title?: string
+  children?: React.ReactNode
+  className?: string
+}
+
+/**
+ * Section grouping for sidebar items.
+ */
+export function SidebarSection({ title, children, className }: SidebarSectionProps) {
+  const { isCollapsed } = useContext(SidebarContext)
+
+  return (
+    <View className={cn('px-2 py-2', className)}>
+      {title && !isCollapsed && (
+        <Text className="px-3 py-2 text-xs font-semibold uppercase tracking-wider text-text-tertiary">
+          {title}
+        </Text>
+      )}
+      <View className="gap-0.5">
+        {children}
+      </View>
+    </View>
+  )
+}
+
+export interface SidebarItemProps extends Omit<PressableProps, 'children'> {
+  /** Unique identifier for the item */
+  id: string
+  /** Icon component */
+  icon?: React.ComponentType<{ size?: number; className?: string }>
+  /** Label text */
+  label: string
+  /** Badge content (e.g., notification count) */
+  badge?: React.ReactNode
+  /** Whether this item has nested items */
+  hasChildren?: boolean
+  /** Whether nested items are expanded */
+  isExpanded?: boolean
+  /** Additional className */
+  className?: string
+}
+
+/**
+ * Individual navigation item in sidebar.
+ */
+export function SidebarItem({
+  id,
+  icon: Icon,
+  label,
+  badge,
+  hasChildren,
+  isExpanded,
+  className,
+  onPress,
+  ...props
+}: SidebarItemProps) {
+  const { isCollapsed, activeItem, onItemSelect } = useContext(SidebarContext)
+  const isActive = activeItem === id
+
+  const handlePress = (e: any) => {
+    onItemSelect?.(id)
+    onPress?.(e)
+  }
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityState={{ selected: isActive }}
+      accessibilityLabel={label}
+      onPress={handlePress}
+      className={cn(
+        'flex-row items-center gap-3 px-3 py-2.5 rounded-md transition-colors',
+        isActive
+          ? 'bg-brand-primary-subtle text-brand-primary'
+          : 'text-text-secondary web:hover:bg-interactive-hover active:bg-interactive-active',
+        isCollapsed && 'justify-center px-2',
+        className
+      )}
+      {...props}
+    >
+      {Icon && (
+        <Icon
+          size={20}
+          className={cn(
+            isActive ? 'text-brand-primary' : 'text-text-secondary'
+          )}
+        />
+      )}
+      {!isCollapsed && (
+        <>
+          <Text
+            numberOfLines={1}
+            className={cn(
+              'flex-1 text-sm font-medium',
+              isActive ? 'text-brand-primary' : 'text-text-primary'
+            )}
+          >
+            {label}
+          </Text>
+          {badge && (
+            <View className="ml-auto">
+              {badge}
+            </View>
+          )}
+          {hasChildren && (
+            <Text className="text-text-tertiary ml-1">
+              {isExpanded ? '▼' : '▶'}
+            </Text>
+          )}
+        </>
+      )}
+    </Pressable>
+  )
+}
+
+export interface SidebarDividerProps {
+  className?: string
+}
+
+/**
+ * Divider between sidebar sections.
+ */
+export function SidebarDivider({ className }: SidebarDividerProps) {
+  return (
+    <View className={cn('h-px mx-4 my-2 bg-border-subtle', className)} />
+  )
+}

package/src/components/custom/Sidebar/index.ts

@@ -0,0 +1,18 @@
+export {
+  Sidebar,
+  SidebarHeader,
+  SidebarContent,
+  SidebarFooter,
+  SidebarSection,
+  SidebarItem,
+  SidebarDivider,
+} from './Sidebar'
+export type {
+  SidebarProps,
+  SidebarHeaderProps,
+  SidebarContentProps,
+  SidebarFooterProps,
+  SidebarSectionProps,
+  SidebarItemProps,
+  SidebarDividerProps,
+} from './Sidebar'