Grapa UI

Uma biblioteca completa de componentes React e pacote de utilitários compartilhados utilizado em todo o ecossistema digital da Grapa. Construído com Vite, React, TypeScript, Tailwind CSS v4 e shadcn/ui.

📦 Funcionalidades

• 🎨 Biblioteca de Componentes: Baseada no shadcn/ui e @base-ui/react, utilizando design tokens customizados do pacote @grapadigital/design-tokens.
• 🛠️ Utilitários Compartilhados: Fornece hooks, utilitários (utils), constantes e gerenciadores de eventos em comum.
• 📐 Interfaces: Definições TypeScript compartilhadas (ex: action, client, project, user, commission, etc.) para garantir a consistência de tipagem em todo o projeto.
• 📘 Storybook: Ambiente para desenvolvimento e testes interativos de componentes da interface.
• 🌙 Temas (Theming): Integração com next-themes para suporte a modo claro e escuro.

🏗️ Estrutura

• src/components/ - Componentes de interface reutilizáveis (campos, ícones, selects, interface principal).
• src/hooks/ - Hooks customizados do React compartilhados.
• src/utils/ - Funções utilitárias e ajudantes genéricos.
• src/interfaces/ - Definições de tipos e modelos de domínio em TypeScript.
• src/pages/ - Componentes de páginas compostas ou compartilhadas.
• src/providers/ - Provedores de contexto (Context API).
• src/configs/ - Configurações compartilhadas.
• src/events/ - Lógica para manipulação de eventos.

🚀 Começando

Instalação

Se você estiver utilizando este pacote dentro de um monorepo, ele deverá ser linkado automaticamente através do seu gerenciador de pacotes (pnpm).

pnpm install

Scripts Disponíveis

• pnpm run dev - Inicia o servidor de desenvolvimento do Vite
• pnpm run build - Faz a checagem de tipos e o build da biblioteca para produção
• pnpm run lint - Executa o ESLint para analisar problemas no código
• pnpm run format - Formata o código utilizando o Prettier
• pnpm run typecheck - Executa a verificação de tipos do TypeScript
• pnpm run storybook - Inicia o servidor de desenvolvimento do Storybook na porta 6006
• pnpm run build-storybook - Faz o build do Storybook para deploy
• pnpm run shadcn:add - Adiciona um novo componente do shadcn/ui
• pnpm run lib:publish - Realiza o build e publica a biblioteca

🛠️ Uso

Importando Componentes

Você pode importar componentes diretamente das exportações do pacote (definidas no package.json):

import { Button } from "@grapadigital/ui/components";

Importando Interfaces

import type { User } from "@grapadigital/ui/interfaces/user";
import type { Project } from "@grapadigital/ui/interfaces/project";

🎨 Tecnologias Utilizadas

• React 19
• Vite 8
• Tailwind CSS v4
• TypeScript
• shadcn/ui
• Storybook
• React Query 5
• React Hook Form