{"_id":"@brainz_group/brainz-ui","_rev":"2-899ad1412c5fbf2d000af6732b06ce53","name":"@brainz_group/brainz-ui","dist-tags":{"latest":"0.0.2"},"versions":{"0.0.1":{"name":"@brainz_group/brainz-ui","version":"0.0.1","author":{"url":"https://www.linkedin.com/in/patrickgratao/","name":"Patrick Gratão","email":"ppgratao@gmail.com"},"_id":"@brainz_group/brainz-ui@0.0.1","maintainers":[{"name":"vitor_teixeira","email":"vitor.teixeira@brainz.group"},{"name":"matheus-warkentin","email":"matheus.warkentin@brainz.group"},{"name":"patrickgrataobrainz","email":"patryck.costa@brainz.group"},{"name":"gustavo.fontana","email":"gustavo.fontana@brainz.group"},{"name":"loliveira92","email":"lucas.oliveira@bigbrain.com.br"}],"dist":{"shasum":"2dd2772e86b0744e7440550beb433d01b7250b97","tarball":"https://registry.npmjs.org/@brainz_group/brainz-ui/-/brainz-ui-0.0.1.tgz","fileCount":8,"integrity":"sha512-a56kc+S5ibk4/W5rDlpPWtDvkIDQSi/A3qGt7X3ZSbqiGrbYV7yCTiV0uJ2FhxkSz8XSE8WTFBCPdOvLBalG4Q==","signatures":[{"sig":"MEUCIAYBDT1b4gyWfgiv7oA71+ks4T9R22TlLGZ50PCfbKoCAiEA1tDOcX36/4J44KQgSQH2CtdobJmzbIZBPnj28Q5h33o=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":160968},"main":"dist/brainz-ui-umd.cjs","type":"module","husky":{"hooks":{"pre-push":"npm run build","pre-commit":"npm run format && npm run lint"}},"style":"dist/style.css","module":"dist/brainz-ui.js","exports":{".":{"import":"./dist/brainz-ui.js","require":"./dist/brainz-ui-umd.cjs"},"./style.css":{"default":"./dist/style.css"}},"gitHead":"c9d8c9582073d5748ecd583999a774a92b6a4ed6","private":false,"scripts":{"lint":"biome check --write src","build":"tsc && vite build","format":"biome format --write src","prepare":"husky","release":"node publish.js","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"_npmUser":{"name":"patrickgrataobrainz","email":"patryck.costa@brainz.group"},"_npmVersion":"10.8.2","description":"Este é um projeto de UI para da Big Brain que exporta componentes de React para serem utilizados em outros projetos.","directories":{},"resolutions":{"jackspeak":"2.1.1"},"_nodeVersion":"20.18.0","dependencies":{"clsx":"^2.0.0","react":"^18.2.0","react-dom":"^18.2.0","react-icons":"^4.12.0","react-tooltip":"^5.28.0","tailwind-merge":"^2.1.0","class-variance-authority":"^0.7.0"},"_hasShrinkwrap":false,"devDependencies":{"vite":"^5.0.4","husky":"^9.1.1","vitest":"^0.34.6","postcss":"^8.4.32","happy-dom":"^12.10.3","storybook":"^7.6.4","@vitest/ui":"^0.34.6","typescript":"^5.3.2","@types/jest":"^29.5.11","@types/node":"^20.10.2","tailwindcss":"^3.3.5","@types/react":"^18.2.41","autoprefixer":"^10.4.16","react-daisyui":"^5.0.5","@biomejs/biome":"1.8.3","react-toastify":"^11.0.5","tailwind-merge":"^1.14.0","@storybook/test":"^7.6.4","vite-plugin-dts":"^3.6.4","@storybook/react":"^7.6.4","@types/react-dom":"^18.2.17","@storybook/blocks":"^7.6.4","vite-tsconfig-paths":"^4.2.2","@storybook/react-vite":"^7.6.4","@storybook/addon-links":"^7.6.4","@testing-library/react":"^14.1.2","@types/react-router-dom":"^5.3.3","vite-plugin-static-copy":"^2.3.0","@vitejs/plugin-react-swc":"^3.5.0","@testing-library/jest-dom":"^6.1.5","@storybook/addon-essentials":"^7.6.4","@storybook/addon-onboarding":"^1.0.9","@storybook/addon-interactions":"^7.6.4"},"optionalDependencies":{"@rollup/rollup-linux-x64-gnu":"4.9.5"},"_npmOperationalInternal":{"tmp":"tmp/brainz-ui_0.0.1_1741370414555_0.6502005643057283","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@brainz_group/brainz-ui","private":false,"version":"0.0.2","type":"module","main":"dist/brainz-ui-umd.cjs","module":"dist/brainz-ui.js","style":"dist/brainz-ui.css","exports":{".":{"import":"./dist/brainz-ui.js","require":"./dist/brainz-ui-umd.cjs"},"./style.css":{"default":"./dist/brainz-ui.css"}},"scripts":{"prepare":"husky install","lint":"biome check --write src","format":"biome format --write src","dev":"vite","build":"tsc && vite build","preview":"vite preview","sb":"storybook dev -p 6006","build-sb":"storybook build","storybook":"storybook dev -p 6006","build-storybook":"storybook build","release":"node publish.js"},"dependencies":{"clsx":"^1.2.1","react":"^18.2.0","react-dom":"^18.2.0","tailwind-merge":"^3.0.2"},"devDependencies":{"@biomejs/biome":"1.8.3","@storybook/addon-essentials":"^8.6.0","@storybook/addon-interactions":"^8.6.0","@storybook/addon-links":"^8.6.0","@storybook/blocks":"^8.6.0","@storybook/builder-vite":"^8.6.9","@storybook/manager-api":"^8.6.9","@storybook/react":"^8.6.0","@storybook/react-vite":"^8.6.0","@storybook/testing-library":"^0.2.2-next.0","@storybook/theming":"^8.6.9","@testing-library/jest-dom":"^5.16.5","@testing-library/react":"^14.0.0","@testing-library/user-event":"^14.4.3","@types/jest":"^29.5.3","@types/node":"^20.4.2","@types/react":"^18.2.14","@types/react-dom":"^18.2.6","@types/react-syntax-highlighter":"^15.5.13","@vitejs/plugin-react":"^4.0.1","@vitejs/plugin-react-swc":"^3.5.0","@vitest/ui":"^3.0.9","autoprefixer":"^10.4.14","husky":"^8.0.3","postcss":"^8.4.26","postcss-import":"^15.1.0","postcss-nesting":"^12.0.0","prop-types":"^15.8.1","react-daisyui":"^5.0.5","react-icons":"^5.5.0","react-router-dom":"^7.4.0","react-syntax-highlighter":"^15.6.1","react-toastify":"^11.0.5","storybook":"^8.6.0","tailwindcss":"^3.3.3","typescript":"^5.0.2","vite":"^6.0.0","vite-plugin-checker":"^0.9.1","vite-plugin-dts":"^4.5.3","vite-tsconfig-paths":"^5.1.4","vitest":"^3.0.9"},"_id":"@brainz_group/brainz-ui@0.0.2","gitHead":"7896cef241e5771a9d06a7dd66162ef0911e1366","description":"

\r
\r \"big\r

\r

","_nodeVersion":"20.18.0","_npmVersion":"10.8.2","dist":{"integrity":"sha512-ic1PQSUcuYpXO+8j1PbjTbgFuPhImn5RyoRreQcroThJRVY6eNgkPBPoUoW9DDXgximkZlNnEGhS0huUpq/lBA==","shasum":"295d7ac8457cb109a0bf61bc58a8af8974ef75d5","tarball":"https://registry.npmjs.org/@brainz_group/brainz-ui/-/brainz-ui-0.0.2.tgz","fileCount":8,"unpackedSize":174585,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIAKe/4XFgae6kVN5x4p96aJ8q68J3tIWok0olo/dexQWAiAKL8cLSCH/J3ac63VGgSZwra3M91n2RdcpB04lXQg1IA=="}]},"_npmUser":{"name":"patrickgrataobrainz","email":"patryck.costa@brainz.group"},"directories":{},"maintainers":[{"name":"vitor_teixeira","email":"vitor.teixeira@brainz.group"},{"name":"matheus-warkentin","email":"matheus.warkentin@brainz.group"},{"name":"patrickgrataobrainz","email":"patryck.costa@brainz.group"},{"name":"gustavo.fontana","email":"gustavo.fontana@brainz.group"},{"name":"loliveira92","email":"lucas.oliveira@bigbrain.com.br"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/brainz-ui_0.0.2_1744657322882_0.5634817802758838"},"_hasShrinkwrap":false}},"time":{"created":"2025-03-07T18:00:14.454Z","modified":"2025-04-14T19:02:03.399Z","0.0.1":"2025-03-07T18:00:14.765Z","0.0.2":"2025-04-14T19:02:03.123Z"},"description":"

\r
\r \"big\r

\r

","maintainers":[{"name":"vitor_teixeira","email":"vitor.teixeira@brainz.group"},{"name":"matheus-warkentin","email":"matheus.warkentin@brainz.group"},{"name":"patrickgrataobrainz","email":"patryck.costa@brainz.group"},{"name":"gustavo.fontana","email":"gustavo.fontana@brainz.group"},{"name":"loliveira92","email":"lucas.oliveira@bigbrain.com.br"}],"readme":"

\r\n
\r\n \"big\r\n

\r\n

\r\n\r\n
\r\n\r\n**brainzUI, componentes criados com React, Typescript and TailwindCSS**\r\n\r\n[ [Veja todos os componentes](#) ]\r\n\r\n
\r\n\r\n\r\n# Visão Geral\r\n\r\nEste repositório contém a biblioteca de componentes de interface desenvolvida em React e Tailwind CSS para uso em projetos Big Brain e Reeducation.\r\n\r\n🔗 [Layout no Figma](https://www.figma.com/design/YIj3EQubF2iKB3qqFY5wR0/Brainz-Group-Design-System?node-id=18-2&t=gLTYcvRfaaYvCHek-1)\r\n\r\n## 🎯 Objetivos\r\n\r\n1. **Padronização** – Garantir consistência visual nas interfaces da Brainz.\r\n2. **Abstração da camada visual** – Facilitar o desenvolvimento front-end, permitindo que os devs foquem na lógica de negócio.\r\n3. **Reutilização** – Componentes modulares e escaláveis para maior produtividade e manutenção simplificada.\r\n\r\n## 💿 Como instalar?\r\n\r\nMake sure you've installed TailwindCSS and daisyUI.\r\n\r\nInstale a biblioteca com npm ou yarn:\r\n\r\n```bash\r\nnpm install @brainz_group/brainz-ui\r\nou\r\nyarn add @brainz_group/brainz-ui\r\n```\r\n\r\nDentro de **src/App.tsx** faça a importação dos estilos da biblioteca.\r\n\r\n```js\r\nimport \"@brainz_group/brainz-ui/style.css\";\r\n```\r\n\r\n## ⚡ Como utilizar?\r\n\r\nImporte os componentes da brainzUI dentro de seus componentes:\r\n\r\n```js\r\nimport { Button } from \"@brainz_group/brainz-ui\";\r\n\r\nexport default (props) => {\r\n return ;\r\n};\r\n```\r\n\r\n## 🎨 Como personalizar?\r\n\r\n## Classes personalizadas\r\n\r\nVocê pode **customizar os componentes** de duas formas: \r\n\r\n1. Utilizando as classes utilitárias do **Tailwind CSS**. \r\n2. Passando classes personalizadas diretamente no atributo **className**. \r\n\r\nIsso garante flexibilidade para adaptar os estilos conforme as necessidades do seu projeto. \r\n\r\n## Cores personalizadas\r\n\r\nUtilizamos **variáveis CSS** para definir os estilos dos componentes, garantindo flexibilidade e fácil personalização.\r\n\r\nSe precisar alterar as cores do projeto, basta substituir os valores das variáveis CSS e acrescentar a propriedade **!important**, sem a necessidade de modificar os componentes diretamente.\r\n\r\n### Variáveis utilizadas\r\n\r\nAs variáveis CSS disponíveis para personalização são:\r\n\r\n```css\r\n:root {\r\n /* NEUTRAL */\r\n --app-neutral-50: #f7f7f7;\r\n --app-neutral-100: #e7e7e7;\r\n --app-neutral-200: #d7d7d7;\r\n --app-neutral-300: #c7c7c7;\r\n --app-neutral-400: #b7b7b7;\r\n --app-neutral-500: #a7a7a7;\r\n --app-neutral-600: #979797;\r\n --app-neutral-700: #777777;\r\n --app-neutral-800: #575757;\r\n --app-neutral-900: #373737;\r\n\r\n /* PRIMARY */\r\n --app-primary-100: #94e7f5;\r\n --app-primary-200: #72d9e8;\r\n --app-primary-500: #03bac6;\r\n --app-primary-600: #0297a9;\r\n --app-primary-700: #01778f;\r\n\r\n /* SECONDARY */\r\n --app-secondary-100: #fff1b9;\r\n --app-secondary-200: #fce79c;\r\n --app-secondary-500: #fecb37;\r\n --app-secondary-600: #e5a829;\r\n --app-secondary-700: #d6901a;\r\n\r\n /* TERTIARY */\r\n --app-tertiary-100: #f9b1a8;\r\n --app-tertiary-200: #f78d84;\r\n --app-tertiary-500: #e55b53;\r\n --app-tertiary-600: #d34741;\r\n --app-tertiary-700: #b9342f;\r\n\r\n /*ERROR*/\r\n --app-error-50: #fce9e5;\r\n --app-error-100: #f5b0a1;\r\n --app-error-200: #e91500;\r\n\r\n /*SUCCESS*/\r\n --app-success-50: #eef6eb;\r\n --app-success-100: #acd49f;\r\n --app-success-200: #24a31a;\r\n\r\n /*WARNING*/\r\n --app-warning-50: #fff8e6;\r\n --app-warning-100: #f9d69e;\r\n --app-warning-200: #ff9d0c;\r\n\r\n /*INFO*/\r\n --app-info-50: #edf1ff;\r\n --app-info-100: #9fc5fd;\r\n --app-info-200: #1f6afb;\r\n}\r\n```\r\n\r\n### Exemplo\r\nExemplo de paleta de cor personalizada para a cor **primary**:\r\n```css\r\n:root {\r\n --app-primary-100: #94f59c !important;\r\n --app-primary-200: #76e872 !important;\r\n --app-primary-500: #30c603 !important;\r\n --app-primary-600: #29a902 !important;\r\n --app-primary-700: #358f01 !important;\r\n}\r\n```\r\n\r\n## Tecnologias utilizadas\r\n\r\n- ⚛️ React 18\r\n- 📚 Storybook \r\n- ⛑ TypeScript\r\n- ⛑ Vite\r\n- 📏 Biome JS - Linter e Formatter\r\n- [TailwindCSS](https://tailwindcss.com/)\r\n\r\n---\r\n\r\nFeito com 💗 pelo [Time de Produto - Brainz Group](https://brainz.group/)\r\n","readmeFilename":"README.md"}