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

$3

bash

npm install worklist-yh-design-system





$3



You MUST wrap your app with

ThemeProvider for colors to work properly!

tsx

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



function App() {

  return (

    

      

    

  );

}





🎨 Built-in Color System



$3

- Primary:

#00aae7

 (Blue)

- Secondary:

#0081af

 (Dark Blue)

- Background:

#1e2530

 (Dark)

- Text:

#d0d0d0

 (Light Gray)

- Border:

#3f4859

 (Medium Gray)



$3

- Blue (default):

#00aae7



- Green:

#10b981



- Purple:

#8b5cf6



- Orange:

#f59e0b

$3

tsx

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



function App() {

  return (

    

       {/ Toggle between dark/light mode /}

      

    

  );

}





🧩 Components



$3

tsx

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



// Variants













// Sizes













// States

$3

tsx

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



// Basic usage





// Sizes









// States

$3

tsx

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







// With states

$3

tsx

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



// Variants

Default Card

Elevated Card

Outlined Card

Filled Card



// Sizes

Small Card

Medium Card

Large Card



// Interactive

Hoverable Card

Selectable Card

 console.log('clicked')}>Clickable Card

$3

tsx

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



function MyModal() {

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



  return (

    <>

      

      

              isOpen={isOpen}

        onClose={() => setIsOpen(false)}

        title="Modal Title"

        size="md"

        closable={true}

      >

        Modal content goes here

      

    

  );

}



// With footer

  isOpen={isOpen}

  onClose={() => setIsOpen(false)}

  title="Modal with Footer"

  footer={

          onCancel={() => setIsOpen(false)}

      onConfirm={() => console.log('confirmed')}

      cancelText="Cancel"

      confirmText="Save"

      confirmVariant="primary"

    />

  }

>

  Modal with action buttons





// Sizes

Small Modal

Medium Modal

Large Modal

Extra Large Modal

Full Screen Modal

$3

tsx

import { 

  Table, 

  TableHeader, 

  TableBody, 

  TableRow, 

  TableHeaderCell, 

  TableCell,

  TablePaginationContainer 

} from 'worklist-yh-design-system';



function DataTable() {

  const data = [

    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },

    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },

  ];



  return (

    


        

          ID

          Name

          Email

          Status

        

      


        {data.map((item) => (

           console.log('Row clicked')}>

            {item.id}

            {item.name}

            {item.email}

            {item.status}

          

        ))}

      

      
      
    

  );

}



// Advanced Table with Expandable Rows

function AdvancedTable() {

  const [expandedRows, setExpandedRows] = useState([]);

  

  const toggleRow = (id: number) => {

    setExpandedRows(prev => 

      prev.includes(id) 

        ? prev.filter(rowId => rowId !== id)

        : [...prev, id]

    );

  };



  return (

    

      


          

            #

            Name

            Email

            Status

            Actions

          

        


          {data.map((item) => (

            

                              onClick={() => toggleRow(item.id)}

                isExpanded={expandedRows.includes(item.id)}

              >

                {item.id}

                {item.name}

                {item.email}

                {item.status}

                

                  

                

              

              {expandedRows.includes(item.id) && (

                

                  

                    

                      Additional details for {item.name}

                      Email: {item.email}

                    

                  

                

              )}

            

          ))}

        

        
        
      

      

        

        Page 1 of 10

        

      

    

  );

}

$3

tsx

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



// Available icons















// Traced versions





🎨 Theme System



$3

tsx

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



function App() {

  return (

    

      

    

  );

}

$3

tsx

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



function Header() {

  return (

    

      

    

  );

}

$3

tsx

// Mode options

{ mode: 'dark' | 'light' }



// Color options

{ color: 'blue' | 'green' | 'purple' | 'orange' }



// Examples





🎨 Design Tokens



$3

All design tokens are automatically available as CSS variables:

css

: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;

}

$3

tsx

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



$3

All components and tokens include TypeScript type definitions.



$3

Design tokens are automatically injected as CSS variables when using

ThemeProvider`.

$3

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

📄 License

MIT License

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

$3

bash

npm install worklist-yh-design-system





$3



You MUST wrap your app with

ThemeProvider for colors to work properly!

tsx

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



function App() {

  return (

    

      

    

  );

}





🎨 Built-in Color System



$3

- Primary:

#00aae7

 (Blue)

- Secondary:

#0081af

 (Dark Blue)

- Background:

#1e2530

 (Dark)

- Text:

#d0d0d0

 (Light Gray)

- Border:

#3f4859

 (Medium Gray)



$3

- Blue (default):

#00aae7



- Green:

#10b981



- Purple:

#8b5cf6



- Orange:

#f59e0b

$3

tsx

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



function App() {

  return (

    

       {/ Toggle between dark/light mode /}

      

    

  );

}





🧩 Components



$3

tsx

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



// Variants













// Sizes













// States

$3

tsx

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



// Basic usage





// Sizes









// States

$3

tsx

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







// With states

$3

tsx

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



// Variants

Default Card

Elevated Card

Outlined Card

Filled Card



// Sizes

Small Card

Medium Card

Large Card



// Interactive

Hoverable Card

Selectable Card

 console.log('clicked')}>Clickable Card

$3

tsx

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



function MyModal() {

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



  return (

    <>

      

      

              isOpen={isOpen}

        onClose={() => setIsOpen(false)}

        title="Modal Title"

        size="md"

        closable={true}

      >

        Modal content goes here

      

    

  );

}



// With footer

  isOpen={isOpen}

  onClose={() => setIsOpen(false)}

  title="Modal with Footer"

  footer={

          onCancel={() => setIsOpen(false)}

      onConfirm={() => console.log('confirmed')}

      cancelText="Cancel"

      confirmText="Save"

      confirmVariant="primary"

    />

  }

>

  Modal with action buttons





// Sizes

Small Modal

Medium Modal

Large Modal

Extra Large Modal

Full Screen Modal

$3

tsx

import { 

  Table, 

  TableHeader, 

  TableBody, 

  TableRow, 

  TableHeaderCell, 

  TableCell,

  TablePaginationContainer 

} from 'worklist-yh-design-system';



function DataTable() {

  const data = [

    { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },

    { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' },

  ];



  return (

    


        

          ID

          Name

          Email

          Status

        

      


        {data.map((item) => (

           console.log('Row clicked')}>

            {item.id}

            {item.name}

            {item.email}

            {item.status}

          

        ))}

      

      
      
    

  );

}



// Advanced Table with Expandable Rows

function AdvancedTable() {

  const [expandedRows, setExpandedRows] = useState([]);

  

  const toggleRow = (id: number) => {

    setExpandedRows(prev => 

      prev.includes(id) 

        ? prev.filter(rowId => rowId !== id)

        : [...prev, id]

    );

  };



  return (

    

      


          

            #

            Name

            Email

            Status

            Actions

          

        


          {data.map((item) => (

            

                              onClick={() => toggleRow(item.id)}

                isExpanded={expandedRows.includes(item.id)}

              >

                {item.id}

                {item.name}

                {item.email}

                {item.status}

                

                  

                

              

              {expandedRows.includes(item.id) && (

                

                  

                    

                      Additional details for {item.name}

                      Email: {item.email}

                    

                  

                

              )}

            

          ))}

        

        
        
      

      

        

        Page 1 of 10

        

      

    

  );

}

$3

tsx

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



// Available icons















// Traced versions





🎨 Theme System



$3

tsx

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



function App() {

  return (

    

      

    

  );

}

$3

tsx

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



function Header() {

  return (

    

      

    

  );

}

$3

tsx

// Mode options

{ mode: 'dark' | 'light' }



// Color options

{ color: 'blue' | 'green' | 'purple' | 'orange' }



// Examples





🎨 Design Tokens



$3

All design tokens are automatically available as CSS variables:

css

: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;

}

$3

tsx

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



$3

All components and tokens include TypeScript type definitions.



$3

Design tokens are automatically injected as CSS variables when using

ThemeProvider`.

$3

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

📄 License

MIT License