Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pabloxt14/ignite-design-system
Design System construído no formato de monorepo, utilizando TypeScript, React, Storybook, Stitches, Radix UI, entre outras ferramentas.
https://github.com/pabloxt14/ignite-design-system
changeset radix-ui react stitches storybook turborepo typescript
Last synced: 18 days ago
JSON representation
Design System construído no formato de monorepo, utilizando TypeScript, React, Storybook, Stitches, Radix UI, entre outras ferramentas.
- Host: GitHub
- URL: https://github.com/pabloxt14/ignite-design-system
- Owner: PabloXT14
- License: mit
- Created: 2023-04-28T18:18:57.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-24T22:40:53.000Z (over 1 year ago)
- Last Synced: 2024-11-29T00:13:58.412Z (3 months ago)
- Topics: changeset, radix-ui, react, stitches, storybook, turborepo, typescript
- Language: TypeScript
- Homepage: https://pabloxt14.github.io/Ignite-Design-System/
- Size: 7.33 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Ignite Design System
🚀 Aplicação finalizada 🚀
About |
Deploy |
Functionalities |
Layout |
How It Works |
Technologies |
Author |
License
## 💻 About
Neste projeto, construímos um Design System em formato de `monorepo`, documentando `tokens` (cores, tamanhos de fonte, espaçamento, etc.) e `componentes` React com a ferramenta `Storybook`. Utilizamos o `turbo-repo` para automatizar o processo de build dos pacotes, garantindo eficiência e escalabilidade. Com o `changeset`, facilitamos a atualização e publicação dos pacotes no `npm`, mantendo um histórico claro das alterações. Essa abordagem promove reutilização, padronização e colaboração entre diferentes projetos.
Vale ressaltar que este projeto foi desenvolvido como conclusão de um desafio proposto no curso/trilha **Ignite** oferecido pela [Rocketseat](https://www.rocketseat.com.br/).
---
## 🔗 Deploy
**Documentação Storybook**:
A Documentação do Design System pode ser acessada através da seguinte URL base: https://pabloxt14.github.io/Ignite-Design-System/
**Pacotes no NPM**:
- [@pabloxt14-ignite-ui/tokens](https://www.npmjs.com/package/@pabloxt14-ignite-ui/tokens)
- [@pabloxt14-ignite-ui/react](https://www.npmjs.com/package/@pabloxt14-ignite-ui/react)
---
## ⚙ Functionalities
- [x] Pacote com as configurações base do ESLint na aplicação
- [x] Pacote com as configurações base do TypeScript na aplicação
- [x] Pacote de tokens e documentação com Storybook
- [x] colors
- [x] fonts
- [x] font-sizes
- [x] font-weights
- [x] line-heights
- [x] radii
- [x] space
- [x] Criação componentes React e documentação com Storybook
- [x] Text
- [x] Heading (Títulos, subtítulos)
- [x] Box / Card
- [x] Button
- [x] TextInput
- [x] TextArea
- [x] Checkbox
- [x] Avatar
- [x] MultiStep (indicador de etapas de preenchimento de algo, ex: formulário)
- [x] Tooltip
- [x] Toast
---
## 🎨 Layout
Você pode visualizar o layout do projeto no qual nos baseamos para criar o Design System através [desse link](https://www.figma.com/file/cowwFHJimoyQomSAynMjGz/Ignite-Call?node-id=4:412). É necessário ter conta no [Figma](https://www.figma.com/) para acessá-lo.
Veja uma simples demonstração da documentação do Design System feito com o Storybook
---
## 🚀 How it works
### Pré-requisitos
Antes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:
* [Git](https://git-scm.com)
* [NodeJS](https://nodejs.org/en/)
* [Yarn](https://yarnpkg.com/) ou [NPM](https://www.npmjs.com/)
Além disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)
### Clonando e Executando
Passo a passo para clonar e executar a aplicação na sua máquina:
```bash
# Clone este repositório
$ git clone [email protected]:pabloxt14/Ignite-Design-System.git
# Acesse a pasta do projeto no terminal
$ cd Ignite-Design-System
# Instale as dependências
$ npm install
# Execute a aplicação em modo de desenvolvimento
$ npm run dev
# O documentação Storybook inciará abrindo uma aba no navegador em alguma porta disponível
```
---
## 🛠 Technologies
As seguintes principais ferramentas foram usadas na construção do projeto:
- **[TypeScript](https://www.typescriptlang.org/)**
- **[React](https://react.dev/)**
- **[Storybook](https://storybook.js.org/)**
- **[Stitches](https://stitches.dev/)**
- **[Radix UI](https://www.radix-ui.com/)**
- **[Turborepo](https://turbo.build/repo)**
- **[Changeset](https://github.com/changesets/changesets)**
> Para mais detalhes das dependências gerais da aplicação veja o arquivo [package.json](./package.json)
> Para mais detalhes das dependências individuais de cada um dos pacotes da aplicação, acesse o arquivo `package.json` de cada pacote respectivamente.
---
## ✍ Author
[](https://www.linkedin.com/in/pabloalan/)
[](mailto:[email protected])
---
## 📝 License
Este projeto está sob a licença MIT. Consulte o arquivo [LICENSE](./LICENSE) para mais informações
Feito com 💜 por Pablo Alan 👋🏽 [Entre em contato!](https://www.linkedin.com/in/pabloalan/)