{"id":21389835,"url":"https://github.com/droztech/droz-visu","last_synced_at":"2025-07-13T16:31:45.883Z","repository":{"id":187766929,"uuid":"590040403","full_name":"droztech/droz-visu","owner":"droztech","description":"🌈 Biblioteca de componentes e design system criada para os produtos Droz.","archived":false,"fork":false,"pushed_at":"2024-06-21T18:14:30.000Z","size":3447,"stargazers_count":6,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-11-22T09:11:47.973Z","etag":null,"topics":["design-system","droz-visu","github-packages","jest","npm","radix-ui","react","react-testing-library","storybook","tailwindcss","tailwindcss-plugin","visu","vite"],"latest_commit_sha":null,"homepage":"https://visu.meudroz.com","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/droztech.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-01-17T14:27:34.000Z","updated_at":"2024-05-08T16:25:01.000Z","dependencies_parsed_at":null,"dependency_job_id":"5157986f-7d04-4404-82e9-4f95376fa821","html_url":"https://github.com/droztech/droz-visu","commit_stats":null,"previous_names":["coaktion/droz-visu","droztech/droz-visu"],"tags_count":32,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droztech%2Fdroz-visu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droztech%2Fdroz-visu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droztech%2Fdroz-visu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/droztech%2Fdroz-visu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/droztech","download_url":"https://codeload.github.com/droztech/droz-visu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225901212,"owners_count":17542183,"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","droz-visu","github-packages","jest","npm","radix-ui","react","react-testing-library","storybook","tailwindcss","tailwindcss-plugin","visu","vite"],"created_at":"2024-11-22T13:13:06.832Z","updated_at":"2024-11-22T13:13:07.305Z","avatar_url":"https://github.com/droztech.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cpicture\u003e\n    \u003cimg alt=\"Visu\" src=\"visu.svg\" height=\"64px\" /\u003e\n  \u003c/picture\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/Coaktion/Droz-Visu/actions/workflows/build-and-test.js.yml\"\u003e\n    \u003cimg src=\"https://github.com/Coaktion/Droz-Visu/actions/workflows/build-and-test.js.yml/badge.svg\" alt=\"CI/CD visu\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nUma biblioteca de componentes e design system Droz. Com testes e documentação para todos os componentes.\n\n## Como o projeto funciona?\n\nO projeto é um monorepo, que foi criado utilizando o [Turborepo](https://turbo.build/repo), para saber mais acesse o [Monorepo Handbook](https://turbo.build/repo/docs/handbook). O projeto conta com dois workspaces `docs` e `package`:\n\n### Docs\n\nProjeto onde são desenvolvidas as documentações dos components do Visu. Utilizando principalmente o [Storybook](https://storybook.js.org/). Os componentes documentados são baseados no último build feito na biblioteca, então é necessários que haja pelo menos um build antes de documentar os componentes.\n\n_**Importante:** Antes de criar/modificar uma story de qualquer componente **SEMPRE** construa o Visu e execute o comando `npm run install` para atualizar as dependências do Storybook (especialmente o Visu)_\n\n### Package\n\nProjeto onde são desenvolvidos os componentes e o design system da biblioteca Visu. O projeto utiliza principalmente [Vite](https://vitejs.dev), [React](https://react.dev/) e [Tailwindcss](https://tailwindcss.com/).\nO build é realizado na pasta `src/library` para os componentes e copiando os arquivos da pasta `src/theme` para o design system que consiste em um plugin do tailwindcss.\nO projeto testa os componentes utilizando [Jest](https://jestjs.io) e [React Testing Library](https://testing-library.com/docs/react-testing-library/intro).\n\n## Script\n\nAbaixo a lista dos scrips principais para a utilização do projeto.\n\n### Build\n\nPara executar o build em `docs` e `package` utilize o comando abaixo na raiz do projeto:\n\n```javascript\nnpm run build\n// npm run build:docs\n// npm run build:packages\n```\n\n### Desenvolvimento\n\nPara executar em paralelo e no modo de desenvolvimento todos os `docs` e `package` utilize o comando abaixo na raiz do projeto:\n\n```javascript\nnpm run dev\n// npm dev build:docs\n// npm dev build:packages\n```\n\n### Teste\n\nPara executar os testes da biblioteca, acesse o diretório `package` e utilize o comando abaixo:\n\n```javascript\nnpm run test\n// npm run test:watch\n// npm run test:coverage\n```\n\n## Biblioteca\n\nNa Biblioteca é publicado o conteúdo da pasta `dist` que é gerado a partir das pastas `src/library` e `src/theme`. Para realizar a publicação precisamos gerar um build da biblioteca que irá criar a pasta `dist` com essa pasta criada podemos então publicar o pacote.\n\n### Publicação NPM\n\nPara realizar a publicação no Github Packages, após ter feito todas as atualizações necessárias em uma PR separada, siga os passos abaixo.\n\n1. Abra uma nova branch chamada \"release-x.x.x\"\n1. Na nova branch rode o script scripts/versioning [`major` | `minor` | `patch`]\n1. Dê o nome pro commit de \"release: x.x.x\"\n1. Faça merge dessa branch na main\n1. Abra a branch main atualizada\n1. Em um terminal autenticado com o NPM, execute `npm publish` dentro da pasta `packages/visu` (importante) e pronto\n\n## Links úteis:\n\nAprenda mais sobre `Packages`:\n\n- [NPM Publish](https://docs.npmjs.com/cli/v9/commands/npm-publish)\n- [Vite Build Library Mode](https://docs.npmjs.com/cli/v9/commands/npm-publish)\n- [package.json Configs](https://docs.npmjs.com/cli/v9/configuring-npm/package-json)\n- [Github Packages](https://docs.github.com/en/packages/quickstart)\n\nAprenda mais sobre `Turborepo`:\n\n- [Package Installation](https://turbo.build/repo/docs/handbook/package-installation)\n- [Tasks](https://turbo.build/repo/docs/core-concepts/monorepos/running-tasks)\n- [Caching](https://turbo.build/repo/docs/core-concepts/caching)\n- [Remote Caching](https://turbo.build/repo/docs/core-concepts/remote-caching)\n- [Filtering](https://turbo.build/repo/docs/core-concepts/monorepos/filtering)\n- [Configuration Options](https://turbo.build/repo/docs/reference/configuration)\n- [CLI Usage](https://turbo.build/repo/docs/reference/command-line-reference)\n\nAprenda mais sobre `Vite`:\n\n- [Início](https://vitejs.dev/guide/)\n- [CLI](https://vitejs.dev/guide/cli.html)\n- [Plugins](https://vitejs.dev/guide/using-plugins.html)\n- [Library Mode Build](https://vitejs.dev/guide/build.html#library-mode)\n\nAprenda mais sobre `React`:\n\n- [Início](https://react.dev/learn)\n- [Hooks](https://react.dev/reference/react)\n- [Built-in Components](https://react.dev/reference/react/components)\n- [Built-in APIs](https://react.dev/reference/react/apis)\n- [Directives](https://react.dev/reference/react/directives)\n- [Client APIs](https://react.dev/reference/react-dom/client)\n- [Server APIs](https://react.dev/reference/react-dom/server)\n\nAprenda mais sobre `Tailwindcss`:\n\n- [Instalação](https://tailwindcss.com/docs/installation/using-postcss)\n- [Configuração](https://tailwindcss.com/docs/configuration)\n- [Configuração do setup](https://tailwindcss.com/docs/editor-setup)\n- [Utility-first](https://tailwindcss.com/docs/utility-first)\n- [Responsive Design](https://tailwindcss.com/docs/responsive-design)\n- [Dark Mode](https://tailwindcss.com/docs/dark-mode)\n- [Plugins](https://tailwindcss.com/docs/plugins)\n\nAprenda mais sobre `Storybook`:\n\n- [Story](https://storybook.js.org/docs/react/get-started/whats-a-story)\n- [Setup](https://storybook.js.org/docs/react/get-started/setup)\n- [Addons](https://storybook.js.org/docs/react/addons/introduction)\n- [Testing](https://storybook.js.org/docs/react/writing-tests/introduction)\n- [Builders](https://storybook.js.org/docs/react/builders/overview)\n- [Controls](https://storybook.js.org/docs/react/essentials/controls)\n\nAprenda mais sobre `Testes`:\n\n- [Exemplos](https://testing-library.com/docs/react-testing-library/example-intro)\n- [API](https://testing-library.com/docs/react-testing-library/api)\n- [Cheatsheet](https://testing-library.com/docs/react-testing-library/cheatsheet)\n- [Expect](https://jestjs.io/pt-BR/docs/expect)\n\n## License\n\n[Copyright](./LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroztech%2Fdroz-visu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdroztech%2Fdroz-visu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdroztech%2Fdroz-visu/lists"}