# @plurall/boss-layout

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

Latest version **1.0.6** (published 2022-11-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install @plurall/boss-layout
pnpm add @plurall/boss-layout
yarn add @plurall/boss-layout
bun add @plurall/boss-layout
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; large bundle.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.6 |
| Published | 2022-11-01 |
| First published | 2022-09-19 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 56.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | rafael.teixeira.somos, williambraz, rcolonese.somos, plurall-dev, keppelen |

## Links

- npm: https://www.npmjs.com/package/@plurall/boss-layout
- npm.io page: https://npm.io/package/@plurall/boss-layout

## Dependencies (4)

- [@plurall-boss/auth](https://npm.io/package/@plurall-boss/auth.md) ^0.0.3
- [@plurall-boss/icons](https://npm.io/package/@plurall-boss/icons.md) ^1.0.5
- [react-perfect-scrollbar](https://npm.io/package/react-perfect-scrollbar.md) ^1.5.8
- [@plurall-boss/components](https://npm.io/package/@plurall-boss/components.md) ^1.0.17

## Recent versions

- 1.0.6 (latest) — 2022-11-01
- 1.0.5 — 2022-10-20
- 1.0.4 — 2022-10-17
- 1.0.3 — 2022-10-11
- 1.0.2 — 2022-10-07
- 1.0.1 — 2022-09-19

## README

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

<br/>

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

<br/>

---

## 🏠 ÍNDICE:

- [BOSS-Layout](#BOSS-Layout)
  - [🏠 ÍNDICE:](#-índice)
  - [Conhecendo o projeto](#conhecendo-o-projeto)
  - [Preparando o projeto localmente](#preparando-o-projeto-localmente)
    - [**1º passo:** Baixe o projeto do git](#1º-passo-baixe-o-projeto-do-git)
    - [**2º passo:** Instale as dependências do projeto](#2º-passo-instale-as-dependências-do-projeto)
    - [**3º passo:** Executando localmente](#3º-passo-executando-localmente)
  - [Como utilizar o Widget do BOSS-Layout](#como-utilizar-o-widget-do-boss-layout)
  - [Informações adicionais:](#informações-adicionais)
    - [Teste unitários](#teste-unitários)
    - [Build](#build)
    - [Deploy para NPM](#deploy-para-npm)

---

## Conhecendo o projeto

[voltar ao índice 🏠](#-í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 🏠](#-í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:

```bash
$ nvm use
```

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

```bash
$ yarn install
```

### **3º passo:** Executando localmente

[voltar ao índice 🏠](#-índice)

Execute o comando abaixo:

```bash
$ yarn start
```

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

```bash
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

<br/>

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

<br/>

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

```tsx
// ...
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 🏠](#-índice)

Para executar os teste unitários utilize o comando:

```bash
yarn test
```

---

### Build

[voltar ao índice 🏠](#-índice)

Para buildar o projeto utilize o comando:

```shel
yarn build
```

---

### Deploy para NPM

Automatizado com nosso CI. Basta gerar tag ([semantic version](https://semver.org)) e ele vai fazer o deploy.

---
_Source: https://npm.io/package/@plurall/boss-layout · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._