Design System

A modern React component library built with TypeScript, Vite, and Storybook.

Features

• React 18+ - Built with the latest React features
• TypeScript - Full type safety and IntelliSense support
• CSS Modules - Scoped styling with design tokens integration
• Components - Button, IconButton, Typography (Text)
• Storybook 8 - Interactive component documentation with Welcome page
• Design Tokens - Powered by barte-design-tokens
• Icons - Pre-integrated with Phosphor Icons
• Tree-shakeable - Optimized bundle size with ES modules
• Developer Experience - ESLint, Prettier, and TypeScript configured

Installation

npm install barte-design-system

Usage

Importing Components

import { Button, IconButton, Text } from 'barte-design-system';
import { Plus } from '@phosphor-icons/react';
import 'barte-design-system/styles';

function App() {
  return (
    <div style={{ display: 'flex', gap: '1rem', padding: '2rem' }}>
      <Button type="primary">Click me</Button>
      
      <IconButton type="secondary" aria-label="Add item">
        <Plus />
      </IconButton>

      <Text variant="body-base">Hello World</Text>
    </div>
  );
}

CSS/Tokens

The design system uses barte-design-tokens for consistent styling. You must import the styles in your app entry point (e.g., main.tsx or App.tsx):

import 'barte-design-system/styles';

This will import all the necessary CSS including:

• Design tokens (CSS variables)
• Fonts (Inter)
• Component styles

Semantic Tokens

Once the styles are imported, you can use the semantic tokens anywhere in your CSS or inline styles. These tokens ensure consistency across all applications.

Common tokens include:

• Backgrounds: var(--bg-primary), var(--bg-secondary), var(--bg-tertiary)
• Text: var(--text-primary), var(--text-secondary)
• Borders: var(--border-default), var(--border-focus)

Example usage:

.my-card {
  background-color: var(--bg-primary);
  color: var(--text-primary);
  border: 1px solid var(--border-default);
}

Development

Prerequisites

• Node.js 18+
• npm 9+

Setup

# Install dependencies
npm install

# Start Storybook development server
npm run storybook

# Build the library
npm run build

# Run linting
npm run lint

# Format code
npm run format

Scripts

• npm run dev - Start Vite development server
• npm run build - Build library for production
• npm run storybook - Start Storybook on port 6006
• npm run build-storybook - Build static Storybook
• npm run lint - Run ESLint
• npm run lint:fix - Fix ESLint errors
• npm run format - Format code with Prettier
• npm run format:check - Check code formatting
• npm run type-check - Run TypeScript compiler checks

Project Structure

design-system/
├── src/
│   ├── components/        # React components
│   │   ├── Button/
│   │   ├── IconButton/
│   │   └── Typography/
│   ├── styles/
│   │   └── global.css    # Design tokens import
│   ├── types/
│   │   └── css-modules.d.ts  # CSS Modules types
│   ├── Welcome.mdx       # Storybook Welcome Page
│   └── index.ts          # Main export file
├── .storybook/           # Storybook configuration
├── dist/                 # Build output (generated)
├── package.json
├── tsconfig.json
├── vite.config.ts
└── README.md

Component Pattern

When creating components, follow this structure:

src/components/Button/
├── Button.tsx
├── Button.module.css
├── Button.stories.tsx
├── Button.types.ts
└── index.ts

Example component:

// Button.tsx
import styles from './Button.module.css';
import type { ButtonProps } from './Button.types';

export const Button = ({ children, ...props }: ButtonProps) => {
  return (
    <button className={styles.button} {...props}>
      {children}
    </button>
  );
};

// index.ts
export { Button } from './Button';
export type { ButtonProps } from './Button.types';

Build Output

The build generates:

• dist/index.js - ES Module format
• dist/index.cjs - CommonJS format
• dist/index.d.ts - TypeScript definitions
• dist/barte-design-system.css - Bundled styles (includes fonts, tokens, and component styles)
• Source maps for all files

Dependencies

Peer Dependencies

• react ^18.0.0
• react-dom ^18.0.0

External Dependencies

• barte-design-tokens - Design tokens package
• @phosphor-icons/react - Icon library

License

Proprietary - Barte Internal Use Only