\r\n\r\n## O que é?\r\nBigBets é uma plataforma dedicada a ajudar apostadores a testar suas estratégias esportivas, utilizando dados históricos para simular acertos e erros. Crie suas estratégias personalizadas e receba notificações de jogos futuros que atendam aos seus critérios, garantindo oportunidades de apostas eficientes e inteligentes.\r\n \r\n\r\n## 👨💻 Como instalar?\r\n\r\n```bash\r\n# Utilizando npm\r\nnpm i bigbets-ds\r\n\r\n# Utilizando yarn\r\nyarn add bigbets-ds\r\n```\r\n\r\n\r\n## 🏃 Como usar?\r\n\r\nA biblioteca Bigbets-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 Bigbets também\r\n \r\n ```tsx\r\n import './globals.css'\r\n import 'bigbets-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 bigbets como `preset`:\r\n \r\n ```tsx\r\n const config = {\r\n \tpresets: [\r\n \t\trequire('bigbets-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 bigbets para serem cobertas pelo Tailwind e processadas no PostCSS. Para isso, basta adicionar o caminho dos componentes da biblioteca bigbets 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/bigbets-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: [\"bigbets-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 \"bigbets-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/design/XrnN0d9PvsvOeoSiAh8tRo/BigBets?node-id=0-1&node-type=canvas&t=EQ1CYF5Q2JQ8PgJx-0).\r\n\r\n> Confira também a documentação da biblioteca para mais detalhes de uso [Documentação](https://bigbets-design-system.vercel.app/).\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://www.npmjs.com/package/tailwindcss)\r\n- [Storybook](https://www.npmjs.com/package/storybook)\r\n- [Class Variance Authority (cva)](https://www.npmjs.com/package/class-variance-authority)\r\n- [classnames](https://www.npmjs.com/package/classnames)\r\n- [HeadlessUI](https://www.npmjs.com/package/@headlessui/react)\r\n- [heroicons](https://www.npmjs.com/package/@heroicons/react)\r\n- [Chromatic](https://www.npmjs.com/package/chromatic)\r\n\r\n## 📝 Documentação\r\n\r\nPara verificar a documentação click [aqui](https://bigbets-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| [ Luciano Guida](https://github.com/lucianoguida1) |\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: 2024 - bigbets Design System\r\n","readmeFilename":"README.md"}
![\"Alfabit](\"public/bigbets.png\" "\\"#alfabit-ds\\"")
![](\"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/26747059?v=4\")