UnisysUI Component Library

A comprehensive React UI component library that replicates the UnisysUI design system with exact specifications, built with TypeScript and styled-components.

Installation

npm install unisysuicomponent

Peer Dependencies

Make sure you have the following installed in your project:

npm install react react-dom styled-components

Quick Start

import React from 'react';
import { Button, Input, Checkbox, ToggleSwitch, theme } from 'unisysuicomponent';
import { ThemeProvider } from 'styled-components';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button variant="primary" size="md">
          Primary Button
        </Button>
        
        <Input
          label="Email"
          placeholder="Enter your email"
          type="email"
        />
        
        <Checkbox label="I agree to the terms" />
        
        <ToggleSwitch label="Enable notifications" />
      </div>
    </ThemeProvider>
  );
}

export default App;

Components

Button

A versatile button component with multiple variants and sizes.

import { Button } from 'unisysuicomponent';

// Basic usage
<Button>Click me</Button>

// With variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>

// With 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>

// With loading state
<Button loading>Loading...</Button>

// With icons
<Button leftIcon={<Icon />}>With Left Icon</Button>
<Button rightIcon={<Icon />}>With Right Icon</Button>

// Full width
<Button fullWidth>Full Width Button</Button>

Button Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | 'primary' \| 'secondary' \| 'tertiary' | 'primary' | Button style variant | | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' | 'md' | Button size | | loading | boolean | false | Shows loading spinner | | fullWidth | boolean | false | Makes button full width | | leftIcon | ReactNode | - | Icon on the left side | | rightIcon | ReactNode | - | Icon on the right side | | disabled | boolean | false | Disables the button |

Input

A flexible input component with labels, icons, and validation states.

import { Input } from 'unisysuicomponent';

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

// With label
<Input label="Username" placeholder="Enter username" />

// With helper text
<Input 
  label="Password"
  type="password"
  helperText="Must be at least 8 characters"
/>

// With error state
<Input 
  label="Email"
  errorText="Please enter a valid email"
  state="error"
/>

// With icons
<Input 
  leftIcon={<SearchIcon />}
  placeholder="Search..."
/>

// Clearable input
<Input 
  label="Search"
  clearable
  placeholder="Type to search..."
/>

// Different sizes
<Input size="sm" placeholder="Small input" />
<Input size="md" placeholder="Medium input" />
<Input size="lg" placeholder="Large input" />

Input Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Input label | | helperText | string | - | Helper text below input | | errorText | string | - | Error message | | leftIcon | ReactNode | - | Icon on the left | | rightIcon | ReactNode | - | Icon on the right | | size | 'sm' \| 'md' \| 'lg' | 'md' | Input size | | state | 'default' \| 'hover' \| 'focused' \| 'error' \| 'disabled' | 'default' | Input state | | clearable | boolean | false | Shows clear button |

Checkbox

A checkbox component with support for indeterminate state and error states.

import { Checkbox } from 'unisysuicomponent';

// Basic usage
<Checkbox label="I agree" />

// Controlled
<Checkbox 
  checked={isChecked}
  onChange={(e) => setIsChecked(e.target.checked)}
  label="Subscribe to newsletter"
/>

// Indeterminate state
<Checkbox 
  indeterminate={true}
  label="Select all"
/>

// Error state
<Checkbox 
  error={true}
  label="Required field"
/>

// Disabled
<Checkbox 
  disabled={true}
  label="Disabled option"
/>

Checkbox Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Checkbox label | | indeterminate | boolean | false | Indeterminate state | | error | boolean | false | Error state | | disabled | boolean | false | Disabled state |

ToggleSwitch

A toggle switch component for binary choices.

import { ToggleSwitch } from 'unisysuicomponent';

// Basic usage
<ToggleSwitch label="Enable notifications" />

// Controlled
<ToggleSwitch 
  checked={isEnabled}
  onChange={(e) => setIsEnabled(e.target.checked)}
  label="Dark mode"
/>

// Different sizes
<ToggleSwitch size="sm" label="Small toggle" />
<ToggleSwitch size="md" label="Medium toggle" />
<ToggleSwitch size="lg" label="Large toggle" />

// Label positioning
<ToggleSwitch 
  labelPosition="left"
  label="Toggle with left label"
/>

// Disabled
<ToggleSwitch 
  disabled={true}
  label="Disabled toggle"
/>

ToggleSwitch Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | Toggle label | | labelPosition | 'left' \| 'right' | 'right' | Label position | | size | 'sm' \| 'md' \| 'lg' | 'md' | Toggle size | | disabled | boolean | false | Disabled state |

Dropdown

A customizable dropdown select component that supports various states:

• Enabled
• Hovered (using #00E28B color)
• Focused
• Error
• Disabled

Usage

import { Dropdown } from 'unisysuicomponent';

const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 'option3', label: 'Option 3' },
  { value: 'option4', label: 'Option 4' },
];

function MyComponent() {
  const handleChange = (value) => {
    console.log('Selected value:', value);
  };

  return (
    <Dropdown
      label="Label Name"
      placeholder="Placeholder"
      options={options}
      onChange={handleChange}
      required
    />
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | label | string | - | The label displayed above the dropdown | | placeholder | string | 'Placeholder' | Text displayed when no option is selected | | options | DropdownOption[] | [] | Array of options to display in the dropdown | | value | string | string[] | - | The selected value(s) (controlled) | | defaultValue | string | string[] | - | The default selected value(s) (uncontrolled) | | onChange | (value: string | string[]) => void | - | Callback fired when selection changes | | disabled | boolean | false | Whether the dropdown is disabled | | error | boolean | false | Whether to show error styling | | helperText | string | - | Helper text displayed below the dropdown | | errorText | string | - | Error text displayed when error is true | | required | boolean | false | Whether the field is required |

Slider

A customizable slider component that supports:

• Single value selection
• Range selection
• Disabled state
• Custom min/max values
• Step increments
• Marks/labels
• Ripple effect when the thumb is pressed

Usage

import { Slider } from 'unisysuicomponent';

function MyComponent() {
  const [value, setValue] = useState(50);
  const [rangeValue, setRangeValue] = useState([20, 80]);

  return (
    <>
      {/* Basic slider */}
      <Slider 
        value={value}
        onChange={(newValue) => setValue(newValue)}
      />

      {/* Range slider */}
      <Slider 
        range
        value={rangeValue}
        onChange={(newValue) => setRangeValue(newValue)}
      />

      {/* With marks */}
      <Slider 
        value={value}
        onChange={(newValue) => setValue(newValue)}
        marks={[
          { value: 0, label: '0°C' },
          { value: 25, label: '25°C' },
          { value: 50, label: '50°C' },
          { value: 75, label: '75°C' },
          { value: 100, label: '100°C' }
        ]}
      />
    </>
  );
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | min | number | 0 | Minimum value of the slider | | max | number | 100 | Maximum value of the slider | | step | number | 1 | Step size between values | | value | number | number[] | - | Current value(s) (controlled) | | defaultValue | number | number[] | - | Default value(s) (uncontrolled) | | onChange | (value: number | number[]) => void | - | Callback when the value changes | | onChangeEnd | (value: number | number[]) => void | - | Callback when the user stops dragging | | disabled | boolean | false | Whether the slider is disabled | | marks | SliderMark[] | [] | Array of marks to display on the slider | | range | boolean | false | Whether to use range selection mode | | vertical | boolean | false | Whether to display the slider vertically |

Design System

Colors

The component library includes a comprehensive color system:

import { theme } from 'unisysuicomponent';

// Access colors
theme.colors.primary          // #007173
theme.colors.primaryHover     // #003134
theme.colors.success          // #72EFBF
theme.colors.error            // #FC1B73
theme.colors.warning          // #FFE085
theme.colors.info             // #B2FFFF

Typography

// Font family
theme.typography.fontFamily   // "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif

// Font sizes
theme.typography.fontSize.xs  // 10px
theme.typography.fontSize.sm  // 12px
theme.typography.fontSize.md  // 14px
theme.typography.fontSize.lg  // 16px
theme.typography.fontSize.xl  // 18px
theme.typography.fontSize.xxl // 20px

// Font weights
theme.typography.fontWeight.regular // 400
theme.typography.fontWeight.medium  // 500
theme.typography.fontWeight.bold    // 700

Spacing

theme.spacing.xs    // 4px
theme.spacing.sm    // 8px
theme.spacing.md    // 12px
theme.spacing.lg    // 16px
theme.spacing.xl    // 24px
theme.spacing.xxl   // 32px
theme.spacing.xxxl  // 48px

Border Radius

theme.borderRadius.xs    // 2px
theme.borderRadius.sm    // 4px
theme.borderRadius.md    // 6px
theme.borderRadius.lg    // 8px
theme.borderRadius.xl    // 12px
theme.borderRadius.xxl   // 16px
theme.borderRadius.round // 50%
theme.borderRadius.pill  // 9999px

Accessibility

All components are built with accessibility in mind:

• Keyboard Navigation: All interactive elements support keyboard navigation
• ARIA Labels: Proper ARIA labels and descriptions
• Focus Management: Clear focus indicators and logical tab order
• Screen Reader Support: Compatible with screen readers
• Color Contrast: Meets WCAG 2.1 AA standards

TypeScript Support

The library is fully typed with TypeScript. All component props, theme values, and utility functions have comprehensive type definitions.

import { ButtonProps, InputProps, Theme } from 'unisysuicomponent';

// Use types in your components
interface MyComponentProps {
  buttonVariant: ButtonProps['variant'];
  inputSize: InputProps['size'];
}

Customization

Using with Styled Components Theme

import { ThemeProvider } from 'styled-components';
import { theme } from 'unisysuicomponent';

// Extend the theme
const customTheme = {
  ...theme,
  colors: {
    ...theme.colors,
    primary: '#custom-color',
  },
};

function App() {
  return (
    <ThemeProvider theme={customTheme}>
      {/* Your app */}
    </ThemeProvider>
  );
}

CSS Custom Properties

:root {
  --unisys-primary: #007173;
  --unisys-primary-hover: #003134;
  --unisys-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

Development

Building the Library

npm run build

Running Tests

npm test

Linting

npm run lint

Storybook

npm run storybook

Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests
5. Submit a pull request

License

MIT License - see LICENSE file for details.

Changelog

v1.0.0

• Initial release
• Button component with all variants and sizes
• Input component with icons and validation
• Checkbox component with indeterminate state
• ToggleSwitch component with size variants
• Complete design system with colors, typography, and spacing
• TypeScript support
• Accessibility features
• Comprehensive documentation