pge-front-common 10.1.4 → 10.2.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 +46 -14
- package/lib/components/PaginationV2/index.d.ts +18 -0
- package/lib/components/PaginationV2/pagination.stories.d.ts +11 -0
- package/lib/components/PaginationV2/selectPagination.d.ts +12 -0
- package/lib/icons/left-arrow-icon.d.ts +2 -0
- package/lib/icons/right-arrow-icon.d.ts +2 -0
- package/lib/index.esm.js +3 -3
- package/lib/index.js +3 -3
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
# Biblioteca de componentes da PGE
|
|
1
|
+
# 🖼️ Biblioteca de componentes da PGE
|
|
2
|
+
[](https://badge.fury.io/js/my-component-library) [](https://my-component-library/storybook)
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
[](https://my-component-library/storybook)
|
|
5
|
-
|
|
6
|
-
My Component Library é uma biblioteca de componentes React criada com TypeScript e Storybook para desenvolvimento e documentação. Esta biblioteca oferece componentes reutilizáveis e testados para ajudar a acelerar o desenvolvimento de interfaces de usuário.
|
|
4
|
+
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.
|
|
7
5
|
|
|
8
6
|
## Índice
|
|
9
7
|
|
|
@@ -12,7 +10,7 @@ My Component Library é uma biblioteca de componentes React criada com TypeScrip
|
|
|
12
10
|
- [Desenvolvimento](#desenvolvimento)
|
|
13
11
|
- [Template Pull Request](#template)
|
|
14
12
|
|
|
15
|
-
## Instalação
|
|
13
|
+
## 🛠️ Instalação
|
|
16
14
|
|
|
17
15
|
Instale a biblioteca usando npm:
|
|
18
16
|
|
|
@@ -20,7 +18,7 @@ Instale a biblioteca usando npm:
|
|
|
20
18
|
npm i pge-front-common
|
|
21
19
|
```
|
|
22
20
|
|
|
23
|
-
## Uso
|
|
21
|
+
## 📦 Uso
|
|
24
22
|
|
|
25
23
|
```typescript
|
|
26
24
|
import React from "react";
|
|
@@ -42,7 +40,7 @@ const App = () => {
|
|
|
42
40
|
export default App;
|
|
43
41
|
```
|
|
44
42
|
|
|
45
|
-
## Desenvolvimento
|
|
43
|
+
## 🧑💻 Desenvolvimento
|
|
46
44
|
|
|
47
45
|
Instale as dependências do projeto:
|
|
48
46
|
|
|
@@ -59,20 +57,54 @@ npm run storybook
|
|
|
59
57
|
|
|
60
58
|
O Storybook estará disponível em http://localhost:6006.
|
|
61
59
|
|
|
62
|
-
## FIGMA
|
|
60
|
+
## 🖌️ FIGMA
|
|
63
61
|
|
|
64
62
|
https://www.figma.com/design/DNUPKVvvLGx5oMEJ721Ukj/V1--Design-system-PGE?node-id=0-1&p=f&t=RIFLXN7wyH6Q4Bd4-0
|
|
65
63
|
|
|
66
|
-
##
|
|
64
|
+
## 🚀 Contribuição
|
|
67
65
|
|
|
68
|
-
|
|
66
|
+
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/):
|
|
69
67
|
|
|
70
|
-
|
|
68
|
+
### Criando novo componente e testando localmente
|
|
71
69
|
|
|
72
|
-
|
|
70
|
+
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:
|
|
71
|
+
```bash
|
|
72
|
+
npm run build
|
|
73
|
+
```
|
|
74
|
+
Esse comando será responsável por fazer build do projeto e como output uma pasta chamada **lib** será criada na raíz do biblioteca.
|
|
73
75
|
|
|
76
|
+
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:
|
|
74
77
|
```json
|
|
75
|
-
|
|
78
|
+
"pge-front-common": "C:\Users\Colaborador\Documents\EDS\componentes\lib"
|
|
76
79
|
```
|
|
80
|
+
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.
|
|
81
|
+
|
|
82
|
+
### Atualizando a versão do package.json
|
|
77
83
|
|
|
84
|
+
A versão segue o formato `MAJOR.MINOR.PATCH`:
|
|
85
|
+
|
|
86
|
+
- **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.
|
|
87
|
+
- **MINOR** (X.☝️.0): Para novas funcionalidades que mantêm compatibilidade com a versão anterior. Exemplo: adicionar um novo componente, expandir funcionalidades existentes.
|
|
88
|
+
- **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.
|
|
89
|
+
|
|
90
|
+
#### Exemplo de alteração no `package.json`:
|
|
91
|
+
```json
|
|
92
|
+
"version": "10.2.1"
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
## 📤 Publicação no NPM
|
|
78
96
|
Após o processo normal (Code review) - chamar @CESARSTURMER, para gerar nova versao na NPM
|
|
97
|
+
|
|
98
|
+
## 🔄 Change log
|
|
99
|
+
|
|
100
|
+
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:
|
|
101
|
+
- Ajustes: mudanças feitas em componentes já existentes, com intuito de consertar algum erro ou bug
|
|
102
|
+
- Adições: relatando novos componentes adicionados
|
|
103
|
+
- Alterações: mudanças feitas com intuito de modificar algum componente já existente, que não seja por motivo de bug ou erro
|
|
104
|
+
- Remoções: relato sobre remoção de algum componente e o motivo para sua remoção
|
|
105
|
+
- Futuras features: comentários abertos sobre possíveis alterações futuras que serão implementadas em novas versões mais a frente
|
|
106
|
+
|
|
107
|
+
*obs: apenas escreva "não se aplica" para os tópicos que não têm o que descrever*
|
|
108
|
+
|
|
109
|
+
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.
|
|
110
|
+
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface PaginationProps {
|
|
3
|
+
countPage: number;
|
|
4
|
+
currentPage: number;
|
|
5
|
+
totalItems: number;
|
|
6
|
+
itemsPerPage: number;
|
|
7
|
+
handlePrevious: () => void;
|
|
8
|
+
handleNext: () => void;
|
|
9
|
+
handleItemPorPage: (value: number) => void;
|
|
10
|
+
handlePage: (value: number) => void;
|
|
11
|
+
pagina: number;
|
|
12
|
+
defaultOptions?: {
|
|
13
|
+
value: number;
|
|
14
|
+
label: string;
|
|
15
|
+
}[];
|
|
16
|
+
}
|
|
17
|
+
declare const Pagination: React.FC<PaginationProps>;
|
|
18
|
+
export default Pagination;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from "@storybook/react";
|
|
2
|
+
import PaginationV2 from "./index";
|
|
3
|
+
declare const meta: Meta<typeof PaginationV2>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof PaginationV2>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const MiddlePage: Story;
|
|
8
|
+
export declare const LastPage: Story;
|
|
9
|
+
export declare const CustomItemsPerPage: Story;
|
|
10
|
+
export declare const LargeDataset: Story;
|
|
11
|
+
export declare const DisabledNavigation: Story;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
interface SelectProps {
|
|
3
|
+
value: number | string;
|
|
4
|
+
options: Array<{
|
|
5
|
+
value: number | string;
|
|
6
|
+
label: string;
|
|
7
|
+
}>;
|
|
8
|
+
onChange: (value: number | string) => void;
|
|
9
|
+
className?: string;
|
|
10
|
+
}
|
|
11
|
+
declare const SelectPagination: React.FC<SelectProps>;
|
|
12
|
+
export default SelectPagination;
|
package/lib/index.esm.js
CHANGED
|
@@ -74,7 +74,7 @@ function styleInject(css, ref) {
|
|
|
74
74
|
}
|
|
75
75
|
}
|
|
76
76
|
|
|
77
|
-
var css_248z$l = ".button-module__button___JyfZW {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n cursor: pointer;\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n min-width: 70px;\r\n height: 38px;\r\n width: 100%;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO {\r\n border: 1px solid #005a92;\r\n background: #005a92;\r\n color: #ffffff;\r\n font-weight:
|
|
77
|
+
var css_248z$l = ".button-module__button___JyfZW {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n cursor: pointer;\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n min-width: 70px;\r\n height: 38px;\r\n width: 100%;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO {\r\n border: 1px solid #005a92;\r\n background: #005a92;\r\n color: #ffffff;\r\n font-weight: 400;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO:hover {\r\n opacity: 1;\r\n background-color: rgb(0 67 109);\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__secondary___Q4I1z {\r\n border: 1px solid #005a92;\r\n background: transparent;\r\n color: #005a92;\r\n font-weight: 400;\r\n}\r\n\r\n.button-module__button___JyfZW:disabled {\r\n cursor: not-allowed;\r\n}\r\n";
|
|
78
78
|
var styles$g = {"button":"button-module__button___JyfZW","primary":"button-module__primary___ggjlO","secondary":"button-module__secondary___Q4I1z"};
|
|
79
79
|
styleInject(css_248z$l);
|
|
80
80
|
|
|
@@ -315,7 +315,7 @@ var LogoPGERG = function (props) {
|
|
|
315
315
|
var IconInvisibility = function (props) { return (React__default.createElement("svg", __assign({ width: "23", height: "15", viewBox: "0 0 23 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
316
316
|
React__default.createElement("path", { d: "M13.4163 9.08301L12.208 7.87468C12.333 7.2219 12.1455 6.61079 11.6455 6.04134C11.1455 5.4719 10.4997 5.24967 9.70801 5.37467L8.49967 4.16634C8.73579 4.05523 8.97537 3.9719 9.21842 3.91634C9.46148 3.86079 9.7219 3.83301 9.99967 3.83301C11.0413 3.83301 11.9268 4.19759 12.6559 4.92676C13.3851 5.65592 13.7497 6.54134 13.7497 7.58301C13.7497 7.86079 13.7219 8.1212 13.6663 8.36426C13.6108 8.60731 13.5275 8.8469 13.4163 9.08301ZM16.083 11.708L14.8747 10.5413C15.4025 10.1386 15.8712 9.69759 16.2809 9.21843C16.6906 8.73926 17.0413 8.19412 17.333 7.58301C16.6386 6.18023 15.642 5.06565 14.3434 4.23926C13.0448 3.41287 11.5969 2.99967 9.99967 2.99967C9.5969 2.99967 9.20106 3.02745 8.81217 3.08301C8.42329 3.13856 8.04134 3.2219 7.66634 3.33301L6.37467 2.04134C6.94412 1.80523 7.52745 1.62815 8.12467 1.51009C8.7219 1.39204 9.3469 1.33301 9.99967 1.33301C12.0969 1.33301 13.965 1.91287 15.6038 3.07259C17.2427 4.23231 18.4302 5.73579 19.1663 7.58301C18.8469 8.40245 18.4268 9.16287 17.9059 9.86426C17.3851 10.5656 16.7775 11.1802 16.083 11.708ZM16.4997 16.833L12.9997 13.3747C12.5136 13.5275 12.024 13.642 11.5309 13.7184C11.0379 13.7948 10.5275 13.833 9.99967 13.833C7.90245 13.833 6.0344 13.2531 4.39551 12.0934C2.75662 10.9337 1.56912 9.43023 0.833008 7.58301C1.12467 6.8469 1.49273 6.16287 1.93717 5.53092C2.38162 4.89898 2.88856 4.33301 3.45801 3.83301L1.16634 1.49967L2.33301 0.333008L17.6663 15.6663L16.4997 16.833ZM4.62467 4.99967C4.2219 5.36079 3.85384 5.75662 3.52051 6.18717C3.18717 6.61773 2.90245 7.08301 2.66634 7.58301C3.36079 8.98579 4.35731 10.1004 5.65592 10.9268C6.95454 11.7531 8.40245 12.1663 9.99967 12.1663C10.2775 12.1663 10.5483 12.149 10.8122 12.1143C11.0761 12.0795 11.3469 12.0413 11.6247 11.9997L10.8747 11.208C10.7219 11.2497 10.5761 11.2809 10.4372 11.3018C10.2983 11.3226 10.1525 11.333 9.99967 11.333C8.95801 11.333 8.07259 10.9684 7.34342 10.2393C6.61426 9.51009 6.24967 8.62467 6.24967 7.58301C6.24967 7.43023 6.26009 7.2844 6.28092 7.14551C6.30176 7.00662 6.33301 6.86079 6.37467 6.70801L4.62467 4.99967Z", fill: "#A0A0A0" }))); };
|
|
317
317
|
|
|
318
|
-
var css_248z$j = ".styles-module__toast___JCV9s {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 8px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 16px;\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__success___-BEJb {\r\n background-color: var(--background-color-success);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__success___-BEJb {\r\n color: var(--color
|
|
318
|
+
var css_248z$j = ".styles-module__toast___JCV9s {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 8px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 16px;\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__success___-BEJb {\r\n background-color: var(--background-color-success);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__success___-BEJb {\r\n color: var(--success-color);\r\n }\r\n\r\n .styles-module__toast___JCV9s.styles-module__alert___Gum-6 {\r\n background-color: var(--background-color-error);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__alert___Gum-6 {\r\n color: var(--alert-color);\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__warning___CVMAV {\r\n background-color: var(--background-color-warning);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__warning___CVMAV {\r\n color: var(--warning-color);\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__informative___0nyLv {\r\n background-color: #005a9214;\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__informative___0nyLv {\r\n color: var(--information-color);\r\n }\r\n \r\n .styles-module__content___AING8 {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n gap: var(--small-space);\r\n }\r\n \r\n .styles-module__info___g8ce2 {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .styles-module__icon___uiYA- {\r\n font-size: 24px;\r\n margin-right: 12px;\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__success___-BEJb {\r\n color: var(--success-color);\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__alert___Gum-6 {\r\n color: var(--alert-color);\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__warning___CVMAV {\r\n color: var(--warning-color);\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__informative___0nyLv {\r\n color: var(--information-color);\r\n }\r\n \r\n .styles-module__text___UCxPH {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n gap: 4px;\r\n }\r\n \r\n .styles-module__text___UCxPH strong {\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 16px;\r\n text-align: left;\r\n text-decoration-skip-ink: none;\r\n }\r\n \r\n .styles-module__text___UCxPH span {\r\n font-size: 14px;\r\n font-weight: 400;\r\n text-align: left;\r\n text-decoration-skip-ink: none;\r\n }\r\n\r\n .styles-module__textContent___S1KEv {\r\n color: var(--foreground);\r\n }\r\n \r\n .styles-module__closeButton___ELkqN {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 20px;\r\n color: var(--foreground);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .styles-module__closeButton___ELkqN:hover {\r\n color: var(--foreground);\r\n }\r\n\r\n ";
|
|
319
319
|
var styles$e = {"toast":"styles-module__toast___JCV9s","success":"styles-module__success___-BEJb","title":"styles-module__title___TK6Kt","alert":"styles-module__alert___Gum-6","warning":"styles-module__warning___CVMAV","informative":"styles-module__informative___0nyLv","content":"styles-module__content___AING8","info":"styles-module__info___g8ce2","icon":"styles-module__icon___uiYA-","text":"styles-module__text___UCxPH","textContent":"styles-module__textContent___S1KEv","closeButton":"styles-module__closeButton___ELkqN"};
|
|
320
320
|
styleInject(css_248z$j);
|
|
321
321
|
|
|
@@ -8190,7 +8190,7 @@ var TableComponent = function (_a) {
|
|
|
8190
8190
|
React__default.createElement("td", { colSpan: columns.length + (onActionClick ? 1 : 0), className: styles.noRecords }, noRecordsMessage)))))));
|
|
8191
8191
|
};
|
|
8192
8192
|
|
|
8193
|
-
var css_248z = "/* src/global.css */\r\n@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap\");\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-open-sans-serif);\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n:root {\r\n /* fonts */\r\n --font-open-sans-serif: \"Open Sans\", \"sans-serif\";\r\n --font-open-sans-light: \"Open Sans\", 300;\r\n --font-open-sans-regular: \"Open Sans\", 400;\r\n --font-open-sans-bold: \"Open Sans\", 700;\r\n /* colors */\r\n --color-primary: #005a92;\r\n --color-secondary: #303030;\r\n --color-success: #198754;\r\n --color-warning: #cb8700;\r\n --color-information: #1a95b0;\r\n --color-danger: #cb0a0a;\r\n --color-focus: var(--color-information);\r\n --color-focus-outline: #0091ea80;\r\n --color-placeholder: #9ca4b47d;\r\n --color-border: #cfcfcffc;\r\n --color-label: #303030;\r\n --color-input: #30303090;\r\n --background-color-success: #1987541a;\r\n --background-color-error: #cb0a0a1a;\r\n --background-color-warning: #cb87001a;\r\n --background-color-table-primary: #eeeeee;\r\n --background-color-table-secondary: #f6f6f6;\r\n --background-color-table-hover: #e5f1f9;\r\n /* input */\r\n --input-border: 1px solid var(--color-border);\r\n --input-border-danger: 1px solid var(--color-danger);\r\n --input-border-radius: 8px;\r\n --input-border-focus: 1px solid var(--color-focus);\r\n --input-cursor: pointer;\r\n --input-font-size: 14px;\r\n --input-font-weight: 700;\r\n --input-line-height: 21px;\r\n --input-outline-focus: solid var(--color-focus-outline) 1.5px;\r\n --input-outline-danger: solid var(--color-danger) 1.5px;\r\n}\r\n";
|
|
8193
|
+
var css_248z = "/* src/global.css */\r\n@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap\");\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-open-sans-serif);\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n:root {\r\n /* fonts */\r\n --font-open-sans-serif: \"Open Sans\", \"sans-serif\";\r\n --font-open-sans-light: \"Open Sans\", 300;\r\n --font-open-sans-regular: \"Open Sans\", 400;\r\n --font-open-sans-bold: \"Open Sans\", 700;\r\n /* colors */\r\n --color-primary: #005a92;\r\n --color-secondary: #303030;\r\n --color-success: #198754;\r\n --color-warning: #cb8700;\r\n --color-information: #1a95b0;\r\n --color-danger: #cb0a0a;\r\n --color-focus: var(--color-information);\r\n --color-focus-outline: #0091ea80;\r\n --color-placeholder: #9ca4b47d;\r\n --color-border: #cfcfcffc;\r\n --color-label: #303030;\r\n --color-input: #30303090;\r\n --background-color-success: #1987541a;\r\n --background-color-error: #cb0a0a1a;\r\n --background-color-warning: #cb87001a;\r\n --background-color-table-primary: #eeeeee;\r\n --background-color-table-secondary: #f6f6f6;\r\n --background-color-table-hover: #e5f1f9;\r\n /* input */\r\n --input-border: 1px solid var(--color-border);\r\n --input-border-danger: 1px solid var(--color-danger);\r\n --input-border-radius: 8px;\r\n --input-border-focus: 1px solid var(--color-focus);\r\n --input-cursor: pointer;\r\n --input-font-size: 14px;\r\n --input-font-weight: 700;\r\n --input-line-height: 21px;\r\n --input-outline-focus: solid var(--color-focus-outline) 1.5px;\r\n --input-outline-danger: solid var(--color-danger) 1.5px;\r\n\r\n\r\n /* Theming colors */\r\n --background-color: #fff;\r\n --foreground: #303030;\r\n --success-color: #198754;\r\n --warning-color: #CB8700;\r\n --alert-color: #CB0A0A;\r\n --information-color: #1A95B0;\r\n\r\n --primary-color: #005A92;\r\n --pge-gold: #BB9B32;\r\n --hover-color: #00436D;\r\n --icon-color: #4A4A4B;\r\n --border-color: #D9D9D9;\r\n --light-grey-color: #C3C3C3;\r\n --grey-color: #A0A0A0;\r\n \r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n html {\r\n color-scheme: dark;\r\n }\r\n\r\n :root {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n }\r\n \r\n}\r\n\r\n.dark-mode {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n}\r\n";
|
|
8194
8194
|
styleInject(css_248z);
|
|
8195
8195
|
|
|
8196
8196
|
export { Accordion, AccordionItem, BoxError, BoxSuccess, Button, FooterComponent as Footer, Header, IconAdd, IconAddCell, IconArrowExpland, IconArrowRecall, IconCLose, IconCalendar, IconCheckCircle, IconCircleExpland, IconCircleRecall, IconDelete, IconDownload, IconEdit, IconEventAvaliable, IconInvisibility, IconLogout, IconNewTab, IconProfile, IconRemove, IconSwap, IconTriangleExpand, IconTriangleRecall, IconUpload, IconVisibility, IconWarning, InformativeBox, InputBase, LoadingSpinner, SelectMult as Multiselect, PaginationTable, PasswordInput, RadioGroupBase, TableComponent, TextareaBase, Title };
|
package/lib/index.js
CHANGED
|
@@ -94,7 +94,7 @@ function styleInject(css, ref) {
|
|
|
94
94
|
}
|
|
95
95
|
}
|
|
96
96
|
|
|
97
|
-
var css_248z$l = ".button-module__button___JyfZW {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n cursor: pointer;\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n min-width: 70px;\r\n height: 38px;\r\n width: 100%;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO {\r\n border: 1px solid #005a92;\r\n background: #005a92;\r\n color: #ffffff;\r\n font-weight:
|
|
97
|
+
var css_248z$l = ".button-module__button___JyfZW {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 4px;\r\n cursor: pointer;\r\n padding: 12px 16px;\r\n border-radius: 8px;\r\n min-width: 70px;\r\n height: 38px;\r\n width: 100%;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO {\r\n border: 1px solid #005a92;\r\n background: #005a92;\r\n color: #ffffff;\r\n font-weight: 400;\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__primary___ggjlO:hover {\r\n opacity: 1;\r\n background-color: rgb(0 67 109);\r\n}\r\n\r\n.button-module__button___JyfZW.button-module__secondary___Q4I1z {\r\n border: 1px solid #005a92;\r\n background: transparent;\r\n color: #005a92;\r\n font-weight: 400;\r\n}\r\n\r\n.button-module__button___JyfZW:disabled {\r\n cursor: not-allowed;\r\n}\r\n";
|
|
98
98
|
var styles$g = {"button":"button-module__button___JyfZW","primary":"button-module__primary___ggjlO","secondary":"button-module__secondary___Q4I1z"};
|
|
99
99
|
styleInject(css_248z$l);
|
|
100
100
|
|
|
@@ -335,7 +335,7 @@ var LogoPGERG = function (props) {
|
|
|
335
335
|
var IconInvisibility = function (props) { return (React.createElement("svg", __assign({ width: "23", height: "15", viewBox: "0 0 23 15", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
|
|
336
336
|
React.createElement("path", { d: "M13.4163 9.08301L12.208 7.87468C12.333 7.2219 12.1455 6.61079 11.6455 6.04134C11.1455 5.4719 10.4997 5.24967 9.70801 5.37467L8.49967 4.16634C8.73579 4.05523 8.97537 3.9719 9.21842 3.91634C9.46148 3.86079 9.7219 3.83301 9.99967 3.83301C11.0413 3.83301 11.9268 4.19759 12.6559 4.92676C13.3851 5.65592 13.7497 6.54134 13.7497 7.58301C13.7497 7.86079 13.7219 8.1212 13.6663 8.36426C13.6108 8.60731 13.5275 8.8469 13.4163 9.08301ZM16.083 11.708L14.8747 10.5413C15.4025 10.1386 15.8712 9.69759 16.2809 9.21843C16.6906 8.73926 17.0413 8.19412 17.333 7.58301C16.6386 6.18023 15.642 5.06565 14.3434 4.23926C13.0448 3.41287 11.5969 2.99967 9.99967 2.99967C9.5969 2.99967 9.20106 3.02745 8.81217 3.08301C8.42329 3.13856 8.04134 3.2219 7.66634 3.33301L6.37467 2.04134C6.94412 1.80523 7.52745 1.62815 8.12467 1.51009C8.7219 1.39204 9.3469 1.33301 9.99967 1.33301C12.0969 1.33301 13.965 1.91287 15.6038 3.07259C17.2427 4.23231 18.4302 5.73579 19.1663 7.58301C18.8469 8.40245 18.4268 9.16287 17.9059 9.86426C17.3851 10.5656 16.7775 11.1802 16.083 11.708ZM16.4997 16.833L12.9997 13.3747C12.5136 13.5275 12.024 13.642 11.5309 13.7184C11.0379 13.7948 10.5275 13.833 9.99967 13.833C7.90245 13.833 6.0344 13.2531 4.39551 12.0934C2.75662 10.9337 1.56912 9.43023 0.833008 7.58301C1.12467 6.8469 1.49273 6.16287 1.93717 5.53092C2.38162 4.89898 2.88856 4.33301 3.45801 3.83301L1.16634 1.49967L2.33301 0.333008L17.6663 15.6663L16.4997 16.833ZM4.62467 4.99967C4.2219 5.36079 3.85384 5.75662 3.52051 6.18717C3.18717 6.61773 2.90245 7.08301 2.66634 7.58301C3.36079 8.98579 4.35731 10.1004 5.65592 10.9268C6.95454 11.7531 8.40245 12.1663 9.99967 12.1663C10.2775 12.1663 10.5483 12.149 10.8122 12.1143C11.0761 12.0795 11.3469 12.0413 11.6247 11.9997L10.8747 11.208C10.7219 11.2497 10.5761 11.2809 10.4372 11.3018C10.2983 11.3226 10.1525 11.333 9.99967 11.333C8.95801 11.333 8.07259 10.9684 7.34342 10.2393C6.61426 9.51009 6.24967 8.62467 6.24967 7.58301C6.24967 7.43023 6.26009 7.2844 6.28092 7.14551C6.30176 7.00662 6.33301 6.86079 6.37467 6.70801L4.62467 4.99967Z", fill: "#A0A0A0" }))); };
|
|
337
337
|
|
|
338
|
-
var css_248z$j = ".styles-module__toast___JCV9s {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 8px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 16px;\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__success___-BEJb {\r\n background-color: var(--background-color-success);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__success___-BEJb {\r\n color: var(--color
|
|
338
|
+
var css_248z$j = ".styles-module__toast___JCV9s {\r\n width: 100%;\r\n height: auto;\r\n border-radius: 8px;\r\n padding: 12px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);\r\n margin-bottom: 16px;\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__success___-BEJb {\r\n background-color: var(--background-color-success);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__success___-BEJb {\r\n color: var(--success-color);\r\n }\r\n\r\n .styles-module__toast___JCV9s.styles-module__alert___Gum-6 {\r\n background-color: var(--background-color-error);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__alert___Gum-6 {\r\n color: var(--alert-color);\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__warning___CVMAV {\r\n background-color: var(--background-color-warning);\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__warning___CVMAV {\r\n color: var(--warning-color);\r\n }\r\n \r\n .styles-module__toast___JCV9s.styles-module__informative___0nyLv {\r\n background-color: #005a9214;\r\n }\r\n\r\n .styles-module__title___TK6Kt.styles-module__informative___0nyLv {\r\n color: var(--information-color);\r\n }\r\n \r\n .styles-module__content___AING8 {\r\n display: flex;\r\n align-items: center;\r\n justify-content: space-between;\r\n width: 100%;\r\n gap: var(--small-space);\r\n }\r\n \r\n .styles-module__info___g8ce2 {\r\n display: flex;\r\n align-items: center;\r\n }\r\n \r\n .styles-module__icon___uiYA- {\r\n font-size: 24px;\r\n margin-right: 12px;\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__success___-BEJb {\r\n color: var(--success-color);\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__alert___Gum-6 {\r\n color: var(--alert-color);\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__warning___CVMAV {\r\n color: var(--warning-color);\r\n }\r\n\r\n .styles-module__icon___uiYA-.styles-module__informative___0nyLv {\r\n color: var(--information-color);\r\n }\r\n \r\n .styles-module__text___UCxPH {\r\n display: flex;\r\n flex-direction: column;\r\n justify-content: space-between;\r\n gap: 4px;\r\n }\r\n \r\n .styles-module__text___UCxPH strong {\r\n font-size: 16px;\r\n font-weight: 700;\r\n line-height: 16px;\r\n text-align: left;\r\n text-decoration-skip-ink: none;\r\n }\r\n \r\n .styles-module__text___UCxPH span {\r\n font-size: 14px;\r\n font-weight: 400;\r\n text-align: left;\r\n text-decoration-skip-ink: none;\r\n }\r\n\r\n .styles-module__textContent___S1KEv {\r\n color: var(--foreground);\r\n }\r\n \r\n .styles-module__closeButton___ELkqN {\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n font-size: 20px;\r\n color: var(--foreground);\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n \r\n .styles-module__closeButton___ELkqN:hover {\r\n color: var(--foreground);\r\n }\r\n\r\n ";
|
|
339
339
|
var styles$e = {"toast":"styles-module__toast___JCV9s","success":"styles-module__success___-BEJb","title":"styles-module__title___TK6Kt","alert":"styles-module__alert___Gum-6","warning":"styles-module__warning___CVMAV","informative":"styles-module__informative___0nyLv","content":"styles-module__content___AING8","info":"styles-module__info___g8ce2","icon":"styles-module__icon___uiYA-","text":"styles-module__text___UCxPH","textContent":"styles-module__textContent___S1KEv","closeButton":"styles-module__closeButton___ELkqN"};
|
|
340
340
|
styleInject(css_248z$j);
|
|
341
341
|
|
|
@@ -8210,7 +8210,7 @@ var TableComponent = function (_a) {
|
|
|
8210
8210
|
React.createElement("td", { colSpan: columns.length + (onActionClick ? 1 : 0), className: styles.noRecords }, noRecordsMessage)))))));
|
|
8211
8211
|
};
|
|
8212
8212
|
|
|
8213
|
-
var css_248z = "/* src/global.css */\r\n@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap\");\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-open-sans-serif);\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n:root {\r\n /* fonts */\r\n --font-open-sans-serif: \"Open Sans\", \"sans-serif\";\r\n --font-open-sans-light: \"Open Sans\", 300;\r\n --font-open-sans-regular: \"Open Sans\", 400;\r\n --font-open-sans-bold: \"Open Sans\", 700;\r\n /* colors */\r\n --color-primary: #005a92;\r\n --color-secondary: #303030;\r\n --color-success: #198754;\r\n --color-warning: #cb8700;\r\n --color-information: #1a95b0;\r\n --color-danger: #cb0a0a;\r\n --color-focus: var(--color-information);\r\n --color-focus-outline: #0091ea80;\r\n --color-placeholder: #9ca4b47d;\r\n --color-border: #cfcfcffc;\r\n --color-label: #303030;\r\n --color-input: #30303090;\r\n --background-color-success: #1987541a;\r\n --background-color-error: #cb0a0a1a;\r\n --background-color-warning: #cb87001a;\r\n --background-color-table-primary: #eeeeee;\r\n --background-color-table-secondary: #f6f6f6;\r\n --background-color-table-hover: #e5f1f9;\r\n /* input */\r\n --input-border: 1px solid var(--color-border);\r\n --input-border-danger: 1px solid var(--color-danger);\r\n --input-border-radius: 8px;\r\n --input-border-focus: 1px solid var(--color-focus);\r\n --input-cursor: pointer;\r\n --input-font-size: 14px;\r\n --input-font-weight: 700;\r\n --input-line-height: 21px;\r\n --input-outline-focus: solid var(--color-focus-outline) 1.5px;\r\n --input-outline-danger: solid var(--color-danger) 1.5px;\r\n}\r\n";
|
|
8213
|
+
var css_248z = "/* src/global.css */\r\n@import url(\"https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap\");\r\n*,\r\n*::before,\r\n*::after {\r\n box-sizing: border-box;\r\n}\r\n\r\nbody {\r\n font-family: var(--font-open-sans-serif);\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n:root {\r\n /* fonts */\r\n --font-open-sans-serif: \"Open Sans\", \"sans-serif\";\r\n --font-open-sans-light: \"Open Sans\", 300;\r\n --font-open-sans-regular: \"Open Sans\", 400;\r\n --font-open-sans-bold: \"Open Sans\", 700;\r\n /* colors */\r\n --color-primary: #005a92;\r\n --color-secondary: #303030;\r\n --color-success: #198754;\r\n --color-warning: #cb8700;\r\n --color-information: #1a95b0;\r\n --color-danger: #cb0a0a;\r\n --color-focus: var(--color-information);\r\n --color-focus-outline: #0091ea80;\r\n --color-placeholder: #9ca4b47d;\r\n --color-border: #cfcfcffc;\r\n --color-label: #303030;\r\n --color-input: #30303090;\r\n --background-color-success: #1987541a;\r\n --background-color-error: #cb0a0a1a;\r\n --background-color-warning: #cb87001a;\r\n --background-color-table-primary: #eeeeee;\r\n --background-color-table-secondary: #f6f6f6;\r\n --background-color-table-hover: #e5f1f9;\r\n /* input */\r\n --input-border: 1px solid var(--color-border);\r\n --input-border-danger: 1px solid var(--color-danger);\r\n --input-border-radius: 8px;\r\n --input-border-focus: 1px solid var(--color-focus);\r\n --input-cursor: pointer;\r\n --input-font-size: 14px;\r\n --input-font-weight: 700;\r\n --input-line-height: 21px;\r\n --input-outline-focus: solid var(--color-focus-outline) 1.5px;\r\n --input-outline-danger: solid var(--color-danger) 1.5px;\r\n\r\n\r\n /* Theming colors */\r\n --background-color: #fff;\r\n --foreground: #303030;\r\n --success-color: #198754;\r\n --warning-color: #CB8700;\r\n --alert-color: #CB0A0A;\r\n --information-color: #1A95B0;\r\n\r\n --primary-color: #005A92;\r\n --pge-gold: #BB9B32;\r\n --hover-color: #00436D;\r\n --icon-color: #4A4A4B;\r\n --border-color: #D9D9D9;\r\n --light-grey-color: #C3C3C3;\r\n --grey-color: #A0A0A0;\r\n \r\n}\r\n\r\n@media (prefers-color-scheme: dark) {\r\n html {\r\n color-scheme: dark;\r\n }\r\n\r\n :root {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n }\r\n \r\n}\r\n\r\n.dark-mode {\r\n --background-color: #303030;\r\n --foreground: #fff;\r\n --success-color: #4feba3;\r\n --warning-color: #e3a833;\r\n --alert-color: #ff5858;\r\n --information-color: #37adf6;\r\n}\r\n";
|
|
8214
8214
|
styleInject(css_248z);
|
|
8215
8215
|
|
|
8216
8216
|
exports.Accordion = Accordion;
|
package/package.json
CHANGED
|
@@ -36,7 +36,8 @@
|
|
|
36
36
|
"lib"
|
|
37
37
|
],
|
|
38
38
|
"scripts": {
|
|
39
|
-
"
|
|
39
|
+
"start": "npm run storybook",
|
|
40
|
+
"storybook": "storybook dev -p 6006 --ci",
|
|
40
41
|
"build-storybook": "storybook build",
|
|
41
42
|
"build": "rollup -c rollup.config.cjs",
|
|
42
43
|
"prepare": "husky"
|
|
@@ -45,7 +46,7 @@
|
|
|
45
46
|
"module": "lib/index.esm.js",
|
|
46
47
|
"types": "lib/index.d.ts",
|
|
47
48
|
"name": "pge-front-common",
|
|
48
|
-
"version": "10.
|
|
49
|
+
"version": "10.2.0",
|
|
49
50
|
"description": "",
|
|
50
51
|
"keywords": [],
|
|
51
52
|
"author": "sturmer cesar",
|