Karsten Design System

Biblioteca de componentes React estilizados para projetos da Karsten, construída sobre PrimeReact, Tailwind e Vite.

Instalação

Com npm:

npm install karsten-design-system

Configuração do PrimeReact

No main.tsx adicione:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";

import { PrimeReactProvider } from 'primereact/api'; // Adicione o PrimeReactProvider
import Tailwind from 'primereact/passthrough/tailwind'; // Importe o Tailwind
import './index.css';

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <PrimeReactProvider value={{ pt: Tailwind }}> {/* Envolva o app no Provider do PrimeReact */}
      <App />
    </PrimeReactProvider>
  </StrictMode>
);

Pré-requisitos

Dependências peer necessárias no projeto consumidor:

• React 19 ou superior
• React DOM 19 ou superior
• React Router DOM 7 ou superior

Dependências internas importantes (já empacotadas na lib):

• PrimeReact 10+
• PrimeIcons 7+
• Tailwind 3+
• Chart.js 4+
• clsx 2+
• PostCSS 8+ e Autoprefixer 10+

Como usar

1. Importe o componente desejado da biblioteca:

import { Button } from 'karsten-design-system'

2. Use o componente em seu projeto:

function App() {
  return <Button label="Clique aqui" />
}

Componentes Disponíveis

• Accordion - Seções expansíveis/colapsáveis de conteúdo.
• BasicHeader - Cabeçalho simples para páginas ou seções.
• Breadcrumb - Navegação hierárquica por páginas.
• Button - Botão com variantes de estilo.
• CalendarInput - Campo de data com calendário.
• Card - Contêiner estilizado para conteúdo.
• CardButton - Cartão clicável com ação.
• CardIconsButton - Cartão com ações por ícones.
• Charts - Gráficos usando Chart.js.
• Checkbox - Caixa de seleção.
• CountryDropdown - Seletor de país.
• Divider - Divisor visual de conteúdo.
• EmptyContent - Estado vazio para listas ou telas.
• ExpandablePanel - Painel expansível com conteúdo.
• FileUpload - Upload de arquivos.
• Header - Cabeçalho completo com ações.
• IconButton - Botão com ícone.
• InfoCard - Cartão informativo para destaque.
• Input - Campo de texto.
• InputSwitch - Toggle liga/desliga.
• InputTextArea - Área de texto multilinha.
• InternalMenu - Menu interno de navegação.
• LanguageDropdown - Seletor de idioma.
• Link - Link estilizado.
• MegaMenu - Menu expandido com múltiplas opções.
• Modal - Modal de conteúdo.
• ModalForm - Modal com formulário.
• Multiselect - Seleção múltipla de opções.
• NotificationsSidebar - Sidebar de notificações.
• Paginator - Paginação de listas.
• RadioButton - Seleção única entre opções.
• RightSidebar - Sidebar posicionada à direita.
• Select - Seletor de opções.
• SelectButton - Seleção por botões.
• Sidebar - Sidebar para navegação ou conteúdo.
• Skeleton - Placeholder de carregamento.
• Spinner - Indicador de carregamento.
• Table - Tabela de dados.
• Tabs - Navegação por abas.
• TagStatus - Tag de status.
• TextColor - Texto com variação de cor.
• Toast - Mensagens temporárias.
• Tooltip - Dica contextual.
• TransferList - Lista de transferência entre colunas.

Desenvolvimento

Para contribuir com o projeto:

1. Clone o repositório:

git clone https://github.com/KarstenSA/karsten-design-system.git

2. Instale as dependências:

Com npm:

npm install

3. Execute o Storybook para desenvolvimento:

Com npm:

npm run storybook

Comandos

• npm run dev - Inicia o Vite em modo desenvolvimento
• npm run storybook - Inicia o Storybook
• npm run build-storybook - Gera o build do Storybook
• npm run build - Gera o build da biblioteca (types + rollup)
• npm run lint - Lint do projeto
• npm run format - Formata o código
• npm run preview - Preview do build do Vite

Os scripts estão definidos em package.json.

Estrutura do projeto

• src/index.ts: ponto de exportação da biblioteca
• src/stories/components: componentes e stories do Storybook
• src/types: tipos compartilhados
• src/utils: utilitários
• src/assets: ícones, flags e assets gerais
• src/mock: mocks para exemplos

Como criar um componente

1. Crie o componente em src/stories/components seguindo o padrão existente:

• Arquivo do componente (ex.: src/stories/components/button.tsx)
• Story do componente (ex.: src/stories/components/button.stories.ts)

2. Exporte o componente no índice da lib em src/index.ts:

• export * from './stories/components/meuComponente'

3. Se necessário, crie tipos em src/types e utilitários em src/utils.

4. Execute o Storybook para validar o componente:

• npm run storybook

Padrão de implementação

• Baseie-se em componentes PrimeReact e aplique classes Tailwind.
• Use clsx para composição de classes.
• Exporte componentes e tipos de forma nomeada.
• Adicione argTypes e tags: ['autodocs'] no story para gerar docs automáticas.

Exemplos de referência:

• src/stories/components/button.tsx
• src/stories/components/button.stories.ts

Publicando uma Nova Versão no NPM

1. Atualize a versão no package.json

Antes de publicar, aumente a versão no package.json e package-lock.json.

2. Faça o build

Com npm:

npm run build

3. Login no NPM

Se ainda não estiver autenticado, faça login:

npm login

4. Publique

npm publish --access public

Resolução de Problemas

Se aparecer "peer dependencies missing", instale as dependências peer no projeto consumidor:

• React 19+
• React DOM 19+
• React Router DOM 7+

Licença

Este projeto está licenciado sob a licença MIT.