@n3/pn-declaration

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

Описание

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

BreakpointsType

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

ConditionsType

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

Пример:

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.

Пример:

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.

Пример:

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

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