Beryl UI

Sistema de design robusto e profissional para aplicações React. Uma biblioteca completa de componentes reutilizáveis e bem-documentados.

Componentes   |    Começando   |    Desenvolvimento   |    Licença

Documentação: Visualize todos os componentes e sua documentação completa em nosso Storybook online.

✨ Componentes

Lista de componentes que foram desenvolvidos e estão prontos para uso:

• Avatar: Imagem de exibição com fallback.
• Button: Botão para ações diversas com variantes.
• Checkbox: Caixa de seleção.
• Heading: Título para seções.
• MultiStep: Indicador de progresso para formulários de múltiplos passos.
• Text: Componente para textos em geral.
• TextArea: Campo de texto de múltiplas linhas.
• TextInput: Campo de entrada de texto.

🚀 Começando

Para utilizar os componentes do beryl-ui em seu projeto, siga os passos abaixo.

Instalação

Você precisará instalar o pacote principal e suas dependências peer (react, react-dom e styled-components).

npm install @beryl-ui/react styled-components
# ou
yarn add @beryl-ui/react styled-components
# ou
pnpm add @beryl-ui/react styled-components

Configuração

Para que os componentes funcionem corretamente com o tema padrão, você precisa envolver sua aplicação com o ThemeProvider do styled-components.

// Em seu arquivo principal (ex: App.tsx)
import { globalStyles } from './styles/global'
import { ThemeProvider } from 'styled-components'
import { defaultTheme } from '@beryl-ui/react/styles' // Ajuste o caminho se necessário

globalStyles()

export function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      {/* ... seu código e rotas ... */}
    </ThemeProvider>
  )
}

💻 Desenvolvimento Local

Se você deseja contribuir para o projeto, siga estas instruções para configurar o ambiente de desenvolvimento.

1. Clone o repositório:

   git clone https://github.com/Robson16/beryl-ui.git
   cd beryl-ui

2. Instale as dependências: Este é um monorepo configurado com workspaces. Use o NPM para instalar as dependências de todos os pacotes.

   npm install

3. Execute o ambiente de desenvolvimento: Este projeto usa Turborepo para gerenciar os scripts do monorepo. Para iniciar o Storybook e os pacotes em modo de desenvolvimento, execute:

   npm run dev

   Este comando executará o script dev de todos os pacotes em paralelo, permitindo que você visualize os componentes no Storybook e faça alterações no código-fonte.

📝 Licença

Este projeto está sob a licença MIT. Veja o arquivo LICENSE.md para mais detalhes.