@itcase/ui 1.9.55 → 1.9.57

package/dist/components/Warning/appearance/warningSize.js

@@ -0,0 +1,11 @@
+const warningAppearanceSize = {
+    sizeL: {
+        size: 'l',
+        labelTextSize: 's',
+        labelTextWeight: '600',
+        descriptionTextSize: 's',
+        iconAfterSize: '16',
+        iconBeforeSize: '16',
+    },
+};
+export { warningAppearanceSize };

package/dist/components/Warning/appearance/warningStyle.js

@@ -0,0 +1,14 @@
+const warningAppearanceStyle = {
+    solid: {
+        borderColor: 'none',
+    },
+    outlined: {
+        fill: 'none',
+    },
+    full: {},
+    ghost: {
+        fill: 'none',
+        borderColor: 'none',
+    },
+};
+export { warningAppearanceStyle };

package/dist/components/Warning/appearance/warningWarning.js

@@ -0,0 +1,24 @@
+import { icons16 } from '@itcase/icons/default';
+const warningAppearanceWarning = {
+    warningMutedPrimary: {
+        fill: 'warningTertiary',
+        labelTextColor: 'warningTextSecondary',
+        descriptionTextColor: 'warningTextSecondary',
+        borderColor: 'warningBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'warningItemSecondary',
+        iconBefore: icons16.Alert.WarningTriangle,
+        iconBeforeFillIcon: 'warningItemSecondary',
+    },
+    warningPrimary: {
+        fill: 'warningPrimary',
+        labelTextColor: 'warningTextPrimary',
+        descriptionTextColor: 'warningTextPrimary',
+        borderColor: 'warningBorderSecondary',
+        iconAfter: icons16.Action.Close,
+        iconAfterFillIcon: 'warningItemPrimary',
+        iconBefore: icons16.Alert.WarningTriangle,
+        iconBeforeFillIcon: 'warningItemPrimary',
+    },
+};
+export { warningAppearanceWarning };

package/dist/components/Warning/index.js

@@ -0,0 +1,2 @@
+export { Warning, warningConfig } from './Warning';
+export { warningAppearance } from './Warning.appearance';

package/dist/config/forms/datepicker.js

@@ -0,0 +1,18 @@
+const defaultDatepickerProps = {
+    size: 'normal',
+    daySize: 'xs',
+    dayTextColor: 'surfaceTextPrimary',
+    dayTextShape: 'rounded',
+    dayTextSize: 'm',
+    iconFillSize: 24,
+    iconItemFill: 'surfaceItemPrimary',
+    iconSize: 14,
+    monthTextColor: 'surfaceTextPrimary',
+    monthTextSize: 'm',
+    monthTextWeight: 400,
+    placeholderTextColor: 'surfaceTextSecondary',
+    yearTextColor: 'surfaceTextPrimary',
+    yearTextSize: 'm',
+    yearTextWeight: 400,
+};
+export { defaultDatepickerProps };

package/dist/config/forms/index.js

@@ -0,0 +1,3 @@
+import { defaultDatepickerProps } from './datepicker';
+import { defaultInputProps } from './input';
+export { defaultDatepickerProps, defaultInputProps };

package/dist/config/forms/input.js

@@ -0,0 +1,17 @@
+const defaultInputProps = {
+    width: 'fill',
+    borderColor: 'surfaceBorderTertiary',
+    caret: 'extraItemSecondary',
+    // error
+    errorBorderColor: 'errorBorderPrimary',
+    placeholderTextColor: 'surfaceTextQuaternary',
+    // appearance depending on the type of error
+    // required
+    requiredBorderColor: 'warningBorderPrimary',
+    shape: 'rounded',
+    size: 'm',
+    textColor: 'surfaceTextPrimary',
+    textColorDisabled: 'surfaceTextDisabled',
+    textSize: 'm',
+};
+export { defaultInputProps };

package/dist/context/Notifications.interface.js

@@ -0,0 +1 @@
+export {};

package/dist/context/Notifications.js

@@ -1,9 +1,8 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
-import { v4 } from 'uuid';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from 'react';
+import { v4 as uuidv4 } from 'uuid';
 import { axiosInstanceITCase } from '@itcase/common';
-
 const STATUSES = {
     error: 'error',
     info: 'info',
@@ -113,7 +112,7 @@ function NotificationsProvider(props) {
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
-    return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
+    return (_jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: _jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
 }
 function useNotifications() {
     return useContext(NotificationsContext);
@@ -129,7 +128,7 @@ const statusToAppearanceList = {
 };
 function createNotification(notification, onClose) {
     // Default notification item properties
-    let id = v4().split('-')[0];
+    let id = uuidv4().split('-')[0];
     let title = '';
     let text = '';
     let closeIcon = '';
@@ -184,5 +183,4 @@ function createNotification(notification, onClose) {
         onClose: onClose,
     };
 }
-
 export { NotificationsProvider, useNotifications, useNotificationsAPI };

package/dist/context/UIContext.js

@@ -1,11 +1,9 @@
 'use client';
-import { jsx } from 'react/jsx-runtime';
-import { createContext, memo, useMemo, useEffect, useContext } from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, memo, useContext, useEffect, useMemo, } from 'react';
 import camelCase from 'lodash/camelCase';
-import { useMediaQueries } from '../hooks/useMediaQueries/useMediaQueries.js';
-import { setViewportProperty } from '../utils/setViewportProperty.js';
-import 'react-responsive';
-
+import { useMediaQueries } from '../hooks/useMediaQueries';
+import { setViewportProperty } from '../utils';
 const UserDeviceContext = createContext({
     isMobile: false,
     isTablet: false,
@@ -60,7 +58,7 @@ const UIProvider = memo(function UIProvider(props) {
         setViewportProperty();
         window.addEventListener('resize', setViewportProperty);
     }, []);
-    return (jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
+    return (_jsx(UserDeviceContext.Provider, { value: deviceContextState, children: children }));
 });
 function useUserDeviceContext() {
     const context = useContext(UserDeviceContext);
@@ -69,5 +67,4 @@ function useUserDeviceContext() {
     }
     return context;
 }
-
 export { UIProvider, useUserDeviceContext };

package/dist/context/UrlAssetPrefix.js

@@ -1,6 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useMemo } from 'react';
-
 const UrlAssetPrefixContext = createContext({
     assetPrefix: undefined,
     ignorePathsList: undefined,
@@ -8,7 +7,6 @@ const UrlAssetPrefixContext = createContext({
 function UrlAssetPrefixProvider(props) {
     const { assetPrefix, ignorePathsList, children } = props;
     const value = useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
-    return (jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
+    return (_jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
 }
-
 export { UrlAssetPrefixContext, UrlAssetPrefixProvider };

package/dist/context/index.js

@@ -0,0 +1,2 @@
+export * from './Notifications';
+export * from './UIContext';

package/dist/hoc/urlWithAssetPrefix.js

@@ -1,8 +1,8 @@
-import { jsx } from 'react/jsx-runtime';
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable @typescript-eslint/no-unused-vars */
 import React, { useContext } from 'react';
 import { formatURL } from '@itcase/common';
-import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix.js';
-
+import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix';
 const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
 /**
  * HOC, который добавляет assetPrefix к URL-пропсам.
@@ -38,7 +38,7 @@ const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
             }
             return resultProps;
         }, {});
-        return jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
+        return _jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
     });
     return HOC;
 };
@@ -71,5 +71,4 @@ const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
     // Need to add prefix to url
     return true;
 };
-
 export { urlWithAssetPrefix };

package/dist/hooks/index.helpers.js

@@ -0,0 +1,6 @@
+const getStyleAttributeKey = (targetStyleAttribute) => {
+    return Array.isArray(targetStyleAttribute)
+        ? targetStyleAttribute[0]
+        : targetStyleAttribute;
+};
+export { getStyleAttributeKey };

package/dist/hooks/useActiveClasses/index.js

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

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

@@ -85,5 +85,4 @@ const formatState = (key) => {
 const toKebabCase = (str) => {
     return str.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
 };
-
 export { CLASS_RULES, formatState, toKebabCase };

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

@@ -59,5 +59,4 @@ const suffix = [
     'Video',
     'Warning',
 ];
-
 export { suffix };

package/dist/hooks/useActiveClasses/useActiveClasses.js

@@ -1,6 +1,5 @@
 import clsx from 'clsx';
-import { CLASS_RULES, toKebabCase, formatState } from './useActiveClasses.helpers.js';
-
+import { CLASS_RULES, formatState, toKebabCase, } from './useActiveClasses.helpers';
 const useActiveClasses = (params) => {
     const { propsGenerator, suffixes = [], isActive, isDisabled } = params;
     const rootClassesArray = [];
@@ -54,5 +53,4 @@ const useActiveClasses = (params) => {
         suffixClasses,
     };
 };
-
 export { useActiveClasses };

package/dist/hooks/useAppearanceConfig/index.js

@@ -0,0 +1 @@
+export { useAppearanceConfig } from './useAppearanceConfig';

package/dist/hooks/useAppearanceConfig/useAppearanceConfig.js

@@ -1,5 +1,4 @@
 import { useMemo } from 'react';
-
 const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
     const appearanceConfig = useMemo(() => {
         if (appearance) {
@@ -23,5 +22,4 @@ const useAppearanceConfig = (appearance, componentConfig, isDisabled) => {
     }, [appearance, componentConfig?.appearance, isDisabled]);
     return appearanceConfig;
 };
-
 export { useAppearanceConfig };

package/dist/hooks/useDevicePropsGenerator/index.js

@@ -0,0 +1 @@
+export { useDevicePropsGenerator } from './useDevicePropsGenerator';

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.interface.js

@@ -1 +1 @@
-
+export {};

package/dist/hooks/useDevicePropsGenerator/useDevicePropsGenerator.js

@@ -2,17 +2,9 @@ import { 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 { getStyleAttributeKey } from '../../hooks.js';
-import styleAttributes from '../useStyles/styleAttributes.js';
-import 'react/jsx-runtime';
-import 'uuid';
-import '@itcase/common';
-import '../useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../../utils/setViewportProperty.js';
-
+import { useUserDeviceContext } from '../../context';
+import { getStyleAttributeKey } from '../index.helpers';
+import styleAttributes from '../useStyles/styleAttributes';
 function useDevicePropsGenerator(componentProps, appearanceConfig) {
     /** Get or generate(classname) a prop depending on the user's device.
      * Props:
@@ -126,5 +118,4 @@ function useDevicePropsGenerator(componentProps, appearanceConfig) {
     }, [componentProps, appearanceConfig, deviceCurrentMainType]);
     return devicePropsGenerator;
 }
-
 export { useDevicePropsGenerator };

package/dist/hooks/useDeviceTargetClass.js

@@ -1,58 +1,47 @@
 import { useMemo } from 'react';
 import camelCase from 'lodash/camelCase';
 import castArray from 'lodash/castArray';
-import { useUserDeviceContext } from '../context/UIContext.js';
-import 'react/jsx-runtime';
-import './useMediaQueries/useMediaQueries.js';
-import 'react-responsive';
-import '../utils/setViewportProperty.js';
-
+import { useUserDeviceContext } from '../context/UIContext';
 /** 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) {
-      let cleanClassValue = camelCase(String(targetClassValue));
-      if (replace) {
-        const replaceList = castArray(replace);
-        cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
-      }
-      return `${prefix}${cleanClassValue}`.toLowerCase();
-    }
-    return null;
-  }, [targetClassValue, prefix, replace]);
-  return targetClass;
+    /** 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) {
+            let cleanClassValue = camelCase(String(targetClassValue));
+            if (replace) {
+                const replaceList = castArray(replace);
+                cleanClassValue = cleanClassValue.replace(replaceList[0], replaceList[1] || '');
+            }
+            return `${prefix}${cleanClassValue}`.toLowerCase();
+        }
+        return null;
+    }, [targetClassValue, prefix, replace]);
+    return targetClass;
 }
-
 export { useDeviceTargetClass };