From 1ee1b05d4be2ae57f9380b8e1d269a23cd8f80ef Mon Sep 17 00:00:00 2001 From: danieloprado Date: Wed, 21 Jun 2023 18:10:01 +0000 Subject: [PATCH] Update gh-pages to output generated at 05fb16b --- 404.html | 4 ++-- .../_buildManifest.js | 0 .../_ssgManifest.js | 0 eslint-config/README.html | 4 ++-- forms/Checkbox.html | 4 ++-- forms/DatePicker.html | 4 ++-- forms/Form.html | 4 ++-- forms/Input.html | 4 ++-- forms/README.html | 4 ++-- forms/Radio.html | 4 ++-- forms/Select.html | 4 ++-- forms/Switch.html | 4 ++-- forms/Textarea.html | 4 ++-- forms/TimePicker.html | 4 ++-- forms/example.html | 4 ++-- hooks/README.html | 4 ++-- hooks/useBoolean.html | 4 ++-- hooks/useCallbackGenerator.html | 4 ++-- hooks/useMediaBreakpoint.html | 4 ++-- hooks/useMediaQuery.html | 4 ++-- hooks/useObservable.html | 4 ++-- hooks/useObservableCallback.html | 4 ++-- hooks/useObservableEffect.html | 4 ++-- hooks/useObservablePaginated.html | 4 ++-- hooks/useObservableRefresh.html | 4 ++-- hooks/usePromise.html | 4 ++-- hooks/usePromiseCallback.html | 4 ++-- hooks/usePromiseEffect.html | 4 ++-- hooks/usePromisePaginated.html | 4 ++-- hooks/usePromiseRefresh.html | 4 ++-- hooks/useQueryPaginated.html | 4 ++-- index.html | 4 ++-- migration.html | 4 ++-- releases.html | 4 ++-- styles.html | 4 ++-- ui-components/Layout.html | 4 ++-- ui-components/README.html | 4 ++-- ui-components/useAntdTableProps.html | 4 ++-- 38 files changed, 72 insertions(+), 72 deletions(-) rename _next/static/{8awaaSghkQB6UOpUGwaov => iflNGQ94cvMRA3nbBd9NQ}/_buildManifest.js (100%) rename _next/static/{8awaaSghkQB6UOpUGwaov => iflNGQ94cvMRA3nbBd9NQ}/_ssgManifest.js (100%) diff --git a/404.html b/404.html index 0546d5b15..c9acfefc2 100644 --- a/404.html +++ b/404.html @@ -1,4 +1,4 @@ -404: This page could not be found
\ No newline at end of file + }

404

This page could not be found.

\ No newline at end of file diff --git a/_next/static/8awaaSghkQB6UOpUGwaov/_buildManifest.js b/_next/static/iflNGQ94cvMRA3nbBd9NQ/_buildManifest.js similarity index 100% rename from _next/static/8awaaSghkQB6UOpUGwaov/_buildManifest.js rename to _next/static/iflNGQ94cvMRA3nbBd9NQ/_buildManifest.js diff --git a/_next/static/8awaaSghkQB6UOpUGwaov/_ssgManifest.js b/_next/static/iflNGQ94cvMRA3nbBd9NQ/_ssgManifest.js similarity index 100% rename from _next/static/8awaaSghkQB6UOpUGwaov/_ssgManifest.js rename to _next/static/iflNGQ94cvMRA3nbBd9NQ/_ssgManifest.js diff --git a/eslint-config/README.html b/eslint-config/README.html index 6687ededb..aab1ea4c3 100644 --- a/eslint-config/README.html +++ b/eslint-config/README.html @@ -1,4 +1,4 @@ -Houston | ESLint
\ No newline at end of file +mas resumidamente é:

bash
1
# Removendo Imports React não Utilizadas
2
npx react-codemod update-react-imports

tsconfig.json

json
1
{
2
  //... suas configurações
3
  "compilerOptions": {
4
    "jsx": "react-jsx" //Troque esse configuração
5
  }
6
}

.eslintrc

json
1
{
2
  "extends": ["@eduzz/eslint-config-houston"],
3
  "rules": {
4
    //Adicione essas rules
5
    "react/jsx-uses-react": "off",
6
    "react/react-in-jsx-scope": "off"
7
  }
8
}
Houston - Feito com ❤️ pela Eduzz
ESLint Config
React
React Native:
Node
Configurações Extras
VSCode
React Hooks
React 17 e JSX
\ No newline at end of file diff --git a/forms/Checkbox.html b/forms/Checkbox.html index 37f18aade..5f763058c 100644 --- a/forms/Checkbox.html +++ b/forms/Checkbox.html @@ -1,4 +1,4 @@ -Houston | Checkbox

Checkbox#

Checkbox do Antd com a -configuração do react-form-hook.

Importação#

js
1
import Checkbox from '@eduzz/houston-forms/Checkbox';

Exemplo#

Checkbox Props#

Todas as props do Checkbox do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
multiplebooleanfalse-O valor será um array
checkedValueanyfalsetrueValor customizado se checked
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Checkbox
Importação
Exemplo
Checkbox Props
\ No newline at end of file +configuração do react-form-hook.

Importação#

js
1
import Checkbox from '@eduzz/houston-forms/Checkbox';

Exemplo#

Checkbox Props#

Todas as props do Checkbox do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
multiplebooleanfalse-O valor será um array
checkedValueanyfalsetrueValor customizado se checked
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Checkbox
Importação
Exemplo
Checkbox Props
\ No newline at end of file diff --git a/forms/DatePicker.html b/forms/DatePicker.html index 9ae389cbb..8710676c1 100644 --- a/forms/DatePicker.html +++ b/forms/DatePicker.html @@ -1,4 +1,4 @@ -Houston | DatePicker

Date Picker#

Datepicker do Antd com a -configuração do react-form-hook.

Importação#

js
1
import DatePicker from '@eduzz/houston-forms/DatePicker';

Exemplo#

Props#

Todas as props do DatePicker do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
maxDateDatefalse--
minDateDatefalse--
Houston - Feito com ❤️ pela Eduzz
Date Picker
Importação
Exemplo
Props
\ No newline at end of file +configuração do react-form-hook.

Importação#

js
1
import DatePicker from '@eduzz/houston-forms/DatePicker';

Exemplo#

Props#

Todas as props do DatePicker do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
maxDateDatefalse--
minDateDatefalse--
Houston - Feito com ❤️ pela Eduzz
Date Picker
Importação
Exemplo
Props
\ No newline at end of file diff --git a/forms/Form.html b/forms/Form.html index a2d7cc645..f12de6a4e 100644 --- a/forms/Form.html +++ b/forms/Form.html @@ -1,4 +1,4 @@ -Houston | Form
\ No newline at end of file +
23
const SubComponent = () => {
24
const form = useFormContext();
25
...
26
};
proptipoobrigatóriopadrãodescrição
idstringfalse-
classNamestringfalse-
contextreact-hook-form useForm returntrue--
onSubmitfunctiontrue--
Form
Importação
Exemplo
Contexto interno
\ No newline at end of file diff --git a/forms/Input.html b/forms/Input.html index 3e6d50476..85ba6ad7f 100644 --- a/forms/Input.html +++ b/forms/Input.html @@ -1,4 +1,4 @@ -Houston | Input

Input#

Input do Antd com a -configuração do react-form-hook.

Props#

Todas as props do Input do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
maskBuildInMasks/MaskAdapterfalse-Máscara que será aplicada no campo.
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Input
Props
\ No newline at end of file +configuração do react-form-hook.

Props#

Todas as props do Input do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
maskBuildInMasks/MaskAdapterfalse-Máscara que será aplicada no campo.
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Input
Props
\ No newline at end of file diff --git a/forms/README.html b/forms/README.html index c56b60ca5..a1cff152b 100644 --- a/forms/README.html +++ b/forms/README.html @@ -1,4 +1,4 @@ -Houston | Visão geral
\ No newline at end of file +
25
<Button type='submit'>Submit</Button>
26
</Form>

Parametros#

O único parametro especifico é o validationSchema, o resto é configuração padrão do react-hook-form.

proptipoobrigatóriodescrição
validationSchemafunctiontrueUtilizado para validação do formulário
Formulários
Instalação
Técnologias
Importação
Como usar
Parametros
\ No newline at end of file diff --git a/forms/Radio.html b/forms/Radio.html index e82b45b9e..7908e5d85 100644 --- a/forms/Radio.html +++ b/forms/Radio.html @@ -1,4 +1,4 @@ -Houston | Radio

Radio#

Radio do Antd com a -configuração do react-form-hook.

Importação#

js
1
import Radio from '@eduzz/houston-forms/Radio';

Exemplo#

Radio Props#

Todas as props do Radio do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
checkedValueanyfalsetrueValor customizado se checked
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Radio
Importação
Exemplo
Radio Props
\ No newline at end of file +configuração do react-form-hook.

Importação#

js
1
import Radio from '@eduzz/houston-forms/Radio';

Exemplo#

Radio Props#

Todas as props do Radio do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
checkedValueanyfalsetrueValor customizado se checked
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Radio
Importação
Exemplo
Radio Props
\ No newline at end of file diff --git a/forms/Select.html b/forms/Select.html index 29642e68d..52c8e1027 100644 --- a/forms/Select.html +++ b/forms/Select.html @@ -1,4 +1,4 @@ -Houston | Select

Select#

Select do Antd com a -configuração do react-form-hook.

Importação#

js
1
import Select from '@eduzz/houston-forms/Select';

Exemplo#

Seleção de múltiplas opções#

Select Props#

Todas as props do Select do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.

Select.Option Props#

Todas as props do Select.Options do Antd são validos

Houston - Feito com ❤️ pela Eduzz
Select
Importação
Exemplo
Seleção de múltiplas opções
Select Props
Select.Option Props
\ No newline at end of file +configuração do react-form-hook.

Importação#

js
1
import Select from '@eduzz/houston-forms/Select';

Exemplo#

Seleção de múltiplas opções#

Select Props#

Todas as props do Select do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.

Select.Option Props#

Todas as props do Select.Options do Antd são validos

Houston - Feito com ❤️ pela Eduzz
Select
Importação
Exemplo
Seleção de múltiplas opções
Select Props
Select.Option Props
\ No newline at end of file diff --git a/forms/Switch.html b/forms/Switch.html index 4e797728a..350f59d46 100644 --- a/forms/Switch.html +++ b/forms/Switch.html @@ -1,4 +1,4 @@ -Houston | Switch

Switch#

Switch do Antd com a -configuração do react-form-hook.

Importação#

js
1
import Switch from '@eduzz/houston-forms/Switch';

Exemplo#

Switch Props#

Todas as props do Switch do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
checkedValueanyfalsetrueValor customizado se checked
childrenReactNodefalse-Label do switch
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Switch
Importação
Exemplo
Switch Props
\ No newline at end of file +configuração do react-form-hook.

Importação#

js
1
import Switch from '@eduzz/houston-forms/Switch';

Exemplo#

Switch Props#

Todas as props do Switch do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
checkedValueanyfalsetrueValor customizado se checked
childrenReactNodefalse-Label do switch
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Switch
Importação
Exemplo
Switch Props
\ No newline at end of file diff --git a/forms/Textarea.html b/forms/Textarea.html index 41ee00e0b..1ea23204b 100644 --- a/forms/Textarea.html +++ b/forms/Textarea.html @@ -1,4 +1,4 @@ -Houston | Textarea

Textarea#

Input.Textarea do Antd com a -configuração do react-form-hook.

Props#

Todas as props do Input.Textarea do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
maskBuildInMasks/MaskAdapterfalse-Máscara que será aplicada no campo.
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Textarea
Props
\ No newline at end of file +configuração do react-form-hook.

Props#

Todas as props do Input.Textarea do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
maskBuildInMasks/MaskAdapterfalse-Máscara que será aplicada no campo.
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
Houston - Feito com ❤️ pela Eduzz
Textarea
Props
\ No newline at end of file diff --git a/forms/TimePicker.html b/forms/TimePicker.html index 9d3bd62fa..1b1fe59ff 100644 --- a/forms/TimePicker.html +++ b/forms/TimePicker.html @@ -1,4 +1,4 @@ -Houston | TimePicker

Date Picker#

TimePicker do Antd com a -configuração do react-form-hook.

Importação#

js
1
import TimePicker from '@eduzz/houston-forms/TimePicker';

Exemplo#

Props#

Todas as props do TimePicker do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
maxDateDatefalse--
minDateDatefalse--
Houston - Feito com ❤️ pela Eduzz
Date Picker
Importação
Exemplo
Props
\ No newline at end of file +configuração do react-form-hook.

Importação#

js
1
import TimePicker from '@eduzz/houston-forms/TimePicker';

Exemplo#

Props#

Todas as props do TimePicker do Antd são validos, abaixos as props extras.

proptipoobrigatóriopadrãodescrição
namestringfalse-O name é importante para poder linkar o campo com o formulário
labelstringfalse--
helpstringfalse-Exibe texto de ajuda abaixo do componente de texto.
errorstringfalse-Exibe uma mensagem de erro no componente de texto, assim como indica erro no campo.
maxDateDatefalse--
minDateDatefalse--
Houston - Feito com ❤️ pela Eduzz
Date Picker
Importação
Exemplo
Props
\ No newline at end of file diff --git a/forms/example.html b/forms/example.html index 73223d52e..57b09fa3d 100644 --- a/forms/example.html +++ b/forms/example.html @@ -1,4 +1,4 @@ -Houston | Exemplo

Exemplo de Validação#

Este é um exemplo utilzando o @eduzz/houston-ui.

O componente de formulário (Form) é utilizado para a criação, validação e controle de formulários de uma aplicação, -podendo ser utilizado através de um contexto ou hook.

Importação#

js
1
import useForm, { FormModel } from '@eduzz/houston-forms/useForm';
2
import Form from '@eduzz/houston-ui/Forms/Form';

Exemplo#

Campos dinâmicos#

Hooks para validação de formulários e máscaras#

Veja os hooks do Houston para validar formulários e máscaras em @eduzz/houston-forms.

useForm props#

O único parametro especifico é o validationSchema, o resto é configuração padrão do react-hook-form.

proptipoobrigatóriodescrição
validationSchemafunctiontrueUtilizado para validação do formulário
Houston - Feito com ❤️ pela Eduzz
Exemplo de Validação
Importação
Exemplo
Campos dinâmicos
Hooks para validação de formulários e máscaras
useForm props
\ No newline at end of file +podendo ser utilizado através de um contexto ou hook.

Importação#

js
1
import useForm, { FormModel } from '@eduzz/houston-forms/useForm';
2
import Form from '@eduzz/houston-ui/Forms/Form';

Exemplo#

Campos dinâmicos#

Hooks para validação de formulários e máscaras#

Veja os hooks do Houston para validar formulários e máscaras em @eduzz/houston-forms.

useForm props#

O único parametro especifico é o validationSchema, o resto é configuração padrão do react-hook-form.

proptipoobrigatóriodescrição
validationSchemafunctiontrueUtilizado para validação do formulário
Houston - Feito com ❤️ pela Eduzz
Exemplo de Validação
Importação
Exemplo
Campos dinâmicos
Hooks para validação de formulários e máscaras
useForm props
\ No newline at end of file diff --git a/hooks/README.html b/hooks/README.html index 9ebd58f11..673ca30b1 100644 --- a/hooks/README.html +++ b/hooks/README.html @@ -1,4 +1,4 @@ -Houston | Visão geral

Hooks#

version size

Hooks diversos para auxiliar no desenvolvimento.

Instalação#

bash
1
yarn add @eduzz/houston-hooks

Configuração#

ts
1
import setHoustonHooksConfig from '@eduzz/houston-hooks/config';
2

-
3
setHoustonHooksConfig({
4
  onUnhandledError: (err, origin) => {
5
    //adicione seu logger
6
  },
7
  pagination: { pageStart: 1, perPage: 25 }
8
});
configdefaultdescrição
onUnhandledErrornullPara facilitar, adicone o onUnhandledError, assim todo o erro ocorrido (não tratado) nos hooks usePromise e useObservable será enviados para esse função, ELA É APENAS PARA LOGAR, NÃO TRATA NADA.
pagination{ pageStart: 1, perPage: 25 }Configuração default da paginação dos hooks useObservablePaginated e usePromisePaginated
Houston - Feito com ❤️ pela Eduzz
Hooks
Instalação
Configuração
\ No newline at end of file +
3
setHoustonHooksConfig({
4
onUnhandledError: (err, origin) => {
5
//adicione seu logger
6
},
7
pagination: { pageStart: 1, perPage: 25 }
8
});
configdefaultdescrição
onUnhandledErrornullPara facilitar, adicone o onUnhandledError, assim todo o erro ocorrido (não tratado) nos hooks usePromise e useObservable será enviados para esse função, ELA É APENAS PARA LOGAR, NÃO TRATA NADA.
pagination{ pageStart: 1, perPage: 25 }Configuração default da paginação dos hooks useObservablePaginated e usePromisePaginated
Hooks
Instalação
Configuração
\ No newline at end of file diff --git a/hooks/useBoolean.html b/hooks/useBoolean.html index 8dfa6fd6f..56cb4438b 100644 --- a/hooks/useBoolean.html +++ b/hooks/useBoolean.html @@ -1,4 +1,4 @@ -Houston | useBoolean

useBoolean#

Esse é um hooks apenas para facilitar o uso de booleanos, útil quando deseja passar como callback de uma função

Como usar#

tsx
1
const [value, toggleValue, toTrue, toFalse] = useBoolean();

Parâmetros e Retorno#

tsx
1
/**
2
 * Simplify the way to use a boolean state
3
 * @param initial A boolen of a function that return a  boolean
4
 * @returns [value, toogleValue, toTrue, toFalse]
5
 */
6
export default function useBoolean(initial?: boolean | (() => boolean)): [boolean, () => void, () => void, () => void];
Houston - Feito com ❤️ pela Eduzz
useBoolean
Como usar
Parâmetros e Retorno
\ No newline at end of file +})('light')

useBoolean#

Esse é um hooks apenas para facilitar o uso de booleanos, útil quando deseja passar como callback de uma função

Como usar#

tsx
1
const [value, toggleValue, toTrue, toFalse] = useBoolean();

Parâmetros e Retorno#

tsx
1
/**
2
 * Simplify the way to use a boolean state
3
 * @param initial A boolen of a function that return a  boolean
4
 * @returns [value, toogleValue, toTrue, toFalse]
5
 */
6
export default function useBoolean(initial?: boolean | (() => boolean)): [boolean, () => void, () => void, () => void];
Houston - Feito com ❤️ pela Eduzz
useBoolean
Como usar
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/useCallbackGenerator.html b/hooks/useCallbackGenerator.html index 7e838d188..a97a18702 100644 --- a/hooks/useCallbackGenerator.html +++ b/hooks/useCallbackGenerator.html @@ -1,4 +1,4 @@ -Houston | useCallbackGenerator
\ No newline at end of file +
6
//...
7
<button onClick={navigateTo('details-key', 'details', 1)}>Detalhes<button>
8
<button onClick={navigateTo('payment-key', 'payment', 2)}>Pagamento<button>

Parâmetros e Retorno#

tsx
1
/**
2
 * Função geradora de funções com parametros cascateados
3
 * @param generator função que será executada com o parametros passados
4
 * @param deps
5
 * @returns Função geradora:
6
 *   @param key: unique key usado para cache
7
 *   @param args: argumentos que serão pré-definidos
8
 */
9
export default function useCallbackGenerator<F extends (...args: any[]) => any>(
10
  generator: F,
11
  deps: React.DependencyList
12
): (key: string, ...args: ParametersOptional<F>) => (...callArgs: any) => ReturnType<F>;
useCallbackGenerator
Como usar
Mais Parâmetros
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/useMediaBreakpoint.html b/hooks/useMediaBreakpoint.html index 9ba02dfca..51d460eb9 100644 --- a/hooks/useMediaBreakpoint.html +++ b/hooks/useMediaBreakpoint.html @@ -1,4 +1,4 @@ -Houston | useMediaBreakpoint

useMediaBreakpoint#

É usado para lidar com dimensionamento das telas e responsividade em componentes React com tamanhos pré-definidos do tema

Como usar#

tsx
1
import useMediaBreakpoint from '@eduzz/houston-hooks/useMediaBreakpoint';
2

-
3
const Component = () => {
4
  const isMobile = useMediaBreakpoint('md');
5
  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
6
};
Houston - Feito com ❤️ pela Eduzz
useMediaBreakpoint
Como usar
\ No newline at end of file +
3
const Component = () => {
4
const isMobile = useMediaBreakpoint('md');
5
return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
6
};
useMediaBreakpoint
Como usar
\ No newline at end of file diff --git a/hooks/useMediaQuery.html b/hooks/useMediaQuery.html index 5f0c663ea..70cd9afc8 100644 --- a/hooks/useMediaQuery.html +++ b/hooks/useMediaQuery.html @@ -1,4 +1,4 @@ -Houston | useMediaQuery

useMediaQuery#

É usado para lidar com dimensionamento das telas e responsividade em componentes React

Como usar#

tsx
1
import useMediaQuery from '@eduzz/houston-hooks/useMediaQuery';
2

-
3
const Component = () => {
4
  const isMobile = useMediaQuery('(max-width: 768px)');
5
  return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
6
};
Houston - Feito com ❤️ pela Eduzz
useMediaQuery
Como usar
\ No newline at end of file +
3
const Component = () => {
4
const isMobile = useMediaQuery('(max-width: 768px)');
5
return <div>{isMobile ? 'Mobile' : 'Desktop'}</div>;
6
};
useMediaQuery
Como usar
\ No newline at end of file diff --git a/hooks/useObservable.html b/hooks/useObservable.html index da3e78810..4f16985ac 100644 --- a/hooks/useObservable.html +++ b/hooks/useObservable.html @@ -1,4 +1,4 @@ -Houston | useObservable
\ No newline at end of file + c-11.9-12.5-11.9-32.7,0-45.2C291.4,115.9,310.7,115.9,322.7,128.4z">

O valor inicial será undefined, lembre-se de tratar isso quando estiver usando:

Parâmetros e Retorno#

ts
1
/**
2
 * @param observableGenerator Função que retorna um Observable
3
 * @param deps Lista de dependências
4
 * @returns [
5
 *    value: valor de retorno do Observable,
6
 *    error: se ocorrer um erro, ele será passado aqui,
7
 *    complete: boolean se o observable foi completado ou não,
8
 *    loading: boolean se esta carregando ou não, assim que o primeiro valor vier ele será false
9
 * ]
10
 */
11
export default useObservable<T>(observableGenerator: () => Observable<T>, deps: React.DependencyList): [T, any, boolean, boolean];
Houston - Feito com ❤️ pela Eduzz
useObservable
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/useObservableCallback.html b/hooks/useObservableCallback.html index 996be1e2f..1dd5b112f 100644 --- a/hooks/useObservableCallback.html +++ b/hooks/useObservableCallback.html @@ -1,4 +1,4 @@ -Houston | useObservableCallback
\ No newline at end of file + c-11.9-12.5-11.9-32.7,0-45.2C291.4,115.9,310.7,115.9,322.7,128.4z">

O valor inicial será undefined, lembre-se de tratar isso quando estiver usando:

Parâmetros e Retorno#

ts
1
/**
2
 * @param observableCallback Função que retorna um Observable
3
 * @param deps Lista de dependências
4
 * @returns [
5
 *    callback: callback que inicia o Observable
6
 *    value: valor de retorno do Observable,
7
 *    error: se ocorrer um erro, ele será passado aqui,
8
 *    complete: boolean se o observable foi completado ou não,
9
 *    loading: boolean se esta carregando ou não, assim que o primeiro valor vier ele será false
10
 * ]
11
 */
12
export default function useObservableCallback<T, F extends (...args: any[]) => Observable<T>>(
13
  observableCallback: F,
14
  deps: React.DependencyList
15
): [(...a: Parameters<F>) => void, ExtractObservableResult<ReturnType<F>>, any, boolean, boolean];
Houston - Feito com ❤️ pela Eduzz
useObservableCallback
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/useObservableEffect.html b/hooks/useObservableEffect.html index bd843636d..867610624 100644 --- a/hooks/useObservableEffect.html +++ b/hooks/useObservableEffect.html @@ -1,4 +1,4 @@ -Houston | useObservableEffect
\ No newline at end of file +nesse caso o log deve ser feito manualmente.

Parâmetros e Retorno#

ts
1
/**
2
 * @param observableGenerator Função que retorna um Observable
3
 * @param deps Lista de dependências
4
 * @returns void / nada
5
 */
6
export default useObservableEffect<T>(observableGenerator: () => Observable<T>, deps: React.DependencyList): void;
Houston - Feito com ❤️ pela Eduzz
useObservableEffect
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/useObservablePaginated.html b/hooks/useObservablePaginated.html index 70f1188c8..5996b472a 100644 --- a/hooks/useObservablePaginated.html +++ b/hooks/useObservablePaginated.html @@ -1,4 +1,4 @@ -Houston | useObservablePaginated
\ No newline at end of file +nesse caso o log deve ser feito manualmente.

Parâmetros e Retorno#

ts
1
/**
2
 * @param options `IUsePaginatedOptions`: {
3
 *  initialParams: Estado inicial dos paramêtros
4
 *  infinityScroll: Se os resultados devem ser mergeado, criando uma lista infinita.
5
 *  onChangeParams: Função que recebe os paramêtros e retorna um Observable
6
 * }
7
 * @param deps React deps
8
 * @returns `IUsePaginatedObservable`: {
9
 *  params: P / Json com os parametros
10
 *  initialParams: Partial<P> / Json com os parametros iniciais, útil para um reset de filtros
11
 *  isLoading: boolean; / Se está carregando ou não
12
 *  isLoadingMore: boolean; / Se está carregando mais ou não, útil para o infinityScroll
13
 *  total: number; / Número total de linhas retornadas, apenas a requisição da pagina inicial é necessário retornar o total, as outras paginas podem retonar null
14
 *  result: R[]; / Array com o resultado
15
 *  hasMore: boolean; / Se existe mais para ser carregado, calculado com base do total, útil para o infinityScroll
16
 *  error: any; / Error, se aconteceu algum
17
 *  retry: () => void; / Função de retry
18
 *  updateInitialParams: React.Dispatch<React.SetStateAction<P>>; / Útil para alterar o reset de um filtro
19
 *  mergeParams: (params: PaginationMergeParams<P>) => void; / Função para atualizar os paramentros pode ser o valor em sí o uma função que recebe o valor atual
20
 *  handleChangePage: (page: number) => void; / Função de atalho para o mergeParams({ page: 1})
21
 *  handleChangePerPage: (perPage: number) => void; / Função de atalho para o mergeParams({ perPge: 1})
22
 *  handleSort: (sort: IPaginationParams['sort']) => void; / Função de atalho para o mergeParams({ sort: { field: 'name', direction: 'asc' }  })
23
 * }
24
 */
25
export default function useObservablePaginated<P extends IPaginationParams, R>(options: IUsePaginatedOptions<P, R>, , deps: React.DependencyList): IUsePaginatedObservable<P, R>
Houston - Feito com ❤️ pela Eduzz
useObservablePaginated
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/useObservableRefresh.html b/hooks/useObservableRefresh.html index 6e5e02264..3869abbcd 100644 --- a/hooks/useObservableRefresh.html +++ b/hooks/useObservableRefresh.html @@ -1,4 +1,4 @@ -Houston | useObservableRefreshRefresh
\ No newline at end of file + c-11.9-12.5-11.9-32.7,0-45.2C291.4,115.9,310.7,115.9,322.7,128.4z">

O valor inicial será undefined, lembre-se de tratar isso quando estiver usando.

Parâmetros e Retorno#

ts
1
/**
2
 * @param observableGenerator Função que retorna um Observable
3
 * @param deps Lista de dependências
4
 * @returns [
5
 *    value: valor de retorno do Observable,
6
 *    error: se ocorrer um erro, ele será passado aqui,
7
 *    complete: boolean se o observable foi completado ou não,
8
 *    loading: boolean se esta carregando ou não,
9
 *    refresh: function para recarregar
10
 * ]
11
 */
12
export default useObservableRefresh<T>(observableGenerator: () => Observable<T>, deps: React.DependencyList): [T, any, boolean, boolean, () => void];
Houston - Feito com ❤️ pela Eduzz
useObservableRefresh
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/usePromise.html b/hooks/usePromise.html index f9bd25af5..364a52555 100644 --- a/hooks/usePromise.html +++ b/hooks/usePromise.html @@ -1,4 +1,4 @@ -Houston | usePromise
\ No newline at end of file + c-11.9-12.5-11.9-32.7,0-45.2C291.4,115.9,310.7,115.9,322.7,128.4z">

O valor inicial será undefined, lembre-se de tratar isso quando estiver usando.

Parâmetros e Retorno#

ts
1
/**
2
 * @param promiseGenerator Função que retorna uma Promise
3
 * @param deps Lista de dependências
4
 * @returns [
5
 *    value: valor de retorno do Promise,
6
 *    error: se ocorrer um erro, ele será passado aqui,
7
 *    loading: boolean se esta carregando ou não
8
 * ]
9
 */
10
export default usePromise<T>(promiseGenerator: () => Promise<any>, deps: React.DependencyList): [T, any, boolean];
Houston - Feito com ❤️ pela Eduzz
usePromise
Como usar
Setando um estado extra
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/usePromiseCallback.html b/hooks/usePromiseCallback.html index 289c32165..ebdae4511 100644 --- a/hooks/usePromiseCallback.html +++ b/hooks/usePromiseCallback.html @@ -1,4 +1,4 @@ -Houston | usePromiseCallback
\ No newline at end of file +for setado.

Parâmetros e Retorno#

ts
1
/**
2
 * @param promiseCallback Função que retorna uma Promise, pode receber parametros
3
 * @param deps Lista de dependências
4
 * @returns [
5
 *    callback: callback para iniciar a promise,
6
 *    value: valor de retorno do Promise,
7
 *    error: se ocorrer um erro, ele será passado aqui,
8
 *    loading: boolean se esta carregando ou não
9
 * ]
10
 */
11
export default function usePromiseCallback<T, F extends (...args: any[]) => Promise<T>>(
12
  promiseCallback: F,
13
  deps: React.DependencyList
14
): [(...a: Parameters<F>) => Promise<T>, T, any, boolean];
Houston - Feito com ❤️ pela Eduzz
usePromiseCallback
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/usePromiseEffect.html b/hooks/usePromiseEffect.html index 0e7ee6696..68a1b858a 100644 --- a/hooks/usePromiseEffect.html +++ b/hooks/usePromiseEffect.html @@ -1,4 +1,4 @@ -Houston | usePromiseEffect
\ No newline at end of file +for setado.

Parâmetros e Retorno#

ts
1
/**
2
 * @param promiseGenerator Função que retorna uma Promise
3
 * @param deps Lista de dependências
4
 * @returns undefined
5
 */
6
export default usePromiseEffect<T>(promiseGenerator: (isSubscribed: () => boolean) => Promise<T>, deps: React.DependencyList): void;
Houston - Feito com ❤️ pela Eduzz
usePromiseEffect
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/usePromisePaginated.html b/hooks/usePromisePaginated.html index a8fc7d8b1..915e6d202 100644 --- a/hooks/usePromisePaginated.html +++ b/hooks/usePromisePaginated.html @@ -1,4 +1,4 @@ -Houston | usePromisePaginated
\ No newline at end of file +setHoustonHooksConfig for configurado.

Parâmetros e Retorno#

ts
1
/**
2
 * @param options `UsePaginatedOptions`: {
3
 *  initialParams: Estado inicial dos paramêtros
4
 *  infinityScroll: Se os resultados devem ser mergeados, criando uma lista infinita.
5
 *  onChangeParams: Função que recebe os paramêtros e retorna uma Promise
6
 * }
7
 * @param deps React deps
8
 * @returns `UsePaginatedPromise`: {
9
 *  params: P / Json com os parametros
10
 *  initialParams: Partial<P> / Json com os parametros iniciais, útil para um reset de filtros
11
 *  isLoading: boolean; / Se está carregando ou não
12
 *  isLoadingMore: boolean; / Se está carregando mais ou não, útil para o infinityScroll
13
 *  total: number; / Número total de linhas retornadas, apenas a requisição da pagina inicial é necessário retornar o total, as outras paginas podem retonar null
14
 *  result: R[]; / Array com o resultado
15
 *  hasMore: boolean; / Se existe mais para ser carregado, calculado com base do total, útil para o infinityScroll
16
 *  error: any; / Error, se aconteceu algum
17
 *  refresh: () => void; / Função de refresh
18
 *  mergeParams: (params: PaginationMergeParams<P>) => void; / Função para atualizar os paramentros pode ser o valor em sí o uma função que recebe o valor atual
19
 *  handleChangePage: (page: number) => void; / Função de atalho para o mergeParams({ page: 1})
20
 *  handleChangePerPage: (perPage: number) => void; / Função de atalho para o mergeParams({ perPge: 1})
21
 *  handleSort: (sortField: string, sortDirection: 'asc' | 'desc') => void; / Função de atalho para o mergeParams({ sortField, sortDirection })
22
 * }
23
 */
24
export default function usePromisePaginated<P extends PaginationParams, R>(options: UsePaginatedOptions<P, R>, , deps: React.DependencyList): UsePaginatedPromise<P, R>
Houston - Feito com ❤️ pela Eduzz
usePromisePaginated
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/usePromiseRefresh.html b/hooks/usePromiseRefresh.html index a16ae0071..13b609337 100644 --- a/hooks/usePromiseRefresh.html +++ b/hooks/usePromiseRefresh.html @@ -1,4 +1,4 @@ -Houston | usePromiseRefresh
\ No newline at end of file + c-11.9-12.5-11.9-32.7,0-45.2C291.4,115.9,310.7,115.9,322.7,128.4z">

O valor inicial será undefined, lembre-se de tratar isso quando estiver usando.

Parâmetros e Retorno#

ts
1
/**
2
 * @param promiseGenerator Função que retorna uma Promise
3
 * @param deps Lista de dependências
4
 * @returns [
5
 *    value: valor de retorno do Promise,
6
 *    error: se ocorrer um erro, ele será passado aqui,
7
 *    loading: boolean se esta carregando ou não,
8
 *    refresh: function to refresh the data
9
 * ]
10
 */
11
export default usePromiseRefresh<T>(promiseGenerator: () => Promise<any>, deps: React.DependencyList): [T, any, boolean];
Houston - Feito com ❤️ pela Eduzz
usePromiseRefresh
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/hooks/useQueryPaginated.html b/hooks/useQueryPaginated.html index 39e7988af..6e0539130 100644 --- a/hooks/useQueryPaginated.html +++ b/hooks/useQueryPaginated.html @@ -1,4 +1,4 @@ -Houston | useQueryPaginated
\ No newline at end of file +setHoustonHooksConfig for configurado.

Parâmetros e Retorno#

ts
1
/**
2
 * @param options `UseQueryPaginatedOptions`: {
3
 *  initialParams: Estado inicial dos paramêtros
4
 *  queryFn: Função que recebe os paramêtros e retorna uma Promise
5
 *  ...Todas as propriedades do useQuery original
6
 * }
7
 * @param deps React deps
8
 * @returns `UseQueryPaginated`: {
9
 *  params: P / Json com os parametros
10
 *  initialParams: Partial<P> / Json com os parametros iniciais, útil para um reset de filtros
11
 *  refresh: () => void; / Função de refresh
12
 *  mergeParams: (params: PaginationMergeParams<P>) => void; / Função para atualizar os paramentros pode ser o valor em sí o uma função que recebe o valor atual
13
 *  handleChangePage: (page: number) => void; / Função de atalho para o mergeParams({ page: 1})
14
 *  handleChangePerPage: (perPage: number) => void; / Função de atalho para o mergeParams({ perPge: 1})
15
 *  handleSort: (sortField: string, sortDirection: 'asc' | 'desc') => void; / Função de atalho para o mergeParams({ sortField, sortDirection })
16
 *  ...Todas as propriedades de retorno do useQuery original
17
 * }
18
 */
19
export default function useQueryPaginated<P extends PaginationParams, R>(options: UseQueryOptions<P, R>, , deps: React.DependencyList): UsePaginatedPromise<P, R>
Houston - Feito com ❤️ pela Eduzz
useQueryPaginated
Como usar
Cuidados
Parâmetros e Retorno
\ No newline at end of file diff --git a/index.html b/index.html index bb4ab9e5d..130d76b93 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ -Houston | Instalação
\ No newline at end of file +
5
<ThemeProvider theme={theme}>...</ThemeProvider>;

Veja mais no menu Tema e Estilos.

Packages#

PackageDescriçãoLinkVersion
@eduzz/houston-uiComponentes UI para webVisualizarversion
@eduzz/houston-formsValidação de formuláriosVisualizarversion
@eduzz/houston-hooksHooks diversosVisualizarversion
@eduzz/eslint-config-houstonConfiguração padrão para o eslint/prettierVisualizarversion
Instalação
Instalar os packages
Configurar o eslint
Configurar o Tema
Packages
\ No newline at end of file diff --git a/migration.html b/migration.html index 64fbad5b7..b9e2aac10 100644 --- a/migration.html +++ b/migration.html @@ -1,4 +1,4 @@ -Houston | Migração

Migração#

  1. Atualize para a nova versão (^1).

  2. Quando ver componentes marcados procure migrar para seu equivalente do AntD:

  1. Migre o styled e se atente aos tokens que foram descontinuados:

diff
1
- import styled from '@eduzz/houston-styles';
2
+ import styled from '@eduzz/houston-ui/styled';

  1. Se utilize o @eduzz/houston-forms, é possível ainda utilizar o react-form-hooks, -apenas altere os imports:

diff
1
import useForm from '@eduzz/houston-forms/useForm';
2
- import Input from '@eduzz/houston-ui/Forms/Input';
3
+ import Input from '@eduzz/houston-forms/Input';
4
- import Form from '@eduzz/houston-ui/Forms/Form';
5
+ import Form from '@eduzz/houston-forms/Form';

  1. Pronto.

Houston - Feito com ❤️ pela Eduzz
Migração
\ No newline at end of file +apenas altere os imports:

diff
1
import useForm from '@eduzz/houston-forms/useForm';
2
- import Input from '@eduzz/houston-ui/Forms/Input';
3
+ import Input from '@eduzz/houston-forms/Input';
4
- import Form from '@eduzz/houston-ui/Forms/Form';
5
+ import Form from '@eduzz/houston-forms/Form';

  1. Pronto.

Houston - Feito com ❤️ pela Eduzz
Migração
\ No newline at end of file diff --git a/releases.html b/releases.html index c6db4f8c4..10e252662 100644 --- a/releases.html +++ b/releases.html @@ -1,4 +1,4 @@ -Houston | Releases

Releases#

Para ver todos os detalhes, veja guia de Release do Github.

Packages#

PackageDescriçãoLinkVersion
@eduzz/houston-uiComponentes UI para webVisualizarversion
@eduzz/houston-formsValidação de formuláriosVisualizarversion
@eduzz/houston-hooksHooks diversosVisualizarversion
@eduzz/eslint-config-houstonConfiguração padrão para o eslint/prettierVisualizarversion
Houston - Feito com ❤️ pela Eduzz
Releases
Packages
\ No newline at end of file +})('light')

Releases#

Para ver todos os detalhes, veja guia de Release do Github.

Packages#

PackageDescriçãoLinkVersion
@eduzz/houston-uiComponentes UI para webVisualizarversion
@eduzz/houston-formsValidação de formuláriosVisualizarversion
@eduzz/houston-hooksHooks diversosVisualizarversion
@eduzz/eslint-config-houstonConfiguração padrão para o eslint/prettierVisualizarversion
Houston - Feito com ❤️ pela Eduzz
Releases
Packages
\ No newline at end of file diff --git a/styles.html b/styles.html index 09dcc6346..572f6e32f 100644 --- a/styles.html +++ b/styles.html @@ -1,4 +1,4 @@ -Houston | Tema e Estilos
\ No newline at end of file +
3
const ComponentsDev = memo<IProps>(props => {
4
const theme = useTheme();
5
return <div>Color: {theme.primaryColor}</div>;
6
});
Tema e Estilos
Uso
Dark Mode
Variáveis customizadas
Estilizando um componente
Performance
useTheme
\ No newline at end of file diff --git a/ui-components/Layout.html b/ui-components/Layout.html index 862d0c306..0727c4486 100644 --- a/ui-components/Layout.html +++ b/ui-components/Layout.html @@ -1,4 +1,4 @@ -Houston | Layout
\ No newline at end of file +
60
<Content>{/*Your content here*/}</Content>
61
</Layout>
62
);
63
}

Props#

Topbar props#

proptipoobrigatóriopadrãodescrição
logourlfalse-Url para o logo padrao.
logoMobileurlfalse-Url para o logo na versão mobile.
currentApplicationstringfalse-Aplicação que está sendo usada, para marcar no menu de apps
userobjectfalse-Se existe um usuário logado, sem ele não terá o menu User

Topbar.Action props#

proptipoobrigatóriopadrãodescrição
iconReactNodetrue-Icone, tamanho ideal 25
labelstringfalse-
isActivebooleanfalsefalseSe o icone deve manter o estado de pressionado/ativo
onClickfunctionfalse-

Topbar.UserMenuItem props#

proptipoobrigatóriopadrãodescrição
iconReactNodetrue-Icone, tamanho ideal 25
childrenstringfalse-Deve ser uma string
disabledbooleanfalse-
onClickfunctionfalse-

Topbar.UserMenuGroup props#

proptipoobrigatóriopadrãodescrição
labelstringtrue-
childrenReactNodetrue-
proptipoobrigatóriopadrãodescrição
currentLocationstringfalse-Caminho de localização atual (pathname).

Sidebar.Item props#

proptipoobrigatóriopadrãodescrição
asReact.ElementTypefalse-Componente que envolve o item.
anyanyfalse-Qualquer prop que o as receba
isActivebooleanfalsefalseIrá usar o currentLocation fornecido para tentar ver se está ativo ou não
tabIndexnumberfalse-
disabledbooleanfalse-
onClickfunctionfalse-

Sidebar.Group props#

proptipoobrigatóriopadrãodescrição
labelReact.ReactNodefalse--
tabIndexnumberfalse-

Content props#

proptipoobrigatóriopadrãodescrição
disablePaddingbooleanfalse-Remove o padding
Layout
Importação
Estrutura base
Desestruturando
Exemplo
Props
Topbar props
Topbar.Action props
Topbar.UserMenuItem props
Topbar.UserMenuGroup props
Sidebar props
Sidebar.Item props
Sidebar.Group props
Content props
\ No newline at end of file diff --git a/ui-components/README.html b/ui-components/README.html index 233f5d934..2cfd7e57e 100644 --- a/ui-components/README.html +++ b/ui-components/README.html @@ -1,4 +1,4 @@ -Houston | Visão geral

Houston UI Components#

version

Instalação#

bash
1
yarn add @eduzz/houston-ui

Não é necessário nenhuma configuração a mais para usar, caso queria customizar as cores e o tema veja o menu Temas e Estilos

Como usar#

tsx
1
import Button from '@eduzz/houston-ui/Button';
2

-
3
const MyComponent = () => {
4
  return <Button>Meu Botão</Button>;
5
};
Houston - Feito com ❤️ pela Eduzz
Houston UI Components
Instalação
Como usar
\ No newline at end of file +
3
const MyComponent = () => {
4
return <Button>Meu Botão</Button>;
5
};
Houston UI Components
Instalação
Como usar
\ No newline at end of file diff --git a/ui-components/useAntdTableProps.html b/ui-components/useAntdTableProps.html index c39f5485b..ec7319b20 100644 --- a/ui-components/useAntdTableProps.html +++ b/ui-components/useAntdTableProps.html @@ -1,4 +1,4 @@ -Houston | useAntdTableProps

useAntdTableProps#

Hook para facilitar o uso da table do Antd

Como usar#

tsx
1
// Pode ser usado com os seguinte hooks:
2
const request = useQueryPaginated({
3
  // ...
4
});
5
const request = useQuery({
6
  // ...
7
});
8
const request = usePromisePaginated({
9
  // ...
10
});
11

-
12
const antdTableProps = useAntdTableProps(request, {
13
  minWidth: 500,
14
  columns: [
15
    { title: 'Nome', dataIndex: 'name' },
16
    { title: 'Email', dataIndex: 'email' },
17
    { title: 'Admin', dataIndex: 'roles', render: value => (value === 'admin' ? 'Sim' : 'Não') }
18
  ],
19
  actions: item => [
20
    {
21
      label: 'Editar',
22
      icon: <EditOutlined />,
23
      key: 'edit',
24
      onClick: () => onEdit(item)
25
    },
26
    {
27
      label: 'Enviar nova senha',
28
      icon: <SendOutlined />,
29
      key: 'resend-password',
30
      onClick: () => onResendPassword(item),
31
      disabled: item.id === currentUser?.id
32
    },
33
    {
34
      label: 'Remover',
35
      icon: <DeleteOutlined />,
36
      key: 'remove',
37
      onClick: () => onRemove(item),
38
      disabled: item.id === currentUser?.id
39
    }
40
  ]
41
});
Houston - Feito com ❤️ pela Eduzz
useAntdTableProps
Como usar
\ No newline at end of file +
12
const antdTableProps = useAntdTableProps(request, {
13
minWidth: 500,
14
columns: [
15
{ title: 'Nome', dataIndex: 'name' },
16
{ title: 'Email', dataIndex: 'email' },
17
{ title: 'Admin', dataIndex: 'roles', render: value => (value === 'admin' ? 'Sim' : 'Não') }
18
],
19
actions: item => [
20
{
21
label: 'Editar',
22
icon: <EditOutlined />,
23
key: 'edit',
24
onClick: () => onEdit(item)
25
},
26
{
27
label: 'Enviar nova senha',
28
icon: <SendOutlined />,
29
key: 'resend-password',
30
onClick: () => onResendPassword(item),
31
disabled: item.id === currentUser?.id
32
},
33
{
34
label: 'Remover',
35
icon: <DeleteOutlined />,
36
key: 'remove',
37
onClick: () => onRemove(item),
38
disabled: item.id === currentUser?.id
39
}
40
]
41
});
useAntdTableProps
Como usar
\ No newline at end of file