https://github.com/rafaumeu/ignite-call-design-system
modular Design System 🚀 built with TypeScript and React ⚛️. Features customizable components 🛠️, design tokens 🎨, and comprehensive style guides 📚. Includes shared configs for TypeScript and ESLint 📝. Perfect for crafting consistent, scalable UIs across applications 🌐.
https://github.com/rafaumeu/ignite-call-design-system
component-library design-system design-tokens eslint-config monorepo react react-components style-guide theming typescript typescript-config ui-components ui-library yarn-workspaces
Last synced: 3 months ago
JSON representation
modular Design System 🚀 built with TypeScript and React ⚛️. Features customizable components 🛠️, design tokens 🎨, and comprehensive style guides 📚. Includes shared configs for TypeScript and ESLint 📝. Perfect for crafting consistent, scalable UIs across applications 🌐.
- Host: GitHub
- URL: https://github.com/rafaumeu/ignite-call-design-system
- Owner: rafaumeu
- License: mit
- Created: 2025-01-07T11:18:56.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-01-12T17:45:25.000Z (5 months ago)
- Last Synced: 2025-01-26T19:16:51.086Z (4 months ago)
- Topics: component-library, design-system, design-tokens, eslint-config, monorepo, react, react-components, style-guide, theming, typescript, typescript-config, ui-components, ui-library, yarn-workspaces
- Language: TypeScript
- Homepage:
- Size: 2.87 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Ignite Design System
[](https://github.com/rafaumeu/ignite-call)
[](https://github.com/rafaumeu/ignite-call)
[](https://www.typescriptlang.org/)
[](https://rafaumeu.github.io/ignite-call)
[](https://github.com/rafaumeu/ignite-call/actions)
[](https://www.npmjs.com/package/@rafaumeu-ignite-ui/react)
[](https://bundlephobia.com/package/@rafaumeu-ignite-ui/react)
[](https://www.npmjs.com/package/@rafaumeu-ignite-ui/react)
[](./LICENSE)[](http://commitizen.github.io/cz-cli/)
[](https://github.com/semantic-release/semantic-release)
[](http://makeapullrequest.com)
[](https://github.com/rafaumeu/ignite-call)
[](https://github.com/prettier/prettier)
[](https://stitches.dev)
A comprehensive Design System built with modern technologies during the Rocketseat Ignite program. Features accessible components, design tokens, and extensive documentation.
[Components](#-components) •
[Installation](#-installation) •
[Documentation](#-documentation) •
[Development](#-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
```bash
# 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](https://rafaumeu.github.io/ignite-call) 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
```bash
# 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
```bash
# 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](#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](./LICENSE) file for details.
---
### Built with 💜 by Rafael Zendron
[](https://www.linkedin.com/in/rafael-dias-zendron-528290132/)
[](https://github.com/rafaumeu)