npm package: @n3/pn-core
Description: Core of PN-based projects
Author: Vadim Taits
Latest version: 0.2.2

# @n3/pn-core

Базовые компоненты PN-проектов.

## Использование

### PNProvider

Компонент, принимающий конфигурацию PN-комопнентов.

#### Props

- `theme` - обязательное, базовые стили;
- `components` - необязательное, переопределённые компоненты. Список компонентов ниже;
- `settings` - настройки текстов и т.п.

### Настройка styled-components

Необходимо создать файл в проекте с содержимым

```typescript
import 'styled-components';

import type {
  ContextThemeType,
} from '@n3/pn-declaration';

declare module 'styled-components' {
  export interface DefaultTheme extends ContextThemeType {
  }
}
```

### useComponents

Получение полного списка компонентов:

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

### useSettings

Получение настроек (дефолтовых с переопределениями).

### useConfirm

Вызов окна подтверждения

```typescript
import {
  PNProvider,
  useConfirm,
  ConfirmError,
} from '@n3/pn-core';

...

const confirm = useConfirm();

...

const result: boolean = await confirm({
  title: 'Подтвердите действие',
  content: 'Вы дествительно хотите подтвердить?'
});
```

Параметры:

```typescript
{
  /**
   * Заголовок
   */
  title?: string;
  /**
   * Текст
   */
  content?: ReactNode;
  /**
   * Асинхронная функция подтверждения, может закончиться с исключением ConfirmError({ message })
   */
  approve?: () => void | Promise<void>;
  /**
   * Текст кнопки отмены
   */
  cancelButtonText?: ReactNode;
  /**
   * Текст кнопки подтвеждения
   */
  approveButtonText?: ReactNode;
  /**
   * Цвет кнопки подтверждения
   */
  approveButtonColor?: ButtonColor;
  /**
   * Скрыть кнопку отмены (для использования как alert)
   */
  hideCancelButton?: boolean;
}
```

### Утилиты

#### cleanPhone

Очистка номера телефона от лишних знаков

```typescript
import { cleanPhone } from '@n3/pn-core';

cleanPhone('+7 (912) 345-67-80') // '+79123456780'
```

#### formatPhone

Форматирование номера телефона

```typescript
import { formatPhone } from '@n3/pn-core';

cleanPhone('+7 912 345 67 80') // '+7 (912) 345-67-80'
cleanPhone('9123456780') // '+7 (912) 345-67-80'
cleanPhone('8-912-345-67-80') // '+7 (912) 345-67-80'
```