@digitalc/dxp-ui 0.0.5-alpha.15 → 0.0.5-alpha.17

package/es/utils/TokenContext.js

@@ -0,0 +1,91 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React, { createContext, useContext, useState, useEffect, useMemo, useCallback } from 'react';
+import { TokenManager } from "./";
+
+// 定义TokenContext的类型
+import { jsx as _jsx } from "react/jsx-runtime";
+// 创建默认值，使用TokenManager.tokenKey作为默认的token获取方法
+var defaultValue = {
+  getToken: function getToken(tokenName) {
+    return TokenManager.tokenKey(tokenName);
+  },
+  tokenVersion: 0
+};
+
+// 创建TokenContext
+export var TokenContext = /*#__PURE__*/createContext(defaultValue);
+
+// 创建一个全局的token版本号，用于跟踪token更新
+var globalTokenVersion = 0;
+
+// 添加一个更新token的方法，当token更新时调用
+export var updateTokenVersion = function updateTokenVersion() {
+  globalTokenVersion++;
+  return globalTokenVersion;
+};
+
+// TokenProvider组件，用于提供自定义的token获取方法
+
+export var TokenProvider = function TokenProvider(_ref) {
+  var children = _ref.children,
+    getToken = _ref.getToken;
+  // 使用state来跟踪token版本，当版本变化时会触发重新渲染
+  var _useState = useState(globalTokenVersion),
+    _useState2 = _slicedToArray(_useState, 2),
+    tokenVersion = _useState2[0],
+    setTokenVersion = _useState2[1];
+
+  // 监听全局token版本变化
+  useEffect(function () {
+    // 监听自定义事件，当token更新时更新版本号
+    var handleTokenUpdate = function handleTokenUpdate() {
+      globalTokenVersion++;
+      setTokenVersion(globalTokenVersion);
+    };
+
+    // 添加事件监听
+    if (typeof window !== 'undefined') {
+      window.addEventListener('dxp-token-updated', handleTokenUpdate);
+    }
+    return function () {
+      // 移除事件监听
+      if (typeof window !== 'undefined') {
+        window.removeEventListener('dxp-token-updated', handleTokenUpdate);
+      }
+    };
+  }, []);
+
+  // 使用useMemo缓存value，避免不必要的重新渲染
+  var value = useMemo(function () {
+    return {
+      getToken: getToken || defaultValue.getToken,
+      tokenVersion: tokenVersion
+    };
+  }, [getToken, tokenVersion]);
+  return /*#__PURE__*/_jsx(TokenContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+
+// 自定义钩子，实现 token 响应式获取，支持 token 变更时组件自动刷新。用于在组件中获取token
+export var useDynamicTokens = function useDynamicTokens() {
+  var context = useContext(TokenContext);
+  if (!context) {
+    throw new Error('useDynamicTokens must be used within a TokenProvider');
+  }
+
+  // 使用tokenVersion作为依赖，当tokenVersion变化时，会触发使用此钩子的组件重新渲染
+  var getToken = context.getToken,
+    tokenVersion = context.tokenVersion;
+
+  // 返回一个新的函数，调用此函数会获取最新的token值
+  return useCallback(function (tokenName) {
+    var value = getToken(tokenName);
+    // 如果getToken返回undefined或空字符串，则尝试从TokenManager直接获取
+    if (value === undefined || value === '') {
+      return TokenManager.tokenKey(tokenName);
+    }
+    return value;
+  }, [getToken, tokenVersion]);
+};

package/es/utils/deviceType.d.ts

@@ -0,0 +1,14 @@
+import { strings } from "../constants";
+/**
+ * Checks if the current environment is likely a mobile device.
+ * This function should ideally run only on the client-side.
+ * @returns {boolean} True if likely a mobile device, false otherwise.
+ */
+export declare const checkIsMobile: () => boolean;
+/**
+ * React Hook to detect if the current device is mobile.
+ * Ensures the check runs only on the client-side after hydration.
+ * @returns {boolean} True if likely a mobile device, false otherwise.
+ */
+export declare const useIsMobile: () => boolean;
+export declare const useBreakPoint: () => "desktop" | "mobile" | null;

package/es/utils/deviceType.js

@@ -0,0 +1,65 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import { useState, useEffect } from 'react';
+import { strings } from "../constants";
+
+/**
+ * Checks if the current environment is likely a mobile device.
+ * This function should ideally run only on the client-side.
+ * @returns {boolean} True if likely a mobile device, false otherwise.
+ */
+export var checkIsMobile = function checkIsMobile() {
+  if (typeof window === 'undefined') {
+    // Cannot detect on server-side, assume desktop
+    return false;
+  }
+
+  // Check for touch points (more reliable for modern devices)
+  if (navigator.maxTouchPoints > 0) {
+    return true;
+  }
+
+  // Fallback to User Agent sniffing (less reliable but common)
+  var userAgent = navigator.userAgent || navigator.vendor || window.opera;
+  if (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(userAgent.toLowerCase())) {
+    return true;
+  }
+
+  // Optional: Check via media query (can be influenced by browser window size)
+  // if (window.matchMedia('(pointer: coarse)').matches) {
+  //   return true;
+  // }
+
+  return false;
+};
+
+/**
+ * React Hook to detect if the current device is mobile.
+ * Ensures the check runs only on the client-side after hydration.
+ * @returns {boolean} True if likely a mobile device, false otherwise.
+ */
+export var useIsMobile = function useIsMobile() {
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isMobile = _useState2[0],
+    setIsMobile = _useState2[1];
+  useEffect(function () {
+    // Perform check only after component mounts on the client
+    setIsMobile(checkIsMobile());
+  }, []); // Empty dependency array ensures this runs only once
+
+  return isMobile;
+};
+
+// Example usage:
+// const breakpoint = useBreakPoint();   =  'mobile' : 'desktop'
+export var useBreakPoint = function useBreakPoint() {
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    breakpoint = _useState4[0],
+    setBreakpoint = _useState4[1];
+  useEffect(function () {
+    var autoBreakPoint = checkIsMobile() ? strings.breakpoint.MOBILE : strings.breakpoint.DESKTOP;
+    setBreakpoint(autoBreakPoint);
+  }, []);
+  return breakpoint;
+};

package/es/utils/index.d.ts

@@ -0,0 +1,9 @@
+export * from './TokenContext';
+export * from './deviceType';
+export * from './noop';
+export * from './scaleTool';
+export * from './theme';
+export * from './themeContext';
+export * from './tokenHelper';
+export * from './tokenManager';
+export { default as TokenManager } from './tokenManager';

package/es/utils/index.js

@@ -0,0 +1,9 @@
+export * from "./TokenContext";
+export * from "./deviceType";
+export * from "./noop";
+export * from "./scaleTool";
+export * from "./theme";
+export * from "./themeContext";
+export * from "./tokenHelper";
+export * from "./tokenManager";
+export { default as TokenManager } from "./tokenManager";

package/es/utils/tokenHelper.js

@@ -1,7 +1,4 @@
-import TokenManager from "./tokenManager";
+import { TokenManager } from "./";
 export var getToken = function getToken(tokenName) {
   return TokenManager.tokenKey(tokenName);
-};
-// export const getDesignToken = (tokenName: string) => {
-//   return TokenManager.designTokenKey(tokenName);
-// };
+};

package/es/utils/tokenManager.d.ts

@@ -14,28 +14,52 @@ interface TokenRef {
     [key: string]: TokenValue | Record<string, TokenValue> | null;
 }
 export declare const getComponentToken: () => {
+    colorTagTextGreen: TokenValue;
+    colorTagTextYellow: TokenValue;
+    colorTagTextGrey: TokenValue;
+    colorTagTextRed: TokenValue;
+    colorTagTextOrange: TokenValue;
+    colorTagTextLakeBlue: TokenValue;
+    colorTagBackGroundPrimaryLight: TokenValue;
+    colorTagBackGroundSecondaryLight: TokenValue;
+    colorTagBackGroundGreen: TokenValue;
+    colorTagBackGroundYellow: TokenValue;
+    colorTagBackGroundGrey: TokenValue;
+    colorTagBackGroundRed: TokenValue;
+    colorTagBackGroundOrange: TokenValue;
+    colorTagBackGroundLakeBlue: TokenValue;
+    colorTagGreyLight: TokenValue;
+    colorTagRedLight: TokenValue;
+    colorTagYellowLight: TokenValue;
+    colorTagGreenLight: TokenValue;
+    colorTagOrangeLight: TokenValue;
+    colorTagLakeBlueLight: TokenValue;
+    colorTextAmount: TokenValue;
+    fontSizeMobileContentC23: TokenValue;
+    fontSizeDesktopContentC23: TokenValue;
+    spacingListItemTextVerticalGapMd: TokenValue;
+    spacingListItemTextVerticalGapSm: TokenValue;
+    colorBackgroundSubtle2: TokenValue;
+    colorDividerHorizontal: TokenValue;
     spacinginputpaddingVerticalM: number;
     fontSizeDesktopTitleT23: TokenValue;
     fontSizeDesktopContentC15: TokenValue;
     fontSizeDesktopContentC21: TokenValue;
     fontSizeDesktopTitleT21: TokenValue;
+    fontSizeDesktopTitleT12: TokenValue;
+    fontSizeDesktopTitleT13: TokenValue;
+    fontSizeDesktopTitleT14: TokenValue;
     fontSizeDesktopTitleT15: TokenValue;
+    fontSizeDesktopTitleT16: TokenValue;
     fontSizeDesktopContentC13: TokenValue;
     fontSizeDesktopContentC11: TokenValue;
     fontSizeDesktopContentC12: TokenValue;
     fontSizeDesktopContentC14: TokenValue;
-    fontSizeDesktopTitleT1: TokenValue;
+    fontSizeDesktopTitleT34: TokenValue;
     fontSizeDesktopTitleT32: TokenValue;
     fontSizeDesktopTitleT41: TokenValue;
     fontSizeDesktopContentC05: TokenValue;
     fontSizeDesktopContentC04: TokenValue;
-    fontSizeDesktopTitleT7: TokenValue;
-    fontSizeDesktopTitleT8: TokenValue;
-    fontSizeDesktopTitleT2: TokenValue;
-    fontSizeDesktopTitleT5: TokenValue;
-    fontSizeDesktopTitleT3: TokenValue;
-    fontSizeDesktopTitleT4: TokenValue;
-    fontSizeDesktopTitleT10: TokenValue;
     fontSizeMobileContentC04: TokenValue;
     fontSizeMobileContentC05: TokenValue;
     fontSizeMobileContentC11: TokenValue;
@@ -272,6 +296,7 @@ export declare const getComponentToken: () => {
     spacingNotificationTextLinkPaddingTop: TokenValue;
     spacingTopNavigationPaddingHorizontal: TokenValue;
     spacingTopNavigationPaddingBottom: TokenValue;
+    spacingTopNavigationPaddingTop: TokenValue;
     spacingTopNavigationHorizontalGap: TokenValue;
     spacingTopNavigationIconButtonHorizontalGap: TokenValue;
     spacingTopNavigationTextLinkPaddingRight: TokenValue;
@@ -585,7 +610,7 @@ export declare const getComponentToken: () => {
     colorNumberedListText: TokenValue;
     colorTopNavigationTitleStandard: TokenValue;
     colorTopNavigationTitleInverse: TokenValue;
-    colorTopNavigationGradient: TokenValue;
+    colorTopNavigationGradient: string;
     colorTopNavigationBackground: TokenValue;
     colorTopNavigationBackgroundHaze: TokenValue;
     colorTopNavigationBackgroundInverse: TokenValue;
@@ -769,6 +794,7 @@ export declare const getComponentToken: () => {
     borderRadiusVoucher: TokenValue;
     borderRadiusChip: TokenValue;
     borderRadiusCardSm: TokenValue;
+    borderRadiusCardMd: TokenValue;
     borderRadiusListItem: TokenValue;
     borderRadiusDatetimepicker: TokenValue;
     borderFileInput: TokenValue;
@@ -788,34 +814,67 @@ export declare const getComponentToken: () => {
     fontFamilySecondaryRegular: TokenValue;
     fontFamilySecondarySemiBold: TokenValue;
 };
-declare const TokenManager: {
+/**
+ * token 全局管理器
+ * @property {TokenRef} tokenRef - token引用对象
+ * @property {Function} tokenKey - 获取组件token值
+ * @property {Function} designTokenKey - 获取设计token值
+ * @property {Function} setTokenRef - 设置token引用
+ * @property {Function} getComponentToken - 获取组件token配置
+ * @property {Function} loadExternalToken - 加载外部token 动态注入
+ */
+declare const tokenManager: {
     tokenRef: TokenRef;
     tokenKey: (key: string) => any;
     designTokenKey: (key: string | number) => string | number | true | ShadowStyle;
     setTokenRef: (value: Record<string, TokenValue>) => void;
     getComponentToken: () => {
+        colorTagTextGreen: TokenValue;
+        colorTagTextYellow: TokenValue;
+        colorTagTextGrey: TokenValue;
+        colorTagTextRed: TokenValue;
+        colorTagTextOrange: TokenValue;
+        colorTagTextLakeBlue: TokenValue;
+        colorTagBackGroundPrimaryLight: TokenValue;
+        colorTagBackGroundSecondaryLight: TokenValue;
+        colorTagBackGroundGreen: TokenValue;
+        colorTagBackGroundYellow: TokenValue;
+        colorTagBackGroundGrey: TokenValue;
+        colorTagBackGroundRed: TokenValue;
+        colorTagBackGroundOrange: TokenValue;
+        colorTagBackGroundLakeBlue: TokenValue;
+        colorTagGreyLight: TokenValue;
+        colorTagRedLight: TokenValue;
+        colorTagYellowLight: TokenValue;
+        colorTagGreenLight: TokenValue;
+        colorTagOrangeLight: TokenValue;
+        colorTagLakeBlueLight: TokenValue;
+        colorTextAmount: TokenValue;
+        fontSizeMobileContentC23: TokenValue;
+        fontSizeDesktopContentC23: TokenValue;
+        spacingListItemTextVerticalGapMd: TokenValue;
+        spacingListItemTextVerticalGapSm: TokenValue;
+        colorBackgroundSubtle2: TokenValue;
+        colorDividerHorizontal: TokenValue;
         spacinginputpaddingVerticalM: number;
         fontSizeDesktopTitleT23: TokenValue;
         fontSizeDesktopContentC15: TokenValue;
         fontSizeDesktopContentC21: TokenValue;
         fontSizeDesktopTitleT21: TokenValue;
+        fontSizeDesktopTitleT12: TokenValue;
+        fontSizeDesktopTitleT13: TokenValue;
+        fontSizeDesktopTitleT14: TokenValue;
         fontSizeDesktopTitleT15: TokenValue;
+        fontSizeDesktopTitleT16: TokenValue;
         fontSizeDesktopContentC13: TokenValue;
         fontSizeDesktopContentC11: TokenValue;
         fontSizeDesktopContentC12: TokenValue;
         fontSizeDesktopContentC14: TokenValue;
-        fontSizeDesktopTitleT1: TokenValue;
+        fontSizeDesktopTitleT34: TokenValue;
         fontSizeDesktopTitleT32: TokenValue;
         fontSizeDesktopTitleT41: TokenValue;
         fontSizeDesktopContentC05: TokenValue;
         fontSizeDesktopContentC04: TokenValue;
-        fontSizeDesktopTitleT7: TokenValue;
-        fontSizeDesktopTitleT8: TokenValue;
-        fontSizeDesktopTitleT2: TokenValue;
-        fontSizeDesktopTitleT5: TokenValue;
-        fontSizeDesktopTitleT3: TokenValue;
-        fontSizeDesktopTitleT4: TokenValue;
-        fontSizeDesktopTitleT10: TokenValue;
         fontSizeMobileContentC04: TokenValue;
         fontSizeMobileContentC05: TokenValue;
         fontSizeMobileContentC11: TokenValue;
@@ -1052,6 +1111,7 @@ declare const TokenManager: {
         spacingNotificationTextLinkPaddingTop: TokenValue;
         spacingTopNavigationPaddingHorizontal: TokenValue;
         spacingTopNavigationPaddingBottom: TokenValue;
+        spacingTopNavigationPaddingTop: TokenValue;
         spacingTopNavigationHorizontalGap: TokenValue;
         spacingTopNavigationIconButtonHorizontalGap: TokenValue;
         spacingTopNavigationTextLinkPaddingRight: TokenValue;
@@ -1365,7 +1425,7 @@ declare const TokenManager: {
         colorNumberedListText: TokenValue;
         colorTopNavigationTitleStandard: TokenValue;
         colorTopNavigationTitleInverse: TokenValue;
-        colorTopNavigationGradient: TokenValue;
+        colorTopNavigationGradient: string;
         colorTopNavigationBackground: TokenValue;
         colorTopNavigationBackgroundHaze: TokenValue;
         colorTopNavigationBackgroundInverse: TokenValue;
@@ -1549,6 +1609,7 @@ declare const TokenManager: {
         borderRadiusVoucher: TokenValue;
         borderRadiusChip: TokenValue;
         borderRadiusCardSm: TokenValue;
+        borderRadiusCardMd: TokenValue;
         borderRadiusListItem: TokenValue;
         borderRadiusDatetimepicker: TokenValue;
         borderFileInput: TokenValue;
@@ -1568,5 +1629,6 @@ declare const TokenManager: {
         fontFamilySecondaryRegular: TokenValue;
         fontFamilySecondarySemiBold: TokenValue;
     };
+    loadExternalToken: (externalToken: Record<string, TokenValue>) => boolean;
 };
-export default TokenManager;
+export default tokenManager;