@grapadigital/ui

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