pge-front-common 14.2.42 → 14.2.43
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 +141 -141
- package/lib/index.esm.js +52 -55
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +52 -55
- package/lib/index.js.map +1 -1
- package/package.json +70 -70
package/README.md
CHANGED
|
@@ -1,141 +1,141 @@
|
|
|
1
|
-
# 🖼️ Biblioteca de componentes da PGE
|
|
2
|
-
|
|
3
|
-
[](https://badge.fury.io/js/my-component-library) [](https://componentes-dev.in.pge.rj.gov.br/)
|
|
4
|
-
|
|
5
|
-
Essa biblioteca consiste de componentes reutilizáveis entre os diversos projetos da PGE-RJ. Oferecendo componentes reutilizáveis e testados para ajudar a acelerar o desenvolvimento de interfaces de usuário.
|
|
6
|
-
|
|
7
|
-
O Storybook desta biblioteca é publicado no ambiente de desenvolvimento: [https://componentes-dev.in.pge.rj.gov.br/](https://componentes-dev.in.pge.rj.gov.br/)
|
|
8
|
-
|
|
9
|
-
## Índice
|
|
10
|
-
|
|
11
|
-
- [Instalação](#instalação)
|
|
12
|
-
- [Uso](#uso)
|
|
13
|
-
- [Desenvolvimento](#desenvolvimento)
|
|
14
|
-
- [Template Pull Request](#template)
|
|
15
|
-
|
|
16
|
-
## 🛠️ Instalação
|
|
17
|
-
|
|
18
|
-
Instale a biblioteca usando npm:
|
|
19
|
-
|
|
20
|
-
```bash
|
|
21
|
-
npm i pge-front-common
|
|
22
|
-
```
|
|
23
|
-
|
|
24
|
-
## 📦 Uso
|
|
25
|
-
|
|
26
|
-
```typescript
|
|
27
|
-
import React from "react";
|
|
28
|
-
import { Button } from "pge-front-common";
|
|
29
|
-
|
|
30
|
-
const App = () => {
|
|
31
|
-
const handleClick = () => {
|
|
32
|
-
alert("Button clicked!");
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<div>
|
|
37
|
-
<h1>Hello, World!</h1>
|
|
38
|
-
<Button variant="secondary" text="Text" />
|
|
39
|
-
</div>
|
|
40
|
-
);
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
export default App;
|
|
44
|
-
```
|
|
45
|
-
|
|
46
|
-
## 📦 Uso Componente INPUTDATE
|
|
47
|
-
|
|
48
|
-
Ao usar ele deve ser inicializado seus estilos
|
|
49
|
-
Na home da aplicacao, no ponto de entrada ( '/' ) deve ser chamado a funcao installPrimeReactStyles
|
|
50
|
-
|
|
51
|
-
```typescript
|
|
52
|
-
import React from "react";
|
|
53
|
-
import { installPrimeReactStyles } from "pge-front-common";
|
|
54
|
-
|
|
55
|
-
installPrimeReactStyles();
|
|
56
|
-
|
|
57
|
-
const App = () => {
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
return (
|
|
61
|
-
<Component >
|
|
62
|
-
);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export default App;
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
## 🧑💻 Desenvolvimento
|
|
69
|
-
|
|
70
|
-
Instale as dependências do projeto:
|
|
71
|
-
|
|
72
|
-
```bash
|
|
73
|
-
npm install
|
|
74
|
-
```
|
|
75
|
-
|
|
76
|
-
Executando o Storybook
|
|
77
|
-
Inicie o Storybook para visualizar e desenvolver componentes:
|
|
78
|
-
|
|
79
|
-
```bash
|
|
80
|
-
npm run storybook
|
|
81
|
-
```
|
|
82
|
-
|
|
83
|
-
O Storybook estará disponível em http://localhost:6006. A versão implantada no ambiente de desenvolvimento fica em [https://componentes-dev.in.pge.rj.gov.br/](https://componentes-dev.in.pge.rj.gov.br/).
|
|
84
|
-
|
|
85
|
-
## 🖌️ FIGMA
|
|
86
|
-
|
|
87
|
-
https://www.figma.com/design/DNUPKVvvLGx5oMEJ721Ukj/V1--Design-system-PGE?node-id=0-1&p=f&t=RIFLXN7wyH6Q4Bd4-0
|
|
88
|
-
|
|
89
|
-
## 🚀 Contribuição
|
|
90
|
-
|
|
91
|
-
Para contribuir com o projeto, siga as diretrizes abaixo para atualizar a versão do `package.json`, respeitando a [Semantic Versioning (SEMVER)](https://semver.org/):
|
|
92
|
-
|
|
93
|
-
### Criando novo componente e testando localmente
|
|
94
|
-
|
|
95
|
-
Após criar um novo componente é ideal que seja feito o teste em sua aplicação localmente. Para isso basta rodar, na raiz do a biblioteca, o comando:
|
|
96
|
-
|
|
97
|
-
```bash
|
|
98
|
-
npm run build
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
Esse comando será responsável por fazer build do projeto e como output uma pasta chamada **lib** será criada na raíz da biblioteca.
|
|
102
|
-
|
|
103
|
-
Vá até o **package.json** da sua aplicação react ou next e substitua a versão da biblioteca _pge-front-common_ pelo caminho da sua máquina até a pasta **lib** que acabou de ser criada, exemplo:
|
|
104
|
-
|
|
105
|
-
```json
|
|
106
|
-
"pge-front-common": "C:\Users\Colaborador\Documents\EDS\componentes\lib"
|
|
107
|
-
```
|
|
108
|
-
|
|
109
|
-
Após isso rode o comando _npm install_ na raiz do projeto react ou next e o _node_modules_ será atualizado localmente com o conteúdo da pasta **lib** da biblioteca. Teste sua aplicação para garantir que todos os cenários de uso do componente estão conforme esperado e após isso prossiga com o processo de _pull request_ e atualização da biblioteca para uma versão estável.
|
|
110
|
-
|
|
111
|
-
### Atualizando a versão do package.json
|
|
112
|
-
|
|
113
|
-
A versão segue o formato `MAJOR.MINOR.PATCH`:
|
|
114
|
-
|
|
115
|
-
- **PATCH** (X.X.☝️): Para pequenas correções, ajustes ou melhorias que não quebram compatibilidade. Exemplo: adicionar uma props opcional, ajustar um estilo, corrigir um bug.
|
|
116
|
-
- **MINOR** (X.☝️.0): Para novas funcionalidades que mantêm compatibilidade com a versão anterior. Exemplo: adicionar um novo componente, expandir funcionalidades existentes.
|
|
117
|
-
- **MAJOR** (☝️.0.0): Para alterações que quebram compatibilidade com versões anteriores. Exemplo: grandes refatorações, remoção de funcionalidades ou mudanças disruptivas na API.
|
|
118
|
-
|
|
119
|
-
#### Exemplo de alteração no `package.json`:
|
|
120
|
-
|
|
121
|
-
```json
|
|
122
|
-
"version": "10.2.1"
|
|
123
|
-
```
|
|
124
|
-
|
|
125
|
-
## 📤 Publicação no NPM
|
|
126
|
-
|
|
127
|
-
Após o processo normal (Code review) - chamar [César Sturmer](http://gitpge.in.pge.rj.gov.br:3000/cezarf), para gerar nova versao na NPM
|
|
128
|
-
|
|
129
|
-
## 🔄 Change log
|
|
130
|
-
|
|
131
|
-
Dentro da pasta _src_ há uma subpasta com nome _docs_, para mantermos registro de alterações ao longo do tempo é ideal que a cada nova versão um novo arquivo com a data e a versão gerada seja criado e que o desenvolvedor relate nesse arquivo as alterações feitas nessa versão, seguindo um padrão descritivo com tópicos como:
|
|
132
|
-
|
|
133
|
-
- Ajustes: mudanças feitas em componentes já existentes, com intuito de consertar algum erro ou bug
|
|
134
|
-
- Adições: relatando novos componentes adicionados
|
|
135
|
-
- Alterações: mudanças feitas com intuito de modificar algum componente já existente, que não seja por motivo de bug ou erro
|
|
136
|
-
- Remoções: relato sobre remoção de algum componente e o motivo para sua remoção
|
|
137
|
-
- Futuras features: comentários abertos sobre possíveis alterações futuras que serão implementadas em novas versões mais a frente
|
|
138
|
-
|
|
139
|
-
_obs: apenas escreva "não se aplica" para os tópicos que não têm o que descrever_
|
|
140
|
-
|
|
141
|
-
Tente ser o mais descritivo possível acerca de suas alterações para facilitar o registro a longo prazo e mantermos uma boa documentação.
|
|
1
|
+
# 🖼️ Biblioteca de componentes da PGE
|
|
2
|
+
|
|
3
|
+
[](https://badge.fury.io/js/my-component-library) [](https://componentes-dev.in.pge.rj.gov.br/)
|
|
4
|
+
|
|
5
|
+
Essa biblioteca consiste de componentes reutilizáveis entre os diversos projetos da PGE-RJ. Oferecendo componentes reutilizáveis e testados para ajudar a acelerar o desenvolvimento de interfaces de usuário.
|
|
6
|
+
|
|
7
|
+
O Storybook desta biblioteca é publicado no ambiente de desenvolvimento: [https://componentes-dev.in.pge.rj.gov.br/](https://componentes-dev.in.pge.rj.gov.br/)
|
|
8
|
+
|
|
9
|
+
## Índice
|
|
10
|
+
|
|
11
|
+
- [Instalação](#instalação)
|
|
12
|
+
- [Uso](#uso)
|
|
13
|
+
- [Desenvolvimento](#desenvolvimento)
|
|
14
|
+
- [Template Pull Request](#template)
|
|
15
|
+
|
|
16
|
+
## 🛠️ Instalação
|
|
17
|
+
|
|
18
|
+
Instale a biblioteca usando npm:
|
|
19
|
+
|
|
20
|
+
```bash
|
|
21
|
+
npm i pge-front-common
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## 📦 Uso
|
|
25
|
+
|
|
26
|
+
```typescript
|
|
27
|
+
import React from "react";
|
|
28
|
+
import { Button } from "pge-front-common";
|
|
29
|
+
|
|
30
|
+
const App = () => {
|
|
31
|
+
const handleClick = () => {
|
|
32
|
+
alert("Button clicked!");
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<h1>Hello, World!</h1>
|
|
38
|
+
<Button variant="secondary" text="Text" />
|
|
39
|
+
</div>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
export default App;
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
## 📦 Uso Componente INPUTDATE
|
|
47
|
+
|
|
48
|
+
Ao usar ele deve ser inicializado seus estilos
|
|
49
|
+
Na home da aplicacao, no ponto de entrada ( '/' ) deve ser chamado a funcao installPrimeReactStyles
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import React from "react";
|
|
53
|
+
import { installPrimeReactStyles } from "pge-front-common";
|
|
54
|
+
|
|
55
|
+
installPrimeReactStyles();
|
|
56
|
+
|
|
57
|
+
const App = () => {
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
return (
|
|
61
|
+
<Component >
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export default App;
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
## 🧑💻 Desenvolvimento
|
|
69
|
+
|
|
70
|
+
Instale as dependências do projeto:
|
|
71
|
+
|
|
72
|
+
```bash
|
|
73
|
+
npm install
|
|
74
|
+
```
|
|
75
|
+
|
|
76
|
+
Executando o Storybook
|
|
77
|
+
Inicie o Storybook para visualizar e desenvolver componentes:
|
|
78
|
+
|
|
79
|
+
```bash
|
|
80
|
+
npm run storybook
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
O Storybook estará disponível em http://localhost:6006. A versão implantada no ambiente de desenvolvimento fica em [https://componentes-dev.in.pge.rj.gov.br/](https://componentes-dev.in.pge.rj.gov.br/).
|
|
84
|
+
|
|
85
|
+
## 🖌️ FIGMA
|
|
86
|
+
|
|
87
|
+
https://www.figma.com/design/DNUPKVvvLGx5oMEJ721Ukj/V1--Design-system-PGE?node-id=0-1&p=f&t=RIFLXN7wyH6Q4Bd4-0
|
|
88
|
+
|
|
89
|
+
## 🚀 Contribuição
|
|
90
|
+
|
|
91
|
+
Para contribuir com o projeto, siga as diretrizes abaixo para atualizar a versão do `package.json`, respeitando a [Semantic Versioning (SEMVER)](https://semver.org/):
|
|
92
|
+
|
|
93
|
+
### Criando novo componente e testando localmente
|
|
94
|
+
|
|
95
|
+
Após criar um novo componente é ideal que seja feito o teste em sua aplicação localmente. Para isso basta rodar, na raiz do a biblioteca, o comando:
|
|
96
|
+
|
|
97
|
+
```bash
|
|
98
|
+
npm run build
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Esse comando será responsável por fazer build do projeto e como output uma pasta chamada **lib** será criada na raíz da biblioteca.
|
|
102
|
+
|
|
103
|
+
Vá até o **package.json** da sua aplicação react ou next e substitua a versão da biblioteca _pge-front-common_ pelo caminho da sua máquina até a pasta **lib** que acabou de ser criada, exemplo:
|
|
104
|
+
|
|
105
|
+
```json
|
|
106
|
+
"pge-front-common": "C:\Users\Colaborador\Documents\EDS\componentes\lib"
|
|
107
|
+
```
|
|
108
|
+
|
|
109
|
+
Após isso rode o comando _npm install_ na raiz do projeto react ou next e o _node_modules_ será atualizado localmente com o conteúdo da pasta **lib** da biblioteca. Teste sua aplicação para garantir que todos os cenários de uso do componente estão conforme esperado e após isso prossiga com o processo de _pull request_ e atualização da biblioteca para uma versão estável.
|
|
110
|
+
|
|
111
|
+
### Atualizando a versão do package.json
|
|
112
|
+
|
|
113
|
+
A versão segue o formato `MAJOR.MINOR.PATCH`:
|
|
114
|
+
|
|
115
|
+
- **PATCH** (X.X.☝️): Para pequenas correções, ajustes ou melhorias que não quebram compatibilidade. Exemplo: adicionar uma props opcional, ajustar um estilo, corrigir um bug.
|
|
116
|
+
- **MINOR** (X.☝️.0): Para novas funcionalidades que mantêm compatibilidade com a versão anterior. Exemplo: adicionar um novo componente, expandir funcionalidades existentes.
|
|
117
|
+
- **MAJOR** (☝️.0.0): Para alterações que quebram compatibilidade com versões anteriores. Exemplo: grandes refatorações, remoção de funcionalidades ou mudanças disruptivas na API.
|
|
118
|
+
|
|
119
|
+
#### Exemplo de alteração no `package.json`:
|
|
120
|
+
|
|
121
|
+
```json
|
|
122
|
+
"version": "10.2.1"
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
## 📤 Publicação no NPM
|
|
126
|
+
|
|
127
|
+
Após o processo normal (Code review) - chamar [César Sturmer](http://gitpge.in.pge.rj.gov.br:3000/cezarf), para gerar nova versao na NPM
|
|
128
|
+
|
|
129
|
+
## 🔄 Change log
|
|
130
|
+
|
|
131
|
+
Dentro da pasta _src_ há uma subpasta com nome _docs_, para mantermos registro de alterações ao longo do tempo é ideal que a cada nova versão um novo arquivo com a data e a versão gerada seja criado e que o desenvolvedor relate nesse arquivo as alterações feitas nessa versão, seguindo um padrão descritivo com tópicos como:
|
|
132
|
+
|
|
133
|
+
- Ajustes: mudanças feitas em componentes já existentes, com intuito de consertar algum erro ou bug
|
|
134
|
+
- Adições: relatando novos componentes adicionados
|
|
135
|
+
- Alterações: mudanças feitas com intuito de modificar algum componente já existente, que não seja por motivo de bug ou erro
|
|
136
|
+
- Remoções: relato sobre remoção de algum componente e o motivo para sua remoção
|
|
137
|
+
- Futuras features: comentários abertos sobre possíveis alterações futuras que serão implementadas em novas versões mais a frente
|
|
138
|
+
|
|
139
|
+
_obs: apenas escreva "não se aplica" para os tópicos que não têm o que descrever_
|
|
140
|
+
|
|
141
|
+
Tente ser o mais descritivo possível acerca de suas alterações para facilitar o registro a longo prazo e mantermos uma boa documentação.
|