-
instalação pacote:
yarn add @zydon/common
-
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
Basta fazer a seguinte configuração no arquivo main.ts
:
import React from 'react';
import { LicenseInfo } from '@mui/x-license-pro';
import { Common } from '@zydon/common';
import ReactDOM from 'react-dom/client';
import '@zydon/common/styles.css';
import App from './App';
LicenseInfo.setLicenseKey(import.meta.env.VITE_MUI_PREMIUM_KEY);
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Common themeColor="cor_hexadecimal_aqui">
<App />
</Common>
</React.StrictMode>,
);
Esse pacote tem os seguintes recursos disponiveis (components, hooks, utils e types):
- animate: recursos construídos utilizando framer-motion
- Autocomplete: componente dropdown de seleção única/múltipla
- ColorPickerInput: componente de seleção de cor
- Common: componente wrapper/provider que faz esse pacote funcionar
- CommonSSR: componente wrapper/provider que faz esse pacote funcionar em aplicações NextJS (SSR)
- ConfirmDelete: mensagem de confirmação de exclusão
- CustomAvatar e CustomAvatarGroup: avatares customizados
- DataGrid: componente de tabela construido em cima do MUI-Datagrid
-
Delayed: componente que renderiza um
children
com um delay - Drawer: componente Drawer construido em cima do MUI-Drawer
- FixedProgressBar: barra de progresso de loading que é apresentado fixo no topo da tela
-
Iconify: componente de ícones
SVG
construido em cima do @iconify/react - Incrementer: input numérico com botões laterais para incrementar/decrementar o valor
- ImageCrop: componente para cortar imagens
- Label: componente que renderiza uma tag bonitinha
-
MaskedInput: input com máscara. Util para campos como
CPF
,CNPJ
,Telefone
- MenuPopover: menu flutuante com setinha apontado para um ponto escolhido
- Modal: componente de modal
- NumberInput: input que aceita somente números
-
Portal: componente que renderiza o
children
em outro local desejado React Portals -
Scrollbar: Scrollbar
bonitinha
construido em cima do simplebar-react -
SearchInput: componente para busca/filtros. Funciona com
onChange
e como click na teclaenter
-
snackbar: componente para mostrar mensagens
[sucesso | alerta | informação | erro]
para o usuário
const { enqueueSnackbar } = useSnackbar();
enqueueSnackbar('Mensagem', { variant: 'error' });
- Steps: componente que indica etapas e o progresso. Construido em cima do MUI-Stepper
-
TabPanel: componente para renderizar o conteúdos de uma
Tab
. Todas as tabs são rendreziadas, mas somente o conteúdo daTab
ativa será exibido -
ThemeProvider: wrapper/provider para configuração do tema. (Provavelmente vc nunca vai precisar usá-lo, já que ele já está includo no component
<Common />
) - upload (Upload, UploadAvatar, UplaodBox e UploadWithCrop): componentes para uploads de arquivos
-
Form: componente de formulário construido em cima do react-hook-form. (Todos os componentes abaixo funcionam somente dentro desse componente:)
<Form />
- Autocomplete: componente dropdown de seleção única/múltipla
- Checkbox / MultiCheckbox: caixa seleção
- Codes: campos para inserção de código. Ex: código recebido por e-email
- ColorPickerField: componente de seleção de cor
- DatePicker: componente de seleção de data. Construido em cima do MUI-DatePicker
- DateRangePicker: componente de seleção de intervalo de data. Construido em cima do MUI-DateRangePicker
- DateTimePicker: componente de seleção de data e hora. Construido em cima do MUI-DateTimePicker
- Field: componente de inserção de texto. Construido em cima do MUI-TextField
-
MaskedInputField: componente de input com máscara. Util para campos como
CPF
,CNPJ
,Telefone
- PasswordField: componente para inserção de senha com um olhinho para visualização da senha no canto direito.
- RadioGroupField: componente de seleção única. Construido em cima do MUI-RadioGroup
- Switch: componente de ativação/desativação. Construido em cima do MUI-Switch
- TimePicker: componente de seleção hora. Construido em cima do MUI-TimePicker
- UploadWithCropField: componente para upload/crop de imagem
- UploadAvatarWithCropField: componente para upload/crop de avatar
- Webhook: componente criação e edição de um webhook, necessário estar envolvido de um form
- MultipleChipField: componente de texto que permite adicionar multiplas opçoes em formato de chip
-
file: utils para lidar com arquivos
(downloadFile)
-
formatNumber: utils para formatar números
(fNumber, fCurrency, fPercent, fShortenNumber, fData result, fWithDecimalPlacesOrNot)
-
formatTime: utils para lidar com datas
(fDate, fDateTime format, fTimestamp, fToNow)
(Construido utilizando date-fns) -
cssStyles: utils para lidar com estilos CSS
(bgBlur, bgGradient, textGradient, filterStyles, hideScrollbarY, hideScrollbarX)
-
routes: utils para lidar com rotas
(getRoot)
-
sort: utils para lidar com ordenação de arrys de objetos
(sort, updatePosition)
-
validators: utils para validação de dados
(cpfIsValid, cnpjIsValid)
-
number: utils para lidar com números
(isMultiple, roundIfNecessary)
- uuidv4: utils para gerar um UUID v4
- loadable: util para utilizar com code split. Ele irá carregar o compomente e exibirá um loading fixo no topo da tela
-
mask: utils para aplicação de máscaras em strings
(applyMask, cpfMask, cnpjMask, cepMask, phoneMask)
- useActiveElement: hook que indicar qual compnente (input, button, etc.) está com foco ativo
-
useCopyToClipboard: hook para copiar algum texto para a área de transferência. Equivalente a
ctrl
+c
-
useDatagrid: hook com recursos utéis para serem usados por um
<Datagrid />
-
useDeepCompareEffect: hook semelhante ao
useEffect
do React, mas que lida melhor com objetos complexos - useEventListener: hook para lidar com eventos JavaScript
- useIsMounting: hook que retorna um booleano indicando se é a primeira renderezição do componente
-
useResponsive: hook que retorna qual a media-query está ativa
(xs, sm, md, lg, xl)
-
useTabs: hook com recursos utéis para lidar com tabs
(currentTab, onChangeTab, setCurrentTab)
- useToggle: hook que alterna o estado que uma variável boolean. Ex:
const [detailsOpen, toggleDetailsOpen] = useToggle(true);
-
usePagination: hook para paginar dados de um array
(currentPage, totalPages, currentItems, goToPage, nextPage, prevPage,)
: Ex:
const { currentItems, totalPages, goToPage } = usePagination({
items,
itemsPerPage: 5,
});
-
PagedRequest interface para tipar requisições paginadas. Ex:
PagedRequest<{userId: string}>
(agora o userId também vai estar disponivel no objeto)
export type PagedRequest<T = unknown> = T & {
search?: string;
page?: number;
perPage?: number;
sort?: string;
dir?: 'asc' | 'desc';
};
-
PagedResponse interface para tipar respostas paginadas. Ex:
PagedResponse<User[]>
(agora sabemos que no 'items' temos um array de usuários)
export interface PagedResponse<T> {
currentPage: number;
perPage: number;
total: number;
items: T;
}
-
ListResponse interface para tipar listas com uma prop contendo o total de itens da lista. Ex:
ListResponse<User[]>
(agora sabemos que no 'items' temos um array de usuários)
export interface ListResponse<T> {
total: number;
items: T;
}
Esse pacote é basicamente um projeto react-vite
publicado no npm
.
Para fazer implementações/correções basta clonar o repositório do projeto e subir localmente em sua máquina. Crie uma branch, realize as implementações/correções, depois suba para o repositório e faça merge pra main
.
As alterações serão publicadas automaticamente no npm
em alguns minutos.
Você pode testar suas implementações/correções no componente
App.tsx