Worklist YH Design System

A comprehensive React design system with built-in theming, components, and design tokens for building consistent and accessible user interfaces.

🚀 Quick Start

Installation

npm install worklist-yh-design-system

⚠️ IMPORTANT: Setup Required for Colors to Work!

You MUST wrap your app with ThemeProvider for colors to work properly!

import { ThemeProvider } from 'worklist-yh-design-system';

function App() {
  return (
    <ThemeProvider defaultTheme={{ mode: 'dark', color: 'blue' }}>
      <YourApp />
    </ThemeProvider>
  );
}

🎨 Built-in Color System

Default Colors (Dark Theme)

• Primary: #00aae7 (Blue)
• Secondary: #0081af (Dark Blue)
• Background: #1e2530 (Dark)
• Text: #d0d0d0 (Light Gray)
• Border: #3f4859 (Medium Gray)

4 Color Themes

• Blue (default): #00aae7
• Green: #10b981
• Purple: #8b5cf6
• Orange: #f59e0b

Theme Switching

import { ThemeProvider, ThemeToggle } from 'worklist-yh-design-system';

function App() {
  return (
    <ThemeProvider defaultTheme={{ mode: 'dark', color: 'blue' }}>
      <ThemeToggle /> {/* Toggle between dark/light mode */}
      <YourApp />
    </ThemeProvider>
  );
}

🧩 Components

Button

import { Button } from 'worklist-yh-design-system';

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button variant="danger">Danger</Button>

// Sizes
<Button size="xs">Extra Small</Button>
<Button size="sm">Small</Button>
<Button size="md">Medium</Button>
<Button size="lg">Large</Button>
<Button size="xl">Extra Large</Button>

// States
<Button loading>Loading...</Button>
<Button disabled>Disabled</Button>
<Button fullWidth>Full Width</Button>

Input

import { Input } from 'worklist-yh-design-system';

// Basic usage
<Input placeholder="Enter text..." />

// Sizes
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

// States
<Input state="error" placeholder="Error state" />
<Input state="success" placeholder="Success state" />
<Input state="warning" placeholder="Warning state" />
<Input readOnly placeholder="Read only" />

Select

import { Select } from 'worklist-yh-design-system';

<Select>
  <option value="">Choose an option</option>
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
</Select>

// With states
<Select state="error">
  <option value="">Error state</option>
</Select>

Card

import { Card } from 'worklist-yh-design-system';

// Variants
<Card variant="default">Default Card</Card>
<Card variant="elevated">Elevated Card</Card>
<Card variant="outlined">Outlined Card</Card>
<Card variant="filled">Filled Card</Card>

// Sizes
<Card size="sm">Small Card</Card>
<Card size="md">Medium Card</Card>
<Card size="lg">Large Card</Card>

// Interactive
<Card hoverable>Hoverable Card</Card>
<Card selectable selected>Selectable Card</Card>
<Card onClick={() => console.log('clicked')}>Clickable Card</Card>

Modal

import { Modal, ModalFooterDefault } from 'worklist-yh-design-system';

function MyModal() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      
      <Modal
        isOpen={isOpen}
        onClose={() => setIsOpen(false)}
        title="Modal Title"
        size="md"
        closable={true}
      >
        <p>Modal content goes here</p>
      </Modal>
    </>
  );
}

// With footer
<Modal
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
  title="Modal with Footer"
  footer={
    <ModalFooterDefault
      onCancel={() => setIsOpen(false)}
      onConfirm={() => console.log('confirmed')}
      cancelText="Cancel"
      confirmText="Save"
      confirmVariant="primary"
    />
  }
>
  <p>Modal with action buttons</p>
</Modal>

// Sizes
<Modal size="sm">Small Modal</Modal>
<Modal size="md">Medium Modal</Modal>
<Modal size="lg">Large Modal</Modal>
<Modal size="xl">Extra Large Modal</Modal>
<Modal size="full">Full Screen Modal</Modal>

Table

import { 
  Table, 
  TableHeader, 
  TableBody, 
  TableRow, 
  TableHeaderCell, 
  TableCell,
  TablePaginationContainer 
} from 'worklist-yh-design-system';

function DataTable() {
  const data = [
    { id: 1, name: 'John Doe', email: '[email protected]', status: 'Active' },
    { id: 2, name: 'Jane Smith', email: '[email protected]', status: 'Inactive' },
  ];

  return (
    <Table>
      <TableHeader>
        <TableRow>
          <TableHeaderCell width="50px">ID</TableHeaderCell>
          <TableHeaderCell width="200px">Name</TableHeaderCell>
          <TableHeaderCell width="300px">Email</TableHeaderCell>
          <TableHeaderCell width="100px" align="center">Status</TableHeaderCell>
        </TableRow>
      </TableHeader>
      <TableBody>
        {data.map((item) => (
          <TableRow key={item.id} onClick={() => console.log('Row clicked')}>
            <TableCell>{item.id}</TableCell>
            <TableCell>{item.name}</TableCell>
            <TableCell>{item.email}</TableCell>
            <TableCell align="center">{item.status}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  );
}

// Advanced Table with Expandable Rows
function AdvancedTable() {
  const [expandedRows, setExpandedRows] = useState<number[]>([]);
  
  const toggleRow = (id: number) => {
    setExpandedRows(prev => 
      prev.includes(id) 
        ? prev.filter(rowId => rowId !== id)
        : [...prev, id]
    );
  };

  return (
    <div style={{ height: '600px' }}>
      <Table>
        <TableHeader>
          <TableRow>
            <TableHeaderCell width="50px">#</TableHeaderCell>
            <TableHeaderCell width="200px">Name</TableHeaderCell>
            <TableHeaderCell width="300px">Email</TableHeaderCell>
            <TableHeaderCell width="100px" align="center">Status</TableHeaderCell>
            <TableHeaderCell width="100px" align="center">Actions</TableHeaderCell>
          </TableRow>
        </TableHeader>
        <TableBody>
          {data.map((item) => (
            <React.Fragment key={item.id}>
              <TableRow 
                onClick={() => toggleRow(item.id)}
                isExpanded={expandedRows.includes(item.id)}
              >
                <TableCell>{item.id}</TableCell>
                <TableCell>{item.name}</TableCell>
                <TableCell>{item.email}</TableCell>
                <TableCell align="center">{item.status}</TableCell>
                <TableCell align="center">
                  <Button size="sm" variant="outline">Edit</Button>
                </TableCell>
              </TableRow>
              {expandedRows.includes(item.id) && (
                <TableRow>
                  <TableCell colSpan={5}>
                    <Card variant="filled" size="sm">
                      <p>Additional details for {item.name}</p>
                      <p>Email: {item.email}</p>
                    </Card>
                  </TableCell>
                </TableRow>
              )}
            </React.Fragment>
          ))}
        </TableBody>
      </Table>
      <TablePaginationContainer>
        <Button variant="outline" size="sm">Previous</Button>
        <span style={{ margin: '0 16px' }}>Page 1 of 10</span>
        <Button variant="outline" size="sm">Next</Button>
      </TablePaginationContainer>
    </div>
  );
}

Icons

import { Icon } from 'worklist-yh-design-system';

// Available icons
<Icon name="settings" size="sm" />
<Icon name="chevron-down" size="md" />
<Icon name="check-complete" size="lg" />
<Icon name="check-error" size="sm" />
<Icon name="processing" size="md" />
<Icon name="wait" size="lg" />

// Traced versions
<Icon name="check-complete-traced" size="sm" />
<Icon name="check-error-traced" size="md" />
<Icon name="processing-traced" size="lg" />
<Icon name="wait-traced" size="sm" />

🎨 Theme System

Theme Provider

import { ThemeProvider } from 'worklist-yh-design-system';

function App() {
  return (
    <ThemeProvider defaultTheme={{ mode: 'dark', color: 'blue' }}>
      <YourApp />
    </ThemeProvider>
  );
}

Theme Toggle

import { ThemeToggle } from 'worklist-yh-design-system';

function Header() {
  return (
    <header>
      <ThemeToggle />
    </header>
  );
}

Available Themes

// Mode options
{ mode: 'dark' | 'light' }

// Color options
{ color: 'blue' | 'green' | 'purple' | 'orange' }

// Examples
<ThemeProvider defaultTheme={{ mode: 'dark', color: 'blue' }}>
<ThemeProvider defaultTheme={{ mode: 'light', color: 'green' }}>
<ThemeProvider defaultTheme={{ mode: 'dark', color: 'purple' }}>
<ThemeProvider defaultTheme={{ mode: 'light', color: 'orange' }}>

🎨 Design Tokens

CSS Variables

All design tokens are automatically available as CSS variables:

:root {
  /* Brand Colors */
  --color-brand-primary: #00aae7;
  --color-brand-secondary: #0081af;
  --color-brand-accent: #4b94fa;
  
  /* Background Colors */
  --color-brand-background-primary: #1e2530;
  --color-brand-background-secondary: #2c3340;
  --color-brand-background-tertiary: #3f4859;
  
  /* Text Colors */
  --color-brand-text-primary: #d0d0d0;
  --color-brand-text-secondary: #acafb8;
  --color-brand-text-inverse: #ffffff;
  
  /* Border Colors */
  --color-brand-border-primary: #3f4859;
  --color-brand-border-secondary: #444;
  
  /* Semantic Colors */
  --color-brand-semantic-success-500: #10b981;
  --color-brand-semantic-warning-500: #f59e0b;
  --color-brand-semantic-error-500: #ef4444;
  --color-brand-semantic-info-500: #3b82f6;
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  
  /* Typography */
  --typography-fontSize-xs: 0.75rem;
  --typography-fontSize-sm: 0.875rem;
  --typography-fontSize-base: 1rem;
  --typography-fontSize-lg: 1.125rem;
  --typography-fontSize-xl: 1.25rem;
}

Using CSS Variables in Custom Components

const CustomComponent = styled.div`
  background-color: var(--color-brand-background-primary);
  color: var(--color-brand-text-primary);
  padding: var(--spacing-md);
  border: 1px solid var(--color-brand-border-primary);
  border-radius: 8px;
`;

📖 Documentation

All components are fully documented with examples in this README. Each component section includes:

• Complete usage examples with all variants and props
• Interactive code samples you can copy and use
• TypeScript type definitions for full IDE support
• CSS variable references for custom styling

🔧 Configuration

TypeScript Support

All components and tokens include TypeScript type definitions.

CSS Variables Auto-injection

Design tokens are automatically injected as CSS variables when using ThemeProvider.

Peer Dependencies

• React >= 16.8.0
• React DOM >= 16.8.0
• Styled Components (automatically included)

📄 License

MIT License