karsten-design-system 2.0.23 → 2.0.24

package/README.md

@@ -1,6 +1,6 @@
 # Karsten Design System
 
-Uma biblioteca de componentes React estilizados para projetos da Karsten, construída sobre o PrimeReact.
+Biblioteca de componentes React estilizados para projetos da Karsten, construída sobre PrimeReact, Tailwind e Vite.
 
 ## Instalação
 
@@ -10,12 +10,6 @@ Com npm:
 npm install karsten-design-system
 ```
 
-Com yarn:
-
-```bash
-yarn add karsten-design-system
-```
-
 ## Configuração do PrimeReact
 
 No main.tsx adicione:
@@ -41,20 +35,20 @@ createRoot(document.getElementById("root")!).render(
 
 ## Pré-requisitos
 
-Esta biblioteca requer as seguintes dependências:
+Dependências peer necessárias no projeto consumidor:
 
-- React 18 ou superior
-- React DOM 18 ou superior
+- React 19 ou superior
+- React DOM 19 ou superior
 - React Router DOM 7 ou superior
-- Tailwind 3.4.0 ou superior
-- @types/date-fns 2 ou superior
-- Chart.js 4 ou superior
-- clsx 2 ou superior
-- date-fns 1 ou superior
-- Primeicons 7 ou superior
-- Primereact 10 ou superior
-- Postcss 8 ou superior
-- Autoprefixer 10 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
 
@@ -74,31 +68,50 @@ function App() {
 
 ## Componentes Disponíveis
 
-- `Accordion` - Componente para exibir conteúdo em seções expansíveis e colapsáveis.
-- `AutoComplete` - Campo de entrada com sugestões automáticas baseadas no texto digitado.
-- `Breadcrumb` - Navegação hierárquica para indicar a localização atual do usuário.
-- `Button` - Botão estilizado com variantes primária e secundária.
-- `Card` - Contêiner estilizado para exibir informações agrupadas.
-- `Chart` - Gráficos para visualização de dados em diferentes formatos.
-- `DateInput` - Campo de entrada para seleção de datas.
-- `Dialog` - Modal para exibição de mensagens ou ações secundárias.
-- `Divider` - Linha divisória para separação visual de conteúdo.
-- `Header` - Cabeçalho estilizado para títulos ou menus.
-- `IconButton` - Botão com ícone, ideal para ações rápidas.
-- `InfoCard` - Cartão informativo para exibir alertas ou dados destacados.
-- `Input` - Campo de entrada para texto.
-- `InternalMenu` - Menu de navegação interna, útil para dashboards.
-- `Link` - Link estilizado para navegação.
-- `MegaMenu` - Menu expandido com múltiplas opções organizadas.
-- `Notification` - Notificação para exibir alertas e mensagens.
-- `Paginator` - Paginação para navegação em listas ou tabelas.
-- `RadioButton` - Botões de seleção única dentro de um grupo.
-- `Select` - Componente para seleção de opções em um menu suspenso.
-- `Sidebar` - Barra lateral para navegação ou exibição de conteúdo adicional.
-- `Skeleton` - Elementos de carregamento em estilo esqueleto.
-- `Spinner` - Indicador de carregamento animado.
-- `Table` - Tabela para exibição de dados estruturados.
-- `Toast` - Mensagens temporárias exibidas no canto da tela.
+- `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
 
@@ -118,12 +131,6 @@ Com npm:
 npm install
 ```
 
-Com yarn:
-
-```bash
-yarn
-```
-
 3. Execute o Storybook para desenvolvimento:
 
 Com npm:
@@ -132,33 +139,63 @@ Com npm:
 npm run storybook
 ```
 
-Com yarn:
+## Comandos
 
-```bash
-yarn storybook
-```
+- `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
 
-## Scripts Disponíveis
+Os scripts estão definidos em [package.json](package.json).
 
-Com npm:
+## Estrutura do projeto
+
+- [src/index.ts](src/index.ts): ponto de exportação da biblioteca
+- [src/stories/components](src/stories/components): componentes e stories do Storybook
+- [src/types](src/types): tipos compartilhados
+- [src/utils](src/utils): utilitários
+- [src/assets](src/assets): ícones, flags e assets gerais
+- [src/mock](src/mock): mocks para exemplos
+
+## Como criar um componente
+
+1. Crie o componente em [src/stories/components](src/stories/components) seguindo o padrão existente:
+
+- Arquivo do componente (ex.: [src/stories/components/button.tsx](src/stories/components/button.tsx))
+- Story do componente (ex.: [src/stories/components/button.stories.ts](src/stories/components/button.stories.ts))
+
+2. Exporte o componente no índice da lib em [src/index.ts](src/index.ts):
 
-- `npm run storybook` - Inicia o ambiente de desenvolvimento do Storybook
-- `npm run build-storybook` - Gera o build da biblioteca para hospedagem
-- `npm run build` - Gera o build da biblioteca para publicação no npm
+- `export * from './stories/components/meuComponente'`
 
-Com yarn:
+3. Se necessário, crie tipos em [src/types](src/types) e utilitários em [src/utils](src/utils).
 
-- `yarn storybook` - Inicia o ambiente de desenvolvimento do Storybook
-- `yarn build-storybook` - Gera o build do Storybook para hospedagem
-- `yarn build` - Gera o build da biblioteca para publicação no npm
+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.tsx)
+- [src/stories/components/button.stories.ts](src/stories/components/button.stories.ts)
 
 ## Publicando uma Nova Versão no NPM
 
-1. Atualizar a Versão
+1. Atualize a versão no [package.json](package.json)
 
 Antes de publicar, aumente a versão no `package.json` e `package-lock.json`.
 
-2. Fazer o Build
+2. Faça o build
 
 Com npm:
 
@@ -166,12 +203,6 @@ Com npm:
 npm run build
 ```
 
-Com yarn:
-
-```bash
-yarn build
-```
-
 3. Login no NPM
 
 Se ainda não estiver autenticado, faça login:
@@ -180,7 +211,7 @@ Se ainda não estiver autenticado, faça login:
 npm login
 ```
 
-4. Publicar
+4. Publique
 
 ```bash
 npm publish --access public
@@ -188,19 +219,11 @@ npm publish --access public
 
 ## Resolução de Problemas
 
-Se você encontrar o erro "peer dependencies missing", instale as dependências necessárias:
+Se aparecer "peer dependencies missing", instale as dependências peer no projeto consumidor:
 
-Com npm:
-
-```bash
-npm install react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
-```
-
-Com yarn:
-
-```bash
-yarn add react@^18 react-dom@^18 tailwindcss@^3.4.0 @types/date-fns@^2 chart.js@^4 clsx@^2 date-fns@^1 primeicons@^7 primereact@^10 postcss@^8 autoprefixer@^10
-```
+- React 19+
+- React DOM 19+
+- React Router DOM 7+
 
 ## Licença
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "karsten-design-system",
   "description": "Karsten Design System Components",
-  "version": "2.0.23",
+  "version": "2.0.24",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",