karsten-design-system v1.0.34
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
- Importe o componente desejado da biblioteca:
import { Button } from 'karsten-design-system';
- 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.FilterButton
- Botão para aplicar ou remover filtros em listas ou tabelas.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:
- Clone o repositório:
git clone https://github.com/KarstenSA/karsten-design-system.git
- Instale as dependências:
Com npm:
npm install
Com yarn:
yarn
- 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 Storybooknpm run build-storybook
- Gera o build da biblioteca para hospedagemnpm run build
- Gera o build da biblioteca para publicação no npm
Com yarn:
yarn storybook
- Inicia o ambiente de desenvolvimento do Storybookyarn build-storybook
- Gera o build do Storybook para hospedagemyarn build
- Gera o build da biblioteca para publicação no npm
Publicando uma Nova Versão no NPM
- Atualizar a Versão
Antes de publicar, aumente a versão no package.json
e package-lock.json
.
- Fazer o Build
Com npm:
npm run build
Com yarn:
yarn build
- Login no NPM
Se ainda não estiver autenticado, faça login:
npm login
- 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.
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago