@itcase/ui-core 1.9.77

package/dist/stories/useActiveClasses.mdx

@@ -0,0 +1,134 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Hooks / useActiveClasses" />
+
+# `useActiveClasses`
+Генерирует CSS‑классы по правилам `CLASS_RULES` из `propsGenerator` с учетом состояний (`isActive`, `isDisabled`).
+
+> ℹ️ Данный хук использует термины, о которых рассказывается в `useDevicePropsGenerator`, необходимо предварительно ознакомиться с ним
+
+### Параметры
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Обязательный</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>isDisabled</td>
+    <td>Нет</td>
+    <td>`boolean`</td>
+    <td>false</td>
+    <td>`Boolean` флаг</td>
+  </tr>
+  <tr>
+    <td>propsGenerator</td>
+    <td>Да</td>
+    <td>`[key: string]: string`</td>
+    <td>
+      propsGenerator[propsKey]
+    </td>
+    <td>Генератор классов</td>
+  </tr>
+  <tr>
+    <td>suffixes</td>
+    <td>Нет</td>
+    <td>`string[]`</td>
+    <td>
+      ['Checkmark']
+    </td>
+    <td>Массив суффиксов</td>
+  </tr>
+  <tr>
+    <td>isActive</td>
+    <td>Нет</td>
+    <td>`boolean`</td>
+    <td>false</td>
+    <td>`Boolean` флаг</td>
+  </tr>
+  </tbody>
+</table>
+
+### Результат
+
+Возвращает объект, значения объекта:
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>rootClasses</td>
+    <td>`string`</td>
+    <td>`'fill_surface-secondary borderColor_surface-border-quaternary'`</td>
+    <td>Строка из классами для корневого `html-тега`</td>
+  </tr>
+  <tr>
+    <td>suffixClasses</td>
+    <td>`string`</td>
+    <td>
+      `'fill_surface-secondary borderColor_accent-primary'`
+    </td>
+    <td>Строка из классов для вложенных `html-тэгов`</td>
+  </tr>
+  </tbody>
+</table>
+
+### Примечание
+Чтобы на выходе получалась строка из классов, необходимо предварительно в `appearance` прописать значения, например:
+
+```js
+const radioAppearanceDefault = {
+  defaultPrimary: {
+    fill: 'surfaceSecondary',
+    fillRado: 'accentPrimary',
+    fillCheckmark: 'surfaceQuaternary'
+  }
+}
+```
+
+### Использование
+Для генерации классов вложенных `html-тегов`, задаем массив суффиксов
+
+```jsx
+function Radio({ isActive, isDisabled, propsGenerator }) {
+  const { rootClasses, suffixClasses } = useActiveClasses({
+    isDisabled,
+    propsGenerator,
+    suffixes: ['Checkmark', 'Radio'],
+    isActive,
+  })
+
+  return (
+    <label className={clsx('radio', rootClasses)}>
+        <div className={clsx('radio__state', suffixClasses.Radio)}>
+          <span>State</span>
+        </div>
+        <div className={clsx('radio__state-checkmark', suffixClasses.Checkmark)}>
+          <span>Checkmark</span>
+        </div>
+    </label>
+  )
+}
+
+export { Radio }
+```
+
+В данном случае
+- `rootClasses` = 'fill_surface-secondary'
+- `suffixClasses.Radio` = 'fill_surface-quaternary',
+- `suffixClasses.Chekmark` = 'fill_accent-primary'
+
+И все данные значение получены из `appearance`, которые указали ранее

package/dist/stories/useAppearanceConfig.mdx

@@ -0,0 +1,83 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Hooks / useAppearanceConfig" />
+
+# `useAppearanceConfig`
+Хук позволяет возвращает объект из всех `appearance` переданных компоненту
+
+## Использование
+
+```js
+import { useAppearanceConfig } from '../../hooks/useAppearanceConfig'
+
+const { appearanceConfig } = useAppearanceConfig(
+  appearance,
+  componentConfig,
+  isDisabled,
+)
+```
+
+## Параметры
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Обязательный</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>appearance</td>
+    <td>Да</td>
+    <td>`string`</td>
+    <td>`'surfacePrimary sizeXL'`</td>
+    <td>Переданные appearance компоненту</td>
+  </tr>
+  <tr>
+    <td>componentConfig</td>
+    <td>Да</td>
+    <td></td>
+    <td>
+      `{
+      appearance,
+      setAppearance
+      }`
+    </td>
+    <td>Конфигурация всех appearance компонента</td>
+  </tr>
+  <tr>
+    <td>isDisabled</td>
+    <td>Нет</td>
+    <td>`boolean`</td>
+    <td>
+      `true`
+    </td>
+    <td>Указывает, отключен ли компонент</td>
+  </tr>
+  </tbody>
+</table>
+
+## Возвращает
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Тип</th>
+    <th>Значение</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>appearanceConfig</td>
+    <td>`[key: string]: number | string`</td>
+    <td>`{size: 's', fill: 'surfacePrimary'}`</td>
+  </tr>
+  </tbody>
+</table>
+
+

package/dist/stories/useDevicePropsGenerator.mdx

@@ -0,0 +1,202 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Hooks / useDevicePropsGenerator" />
+
+# `useDevicePropsGenerator`
+Хук позволяет автоматически получать значения `props` или `appearance`, которые соответствуют `viewport` пользователя, а также преобразовывать их в `CSS‑классы`.
+
+Важно учитывать приоритет при котором будут применяться стили:
+
+1. Сначала используется значение из props, соответствующее текущему устройству
+- Передали
+
+```jsx
+<Component textAlignMobile="center" />
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'center' }} />
+```
+
+2. Если такого нет — используется значение из props без учёта устройства
+- Передали
+
+```jsx
+<Component textAlign="right" />
+```
+
+ - Получили
+
+```jsx
+<Component style={{ textAlign: 'right' }} />
+```
+
+3. Если и его нет — берётся значение из appearance-конфига для текущего устройства
+
+- Передали
+
+```js
+{
+  textAlignMobile: 'left'
+}
+```
+
+- Получили
+
+```jsx
+<Component style={{ textAlign: 'left' }} />
+```
+
+4. И в последнюю очередь — значение из appearance-конфига без учёта устройства
+
+- Передали
+```jsx
+textAlign: 'justify'
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'justify' }} />
+```
+
+## Использование
+
+1. При создании компонента, можно опционально задать componentConfig, который содержит все appearance для данного компонента и позволяет задать новые appearance извне
+
+```js
+const componentConfig: ComponentConfig = {
+  appearance: componentAppearance,
+  setAppearance: (appearanceConfig) => {
+    componentConfig.appearance = appearanceConfig
+  },
+}
+```
+
+2. Для того чтобы передавать несколько appearance в одной строке, например:
+```jsx
+<Component appearance='errorPrimary sizeM' />
+```
+
+где `errorPrimary` это
+```js
+{
+  fill: 'errorTertiary',
+}
+```
+
+а `sizeM` это
+```ts
+{
+  size: 'm',
+}
+```
+
+Используем `useAppearanceConfig`
+```js
+  const { appearanceConfig } = useAppearanceConfig(
+    appearance,
+    componentConfig,
+    isDisabled,
+  )
+```
+Которому передается созданный ранее `componentConfig` и `appearance`, его результатом будет единый объект со свойствами из разных appearance
+
+```js
+{
+  fill: 'errorTertiary',
+  size: "m",
+}
+```
+
+3. Используем useDevicePropsGenerator, который принимает 2 параметра
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Обязательный</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>componentProps</td>
+    <td>Да</td>
+    <td>`[key: string]: number | string`</td>
+    <td>errorTertiary</td>
+    <td>Пропсы компонента</td>
+  </tr>
+  <tr>
+    <td>appearanceConfig</td>
+    <td>Нет</td>
+    <td>`[key: string]: number | string`</td>
+    <td>
+      appearanceConfig[propsKey]
+    </td>
+    <td>Объект из appearance</td>
+  </tr>
+  </tbody>
+</table>
+
+
+Из propsGenerator получаем переменные со строками, которые соответствуют appearance переданными в хук. Если указать просто `fill`, то получим `errorTertiary`,
+если укажем `fillClass` то получим `error-tertiary`, поэтому везде в приведенном ниже примере указан суффикс `Class`.
+
+```js
+  const propsGenerator = useDevicePropsGenerator(props, appearanceConfig)
+
+  const {
+    fillClass,
+    sizeClass,
+  } = propsGenerator
+```
+
+4. Применяем стили к компоненту. Важно учитывать, если в названии класса указывается сначала название компонента, это означает что он ссылается на стили,
+которые определены внутри директории этого компонента `../Component/css`
+
+```jsx
+'textarea__input'
+```
+
+Если в названии класса нет название компонента, это означает что ссылаемся на глобальный класс, который определен `src/styles`
+```jsx
+`fill_${fillClass}`
+```
+
+```jsx
+<textarea
+  className={clsx(
+    'textarea__input',
+    fillClass && `fill_${fillClass}`,
+    sizeClass && `size_${sizeClass}`,
+  )}
+/>
+```
+
+К примеру fill, будет отображаться в браузере как `fill_error-tertiary`.
+
+
+6. Чтобы применить стили в зависимости от `viewPort`, для этого нужно указать в `appearance` суффикс `Mobile` или `Desktop` или `Tablet`
+
+```js
+{
+  sizeMobile: 'm',
+  textSizeMobile: 'm',
+}
+```
+
+Или напрямую при использовании компонента
+
+```js
+<Component sizeMobile="m"/>
+```
+
+Всего доступны 3 типа размеров
+1. Mobile (от `240px` до `768px`)
+2. Tablet (от `768px` до `960px`)
+3. Desktop (от `960px` до `1920px`)
+
+Подробнее об этом можно узнать в `src/context/UIContext.tsx`, ознакомиться с размерами для (`Mobile`, `Tablet`, `Desktop`) можно в `../../hooks/useMediaQueries/mediaQueries.json`

package/dist/stories/useMediaQueries.mdx

@@ -0,0 +1,80 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Hooks / useMediaQueries" />
+
+# `useMediaQueries`
+Предназначен для определения и выполнения кода согласно значению `viewport`, список доступных `viewport` находится в файле `../../hooks/useMediaQueries/mediaQueries.json`
+
+## API
+
+### Параметры
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>userDevice</td>
+    <td>UserDeviceState</td>
+    <td>`{}`</td>
+    <td>`Boolean` флаги устройства пользователя</td>
+  </tr>
+  </tbody>
+</table>
+
+### Возвращает объект
+
+`deviceTypes` - который является объектом в котором находятся все `boolean` флаги
+
+<table>
+  <thead>
+  <tr>
+    <th>Флаг</th>
+    <th>Диапазон(px)</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>`isMobile`</td>
+    <td>`≥ 240px и ≤ 768px`</td>
+  </tr>
+  <tr>
+    <td>`isMobileHuge`</td>
+    <td>`≥ 640px и ≤ 768px`</td>
+  </tr>
+  <tr>
+    <td>`isTablet`</td>
+    <td>`≥ 768px и ≤ 960px`</td>
+  </tr>
+  <tr>
+    <td>`isDesktop`</td>
+    <td>`≥ 960px и ≤ 1920px`</td>
+  </tr>
+  <tr>
+    <td>`isDesktopMega`</td>
+    <td>`≥ 2560px`</td>
+  </tr>
+  </tbody>
+</table>
+
+### Использование
+
+```jsx
+const Component = () =>  {
+  const { isMobile, isTablet, isDesktop } = useMediaQueries()
+
+  return (
+    <div>
+      {isMobile && <p>isMobile</p>}
+      {isTablet && <p>isTablet</p>}
+      {isDesktop && <p>isDesktop</p>}
+    </div>
+  )
+}
+```

package/dist/stories/useStyles.mdx

@@ -0,0 +1,150 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Hooks / useStyles" />
+
+# `useStyles`
+
+Хук конвертирует props компонента в inline стили.
+
+Важно учитывать приоритет при котором будут применяться стили:
+
+1. Сначала используется значение из props, соответствующее текущему устройству
+- Передали
+
+```jsx
+<Component textAlignMobile="center" />
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'center' }} />
+```
+
+2. Если такого нет — используется значение из props без учёта устройства
+- Передали
+
+```jsx
+<Component textAlign="right" />
+```
+
+ - Получили
+
+```jsx
+<Component style={{ textAlign: 'right' }} />
+```
+
+3. Если и его нет — берётся значение из appearance-конфига для текущего устройства
+
+- Передали
+
+```js
+{
+  textAlignMobile: 'left'
+}
+```
+
+- Получили
+
+```jsx
+<Component style={{ textAlign: 'left' }} />
+```
+
+4. И в последнюю очередь — значение из appearance-конфига без учёта устройства
+
+- Передали
+```jsx
+textAlign: 'justify'
+```
+
+- Получили
+```jsx
+<Component style={{ textAlign: 'justify' }} />
+```
+
+## API
+
+### Параметры
+
+<table>
+  <thead>
+  <tr>
+    <th>Название</th>
+    <th>Тип</th>
+    <th>Значение</th>
+    <th>Описание</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>props</td>
+    <td>StyleAttributes</td>
+    <td>background</td>
+    <td>Props, могут быть любые inline-стили</td>
+  </tr>
+  </tbody>
+</table>
+
+
+### Использование
+
+Создаем ui компонент и используем хук
+
+```js
+const { dot: dotStyles, styles: badgeStyles } = useStyles(props)
+```
+
+Залогируем данные
+```js
+console.log('dotStyles', dotStyles)
+console.log('badgeStyles', badgeStyles)
+```
+
+Добавим в JSX-разметку компонента стили
+
+```jsx
+<div style={badgeStyles}>
+  {dot && (
+    <div style={dotStyles}>
+      текст
+    </div>
+  )}
+</div>
+```
+
+При использовании прокидываем стили
+
+```jsx
+<Badge
+  marginDotMobile="10px"
+  paddingStylesMobile="10px"
+  dot={true}
+  {...args}
+/>
+```
+
+Почему именно такое название пропсов?
+Пропсы соответствуют такой структуре
+
+<table>
+  <thead>
+  <tr>
+    <th>Во первых (margin)</th>
+    <th>Во вторых (Dot)</th>
+    <th>В третьих (Mobile)</th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr>
+    <td>Указывается название стиля, которое будет применено (margin например)</td>
+    <td>Название к которому будет применяться стиль, в нашем случае это Dot</td>
+    <td>Для какого размера экрана принимать данные стили</td>
+  </tr>
+  </tbody>
+</table>
+
+И получим на выходе в логах, для мобильного разрешения экрана.
+
+```js
+dotStyles - {margin: '10px'}
+badgeStyles - {padding: '10px'}
+```

package/dist/types/context/Notifications.d.ts

@@ -0,0 +1,21 @@
+import type { GeneratedId, SimpleCallback } from '@itcase/types-core';
+import type { CreatedNotification, Notification, NotificationsProviderProps } from './Notifications.interface';
+declare function NotificationsProvider(props: NotificationsProviderProps): import("react/jsx-runtime").JSX.Element;
+declare function useNotifications(): Notification[];
+declare function useNotificationsAPI(): {
+    hideNotifications: (targetId?: GeneratedId) => void;
+    showNotification: (notification: string | CreatedNotification, onClose?: SimpleCallback) => void;
+    notificationStatuses: {
+        readonly error: "error";
+        readonly info: "info";
+        readonly success: "success";
+        readonly warning: "warning";
+    };
+};
+declare const statusToAppearanceList: {
+    readonly error: "errorPrimary sizeS solid rounded";
+    readonly info: "infoPrimary sizeS solid rounded";
+    readonly success: "successPrimary sizeS solid rounded";
+    readonly warning: "warningPrimary sizeS solid rounded";
+};
+export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI, };