@zydon/common 1.0.91 → 1.0.92
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 +136 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,5 +1,139 @@
|
|
|
1
|
-
|
|
1
|
+
# Design system da Zydon
|
|
2
2
|
|
|
3
|
+
## Instalação no seu projeto
|
|
4
|
+
|
|
5
|
+
- **instalação pacote:** `yarn add @zydon/common`
|
|
6
|
+
- **instalação dependências necessárias:** `yarn add @emotion/react @emotion/styled @mui/lab @mui/material @mui/x-data-grid-premium @mui/x-date-pickers-pro @mui/x-license-pro react-hook-form react-router-dom`
|
|
7
|
+
- **instalação @types necessários:** `yarn add @types/react-lazy-load-image-component -D`
|
|
8
|
+
|
|
9
|
+
## Configuração `@zydon/common`
|
|
10
|
+
Basta fazer a seguinte configuração no arquivo `main.ts`:
|
|
11
|
+
```
|
|
12
|
+
import React from 'react';
|
|
13
|
+
import { LicenseInfo } from '@mui/x-license-pro';
|
|
14
|
+
import { Common } from '@zydon/common';
|
|
15
|
+
import ReactDOM from 'react-dom/client';
|
|
16
|
+
|
|
17
|
+
import '@zydon/common/styles.css';
|
|
18
|
+
|
|
19
|
+
import App from './App';
|
|
20
|
+
|
|
21
|
+
LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_PREMIUM_KEY);
|
|
22
|
+
|
|
23
|
+
ReactDOM.createRoot(document.getElementById('root')!).render(
|
|
24
|
+
<React.StrictMode>
|
|
25
|
+
<Common themeColor="cor_hexadecimal_aqui">
|
|
26
|
+
<App />
|
|
27
|
+
</Common>
|
|
28
|
+
</React.StrictMode>,
|
|
29
|
+
);
|
|
30
|
+
|
|
31
|
+
```
|
|
32
|
+
## Recursos disponíveis
|
|
33
|
+
> Esse pacote tem os seguintes recursos disponiveis (components, hooks, utils e types):
|
|
34
|
+
|
|
35
|
+
### Componentes
|
|
36
|
+
- **animate:** recursos construídos utilizando [framer-motion](https://www.npmjs.com/package/framer-motion)
|
|
37
|
+
- **Autocomplete:** componente dropdown de seleção única/múltipla
|
|
38
|
+
- **ColorPickerInput:** componente de seleção de cor
|
|
39
|
+
- **Common:** componente wrapper/provider que faz esse pacote funcionar
|
|
40
|
+
- **ConfirmDelete:** mensagem de confirmação de exclusão
|
|
41
|
+
- **CustomAvatar e CustomAvatarGroup**: avatares customizados
|
|
42
|
+
- **DataGrid:** componente de tabela construido em cima do [MUI-Datagrid](https://mui.com/x/react-data-grid/)
|
|
43
|
+
- **Delayed:** componente que renderiza um `children` com um delay
|
|
44
|
+
- **Drawer:** componente Drawer construido em cima do [MUI-Drawer](https://mui.com/material-ui/react-drawer/)
|
|
45
|
+
- **Editor:** editor `rich text` construido em cima do [react-quill](https://www.npmjs.com/package/react-quill)
|
|
46
|
+
- **FixedProgressBar:** barra de progresso de loading que é apresentado fixo no topo da tela
|
|
47
|
+
- **Iconify:** componente de ícones `SVG` construido em cima do [@iconify/react](https://www.npmjs.com/package/@iconify/react)
|
|
48
|
+
- **Image:** componente de imagem construido em cima do [react-lazy-load-image-component](https://www.npmjs.com/package/react-lazy-load-image-component) *(Priorize quando for utilizar/rendererizar uma imagem)*
|
|
49
|
+
- **Incrementer:** input numérico com botões laterais para incrementar/decrementar o valor
|
|
50
|
+
- **ImageCrop:** componente para cortar imagens
|
|
51
|
+
- **Label:** componente que renderiza uma tag *bonitinha*
|
|
52
|
+
- **MaskedInput:** input com máscara. Util para campos como `CPF`, `CNPJ`, `Telefone`
|
|
53
|
+
- **MenuPopover:** menu flutuante com setinha apontado para um ponto escolhido
|
|
54
|
+
- **Modal:** componente de modal
|
|
55
|
+
- **NumberInput:** input que aceita somente números
|
|
56
|
+
- **Portal:** componente que renderiza o `children` em outro local desejado [React Portals](https://react.dev/reference/react-dom/createPortal)
|
|
57
|
+
- **Scrollbar:** Scrollbar `bonitinha` construido em cima do [simplebar-react](https://www.npmjs.com/package/simplebar-react)
|
|
58
|
+
- **SearchInput:** componente para busca/filtros. Funciona com `onChange` e como click na tecla `enter`
|
|
59
|
+
- **snackbar:** componente para mostrar mensagens `[sucesso | alerta | informação | erro]` para o usuário
|
|
60
|
+
```
|
|
61
|
+
const { enqueueSnackbar } = useSnackbar();
|
|
62
|
+
enqueueSnackbar('Mensagem', { variant: 'error' });
|
|
63
|
+
```
|
|
64
|
+
- **Steps:** componente que indica etapas e o progresso. Construido em cima do [MUI-Stepper](https://mui.com/material-ui/react-stepper/)
|
|
65
|
+
- **TabPanel:** componente para renderizar o conteúdos de uma `Tab`. Todas as tabs são rendreziadas, mas somente o conteúdo da `Tab` ativa será exibido
|
|
66
|
+
- **ThemeProvider:** wrapper/provider para configuração do tema. *(Provavelmente vc nunca vai precisar usá-lo, já que ele já está includo no component* `<Common />`)
|
|
67
|
+
- **upload (Upload, UploadAvatar, UplaodBox e UploadWithCrop):** componentes para uploads de arquivos
|
|
68
|
+
|
|
69
|
+
#### Componentes de formulário (react-hook-form)
|
|
70
|
+
- **Form:** componente de formulário construido em cima do [react-hook-form](https://www.npmjs.com/package/react-hook-form). *(Todos os componentes abaixo funcionam somente dentro desse componente:)* `<Form />`
|
|
71
|
+
- **Autocomplete:** componente dropdown de seleção única/múltipla
|
|
72
|
+
- **Checkbox / MultiCheckbox:** caixa seleção
|
|
73
|
+
- **Codes:** campos para inserção de código. Ex: código recebido por e-email
|
|
74
|
+
- **ColorPickerField:** componente de seleção de cor
|
|
75
|
+
- **DatePicker:** componente de seleção de data. Construido em cima do [MUI-DatePicker](https://mui.com/x/react-date-pickers/date-picker/)
|
|
76
|
+
- **DateRangePicker:** componente de seleção de intervalo de data. Construido em cima do [MUI-DateRangePicker](https://mui.com/x/react-date-pickers/date-range-picker/)
|
|
77
|
+
- **DateTimePicker:** componente de seleção de data e hora. Construido em cima do [MUI-DateTimePicker](https://mui.com/x/react-date-pickers/getting-started/)
|
|
78
|
+
- **EditorField:** editor `rich text` construido em cima do [react-quill](https://www.npmjs.com/package/react-quill)
|
|
79
|
+
- **Field:** componente de inserção de texto. Construido em cima do [MUI-TextField](https://mui.com/material-ui/react-text-field/)
|
|
80
|
+
- **MaskedInputField:** componente de input com máscara. Util para campos como `CPF`, `CNPJ`, `Telefone`
|
|
81
|
+
- **PasswordField:** componente para inserção de senha com um olhinho para visualização da senha no canto direito.
|
|
82
|
+
- **RadioGroup:** componente de seleção única. Construido em cima do [MUI-RadioGroup](https://mui.com/material-ui/api/radio-group/)
|
|
83
|
+
- **Switch:** componente de ativação/desativação. Construido em cima do [MUI-Switch](https://mui.com/material-ui/react-switch/)
|
|
84
|
+
- **TimePicker:** componente de seleção hora. Construido em cima do [MUI-TimePicker](https://mui.com/x/react-date-pickers/time-picker/)
|
|
85
|
+
- **UploadWithCropField:** componente para upload/crop de imagem
|
|
86
|
+
|
|
87
|
+
#### Componentes de navegação
|
|
88
|
+
- **NavSectionHorizontal:** itens para navegação na horizontal
|
|
89
|
+
- **NavSectionMini:** itens para navegação, versão mini
|
|
90
|
+
- **NavSectionVertical:** itens para navegação na vertical
|
|
91
|
+
|
|
92
|
+
### Utils
|
|
93
|
+
- **file:** utils para lidar com arquivos `(downloadFile)`
|
|
94
|
+
- **formatNumber:** utils para formatar números `(fNumber, fCurrency, fPercent, fShortenNumber, fData result, fWithDecimalPlacesOrNot)`
|
|
95
|
+
- **formatTime:** utils para lidar com datas `(fDate, fDateTime format, fTimestamp, fToNow)` (*Construido utilizando* [date-fns](https://www.npmjs.com/package/date-fns))
|
|
96
|
+
- **cssStyles:** utils para lidar com estilos CSS `(bgBlur, bgGradient, textGradient, filterStyles, hideScrollbarY, hideScrollbarX)`
|
|
97
|
+
- **routes:** utils para lidar com rotas `(getRoot)`
|
|
98
|
+
- **sort:** utils para lidar com ordenação de arrys de objetos `(sort, updatePosition)`
|
|
99
|
+
- **validators:** utils para validação de dados `(cpfIsValid, cnpjIsValid)`
|
|
100
|
+
- **number:** utils para lidar com números `(isMultiple, roundIfNecessary)`
|
|
101
|
+
- **uuidv4:** utils para gerar um UUID v4
|
|
102
|
+
- **loadable:** util para utilizar com code split. Ele irá carregar o compomente e exibirá um loading fixo no topo da tela
|
|
103
|
+
|
|
104
|
+
### Hooks
|
|
105
|
+
- **useActiveElement:** hook que indicar qual compnente (input, button, etc.) está com foco ativo
|
|
106
|
+
- **useActiveLink:** hook que mostra se a rota passada está ativa ou não
|
|
107
|
+
- **useCopyToClipboard:** hook para copiar algum texto para a área de transferência. Equivalente a `ctrl`+`c`
|
|
108
|
+
- **useDatagrid:** hook com recursos utéis para serem usados por um `<Datagrid />`
|
|
109
|
+
- **useDeepCompareEffect:** hook semelhante ao `useEffect` do React, mas que lida melhor com objetos complexos
|
|
110
|
+
- **useEventListener:** hook para lidar com eventos JavaScript
|
|
111
|
+
- **useIsMounting:** hook que retorna um booleano indicando se é a primeira renderezição do componente
|
|
112
|
+
- **useResponsive:** hook que retorna qual a media-query está ativa `(xs, sm, md, lg, xl)`
|
|
113
|
+
- **useTabs:** hook com recursos utéis para lidar com tabs `(currentTab, onChangeTab, setCurrentTab)`
|
|
114
|
+
- **useToggle:** hook que alterna o estado que uma variável boolean. Ex:
|
|
115
|
+
```
|
|
116
|
+
const [detailsOpen, toggleDetailsOpen] = useToggle(true);
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
### Types
|
|
120
|
+
- **PagedRequest** interface para tipar requisições paginadas. Ex: `PagedRequest<{userId: string}>` *(agora o userId também vai estar disponivel no objeto)*
|
|
121
|
+
```
|
|
122
|
+
export type PagedRequest<T = unknown> = T & {
|
|
123
|
+
search?: string;
|
|
124
|
+
page?: number;
|
|
125
|
+
perPage?: number;
|
|
126
|
+
sort?: string;
|
|
127
|
+
dir?: 'asc' | 'desc';
|
|
128
|
+
};
|
|
129
|
+
```
|
|
130
|
+
|
|
131
|
+
- **PagedResponse** interface para tipar respostas paginadas. Ex: `PagedResponse<User[]>` *(agora sabemos que no 'items' temos um array de usuários)*
|
|
3
132
|
```
|
|
4
|
-
|
|
133
|
+
export interface PagedResponse<T> {
|
|
134
|
+
currentPage: number;
|
|
135
|
+
perPage: number;
|
|
136
|
+
total: number;
|
|
137
|
+
items: T;
|
|
138
|
+
}
|
|
5
139
|
```
|