@itcase/ui 1.8.108 → 1.8.109

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