@barfacil/barfacil-ui v0.0.28
Bar Fácil - Design System
Este projeto é uma biblioteca de componentes desenvolvida utilizando Storybook e Vite, com o objetivo de padronizar e reaproveitar componentes em todos os projetos da Bar Fácil. A biblioteca visa oferecer um conjunto de componentes reutilizáveis, estilizados com Tailwind CSS, que seguem as diretrizes de design da empresa.
Objetivo
A criação desta biblioteca tem como principal motivação a necessidade de reaproveitar componentes e manter um padrão consistente nos projetos da Bar Fácil. Com ela, podemos garantir que todos os produtos da empresa compartilhem a mesma linguagem visual, facilitando a manutenção e a evolução dos projetos.
Tecnologias Utilizadas
- Storybook: Ferramenta utilizada para documentar e visualizar os componentes de forma isolada, permitindo testes e desenvolvimento ágil.
- Vite: Ferramenta de build rápida e eficiente, utilizada para o bundling e desenvolvimento do projeto.
- Tailwind CSS: Framework de utilitários CSS utilizado para estilizar os componentes, adotando um padrão de design consistente.
- Shadcn/ui: Biblioteca de componentes React estilizados com Tailwind CSS, permitindo a criação de interfaces consistentes e personalizáveis de forma rápida e eficiente.
- Roboto: Fonte padrão utilizada em todos os componentes, garantindo uma tipografia limpa e moderna.
- Lucide Icons: Biblioteca de ícones utilizada para garantir consistência e familiaridade na interface dos produtos.
Estilização
A estilização dos componentes é baseada no Tailwind CSS, utilizando suas utilidades para definir espaçamento, fontes, e outros estilos. As cores também são reaproveitadas do Tailwind, mas com algumas cores personalizadas que seguem a paleta da Bar Fácil, especificadas em docs/colors
dentro do Storybook.
Paleta de Cores
A paleta de cores personalizada foi criada para refletir a identidade visual da Bar Fácil. As cores estão documentadas e disponíveis para consulta em docs/colors
no Storybook. Elas devem ser utilizadas para garantir a consistência visual em todos os projetos da empresa.
Tipografia
- Fonte: A fonte padrão utilizada é a Roboto, escolhida por sua legibilidade e popularidade em interfaces modernas.
- Ícones: Para ícones, deve-se utilizar a biblioteca Material Icons, que é amplamente suportada e bem documentada.
Estrutura do Projeto
O projeto está estruturado da seguinte maneira:
- src/components/ui/: Contém os componentes da biblioteca.
- src/stories/: Documentação dos componentes.
- .storybook/: Configurações do Storybook.
- vite.config.js: Configuração do Vite para build e desenvolvimento.
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago