# @n3/react-layouts

> Layouts for react applications based on @n3/kit

Latest version **0.2.2** (published 2021-02-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install @n3/react-layouts
pnpm add @n3/react-layouts
yarn add @n3/react-layouts
bun add @n3/react-layouts
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2021-02-09 |
| First published | 2020-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 8 |
| Unpacked size | 56.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vadim Taits |
| Maintainers | v.voloshin, n3admin, vtaits, k.kulik, a_sannikov |

## Links

- npm: https://www.npmjs.com/package/@n3/react-layouts
- Repository: git@gitlab.develop.netrika.ru:web/n3components
- npm.io page: https://npm.io/package/@n3/react-layouts

## Dependencies (8)

- [@n3/css-base](https://npm.io/package/@n3/css-base.md) ^0.1.0
- [@n3/react-tag](https://npm.io/package/@n3/react-tag.md) ^0.2.0
- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.12.1
- [@n3/react-tabs](https://npm.io/package/@n3/react-tabs.md) ^0.2.0
- [styled-components](https://npm.io/package/styled-components.md) ^5.2.0
- [@n3/react-page-title](https://npm.io/package/@n3/react-page-title.md) ^0.2.0
- [@n3/react-breadcrumbs](https://npm.io/package/@n3/react-breadcrumbs.md) ^0.2.0
- [@types/styled-components](https://npm.io/package/@types/styled-components.md) ^5.1.7

## Recent versions

- 0.2.2 (latest) — 2021-02-09
- 0.2.1 — 2021-02-04
- 0.2.0 — 2021-01-26
- 0.1.6 — 2020-10-07
- 0.1.5 — 2020-10-05
- 0.1.4 — 2020-09-14
- 0.1.3 — 2020-07-27
- 0.1.2 — 2020-07-27
- 0.1.1 — 2020-05-20
- 0.1.0 — 2020-04-24

## README

# @n3/react-layouts

Лэйауты страниц для приложений на базе `@n3/kit`.

```javascript
import {
  CreateLayout,
  EditLayout,
  ListLayout,
  NestedListLayout,
  ShowLayout,
  NestedShowLayout,
} from '@n3/react-layouts';
```

* `CreateLayout` - страница создания;
* `EditLayout` - страница редактрования;
* `ListLayout` - страница списка;
* `NestedListLayout` - страница вложенного списка (например, список документов конкретной организации);
* `ShowLayout` - страница просмотра;
* `NestedShowLayout` - страница просмотра с табами;
* `NestedRoutesLayout` - группа вложенных страниц, интегрированная с `react-router-dom`.

## Props

### CreateLayout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs |  | `Breadcrumb[]` |  | Массив объектов хлебных крошек |
| title | + | node |  | Заголовок страницы |
| headerBlock |  | node | `null` | Блок, выводящийся между заголовком страницы и табами |
| children |  | node | `null` | Содержимое страницы |

### EditLayout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs |  | `Breadcrumb[]` |  | Массив объектов хлебных крошек |
| title | + | node |  | Заголовок страницы |
| headerBlock |  | node | `null` | Блок, выводящийся между заголовком страницы и табами |
| children |  | node | `null` | Содержимое страницы |

### ListLayout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs |  | `Breadcrumb[]` |  | Массив объектов хлебных крошек |
| title | + | node |  | Заголовок страницы |
| headerBlock |  | node | `null` | Блок, выводящийся между заголовком страницы и табами |
| actionsBlock |  | node | `null` | Блок действий (кнопки и т.п.) |
| children |  | node | `null` | Содержимое страницы |

### NestedListLayout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs |  | `Breadcrumb[]` |  | Массив объектов хлебных крошек |
| parentTitle | + | node |  | Заголовок родительской сущности |
| parentActionsBlock |  | node |  | Блок действий у заголовка родительской сущности (кнопки и т.п.) |
| parentStatus |  | node | `null` | Статус |
| parentStatusColor |  | TagColor | `undefined` | Цвет тэга статуса |
| headerBlock |  | node | `null` | Блок, выводящийся между заголовком страницы и табами |
| tabs |  | `Tab[]` |  | Табы родительской сущности |
| currentTab | + | any |  | id выбранного таба |
| title | + | node |  | Заголовок страницы |
| actionsBlock |  | node | `null` | Блок действий (кнопки и т.п.) |
| children |  | node | `null` | Содержимое страницы |

### ShowLayout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs |  | `Breadcrumb[]` |  | Массив объектов хлебных крошек |
| title | + | node |  | Заголовок страницы |
| status |  | node | `null` | Статус |
| statusColor |  | `TagColor` | `undefined` | Цвет тэга статуса |
| headerBlock |  | node | `null` | Блок, выводящийся между заголовком страницы и табами |
| children |  | node | `null` | Содержимое страницы |

### NestedShowLayout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs |  | `Breadcrumb[]` |  | Массив объектов хлебных крошек |
| title | + | node |  | Заголовок страницы |
| actionsBlock |  | node |  | Блок действий у заголовка сущности (кнопки и т.п.) |
| status |  | node | `null` | Статус |
| statusColor |  | `TagColor` | `undefined` | Цвет тэга статуса |
| headerBlock |  | node | `null` | Блок, выводящийся между заголовком страницы и табами |
| tabs |  | `Tab[]` |  | Табы |
| currentTab | + | any |  | id выбранного таба |
| children |  | node | `null` | Содержимое страницы |

### NestedRoutesLayout

Пример использования:

```javascript
const data = await fetch(...);

const NestedRoute = ({
  Layout,
  payload,
}) => (
  <Layout
    title="Вложенный заголовок"
    breadcrumbs={[{
      url: null,
      title: 'Дополнительная крошка',
    }]}
  >
    Контент
  </Layout>
);

<NestedRoutesLayout
  breadcrumbs={[{
    url: '/',
    title: 'Хлебная крошка',
  }]}
  title="Основной заголовок"
  tabs={[
    {
      id: 'tabId',
      title: 'Заголовок таба',
      to: '/tab/',
      component: NestedRoute,
    },
  ]}
  payload={data}
/>
```

#### Props NestedRoutesLayout<Payload>

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs | + | `Breadcrumb[]` |  | Массив объектов хлебных крошек |
| title | + | node |  | Заголовок страницы |
| actionsBlock |  | node |  | Блок действий у заголовка сущности (кнопки и т.п.) |
| status |  | node | `null` | Статус |
| statusColor |  | `TagColor` | `undefined` | Цвет тэга статуса |
| headerBlock |  | node | `null` | Блок, выводящийся между заголовком страницы и табами |
| tabs |  | `NestedRoutesLayoutTab<Payload>[]` |  | Табы |
| redirectFrom |  | string | `null` | Переадресация из |
| redirectTo |  | string | `null` | Переадресация в |
| payload |  | `Payload` | `null` | Данные, которые будут переданы во вложенные страницы |

#### Props Layout

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| breadcrumbs |  | `Breadcrumb[]` |  | Дополнительные хлебные крошки |
| title |  | node |  | Заголовок вложенной страницы |
| actionsBlock |  | node |  | Блок действий вложенной страницы |
| children |  | node | `null` | Содержимое страницы |

#### Формат таба

| Название | Обязательность | Тип | Значение по умолчанию | Описание |
|----------|----------------|-----|-----------------------|----------|
| id | + | `TabId` |  | id таба |
| title | + | node |  | Заголовок таба |
| path |  | `string` |  | Путь страницы для `react-router-dom`, если не определено, используется `to` |
| to | + | `string` |  | url страницы |
| component | + | `ComponentType<NestedRouteComponentProps<any, any>>` | `null` | Компонент страницы |

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