@zydon/common NPM

Design system da Zydon

Instalação no seu projeto

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

Configuração `@zydon/common`

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>,
);

Recursos disponíveis

Esse pacote tem os seguintes recursos disponiveis (components, hooks, utils e types):

Componentes

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 tecla enter
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 da Tab 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

Componentes de formulário (react-hook-form)

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

Utils

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)

Hooks

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,
  });

Types

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;
}

Como fazer implementações/correções nesse pacote?

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.