@itcase/ui-core 1.10.47 → 1.10.48

package/dist/context/Notifications.js

@@ -1 +1,202 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as o,useState as i,useCallback as t,useMemo as r,useEffect as n,useContext as s}from"react";import{v4 as c}from"uuid";import{axiosInstanceITCase as a}from"@itcase/common";const l={error:"error",info:"info",success:"success",warning:"warning"},u=o([]),m=o({hideNotifications:e=>{},removeNotification:e=>{},showNotification:(e,o)=>{},notificationStatuses:l});function d(o){const{initialNotificationsList:s=[],isLogRequestsErrors:c,children:d}=o,[f,g]=i(()=>(s||[]).map(e=>y(e,e.onClose))),p=t(e=>{e&&g(o=>o.filter(o=>{const i=String(o.id)===String(e);return i&&(clearTimeout(o._closeTimeout),o.onClose&&o.onClose()),!i}))},[]),T=t(e=>{e&&g(o=>o.map(o=>String(o.id)!==String(e)||o.isClosing?o:(clearTimeout(o._closeTimeout),{...o,isClosing:!0})))},[]),S=t((e,o)=>{const i=y(e,o);return g(e=>{const o=e.slice(),t=o.findIndex(e=>String(e.id)===String(i.id));if(-1===t)return[...o,i];const r=o[t];return clearTimeout(r._closeTimeout),r._closeTimeout=void 0,o[t]=i,o}),i.closeByTime&&(i._closeTimeout=setTimeout(()=>T(i.id),i.closeByTime)),i},[]),B=r(()=>({hideNotifications:T,removeNotification:p,notificationStatuses:l,showNotification:S}),[]);return n(()=>{f.forEach(e=>{e.closeByTime&&setTimeout(()=>T(e.id),e.closeByTime)}),c&&(a.responseErrorHandler.loggerManager={log:e=>{if(e.message){const o=["network"].includes(e.key)?e.key:void 0;S({id:o,title:e.message,status:"error",closeByTime:4e3})}}})},[]),e(m.Provider,{value:B,children:e(u.Provider,{value:f,children:d})})}function f(){return s(u)}function g(){return s(m)}const p={error:"errorPrimary sizeS solid rounded",info:"infoPrimary sizeS solid rounded",success:"successPrimary sizeS solid rounded",warning:"warningPrimary sizeS solid rounded"};function y(e,o){let i=c().split("-")[0],t="",r="",n="",s="",a="float",u="",m=l.warning,d=4500,f=p[m],g=null,y=!1,T="",S=()=>{};return"string"==typeof e?r=e:"object"==typeof e&&(i=String(e.id??i),t=e.title??t,r=e.text??r,T=e.closeIconAppearance??T,a=e.type??a,n=e.closeIcon??n,s=e.closeIconSrc??s,u=e.buttonLabel??u,S=e.onClickButton??S,m=e.status??m,d=e.closeByTime??d,y=e.isLoading??y,g=e.after??g,f=e.appearance??p[e.status]??f),{id:i,appearance:f,type:a,title:t,status:m,text:r,buttonLabel:u,after:g,closeByTime:d,closeIcon:n,closeIconAppearance:T,closeIconSrc:s,isLoading:y,onClickButton:S,onClose:o}}export{d as NotificationsProvider,p as statusToAppearanceList,f as useNotifications,g as useNotificationsAPI};
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useState, useCallback, useMemo, useEffect, useContext } from 'react';
+import { v4 } from 'uuid';
+import { axiosInstanceITCase } from '@itcase/common';
+
+const STATUSES = {
+    error: 'error',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+};
+const NotificationsContext = createContext([]);
+/* eslint-disable @typescript-eslint/no-unused-vars */
+const NotificationsAPIContext = createContext({
+    hideNotifications: (targetId) => { },
+    removeNotification: (targetId) => { },
+    showNotification: (notification, onClose) => { },
+    notificationStatuses: STATUSES,
+});
+/* eslint-enable @typescript-eslint/no-unused-vars */
+function NotificationsProvider(props) {
+    const { initialNotificationsList = [], isLogRequestsErrors, children } = props;
+    const [notificationsList, setNotificationsList] = useState(() => {
+        // We need to set id to every notification item and original list also be have new id's
+        return (initialNotificationsList || []).map((notificationItem) => {
+            return createNotification(notificationItem, notificationItem.onClose);
+        });
+    });
+    const removeNotification = useCallback((targetId) => {
+        if (!targetId) {
+            return;
+        }
+        setNotificationsList((prevNotificationsList) => {
+            return prevNotificationsList.filter((notificationItem) => {
+                const isNeedToRemove = String(notificationItem.id) === String(targetId);
+                if (isNeedToRemove) {
+                    clearTimeout(notificationItem._closeTimeout);
+                    // @typescript-eslint/no-unused-expressions
+                    notificationItem.onClose && notificationItem.onClose();
+                }
+                return !isNeedToRemove;
+            });
+        });
+    }, []);
+    const hideNotifications = useCallback((targetId) => {
+        if (!targetId) {
+            return;
+        }
+        setNotificationsList((prevNotificationsList) => {
+            return prevNotificationsList.map((notificationItem) => {
+                const isNeedToHide = String(notificationItem.id) === String(targetId);
+                if (!isNeedToHide || notificationItem.isClosing) {
+                    return notificationItem;
+                }
+                clearTimeout(notificationItem._closeTimeout);
+                return {
+                    ...notificationItem,
+                    isClosing: true,
+                };
+            });
+        });
+    }, []);
+    const showNotification = useCallback((notification, onClose) => {
+        const newNotificationItem = createNotification(notification, onClose);
+        setNotificationsList((prevNotificationsList) => {
+            const newState = prevNotificationsList.slice();
+            const existsNotificationIndex = newState.findIndex((notificationItem) => String(notificationItem.id) === String(newNotificationItem.id));
+            // Add new notification
+            if (existsNotificationIndex === -1) {
+                return [...newState, newNotificationItem];
+            }
+            // Or update exists notification
+            const updatedNotificationItem = newState[existsNotificationIndex];
+            // Clear timeout to avoid close event for updated notification
+            clearTimeout(updatedNotificationItem._closeTimeout);
+            updatedNotificationItem._closeTimeout = undefined;
+            // Replace exists notification by new one
+            newState[existsNotificationIndex] = newNotificationItem;
+            return newState;
+        });
+        if (newNotificationItem.closeByTime) {
+            newNotificationItem._closeTimeout = setTimeout(() => hideNotifications(newNotificationItem.id), newNotificationItem.closeByTime);
+        }
+        return newNotificationItem;
+    }, 
+    // "hideNotifications" is never changed
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    []);
+    const notificationsAPI = useMemo(() => ({
+        hideNotifications: hideNotifications,
+        removeNotification: removeNotification,
+        notificationStatuses: STATUSES,
+        showNotification: showNotification,
+    }), 
+    // Functions is never changes, no sense to set as dependencies
+    // eslint-disable-next-line
+    []);
+    useEffect(() => {
+        // Set timeout for initial notifications list one time on first render
+        notificationsList.forEach((notificationItem) => {
+            if (notificationItem.closeByTime) {
+                setTimeout(() => hideNotifications(notificationItem.id), notificationItem.closeByTime);
+            }
+        });
+        // Show notifications on all requests errors.
+        // Enable one time without disabling. Use "isLogging" on request config level
+        // to disable notifications logger.
+        if (isLogRequestsErrors) {
+            axiosInstanceITCase.responseErrorHandler.loggerManager = {
+                log: (responseError) => {
+                    if (responseError.message) {
+                        // prevent from showing many network errors
+                        const errorListToDedupe = ['network'];
+                        const id = errorListToDedupe.includes(responseError.key)
+                            ? responseError.key
+                            : undefined;
+                        showNotification({
+                            id: id,
+                            title: responseError.message,
+                            status: 'error',
+                            closeByTime: 4000,
+                        });
+                    }
+                },
+            };
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    return (jsx(NotificationsAPIContext.Provider, { value: notificationsAPI, children: jsx(NotificationsContext.Provider, { value: notificationsList, children: children }) }));
+}
+function useNotifications() {
+    return useContext(NotificationsContext);
+}
+function useNotificationsAPI() {
+    return useContext(NotificationsAPIContext);
+}
+const statusToAppearanceList = {
+    error: 'errorPrimary sizeS solid rounded',
+    info: 'infoPrimary sizeS solid rounded',
+    success: 'successPrimary sizeS solid rounded',
+    warning: 'warningPrimary sizeS solid rounded',
+};
+function createNotification(notification, onClose) {
+    // Default notification item properties
+    let id = v4().split('-')[0];
+    let title = '';
+    let text = '';
+    let closeIcon = '';
+    let closeIconSrc = '';
+    let type = 'float';
+    let buttonLabel = '';
+    let status = STATUSES.warning;
+    let closeByTime = 4500;
+    let appearance = statusToAppearanceList[status];
+    let after = null;
+    let isLoading = false;
+    let closeIconAppearance = '';
+    let onClickButton = () => { };
+    if (typeof notification === 'string') {
+        text = notification;
+    }
+    else if (typeof notification === 'object') {
+        id = String(notification.id ?? id);
+        title = notification.title ?? title;
+        text = notification.text ?? text;
+        closeIconAppearance =
+            notification.closeIconAppearance ?? closeIconAppearance;
+        type = notification.type ?? type;
+        closeIcon = notification.closeIcon ?? closeIcon;
+        closeIconSrc = notification.closeIconSrc ?? closeIconSrc;
+        buttonLabel = notification.buttonLabel ?? buttonLabel;
+        onClickButton = notification.onClickButton ?? onClickButton;
+        status = notification.status ?? status;
+        closeByTime = notification.closeByTime ?? closeByTime;
+        isLoading = notification.isLoading ?? isLoading;
+        after = notification.after ?? after;
+        appearance =
+            notification.appearance ??
+                statusToAppearanceList[notification.status] ??
+                appearance;
+    }
+    return {
+        id: id,
+        appearance: appearance,
+        type: type,
+        title: title,
+        status: status,
+        text: text,
+        buttonLabel: buttonLabel,
+        after: after,
+        closeByTime: closeByTime,
+        closeIcon: closeIcon,
+        closeIconAppearance: closeIconAppearance,
+        closeIconSrc: closeIconSrc,
+        isLoading: isLoading,
+        onClickButton: onClickButton,
+        onClose: onClose,
+    };
+}
+
+export { NotificationsProvider, statusToAppearanceList, useNotifications, useNotificationsAPI };

package/dist/context/UIContext.js

@@ -1 +1,73 @@
-import{jsx as e}from"react/jsx-runtime";import{createContext as r,memo as i,useMemo as t,useEffect as s,useContext as o}from"react";import n from"lodash/camelCase";import{useMediaQueries as c}from"../hooks/useMediaQueries/useMediaQueries.js";import{setViewportProperty as p}from"../utils/setViewportProperty.js";import"react-responsive";const a=r({isMobile:!1,isTablet:!1,isDesktop:!1,deviceCurrentMainType:"",deviceCurrentType:"",deviceTypesList:[]}),d=i(function(r){const{userDeviceState:i={},children:o}=r,d=c(i),{isMobile:u,isTablet:l,isDesktop:m,...v}=d,f=(u?"mobile":l&&"tablet")||m&&"desktop"||"",[y,b]=t(()=>{const e=Object.keys(d).map(e=>n(e.replace("is","")));let r=Object.keys(v).find(e=>v[e]);return r||(r=f),r=n(r.replace("is","")),[r||"_none_",e]},[d,f,v]),T=t(()=>({...d,deviceCurrentMainType:f,deviceCurrentType:y,deviceTypesList:b}),[d,f,y,b]);return s(()=>{p(),window.addEventListener("resize",p)},[]),e(a.Provider,{value:T,children:o})});function u(){const e=o(a);if(!e)throw new Error("useUserDeviceContext is not defined");return e}export{d as UIProvider,u as useUserDeviceContext};
+'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 '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:
+     * Remember that the "useMediaQueries" hook works by next scenario:
+     * when changing the device type(browser width), the hook will first "enable"
+     * the new type(set true), and then "disable" the previous one(set false),
+     * what provoke to double rendering, and in moment we have two different types as "true".
+     * We will need to look at how to change this behavior.
+     */
+    const allDevicesTypes = useMediaQueries(userDeviceState);
+    const { isMobile, isTablet, isDesktop, ...fullNamedDeviceTypes } = allDevicesTypes;
+    const deviceCurrentMainType = (isMobile && 'mobile') ||
+        (isTablet && 'tablet') ||
+        (isDesktop && 'desktop') ||
+        '';
+    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
+        let deviceCurrentType = Object.keys(fullNamedDeviceTypes).find(
+        // If "fullNamedDeviceTypes.isMobileLarge: true" - that our device
+        (key) => fullNamedDeviceTypes[key]);
+        // Or set main type (e.g. "isMobile")
+        if (!deviceCurrentType) {
+            deviceCurrentType = deviceCurrentMainType;
+        }
+        deviceCurrentType = camelCase(deviceCurrentType.replace('is', ''));
+        // On server side render we doesn't known user device and we need to set special word
+        return [deviceCurrentType || '_none_', deviceTypesList];
+    }, [allDevicesTypes, deviceCurrentMainType, fullNamedDeviceTypes]);
+    const deviceContextState = useMemo(() => {
+        return {
+            ...allDevicesTypes,
+            deviceCurrentMainType: deviceCurrentMainType,
+            deviceCurrentType: deviceCurrentType,
+            deviceTypesList: deviceTypesList,
+        };
+    }, [
+        allDevicesTypes,
+        deviceCurrentMainType,
+        deviceCurrentType,
+        deviceTypesList,
+    ]);
+    useEffect(() => {
+        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 };

package/dist/context/UrlAssetPrefix.js

@@ -1 +1,14 @@
-import{jsx as r}from"react/jsx-runtime";import{createContext as t,useMemo as e}from"react";const i=t({assetPrefix:void 0,ignorePathsList:void 0});function s(t){const{assetPrefix:s,ignorePathsList:o,children:n}=t,a=e(()=>({assetPrefix:s,ignorePathsList:o}),[s,o]);return r(i.Provider,{value:a,children:n})}export{i as UrlAssetPrefixContext,s as UrlAssetPrefixProvider};
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useMemo } from 'react';
+
+const UrlAssetPrefixContext = createContext({
+    assetPrefix: undefined,
+    ignorePathsList: undefined,
+});
+function UrlAssetPrefixProvider(props) {
+    const { assetPrefix, ignorePathsList, children } = props;
+    const value = useMemo(() => ({ assetPrefix, ignorePathsList }), [assetPrefix, ignorePathsList]);
+    return (jsx(UrlAssetPrefixContext.Provider, { value: value, children: children }));
+}
+
+export { UrlAssetPrefixContext, UrlAssetPrefixProvider };

package/dist/context/index.js

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

package/dist/hoc/index.js

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

package/dist/hoc/urlWithAssetPrefix.js

@@ -1 +1,76 @@
-import{jsx as t}from"react/jsx-runtime";import r,{useContext as e}from"react";import{formatURL as s}from"@itcase/common";import{UrlAssetPrefixContext as i}from"../context/UrlAssetPrefix.js";const o=["src","imageSrc","svgSrc","placeholderUrl"],f=(f,...a)=>r.forwardRef(function(r,a){const{assetPrefix:c,ignorePathsList:m}=e(i),h=o.reduce((t,e)=>{let i=r[e];if(i&&"string"==typeof i){if(c){if(n(i,c,m)){i=`${s(c).slice(0,-1)}${i}`}}t[e]=i}return t},{});return t(f,{...r,...h,ref:a})}),n=(t,r,e=[])=>{if(t.startsWith("http:")||t.startsWith("https:")||t.startsWith("data:")||t.startsWith("blob:")||t.startsWith(r))return!1;for(const r of e)if(r instanceof RegExp){if(r.test(t))return!1}else if(s(t).startsWith(s(r)))return!1;return!0};export{f as urlWithAssetPrefix};
+import { jsx } from 'react/jsx-runtime';
+import React, { useContext } from 'react';
+import { formatURL } from '@itcase/common';
+import { UrlAssetPrefixContext } from '../context/UrlAssetPrefix.js';
+
+const urlPropsList = ['src', 'imageSrc', 'svgSrc', 'placeholderUrl'];
+/**
+ * HOC, который добавляет assetPrefix к URL-пропсам.
+ *
+ * @template P - Тип пропсов оборачиваемого компонента.
+ * @template T - Тип ref (если используется forwardRef).
+ * @template Check - Проверка на наличие хотя бы одного URL-пропа.
+ *
+ * @param WrappedComponent - Компонент, который оборачиваем.
+ * @param _error - Проверка: если ни одного URL-пропа нет, будет ошибка компиляции.
+ *
+ * @example
+ * const A = (props: { src?: string }) => <div />;
+ * urlWithAssetPrefix(A); // ✅ OK
+ *
+ * const B = (props: { id: string }) => <div />;
+ * urlWithAssetPrefix(B); // ❌ TS ошибка (нет url-пропов)
+ */
+const urlWithAssetPrefix = (WrappedComponent, ..._error) => {
+    const HOC = React.forwardRef(function HOC(props, ref) {
+        const { assetPrefix, ignorePathsList } = useContext(UrlAssetPrefixContext);
+        const overrideProps = urlPropsList.reduce((resultProps, propKey) => {
+            let url = props[propKey];
+            if (url && typeof url === 'string') {
+                if (assetPrefix) {
+                    const isNeedAssetPrefix = checkIsNeedAssetPrefix(url, assetPrefix, ignorePathsList);
+                    if (isNeedAssetPrefix) {
+                        const prefixPath = formatURL(assetPrefix).slice(0, -1);
+                        url = `${prefixPath}${url}`;
+                    }
+                }
+                resultProps[propKey] = url;
+            }
+            return resultProps;
+        }, {});
+        return jsx(WrappedComponent, { ...props, ...overrideProps, ref: ref });
+    });
+    return HOC;
+};
+const checkIsNeedAssetPrefix = (url, assetPrefix, ignorePathsList = []) => {
+    // Ignore prefix if:
+    const isPrefixIgnore = 
+    // Url is absolute
+    url.startsWith('http:') ||
+        url.startsWith('https:') ||
+        // Url is data string
+        url.startsWith('data:') ||
+        url.startsWith('blob:') ||
+        // Url already have prefix
+        url.startsWith(assetPrefix);
+    if (isPrefixIgnore) {
+        return false;
+    }
+    // And check special paths for ignore prefix
+    for (const urlPath of ignorePathsList) {
+        if (urlPath instanceof RegExp) {
+            if (urlPath.test(url)) {
+                return false;
+            }
+        }
+        else {
+            if (formatURL(url).startsWith(formatURL(urlPath))) {
+                return false;
+            }
+        }
+    }
+    // Need to add prefix to url
+    return true;
+};
+
+export { urlWithAssetPrefix };

package/dist/hooks/index.js

@@ -1 +1,24 @@
-export{useActiveClasses}from"./useActiveClasses/useActiveClasses.js";export{useAppearanceConfig}from"./useAppearanceConfig/useAppearanceConfig.js";export{useDevicePropsGenerator}from"./useDevicePropsGenerator/useDevicePropsGenerator.js";export{useDeviceTargetClass}from"./useDeviceTargetClass.js";export{useMediaQueries}from"./useMediaQueries/useMediaQueries.js";export{getStyleAttributeKey}from"./useStyles/styleAttributes.helpers.js";export{useStyles}from"./useStyles/useStyles.js";export{useViewportFix}from"./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"./useStyles/styleAttributes.js";import"lodash/maxBy";import"react-responsive";
+export { useActiveClasses } from './useActiveClasses/useActiveClasses.js';
+export { useAppearanceConfig } from './useAppearanceConfig/useAppearanceConfig.js';
+export { useDevicePropsGenerator } from './useDevicePropsGenerator/useDevicePropsGenerator.js';
+export { useDeviceTargetClass } from './useDeviceTargetClass.js';
+export { useMediaQueries } from './useMediaQueries/useMediaQueries.js';
+export { getStyleAttributeKey } from './useStyles/styleAttributes.helpers.js';
+export { useStyles } from './useStyles/useStyles.js';
+export { useViewportFix } from './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 './useStyles/styleAttributes.js';
+import 'lodash/maxBy';
+import 'react-responsive';

package/dist/hooks/useActiveClasses/index.js

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

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

@@ -1 +1,89 @@
-const e={fill:[{key:"fillClass",stateFn:({isActive:e,isDisabled:s})=>!e&&!s},{key:"fillHoverClass",stateFn:({isActive:e,isDisabled:s})=>!e&&!s},{key:"fillActiveClass",stateFn:({isActive:e,isDisabled:s})=>Boolean(e)&&!s},{key:"fillActiveHoverClass",stateFn:({isActive:e,isDisabled:s})=>Boolean(e)&&!s},{key:"fillDisabledClass",stateFn:({isActive:e,isDisabled:s})=>!e&&Boolean(s)}],borderColor:[{key:"borderColorClass",stateFn:({isActive:e,isDisabled:s})=>!e&&!s},{key:"borderColorHoverClass",stateFn:({isActive:e,isDisabled:s})=>!e&&!s},{key:"borderColorActiveClass",stateFn:({isActive:e,isDisabled:s})=>Boolean(e)&&!s}],textColor:[{key:"textColorClass",stateFn:({isActive:e,isDisabled:s})=>!e&&!s}]},s=e=>{const s=e.match(/(ActiveHover|Active|Hover|Disabled)/i);return s?"_"+s[0].replace(/ActiveHover/i,"active_hover").replace(/Active/i,"active").replace(/Hover/i,"hover").replace(/Disabled/i,"disabled").toLowerCase():""},i=e=>e.replace(/([a-z])([A-Z])/g,"$1-$2").toLowerCase();export{e as CLASS_RULES,s as formatState,i as toKebabCase};
+const CLASS_RULES = {
+    fill: [
+        {
+            key: 'fillClass',
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
+        },
+        {
+            key: 'fillHoverClass',
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
+        },
+        {
+            key: 'fillActiveClass',
+            stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
+        },
+        {
+            key: 'fillActiveHoverClass',
+            stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
+        },
+        {
+            key: 'fillDisabledClass',
+            stateFn: ({ isActive, isDisabled }) => !isActive && Boolean(isDisabled),
+        },
+    ],
+    borderColor: [
+        {
+            key: 'borderColorClass',
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
+        },
+        {
+            key: 'borderColorHoverClass',
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
+        },
+        {
+            key: 'borderColorActiveClass',
+            stateFn: ({ isActive, isDisabled }) => Boolean(isActive) && !isDisabled,
+        },
+    ],
+    textColor: [
+        {
+            key: 'textColorClass',
+            stateFn: ({ isActive, isDisabled }) => !isActive && !isDisabled,
+        },
+    ],
+};
+const formatState = (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:
+    //  "fillActiveColorHover"  -> match[0] === "ActiveHover"
+    //  "borderDisabled"        -> match[0] === "Disabled"
+    const 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:
+    //  "fillActiveColorHover"  -> "_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"
+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

@@ -1 +1,63 @@
-const e=["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{e as suffix};
+const 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

@@ -1 +1,58 @@
-import e from"clsx";import{CLASS_RULES as s,toKebabCase as t,formatState as r}from"./useActiveClasses.helpers.js";const i=i=>{const{propsGenerator:o,suffixes:n=[],isActive:c,isDisabled:f}=i,a=[];Object.entries(s).forEach(([e,s])=>{const i=t(e);s.forEach(({key:e,stateFn:s})=>{const t=o[e];if(!t)return;if(s){if(!s({isActive:c,isDisabled:f}))return}const n=r(e);a.push(`${i}${n}_${t}`)})});return{rootClasses:e(a),suffixClasses:n.reduce((i,n)=>{const a=[];Object.entries(s).forEach(([e,s])=>{s.forEach(({key:s,stateFn:i})=>{const u=s.replace(e,""),l=e+n+u,p=o[l];if(!p)return;if(i){if(!i({isActive:c,isDisabled:f}))return}const h=r(l),C=t(e);a.push(`${C}${h}_${p}`)})});return i["HTMLContent"===n?"htmlContent":n[0].toLowerCase()+n.slice(1)]=e(a),i},{})}};export{i as useActiveClasses};
+import clsx from 'clsx';
+import { CLASS_RULES, toKebabCase, formatState } from './useActiveClasses.helpers.js';
+
+const useActiveClasses = (params) => {
+    const { propsGenerator, suffixes = [], isActive, isDisabled } = params;
+    const rootClassesArray = [];
+    Object.entries(CLASS_RULES).forEach(([rulesName, rules]) => {
+        const kebabRuleName = toKebabCase(rulesName);
+        rules.forEach(({ key, stateFn }) => {
+            const value = propsGenerator[key];
+            if (!value) {
+                return;
+            }
+            if (stateFn) {
+                const active = stateFn({ isActive, isDisabled });
+                if (!active) {
+                    return;
+                }
+            }
+            const stateName = formatState(key);
+            rootClassesArray.push(`${kebabRuleName}${stateName}_${value}`);
+        });
+    });
+    const rootClasses = clsx(rootClassesArray);
+    const suffixClasses = suffixes.reduce((acc, suffix) => {
+        const classes = [];
+        Object.entries(CLASS_RULES).forEach(([rulesName, rules]) => {
+            rules.forEach(({ key, stateFn }) => {
+                const withoutPrefixRulesName = key.replace(rulesName, '');
+                const propKey = rulesName + suffix + withoutPrefixRulesName;
+                const value = propsGenerator[propKey];
+                if (!value) {
+                    return;
+                }
+                if (stateFn) {
+                    const active = stateFn({ isActive, isDisabled });
+                    if (!active) {
+                        return;
+                    }
+                }
+                const state = formatState(propKey);
+                const kebabName = toKebabCase(rulesName);
+                classes.push(`${kebabName}${state}_${value}`);
+            });
+        });
+        const suffixKey = suffix === 'HTMLContent'
+            ? 'htmlContent'
+            : (suffix[0].toLowerCase() + suffix.slice(1));
+        acc[suffixKey] = clsx(classes);
+        return acc;
+    }, {});
+    return {
+        rootClasses,
+        suffixClasses,
+    };
+};
+
+export { useActiveClasses };

package/dist/hooks/useAppearanceConfig/index.js

@@ -1 +1,2 @@
-export{useAppearanceConfig}from"./useAppearanceConfig.js";import"react";
+export { useAppearanceConfig } from './useAppearanceConfig.js';
+import 'react';