{"id":21933933,"url":"https://github.com/pabloxt14/ignite-design-system","last_synced_at":"2026-05-08T07:31:58.055Z","repository":{"id":158324832,"uuid":"633980128","full_name":"PabloXT14/Ignite-Design-System","owner":"PabloXT14","description":"Design System construído no formato de monorepo, utilizando TypeScript, React, Storybook, Stitches, Radix UI, entre outras ferramentas.   ","archived":false,"fork":false,"pushed_at":"2023-10-24T22:40:53.000Z","size":7687,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-09-14T13:52:33.823Z","etag":null,"topics":["changeset","radix-ui","react","stitches","storybook","turborepo","typescript"],"latest_commit_sha":null,"homepage":"https://pabloxt14.github.io/Ignite-Design-System/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/PabloXT14.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-04-28T18:18:57.000Z","updated_at":"2025-03-03T23:53:53.000Z","dependencies_parsed_at":"2023-10-24T23:27:15.820Z","dependency_job_id":null,"html_url":"https://github.com/PabloXT14/Ignite-Design-System","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/PabloXT14/Ignite-Design-System","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2FIgnite-Design-System","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2FIgnite-Design-System/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2FIgnite-Design-System/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2FIgnite-Design-System/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/PabloXT14","download_url":"https://codeload.github.com/PabloXT14/Ignite-Design-System/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/PabloXT14%2FIgnite-Design-System/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32770988,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-08T02:36:36.067Z","status":"ssl_error","status_checked_at":"2026-05-08T02:36:07.210Z","response_time":54,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["changeset","radix-ui","react","stitches","storybook","turborepo","typescript"],"created_at":"2024-11-29T00:14:00.754Z","updated_at":"2026-05-08T07:31:58.023Z","avatar_url":"https://github.com/PabloXT14.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003e\r\n  \u003cimg\r\n    src=\".github/assets/logo-ignite.svg\"\r\n    title=\"Logo Ignite Rocketseat\"\r\n    alt=\"Logo Ignite Rocketseat\"\r\n    width=\"30px\"\r\n  /\u003e\r\n  Ignite Design System\r\n\u003c/h1\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg alt=\"GitHub language count\" src=\"https://img.shields.io/github/languages/count/pabloxt14/Ignite-Design-System\"\u003e\r\n\r\n  \u003cimg alt=\"GitHub Top Language\" src=\"https://img.shields.io/github/languages/top/pabloxt14/Ignite-Design-System\" /\u003e\r\n\r\n  \u003cimg alt=\"Repository size\" src=\"https://img.shields.io/github/repo-size/pabloxt14/Ignite-Design-System\"\u003e\r\n  \r\n  \u003ca href=\"https://github.com/pabloxt14/Ignite-Design-System/commits/master\"\u003e\r\n    \u003cimg alt=\"GitHub last commit\" src=\"https://img.shields.io/github/last-commit/pabloxt14/Ignite-Design-System\"\u003e\r\n  \u003c/a\u003e\r\n    \r\n   \u003cimg alt=\"License\" src=\"https://img.shields.io/badge/license-MIT-blue\"\u003e\r\n\r\n   \u003ca href=\"https://github.com/pabloxt14/Ignite-Design-System/stargazers\"\u003e\r\n    \u003cimg alt=\"Stargazers\" src=\"https://img.shields.io/github/stars/pabloxt14/Ignite-Design-System?style=social\"\u003e\r\n  \u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\u003cp\u003e\r\n  \u003cimg src=\".github/assets/banner.png\" alt=\"\" /\u003e\r\n\u003c/p\u003e\r\n\r\n\u003ch4 align=\"center\"\u003e \r\n\t🚀 Aplicação finalizada 🚀\r\n\u003c/h4\u003e\r\n\r\n\u003cp align=\"center\"\u003e\r\n \u003ca href=\"#-about\"\u003eAbout\u003c/a\u003e |\r\n \u003ca href=\"#-deploy\"\u003eDeploy\u003c/a\u003e |\r\n \u003ca href=\"#-functionalities\"\u003eFunctionalities\u003c/a\u003e |\r\n \u003ca href=\"#-layout\"\u003eLayout\u003c/a\u003e | \r\n \u003ca href=\"#-how-it-works\"\u003eHow It Works\u003c/a\u003e | \r\n \u003ca href=\"#-technologies\"\u003eTechnologies\u003c/a\u003e | \r\n \u003ca href=\"#-author\"\u003eAuthor\u003c/a\u003e | \r\n \u003ca href=\"#-license\"\u003eLicense\u003c/a\u003e\r\n\u003c/p\u003e\r\n\r\n\r\n## 💻 About\r\n\r\nNeste 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.\r\n\r\nVale 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/).\r\n\r\n---\r\n\r\n## 🔗 Deploy\r\n\r\n**Documentação Storybook**:\r\n\r\nA Documentação do Design System pode ser acessada através da seguinte URL base: https://pabloxt14.github.io/Ignite-Design-System/\r\n\r\n**Pacotes no NPM**:\r\n- [@pabloxt14-ignite-ui/tokens](https://www.npmjs.com/package/@pabloxt14-ignite-ui/tokens)\r\n- [@pabloxt14-ignite-ui/react](https://www.npmjs.com/package/@pabloxt14-ignite-ui/react)\r\n\r\n---\r\n\r\n## ⚙ Functionalities\r\n- [x] Pacote com as configurações base do ESLint na aplicação\r\n- [x] Pacote com as configurações base do TypeScript na aplicação\r\n- [x] Pacote de tokens e documentação com Storybook\r\n  - [x] colors\r\n  - [x] fonts\r\n  - [x] font-sizes\r\n  - [x] font-weights\r\n  - [x] line-heights\r\n  - [x] radii\r\n  - [x] space\r\n- [x] Criação componentes React e documentação com Storybook\r\n  - [x] Text\r\n  - [x] Heading (Títulos, subtítulos)\r\n  - [x] Box / Card\r\n  - [x] Button\r\n  - [x] TextInput\r\n  - [x] TextArea\r\n  - [x] Checkbox\r\n  - [x] Avatar\r\n  - [x] MultiStep (indicador de etapas de preenchimento de algo, ex: formulário)\r\n  - [x] Tooltip\r\n  - [x] Toast\r\n\r\n---\r\n\r\n## 🎨 Layout\r\n\r\nVocê 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.\r\n\r\nVeja uma simples demonstração da documentação do Design System feito com o Storybook\r\n\r\n\u003cp align=\"center\"\u003e\r\n  \u003cimg\r\n    src=\".github/assets/design-system-demonstration.gif\"\r\n    alt=\"Design System Demonstration\"\r\n    title=\"Design System Demonstration\"\r\n    width=\"100%\" \r\n  /\u003e\r\n\u003c/p\u003e\r\n\r\n---\r\n\r\n## 🚀 How it works\r\n\r\n### Pré-requisitos\r\n\r\nAntes de baixar o projeto você vai precisar ter instalado na sua máquina as seguintes ferramentas:\r\n\r\n* [Git](https://git-scm.com)\r\n* [NodeJS](https://nodejs.org/en/)\r\n* [Yarn](https://yarnpkg.com/) ou [NPM](https://www.npmjs.com/)\r\n\r\nAlém disto é bom ter um editor para trabalhar com o código como [VSCode](https://code.visualstudio.com/)\r\n\r\n### Clonando e Executando\r\n\r\nPasso a passo para clonar e executar a aplicação na sua máquina:\r\n\r\n```bash\r\n# Clone este repositório\r\n$ git clone git@github.com:pabloxt14/Ignite-Design-System.git\r\n\r\n# Acesse a pasta do projeto no terminal\r\n$ cd Ignite-Design-System\r\n\r\n# Instale as dependências\r\n$ npm install\r\n\r\n# Execute a aplicação em modo de desenvolvimento\r\n$ npm run dev\r\n\r\n# O documentação Storybook inciará abrindo uma aba no navegador em alguma porta disponível  \r\n```\r\n\r\n---\r\n\r\n## 🛠 Technologies\r\n\r\nAs seguintes principais ferramentas foram usadas na construção do projeto:\r\n\r\n- **[TypeScript](https://www.typescriptlang.org/)**\r\n- **[React](https://react.dev/)**\r\n- **[Storybook](https://storybook.js.org/)**\r\n- **[Stitches](https://stitches.dev/)**\r\n- **[Radix UI](https://www.radix-ui.com/)**\r\n- **[Turborepo](https://turbo.build/repo)**\r\n- **[Changeset](https://github.com/changesets/changesets)**\r\n\r\n\u003e Para mais detalhes das dependências gerais da aplicação veja o arquivo [package.json](./package.json)\r\n\r\n\u003e Para mais detalhes das dependências individuais de cada um dos pacotes da aplicação, acesse o arquivo `package.json` de cada pacote respectivamente.\r\n\r\n---\r\n\r\n## ✍ Author\r\n\r\n\u003cimg alt=\"Perfil Github\" title=\"Perfil Github\" src=\"https://github.com/PabloXT14.png\" width=\"100px\" /\u003e\r\n\r\n[![Linkedin Badge](https://img.shields.io/badge/-Pablo_Alan-blue?style=flat-square\u0026logo=Linkedin\u0026logoColor=white\u0026link=https://www.linkedin.com/in/pabloalan/)](https://www.linkedin.com/in/pabloalan/)\r\n\r\n[![Gmail Badge](https://img.shields.io/badge/-pabloxt14@gmail.com-c14438?style=flat-square\u0026logo=Gmail\u0026logoColor=white\u0026link=mailto:pabloxt14@gmail.com)](mailto:pabloxt14@gmail.com)\r\n\r\n---\r\n\r\n## 📝 License\r\n\r\nEste projeto está sob a licença MIT. Consulte o arquivo [LICENSE](./LICENSE) para mais informações\r\n\r\nFeito com 💜 por Pablo Alan 👋🏽 [Entre em contato!](https://www.linkedin.com/in/pabloalan/)\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpabloxt14%2Fignite-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpabloxt14%2Fignite-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpabloxt14%2Fignite-design-system/lists"}