Karsten Design System

Uma biblioteca de componentes React estilizados para projetos da Karsten, construída sobre o PrimeReact.

Instalação

Com npm:

npm install karsten-design-system

Com yarn:

yarn add 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

Esta biblioteca requer as seguintes dependências:

• React 18 ou superior
• React DOM 18 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

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

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

Com yarn:

yarn

3. Execute o Storybook para desenvolvimento:

Com npm:

npm run storybook

Com yarn:

yarn storybook

Scripts Disponíveis

Com npm:

• 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

Com yarn:

• 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

Publicando uma Nova Versão no NPM

1. Atualizar a Versão

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

2. Fazer o Build

Com npm:

npm run build

Com yarn:

yarn build

3. Login no NPM

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

npm login

4. Publicar

npm publish --access public

Resolução de Problemas

Se você encontrar o erro "peer dependencies missing", instale as dependências necessárias:

Com npm:

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:

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

Licença

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