@plurall/boss-layout NPM

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

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: git@gitlab.com: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>
    // ...
  )
}