{"id":28171213,"url":"https://github.com/sarah-ribeiro/ignite-lab-design-system","last_synced_at":"2025-05-15T18:17:27.779Z","repository":{"id":164570267,"uuid":"551714468","full_name":"Sarah-Ribeiro/ignite-lab-design-system","owner":"Sarah-Ribeiro","description":"RocketSeat Ignite Lab #3 - Design System com Figma e React","archived":false,"fork":false,"pushed_at":"2025-01-17T10:05:56.000Z","size":4440,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-17T11:20:24.503Z","etag":null,"topics":["design-system","figma","github","nodejs","reactjs","rocketseat","storybook","typescript","vite","vscode"],"latest_commit_sha":null,"homepage":"","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/Sarah-Ribeiro.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}},"created_at":"2022-10-15T00:16:43.000Z","updated_at":"2025-01-17T10:05:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"f208ec78-fde8-4eaa-bdd4-f07402990bbb","html_url":"https://github.com/Sarah-Ribeiro/ignite-lab-design-system","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarah-Ribeiro%2Fignite-lab-design-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarah-Ribeiro%2Fignite-lab-design-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarah-Ribeiro%2Fignite-lab-design-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Sarah-Ribeiro%2Fignite-lab-design-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Sarah-Ribeiro","download_url":"https://codeload.github.com/Sarah-Ribeiro/ignite-lab-design-system/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394685,"owners_count":22063985,"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","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","figma","github","nodejs","reactjs","rocketseat","storybook","typescript","vite","vscode"],"created_at":"2025-05-15T18:16:21.832Z","updated_at":"2025-05-15T18:17:27.764Z","avatar_url":"https://github.com/Sarah-Ribeiro.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![image](https://user-images.githubusercontent.com/12506432/195759740-3fd7e15d-afe7-4c8e-9e11-1767b2ac78bf.png)\n\n\u003ch1\u003eIgnite Lab #3 - Do Figma ao React \u003c/h1\u003e\n  \nEvento disponibilizado pela [RocketSeat](https://www.rocketseat.com.br/)\n\u003cp\u003eTema: Design System com Figma, React e StoryBook\u003c/p\u003e \n\nProjeto desenvolvido durante a semana de 10/10/2022 a 13/11/2022, onde pude ter contato com várias ferramentas para a construção de um Design System como, Figma, React, StoryBook e TailwindCSS.\n\n## A aplicação teve as seguintes etapas de construção:\n- Projeto no Figma\n- Design System - Criação dos componentes \n- Documentação no Storybook\n- Deploy automatizado com GitHub Actions\n- Criação do Front-End em Vite\n- Implementação de testes com Jest no Storybook.\n\n## Tecnologias e ferramentas utilizadas\n\n- [React.JS (Vite)](https://vitejs.dev/)\n- [TypeScript](https://www.typescriptlang.org/)\n- [Radix UI](https://www.radix-ui.com/)\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Storybook](https://storybook.js.org/)\n- [Addon A11y](https://www.npmjs.com/package/@storybook/addon-a11y)\n- [Github Actions](https://github.com/features/actions)\n- [Jest](https://jestjs.io/pt-BR/)\n- [MSW](https://mswjs.io/) \n\nDurante as aulas, pude conhecer como montar uma estrutura visual de um design system na prática com o \nFigma e como porta-lo para o código disponibilizando assim os dados para testes dos componentes via StoryBook,\ndeploy automatizado com GitHub Actions e simulação do Front-End em Vite.\n\n![image](https://user-images.githubusercontent.com/12506432/195761826-2861aa90-156f-45d3-9ec3-6730930b3757.png)\n\n\u003c/div\u003e\n\n---\n \nProjeto no Figma:\n\nhttps://www.figma.com/file/YBOweIec7URKNExxWffzBz/Ignite-Lab-DS?node-id=0%3A1\n \nPagina de Login:\n \n![image](https://user-images.githubusercontent.com/12506432/195759270-ae386b8b-4737-408b-9a74-f961af057651.png)\n\n## Instalação e uso\n\nClone o projeto e acesse a pasta\n\n```bash\n$ git clone https://github.com/filipeleonelbatista/design-sistem-bootcamp\n```\n\nSiga os passos abaixo:\n```bash\n# Instalar as Dependências\n$ npm i\n\n# Iniciar o Servidor em Modo de Desenvolvimento\n$ npm run dev\n\n# Iniciar o StoryBook\n$ npm run storybook\n```\n## Ferramentas Utilizadas\n\n\u003cdiv\u003e\n\n\u003ctable border=\"0\"\u003e\n  \u003ctr\u003e\n    \u003ctd align=\"center\" width=\"96\"\u003e\n      \u003ca href=\"#VisualStudioCode-tech\"\u003e\n        \u003cimg align=\"center\" alt=\"devcss-Js\" height=\"65\" width=\"65\" src=\"https://raw.githubusercontent.com/claudneysessa/RocketSeat-ignite-lab-design-system/f09dc9a18337c083ee209b5ebd8f0987d03b83bd/figma-1.svg?raw=true\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"96\"\u003e\n      \u003ca href=\"#VisualStudioCode-tech\"\u003e\n        \u003cimg align=\"center\" alt=\"devcss-Js\" height=\"65\" width=\"65\" src=\"https://raw.githubusercontent.com/claudneysessa/RocketSeat-ignite-lab-design-system/05ac7733917f772e1361c73b696a2d94ef1d4fe5/react-2.svg?raw=true\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"96\"\u003e\n      \u003ca href=\"#VisualStudioCode-tech\"\u003e\n        \u003cimg align=\"center\" alt=\"devcss-Js\" height=\"65\" width=\"65\" src=\"https://github.com/claudneysessa/claudneysessa/blob/main/images/language_icons/visual%20studio%20code.png?raw=true\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"96\"\u003e\n      \u003ca href=\"#VisualStudioCode-tech\"\u003e\n        \u003cimg align=\"center\" alt=\"devcss-Js\" height=\"65\" width=\"65\" src=\"https://raw.githubusercontent.com/claudneysessa/RocketSeat-ignite-lab-design-system/05ac7733917f772e1361c73b696a2d94ef1d4fe5/github-icon-1.svg?raw=true\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"96\"\u003e\n      \u003ca href=\"#VisualStudioCode-tech\"\u003e\n        \u003cimg align=\"center\" alt=\"devcss-Js\" height=\"65\" width=\"65\" src=\"https://raw.githubusercontent.com/claudneysessa/RocketSeat-ignite-lab-design-system/05ac7733917f772e1361c73b696a2d94ef1d4fe5/storybook-1.svg?raw=true\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd align=\"center\" width=\"96\"\u003e\n      \u003ca href=\"#VisualStudioCode-tech\"\u003e\n        \u003cimg align=\"center\" alt=\"devcss-Js\" height=\"65\" width=\"65\" src=\"https://raw.githubusercontent.com/claudneysessa/RocketSeat-ignite-lab-design-system/05ac7733917f772e1361c73b696a2d94ef1d4fe5/tailwindcss.svg?raw=true\"\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n\n\u003c/div\u003e\n\u003cbr /\u003e\n\u003cp align=\"center\"\u003e\n    Desenvolvido 💜 por Sarah Ribeiro\n\u003c/p\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarah-ribeiro%2Fignite-lab-design-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsarah-ribeiro%2Fignite-lab-design-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsarah-ribeiro%2Fignite-lab-design-system/lists"}