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.