Aegis Design System

Installation

npm install aegis-design

Usage

import { Button } from 'aegis-design';
import 'aegis-design/dist/style.css'; // Import CSS

function App() {
  return (
    <Button variant="primary" size="medium">
      Click me
    </Button>
  );
}

Development Workflow

1. Token Updates: Figma tokens are automatically exported to tokens.json
2. Build Tokens: Run npm run build-tokens to generate CSS variables
3. Component Development: Create components using CSS Modules + BEM
4. Storybook: Document components with npm run storybook
5. Testing: Run tests with npm test

Architecture

• Design Tokens: Figma export + additional JSON files → CSS custom properties
• Components: CSS Modules with BEM methodology for styling
• Type Safety: Full TypeScript support with proper prop types
• Documentation: Automatic Storybook documentation
• Testing: Vitest + Testing Library setup

Component creation

• Create a folder with the necessary files: component, stories and css module.
• Index.ts file should export the components as default
• the index.ts in the root of the components/ folder should export all the available components to disponibilize them for external usage.