Ignite Design System

A comprehensive Design System built with modern technologies during the Rocketseat Ignite program. Features accessible components, design tokens, and extensive documentation.

Components • Installation • Documentation • Development

🎨 Components

Our React package (@rafaumeu-ignite-ui/react) includes the following components:

• Layout
  • Box (supports polymorphic as prop)
  • Text (with size variants)
  • Heading (with size variants)
• Form
  • Button (with variants and sizes)
  • TextInput (with prefix support)
  • TextArea
  • Checkbox (with Radix UI integration)
  • MultiStep
• Data Display
  • Avatar (with fallback)

All components are built with accessibility in mind and follow modern React best practices.

🚀 Installation

# Install the design system
npm install @rafaumeu-ignite-ui/react @rafaumeu-ignite-ui/tokens

# or using yarn
yarn add @rafaumeu-ignite-ui/react @rafaumeu-ignite-ui/tokens

📚 Documentation

Visit our Storybook documentation to explore:

• Component examples and usage
• Design tokens documentation
  • Colors
  • Typography (font families, sizes, weights)
  • Spacing scale
  • Border radius (radii)
• Accessibility guidelines
• Interactive component playground

🎯 Features

• Design Tokens: Comprehensive set of design tokens for colors, typography, spacing, and more
• Accessibility: All components follow WCAG guidelines and include proper ARIA attributes
• TypeScript: Full TypeScript support with detailed type definitions
• Modern Stack: Built with React, Stitches, Radix UI, and other modern tools
• Documentation: Extensive documentation with Storybook
• Monorepo Structure: Organized with Turborepo for optimal development experience

📦 Packages

The project consists of four main packages:

@rafaumeu-ignite-ui/tokens (v2.1.0)

• Design tokens and theme constants
• Color system
• Typography scale
• Spacing system
• Border radius tokens

@rafaumeu-ignite-ui/react (v2.0.1)

• Core React components
• Built with Stitches
• Radix UI integration
• Fully typed components

@rafaumeu-ignite-ui/eslint-config

• Shared ESLint configurations
• Code style rules
• Best practices enforcement

@rafaumeu-ignite-ui/ts-config

• Shared TypeScript configurations
• Base configuration for all packages
• React-specific configuration

🔧 Development

Prerequisites

• Node.js >= 16
• Yarn >= 1.22

Setup

# Clone the repository
git clone https://github.com/rafaumeu/ignite-call.git

# Install dependencies
yarn install

# Build all packages
yarn build

# Start Storybook
yarn dev

Working with Packages

# Build a specific package
yarn workspace @rafaumeu-ignite-ui/tokens build

# Run Storybook documentation locally
yarn workspace @rafaumeu-ignite-ui/docs dev

# Run linting
yarn lint

# Publish packages
yarn release

🤝 Contributing

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes following our commit convention
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Commit Convention

We follow Conventional Commits:

• feat: New features
• fix: Bug fixes
• docs: Documentation changes
• style: Code style changes
• refactor: Code refactors
• test: Test updates
• chore: Build process or auxiliary tool changes

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

Built with 💜 by Rafael Zendron