norma-library 0.0.9 → 0.1.0
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 +78 -19
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,27 +1,86 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Como usar um pacote Norma Library
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
O npm (Node Package Manager) é um gerenciador de pacotes para o ambiente Node.js, permitindo que você instale e gerencie bibliotecas e pacotes em seus projetos. Neste guia, você aprenderá como usar um pacote Norma Library em seu projeto.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
Repository GitHub [Norma LIbrary](https://github.com/OlosLive/norma-libraryp).
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
7
|
+
## Passos Básicos
|
|
9
8
|
|
|
10
|
-
|
|
9
|
+
### 1. Instalando o pacote em seu projeto
|
|
11
10
|
|
|
12
|
-
|
|
11
|
+
Para instalar o pacote Norma em seu projeto execute o comando em seu terminal:
|
|
13
12
|
|
|
14
|
-
|
|
13
|
+
### `npm install norma-library`
|
|
15
14
|
|
|
16
|
-
|
|
17
|
-
parserOptions: {
|
|
18
|
-
ecmaVersion: 'latest',
|
|
19
|
-
sourceType: 'module',
|
|
20
|
-
project: ['./tsconfig.json', './tsconfig.node.json'],
|
|
21
|
-
tsconfigRootDir: __dirname,
|
|
22
|
-
},
|
|
23
|
-
```
|
|
15
|
+
## Components disponível e como usa-lo
|
|
24
16
|
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
### Button
|
|
18
|
+
|
|
19
|
+
`import { Button } from "norma-library`;
|
|
20
|
+
|
|
21
|
+
`<Button label="Clique-me" onClick={handleButtonClick} />`;
|
|
22
|
+
|
|
23
|
+
#### Props
|
|
24
|
+
|
|
25
|
+
O componente `Button` aceita as seguintes propriedades:
|
|
26
|
+
|
|
27
|
+
- `label` (string, obrigatório): O texto exibido no botão.
|
|
28
|
+
- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
|
|
29
|
+
- `color` (string): A cor do botão (inherit, primary, secondary, success, error, info, warning).
|
|
30
|
+
- `size` (string): O tamanho do botão (small, medium, large).
|
|
31
|
+
- `variant` (string): A variante do botão (text, outlined, contained).
|
|
32
|
+
- `style` (React.CSSProperties): Estilos CSS adicionais.
|
|
33
|
+
- `children` (ReactNode): Conteúdo adicional a ser exibido dentro do botão.
|
|
34
|
+
- `onClick` (função): Uma função de callback para ser executada quando o botão for clicado.
|
|
35
|
+
|
|
36
|
+
### Card
|
|
37
|
+
|
|
38
|
+
`import { Card } from "norma-library`;
|
|
39
|
+
|
|
40
|
+
`<Card title="Titulo do cartão" />conteúdo do card</card>`;
|
|
41
|
+
|
|
42
|
+
#### Props
|
|
43
|
+
|
|
44
|
+
O componente `Card` aceita as seguintes propriedades:
|
|
45
|
+
|
|
46
|
+
- `title` (string, opcional): O título exibido no cabeçalho do card, se fornecido.
|
|
47
|
+
- `children` (ReactNode, obrigatório): O conteúdo do card, que pode incluir qualquer componente ou conteúdo.
|
|
48
|
+
|
|
49
|
+
### Modal
|
|
50
|
+
|
|
51
|
+
`import { Modal} from "norma-library`;
|
|
52
|
+
|
|
53
|
+
`<Modal open={open} onClose={handleClose} aria-labelledby="modal-modal-title" aria-describedby="modal-modal-description" onConfirm={handleConfirm}
|
|
54
|
+
title="Titulo do modal">conteúdo do modal</modal>`;
|
|
55
|
+
|
|
56
|
+
#### Props
|
|
57
|
+
|
|
58
|
+
O componente `Modal` aceita as seguintes propriedades:
|
|
59
|
+
|
|
60
|
+
- `sx` (SxProps<Theme>): Estilos personalizados usando o sistema de estilos do Material-UI.
|
|
61
|
+
- `children` (React.ReactElement | React.ReactElement[]): Elementos filhos do modal.
|
|
62
|
+
- `open` (boolean): Indica se o modal está aberto.
|
|
63
|
+
- `onClose` (função): Função de callback chamada quando o modal é fechado.
|
|
64
|
+
- `className` (string): Classe CSS adicional para estilização.
|
|
65
|
+
- `title` (string): Título do modal.
|
|
66
|
+
- `full` (boolean): Indica se o modal deve ocupar toda a largura.
|
|
67
|
+
- `onConfirm` (função): Função de callback chamada quando o botão "Confirmar" é clicado.
|
|
68
|
+
|
|
69
|
+
### TextField
|
|
70
|
+
|
|
71
|
+
`import { TextField } from "norma-library`;
|
|
72
|
+
|
|
73
|
+
`<TextField id="outlined-basic" label="Outlined" variant="outlined" />`;
|
|
74
|
+
|
|
75
|
+
#### Props
|
|
76
|
+
|
|
77
|
+
O componente `TextField` aceita as seguintes propriedades:
|
|
78
|
+
|
|
79
|
+
- `label` (ReactNode): Rótulo exibido acima do campo de entrada.
|
|
80
|
+
- `variant` (string): A variante do campo (standard, outlined, filled).
|
|
81
|
+
- `value` (TextFieldValue): O valor do campo de entrada.
|
|
82
|
+
- `onChange` (função): Função de callback chamada quando o valor do campo muda.
|
|
83
|
+
- `disabled` (boolean): Indica se o campo de entrada está desabilitado.
|
|
84
|
+
- `required` (boolean): Indica se o campo de entrada é obrigatório.
|
|
85
|
+
- `hasError` (boolean): Indica se o campo de entrada possui erro.
|
|
86
|
+
- E outras propriedades relacionadas a estilos, tamanho, id, etc.
|