@itcase/ui 1.8.107 → 1.8.109

package/dist/css/styles/fill/fill.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_none {

package/dist/css/styles/fill/fill_active.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_active {

package/dist/css/styles/fill/fill_active_hover.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_active {

package/dist/css/styles/fill/fill_gradient.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill_gradient,
   $(selector).fill_gradient {
     @each $type in primary, secondary, tertiary, quaternary {

package/dist/css/styles/fill/fill_hover.css

@@ -1,4 +1,4 @@
-@each $selector in button, input, textarea {
+@each $selector in div, button, input, textarea {
   .fill,
   $(selector).fill {
     &_hover {

package/dist/hooks/useActiveClasses/useActiveClasses.helpers.js

@@ -0,0 +1,116 @@
+var CLASS_RULES = {
+    fill: [
+        {
+            key: 'fillClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return !isActive && !isDisabled;
+            },
+        },
+        {
+            key: 'fillHoverClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return !isActive && !isDisabled;
+            },
+        },
+        {
+            key: 'fillActiveClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return Boolean(isActive) && !isDisabled;
+            },
+        },
+        {
+            key: 'fillActiveHoverClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return Boolean(isActive) && !isDisabled;
+            },
+        },
+        {
+            key: 'fillDisabledClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return !isActive && Boolean(isDisabled);
+            },
+        },
+    ],
+    borderColor: [
+        {
+            key: 'borderColorClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return !isActive && !isDisabled;
+            },
+        },
+        {
+            key: 'borderColorHoverClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return !isActive && !isDisabled;
+            },
+        },
+        {
+            key: 'borderColorActiveClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return Boolean(isActive) && !isDisabled;
+            },
+        },
+    ],
+    textColor: [
+        {
+            key: 'textColorClass',
+            stateFn: function (_a) {
+                var isDisabled = _a.isDisabled, isActive = _a.isActive;
+                return !isActive && !isDisabled;
+            },
+        },
+    ],
+};
+var formatState = function (key) {
+    // Try to find one of the state tokens in the input key:
+    // - matches "ActiveHover", "Active", "Hover" or "Disabled"
+    // - case-insensitive because of the /i flag
+    // Examples of matches:
+    //  "fillActiveHoverColor"  -> match[0] === "ActiveHover"
+    //  "borderDisabled"        -> match[0] === "Disabled"
+    var stateMatch = key.match(/(ActiveHover|Active|Hover|Disabled)/i);
+    if (!stateMatch) {
+        return '';
+    }
+    // Replace the matched token with a normalized snake-like form and
+    // prepend an underscore. The chained replace calls map:
+    //  ActiveHover -> active_hover
+    //  Active      -> active
+    //  Hover       -> hover
+    //  Disabled    -> disabled
+    // The final .toLowerCase() ensures output is lowercased regardless of input casing.
+    // Examples:
+    //  "fillActiveHoverColor"  -> "_active_hover"
+    //  "borderDisabled"        -> "disabled"
+    return ('_' +
+        stateMatch[0]
+            .replace(/ActiveHover/i, 'active_hover')
+            .replace(/Active/i, 'active')
+            .replace(/Hover/i, 'hover')
+            .replace(/Disabled/i, 'disabled')
+            .toLowerCase());
+};
+// Insert a hyphen between a lowercase letter followed by an uppercase letter:
+// - regex: /([a-z])([A-Z])/g
+//   ([a-z])  -> capture group 1: a lowercase letter
+//   ([A-Z])  -> capture group 2: an uppercase letter
+//   g        -> global: replace all occurrences
+// - replacement: '$1-$2' puts a hyphen between the two captured groups
+// - finally .toLowerCase() to produce a full kebab-case string
+//
+// Examples:
+//  "myTestString"           -> "my-test-string"
+//  "borderColorActiveHover" -> "border-color-active-hover"
+var toKebabCase = function (str) {
+    return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
+};
+
+export { CLASS_RULES, formatState, toKebabCase };

package/dist/hooks/useActiveClasses/useActiveClasses.interface.js

@@ -0,0 +1,63 @@
+var suffix = [
+    'Button',
+    'Checkbox',
+    'Radio',
+    'Checkmark',
+    'Avatar',
+    'AvatarStack',
+    'Badge',
+    'Breadcrumbs',
+    'Cell',
+    'Chips',
+    'Choice',
+    'Code',
+    'CookiesWarning',
+    'Dadata',
+    'DatePeriod',
+    'Divider',
+    'Dot',
+    'Drawer',
+    'Dropdown',
+    'DropdownItem',
+    'Flex',
+    'Grid',
+    'Group',
+    'HeroTitle',
+    'HTMLContent',
+    'Icon',
+    'Image',
+    'Input',
+    'InputPassword',
+    'Label',
+    'Link',
+    'List',
+    'Loader',
+    'Logo',
+    'MenuItem',
+    'Modal',
+    'ModalSheetBottom',
+    'Notification',
+    'Overlay',
+    'Pagination',
+    'RangeSlider',
+    'Response',
+    'ScrollBar',
+    'ScrollOnDrag',
+    'ScrollToView',
+    'Search',
+    'Segmented',
+    'Select',
+    'SvgContent',
+    'Swiper',
+    'Switch',
+    'Tab',
+    'Text',
+    'Textarea',
+    'Tile',
+    'Title',
+    'Tooltip',
+    'Video',
+    'Warning',
+];
+
+export { suffix };

package/dist/hooks/useActiveClasses/useActiveClasses.js

@@ -0,0 +1,62 @@
+import clsx from 'clsx';
+import { CLASS_RULES, toKebabCase, formatState } from './useActiveClasses.helpers.js';
+
+var useActiveClasses = function (params) {
+    var isDisabled = params.isDisabled, propsGenerator = params.propsGenerator, _a = params.suffixes, suffixes = _a === void 0 ? [] : _a, isActive = params.isActive;
+    var rootClassesArray = [];
+    Object.entries(CLASS_RULES).forEach(function (_a) {
+        var rulesName = _a[0], rules = _a[1];
+        var kebabRuleName = toKebabCase(rulesName);
+        rules.forEach(function (_a) {
+            var key = _a.key, stateFn = _a.stateFn;
+            var value = propsGenerator[key];
+            if (!value) {
+                return;
+            }
+            if (stateFn) {
+                var active = stateFn({ isDisabled: isDisabled, isActive: isActive });
+                if (!active) {
+                    return;
+                }
+            }
+            var stateName = formatState(key);
+            rootClassesArray.push("".concat(kebabRuleName).concat(stateName, "_").concat(value));
+        });
+    });
+    var rootClasses = clsx(rootClassesArray);
+    var suffixClasses = suffixes.reduce(function (acc, suffix) {
+        var classes = [];
+        Object.entries(CLASS_RULES).forEach(function (_a) {
+            var rulesName = _a[0], rules = _a[1];
+            rules.forEach(function (_a) {
+                var key = _a.key, stateFn = _a.stateFn;
+                var withoutPrefixRulesName = key.replace(rulesName, '');
+                var propKey = rulesName + suffix + withoutPrefixRulesName;
+                var value = propsGenerator[propKey];
+                if (!value) {
+                    return;
+                }
+                if (stateFn) {
+                    var active = stateFn({ isDisabled: isDisabled, isActive: isActive });
+                    if (!active) {
+                        return;
+                    }
+                }
+                var state = formatState(propKey);
+                var kebabName = toKebabCase(rulesName);
+                classes.push("".concat(kebabName).concat(state, "_").concat(value));
+            });
+        });
+        var suffixKey = suffix === 'HTMLContent'
+            ? 'htmlContent'
+            : (suffix[0].toLowerCase() + suffix.slice(1));
+        acc[suffixKey] = clsx(classes);
+        return acc;
+    }, {});
+    return {
+        rootClasses: rootClasses,
+        suffixClasses: suffixClasses,
+    };
+};
+
+export { useActiveClasses };

package/dist/hooks/useActiveClasses.js

@@ -0,0 +1,3 @@
+export { useActiveClasses } from './useActiveClasses/useActiveClasses.js';
+import 'clsx';
+import './useActiveClasses/useActiveClasses.helpers.js';

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -5,6 +5,8 @@ import castArray from 'lodash/castArray';
 import upperFirst from 'lodash/upperFirst';
 import '../../context/Notifications.js';
 import { useUserDeviceContext } from '../../context/UIContext.js';
+import { getStyleAttributeKey } from '../../hooks.js';
+import styleAttributes from '../useStyles/styleAttributes.js';
 import 'react/jsx-runtime';
 import 'uuid';
 import '@itcase/common';
@@ -70,8 +72,16 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
             // eslint-disable-next-line perfectionist/sort-objects
             getClassName: function (propKey, params) {
                 var _a = params || {}, _b = _a.prefix, prefix = _b === void 0 ? '' : _b, _c = _a.replace, replace = _c === void 0 ? [/([A-Z])/g, '-$1'] : _c;
-                // prettier-ignore
                 var targetClassValue = this.getProp(String(propKey));
+                var styleAttributeKeys = styleAttributes.map(function (attr) {
+                    return getStyleAttributeKey(attr);
+                });
+                if (styleAttributeKeys.includes(String(propKey)) &&
+                    (typeof targetClassValue === 'number' ||
+                        (typeof targetClassValue === 'string' &&
+                            !isNaN(parseFloat(targetClassValue))))) {
+                    return '';
+                }
                 if (targetClassValue) {
                     var cleanClassValue = String(targetClassValue);
                     if (!cleanClassValue.includes('.')) {

package/dist/hooks/useDevicePropsGenerator.js

@@ -12,3 +12,5 @@ import '../context/UIContext.js';
 import './useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
+import '../hooks.js';
+import './useStyles/styleAttributes.js';

package/dist/hooks/useStyles/useStyles.js

@@ -4,6 +4,7 @@ import maxBy from 'lodash/maxBy';
 import upperFirst from 'lodash/upperFirst';
 import '../../context/Notifications.js';
 import { useUserDeviceContext } from '../../context/UIContext.js';
+import { getStyleAttributeKey } from '../../hooks.js';
 import styleAttributes from './styleAttributes.js';
 import '../../tslib.es6_es_Bwu1Cn-t.js';
 import 'react/jsx-runtime';
@@ -137,6 +138,7 @@ function useStyles(props) {
     return resultStylesGroups;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [deviceCurrentMainType, deviceCurrentType, ...Object.values(propsStyleAttributes)]);
+  console.error('collectedStyles', collectedStyles);
   return collectedStyles;
 }
 const removeDeviceType = (originalKey, deviceTypesList) => {
@@ -181,10 +183,10 @@ const getTargetStyleAttributeKey = (styleKey, styleValue = '') => {
 
   // Get longest style key (e.g. "borderLeftWidth")
   const targetStyleAttribute = maxBy(possibleStyleAttributesList, styleAttribute => {
-    const styleAttributeKey = Array.isArray(styleAttribute) ? styleAttribute[0] : styleAttribute;
-    return styleAttributeKey.length;
+    const key = getStyleAttributeKey(styleAttribute);
+    return key.length;
   });
-  const styleAttributeKey = Array.isArray(targetStyleAttribute) ? targetStyleAttribute[0] : targetStyleAttribute;
+  const styleAttributeKey = getStyleAttributeKey(targetStyleAttribute);
   return styleAttributeKey;
 };
 

package/dist/hooks/useStyles.js

@@ -12,4 +12,5 @@ import '../context/UIContext.js';
 import './useMediaQueries/useMediaQueries.js';
 import 'react-responsive';
 import '../utils/setViewportProperty.js';
+import '../hooks.js';
 import './useStyles/styleAttributes.js';

package/dist/hooks.js

@@ -0,0 +1,7 @@
+var getStyleAttributeKey = function (targetStyleAttribute) {
+    return Array.isArray(targetStyleAttribute)
+        ? targetStyleAttribute[0]
+        : targetStyleAttribute;
+};
+
+export { getStyleAttributeKey };

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`, которые указали ранее