bigbets-ds
v1.1.16
Published
<h1 align="center"> <img alt="Alfabit Design System" title="#alfabit-ds" src="public/bigbets.png" height="150" /> </h1>
Downloads
375
Readme
O que é?
BigBets é 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.
👨💻 Como instalar?
# Utilizando npm
npm i bigbets-ds
# Utilizando yarn
yarn add bigbets-ds
🏃 Como usar?
A 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:
No mesmo arquivo que você importa as camadas do tailwind (geralmente o arquivo
globals.css
oustyles.css
) importe o arquivo CSS da biblioteca Bigbets tambémimport './globals.css' import 'bigbets-ds/styles/globals.css'
Dentro do arquivo de configuração do Tailwind, o
tailwind.config.js
, adicione as configurações da biblioteca bigbets comopreset
:const config = { presets: [ require('bigbets-ds/tailwind.config') ] // ... demais configurações ... }
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:const config = { content: [ './pages/**/*.{js,ts,jsx,tsx,mdx}', './components/**/*.{js,ts,jsx,tsx,mdx}', './app/**/*.{js,ts,jsx,tsx,mdx}', './node_modules/bigbets-ds/components/**/*.{js,ts,jsx,tsx,mdx}' ] // ... demais configurações ... }
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./** @type {import('next').NextConfig} */ const nextConfig = { transpilePackages: ["bigbets-ds"], }; module.exports = nextConfig;
E agora você pode usar os componentes da biblioteca em suas páginas:
"use client";
import { Typograph } from "bigbets-ds/components";
export default function Home() {
return (
<main className="flex min-h-screen flex-col items-center justify-center p-24 gap-5">
<div className="px-8 py-5 rounded-md flex flex-col gap-3 text-center text-gray-950 bg-gray-800">
<Typograph element="h3" size="title3" className="font-black text-white">
Olá mundo!
</Typograph>
</div>
</main>
);
}
🎨 Quais cores foram utilizadas no padrão da biblioteca?
Toda a identidade visual da biblioteca, como os componentes, espaçamentos e cores, você pode acessar no Figma clicando aqui neste link.
Confira também a documentação da biblioteca para mais detalhes de uso Documentação.
📚 Quais dependências são usadas nesta biblioteca?
- React
- Next.js
- TailwindCSS
- Storybook
- Class Variance Authority (cva)
- classnames
- HeadlessUI
- heroicons
- Chromatic
📝 Documentação
Para verificar a documentação click aqui
- Para Verificar a documentação em desenvolvimento faça
npm run storybook ou yarn storybook
Desenvolvedores/Contribuintes :octocat:
Esta é a equipe responsável pela criação desta biblioteca de componentes
| Luciano Guida |
Licença
The GNU General Public License (GPL)
Copyright :copyright: 2024 - bigbets Design System