@itcase/ui-core 1.10.78 → 1.10.82

package/dist/cjs/hooks/useStylesReactNative/useStyles.js

@@ -0,0 +1,59 @@
+'use strict';
+
+var React = require('react');
+var camelCase = require('lodash-es/camelCase');
+var maxBy = require('lodash-es/maxBy');
+var styleAttributes = require('./styleAttributes.js');
+
+/*
+ * rule of prop key:
+ *
+ * first is style     second is target
+ * paddingHorizontal  GridInnerWrapper
+ *
+ * paddingHorizontalGridInnerWrapper: 10
+ */
+function useStyles(props) {
+    const display = 'display' in props ? props.display : undefined;
+    const collectedStyles = React.useMemo(() => {
+        const resultStyles = {};
+        Object.entries(props).forEach(([propKey, propValue]) => {
+            const possibleStyleAttributes = styleAttributes.styleAttributes.filter((styleAttribute) => propKey.startsWith(styleAttribute));
+            const currentStyleAttribute = maxBy(possibleStyleAttributes, (styleAttribute) => styleAttribute.length);
+            if (!currentStyleAttribute) {
+                return;
+            }
+            const targetElementKey = propKey.replace(currentStyleAttribute, '');
+            const targetElementResultKey = camelCase(targetElementKey) || 'styles';
+            if (!resultStyles[targetElementResultKey]) {
+                resultStyles[targetElementResultKey] = {};
+            }
+            if (!propValue) {
+                return;
+            }
+            if (currentStyleAttribute.includes('Horizontal')) {
+                const keyLeft = currentStyleAttribute.replace('Horizontal', 'Left');
+                const keyRight = currentStyleAttribute.replace('Horizontal', 'Right');
+                resultStyles[targetElementResultKey][keyLeft] = propValue;
+                resultStyles[targetElementResultKey][keyRight] = propValue;
+            }
+            else if (currentStyleAttribute.includes('Vertical')) {
+                const keyTop = currentStyleAttribute.replace('Vertical', 'Top');
+                const keyBottom = currentStyleAttribute.replace('Vertical', 'Bottom');
+                resultStyles[targetElementResultKey][keyTop] = propValue;
+                resultStyles[targetElementResultKey][keyBottom] =
+                    propValue;
+            }
+            else {
+                resultStyles[targetElementResultKey][currentStyleAttribute] =
+                    propValue;
+            }
+        });
+        return resultStyles;
+        // "props" object maybe big and frequently changing
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [display]);
+    return collectedStyles;
+}
+
+exports.useStyles = useStyles;

package/dist/cjs/hooks/useViewportFix/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var useViewportFix = require('./useViewportFix.js');
+require('react');
+
+
+
+exports.useViewportFix = useViewportFix.useViewportFix;

package/dist/cjs/utils/setViewportProperty.js

@@ -1,6 +1,9 @@
 'use strict';
 
 const setViewportProperty = () => {
+    if (typeof document === 'undefined') {
+        return;
+    }
     const vh = window.innerHeight * 0.01;
     document.documentElement.style.setProperty('--vh', `${vh}px`);
 };

package/dist/context/Notifications/index.js

@@ -0,0 +1,5 @@
+export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI } from './Notifications.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'uuid';
+import '@itcase/common';

package/dist/context/{UIContext.js → UIProvider/UIProvider.js}

@@ -1,19 +1,13 @@
 'use client';
 import { jsx } from 'react/jsx-runtime';
-import { createContext, memo, useMemo, useEffect, useContext } from 'react';
-import camelCase from 'lodash/camelCase';
-import { useMediaQueries } from '../hooks/useMediaQueries/useMediaQueries.js';
-import { setViewportProperty } from '../utils/setViewportProperty.js';
+import { memo, useMemo, useEffect } from 'react';
+import camelCase from 'lodash-es/camelCase';
+import { useMediaQueries } from '../../hooks/useMediaQueries/useMediaQueries.js';
+import { setViewportProperty } from '../../utils/setViewportProperty.js';
+import { UserDeviceContext } from '../UserDeviceContext/UserDeviceContext.js';
+import { getDeviceMainTypeFromFlags } from '../UserDeviceContext/UserDeviceContext.helpers.js';
 import 'react-responsive';
 
-const UserDeviceContext = createContext({
-    isMobile: false,
-    isTablet: false,
-    isDesktop: false,
-    deviceCurrentMainType: '',
-    deviceCurrentType: '',
-    deviceTypesList: [],
-});
 const UIProvider = memo(function UIProvider(props) {
     const { userDeviceState = {}, children } = props;
     /** NOTE:
@@ -25,10 +19,11 @@ const UIProvider = memo(function UIProvider(props) {
      */
     const allDevicesTypes = useMediaQueries(userDeviceState);
     const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
-    const deviceCurrentMainType = (isMobile && 'mobile') ||
-        (isTablet && 'tablet') ||
-        (isDesktop && 'desktop') ||
-        '';
+    const deviceCurrentMainType = getDeviceMainTypeFromFlags({
+        isMobile: isMobile,
+        isTablet: isTablet,
+        isDesktop: isDesktop,
+    });
     const [deviceCurrentType, deviceTypesList] = useMemo(() => {
         const deviceTypesList = Object.keys(allDevicesTypes).map((key) => camelCase(key.replace('is', '')));
         // In same time "allDevicesTypes" can contain "isMobile" and "isMobileLarge" as true
@@ -57,17 +52,13 @@ const UIProvider = memo(function UIProvider(props) {
         deviceTypesList,
     ]);
     useEffect(() => {
+        if (typeof document === 'undefined') {
+            return;
+        }
         setViewportProperty();
         window.addEventListener('resize', setViewportProperty);
     }, []);
     return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
-function useUserDeviceContext() {
-    const context = useContext(UserDeviceContext);
-    if (!context) {
-        throw new Error('useUserDeviceContext is not defined');
-    }
-    return context;
-}
 
-export { UIProvider, useUserDeviceContext };
+export { UIProvider };

package/dist/context/UIProvider/index.js

@@ -0,0 +1,9 @@
+export { UIProvider } from './UIProvider.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'lodash-es/camelCase';
+import '../../hooks/useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../../utils/setViewportProperty.js';
+import '../UserDeviceContext/UserDeviceContext.js';
+import '../UserDeviceContext/UserDeviceContext.helpers.js';

package/dist/context/UIProviderApp/UIProviderApp.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { memo } from 'react';
+import { UserDeviceContext } from '../UserDeviceContext/UserDeviceContext.js';
+
+const appUserDeviceState = {
+    isMobile: true,
+    isTablet: false,
+    isDesktop: false,
+    deviceCurrentMainType: 'mobile',
+    deviceCurrentType: 'mobile',
+    deviceTypesList: ['mobile'],
+};
+const UIProviderApp = memo(function UIProviderApp(props) {
+    const { children } = props;
+    return (jsx(UserDeviceContext.Provider, { value: appUserDeviceState, children: children }));
+});
+
+export { UIProviderApp };

package/dist/context/UIProviderApp/index.js

@@ -0,0 +1,4 @@
+export { useUserDeviceContext } from '../UserDeviceContext/UserDeviceContext.js';
+export { UIProviderApp } from './UIProviderApp.js';
+import 'react';
+import 'react/jsx-runtime';

package/dist/context/UrlAssetPrefix/index.js

@@ -0,0 +1,3 @@
+export { UrlAssetPrefixContext, UrlAssetPrefixProvider } from './UrlAssetPrefix.js';
+import 'react/jsx-runtime';
+import 'react';

package/dist/context/UserDeviceContext/UserDeviceContext.helpers.js

@@ -0,0 +1,14 @@
+function getDeviceMainTypeFromFlags(userDeviceState) {
+    if (userDeviceState?.isMobile) {
+        return 'mobile';
+    }
+    if (userDeviceState?.isTablet) {
+        return 'tablet';
+    }
+    if (userDeviceState?.isDesktop) {
+        return 'desktop';
+    }
+    return '';
+}
+
+export { getDeviceMainTypeFromFlags };

package/dist/context/UserDeviceContext/UserDeviceContext.js

@@ -0,0 +1,20 @@
+import { createContext, useContext } from 'react';
+
+const defaultUserDeviceState = {
+    isMobile: false,
+    isTablet: false,
+    isDesktop: false,
+    deviceCurrentMainType: '',
+    deviceCurrentType: '',
+    deviceTypesList: [],
+};
+const UserDeviceContext = createContext(defaultUserDeviceState);
+function useUserDeviceContext() {
+    const context = useContext(UserDeviceContext);
+    if (!context) {
+        throw new Error('useUserDeviceContext is not defined');
+    }
+    return context;
+}
+
+export { UserDeviceContext, defaultUserDeviceState, useUserDeviceContext };

package/dist/context/UserDeviceContext/index.js

@@ -0,0 +1,3 @@
+export { UserDeviceContext, defaultUserDeviceState, useUserDeviceContext } from './UserDeviceContext.js';
+export { getDeviceMainTypeFromFlags } from './UserDeviceContext.helpers.js';
+import 'react';

package/dist/context/index.js

@@ -1,11 +1,4 @@
-export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI } from './Notifications.js';
-export { UIProvider, useUserDeviceContext } from './UIContext.js';
-export { UrlAssetPrefixContext, UrlAssetPrefixProvider } from './UrlAssetPrefix.js';
-import 'react/jsx-runtime';
+export { useUserDeviceContext } from './UserDeviceContext/UserDeviceContext.js';
+export { UIProviderApp } from './UIProviderApp/UIProviderApp.js';
 import 'react';
-import 'uuid';
-import '@itcase/common';
-import 'lodash/camelCase';
-import '../hooks/useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../utils/setViewportProperty.js';
+import 'react/jsx-runtime';

package/dist/context/index2.js

@@ -0,0 +1,13 @@
+export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI } from './Notifications/Notifications.js';
+export { UIProvider } from './UIProvider/UIProvider.js';
+export { UrlAssetPrefixContext, UrlAssetPrefixProvider } from './UrlAssetPrefix/UrlAssetPrefix.js';
+export { useUserDeviceContext } from './UserDeviceContext/UserDeviceContext.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'uuid';
+import '@itcase/common';
+import 'lodash-es/camelCase';
+import '../hooks/useMediaQueries/useMediaQueries.js';
+import 'react-responsive';
+import '../utils/setViewportProperty.js';
+import './UserDeviceContext/UserDeviceContext.helpers.js';

package/dist/hoc/index.js

@@ -2,4 +2,4 @@ export { urlWithAssetPrefix } from './urlWithAssetPrefix.js';
 import 'react/jsx-runtime';
 import 'react';
 import '@itcase/common';
-import '../context/UrlAssetPrefix.js';
+import '../context/UrlAssetPrefix/UrlAssetPrefix.js';

package/dist/hoc/urlWithAssetPrefix.js

@@ -1,7 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import React, { useContext } from 'react';
 import { formatURL } from '@itcase/common';
-import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix.js';
+import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix/UrlAssetPrefix.js';
 
 const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
 /**

package/dist/hooks/index.js

@@ -1,25 +1,19 @@
 export { useActiveClasses } from './useActiveClasses/useActiveClasses.js';
 export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
 export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
-export { useDeviceTargetClass } from './useDeviceTargetClass.js';
+export { useDeviceTargetClass } from './useDeviceTargetClass/useDeviceTargetClass.js';
 export { useMediaQueries } from './useMediaQueries/useMediaQueries.js';
 export { styleAttributes } from './useStyles/styleAttributes.js';
 export { getStyleAttributeKey } from './useStyles/styleAttributes.helpers.js';
 export { useStyles } from './useStyles/useStyles.js';
-export { useViewportFix } from './useViewportFix.js';
+export { useViewportFix } from './useViewportFix/useViewportFix.js';
 import 'clsx';
 import './useActiveClasses/useActiveClasses.helpers.js';
 import 'react';
-import 'lodash/camelCase';
-import 'lodash/castArray';
-import 'lodash/upperFirst';
-import '../context/Notifications.js';
-import 'react/jsx-runtime';
-import 'uuid';
-import '@itcase/common';
-import '../context/UIContext.js';
-import '../utils/setViewportProperty.js';
-import '../context/UrlAssetPrefix.js';
-import 'lodash/kebabCase';
-import 'lodash/maxBy';
+import 'lodash-es/camelCase';
+import 'lodash-es/castArray';
+import 'lodash-es/upperFirst';
+import '../context/UserDeviceContext/UserDeviceContext.js';
+import 'lodash-es/kebabCase';
+import 'lodash-es/maxBy';
 import 'react-responsive';

package/dist/hooks/useDevicePropsGenerator/index.js

@@ -1,18 +1,10 @@
 export { useDevicePropsGenerator } from './useDevicePropsGenerator.js';
 import 'react';
-import 'lodash/camelCase';
-import 'lodash/castArray';
-import 'lodash/upperFirst';
-import '../../context/Notifications.js';
-import 'react/jsx-runtime';
-import 'uuid';
-import '@itcase/common';
-import '../../context/UIContext.js';
-import '../useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../../utils/setViewportProperty.js';
-import '../../context/UrlAssetPrefix.js';
+import 'lodash-es/camelCase';
+import 'lodash-es/castArray';
+import 'lodash-es/upperFirst';
+import '../../context/UserDeviceContext/UserDeviceContext.js';
 import '../useStyles/styleAttributes.js';
 import '../useStyles/styleAttributes.helpers.js';
-import 'lodash/kebabCase';
-import 'lodash/maxBy';
+import 'lodash-es/kebabCase';
+import 'lodash-es/maxBy';

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -1,20 +1,12 @@
 import { useRef, useMemo } from 'react';
-import camelCase from 'lodash/camelCase';
-import castArray from 'lodash/castArray';
-import upperFirst from 'lodash/upperFirst';
-import '../../context/Notifications.js';
-import { useUserDeviceContext } from '../../context/UIContext.js';
-import '../../context/UrlAssetPrefix.js';
+import camelCase from 'lodash-es/camelCase';
+import castArray from 'lodash-es/castArray';
+import upperFirst from 'lodash-es/upperFirst';
+import { useUserDeviceContext } from '../../context/UserDeviceContext/UserDeviceContext.js';
 import { styleAttributes } from '../useStyles/styleAttributes.js';
 import { getStyleAttributeKey } from '../useStyles/styleAttributes.helpers.js';
-import 'lodash/kebabCase';
-import 'lodash/maxBy';
-import 'react/jsx-runtime';
-import 'uuid';
-import '@itcase/common';
-import '../useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../../utils/setViewportProperty.js';
+import 'lodash-es/kebabCase';
+import 'lodash-es/maxBy';
 
 /* eslint-disable react-hooks/immutability */
 /* eslint-disable react-hooks/refs */

package/dist/hooks/useDeviceTargetClass/index.js

@@ -0,0 +1,4 @@
+export { useDeviceTargetClass } from './useDeviceTargetClass.js';
+import 'react';
+import 'lodash-es/camelCase';
+import '../../context/UserDeviceContext/UserDeviceContext.js';

package/dist/hooks/useDeviceTargetClass/useDeviceTargetClass.js

@@ -0,0 +1,48 @@
+import { useMemo } from 'react';
+import camelCase from 'lodash-es/camelCase';
+import { useUserDeviceContext } from '../../context/UserDeviceContext/UserDeviceContext.js';
+
+/** TODO:
+ * Hook is still used in "itcase-forms".
+ * Need replace with "useDevicePropsGenerator" and delete this.
+ */
+function useDeviceTargetClass(componentProps, hookProps) {
+    /** Generate a class depending on the user's device.
+     *
+     * Usage:
+     *  const sizeClass = useDeviceTargetClass(props, {
+     *    prefix: 'some-item_size_',
+     *    propsKey: 'size',
+     *  })
+     * Return: "some-item_size_m" (or "s", or "l", or something else)
+     *
+     * "componentProps" - "props" from component
+     * "hookProps" - special props for generating class
+     **/
+    const { prefix = '', propsKey, replace = [/([A-Z])/g, '-$1'] } = hookProps;
+    const { isMobile, isTablet, isDesktop } = useUserDeviceContext();
+    const targetClassValue = useMemo(() => {
+        // prettier-ignore
+        const deviceCurrentMainType = ((isMobile && 'Mobile') ||
+            (isTablet && 'Tablet') ||
+            (isDesktop && 'Desktop') ||
+            '');
+        const valueForDevice = componentProps[`${propsKey}${deviceCurrentMainType}`];
+        const valueDefault = componentProps[propsKey];
+        return valueForDevice || valueDefault;
+    }, [isMobile, isTablet, isDesktop, componentProps, propsKey]);
+    const targetClass = useMemo(() => {
+        if (!targetClassValue) {
+            return null;
+        }
+        let cleanClassValue = camelCase(String(targetClassValue));
+        if (replace) {
+            const [searchValue, replaceValue = ''] = replace;
+            cleanClassValue = cleanClassValue.replace(searchValue, replaceValue);
+        }
+        return `${prefix}${cleanClassValue}`.toLowerCase();
+    }, [targetClassValue, prefix, replace]);
+    return targetClass;
+}
+
+export { useDeviceTargetClass };

package/dist/hooks/useStyles/index.js

@@ -2,16 +2,8 @@ export { styleAttributes } from './styleAttributes.js';
 export { getStyleAttributeKey } from './styleAttributes.helpers.js';
 export { useStyles } from './useStyles.js';
 import 'react';
-import 'lodash/camelCase';
-import 'lodash/kebabCase';
-import 'lodash/maxBy';
-import 'lodash/upperFirst';
-import '../../context/Notifications.js';
-import 'react/jsx-runtime';
-import 'uuid';
-import '@itcase/common';
-import '../../context/UIContext.js';
-import '../useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../../utils/setViewportProperty.js';
-import '../../context/UrlAssetPrefix.js';
+import 'lodash-es/camelCase';
+import 'lodash-es/kebabCase';
+import 'lodash-es/maxBy';
+import 'lodash-es/upperFirst';
+import '../../context/UserDeviceContext/UserDeviceContext.js';

package/dist/hooks/useStyles/useStyles.js

@@ -1,19 +1,11 @@
 import { useMemo } from 'react';
-import camelCase from 'lodash/camelCase';
-import kebabCase from 'lodash/kebabCase';
-import maxBy from 'lodash/maxBy';
-import upperFirst from 'lodash/upperFirst';
-import '../../context/Notifications.js';
-import { useUserDeviceContext } from '../../context/UIContext.js';
-import '../../context/UrlAssetPrefix.js';
+import camelCase from 'lodash-es/camelCase';
+import kebabCase from 'lodash-es/kebabCase';
+import maxBy from 'lodash-es/maxBy';
+import upperFirst from 'lodash-es/upperFirst';
+import { useUserDeviceContext } from '../../context/UserDeviceContext/UserDeviceContext.js';
 import { styleAttributes } from './styleAttributes.js';
 import { getStyleAttributeKey } from './styleAttributes.helpers.js';
-import 'react/jsx-runtime';
-import 'uuid';
-import '@itcase/common';
-import '../useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../../utils/setViewportProperty.js';
 
 const LAYOUT_STYLE_KEYS = new Set([
     'alignContent',

package/dist/hooks/useStylesReactNative/index.js

@@ -0,0 +1,5 @@
+export { styleAttributes } from './styleAttributes.js';
+export { useStyles } from './useStyles.js';
+import 'react';
+import 'lodash-es/camelCase';
+import 'lodash-es/maxBy';

package/dist/hooks/useStylesReactNative/styleAttributes.js

@@ -0,0 +1,135 @@
+const styleAttributes = [
+    /**
+     * Layout
+     */
+    'alignContent',
+    'alignItems',
+    'alignSelf',
+    'aspectRatio',
+    'border',
+    'borderBottomWidth',
+    'borderEndWidth',
+    'borderLeftWidth',
+    'borderRightWidth',
+    'borderStartWidth',
+    'borderTopWidth',
+    'borderWidth',
+    'bottom',
+    'display',
+    'end',
+    'flex',
+    'flexBasis',
+    'flexDirection',
+    'flexGrow',
+    'flexShrink',
+    'flexWrap',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'columnWidth',
+    'height',
+    'justifyContent',
+    'left',
+    'margin',
+    'marginBottom',
+    'marginEnd',
+    'marginHorizontal',
+    'marginLeft',
+    'marginRight',
+    'marginStart',
+    'marginTop',
+    'marginVertical',
+    'maxHeight',
+    'maxWidth',
+    'minHeight',
+    'minWidth',
+    'overflow',
+    'padding',
+    'paddingBottom',
+    'paddingEnd',
+    'paddingHorizontal',
+    'paddingLeft',
+    'paddingRight',
+    'paddingStart',
+    'paddingTop',
+    'paddingVertical',
+    'position',
+    'right',
+    'start',
+    'top',
+    'width',
+    'zIndex',
+    'order',
+    /**
+     * Shadow
+     */
+    'elevation',
+    'shadowColor',
+    'shadowOffset',
+    'shadowOpacity',
+    'shadowRadius',
+    /**
+     * Transform
+     */
+    'transform',
+    /**
+     * View
+     */
+    'background',
+    'backgroundColor',
+    'borderBottomColor',
+    'borderBottomEndRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderBottomStartRadius',
+    'borderColor',
+    'borderCurve',
+    'borderEndColor',
+    'borderLeftColor',
+    'borderRadius',
+    'borderRightColor',
+    'borderStartColor',
+    'borderStyle',
+    'borderTopColor',
+    'borderTopEndRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderTopStartRadius',
+    'opacity',
+    'cursor',
+    /**
+     * Text
+     */
+    'color',
+    'fontFamily',
+    'fontSize',
+    'fontStyle',
+    'fontVariant',
+    'fontWeight',
+    'letterSpacing',
+    'lineHeight',
+    'textAlign',
+    'textDecorationColor',
+    'textDecorationLine',
+    'textDecorationStyle',
+    'textShadowColor',
+    'textShadowOffset',
+    'textShadowRadius',
+    'textTransform',
+    'verticalAlign',
+    'writingMode',
+    'whiteSpace',
+    /**
+     * Image
+     */
+    'overlayColor',
+    'resizeMode',
+    'tintColor',
+    'objectFit',
+    /**
+     * Filter
+     */
+    'backdropFilter',
+];
+
+export { styleAttributes };