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

1npm install unisysuicomponent

Peer Dependencies

Make sure you have the following installed in your project:

1npm install react react-dom styled-components

Quick Start

1import React from 'react';
2import { Button, Input, Checkbox, ToggleSwitch, theme } from 'unisysuicomponent';
3import { ThemeProvider } from 'styled-components';
4
5function App() {
6  return (
7    <ThemeProvider theme={theme}>
8      <div>
9        <Button variant="primary" size="md">
10          Primary Button
11        </Button>
12        
13        <Input
14          label="Email"
15          placeholder="Enter your email"
16          type="email"
17        />
18        
19        <Checkbox label="I agree to the terms" />
20        
21        <ToggleSwitch label="Enable notifications" />
22      </div>
23    </ThemeProvider>
24  );
25}
26
27export default App;

Components

Button

A versatile button component with multiple variants and sizes.

1import { Button } from 'unisysuicomponent';
2
3// Basic usage
4<Button>Click me</Button>
5
6// With variants
7<Button variant="primary">Primary</Button>
8<Button variant="secondary">Secondary</Button>
9<Button variant="tertiary">Tertiary</Button>
10
11// With sizes
12<Button size="xs">Extra Small</Button>
13<Button size="sm">Small</Button>
14<Button size="md">Medium</Button>
15<Button size="lg">Large</Button>
16<Button size="xl">Extra Large</Button>
17
18// With loading state
19<Button loading>Loading...</Button>
20
21// With icons
22<Button leftIcon={<Icon />}>With Left Icon</Button>
23<Button rightIcon={<Icon />}>With Right Icon</Button>
24
25// Full width
26<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.

1import { Input } from 'unisysuicomponent';
2
3// Basic usage
4<Input placeholder="Enter text" />
5
6// With label
7<Input label="Username" placeholder="Enter username" />
8
9// With helper text
10<Input 
11  label="Password"
12  type="password"
13  helperText="Must be at least 8 characters"
14/>
15
16// With error state
17<Input 
18  label="Email"
19  errorText="Please enter a valid email"
20  state="error"
21/>
22
23// With icons
24<Input 
25  leftIcon={<SearchIcon />}
26  placeholder="Search..."
27/>
28
29// Clearable input
30<Input 
31  label="Search"
32  clearable
33  placeholder="Type to search..."
34/>
35
36// Different sizes
37<Input size="sm" placeholder="Small input" />
38<Input size="md" placeholder="Medium input" />
39<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.

1import { Checkbox } from 'unisysuicomponent';
2
3// Basic usage
4<Checkbox label="I agree" />
5
6// Controlled
7<Checkbox 
8  checked={isChecked}
9  onChange={(e) => setIsChecked(e.target.checked)}
10  label="Subscribe to newsletter"
11/>
12
13// Indeterminate state
14<Checkbox 
15  indeterminate={true}
16  label="Select all"
17/>
18
19// Error state
20<Checkbox 
21  error={true}
22  label="Required field"
23/>
24
25// Disabled
26<Checkbox 
27  disabled={true}
28  label="Disabled option"
29/>

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.

1import { ToggleSwitch } from 'unisysuicomponent';
2
3// Basic usage
4<ToggleSwitch label="Enable notifications" />
5
6// Controlled
7<ToggleSwitch 
8  checked={isEnabled}
9  onChange={(e) => setIsEnabled(e.target.checked)}
10  label="Dark mode"
11/>
12
13// Different sizes
14<ToggleSwitch size="sm" label="Small toggle" />
15<ToggleSwitch size="md" label="Medium toggle" />
16<ToggleSwitch size="lg" label="Large toggle" />
17
18// Label positioning
19<ToggleSwitch 
20  labelPosition="left"
21  label="Toggle with left label"
22/>
23
24// Disabled
25<ToggleSwitch 
26  disabled={true}
27  label="Disabled toggle"
28/>

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

1import { Dropdown } from 'unisysuicomponent';
2
3const options = [
4  { value: 'option1', label: 'Option 1' },
5  { value: 'option2', label: 'Option 2' },
6  { value: 'option3', label: 'Option 3' },
7  { value: 'option4', label: 'Option 4' },
8];
9
10function MyComponent() {
11  const handleChange = (value) => {
12    console.log('Selected value:', value);
13  };
14
15  return (
16    <Dropdown
17      label="Label Name"
18      placeholder="Placeholder"
19      options={options}
20      onChange={handleChange}
21      required
22    />
23  );
24}

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

1import { Slider } from 'unisysuicomponent';
2
3function MyComponent() {
4  const [value, setValue] = useState(50);
5  const [rangeValue, setRangeValue] = useState([20, 80]);
6
7  return (
8    <>
9      {/* Basic slider */}
10      <Slider 
11        value={value}
12        onChange={(newValue) => setValue(newValue)}
13      />
14
15      {/* Range slider */}
16      <Slider 
17        range
18        value={rangeValue}
19        onChange={(newValue) => setRangeValue(newValue)}
20      />
21
22      {/* With marks */}
23      <Slider 
24        value={value}
25        onChange={(newValue) => setValue(newValue)}
26        marks={[
27          { value: 0, label: '0°C' },
28          { value: 25, label: '25°C' },
29          { value: 50, label: '50°C' },
30          { value: 75, label: '75°C' },
31          { value: 100, label: '100°C' }
32        ]}
33      />
34    </>
35  );
36}

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:

1import { theme } from 'unisysuicomponent';
2
3// Access colors
4theme.colors.primary          // #007173
5theme.colors.primaryHover     // #003134
6theme.colors.success          // #72EFBF
7theme.colors.error            // #FC1B73
8theme.colors.warning          // #FFE085
9theme.colors.info             // #B2FFFF

Typography

1// Font family
2theme.typography.fontFamily   // "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif
3
4// Font sizes
5theme.typography.fontSize.xs  // 10px
6theme.typography.fontSize.sm  // 12px
7theme.typography.fontSize.md  // 14px
8theme.typography.fontSize.lg  // 16px
9theme.typography.fontSize.xl  // 18px
10theme.typography.fontSize.xxl // 20px
11
12// Font weights
13theme.typography.fontWeight.regular // 400
14theme.typography.fontWeight.medium  // 500
15theme.typography.fontWeight.bold    // 700

Spacing

1theme.spacing.xs    // 4px
2theme.spacing.sm    // 8px
3theme.spacing.md    // 12px
4theme.spacing.lg    // 16px
5theme.spacing.xl    // 24px
6theme.spacing.xxl   // 32px
7theme.spacing.xxxl  // 48px

Border Radius

1theme.borderRadius.xs    // 2px
2theme.borderRadius.sm    // 4px
3theme.borderRadius.md    // 6px
4theme.borderRadius.lg    // 8px
5theme.borderRadius.xl    // 12px
6theme.borderRadius.xxl   // 16px
7theme.borderRadius.round // 50%
8theme.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.

1import { ButtonProps, InputProps, Theme } from 'unisysuicomponent';
2
3// Use types in your components
4interface MyComponentProps {

5  buttonVariant: ButtonProps['variant'];

6  inputSize: InputProps['size'];
7}

Customization

Using with Styled Components Theme

1import { ThemeProvider } from 'styled-components';
2import { theme } from 'unisysuicomponent';
3
4// Extend the theme
5const customTheme = {
6  ...theme,
7  colors: {
8    ...theme.colors,
9    primary: '#custom-color',
10  },
11};
12
13function App() {
14  return (
15    <ThemeProvider theme={customTheme}>
16      {/* Your app */}
17    </ThemeProvider>
18  );
19}

CSS Custom Properties

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

Development

Building the Library

1npm run build

Running Tests

1npm test

Linting

1npm run lint

Storybook

1npm 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