Instalação#

Para instalar o Houston seguir os passos:

  1. Instalar os packages.

  2. Configurar o eslint (opcional).

  3. Configurar o Tema.

Instalar os packages#

bash
1
yarn add @eduzz/houston-ui @eduzz/houston-forms @eduzz/houston-hooks

Configurar o eslint#

Para configurar no padrão do Houston no eslint, você deve adicionar as dependências, pois o eslint exige que plugins devem, ser adicionados no projeto principal:

sh
1
yarn add --dev eslint @eduzz/eslint-config-houston eslint @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint-config-prettier eslint-plugin-eslint-plugin eslint-plugin-import eslint-plugin-prettier eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-unused-imports eslint-plugin-sonarjs prettier
js
1
// .eslintrc
2
{
3
"extends": ["@eduzz/eslint-config-houston"]
4
}
5
6
// .prettierrc.js
7
module.exports = {
8
...require('@eduzz/eslint-config-houston/.prettierrc')
9
};

Veja mais sobre as configurações no menu ESLint.

Configurar o Tema#

No arquivo raiz de seu projeto, defina sua paleta de cores e adicione o provedor da seguinte maneira:

tsx
1
import ThemeProvider, { createTheme } from '@eduzz/houston-ui/ThemeProvider';
2
3
const theme = createTheme('eduzz'); // ou um hex: '#0D47A1'
4
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
Houston - Feito com ❤️ pela Eduzz
Instalação