# @n3/pn-declaration

> Declaration for PN components

Latest version **0.2.2** (published 2022-10-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install @n3/pn-declaration
pnpm add @n3/pn-declaration
yarn add @n3/pn-declaration
bun add @n3/pn-declaration
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.2 |
| Published | 2022-10-22 |
| First published | 2021-07-07 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 52 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/pn-declaration
- Repository: git@gitlab.develop.netrika.ru:profnavigator/pn-kit
- npm.io page: https://npm.io/package/@n3/pn-declaration

## Dependencies (3)

- [add](https://npm.io/package/add.md) ^2.0.6
- [yarn](https://npm.io/package/yarn.md) ^1.22.19
- [@vtaits/filterlist](https://npm.io/package/@vtaits/filterlist.md) ^0.2.4

## Recent versions

- 0.2.2 (latest) — 2022-10-22
- 0.2.1 — 2022-10-22
- 0.2.0 — 2022-10-04
- 0.1.26 — 2022-09-30
- 0.1.25 — 2022-05-05
- 0.1.24 — 2022-04-22
- 0.1.23 — 2022-03-30
- 0.1.22 — 2022-03-15
- 0.1.21 — 2022-01-10
- 0.1.20 — 2021-12-27
- 0.1.18 — 2021-10-26
- 0.1.17 — 2021-10-21
- 0.1.16 — 2021-10-18
- 0.1.15 — 2021-10-04
- 0.1.14 — 2021-09-28
- … 14 more at https://npm.io/package/@n3/pn-declaration/versions

## README

# @n3/pn-declaration

`typescript`-описание конфигурации проектов на базе `@n3/pn-core`.

## Описание

### Базовые стили

#### BreakpointsType

Объект брейкпоинтов разных разрешений (`mobile`, `tablet`, `desktop`).

#### ConditionsType

Объект условий разных разрешений (`mobile`, `tablet`, `desktop`) для `styled-components`.

Пример:

```typescript
import styled from 'styled-components';

const StyledExample = styled.div(({
  theme: {
    conditions,
  },
}) => ({
  opacity: 0.3,

  [conditions.mobile]: {
    opacity: 0.5,
  },

  [conditions.tablet]: {
    opacity: 0.7,
  },

  [conditions.desktop]: {
    opacity: 0.9,
  },
}));
```

#### FontSourcesType

Объект, содержащий функции генерации шрифтов `h1`, `h2`, `h3`, `h4`, `body`, `caption`. Каждая функция принимает аргументы:

1. `fontFamily` - строка;
2. `conditions` - объект с ключами `mobile`, `tablet`, `desktop`, значениями которого являются строки-условия для генерации разрешений.

Должен вернуть объект `styled-components`.

Пример:

```typescript
const h1: FontSourceType = (fontFamily, conditions) => ({
  fontFamily,
  fontWeight: 500,
  fontSize: 24,
  lineHeight: 1.2,

  [conditions.tablet]: {
    fontSize: 28,
  },

  [conditions.desktop]: {
    fontSize: 32,
  },
});
```

#### FontsType

Объект, с ключами `FontSourcesType` и значениями сгенерированными шрифтами в виде `CSSObject` `styled-components`.

Пример:

```typescript
import styled from 'styled-components';

const StyledExample = styled.div(({
  fonts: {
    h1,
  },
}) => ({
  ...h1,
}));
```

#### ColorsType

Объект, содержащий используемые цвета.

#### DistancesType

Объект, содержащий расстояния:

- `fieldHeightDefault` - высота стандартных полей ввода и кнопок;

- `fieldHeightSmall` - высота маленьких полей ввода и кнопок;

- `fieldBorderRadius` - закругление полей ввода и кнопок;

- `fieldIconWidth` - ширина иконки поля ввода;

- `tooltipBorderRadius` - закругление выпадающих подсказок;

- `tooltipMaxWidth` - максимальная ширина выпадающих подсказок;

- `tooltipPadding` - отступы внутри выпадающих подсказок;

- `tooltipVerticalOffset` - вертикальный отступ от всплывающей подсказки до элемента.

#### ThemeType

Объект, содержащий все настройки базовых стилей.

### Компоненты

#### ComponentsConfig

Описание PN-компонентов, используемых в приложении. Список компонентов:

- `BackLink`
- `BodyBgColor`
- `Button`
- `ButtonToolbar`
- `Card`
- `CardBottomInfo`
- `CardButtonsWithCounters`
- `CardInfo`
- `CardInfoBlock`
- `CardWrapper`
- `Check`
- `Checkbox`
- `Confirm`
- `Creatable`
- `DetailHeader`
- `DetailSection`
- `DetailSectionTitle`
- `FavoriteButton`
- `FieldLabel`
- `FiltersWrapper`
- `Header`
- `HeaderControls`
- `HeaderInfoBlock`
- `HeaderInnerWrapper`
- `HeaderLogo`
- `HeaderMenuButton`
- `HeaderWrapper`
- `Hint`
- `Input`
- `LayoutContent`
- `ListCounter`
- `ListGrid`
- `ListHeader`
- `ListPlaceholder`
- `LoadMoreButton`
- `LoadMoreWrapper`
- `LoginBase`
- `LogoLink`
- `LogoutBase`
- `MainMenu`
- `MainMenuGroup`
- `MainMenuLink`
- `MainMenuLinksGrid`
- `MainMenuTopBlock`
- `MainMenuWrapper`
- `Modal`
- `ModalBackdrop`
- `ModalBody`
- `ModalButton`
- `ModalCloseButton`
- `ModalDialog`
- `ModalTitle`
- `ModalToggle`
- `Paginator`
- `PhoneLink`
- `PublishedIndicator`
- `RCTable`
- `RequestCardSection`
- `RequestCardTitle`
- `RequestCarWrapper`
- `RequestsLayout`
- `RequestsListView`
- `SearchInput`
- `Select`
- `SelectAsyncPaginate`
- `SelectFetch`
- `ShowField`
- `SidebarItem`
- `SidebarItemContent`
- `SidebarItemDate`
- `SidebarItemWrapper`
- `SidebarItemsWrapper`
- `SortingHeader`
- `SortingSwitcher`
- `Star`
- `Switch`
- `Table`
- `Tabs`
- `TabPane`
- `Td`
- `Th`
- `Tooltip`

### Settings

Содержит настройки текстов и т.п.

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