{"_id":"alfabit-ds","_rev":"4-8620a8717af7a71e2888a6e049352b6e","name":"alfabit-ds","dist-tags":{"latest":"1.1.0"},"versions":{"0.1.0":{"name":"alfabit-ds","version":"0.1.0","private":false,"scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"next lint","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@headlessui/react":"^1.7.15","@heroicons/react":"^2.0.18","@types/node":"20.2.1","@types/react":"18.2.6","@types/react-dom":"18.2.4","autoprefixer":"10.4.14","chromatic":"^6.22.0","class-variance-authority":"^0.6.0","classnames":"^2.3.2","eslint":"8.40.0","eslint-config-next":"13.4.3","next":"13.4.2","postcss":"8.4.23","react":"18.2.0","react-dom":"18.2.0","tailwindcss":"3.3.2","typescript":"5.0.4"},"devDependencies":{"@storybook/addon-essentials":"^7.3.1","@storybook/addon-interactions":"^7.3.1","@storybook/addon-links":"^7.3.1","@storybook/blocks":"^7.3.1","@storybook/manager-api":"^7.3.1","@storybook/nextjs":"^7.3.1","@storybook/react":"^7.3.1","@storybook/testing-library":"^0.2.0","@storybook/theming":"^7.3.1","eslint-plugin-storybook":"^0.6.13","storybook":"^7.3.1"},"description":"","main":"components/index.ts","author":{"name":"Alfabit"},"license":"ISC","_id":"alfabit-ds@0.1.0","gitHead":"39105ebabcb93cd727cc5708e68e3176bce7d433","_nodeVersion":"16.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-6YMVYwRmzX6ZFuIhLvv5t3pp1eKlckZCNk0a/6GYvaW/JOJ97Ib4GtHocfYU3RrMjy5z53HvXUEEClvlUhCwlQ==","shasum":"c67ab19f79a14eec8dc5a3774d2bee17d4fb139a","tarball":"https://registry.npmjs.org/alfabit-ds/-/alfabit-ds-0.1.0.tgz","fileCount":50,"unpackedSize":234441,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDbLXOrMPjtSGxBDZZIMJlK8wMK0miCx/itq1a943NT4wIgEZBwJXjyF1JGB6aLdOzGBvV6th2efimuEBragWiU2ZI="}]},"_npmUser":{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"},"directories":{},"maintainers":[{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alfabit-ds_0.1.0_1693850348621_0.9567973242289209"},"_hasShrinkwrap":false},"0.1.1":{"name":"alfabit-ds","version":"0.1.1","private":false,"scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"next lint","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@headlessui/react":"^1.7.15","@heroicons/react":"^2.0.18","@types/node":"20.2.1","@types/react":"18.2.6","@types/react-dom":"18.2.4","autoprefixer":"10.4.14","chromatic":"^6.22.0","class-variance-authority":"^0.6.0","classnames":"^2.3.2","eslint":"8.40.0","eslint-config-next":"13.4.3","next":"13.4.2","postcss":"8.4.23","react":"18.2.0","react-dom":"18.2.0","tailwindcss":"3.3.2","typescript":"5.0.4"},"devDependencies":{"@storybook/addon-essentials":"^7.3.1","@storybook/addon-interactions":"^7.3.1","@storybook/addon-links":"^7.3.1","@storybook/blocks":"^7.3.1","@storybook/manager-api":"^7.3.1","@storybook/nextjs":"^7.3.1","@storybook/react":"^7.3.1","@storybook/testing-library":"^0.2.0","@storybook/theming":"^7.3.1","eslint-plugin-storybook":"^0.6.13","storybook":"^7.3.1"},"description":"","main":"components/index.ts","author":{"name":"Alfabit"},"license":"ISC","_id":"alfabit-ds@0.1.1","gitHead":"f5522e312874ef8598dcbe1b0e2c7ca5283e3ae6","_nodeVersion":"16.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-23sd+B9P3oDMJ46abNRPgsT8i+PpalnCy2Zm3OxZ2PBNDvB5hKGwDRHlRLBrDNk2zx8ki7wlC5hmbuo5wr/02w==","shasum":"49cbdbee758bff560753ffb86dd621cc785df536","tarball":"https://registry.npmjs.org/alfabit-ds/-/alfabit-ds-0.1.1.tgz","fileCount":50,"unpackedSize":234487,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIFLIBytBjSqOLTCmDFEnj4BVhAfHmONjjFEjMJn2pcJ/AiEAm1txEMlzr5XM/rmbxeoUsrfUBca9B792lBWq5PNZE/c="}]},"_npmUser":{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"},"directories":{},"maintainers":[{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alfabit-ds_0.1.1_1693937008521_0.3856472040448178"},"_hasShrinkwrap":false},"1.0.0":{"name":"alfabit-ds","version":"1.0.0","private":false,"scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"next lint","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@headlessui/react":"^1.7.15","@heroicons/react":"^2.0.18","@types/node":"20.2.1","@types/react":"18.2.6","@types/react-dom":"18.2.4","autoprefixer":"10.4.14","chromatic":"^6.22.0","class-variance-authority":"^0.6.0","classnames":"^2.3.2","eslint":"8.40.0","eslint-config-next":"13.4.3","next":"13.4.2","postcss":"8.4.23","react":"18.2.0","react-dom":"18.2.0","tailwindcss":"3.3.2","typescript":"5.0.4"},"devDependencies":{"@storybook/addon-essentials":"^7.3.1","@storybook/addon-interactions":"^7.3.1","@storybook/addon-links":"^7.3.1","@storybook/blocks":"^7.3.1","@storybook/manager-api":"^7.3.1","@storybook/nextjs":"^7.3.1","@storybook/react":"^7.3.1","@storybook/testing-library":"^0.2.0","@storybook/theming":"^7.3.1","eslint-plugin-storybook":"^0.6.13","storybook":"^7.3.1"},"_id":"alfabit-ds@1.0.0","gitHead":"530f208ce4382f015462a58a21404bff6c4dfbf9","description":"
","_nodeVersion":"16.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-1PadHYPNy3uN9oZlPePthihZgFrsaDIsHVTn1LzTmCV7apNLk/VMosCjSnZP81YX+ccJOCeG/n7T12g/DeEdFQ==","shasum":"06e9aefa89951bcf96fa1697abb231129bf03223","tarball":"https://registry.npmjs.org/alfabit-ds/-/alfabit-ds-1.0.0.tgz","fileCount":225,"unpackedSize":12389393,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIC5CKOs4Fs1KcwI8fyfgu15bdZGAR88xfA7th2sPsc8DAiBNXJEqlGTwvkyuQAmRm5DIVNgP/IQgH7wv3LQIW5AjhQ=="}]},"_npmUser":{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"},"directories":{},"maintainers":[{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alfabit-ds_1.0.0_1694190689073_0.12176575542434809"},"_hasShrinkwrap":false},"1.0.1":{"name":"alfabit-ds","version":"1.0.1","private":false,"scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"next lint","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@headlessui/react":"^1.7.15","@heroicons/react":"^2.0.18","@types/node":"20.2.1","@types/react":"18.2.6","@types/react-dom":"18.2.4","autoprefixer":"10.4.14","chromatic":"^6.22.0","class-variance-authority":"^0.6.0","classnames":"^2.3.2","eslint":"8.40.0","eslint-config-next":"13.4.3","next":"13.4.2","postcss":"8.4.23","react":"18.2.0","react-dom":"18.2.0","tailwindcss":"3.3.2","typescript":"5.0.4"},"devDependencies":{"@storybook/addon-essentials":"^7.3.1","@storybook/addon-interactions":"^7.3.1","@storybook/addon-links":"^7.3.1","@storybook/blocks":"^7.3.1","@storybook/manager-api":"^7.3.1","@storybook/nextjs":"^7.3.1","@storybook/react":"^7.3.1","@storybook/testing-library":"^0.2.0","@storybook/theming":"^7.3.1","eslint-plugin-storybook":"^0.6.13","storybook":"^7.3.1"},"_id":"alfabit-ds@1.0.1","gitHead":"74048993f7392bde55515112c69e44044ac4b834","description":"
\r \r
","_nodeVersion":"16.17.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-b3qaFO/PZb3V9/ywz9gqN5KFlieHbsqHnAikuyfK/JiI74zG4Wx/+tIZDQZEi3mopfmmI1+eoRsm2eQ2sIWVfg==","shasum":"b8ff5d4c9d35222298703db651a66a5a1ac35a94","tarball":"https://registry.npmjs.org/alfabit-ds/-/alfabit-ds-1.0.1.tgz","fileCount":225,"unpackedSize":12389437,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQChMB4Wv3R5yCBFpRBHTzXc8xCf/i72t54Xy4z8E6+DfAIgbXPme2E9XevaY/5DKmJ9NBGL+HkhWmTc33dGb+Rq9Mw="}]},"_npmUser":{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"},"directories":{},"maintainers":[{"name":"neilton_seguins","email":"seguins.neilton@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/alfabit-ds_1.0.1_1694195771865_0.7212174537767266"},"_hasShrinkwrap":false},"1.1.0":{"name":"alfabit-ds","version":"1.1.0","private":false,"scripts":{"dev":"next dev","build":"next build","start":"next start","lint":"next lint","storybook":"storybook dev -p 6006","build-storybook":"storybook build"},"dependencies":{"@headlessui/react":"^1.7.15","@heroicons/react":"^2.0.18","@types/node":"20.2.1","@types/react":"18.2.6","@types/react-dom":"18.2.4","autoprefixer":"10.4.14","chromatic":"^6.22.0","class-variance-authority":"^0.6.0","classnames":"^2.3.2","eslint":"8.40.0","eslint-config-next":"13.4.3","next":"13.4.2","postcss":"8.4.23","react":"18.2.0","react-dom":"18.2.0","tailwindcss":"3.3.2","typescript":"5.0.4"},"devDependencies":{"@storybook/addon-essentials":"^7.3.1","@storybook/addon-interactions":"^7.3.1","@storybook/addon-links":"^7.3.1","@storybook/blocks":"^7.3.1","@storybook/manager-api":"^7.3.1","@storybook/nextjs":"^7.3.1","@storybook/react":"^7.3.1","@storybook/testing-library":"^0.2.0","@storybook/theming":"^7.3.1","eslint-plugin-storybook":"^0.6.13","storybook":"^7.3.1"},"_id":"alfabit-ds@1.1.0","gitHead":"5227fecc574077db0ff85a9b995a92fcae45fc08","description":"
\r\n\r\n## O que é?\r\n A Alfabit é uma empresa de tecnologia inovadora dedicada a fornecer soluções criativas e eficientes para seus clientes. Reconhecendo a importância do design consistente e intuitivo em todas as suas plataformas e produtos, a Alfabit decidiu investir em um design system de ponta.\r\n \r\n\r\n## 👨💻 Como instalar?\r\n\r\n```bash\r\n# Utilizando npm\r\nnpm i alfabit-ds\r\n\r\n# Utilizando yarn\r\nyarn add alfabit-ds\r\n```\r\n\r\n\r\n## 🏃 Como usar?\r\n\r\nA biblioteca Alfabit-ds foi criada para funcionar em aplicações Next.js+TailwindCSS. Portanto, para usá-la lembre-se de criar suas aplicações com essa estrutura. Para que você consiga usar todos os componentes da biblioteca sem problemas é necessário uma configuração adicional no seu projeto. Vamos fazer isso passo a passo: \r\n\r\n \r\n1. No mesmo arquivo que você importa as camadas do tailwind (geralmente o arquivo `globals.css` ou `styles.css` ) importe o arquivo CSS da biblioteca Alfabit também\r\n \r\n ```tsx\r\n import './globals.css'\r\n import 'alfabit-ds/styles/globals.css'\r\n ```\r\n \r\n2. Dentro do arquivo de configuração do Tailwind, o `tailwind.config.js`, adicione as configurações da biblioteca Alfabit como `preset`:\r\n \r\n ```tsx\r\n const config = {\r\n \tpresets: [\r\n \t\trequire('alfabit-ds/tailwind.config')\r\n \t]\r\n \t// ... demais configurações ...\r\n }\r\n ```\r\n \r\n3. Adicione no mesmo arquivo de configuração a referência dos arquivos da biblioteca Alfabit para serem cobertas pelo Tailwind e processadas no PostCSS. Para isso, basta adicionar o caminho dos componentes da biblioteca Alfabit dentro da propriedade `content`, no mesmo arquivo de configuração do tailwind do passo anterior:\r\n \r\n ```tsx\r\n const config = {\r\n \tcontent: [\r\n './pages/**/*.{js,ts,jsx,tsx,mdx}',\r\n './components/**/*.{js,ts,jsx,tsx,mdx}',\r\n './app/**/*.{js,ts,jsx,tsx,mdx}',\r\n './node_modules/alfabit-ds/components/**/*.{js,ts,jsx,tsx,mdx}'\r\n ]\r\n \t// ... demais configurações ...\r\n }\r\n ```\r\n \r\n4. Configure o transpile do Next.js no arquivo `next.config.js`. Na nova versão do Next 13 temos um recurso que vai ajudar a transpilar a nossa biblioteca. Sem isso vamos ficar recebendo sucessivos erros de compilação porque o Next não vai entender nossa biblioteca.\r\n \r\n ```jsx\r\n /** @type {import('next').NextConfig} */\r\n const nextConfig = {\r\n transpilePackages: [\"alfabit-ds\"],\r\n };\r\n \r\n module.exports = nextConfig;\r\n ```\r\nE agora você pode usar os componentes da biblioteca em suas páginas:\r\n\r\n```tsx\r\n\"use client\";\r\nimport { Typograph } from \"alfabit-ds/components\";\r\n\r\nexport default function Home() {\r\n return (\r\n \r\n
\r\n \r\n Olá mundo!\r\n \r\n
\r\n \r\n );\r\n}\r\n```\r\n\r\n\r\n## 🎨 Quais cores foram utilizadas no padrão da biblioteca?\r\n\r\nToda a identidade visual da biblioteca, como os componentes, espaçamentos e cores, você pode acessar no [Figma clicando aqui neste link](https://www.figma.com/file/h86gUvqUXTKwgr6tVYinLT/React%3A-Design-System-com-Tailwind?type=design&node-id=0-1&t=GuaFV9cp30SS2di9-0).\r\n\r\n> Confira também a documentação da biblioteca para mais detalhes de uso [Documentação](https://alfabit-ds.vercel.app/?path=/docs/design-tokens-colors--docs).\r\n\r\n## 📚 Quais dependências são usadas nesta biblioteca?\r\n- [React](https://reactjs.org/)\r\n- [Next.js](https://nextjs.org/)\r\n- [TailwindCSS](https://tailwindcss.com/)\r\n- [Storybook](https://storybook.js.org/docs/react/get-started/introduction)\r\n- [Class Variance Authority (cva)](https://cva.style/docs)\r\n- [classnames](https://github.com/JedWatson/classnames)\r\n- [HeadlessUI](https://headlessui.com/)\r\n- [heroicons](https://heroicons.com/)\r\n- [Chromatic](https://www.chromatic.com/)\r\n\r\n## 📝 Documentação\r\n\r\nPara verificar a documentação click [aqui](https://alfabit-ds.vercel.app/?path=/docs/design-tokens-colors--docs)\r\n\r\n- Para Verificar a documentação em desenvolvimento faça\r\n \r\n```bash\r\nnpm run storybook ou yarn storybook\r\n```\r\n\r\n## Desenvolvedores/Contribuintes :octocat:\r\n\r\nEsta é a equipe responsável pela criação desta biblioteca de componentes\r\n\r\n| [ Neilton Seguins](https://github.com/NeiltonSeguins) | [ Vinicius Cardozo](https://github.com/cardozov) |\r\n| :---: | :---: \r\n\r\n## Licença \r\n\r\nThe [GNU General Public License](https://www.gnu.org/licenses/gpl-3.0.html) (GPL)\r\n\r\nCopyright :copyright: 2023 - Alfabit Design System\r\n","readmeFilename":"README.md"}
![\"Alfabit](\"public/logo-alfabit-branco.png\" "\\"#alfabit-ds\\""){kind=logo}
![\"Repository](\"https://img.shields.io/github/repo-size/NeiltonSeguins/alfabit-design-system-project?color=4e5acf\")
![\"Last](\"https://img.shields.io/github/last-commit/NeiltonSeguins/alfabit-ds-pkg?color=4e5acf\")
![\"License\"](\"https://img.shields.io/badge/license-MIT-4e5acf\"){kind=icon}
![](\"https://img.shields.io/static/v1?color=blue&label=Typescript&message=TS&?style=plastic&logo=Typescript\")
![\"ReactJS\"](\"https://img.shields.io/static/v1?color=blue&label=React&message=JS&?style=plastic&logo=React\")
![\"Next.js\"](\"https://img.shields.io/static/v1?color=blue&label=Next&message=JS&?style=plastic&logo=Next.js\")
![](\"https://img.shields.io/static/v1?color=red&label=Storybook&message=SB&?style=plastic&logo=Storybook\")
![](\"https://img.shields.io/static/v1?color=blue&label=Tailwind&message=CSS&?style=plastic&logo=TailwindCSS\")
![](\"https://img.shields.io/static/v1?color=red&label=Figma&message=)
![](\"https://avatars.githubusercontent.com/u/77410403?v=4\")
![](\"https://github.com/cardozov.png\")