@itcase/ui-web 1.9.77

package/dist/stories/Components.mdx

@@ -0,0 +1,488 @@
+import { Meta } from '@storybook/addon-docs/blocks'
+
+<Meta title="Overview / Component" />
+
+# Component
+
+
+## Типовая структура компонента
+
+Компоненты используют типовую структуру папок и файлов
+
+```js
+/ComponentName/
+  ├─ docs // 👈 mdx файл с документаций компонента
+  │  ├─ Overview.mdx   // 👈 базовая информация о компоненте
+  │  └─ Platground.mdx // 👈 песочница компонента
+  ├─ css
+  │  └─ componentName.css
+  ├─ appearance // 👈 настройки appearance
+  │  ├─ componentDefault.ts   // 👈 содержит `appearance` для цветов компонента, вместо `Default` может быть любой цвет
+  │  ├─ componentSize.ts      // 👈 содержит appearance для size компонента
+  │  ├─ componentStyle.ts     // 👈 содержит appearance для style компонента
+  │  └─ index.ts              // 👈 файловый сборщик
+  ├─ stories
+  │  ├─ __mock__      // 👈 мок данные
+  │  │  └─ index.ts
+  │  ├─ ComponentDemo.stories.tsx
+  │  │  ├─ Demo       // 👈 это демонстрация компонента
+  │  │  └─ Skeleton   // 👈 показывает временные контуры компонента, когда загружается страница
+  │  ├─ ComponentDefault.stories.tsx
+  │  │  ├─ Accent     // 👈 цвет из figma
+  │  │  ├─ Error      // 👈 цвет из figma
+  │  │  ├─ Warning    // 👈 цвет из figma
+  │  │  └─ Surface    // и т.д.
+  │  ├─ ComponentStyle.stories.tsx
+  │  │  ├─ Solid      // 👈 состояние, когда есть задний фон, но нет рамки
+  │  │  ├─ Outlined   // 👈 состояние, когда нет заднего фона, но есть рамка
+  │  │  ├─ Full       // 👈 состояние, когда есть и задний фон и рамка
+  │  │  └─ Ghost      // 👈 состояние, когда нет ни заднего фона, ни рамки
+  │  └─ ComponentSize.stories.tsx
+  │     ├─ SizeXXL   // 👈 размер из figma
+  │     ├─ SizeXL    // 👈 размер из figma
+  │     ├─ SizeL     // 👈 размер из figma
+  │     ├─ SizeM     // 👈 размер из figma
+  │     ├─ SizeS     // 👈 размер из figma
+  │     ├─ SizeXS    // 👈 размер из figma
+  │     └─ SizeXXS   // 👈 размер из figma
+  ├─ ComponentName.appearance.ts   // 👈 импорт appearance
+  ├─ ComponentName.css             // 👈 импорт css файлов
+  ├─ ComponentName.interface.ts    // 👈 типы
+  ├─ ComponentName.tokens.css      // 👈 настройки css токенов
+  ├─ ComponentName.tsx             // 👈 код компонента
+  └─ index.ts
+```
+
+### `/docs`
+
+Содержит истории в формате Storybook
+
+```js
+/docs/
+  ├─ Overview.mdx       // 👈 базовая информация о компоненте
+  └─ Playground.mdx     // 👈 песочница компонента
+```
+
+Базовая информация о компоненте
+
+```jsx
+import { Canvas, Meta } from '@storybook/addon-docs/blocks'
+// 👇 импорт истории для использованя на странице
+import * as ComponentNameStories from '../stories/Demo.stories.tsx'
+// 👇 расположение компонента
+<Meta title="Atoms / ComponentName / Overview" />
+
+# ComponentName
+`ComponentName` — используется для отображения компонента
+
+## Demo
+// 👇 демонстрация Demo
+<Canvas sourceState="shown" of={ComponentNameStories.Demo} />
+
+## Skeleton
+// 👇 демонстрация Skeleton
+<Canvas sourceState="shown" of={ComponentNameStories.Skeleton} />
+```
+
+Песочница
+
+```jsx
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+// 👇 импорт истории для использованя на странице
+import * as ComponentNameStories from '../stories/Demo.stories.tsx'
+// 👇 расположение компонента
+<Meta title="Atoms / ComponentName / Playground" />
+
+# Playground
+<Canvas sourceState="shown" of={ComponentNameStories.Demo} />
+<Controls of={ComponentNameStories.Demo} />
+```
+
+### `appearance`
+
+#### Чтобы закрасить компонент
+Используется цвет согласно фигме, для иконок добавляется суффикс `Item`, дял текста `Text`.
+
+#### Чтобы указать состояния
+Если есть состояния у компонента, `active`, `hover`, то цвета для них указать в `appearanre` c цветами.
+
+```js
+const componentNameAppearanceAccent = {
+  ...
+  accent: {
+    // 👇 настройки props согласно компоненту
+    fill: 'accentPrimary'
+    textColor: 'labelTextColor',
+    dotFill: 'accentItemPrimary',
+    iconFill: 'accentItemPrimary',
+  },
+  ...
+}
+
+export { componentNameAppearanceAccent }
+```
+
+#### Чтобы указать размеры компонента
+Необходимо создать файл `componentSize.ts`, в котором должны находиться `размеры компонента`, `размеры иконок`, `размеры шрифтов`.
+
+```js
+const componentNameAppearanceSize = {
+  ...
+  sizeL: {
+    // 👇 настройки props согласно компоненту
+    size: 'l',
+    textColorSize: 'l'
+  },
+  ...
+}
+
+export { componentNameAppearanceSize }
+```
+
+#### Чтобы указать стиль
+Необходимо создать файл `componentStyle.ts`, в котором должны находиться:
+- `Solid` - есть задний фон, но нет рамки,
+- `Outlined` - нет заднего фона, но есть рамка,
+- `Full` - есть и задний фон и рамка,
+- `Ghost` - нет ни заднего фона, ни рамки
+
+```js
+const componentNameAppearanceStyle = {
+  full: {},
+  ghost: {
+    fill: 'none',
+    borderColor: 'none',
+  },
+  outlined: {
+    fill: 'none',
+  },
+  solid: {
+    borderColor: 'none',
+  },
+}
+
+export { componentNameAppearanceStyle }
+```
+
+### `/stories`
+
+Содержит минимум такую структуру 👇, почти для каждого компонента
+
+```js
+  stories
+    ├─ ComponentDemo.stories.tsx
+    │  ├─ Demo       // 👈 это демонстрация компонента
+    │  └─ Skeleton   // 👈 показывает временные контуры компонента, когда загружается страница
+    ├─ ComponentDefault.stories.tsx
+    │  ├─ Accent    // 👈 цвет из figma
+    │  ├─ Error     // 👈 цвет из figma
+    │  ├─ Warning   // 👈 цвет из figma
+    │  └─ Surface   // и т.д.
+    ├─ ComponentStyle.stories.tsx
+    │  ├─ Solid      // 👈 состояние, когда есть задний фон, но нет рамки
+    │  ├─ Outlined   // 👈 состояние, когда нет заднего фона, но есть рамка
+    │  ├─ Full       // 👈 состояние, когда есть и задний фон и рамка
+    │  └─ Ghost      // 👈 состояние, когда нет ни заднего фона, ни рамки
+    └─ ComponentSize.stories.tsx
+       ├─ SizeXXL   // 👈 размер из figma
+       ├─ SizeXL    // 👈 размер из figma
+       ├─ SizeL     // 👈 размер из figma
+       ├─ SizeM     // 👈 размер из figma
+       ├─ SizeS     // 👈 размер из figma
+       ├─ SizeXS    // 👈 размер из figma
+       └─ SizeXXS   // 👈 размер из figma
+```
+
+Это типовая структуру `stories` для компонента, стоит помнить что каждый компонент индивидуален и структура `stories` подстраивается под него и под `figma`
+
+```tsx
+import { ComponentName } from '../ComponentName'
+
+export default {
+  title: 'Atoms / ComponentName', // 👈 расположение компонента
+  component: ComponentName,
+  args: {
+    value: 3, // 👈 передаваемый свойства согласно компоненту
+  },
+  parameters: {
+    layout: 'centered', // 👈 настройка расположения компонента
+  },
+}
+
+// 👇 демонстрация компонента для Overview.mdx
+export const Demo = {
+  render: (args) => {
+    return <ComponentName {...args} appearance="surfacePrimary sizeXXL" />
+  },
+}
+
+// 👇 skeleton режим
+export const Skeleton = {
+  render: (args) => {
+    return (
+      <ComponentName
+        {...args}
+        appearance="surfacePrimary sizeXXL"
+        isSkeleton="true"
+      />
+    )
+  },
+}
+
+```
+
+1. Каждый цвет это отдельная история,
+```tsx
+import { ComponentName } from '../ComponentName'
+
+export default {
+  title: 'Atoms / ComponentName / Accent', // 👈 расположение компонента
+  component: ComponentName,
+  args: {
+    label: 'Label', // 👈 передаваемый свойства согласно компоненту
+  },
+  parameters: {
+    layout: 'centered', // 👈 настройка расположения компонента
+  },
+}
+
+export const Default = {
+  render: (args) => {
+    return <ComponentName {...args} appearance="surfacePrimary sizeXXL" />
+  },
+}
+
+export const IsChecked = {
+  args: {
+    isChecked: true,
+  },
+  render: (args) => {
+    return <ComponentName {...args} />
+  },
+}
+
+```
+но когда компонент `простой`, то можно создать одну историю `ComponentDefault.stories.tsx`, в которой будут все цвета
+
+```tsx
+import { ComponentName } from '../ComponentName'
+
+export default {
+  title: 'Atoms / ComponentName / Default', // 👈 расположение компонента
+  component: ComponentName,
+  args: {
+    label: 'Label', // 👈 передаваемый свойства согласно компоненту
+  },
+  parameters: {
+    layout: 'centered', // 👈 настройка расположения компонента
+  },
+}
+
+export const Accent = {
+  args: {
+    appearance: 'accentPrimary sizeXL'
+  },
+  render: (args) => {
+    return <ComponentName {...args} appearance="surfacePrimary sizeXXL" />
+  },
+}
+
+export const Surface = {
+  args: {
+    appearance: 'surfacePrimary sizeXL'
+  },
+  render: (args) => {
+    return <ComponentName {...args} appearance="surfacePrimary sizeXXL" />
+  },
+}
+
+```
+2. Если есть `appearance` размеры, то для этого нужно сделать отдельно историю
+
+```tsx
+import { ComponentName } from '../ComponentName'
+
+export default {
+  title: 'Atoms / ComponentName / Size', // 👈 расположение компонента
+  component: ComponentName,
+  args: {
+    label: 'Label', // 👈 передаваемый свойства согласно компоненту
+  },
+  parameters: {
+    layout: 'centered', // 👈 настройка расположения компонента
+  },
+}
+
+export const SizeXXL = {
+  appearance: 'surfacePrimary sizeXXL',
+  render: (args) => {
+    return <ComponentName {...args} appearance="surfacePrimary sizeXXL" />
+  },
+}
+
+export const SizeXL = {
+  args: {
+    appearance: 'surfacePrimary sizeXL',
+  },
+  render: (args) => {
+    return <ComponentName {...args} appearance="surfacePrimary sizeXXL" />
+  },
+}
+
+```
+3. Если есть `style appearance`, сделать отдельно историю
+
+```tsx
+const meta = {
+  title: 'Atoms / Component / Style',
+  component: Component,
+  args: {
+    label: 'Label',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+}
+
+export default meta
+
+export const Solid = {
+  args: {
+    appearance: 'surfacePrimary sizeXL solid',
+  },
+  render: (args: ComponentProps) => {
+    return <Chips {...args} />
+  },
+}
+
+export const Outlined = {
+  args: {
+    appearance: 'surfacePrimary sizeXL outlined',
+  },
+  render: (args: ComponentProps) => {
+    return <Chips {...args} />
+  },
+}
+
+export const Full = {
+  args: {
+    appearance: 'surfacePrimary sizeXL full',
+  },
+  render: (args: ComponentProps) => {
+    return <Chips {...args} />
+  },
+}
+
+export const Ghost = {
+  args: {
+    appearance: 'surfacePrimary sizeL ghost',
+  },
+  render: (args: ComponentProps) => {
+    return <Chips {...args} />
+  },
+}
+
+```
+
+
+### index.ts
+
+```js
+// 👇 экспорт настроек componentNameAppearance
+export { componentNameAppearance } from './ComponentName.appearance'
+// 👇 экспорт компонента и его конфигурации
+export { ComponentName, componentNameConfig } from './ComponentName'
+```
+
+### ComponentName.tokens.css
+
+Файл содержит переменные в формат [CSS переменные](https://developer.mozilla.org/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)
+
+```css
+// 👇 экспорт настроек componentNameAppearance
+:root {
+  ...
+  --componentName-size-xxl-padding: 1m 1.5m;
+  --componentName-size-xxl-min-width: 40px;
+  --componentName-size-xxl-min-height: 40px;
+  --componentName-size-xxl-gap: 5px;
+  --componentName-type-icon-size-xxl-max-width: 40px;
+  --componentName-type-icon-size-xxl-max-height: 40px;
+  ...
+}
+```
+
+### ComponentName.css
+
+Файл импорта css файлов
+
+```css
+@import './css/componentName.css';
+@import './css/componentName_skeleton.css';
+@import './css/componentName_shape.css';
+@import './css/componentName_size.css';
+@import './css/componentName_type.css';
+```
+
+
+### ComponentName.appearance.ts
+
+Основной файл импорта оформлений
+
+```js
+// 👇 импорт Accent темы
+import { componentNameAppearanceAccent } from './appearance/componentNameAccent'
+import { componentNameAppearanceType } from './ComponentName.interface'
+
+export const componentNameAppearance: componentNameAppearanceType = {
+    // 👇 экспорт Accent темы
+    ...componentNameAppearanceAccent,
+}
+```
+
+
+### Создание цветовых, стилевых, и размеры `appearance`,
+
+### Реализация
+На примере `button` рассмотрим реализацию
+![Image](https://github.com/user-attachments/assets/f3f2821b-8855-4bc6-9b67-7df623bc736c)
+
+В фигме можно получить  цвета, размеры, рамку у самой кнопки, у текста который используется в в ней, у иконок, которые в используются в кнопке, возьмем цвет `accent`, который равен `#74B43D`. Важно обратить внимание на `Default` - это название коллекции токенов
+
+![Image](https://github.com/user-attachments/assets/9ea3d371-bfda-4561-968b-00f70cefe213)
+Нажав на компонент из кнопки, нам доступны эти цвета, которые ссылаются на [дизайн-токены](https://www.figma.com/design/S33s34qogjRq2u3Y9Imsml/AM---Tokens?t=5hacZwzMeBv9bJMA-0)
+Далее переходим в `variables`
+![Image](https://github.com/user-attachments/assets/6c5e6261-0cd8-4de9-823a-41cd1a3494c1)
+
+И как было написано ранее, здесь у нас коллекции токенов, в нашем случае это была `Default` коллекция.
+Затем нам доступна таблица в которой:
+- `fill` - используется чтобы закрасить фон
+- `text` - цвет текста кнопки
+- `item` - цвет иконки
+- `boder` - цвет рамки
+
+ориентироваться стоит на названия
+
+![Image](https://github.com/user-attachments/assets/4e5b801b-2ce3-4220-995b-90f4d7dca11d)
+
+Помним что цвет заднего фона кнопки равен  `#74B43D` и именно он пойдет в код.
+И именно в `buttonAccent.ts` будут находиться только цвета.
+
+```js
+  accentPrimary: {
+    fill: 'accentPrimary', // задний фон
+    labelTextColor: 'accentTextPrimary', // цвет текста
+    borderColor: 'accentBorderPrimary', // цвет рамки
+    iconAfterFillIcon: 'accentItemPrimary', // цвет иконки
+  },
+```
+В коде это будет выглядеть так, ключи объекты, это `props` компонента, а значения это цвета, которые были взять из `figma`.
+
+Все что связано с размерами, текста, компонента, иконок необходимо выносить в отдельный файл `buttonSize.ts`. Определяем по фигме необходимые размеры и переносим их в код
+```js
+  sizeXXL: {
+    size: 'xxl', // размер кнопки
+    labelTextSize: 'xl', // размер текста
+    iconAfterSize: 24, // размер иконки
+  }
+```

package/dist/stories/CookiesWarningOverview.mdx

@@ -0,0 +1,13 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as CookiesWarningStories from '../stories/CoockiesWarning.stories'
+
+<Meta title="Molecules / CookiesWarning / Overview" />
+
+# CookiesWarning
+
+`CookiesWarning` - используется для отображения предупрждения о файлах `cookie`
+
+<Story of={CookiesWarningStories.Demo} />
+
+

package/dist/stories/CookiesWarningPlayground.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as CookiesWarningStories from '../stories/CoockiesWarning.stories'
+
+<Meta title="Molecules / CookiesWarning / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={CookiesWarningStories.Demo} />
+<Controls of={CookiesWarningStories.Demo} />
+

package/dist/stories/DadataOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DadataStories from '../stories/Dadata.stories'
+
+<Meta title="Molecules / Dadata / Overview" />
+
+# Dadata
+
+`Dadata` - это текстовое поле для организаций(ru), которое выдает подсказки в выпадающем списке
+
+<Story of={DadataStories.Demo} />

package/dist/stories/DadataPlaygroynd.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as DadataStories from '../stories/Dadata.stories'
+
+<Meta title="Molecules / Dadata / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DadataStories.Demo} />
+<Controls of={DadataStories.Demo} />
+

package/dist/stories/DatePeriodOverview.mdx

@@ -0,0 +1,9 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DatePeriodStories from  '../stories/DatePeriodDemo.stories'
+
+<Meta title="Molecules / DatePeriod / Overview" />
+
+# DatePeriod
+
+`DatePeriod` 

package/dist/stories/DatePeriodPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as DatePeriodStories from '../stories/DatePeriodDemo.stories'
+
+<Meta title="Molecules / DatePeriod / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DatePeriodStories.Demo} />
+<Controls of={DatePeriodStories.Demo} />

package/dist/stories/DatePickerOverview.mdx

@@ -0,0 +1,12 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DatePickerStories from '../stories/DatePicker.stories'
+
+<Meta title="Molecules / DatePicker / Overview" />
+
+# DatePicker
+
+`DatePicker` — это календарь, который используется для выбора даты, либо диапазона дат.
+
+<Story of={DatePickerStories.Date} />
+

package/dist/stories/DatePickerPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as DatePickerStories from '../stories/DatePicker.stories'
+
+<Meta title="Molecules / DatePicker / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DatePickerStories.Date} />
+<Controls of={DatePickerStories.Date} />

package/dist/stories/DividerOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DividerStories from '../stories/DividerDemo.stories'
+
+<Meta title="Atoms / Divider / Overview" />
+
+# Divider
+
+`Divider` — это горизонтальная или вертикальная полоса, которая является блочным элементом. Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке.
+
+<Story of={DividerStories.Demo} />

package/dist/stories/DividerPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as DividerStories from '../stories/DividerDemo.stories'
+
+<Meta title="Atoms / Divider / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DividerStories.Demo} />
+<Controls of={DividerStories.Demo} />

package/dist/stories/DotOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DotStories from '../stories/Dot.stories.tsx'
+
+<Meta title="Atoms / Dot / Overview" />
+
+# Dot
+
+`Dot` — используется для отображения, например, статуса
+
+<Story of={DotStories.Accent} />

package/dist/stories/DotPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as DotStories from '../stories/Dot.stories.tsx'
+
+<Meta title="Atoms / Dot / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DotStories.Accent} />
+<Controls of={DotStories.Accent} />

package/dist/stories/DrawerOverview.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DrawerStories from '../stories/Drawer.stories.tsx'
+
+<Meta title="Molecules / Drawer / Overview" />
+
+# Drawer
+
+`Drawer` - это компонент в виде панели, которая выдвигается от края экрана.
+Обычно он используется для выполнения задачи или просмотра некоторых деталей,
+не покидая текущую страницу. Пользователь не взаимодействует с представлением приложения,
+пока Drawer открыт, создавая, таким образом, автономный интерфейс.
+
+<Story of={DrawerStories.Default} />

package/dist/stories/DrawerPlayground.mdx

@@ -0,0 +1,10 @@
+import { Canvas, Controls, Meta } from '@storybook/addon-docs/blocks'
+
+import * as DrawerStories from '../stories/Drawer.stories.tsx'
+
+<Meta title="Molecules / Drawer / Playground" />
+
+# Playground
+
+<Canvas sourceState="shown" of={DrawerStories.Default} />
+<Controls of={DrawerStories.Default} />

package/dist/stories/DropdownOverview.mdx

@@ -0,0 +1,11 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks'
+
+import * as DropdownStories from '../stories/DropdownDemo.stories'
+
+<Meta title="Molecules / Dropdown / Overview" />
+
+# Dropdown
+
+`Dropdown` отображает список вариантов для выбора.
+
+<Story of={DropdownStories.Demo} />