karsten-design-system 1.0.0 → 1.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -1,50 +1,141 @@
1
- # React + TypeScript + Vite
2
-
3
- This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
4
-
5
- Currently, two official plugins are available:
6
-
7
- - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
8
- - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
9
-
10
- ## Expanding the ESLint configuration
11
-
12
- If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
13
-
14
- - Configure the top-level `parserOptions` property like this:
15
-
16
- ```js
17
- export default tseslint.config({
18
- languageOptions: {
19
- // other options...
20
- parserOptions: {
21
- project: ['./tsconfig.node.json', './tsconfig.app.json'],
22
- tsconfigRootDir: import.meta.dirname,
23
- },
24
- },
25
- })
26
- ```
27
-
28
- - Replace `tseslint.configs.recommended` to `tseslint.configs.recommendedTypeChecked` or `tseslint.configs.strictTypeChecked`
29
- - Optionally add `...tseslint.configs.stylisticTypeChecked`
30
- - Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and update the config:
31
-
32
- ```js
33
- // eslint.config.js
34
- import react from 'eslint-plugin-react'
35
-
36
- export default tseslint.config({
37
- // Set the react version
38
- settings: { react: { version: '18.3' } },
39
- plugins: {
40
- // Add the react plugin
41
- react,
42
- },
43
- rules: {
44
- // other rules...
45
- // Enable its recommended rules
46
- ...react.configs.recommended.rules,
47
- ...react.configs['jsx-runtime'].rules,
48
- },
49
- })
1
+ # Karsten Design System
2
+
3
+ Uma biblioteca de componentes React estilizados para projetos da Karsten, construída sobre o PrimeReact.
4
+
5
+ ## Instalação
6
+
7
+ Com npm:
8
+ ```bash
9
+ npm install karsten-design-system
10
+ ```
11
+
12
+ Com yarn:
13
+ ```bash
14
+ yarn add karsten-design-system
15
+ ```
16
+
17
+ ## Pré-requisitos
18
+
19
+ Esta biblioteca requer as seguintes dependências:
20
+
21
+ - React 18 ou superior
22
+ - PrimeReact 10 ou superior
23
+ - React DOM 18 ou superior
24
+
25
+ ## Como usar
26
+
27
+ 1. Importe o componente desejado da biblioteca:
28
+
29
+ ```jsx
30
+ import { Button } from 'karsten-design-system';
31
+ ```
32
+
33
+ 2. Use o componente em seu projeto:
34
+
35
+ ```jsx
36
+ function App() {
37
+ return (
38
+ <Button label="Clique aqui" />
39
+ );
40
+ }
41
+ ```
42
+
43
+ ## Componentes Disponíveis
44
+
45
+ [Liste aqui os componentes disponíveis na sua biblioteca com uma breve descrição de cada um]
46
+
47
+ Por exemplo:
48
+
49
+ - `Accordion` - Componente para exibir conteúdo em seções expansíveis e colapsáveis.
50
+ - `AutoComplete` - Campo de entrada com sugestões automáticas baseadas no texto digitado.
51
+ - `Breadcrumb` - Navegação hierárquica para indicar a localização atual do usuário.
52
+ - `Button` - Botão estilizado com variantes primária e secundária.
53
+ - `Card` - Contêiner estilizado para exibir informações agrupadas.
54
+ - `Chart` - Gráficos para visualização de dados em diferentes formatos.
55
+ - `DateInput` - Campo de entrada para seleção de datas.
56
+ - `Dialog` - Modal para exibição de mensagens ou ações secundárias.
57
+ - `Divider` - Linha divisória para separação visual de conteúdo.
58
+ - `FilterButton` - Botão para aplicar ou remover filtros em listas ou tabelas.
59
+ - `Header` - Cabeçalho estilizado para títulos ou menus.
60
+ - `IconButton` - Botão com ícone, ideal para ações rápidas.
61
+ - `InfoCard` - Cartão informativo para exibir alertas ou dados destacados.
62
+ - `Input` - Campo de entrada para texto.
63
+ - `InternalMenu` - Menu de navegação interna, útil para dashboards.
64
+ - `Link` - Link estilizado para navegação.
65
+ - `MegaMenu` - Menu expandido com múltiplas opções organizadas.
66
+ - `Notification` - Notificação para exibir alertas e mensagens.
67
+ - `Paginator` - Paginação para navegação em listas ou tabelas.
68
+ - `RadioButton` - Botões de seleção única dentro de um grupo.
69
+ - `Select` - Componente para seleção de opções em um menu suspenso.
70
+ - `Sidebar` - Barra lateral para navegação ou exibição de conteúdo adicional.
71
+ - `Skeleton` - Elementos de carregamento em estilo esqueleto.
72
+ - `Spinner` - Indicador de carregamento animado.
73
+ - `Table` - Tabela para exibição de dados estruturados.
74
+ - `Toast` - Mensagens temporárias exibidas no canto da tela.
75
+
76
+
77
+ ## Documentação
78
+
79
+ Para uma documentação completa e exemplos, visite nosso [Storybook](link-do-seu-storybook).
80
+
81
+ ## Desenvolvimento
82
+
83
+ Para contribuir com o projeto:
84
+
85
+ 1. Clone o repositório
86
+ ```bash
87
+ git clone https://github.com/3035tech/karsten-design-system
88
+ ```
89
+
90
+ 2. Instale as dependências
91
+
92
+ Com npm:
93
+ ```bash
94
+ npm install
95
+ ```
96
+
97
+ Com yarn:
98
+ ```bash
99
+ yarn
100
+ ```
101
+
102
+ 3. Execute o Storybook para desenvolvimento
103
+
104
+ Com npm:
105
+ ```bash
106
+ npm run storybook
107
+ ```
108
+
109
+ Com yarn:
110
+ ```bash
111
+ yarn storybook
112
+ ```
113
+
114
+ ## Scripts Disponíveis
115
+
116
+ Com npm:
117
+ - `npm run storybook` - Inicia o ambiente de desenvolvimento do Storybook
118
+ - `npm run build` - Gera o build da biblioteca
119
+
120
+ Com yarn:
121
+ - `yarn storybook` - Inicia o ambiente de desenvolvimento do Storybook
122
+ - `yarn build` - Gera o build da biblioteca
123
+
124
+
125
+ ## Suporte
126
+
127
+ Para suporte, entre em contato com 3035tech@3035tech.com.br.
128
+
129
+ ## Resolução de Problemas
130
+
131
+ Se você encontrar o erro "peer dependencies missing", instale as dependências necessárias:
132
+
133
+ Com npm:
134
+ ```bash
135
+ npm install react react-dom primereact
136
+ ```
137
+
138
+ Com yarn:
139
+ ```bash
140
+ yarn add react react-dom primereact
50
141
  ```
@@ -1,2 +1,2 @@
1
- import { InternalMenuItems as Type } from "../types/internalMenu";
1
+ import { InternalMenuItems as Type } from '../types/internalMenu';
2
2
  export declare const InternalMenuItems: Type[];
@@ -3,6 +3,8 @@ type InfoCardProps = {
3
3
  title: string;
4
4
  children: ReactNode;
5
5
  icon?: ReactNode;
6
+ className?: string;
7
+ titleClassName?: string;
6
8
  };
7
- export default function InfoCard({ title, children, icon }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
9
+ export default function InfoCard({ title, children, icon, className, titleClassName, }: InfoCardProps): import("react/jsx-runtime").JSX.Element;
8
10
  export {};
@@ -0,0 +1 @@
1
+ export default function AccountsPayable(): import("react/jsx-runtime").JSX.Element;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "karsten-design-system",
3
3
  "description": "Kasrten Design System Components",
4
- "version": "1.0.0",
4
+ "version": "1.0.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.esm.js",
7
7
  "types": "dist/index.d.ts",
@@ -23,11 +23,9 @@
23
23
  "publishConfig": {
24
24
  "access": "public"
25
25
  },
26
- "peerDependencies": {
27
- "react": "^18.3.1",
28
- "react-dom": "^18.3.1"
29
- },
30
26
  "dependencies": {
27
+ "react": "^18.3.1",
28
+ "react-dom": "^18.3.1",
31
29
  "@types/date-fns": "^2.6.3",
32
30
  "chart.js": "^4.4.7",
33
31
  "clsx": "^2.1.1",