20.69.0 • Published yesterday

@uniformdev/design-system

Licence

SEE LICENSE IN LICENSE.txt

Version

20.69.0

Deps

Size

2.1 MB

Vulns

Weekly

Summary Dependency Versions

@uniformdev/design-system

A comprehensive React component library and design system for Uniform's platform applications. This package provides a consistent set of UI components, styling utilities, and design tokens to ensure a cohesive user experience across all Uniform products.

Features

Comprehensive Component Library: 50+ reusable React components including buttons, forms, navigation, data display, and layout components
Consistent Theming: CSS custom properties and Emotion-based styling system
Accessibility First: Built with accessibility best practices and ARIA support
TypeScript Support: Full TypeScript definitions for all components and utilities
Modern React: Built for React 18+ with hooks and modern patterns
Storybook Integration: Interactive component documentation and examples

Installation

pnpm add @uniformdev/design-system

Quick Start

1. Set up the Theme Provider

Add the Theme component to your app or _document.tsx file to enable the design system:

import { Theme } from '@uniformdev/design-system';

function App() {
  return (
    <>
      <Theme />
      {/* Your app content */}
    </>
  );
}

Or in Next.js _document.tsx:

import { Theme } from '@uniformdev/design-system';

export default function Document() {
  return (
    <Html>
      <Head />
      <body>
        <Theme />
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

2. Set up Providers (as needed)

Some components rely on React context providers to function correctly. Set them up as needed:

IconsProvider

Required by the Icon component when using string-based icon names (e.g. icon="mail"). Without the provider, you can still pass icon components directly.

import { IconsProvider, Icon } from '@uniformdev/design-system';

function App() {
  return (
    <IconsProvider>
      <Icon icon="mail" />
    </IconsProvider>
  );
}

Direct consumers: Icon Indirect consumers: Any component that renders an Icon internally (e.g. Button, Callout, Details, Menu, and many more)

DrawerProvider

Optional for basic Drawer usage -- Drawer creates its own internal provider and renderer when no external DrawerProvider is present. An explicit DrawerProvider is only needed for shared drawer stacks (e.g. multiple drawers rendering into the same DrawerRenderer).

Required by DrawerRenderer and TakeoverDrawerRenderer, which must be rendered inside a DrawerProvider.

import { DrawerProvider, Drawer, DrawerRenderer } from '@uniformdev/design-system';

function App() {
  return (
    <DrawerProvider>
      <Drawer id="my-drawer" header="Title">Content</Drawer>
      <DrawerRenderer stackId="_default" />
    </DrawerProvider>
  );
}

Required by: DrawerRenderer, TakeoverDrawerRenderer Optional for: Drawer (self-sufficient for simple cases)

ParameterShell

Only required when using *Inner components directly (e.g. ParameterInputInner, ParameterSelectInner). The outer wrapper components (ParameterInput, ParameterSelect, etc.) create a ParameterShell automatically, so no external setup is needed for typical usage.

Required by: ParameterInputInner, ParameterSelectInner, ParameterLinkInner, ParameterSelectSliderInner, ParameterToggleInner, ParameterNumberSliderInner, ParameterMultiSelectInner, ParameterTextareaInner, ParameterImageInner Not required by: ParameterInput, ParameterSelect, ParameterLink, and other outer wrappers (they provide it internally)

3. Use Components

import { Button, Heading, Card, Input } from '@uniformdev/design-system';

function MyComponent() {
  return (
    <Card>
      <Heading level={1}>Welcome to Uniform</Heading>
      <Input placeholder="Enter your name" />
      <Button buttonType="primary">Get Started</Button>
    </Card>
  );
}

Component Categories

Layout & Structure

Layout: Container, Grid, Stack, and spacing utilities
Card: Various card components for content organization
Modal: Dialog and modal components
Drawer: Slide-out navigation and content panels

Button: Primary, secondary, and icon buttons with multiple variants
Menu: Dropdown menus and navigation components
Tabs: Tabbed interface components
Pagination: Data pagination controls

Forms & Inputs

Input: Text inputs, selects, and form controls
ParameterInputs: Specialized inputs for parameter configuration
DateTimePicker: Date and time selection components
Switch: Toggle switches and checkboxes
Slider: Range and value sliders

Data Display

Table: Data tables with sorting and filtering
List: Various list components and layouts
Avatar: User avatars and avatar groups
ProgressBar: Progress indicators and loading states
Counter: Numeric counters and badges

Feedback & Status

Toast: Notification messages
Banner: Alert and status banners
Callout: Highlighted information boxes
LoadingIndicator: Loading spinners and skeletons
Validation: Form validation components

Typography

Heading: Semantic heading components (H1-H6)
Paragraph: Text content components
Link: Styled link components

Utilities

Icons: Comprehensive icon library
Tooltip: Contextual help and information
Popover: Floating content containers
Skeleton: Loading placeholders

Styling System

The design system uses Emotion for styling with a comprehensive set of CSS custom properties:

Color System

Brand Colors: Primary brand colors and variations
Semantic Colors: Success, warning, error, and info colors
Neutral Colors: Grayscale palette for text and backgrounds
Purple Spectrum: Extended purple color range for accents

.my-color-class {
  color: var(--primary-action-default);

  &:hover {
    color: var(--primary-action-hover);
  }
}

Typography

Font Families: System font stack with fallbacks
Font Sizes: Consistent scale from small to large
Line Heights: Optimized for readability
Font Weights: Multiple weight options

.my-font-class {
  color: var(--typography-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  font-family: var(--ff-system);
}

Spacing

Consistent Scale: 8px-based spacing system
Responsive: Mobile-first responsive design
Flexible: CSS custom properties for easy customization

.my-spacing-class {
  padding: var(--spacing-sm) var(--spacing-base);
  margin: var(--spacing-lg) var(--spacing-xl);
}

Utilities

The package includes several utility functions and hooks:

import { 
  useDebouncedCallback, 
  useOutsideClick,
  debounce,
  Breakpoints 
} from '@uniformdev/design-system';

Development

Component Generation

Use the built-in generator to create new components:

pnpm run create:component

This will scaffold a new component with:

TypeScript component file
Styles file with Emotion
Storybook stories
Unit tests
Index file for exports

Testing

# Run tests
pnpm test

# Run tests with coverage
pnpm test:coverage

Building

# Build the package
pnpm build

# Watch mode for development
pnpm dev

Storybook

Interactive component documentation is available through Storybook. Each component includes:

Live examples
Interactive controls
Usage documentation
Accessibility information

Browser Support

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

Contributing

When contributing to the design system:

Follow the existing component patterns
Include comprehensive TypeScript types
Add Storybook stories for new components
Write unit tests for component behavior
Ensure accessibility compliance
Update this README for significant changes

License

SEE LICENSE IN LICENSE.txt

Changelog

See CHANGELOG.md for a detailed list of changes and version history.