risk-ds Shield Design System

A modern, production-ready React component library built with TypeScript, Tailwind CSS, and featuring beautiful glassmorphism designs inspired by financial dashboards.

✨ Features

• 🎨 Glassmorphism Design - Modern, translucent UI components with backdrop blur effects
• 🚀 React 18 + TypeScript - Full type safety and modern React features
• 🎭 Tailwind CSS - Utility-first styling with custom design tokens
• 📚 Storybook - Interactive component documentation and testing
• 🧪 Playwright Testing - Comprehensive E2E testing for all components
• 🔄 Dynamic Loading - Lazy loading support for optimal performance
• 📱 Responsive - Mobile-first design approach
• ♿ Accessible - ARIA compliant components
• 🎬 Animations - Smooth animations with Framer Motion

🚀 Quick Start

Installation

# Install via npm
npm install @risk-ds/design-system

# Install via yarn
yarn add @risk-ds/design-system

# Install peer dependencies (if not already installed)
npm install react react-dom

Start Storybook for development

npm run storybook

Basic Usage

import { ProgressRing, MetricCard, StatCard } from '@risk-ds/design-system';
import '@risk-ds/design-system/styles';

function App() {
  return (
    <div>
      <ProgressRing 
        value={75} 
        size="lg" 
        variant="primary" 
        label="Progress"
      />
      
      <MetricCard
        title="Revenue"
        value="$142.5K"
        change="+12.5%"
        changeType="positive"
        variant="success"
      />
    </div>
  );
}

With Tailwind CSS

If you're using Tailwind CSS in your project, you can import the raw components:

import { ProgressRing } from '@risk-ds/design-system';
// No need to import styles separately - they're included in your Tailwind build

📦 Components

ProgressRing

A circular progress indicator with customizable styling and animations.

Props:

• value (number): Progress value from 0 to 100
• size ('sm' | 'md' | 'lg' | 'xl'): Size of the ring
• variant ('primary' | 'secondary' | 'success' | 'warning'): Color variant
• strokeWidth (number): Thickness of the ring
• showPercentage (boolean): Show percentage in center
• label (string): Optional label text
• animationDuration (number): Animation duration in seconds

Example:

<ProgressRing
  value={45}
  size="lg"
  variant="primary"
  showPercentage={true}
  label="Completion"
  strokeWidth={12}
/>

🎨 Design Tokens

The design system includes comprehensive design tokens for:

• Colors: Primary, secondary, success, warning, and neutral palettes
• Typography: Inter font family with responsive sizing
• Spacing: Consistent spacing scale
• Shadows: Glassmorphism-specific shadow effects
• Animations: Smooth transitions and keyframes

🧪 Testing

Storybook Stories

Each component includes comprehensive Storybook stories covering:

• Default usage
• All variants and sizes
• Interactive playground
• Edge cases

Playwright Tests

Automated tests verify:

• Component rendering
• Props functionality
• Visual regression
• Responsive behavior
• Accessibility compliance

# Run all tests
npm run test

# Run tests with UI
npm run test:ui

# Run tests in headed mode
npm run test:headed

🛠 Development

Project Structure

src/
├── components/
│   └── charts/
│       └── ProgressRing/
│           ├── ProgressRing.tsx
│           └── ProgressRing.stories.tsx
├── index.ts
└── index.css

tests/
└── components/
    └── ProgressRing.spec.ts

.storybook/
├── main.ts
└── preview.ts

Scripts

# Development
npm run dev          # Start Vite dev server
npm run storybook    # Start Storybook

# Building
npm run build        # Build the library
npm run build-lib    # Build for distribution

# Testing
npm run test         # Run Playwright tests
npm run lint         # Run ESLint
npm run type-check   # Run TypeScript checks

🎯 Roadmap

Phase 1 (Current)

• [x] ProgressRing component
• [x] Storybook setup
• [x] Playwright testing
• [x] TypeScript configuration

Phase 2 (Next)

• [ ] StatCard component
• [ ] MetricCard component
• [ ] BarChart component
• [ ] BaseCard component

Phase 3 (Future)

• [ ] Layout components (Sidebar, Header)
• [ ] Form components (SearchInput, Button)
• [ ] Data display components
• [ ] Complete dashboard template

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Add your component with stories and tests
4. Run tests and ensure they pass
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

Built with ❤️ for modern web applications