CogniSkills Component Library

A modern, accessible React component library with a comprehensive design system, built with TypeScript and Storybook.

✨ Features

• 🎨 Complete Design System - Semantic color tokens, spacing, and typography
• ♿ Accessibility First - WCAG AA compliant components
• 🌙 Theme Support - Light/dark mode with auto-detection
• 📱 Responsive - Mobile-first design approach
• 🔧 TypeScript - Full type safety and IntelliSense
• 📖 Documented - Comprehensive Storybook documentation

📦 Installation

npm install cogniskills-component-lib

🚀 Quick Start

import { Button, ThemeProvider } from 'cogniskills-component-lib';

function App() {
  return (
    <ThemeProvider>
      <Button variant="primary" size="large">
        Get Started
      </Button>
    </ThemeProvider>
  );
}

🎨 Available Components

Core Components

• Button - Primary actions with multiple variants (primary, secondary, ghost, white)
• LinkButton - Navigation and link actions
• TextField - Text input with validation states
• RadioButton - Single selection from options

Design System

• ThemeProvider - Theme context and automatic dark/light mode
• Color Tokens - Semantic color system with CSS variables
• Spacing & Typography - Consistent design tokens

� Development

Prerequisites

• Node.js 18+
• npm 7+

Setup

git clone <repository-url>
cd component-lib
npm install

Development Commands

# Start development server
npm run dev

# Build the library
npm run build

# Run Storybook
npm run storybook

# Run tests
npm run test

# Run tests with coverage
npm run test:coverage

# Lint and format
npm run lint
npm run format

📚 Documentation

View components and design system documentation in Storybook:

npm run storybook

Visit http://localhost:6006 to browse:

• Component library and API docs
• Design system (colors, spacing, typography)
• Interactive examples and playground
• Theme switching (light/dark mode)

🏗️ Build Output

The library is built with Rollup for optimal tree-shaking:

• ESM: dist/index.esm.js
• CommonJS: dist/index.cjs.js
• TypeScript: dist/index.d.ts

🎨 Design System Usage

Using Color Tokens

/* CSS Variables */
.my-component {
  color: var(--cs-text-primary);
  background: var(--cs-surface-primary);
}

// React Hooks
import { useColor } from 'cogniskills-component-lib';

function MyComponent() {
  const colors = useColor();
  return <div style={{ color: colors.text.primary }}>Hello</div>;
}

Theme Provider

import { ThemeProvider } from 'cogniskills-component-lib';

// Auto-detect system preference
<ThemeProvider defaultTheme="auto">
  <App />
</ThemeProvider>

// Force light or dark theme
<ThemeProvider defaultTheme="dark">
  <App />
</ThemeProvider>

📝 Contributing

1. Create components in src/components/ComponentName/
2. Export from src/index.ts
3. Add Storybook stories in src/stories/
4. Write tests with Vitest + React Testing Library
5. Follow the design system tokens and accessibility guidelines

📄 License

MIT License - see LICENSE for details.