https://github.com/luc-ribeiro/ignite-design-system-react

Design System desenvolvido utilizando Storybook para documentação, React, Stitches e Turborepo.
https://github.com/luc-ribeiro/ignite-design-system-react

radix-ui react stitches storybook turborepo typescript

Last synced: 23 days ago
JSON representation

Design System desenvolvido utilizando Storybook para documentação, React, Stitches e Turborepo.

• Host: GitHub
• URL: https://github.com/luc-ribeiro/ignite-design-system-react
• Owner: luc-ribeiro
• Created: 2024-03-03T17:33:53.000Z (12 months ago)
• Default Branch: main
• Last Pushed: 2024-05-01T21:23:15.000Z (10 months ago)
• Last Synced: 2024-05-02T14:48:29.726Z (10 months ago)
• Topics: radix-ui, react, stitches, storybook, turborepo, typescript
• Language: TypeScript
• Homepage: https://luc-ribeiro.github.io/ignite-design-system-react/
• Size: 2.01 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


Ignite Design System





  Clique aqui para ver a versão em Português.



Link Storybook 




  NPM: 

  

     @ignite-ui/react   

    @ignite-ui/tokens  

  


---

![image](https://github.com/luc-ribeiro/ignite-design-system-react/assets/69688077/22bf713b-ec46-493e-8709-89f78c511971)

![image](https://github.com/luc-ribeiro/ignite-design-system-react/assets/69688077/f75a399b-6ce0-4695-9791-510690181228)

## 📄 Project

Design System built to be applied in another project called _Ignite Call_. Components built in this project include: colors, spaces, font sizes, font families, headings, inputs, and more. Using Storybook for documentation, React as the base application, TurboRepo, MonoRepo, and automations.

## 💻 Technologies

- **ReactJS**

- **TypeScript**

- **Storybook**

- **Stitches**

- **Radix UI**

- **TurboRepo**

## :art: Components

- Text

- Heading

- Box

- Button

- TextInput

- TextArea

- Checkbox

- Avatar

- MultiStep

- Tooltip

- Toast

## 🔖 Layout used for component creation

- [Ignite Call - Figma](https://www.figma.com/file/1fBgGauyyzAeE9AA8w7Dzi/Ignite-Call--%E2%80%A2-Projeto-React-(Copy)?type=design&node-id=339-74&mode=design)

## 🚀 Running the project

- Clone the project and access the directory

```bash

$ git clone https://github.com/luc-ribeiro/ignite-design-system-react.git

$ cd ignite-design-system-react

```

- Follow the steps below:

```bash

# Install dependencies

$ npm i

# Start the project

$ npm run dev

```

- The documentation will be available at `http://localhost:6006`