@itcase/ui 1.3.31 → 1.3.32

package/dist/hooks/useStyles.js

@@ -1,180 +1,12 @@
-import { useMemo } from 'react';
-import camelCase from 'lodash/camelCase';
-import maxBy from 'lodash/maxBy';
-import upperFirst from 'lodash/upperFirst';
-import { useUserDeviceContext } from '../context/UIContext.js';
-import styleAttributes from './styleAttributes.js';
+export { useStyles } from './useStyles/useStyles.js';
+import 'react';
+import 'lodash/camelCase';
+import 'lodash/maxBy';
+import 'lodash/upperFirst';
+import '../context/UIContext.js';
+import '../tslib.es6-5FtW-kfi.js';
 import 'react/jsx-runtime';
-import './useMediaQueries.js';
+import './useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
-
-let DEVICE_TYPES = [];
-const removeDeviceType = originalKey => {
-  // Remove "mobile"/"tablet"/"desktop"
-  const withOutDeviceType = DEVICE_TYPES.reduce((cleanKey, deviceType) => {
-    if (cleanKey.endsWith(upperFirst(deviceType))) {
-      return cleanKey.replace(upperFirst(deviceType), '');
-    }
-    return cleanKey;
-  }, originalKey);
-  return withOutDeviceType;
-};
-
-/*
- * rule of prop key:
- *
- * first is style     second is div target  third is device
- * paddingHorizontal  GridInnerWrapper      MobileNormal
- *
- * paddingHorizontalGridInnerWrapperMobileNormal: "10px"
- */
-function useStyles(props) {
-  const allDevicesTypes = useUserDeviceContext();
-  const {
-    isMobile,
-    isTablet,
-    isDesktop,
-    ...fullNamedDeviceTypes
-  } = allDevicesTypes;
-
-  // prettier-ignore
-  const deviceBasePart = useMemo(() => isMobile && 'Mobile' || isTablet && 'Tablet' || isDesktop && 'Desktop' || '', [isMobile, isTablet, isDesktop]);
-  const currentDevice = useMemo(() => {
-    const deviceTypes = Object.keys(allDevicesTypes).map(key => camelCase(key.replace('is', '')));
-
-    // if "fullNamedDeviceTypes.isMobileLarge": true - that our device
-    let currentDevice = Object.keys(fullNamedDeviceTypes).find(key => fullNamedDeviceTypes[key]);
-    if (!currentDevice) {
-      currentDevice = deviceBasePart;
-    }
-    currentDevice = upperFirst(camelCase(currentDevice.replace('is', '')));
-    DEVICE_TYPES = deviceTypes;
-
-    // Set non-existent "currentDevice" value, to collect default styles later
-    return currentDevice || '__DEVICE_IS_NOT_FOUND__';
-  }, [allDevicesTypes, deviceBasePart]);
-  const propsStyleAttributes = useMemo(() => {
-    const styles = Object.entries(props).reduce((result, [propKey, propValue]) => {
-      // Collect list of possible styles for propKey. e.g:
-      // "borderLeftWidthWrapperInnerMobileNormal" to ["border", "borderLeftWidth"]
-      const possibleStyleAttributesList = styleAttributes.filter(styleAttribute => {
-        return propKey.startsWith(styleAttribute);
-      });
-
-      // Get longest style key (e.g. "borderLeftWidth")
-      const targetStyleAttribute = maxBy(possibleStyleAttributesList, 'length');
-      if (targetStyleAttribute) {
-        result[propKey] = propValue;
-      }
-      return result;
-    }, {});
-    return styles;
-    // "props" object maybe big and frequently changing
-  }, [props]);
-  const collectedStyles = useMemo(() => {
-    const resultStylesGroups = {};
-    for (const [propKey, propValue] of Object.entries(propsStyleAttributes)) {
-      let value = null;
-      const possibleStyleAttributesList = styleAttributes.filter(styleAttribute => {
-        return propKey.startsWith(styleAttribute);
-      });
-      const styleAttributeKey = maxBy(possibleStyleAttributesList, 'length');
-      const isStyleForCurrentDevice = propKey.toLowerCase().endsWith(currentDevice.toLowerCase());
-
-      // e.g. "GridWrapperInner"
-      const targetElementKey = removeDeviceType(propKey.replace(styleAttributeKey, ''));
-      const targetElementGroupKey = camelCase(targetElementKey) || 'styles';
-      if (!resultStylesGroups[targetElementGroupKey]) {
-        resultStylesGroups[targetElementGroupKey] = {};
-      }
-      if (isStyleForCurrentDevice) {
-        value = propValue;
-      } else {
-        const propKeyWithOutDeviceType = `${styleAttributeKey}${targetElementKey}`;
-        const propKeyWithBaseDeviceType = `${propKeyWithOutDeviceType}${deviceBasePart}`;
-        const defaultValue = props[propKeyWithBaseDeviceType] || props[propKeyWithOutDeviceType];
-        let currentValue = resultStylesGroups[targetElementGroupKey][styleAttributeKey];
-        if (propKeyWithOutDeviceType.includes('Horizontal')) {
-          const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
-          currentValue = resultStylesGroups[targetElementGroupKey][keyLeft];
-        } else if (propKeyWithOutDeviceType.includes('Vertical')) {
-          const keyTop = styleAttributeKey.replace('Vertical', 'Top');
-          currentValue = resultStylesGroups[targetElementGroupKey][keyTop];
-        }
-        if (!currentValue) {
-          value = defaultValue;
-        }
-      }
-      if (value) {
-        // Check not digit symbols. Chars means some unit ("px", "em", "rem" or custom "m")
-        const isValueHasUnit = /\D/.test(value);
-        // If value has some unit
-        if (isValueHasUnit) {
-          // Check value on our custom "m"(module) unit
-          /** Pattern for:
-           * 1m
-           * 1.5m
-           * 1m 1m 1.5m
-           * 0 0 1m 1m
-           */
-          const isValueHasModuleUnit = /\d+\.?\d*m\s?(?![a-zA-Z]+)/.test(value);
-          // If value has module unit
-          if (isValueHasModuleUnit) {
-            /** Order for shorthand properties:
-             *   top
-             *   right
-             *   bottom
-             *   left
-             * or:
-             *   top
-             *   right and left
-             *   bottom
-             * or:
-             *   top and bottom
-             *   right and left
-             */
-
-            const valuePxPartsList = value.split(' ').map(valuePart => {
-              const valueModule = valuePart.replace(/[a-z]/gi, '');
-              const valuePx = parseFloat(valueModule) * 8;
-              return `${valuePx}px`;
-            }, []);
-            value = valuePxPartsList.join(' ');
-          }
-        } else {
-          // Some properties doesn't have any units
-          const ignorePX = ['zIndex', 'order', 'flexGrow'].includes(styleAttributeKey);
-          if (!ignorePX) {
-            // Add px to non-unit value
-            value = `${value}px`;
-          }
-        }
-        if (styleAttributeKey.includes('Horizontal')) {
-          const keyRight = styleAttributeKey.replace('Horizontal', 'Right');
-          const keyLeft = styleAttributeKey.replace('Horizontal', 'Left');
-          const valuePartsList = value.split(' ');
-          const valueRight = valuePartsList[0];
-          const valueLeft = valuePartsList[1] || valuePartsList[0];
-          resultStylesGroups[targetElementGroupKey][keyRight] = valueRight;
-          resultStylesGroups[targetElementGroupKey][keyLeft] = valueLeft;
-        } else if (styleAttributeKey.includes('Vertical')) {
-          const keyTop = styleAttributeKey.replace('Vertical', 'Top');
-          const keyBottom = styleAttributeKey.replace('Vertical', 'Bottom');
-          const valuePartsList = value.split(' ');
-          const valueTop = valuePartsList[0];
-          const valueBottom = valuePartsList[1] || valuePartsList[0];
-          resultStylesGroups[targetElementGroupKey][keyTop] = valueTop;
-          resultStylesGroups[targetElementGroupKey][keyBottom] = valueBottom;
-        } else {
-          resultStylesGroups[targetElementGroupKey][styleAttributeKey] = value;
-        }
-      }
-    }
-    return resultStylesGroups;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [deviceBasePart, currentDevice, ...Object.values(propsStyleAttributes)]);
-  return collectedStyles;
-}
-
-export { useStyles };
+import './useStyles/styleAttributes.js';

package/dist/stories/AlignContent.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AlignContentStories from './FlexAlignContent.stories.tsx'
+import * as AlignContentStories from '../stories/FlexAlignContent.stories.tsx'
 
 <Meta title="Layout / Flex / AlignContent" />
 

package/dist/stories/AlignItems.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AlignItemsStories from './AlignItems.stories.tsx'
+import * as AlignItemsStories from '../stories/AlignItems.stories.tsx'
 
 <Meta title="Layout / Group / AlignItems" />
 

package/dist/stories/AlignSelf.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AlignSelfStories from './AlignSelf.stories.tsx'
+import * as AlignSelfStories from '../stories/AlignSelf.stories.tsx'
 
 <Meta title="Layout / Group / AlignSelf" />
 

package/dist/stories/Appearance.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AppearanceStories from './Appearance.stories.tsx'
+import * as AppearanceStories from '../stories/Appearance.stories.tsx'
 
 <Meta title="Atoms / Tab / Appearance" />
 

package/dist/stories/Avatar.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as AvatarStories from './Avatar.stories.tsx'
+import * as AvatarStories from '../stories/Avatar.stories.tsx'
 
 <Meta of={AvatarStories} />
 

package/dist/stories/Checkbox.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta, Story } from '@storybook/blocks'
 
-import * as CheckboxStories from './Checkbox.stories.tsx'
+import * as CheckboxStories from '../stories/Checkbox.stories.tsx'
 
 <Meta of={CheckboxStories} />
 

package/dist/stories/Checkmark.mdx

@@ -1,11 +1,15 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as CheckmarkStories from './Checkmark.stories.tsx'
+import * as CheckmarkStories from '../stories/Checkmark.stories.tsx'
 
 <Meta of={CheckmarkStories} />
 
 # Checkmark
 
-## Refused
+## AcceptedChecked
 
-<Canvas sourceState="shown" of={CheckmarkStories.Refused} />
+<Canvas sourceState="shown" of={CheckmarkStories.AcceptedChecked} />
+
+## AcceptedUnchecked
+
+<Canvas sourceState="shown" of={CheckmarkStories.AcceptedUnchecked} />

package/dist/stories/Chips.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as ChipsStories from './Chips.stories.tsx'
+import * as ChipsStories from '../stories/Chips.stories.tsx'
 
 <Meta of={ChipsStories} />
 

package/dist/stories/Choice.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as ChoiceStories from './Choice.stories.tsx'
+import * as ChoiceStories from '../stories/Choice.stories.tsx'
 
 <Meta of={ChoiceStories} />
 

package/dist/stories/Code.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as CodeStories from './Code.stories.tsx'
+import * as CodeStories from '../stories/Code.stories.tsx'
 
 <Meta of={CodeStories} />
 

package/dist/stories/Columns.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as ColumnsStories from './Columns.stories.tsx'
+import * as ColumnsStories from '../stories/Columns.stories.tsx'
 
 <Meta title="Layout / Group / Columns" />
 

package/dist/stories/Components.mdx

@@ -0,0 +1,197 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Overview / Component" />
+
+# Component
+
+
+## Типовая структура компонента
+
+Компоненты используют типовую структуру папок и файлов
+
+```js
+/ComponentName/
+  ├─ appearance/   // 👈 настройки appearance
+  │  └─ componentNameAccent.ts     // 👈 accent настройки
+  ├─ css/          // 👈 css файлы
+  │  └─ componentName.css
+  ├─ docs/         // 👈 mdx файл с документаций компонента
+  │  ├─ Overview.mdx       // 👈 базовая информация о компоненте
+  │  └─ Playground.mdx     // 👈 песочница компонента
+  ├─ stories/      // 👈 истории для компонента используются в mdx файлах
+  │  └─ Demo.stories.tsx   // 👈 демо компонента
+  ├─ ComponentName.appearance.ts   // 👈 импорт appearance
+  ├─ ComponentName.css             // 👈 импорт css файлов
+  ├─ ComponentName.interface.ts    // 👈 типы
+  ├─ ComponentName.tokens.css      // 👈 настройки css токенов
+  ├─ ComponentName.tsx             // 👈 код компонента
+  └─ index.ts
+```
+
+Описание файлов с типовым содержимым:
+
+### 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,
+}
+```
+
+### componentNameAppearanceAccent.ts
+
+Пример настроек для `componentNameAppearanceAccent` темы
+
+```js
+
+const componentNameAppearanceAccent = {
+  ...
+  accent: {
+    // 👇 настройки props согласно компоненту
+    dotFill: 'accentItemPrimary',
+    iconFill: 'accentItemPrimary',
+  },
+  ...
+}
+
+export { componentNameAppearanceAccent }
+
+```
+
+
+### `/stories`
+
+Содержит минимум один файл в формате `НазваниеКомпонента.stories.tsx `
+
+```js
+/stories/
+  └─ Demo.stories.tsx 
+```
+
+```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"
+      />
+    )
+  },
+}
+
+```
+
+### `/docs`
+
+Содержит истории в формате Storybook
+
+```js
+/docs/
+  ├─ Overview.mdx       // 👈 базовая информация о компоненте
+  └─ Playground.mdx     // 👈 песочница компонента
+```
+
+Базовая информация о компоненте
+
+```jsx
+import { Canvas, Meta } from '@storybook/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/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} />
+```

package/dist/stories/DatePicker.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as DatePickerStories from './DatePicker.stories.tsx'
+import * as DatePickerStories from '../stories/DatePicker.stories.tsx'
 
 <Meta of={DatePickerStories} />
 

package/dist/stories/Dev.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as TitleStories from './Title.stories.tsx'
+import * as TitleStories from '../stories/Title.stories.tsx'
 
 <Meta title="Atoms / Title / Dev Mode" />
 

package/dist/stories/DevMode.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story } from '@storybook/blocks'
 
-import * as ResponseStories from './Response.stories.tsx'
+import * as ResponseStories from '../stories/Response.stories.tsx'
 
 <Meta title="Molecules / Response / Dev Mode" />
 

package/dist/stories/Direction.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as DirectionStories from './Direction.stories.tsx'
+import * as DirectionStories from '../stories/Direction.stories.tsx'
 
 <Meta title="Layout / Group / Direction" />
 

package/dist/stories/Divider.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as DividerStories from './Divider.stories.tsx'
+import * as DividerStories from '../stories/Divider.stories.tsx'
 
 <Meta of={DividerStories} />
 

package/dist/stories/Dot.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as DotStories from './Dot.stories.tsx'
+import * as DotStories from '../stories/Dot.stories.tsx'
 
 <Meta of={DotStories} />
 

package/dist/stories/Drawer.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as DrawerStories from './Drawer.stories.tsx'
+import * as DrawerStories from '../stories/Drawer.stories.tsx'
 
 <Meta of={DrawerStories} />
 

package/dist/stories/Dropdown.mdx

@@ -1,7 +1,7 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as DropdownStories from './Dropdown.stories.tsx'
-import * as DropdownItemStories from './DropdownItem.stories.tsx'
+import * as DropdownStories from '../stories/Dropdown.stories.tsx'
+import * as DropdownItemStories from '../stories/DropdownItem.stories.tsx'
 
 <Meta of={DropdownStories} />
 

package/dist/stories/DropdownItem.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as DropdownItemStories from './DropdownItem.stories.tsx'
+import * as DropdownItemStories from '../stories/DropdownItem.stories.tsx'
 
 <Meta of={DropdownItemStories} />
 

package/dist/stories/Group.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as GroupStories from './Group.stories.tsx'
+import * as GroupStories from '../stories/Group.stories.tsx'
 
 <Meta title="Atoms / Tab / TabGroub" />
 

package/dist/stories/Grow.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as GrowStories from './FlexGrow.stories.tsx'
+import * as GrowStories from '../stories/FlexGrow.stories.tsx'
 
 <Meta title="Layout / Flex / Grow" />
 

package/dist/stories/HeroTitle.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as HeroTitleStories from './HeroTitle.stories.tsx'
+import * as HeroTitleStories from '../stories/HeroTitle.stories.tsx'
 
 <Meta of={HeroTitleStories} />
 

package/dist/stories/Icon.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as IconStories from './Icon.stories.tsx'
+import * as IconStories from '../stories/Icon.stories.tsx'
 
 <Meta of={IconStories} />
 

package/dist/stories/Image.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as ImageStories from './Image.stories.tsx'
+import * as ImageStories from '../stories/Image.stories.tsx'
 
 <Meta of={ImageStories} />
 

package/dist/stories/Input.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as InputStories from './Input.stories.tsx'
+import * as InputStories from '../stories/Input.stories.tsx'
 
 <Meta of={InputStories} />
 

package/dist/stories/InputPassword.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as InputPasswordStories from './InputPassword.stories.tsx'
+import * as InputPasswordStories from '../stories/InputPassword.stories.tsx'
 
 <Meta of={InputPasswordStories} />
 

package/dist/stories/JustifyContent.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as JustifyStories from './JustifyContent.stories.tsx'
+import * as JustifyStories from '../stories/JustifyContent.stories.tsx'
 
 <Meta title="Layout / Group / JustifyContent" />
 

package/dist/stories/Label.mdx

@@ -1,6 +1,6 @@
 import { Canvas, Meta } from '@storybook/blocks'
 
-import * as LabelStories from './Label.stories.tsx'
+import * as LabelStories from '../stories/Label.stories.tsx'
 
 <Meta of={LabelStories} />