npm package: @sistla234/sample-design-system
Description: A comprehensive React design system with components, design tokens, layouts, and CLI tool for rapid project setup
Author: Krishna Sistla
Latest version: 1.0.1

# UiPath Design System

A comprehensive React design system featuring dark-themed UI components, layout templates, design tokens, and utilities for building UiPath-style applications.

## Features

- 🎨 **Design Tokens** - Consistent colors, typography, and spacing
- 🧩 **Components** - Pre-built, accessible React components
- 📐 **Layout Templates** - Ready-to-use layout patterns
- 🎯 **Utilities** - Helper functions and theme management
- 📱 **Responsive** - Mobile-first design approach
- 🌙 **Dark Theme** - Modern dark UI with UiPath branding
- ♿ **Accessible** - WCAG 2.1 compliant components

## Installation

```bash
npm install @uipath/design-system
```

## Quick Start

### Using Layout Templates

```jsx
import { DashboardLayout, ThemeProvider } from '@uipath/design-system';

function App() {
  return (
    <ThemeProvider>
      <DashboardLayout headerTitle="My App">
        <div>Your content here</div>
      </DashboardLayout>
    </ThemeProvider>
  );
}
```

### Using Individual Components

```jsx
import { 
  GlobalHeader, 
  NavigationPanel, 
  Toolbar 
} from '@uipath/design-system';

function MyComponent() {
  return (
    <div>
      <GlobalHeader title="My App" />
      <NavigationPanel />
      <Toolbar />
    </div>
  );
}
```

### Using Design Tokens

```jsx
import { colors, typography, spacing } from '@uipath/design-system';

// In JavaScript
const buttonStyle = {
  backgroundColor: colors.primary.main,
  color: colors.text.primary,
  fontFamily: typography.fontFamily.primary,
  padding: spacing.componentSpacing.buttonPadding,
  borderRadius: spacing.borderRadius.base
};
```

Or use CSS custom properties:

```css
.my-component {
  background-color: var(--color-primary);
  color: var(--color-text-primary);
  font-family: var(--font-family-primary);
  padding: var(--space-4);
  border-radius: var(--radius-base);
}
```

## Components

### Layout Components

- **DashboardLayout** - Full dashboard with header and navigation
- **CanvasLayout** - Infinite canvas layout with autopilot
- **FormLayout** - Centered form layout
- **ListLayout** - List/table-focused layout

### UI Components

- **GlobalHeader** - Application header with branding
- **NavigationPanel** - Collapsible navigation sidebar
- **Toolbar** - Floating toolbar with tools
- **AutopilotPanel** - AI assistant sidebar
- **BreadcrumbNavigation** - Hierarchical navigation
- **Modal** - Full-screen modal dialogs
- **InfiniteCanvasLayout** - Specialized canvas layout

## Design Tokens

### Colors

```jsx
import { colors } from '@uipath/design-system';

colors.primary.main        // #FF724C
colors.accent.cyan         // #85E9FF
colors.neutral.gray900     // #222222
colors.text.primary        // #F8F9FA
colors.background.card     // rgba(255, 255, 255, 0.05)
```

### Typography

```jsx
import { typography } from '@uipath/design-system';

typography.fontFamily.primary    // 'Noto Sans', sans-serif
typography.fontFamily.heading    // 'Poppins', sans-serif
typography.fontSize.base         // 14px
typography.textStyles.h1         // Complete heading style object
```

### Spacing

```jsx
import { spacing } from '@uipath/design-system';

spacing.spacing[4]                    // 16px
spacing.componentSpacing.cardPadding  // 24px
spacing.borderRadius.base             // 8px
spacing.shadows.card                  // Component shadow
```

## Creating New Projects

Use the CLI tool to quickly scaffold new projects:

```bash
npx create-uipath-app my-new-app

# Or specify a template
npx create-uipath-app my-dashboard --template dashboard
```

Available templates:
- `dashboard` - Full dashboard application
- `canvas` - Infinite canvas application  
- `form` - Form-focused application
- `list` - List/table application
- `basic` - Minimal setup

## Customization

### Custom Theme

```jsx
import { ThemeProvider } from '@uipath/design-system';

const customTheme = {
  colors: {
    primary: {
      main: '#FF6B35' // Custom primary color
    }
  }
};

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

### CSS Custom Properties

The design system automatically injects CSS custom properties. You can override them:

```css
:root {
  --color-primary: #your-color;
  --font-family-primary: 'Your Font', sans-serif;
}
```

## Responsive Design

All components and layouts are mobile-first and responsive:

```css
/* Breakpoints */
@media (max-width: 480px)  { /* Mobile */ }
@media (max-width: 768px)  { /* Tablet */ }
@media (max-width: 1200px) { /* Desktop */ }
```

## Development

### Building the Package

```bash
npm run build
```

### Storybook Development

```bash
npm run storybook
```

### Watch Mode

```bash
npm run dev
```

## API Reference

### Layout Templates

#### DashboardLayout

```jsx
<DashboardLayout
  showNavigation={true}
  navigationWidth="258px"
  headerTitle="UiPath Studio"
  className=""
>
  {children}
</DashboardLayout>
```

#### CanvasLayout

```jsx
<CanvasLayout
  showAutopilot={true}
  breadcrumbItems={[]}
  headerTitle="UiPath Studio"
  className=""
>
  {children}
</CanvasLayout>
```

#### FormLayout

```jsx
<FormLayout
  title="Form Title"
  description="Form description"
  headerTitle="UiPath Studio"
  maxWidth="800px"
  className=""
>
  {children}
</FormLayout>
```

#### ListLayout

```jsx
<ListLayout
  title="List Title"
  description="List description"
  actions={<>Action buttons</>}
  showSearch={true}
  headerTitle="UiPath Studio"
  className=""
>
  {children}
</ListLayout>
```

### Utilities

#### classNames (cn)

```jsx
import { cn } from '@uipath/design-system';

const className = cn(
  'base-class',
  {
    'conditional-class': condition,
    'another-class': anotherCondition
  },
  'always-applied'
);
```

#### useTheme

```jsx
import { useTheme } from '@uipath/design-system';

function MyComponent() {
  const theme = useTheme();
  
  return (
    <div style={{ color: theme.colors.primary.main }}>
      Themed content
    </div>
  );
}
```

## Contributing

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

## License

MIT License - see LICENSE file for details.

## Support

- [Documentation](#)
- [GitHub Issues](https://github.com/uipath/design-system/issues)
- [Design System Guidelines](#)