{"id":18924208,"url":"https://github.com/andersondev96/05-design-system","last_synced_at":"2025-08-24T22:09:05.684Z","repository":{"id":259143153,"uuid":"876426179","full_name":"andersondev96/05-design-system","owner":"andersondev96","description":"Design System utilizando React.js, abordando elementos essenciais, como cores, tipografia, botões e muito mais","archived":false,"fork":false,"pushed_at":"2025-02-22T18:59:39.000Z","size":2695,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-01T09:32:59.026Z","etag":null,"topics":["design-system","radix-ui","react","storybook"],"latest_commit_sha":null,"homepage":"https://andersondev96.github.io/05-design-system","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/andersondev96.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2024-10-22T00:21:30.000Z","updated_at":"2025-02-22T18:59:20.000Z","dependencies_parsed_at":"2025-05-24T23:15:16.396Z","dependency_job_id":"056ca017-dd1b-459c-96e4-acf53df72c9a","html_url":"https://github.com/andersondev96/05-design-system","commit_stats":null,"previous_names":["andersondev96/05-design-system"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/andersondev96/05-design-system","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersondev96%2F05-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersondev96%2F05-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersondev96%2F05-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersondev96%2F05-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/andersondev96","download_url":"https://codeload.github.com/andersondev96/05-design-system/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/andersondev96%2F05-design-system/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":271961675,"owners_count":24850593,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-24T02:00:11.135Z","response_time":111,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["design-system","radix-ui","react","storybook"],"created_at":"2024-11-08T11:06:08.652Z","updated_at":"2025-08-24T22:09:05.679Z","avatar_url":"https://github.com/andersondev96.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Design System - StoryBook\n![NPM Version](https://img.shields.io/npm/v/%40anderson-ignite-ui%2Freact?style=flat-square)\n![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/andersondev96/05-design-system/release.yml?style=flat-square\u0026color=blue)\n![GitHub last commit](https://img.shields.io/github/last-commit/andersondev96/05-design-system?style=flat-square\u0026color=blue)\n\n\nNeste projeto é criado um Design System utilizando React.js, abordando elementos essenciais, como cores, tipografia, botões e muito mais. A documentação é apresentada no **Storybook**, e o sistema está disponível como um pacote **npm**, permitindo a sua integração em qualquer projeto front-end.\n\n🔗 Link do projeto: [Design System - Storybook](https://andersondev96.github.io/05-design-system)\n\n---\n\n### 📌 Índice\n- [💻 Capturas de tela](#-capturas-de-tela)\n- [🚀 Componentes](#-componentes)\n- [🧑‍💻 Tecnologias utilizadas](#-tecnologias-utilizadas)\n- [🎨 Layout do projeto](#-layout-do-projeto)\n- [⚙ Como executar o projeto](#-como-executar-o-projeto)\n- [🌍 Como utilizar os componentes](#-como-utilizar-os-componentes)\n- [🤝 Como contribuir](#-como-contribuir)\n- [👥 Autor](#-autor)\n\n## 💻 Capturas de tela\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/4e39065e-b864-4806-9cfa-48386c38074c\" width=\"30%\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/816ef1a0-365f-430b-915f-8fbddda3e9e2\" width=\"30%\"\u003e\n  \u003cimg src=\"https://github.com/user-attachments/assets/6864bff4-7abf-4a78-abdf-fc958439fa6f\" width=\"30%\"\u003e\n\u003c/p\u003e\n\n---\n\n# 🚀 Componentes\n\n- [ ] Text\n- [ ] Heading\n- [ ] Box / Card\n- [ ] Button\n- [ ] TextInput\n- [ ] Textarea\n- [ ] Checkbox\n- [ ] Avatar\n- [ ] MultiStep\n- [ ] Toast\n- [ ] Tooltip\n\n---\n\n## 🧑‍💻 Tecnologias utilizadas\nAo longo do desenvolvimento do projeto foram utilizadas as seguintes tecnologias:\n\n[![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge\u0026logo=storybook\u0026logoColor=white)](https://storybook.js.org/)\n[![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white)](https://www.typescriptlang.org/)\n[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge\u0026logo=react\u0026logoColor=%2361DAFB)](https://react.dev/)\n[![Radix UI](https://img.shields.io/badge/radix%20ui-161618.svg?style=for-the-badge\u0026logo=radix-ui\u0026logoColor=white)](https://www.radix-ui.com/)\n\n---\n## 🎨 Layout do projeto\nConfira o layout do projeto no Figma.\n- [Layout do projeto](https://www.figma.com/design/NYfrAhWNH0cyrUXjBt2XJL/Ignite-Call?node-id=0-1\u0026t=flsUTrlo4XcKR8eD-1)\n\n## ⚙ Como executar o projeto\nSiga os seguintes passos para executar o projeto localmente:\n\n1. Para executar o projeto, primeiro clone esse repositório:\n    ```\n    git clone https://github.com/andersondev96/05-design-system\n    ```\n\n2. Acesse a pasta *05-design-system*:\n    ```\n    cd 05-design-system\n    ```\n\n3. Instale as dependências:\n    ```\n    npm install\n    ```\n\n4. Execute o projeto:\n    ```\n    npm run dev\n    ```\n\n    A aplicação está disponível em: [http://localhost:6006](http://localhost:6006)\n\n## 🌍 Como utilizar os componentes\nPara utilizar os componentes em seu projeto, siga os passos abaixo: \n\n1. Acesse o pacote no **npm**: [@anderson-ignite-ui](https://www.npmjs.com/package/@anderson-ignite-ui/react)\n\n2. Instale a biblioteca no seu projeto: \n    ```\n    npm i @anderson-ignite-ui/react\n    ```\n\n3. Importe e utilize os componentes em seu código. Veja o exemplo do componente `\u003cButton\u003e`.\n\n    ```ts\n    import { Button } from '@anderson-ignite-ui/react';\n    \n    \u003cButton\n      onClick={function Ms(){}}\n      size=\"md\"\n      variant=\"primary\"\n    \u003e\n      Send\n    \u003c/Button\u003e\n    ```\n\n    \u003e Consulte a documentação completa do projeto para mais detalhes sobre utilizar outros componentes.\n\n## 🤝 Como contribuir\n1. Faça um fork do repositório.\n\n2. Crie uma nova branch com as suas alterações:\n    ```\n    git checkout -b my-feature\n    ```\n3. Salve as suas alterações e crie uma mensagem de commit, dizendo o que você fez: \n    ```\n    git commit -m \"feature: My new feature\"\n    ```\n4. Envie as suas alterações: \n    ```\n    git push origin my-feature\n    ```\n\n## 👥 Autor\n\n\u003cdiv style=\"display:flex; flex-direction:column; align-items: center;\"\u003e\n\n\u003ca href=\"https://www.linkedin.com/in/anderson-fernandes96/\"\u003e\n\u003cimg src=\"https://avatars.githubusercontent.com/u/49786548?v=4\" width=\"64\" style=\"border: 2px solid blue; border-radius: 50px\" /\u003e\n\u003c/a\u003e\n\n**Anderson Fernandes Ferreira**\n\n[![Instagram](https://img.shields.io/badge/-Instagram-%23E4405F?style=for-the-badge\u0026logo=instagram\u0026logoColor=white)](https://instagram.com/anderson_ff13)\n[![Gmail](https://img.shields.io/badge/-Gmail-%23333?style=for-the-badge\u0026logo=gmail\u0026logoColor=white)](mailto:andersonfferreira96@gmail.com.br)\n[![LinkedIn](https://img.shields.io/badge/-LinkedIn-%230077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white)](https://www.linkedin.com/in/anderson-fernandes96/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandersondev96%2F05-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandersondev96%2F05-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandersondev96%2F05-design-system/lists"}