@itcase/ui 1.8.39 → 1.8.41

package/dist/stories/Components.mdx

@@ -11,15 +11,40 @@ import { Meta } from '@storybook/blocks'
 
 ```js
 /ComponentName/
-  ├─ appearance/   // 👈 настройки appearance
-  │  └─ componentNameAccent.ts     // 👈 accent настройки
-  ├─ css/          // 👈 css файлы
+  ├─ docs // 👈 mdx файл с документаций компонента
+  │  ├─ Overview.mdx   // 👈 базовая информация о компоненте
+  │  └─ Platground.mdx // 👈 песочница компонента
+  ├─ css
   │  └─ componentName.css
-  ├─ docs/         // 👈 mdx файл с документаций компонента
-  │  ├─ Overview.mdx       // 👈 базовая информация о компоненте
-  │  └─ Playground.mdx     // 👈 песочница компонента
-  ├─ stories/      // 👈 истории для компонента используются в mdx файлах
-  │  └─ Demo.stories.tsx   // 👈 демо компонента
+  ├─ 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    // 👈 типы
@@ -28,73 +53,66 @@ import { Meta } from '@storybook/blocks'
   └─ index.ts
 ```
 
-Описание файлов с типовым содержимым:
+### `/docs`
 
-### index.ts
+Содержит истории в формате Storybook
 
 ```js
-// 👇 экспорт настроек componentNameAppearance
-export { componentNameAppearance } from './ComponentName.appearance'
-// 👇 экспорт компонента и его конфигурации
-export { ComponentName, componentNameConfig } from './ComponentName'
+/docs/
+  ├─ Overview.mdx       // 👈 базовая информация о компоненте
+  └─ Playground.mdx     // 👈 песочница компонента
 ```
 
-### 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;
-  ...
-}
-```
+```jsx
+import { Canvas, Meta } from '@storybook/blocks'
+// 👇 импорт истории для использованя на странице
+import * as ComponentNameStories from '../stories/Demo.stories.tsx'
+// 👇 расположение компонента
+<Meta title="Atoms / ComponentName / Overview" />
 
-### ComponentName.css
+# ComponentName
+`ComponentName` — используется для отображения компонента
 
-Файл импорта css файлов
+## Demo
+// 👇 демонстрация Demo
+<Canvas sourceState="shown" of={ComponentNameStories.Demo} />
 
-```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';
+## Skeleton
+// 👇 демонстрация Skeleton
+<Canvas sourceState="shown" of={ComponentNameStories.Skeleton} />
 ```
 
+Песочница
 
-### ComponentName.appearance.ts
-
-Основной файл импорта оформлений
-
-```js
-// 👇 импорт Accent темы
-import { componentNameAppearanceAccent } from './appearance/componentNameAccent'
-import { componentNameAppearanceType } from './ComponentName.interface'
+```jsx
+import { Canvas, Controls, Meta } from '@storybook/blocks'
+// 👇 импорт истории для использованя на странице
+import * as ComponentNameStories from '../stories/Demo.stories.tsx'
+// 👇 расположение компонента
+<Meta title="Atoms / ComponentName / Playground" />
 
-export const componentNameAppearance: componentNameAppearanceType = {
-    // 👇 экспорт Accent темы
-    ...componentNameAppearanceAccent,
-}
+# Playground
+<Canvas sourceState="shown" of={ComponentNameStories.Demo} />
+<Controls of={ComponentNameStories.Demo} />
 ```
 
-### componentNameAppearanceAccent.ts
+### `appearance`
 
-Пример настроек для `componentNameAppearanceAccent` темы
+#### Чтобы закрасить компонент
+Используется цвет согласно фигме, для иконок добавляется суффикс `Item`, дял текста `Text`.
 
-```js
+#### Чтобы указать состояния
+Если есть состояния у компонента, `active`, `hover`, то цвета для них указать в `appearanre` c цветами.
 
+```js
 const componentNameAppearanceAccent = {
   ...
   accent: {
     // 👇 настройки props согласно компоненту
+    fill: 'accentPrimary'
+    textColor: 'labelTextColor',
     dotFill: 'accentItemPrimary',
     iconFill: 'accentItemPrimary',
   },
@@ -102,19 +120,81 @@ const componentNameAppearanceAccent = {
 }
 
 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`
 
-Содержит минимум один файл в формате `НазваниеКомпонента.stories.tsx `
+Содержит минимум такую структуру 👇, почти для каждого компонента
 
 ```js
-/stories/
-  └─ Demo.stories.tsx 
+  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'
 
@@ -151,47 +231,258 @@ export const Skeleton = {
 
 ```
 
-### `/docs`
+1. Каждый цвет это отдельная история,
+```tsx
+import { ComponentName } from '../ComponentName'
 
-Содержит истории в формате Storybook
+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
-/docs/
-  ├─ Overview.mdx       // 👈 базовая информация о компоненте
-  └─ Playground.mdx     // 👈 песочница компонента
+// 👇 экспорт настроек componentNameAppearance
+export { componentNameAppearance } from './ComponentName.appearance'
+// 👇 экспорт компонента и его конфигурации
+export { ComponentName, componentNameConfig } from './ComponentName'
 ```
 
-Базовая информация о компоненте
+### ComponentName.tokens.css
 
-```jsx
-import { Canvas, Meta } from '@storybook/blocks'
-// 👇 импорт истории для использованя на странице
-import * as ComponentNameStories from '../stories/Demo.stories.tsx'
-// 👇 расположение компонента
-<Meta title="Atoms / ComponentName / Overview" />
+Файл содержит переменные в формат [CSS переменные](https://developer.mozilla.org/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties)
 
-# ComponentName
-`ComponentName` — используется для отображения компонента
+```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;
+  ...
+}
+```
 
-## Demo
-// 👇 демонстрация Demo
-<Canvas sourceState="shown" of={ComponentNameStories.Demo} />
+### ComponentName.css
 
-## Skeleton
-// 👇 демонстрация Skeleton
-<Canvas sourceState="shown" of={ComponentNameStories.Skeleton} />
+Файл импорта 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';
 ```
 
-Песочница
 
-```jsx
-import { Canvas, Controls, Meta } from '@storybook/blocks'
-// 👇 импорт истории для использованя на странице
-import * as ComponentNameStories from '../stories/Demo.stories.tsx'
-// 👇 расположение компонента
-<Meta title="Atoms / ComponentName / Playground" />
+### ComponentName.appearance.ts
 
-# Playground
-<Canvas sourceState="shown" of={ComponentNameStories.Demo} />
-<Controls of={ComponentNameStories.Demo} />
-```
+Основной файл импорта оформлений
+
+```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/useAppearanceConfig.mdx

@@ -0,0 +1,83 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Hooks / useAppearanceConfig" />
+
+# `useAppearanceConfig`
+Хук позволяет возвращает объект из всех `appearance` переданных компоненту
+
+## Использование
+
+```js
+import { useAppearanceConfig } from 'src/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

@@ -92,17 +92,15 @@ const componentConfig: ComponentConfig = {
 }
 ```
 
-Нужен appearanceConfig
+Используем `useAppearanceConfig`
 ```js
-  const appearanceConfig = appearance?.split(' ').reduce(
-    (resultConfig, appearanceKey) => ({
-      ...resultConfig,
-      ...componentConfig.appearance?.[appearanceKey],
-    }),
-    {},
+  const { appearanceConfig } = useAppearanceConfig(
+    appearance,
+    componentConfig,
+    isDisabled,
   )
 ```
-Которому передается созданный ранее componentConfig и его результатом будет единый объект со свойствами из разных appearance
+Которому передается созданный ранее `componentConfig` и `appearance`, его результатом будет единый объект со свойствами из разных appearance
 
 ```js
 {

package/dist/types/components/Button/appearance/buttonAccent.d.ts

@@ -1,15 +1,4 @@
 declare const buttonAppearanceAccent: {
-    accent: {
-        fill: string;
-        fillHover: string;
-        labelTextColor: string;
-        labelTextColorHover: string;
-        borderColor: string;
-        iconAfterFillIcon: string;
-        iconBeforeFillIcon: string;
-        iconFillIcon: string;
-        loaderAppearance: string;
-    };
     accentPrimary: {
         fill: string;
         fillHover: string;

package/dist/types/components/Chips/appearance/chipsDisabled.d.ts

@@ -1,11 +1,10 @@
 declare const chipsAppearanceDisabled: {
     disabled: {
         fill: string;
-        fillActive: string;
-        fillHover: string;
         labelTextColor: string;
-        labelTextHoverColor: string;
         borderColor: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
     };
 };
 export { chipsAppearanceDisabled };