npm package: @n3/pn-declaration
Description: Declaration for PN components
Author: Vadim Taits
Latest version: 0.2.2

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

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