Karsten Design System

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

Instalação

Com npm:

``bash
npm install karsten-design-system
`

Configuração do PrimeReact

No main.tsx adicione:

`js
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(

{/ Envolva o app no Provider do PrimeReact /}



);
`

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:

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

2. Use o componente em seu projeto:

`jsx
function App() {
return
}
`

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:

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

2. Instale as dependências:

Com npm:

`bash
npm install
`

3. Execute o Storybook para desenvolvimento:

Com npm:

`bash
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

$3

- 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:

`bash
npm run build
`

3. Login no NPM

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

`bash
npm login
`

4. Publique

`bash
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.