@itcase/ui 1.8.18 → 1.8.21

package/dist/stories/useDevicePropsGenerator.mdx

@@ -3,7 +3,62 @@ import { Meta } from '@storybook/blocks'
 <Meta title="Hooks / useDevicePropsGenerator" />
 
 # `useDevicePropsGenerator`
-Хук позволяет автоматически получать значения пропсов или appearance, соответствующие viewport пользователя, а также преобразовывать их в CSS‑классы.
+Хук позволяет автоматически получать значения `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' }} />
+```
 
 ## Использование
 
@@ -19,35 +74,25 @@ const componentConfig: ComponentConfig = {
 ```
 
 2. Для того чтобы передавать несколько appearance в одной строке, например:
-
 ```jsx
 <Component appearance='errorPrimary sizeM' />
 ```
 
 где `errorPrimary` это
-
 ```js
 {
   fill: 'errorTertiary',
-  borderColor: 'errorBorderQuaternary',
-  borderHover: 'errorBorderQuaternary',
-  textColor: 'surfaceTextPrimary',
-  iconBeforeFill: 'errorItemQuaternary',
-  iconClearFill: 'errorItemPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
 }
 ```
 
 а `sizeM` это
-
-```js
+```ts
 {
   size: 'm',
-  textSize: 'm',
 }
 ```
 
-нужен appearanceConfig
+Нужен appearanceConfig
 ```js
   const appearanceConfig = appearance?.split(' ').reduce(
     (resultConfig, appearanceKey) => ({
@@ -57,19 +102,12 @@ const componentConfig: ComponentConfig = {
     {},
   )
 ```
-которому передается созданный ранее componentConfig и его результатом будет единный объект со свойствами из разных appearance
+Которому передается созданный ранее componentConfig и его результатом будет единый объект со свойствами из разных appearance
 
 ```js
 {
   fill: 'errorTertiary',
-  borderColor: 'errorBorderQuaternary',
-  borderHover: 'errorBorderQuaternary',
-  textColor: 'surfaceTextPrimary',
-  iconBeforeFill: 'errorItemQuaternary',
-  iconClearFill: 'errorItemPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
   size: "m",
-  textSize: "m"
 }
 ```
 
@@ -106,7 +144,7 @@ const componentConfig: ComponentConfig = {
 </table>
 
 
-Из propsGenerator получаем переменные со строками, которые соответствуют appearance переданными в хук. Если указать просто fill, то получим `errorTertiary`,
+Из propsGenerator получаем переменные со строками, которые соответствуют appearance переданными в хук. Если указать просто `fill`, то получим `errorTertiary`,
 если укажем `fillClass` то получим `error-tertiary`, поэтому везде в приведенном ниже примере указан суффикс `Class`.
 
 ```js
@@ -114,100 +152,36 @@ const componentConfig: ComponentConfig = {
 
   const {
     fillClass,
-    borderColorClass,
-    borderHoverClass,
-    borderWidthClass,
-    textColorClass,
-    textSizeClass,
-    textWeightClass,
-    caretClass,
-    placeholderTextColorClass,
-    shapeClass,
     sizeClass,
-    widthClass,
   } = propsGenerator
 ```
 
 4. Применяем стили к компоненту. Важно учитывать, если в названии класса указывается сначала название компонента, это означает что он ссылается на стили,
-которые определены внутри директории этого компонента
+которые определены внутри директории этого компонента `src/components/Component/css`
 
-```js
-`border-width_${borderWidthClass}
+```jsx
+'textarea__input'
 ```
 
-если в названии класса нет название комопнента, это означает что ссылаемся на глобальный класс, который определен `src/styles`
-
-```js
+Если в названии класса нет название компонента, это означает что ссылаемся на глобальный класс, который определен `src/styles`
+```jsx
 `fill_${fillClass}`
 ```
 
-``jsx
+```jsx
 <textarea
-  id={id}
   className={clsx(
     'textarea__input',
-    (textSizeClass || textColorClass || textWeightClass) && 'text',
-    caretClass && `caret-color_${caretClass}`,
     fillClass && `fill_${fillClass}`,
-    borderColorClass && `border-color_${borderColorClass}`,
-    borderWidthClass && `border-width_${borderWidthClass}`,
-    borderHoverClass && `border-color_hover_${borderHoverClass}`,
-    placeholderTextColorClass && `placeholder-text-color_${placeholderTextColorClass}`,
-    textSizeClass && `text_size_${textSizeClass}`,
-    textColorClass && `text-color_${textColorClass}`,
-    textWeightClass && `text-weight_${textWeightClass}`,
-    widthClass && `width_${widthClass}`,
+    sizeClass && `size_${sizeClass}`,
   )}
 />
 ```
-к примеру `fill`, будет отображаться в браузере как `fill_`
 
-Возьмем к примеру fillClass
+К примеру fill, будет отображаться в браузере как `fill_error-tertiary`.
 
-Возьмем appearance из приведенного ранее примера
-```js
-{
-  fill: 'errorTertiary',
-  borderColor: 'errorBorderQuaternary',
-  borderHover: 'errorBorderQuaternary',
-  textColor: 'surfaceTextPrimary',
-  iconBeforeFill: 'errorItemQuaternary',
-  iconClearFill: 'errorItemPrimary',
-  placeholderTextColor: 'surfaceTextQuaternary',
-  size: "m",
-  textSize: "m"
-}
-```
-
-и возьмем из него свойство `fill_error-tertiary`
-
-5. Cоздаются классы, которые соответствуют структуре определенной в css-файлах, например глобальный класс `fill`
-
-```css
-.fill {
-  &_none {
-    background-color: transparent;
-  }
-  @each $type in accent, primary, secondary, tertiary, quaternary, surface,
-    error, success, warning, info, danger, gradient, disabled, hover, inverse {
-    @each $color in primary, secondary, tertiary, quaternary, accent, disabled,
-      hover, inverse {
-      &_$(type) {
-        &-item {
-          &-$(color) {
-            background: var(--color-$(type)-item-$(color));
-          }
-        }
-        &-$(color) {
-          background: var(--color-$(type)-$(color));
-        }
-      }
-    }
-  }
-}
-```
 
-6. Чтобы применить стили в зависимости от viewPort, для этого нужно указать в appearance
+6. Чтобы применить стили в зависимости от `viewPort`, для этого нужно указать в `appearance` суффикс `Mobile` или `Desktop` или `Tablet`
 
 ```js
 {
@@ -215,16 +189,16 @@ const componentConfig: ComponentConfig = {
   textSizeMobile: 'm',
 }
 ```
-или напрямую при использовании компонента
+
+Или напрямую при использовании компонента
 
 ```js
 <Component sizeMobile="m"/>
 ```
 
-всего доступны 3 типа размеров
-
-1. Mobile
-2. Tablet
-3. Desktop
+Всего доступны 3 типа размеров
+1. Mobile (от `240px` до `768px`)
+2. Tablet (от `768px` до `960px`)
+3. Desktop (от `960px` до `1920px`)
 
-подробнее об этом можно узнать в `UIContext.tsx`.
+Подробнее об этом можно узнать в `src/context/UIContext.tsx`, ознакомиться с размерами для (`Mobile`, `Tablet`, `Desktop`) можно в `src/hooks/useMediaQueries/mediaQueries.json`

package/dist/stories/useMediaQueries.mdx

@@ -23,20 +23,45 @@ import { Meta } from '@storybook/blocks'
     <td>userDevice</td>
     <td>UserDeviceState</td>
     <td>`{}`</td>
-    <td>Булевые флаги устройства пользователя</td>
+    <td>`Boolean` флаги устройства пользователя</td>
   </tr>
   </tbody>
 </table>
 
 ### Возвращает объект
 
-`deviceTypes` - который является объектом в котором находятся все флаги
+`deviceTypes` - который является объектом в котором находятся все `boolean` флаги
 
-- `isMobile` — 
-- `isMobileHuge` —
-- `isTablet` —
-- `isDesktop` — 
-- `isDesktopMega —`
+<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>
 
 ### Использование
 

package/dist/stories/useStyles.mdx

@@ -4,15 +4,63 @@ import { Meta } from '@storybook/blocks'
 
 # `useStyles`
 
-Хук конвертирует `props` компонента в `inline` стили.
+Хук конвертирует props компонента в inline стили.
 
 Важно учитывать приоритет при котором будут применяться стили:
 
-1. Сначала используется значение из props, соответствующее текущему устройству (Mobile например)
+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
 
 ### Параметры

package/dist/types/components/AvatarStack/AvatarStack.d.ts

@@ -0,0 +1,3 @@
+import { AvatarStackProps } from './AvatarStack.interface';
+declare function AvatarStack(props: AvatarStackProps): any;
+export { AvatarStack };

package/dist/types/components/AvatarStack/AvatarStack.interface.d.ts

@@ -0,0 +1,9 @@
+import { SizePXProps, TextSizeProps } from '@itcase/ui/types';
+interface AvatarStackProps {
+    avatarSize: SizePXProps;
+    showCountUsers?: number;
+    textSize?: TextSizeProps;
+    userFirstName?: string;
+    userLastName?: string;
+}
+export type { AvatarStackProps };

package/dist/types/components/AvatarStack/index.d.ts

@@ -0,0 +1,2 @@
+import { AvatarStack } from './AvatarStack';
+export { AvatarStack };

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

@@ -7,5 +7,13 @@ declare const buttonAppearanceDanger: {
         loaderFill: string;
         loaderItemFill: string;
     };
+    dangerPrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
 };
 export { buttonAppearanceDanger };

package/dist/types/components/CookiesWarning/CookiesWarning.appearance.d.ts

@@ -0,0 +1,5 @@
+export declare const cookiesWarningAppearance: {
+    dev: {
+        fill: string;
+    };
+};

package/dist/types/components/CookiesWarning/index.d.ts

@@ -1,2 +1,3 @@
 import { CookiesWarning } from './CookiesWarning';
-export { CookiesWarning };
+import { cookiesWarningAppearance } from './CookiesWarning.appearance';
+export { CookiesWarning, cookiesWarningAppearance };

package/dist/types/components/Drawer/appearance/drawerSurface.d.ts

@@ -0,0 +1,25 @@
+declare const drawerAppearanceSurface: {
+    surfacePrimary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+    surfaceQuaternary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+    surfaceSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+    surfaceTertiary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { drawerAppearanceSurface };

package/dist/types/components/Dropdown/appearance/dropdownAccent.d.ts

@@ -1,8 +1,4 @@
 declare const dropdownAppearanceAccent: {
-    accent: {
-        fill: string;
-        fillHover: string;
-    };
     accentPrimary: {
         fill: string;
         fillHover: string;
@@ -14,8 +10,6 @@ declare const dropdownAppearanceAccent: {
         labelTextColor: string;
         labelTextColorHover: string;
         borderColor: string;
-        loaderFill: string;
-        loaderItemFill: string;
     };
 };
 export { dropdownAppearanceAccent };

package/dist/types/components/Dropdown/appearance/dropdownSurface.d.ts

@@ -3,6 +3,11 @@ declare const dropdownAppearanceSurface: {
         fill: string;
         fillHover: string;
         labelTextColor: string;
+        labelTextColorActive: string;
+        labelTextColorActiveHover: string;
+        labelTextColorHover: string;
+        iconAfterFillIcon: string;
+        iconBeforeFillIcon: string;
     };
     surfaceQuaternary: {
         fill: string;

package/dist/types/components/InputPassword/InputPassword.appearance.d.ts

@@ -1,3 +1,2 @@
-import { InputAppearance, InputState } from './InputPassword.interface';
-export declare const InputPasswordAppearance: InputAppearance;
-export declare const InputPasswordState: InputState;
+import { InputPasswordAppearanceType } from './InputPassword.interface';
+export declare const inputPasswordAppearance: InputPasswordAppearanceType;

package/dist/types/components/InputPassword/InputPassword.interface.d.ts

@@ -1,4 +1,4 @@
-import { AppearanceKeysDefault, BorderColorProps, BorderWidthProps, FillProps, IconSizeProps, ItemColorProps, ShapeProps, SizeProps, StateKeysDefault, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
+import { AppearanceKeysDefault, BorderColorProps, BorderWidthProps, FillProps, IconSizeProps, ItemColorProps, ShapeProps, SizeProps, TextColorProps, TextSizeProps, TextWeightProps, WidthProps } from '@itcase/types';
 import { StyleAttributes } from 'src/hooks/useStyles/styleAttributes.interface';
 export interface InputThemeColor {
     [key: number | string | symbol]: any;
@@ -15,19 +15,13 @@ export interface InputThemeColor {
     width?: WidthProps;
 }
 type AppearanceKeys = AppearanceKeysDefault & {};
-type stateKeysType = StateKeysDefault & {};
-export type InputState = {
-    [key in stateKeysType]?: InputThemeColor;
-};
-export type InputAppearance = {
+export type InputPasswordAppearanceType = {
     [key in AppearanceKeys]?: InputThemeColor;
 };
 export interface InputPasswordConfig {
     [key: number | string | symbol]: any;
-    appearance: InputAppearance | undefined;
-    state: InputState | undefined;
-    setAppearance: (newComponent: InputAppearance) => void;
-    setState: (newComponent: InputState) => void;
+    appearance: InputPasswordAppearanceType | undefined;
+    setAppearance: (newComponent: InputPasswordAppearanceType) => void;
 }
 export interface InputPasswordProps extends InputThemeColor, StyleAttributes {
     id?: number | string;
@@ -44,7 +38,6 @@ export interface InputPasswordProps extends InputThemeColor, StyleAttributes {
     imageRevealableHide?: string;
     imageRevealableShow?: string;
     placeholder?: string;
-    state?: stateKeysType;
     value?: string;
     isRevealable?: boolean;
     onBlur?: () => void;

package/dist/types/components/InputPassword/appearance/inputPasswordAccent.d.ts

@@ -0,0 +1,20 @@
+declare const inputPasswordAppearanceAccent: {
+    accent: {
+        fill: string;
+        fillHover: string;
+    };
+    accentPrimary: {
+        fill: string;
+        fillHover: string;
+        borderColor: string;
+    };
+    accentSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceAccent };

package/dist/types/components/InputPassword/appearance/inputPasswordDanger.d.ts

@@ -0,0 +1,7 @@
+declare const inputPasswordAppearanceDanger: {
+    danger: {
+        fill: string;
+        fillHover: string;
+    };
+};
+export { inputPasswordAppearanceDanger };

package/dist/types/components/InputPassword/appearance/inputPasswordDisabled.d.ts

@@ -0,0 +1,20 @@
+declare const inputPasswordAppearanceDisabled: {
+    disabledPrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    disabledSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { inputPasswordAppearanceDisabled };

package/dist/types/components/InputPassword/appearance/inputPasswordError.d.ts

@@ -0,0 +1,11 @@
+declare const inputPasswordAppearanceError: {
+    error: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceError };

package/dist/types/components/InputPassword/appearance/inputPasswordInfo.d.ts

@@ -0,0 +1,21 @@
+declare const inputPasswordAppearanceInfo: {
+    info: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+    infoSecondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+        labelTextColorHover: string;
+        borderColor: string;
+        loaderFill: string;
+        loaderItemFill: string;
+    };
+};
+export { inputPasswordAppearanceInfo };

package/dist/types/components/InputPassword/appearance/inputPasswordPrimary.d.ts

@@ -0,0 +1,8 @@
+declare const inputPasswordAppearancePrimary: {
+    primary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { inputPasswordAppearancePrimary };

package/dist/types/components/InputPassword/appearance/inputPasswordRequire.d.ts

@@ -0,0 +1,20 @@
+declare const inputPasswordAppearanceRequire: {
+    requirePrimary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        textColor: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+    requireSecondary: {
+        fill: string;
+        borderColor: string;
+        borderHover: string;
+        iconBeforeFill: string;
+        iconClearFill: string;
+        placeholderTextColor: string;
+    };
+};
+export { inputPasswordAppearanceRequire };

package/dist/types/components/InputPassword/appearance/inputPasswordSecondary.d.ts

@@ -0,0 +1,8 @@
+declare const inputPasswordAppearanceSecondary: {
+    secondary: {
+        fill: string;
+        fillHover: string;
+        labelTextColor: string;
+    };
+};
+export { inputPasswordAppearanceSecondary };