@plurall/boss-layout

BOSS-Layout

O projeto BOSS-Layout tem como intuito disponibilizar um Widget tornando genérico o layout utilizado nos módulos do BO.

O Widget tem como principais objetivos padronizar o código e diminuir a repetição do mesmo. Uma vez que os módulos do BO compartilham da mesma interface.

Através da disponibilização de um único componente padronizado e de fácil utilização é possível atender as necessidade de cada BO com poucas linhas de código.

• Componente disponibilizado:

  • Layout: interface completa que engloba os seguintes componentes:
    • TopBar: controle de tema, barra de pesquisa, notificações, logout, avatar;
    • NavBar: menu de navegação;

• Hook disponibilizado:
  • useTheme: controla o tema do módulo, disponibilizando também a opção de darkmode.

🏠 ÍNDICE:

• BOSS-Layout
  • 🏠 ÍNDICE:
  • Conhecendo o projeto
  • Preparando o projeto localmente
    • 1º passo: Baixe o projeto do git
    • 2º passo: Instale as dependências do projeto
    • 3º passo: Executando localmente
  • Como utilizar o Widget do BOSS-Layout
  • Informações adicionais:
    • Teste unitários
    • Build
    • Deploy para NPM

Conhecendo o projeto

voltar ao índice 🏠

O projeto disponibiliza através do Storybook os componentes da interface para um melhor entendimento de sua utilização.

• Tecnologias: React, Typescript, Storybook, Material-UI (@plurall-boss/components)

Preparando o projeto localmente

voltar ao índice 🏠

1º passo: Baixe o projeto do git

Faça o clone do projeto pra sua máquina

• URL: [e-mail]:sdk12/plurall/backoffice/widgets/layout.git

2º passo: Instale as dependências do projeto

Alguns projetos rodam com versões diferentes do pacote node. Para selecionar o correspondente desse projeto execute o comando abaixo caso esteja usando nvm (Node Version Manager). Se não estiver usando o nvm, veja o arquivo.nvmrc para consultar a versão do node recomendada:

$ nvm use

Para instalar as dependências do projeto execute o comando:

$ yarn install

3º passo: Executando localmente

voltar ao índice 🏠

Execute o comando abaixo:

$ yarn start

o VS-Code irá abrir uma instância do Chrome já na url:

http://localhost:6006/

Como utilizar o Widget do BOSS-Layout

Devemos passar os seguintes parâmetros para o componente <Layout />

• name: string
  • nome que irá aparecer na NavBar e na TopBar
• logout: () => void
  • função de deslogar o usuário que vem do @plurall-boss/auth
• setExternalTheme: (themeCreated: Theme) => void
  • função que deve ser passada ao layout para controle do tema
• menuItems: Item[]
  • menu que irá ser renderizado na NavBar

Problemas relacionados a v4 do Material-UI - https://github.com/mui/material-ui/issues/15914

• Precisamos mudar a prioridade da estilização com o <StylesProvider injectFirst>
• Problemas na propagação do tema, por isso devemos instanciar o <ThemeProvider /> duas vezes

Projeto que já está utilizando o Widget BOSS-Layout: https://gitlab.com/sdk12/plurall/backoffice/payments/frontend
Exemplo básico de como ficará sua utilização:

// ...
const App = () => {
  const { name } = useProfile()
  const { auth } = useAuth()
  const { themeCreated } = useTheme()

  const [selectedTheme, setSelectedTheme] = useState<Theme>(themeCreated)

  return (
    // ...
    <StylesProvider injectFirst>
      <Layout
        name={name}
        logout={() => auth.logout()}
        menuItems={menu}
        setExternalTheme={(themeCreated: Theme) => setSelectedTheme(themeCreated)}
      >
        <ThemeProvider theme={selectedTheme}>
          <SnackbarProvider
            anchorOrigin={{
              vertical: 'top',
              horizontal: 'right',
            }}
            maxSnack={1}
          >
            <Container maxWidth={false}>
              <Switch>
                <ThemeProvider theme={selectedTheme}>
                  {routes.map(({ exact, path, component }) => (
                    <PrivateRoute exact={exact} key={path} path={path} component={component} />
                  ))}
                  <PrivateRoute render={() => <Redirect to='/' />} />
                </ThemeProvider>
              </Switch>
            </Container>
          </SnackbarProvider>
        </ThemeProvider>
      </Layout>
    </StylesProvider>
    // ...
  )
}

Informações adicionais:

Teste unitários

voltar ao índice 🏠

Para executar os teste unitários utilize o comando:

yarn test

Build

voltar ao índice 🏠

Para buildar o projeto utilize o comando:

yarn build

Deploy para NPM

Automatizado com nosso CI. Basta gerar tag (semantic version) e ele vai fazer o deploy.