0.0.28 • Published 9 months ago

@barfacil/barfacil-ui v0.0.28

Weekly downloads
-
License
MIT
Repository
-
Last release
9 months ago

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.