one-design-next 0.0.4-alpha.100

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) yijiejiang@tencent.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,134 @@
+# one-design-next
+
+One Design Next from TAD
+
+目标：
+
+1. 对 One Design 设计语言来说，提供高质量高保真的再实现；
+2. 对其他 AMS 业务来说，提供高质量高自由度的基础库。
+
+## 组件选型
+
+## 自定义组件：ConfigProvider 及 CSS Variables
+
+自定义组件的能力通过 ConfigProvider 及 CSS Variables 实现。
+
+CSS Variables 当然也可以由 ConfigProvider 替代，但 CSS Variables 更方便，而且可以绕过 Message 组件不在 context 的问题，同时也方便未来的 Figma 资产生成。
+
+CSS Variables 分为 base.css 中的基础变量，及组件级别的组件变量。后者引用前者。如需大范围的样式用前者，更细粒度的样式用后者。
+
+ConfigProvider 则负责更复杂的自定义，如 Icon 的自定义添加，以及增加组件行为，比如 Button 的点击行为定义。
+
+## react-day-picker-for-od
+
+**20260106 由于 dmp 已升级 node，因此废除，直接使用 react-day-picker@9 即可。**
+
+---
+
+https://github.com/aragakey/react-day-picker
+
+fork 自 react-day-picker@9，保持 @9 的版本更新。
+
+fork 只修改了对 node>18 的依赖，以兼容有一些业务必须使用 16 或更低的 node 版本。
+
+## 2025-05-20 TODO
+
+- [] https://ant.design/components/config-provider-cn#config-provider-demo-wave
+
+---
+
+## 发布流程 SOP（给 AI 助手读取用）
+
+> 每次发布 alpha 版本，直接按以下步骤执行，无需人工确认每一步。
+
+### 环境准备（首次或环境重置后）
+
+```bash
+# 设置 npm registry
+npm config set registry http://mirrors.tencent.com/npm/
+pnpm config set registry http://mirrors.tencent.com/npm/
+
+# 配置 npm auth token（每次 token 失效时更新）
+# 格式写入 ~/.npmrc：
+# //mirrors.tencent.com/npm/:_authToken="<base64-token>"
+```
+
+### Step 1：更新 one-design-next 版本号并发布
+
+```bash
+# 1. 进入仓库，切到 master，拉最新
+cd /root/.openclaw/workspace/one-design-next
+git checkout master && git pull origin master
+
+# 2. 读取当前版本，计算下一个 alpha 版本
+# 当前版本格式：0.0.4-alpha.N → 下一个：0.0.4-alpha.(N+1)
+# 用工蜂 MCP 直接修改 package.json 并 commit 到 master（见下方 AI 操作说明）
+
+# 3. 拉取最新（含刚提交的版本号变更）
+git pull origin master
+
+# 4. 安装依赖（注意：npm install 在 node v22 有 bug，必须用 pnpm）
+pnpm install
+
+# 5. 构建（prepublishOnly 会自动 build，但提前 build 可提前发现错误）
+pnpm run build
+
+# 6. 发布
+npm publish --registry http://mirrors.tencent.com/npm/
+```
+
+> ⚠️ **已知问题：npm install 在 node v22 报错**
+> 错误：`Cannot read properties of null (reading 'matches')`
+> 原因：npm v10 arborist 的 bug
+> **解决：始终用 `pnpm install`，不要用 `npm install`**
+
+### Step 2：更新 tad-universal-components
+
+```bash
+# 1. 进入仓库（如不存在则 clone）
+cd /root/.openclaw/workspace/tad-universal-components
+# 或：git clone https://git.woa.com/tad-ag/tad-universal-components.git
+
+# 2. 切到 odn-update 分支，合入最新 main
+git checkout odn-update
+git fetch origin
+git merge origin/main --no-edit
+
+# 3. 更新 packages/lib-od/package.json 中的版本号
+# 将 "one-design-next": "^0.0.4-alpha.N" 改为新版本
+
+# 4. pnpm install 更新 lock 文件
+pnpm install
+
+# 5. 提交（注意 commitlint scope 规则）
+git add packages/lib-od/package.json pnpm-lock.yaml
+git commit -m "chore(od): update one-design-next to <新版本号>"
+git push origin odn-update
+```
+
+> ⚠️ **已知问题：commitlint scope 校验**
+> 错误：`scope may not be empty` 或 `无效 scope`
+> **允许的 scope 值**：`common`, `od`, `adui`, `antdm`, `td-vue`, `ots`, `base`, `biz-mx`, `biz-mb`, `biz-ms`, `biz-mw`, `*`, `release`
+> **正确写法**：`chore(od): update one-design-next to 0.0.4-alpha.83`
+
+### Step 3：创建 MR
+
+通过工蜂 MCP 创建：
+
+```
+project_id: tad-ag/tad-universal-components
+source_branch: odn-update
+target_branch: main
+title: chore(od): update one-design-next to <新版本号>
+```
+
+MR 链接格式：`https://git.woa.com/tad-ag/tad-universal-components/-/merge_requests/<iid>`
+
+### 完整版本信息
+
+| 仓库                     | 地址                                                |
+| ------------------------ | --------------------------------------------------- |
+| one-design-next          | https://git.woa.com/wxad-design/one-design-next     |
+| tad-universal-components | https://git.woa.com/tad-ag/tad-universal-components |
+| npm registry             | http://mirrors.tencent.com/npm/                     |
+| npm 包名                 | one-design-next                                     |

package/dist/_util/canUseDom.d.ts

@@ -0,0 +1 @@
+export default function canUseDom(): boolean;

package/dist/_util/canUseDom.js

@@ -0,0 +1,3 @@
+export default function canUseDom() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}

package/dist/_util/color.d.ts

@@ -0,0 +1,103 @@
+/**
+ * 颜色相关工具函数
+ */
+/**
+ * 检查字符串是否为合法的 hex 颜色值（不包含 # 号）
+ * @param color 颜色字符串，如 "FF0000" 或 "ff0000"
+ * @returns 是否为合法的 hex 颜色
+ */
+export declare const isValidHexColor: (color: string) => boolean;
+/**
+ * 将颜色字符串转换为大写
+ * @param color 颜色字符串
+ * @returns 大写的颜色字符串
+ */
+export declare const normalizeHexColor: (color: string) => string;
+/**
+ * 将 3 位 hex 颜色扩展为 6 位
+ * @param color 3 位或 6 位 hex 颜色值
+ * @returns 6 位 hex 颜色值
+ */
+export declare const expandHexColor: (color: string) => string;
+/**
+ * 将 hex 颜色值转换为 RGB 对象
+ * @param color hex 颜色值（不包含 #）
+ * @returns RGB 对象 { r, g, b } 或 null
+ */
+export declare const hexToRgb: (color: string) => {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+/**
+ * 将 RGB 值转换为 hex 颜色值
+ * @param r 红色分量 (0-255)
+ * @param g 绿色分量 (0-255)
+ * @param b 蓝色分量 (0-255)
+ * @returns hex 颜色值（不包含 #）
+ */
+export declare const rgbToHex: (r: number, g: number, b: number) => string;
+/**
+ * 获取颜色的显示值（带 # 前缀）
+ * @param color hex 颜色值（不包含 #）
+ * @returns 带 # 前缀的颜色值，如 "#FF0000"
+ */
+export declare const getColorDisplayValue: (color: string) => string;
+/**
+ * 从带 # 前缀的颜色值中提取 hex 值
+ * @param colorWithHash 带 # 前缀的颜色值，如 "#FF0000"
+ * @returns 不带 # 的 hex 值，如 "FF0000"
+ */
+export declare const extractHexFromDisplay: (colorWithHash: string) => string;
+/**
+ * 检查是否为有效的显示颜色值（带 # 前缀）
+ * @param displayColor 带 # 前缀的颜色值
+ * @returns 是否为有效的显示颜色值
+ */
+export declare const isValidDisplayColor: (displayColor: string) => boolean;
+/**
+ * 将 RGB 值转换为 HSB 值
+ * @param r 红色分量 (0-255)
+ * @param g 绿色分量 (0-255)
+ * @param b 蓝色分量 (0-255)
+ * @returns HSB 对象 { h: 0-360, s: 0-100, b: 0-100 }
+ */
+export declare const rgbToHsb: (r: number, g: number, b: number) => {
+    h: number;
+    s: number;
+    b: number;
+};
+/**
+ * 将 HSB 值转换为 RGB 值
+ * @param h 色相 (0-360)
+ * @param s 饱和度 (0-100)
+ * @param b 亮度 (0-100)
+ * @returns RGB 对象 { r, g, b }
+ */
+export declare const hsbToRgb: (h: number, s: number, b: number) => {
+    r: number;
+    g: number;
+    b: number;
+};
+/**
+ * 将 hex 颜色值转换为 HSB 值
+ * @param color hex 颜色值（不包含 #）
+ * @returns HSB 对象 { h, s, b } 或 null
+ */
+export declare const hexToHsb: (color: string) => {
+    h: number;
+    s: number;
+    b: number;
+} | null;
+/**
+ * 将 HSB 值转换为 hex 颜色值
+ * @param h 色相 (0-360)
+ * @param s 饱和度 (0-100)
+ * @param b 亮度 (0-100)
+ * @returns hex 颜色值（不包含 #）
+ */
+export declare const hsbToHex: (h: number, s: number, b: number) => string;
+/**
+ * 默认颜色值
+ */
+export declare const DEFAULT_COLOR = "FFFFFF";

package/dist/_util/color.js

@@ -0,0 +1,250 @@
+/**
+ * 颜色相关工具函数
+ */
+
+/**
+ * 检查字符串是否为合法的 hex 颜色值（不包含 # 号）
+ * @param color 颜色字符串，如 "FF0000" 或 "ff0000"
+ * @returns 是否为合法的 hex 颜色
+ */
+export var isValidHexColor = function isValidHexColor(color) {
+  if (!color || typeof color !== 'string') {
+    return false;
+  }
+
+  // 移除空格
+  var trimmedColor = color.trim();
+
+  // 检查长度（支持 3 位和 6 位）
+  if (trimmedColor.length !== 3 && trimmedColor.length !== 6) {
+    return false;
+  }
+
+  // 检查是否只包含有效的 hex 字符
+  var hexPattern = /^[0-9A-Fa-f]+$/;
+  return hexPattern.test(trimmedColor);
+};
+
+/**
+ * 将颜色字符串转换为大写
+ * @param color 颜色字符串
+ * @returns 大写的颜色字符串
+ */
+export var normalizeHexColor = function normalizeHexColor(color) {
+  if (!color || typeof color !== 'string') {
+    return '';
+  }
+  return color.trim().toUpperCase();
+};
+
+/**
+ * 将 3 位 hex 颜色扩展为 6 位
+ * @param color 3 位或 6 位 hex 颜色值
+ * @returns 6 位 hex 颜色值
+ */
+export var expandHexColor = function expandHexColor(color) {
+  if (!isValidHexColor(color)) {
+    return color;
+  }
+  var normalized = normalizeHexColor(color);
+  if (normalized.length === 3) {
+    // 将 3 位扩展为 6 位，如 F0A -> FF00AA
+    return normalized.split('').map(function (char) {
+      return char + char;
+    }).join('');
+  }
+  return normalized;
+};
+
+/**
+ * 将 hex 颜色值转换为 RGB 对象
+ * @param color hex 颜色值（不包含 #）
+ * @returns RGB 对象 { r, g, b } 或 null
+ */
+export var hexToRgb = function hexToRgb(color) {
+  if (!isValidHexColor(color)) {
+    return null;
+  }
+  var expanded = expandHexColor(color);
+  var r = parseInt(expanded.slice(0, 2), 16);
+  var g = parseInt(expanded.slice(2, 4), 16);
+  var b = parseInt(expanded.slice(4, 6), 16);
+  return {
+    r: r,
+    g: g,
+    b: b
+  };
+};
+
+/**
+ * 将 RGB 值转换为 hex 颜色值
+ * @param r 红色分量 (0-255)
+ * @param g 绿色分量 (0-255)
+ * @param b 蓝色分量 (0-255)
+ * @returns hex 颜色值（不包含 #）
+ */
+export var rgbToHex = function rgbToHex(r, g, b) {
+  var toHex = function toHex(n) {
+    var hex = Math.round(Math.max(0, Math.min(255, n))).toString(16);
+    return hex.length === 1 ? '0' + hex : hex;
+  };
+  return (toHex(r) + toHex(g) + toHex(b)).toUpperCase();
+};
+
+/**
+ * 获取颜色的显示值（带 # 前缀）
+ * @param color hex 颜色值（不包含 #）
+ * @returns 带 # 前缀的颜色值，如 "#FF0000"
+ */
+export var getColorDisplayValue = function getColorDisplayValue(color) {
+  if (!color) {
+    return '';
+  }
+  return "#".concat(normalizeHexColor(color));
+};
+
+/**
+ * 从带 # 前缀的颜色值中提取 hex 值
+ * @param colorWithHash 带 # 前缀的颜色值，如 "#FF0000"
+ * @returns 不带 # 的 hex 值，如 "FF0000"
+ */
+export var extractHexFromDisplay = function extractHexFromDisplay(colorWithHash) {
+  if (!colorWithHash || typeof colorWithHash !== 'string') {
+    return '';
+  }
+  var trimmed = colorWithHash.trim();
+  if (trimmed.startsWith('#')) {
+    return trimmed.slice(1);
+  }
+  return trimmed;
+};
+
+/**
+ * 检查是否为有效的显示颜色值（带 # 前缀）
+ * @param displayColor 带 # 前缀的颜色值
+ * @returns 是否为有效的显示颜色值
+ */
+export var isValidDisplayColor = function isValidDisplayColor(displayColor) {
+  if (!displayColor || typeof displayColor !== 'string') {
+    return false;
+  }
+  var trimmed = displayColor.trim();
+  if (trimmed.startsWith('#')) {
+    return isValidHexColor(trimmed.slice(1));
+  }
+  return false;
+};
+
+/**
+ * 将 RGB 值转换为 HSB 值
+ * @param r 红色分量 (0-255)
+ * @param g 绿色分量 (0-255)
+ * @param b 蓝色分量 (0-255)
+ * @returns HSB 对象 { h: 0-360, s: 0-100, b: 0-100 }
+ */
+export var rgbToHsb = function rgbToHsb(r, g, b) {
+  r /= 255;
+  g /= 255;
+  b /= 255;
+  var max = Math.max(r, g, b);
+  var min = Math.min(r, g, b);
+  var diff = max - min;
+  var h = 0;
+  var s = max === 0 ? 0 : diff / max * 100;
+  var brightness = max * 100;
+  if (diff !== 0) {
+    switch (max) {
+      case r:
+        h = ((g - b) / diff + (g < b ? 6 : 0)) * 60;
+        break;
+      case g:
+        h = ((b - r) / diff + 2) * 60;
+        break;
+      case b:
+        h = ((r - g) / diff + 4) * 60;
+        break;
+    }
+  }
+  return {
+    h: Math.round(h),
+    s: Math.round(s),
+    b: Math.round(brightness)
+  };
+};
+
+/**
+ * 将 HSB 值转换为 RGB 值
+ * @param h 色相 (0-360)
+ * @param s 饱和度 (0-100)
+ * @param b 亮度 (0-100)
+ * @returns RGB 对象 { r, g, b }
+ */
+export var hsbToRgb = function hsbToRgb(h, s, b) {
+  h = h % 360;
+  s = s / 100;
+  b = b / 100;
+  var c = b * s;
+  var x = c * (1 - Math.abs(h / 60 % 2 - 1));
+  var m = b - c;
+  var r = 0,
+    g = 0,
+    blue = 0;
+  if (h >= 0 && h < 60) {
+    r = c;
+    g = x;
+    blue = 0;
+  } else if (h >= 60 && h < 120) {
+    r = x;
+    g = c;
+    blue = 0;
+  } else if (h >= 120 && h < 180) {
+    r = 0;
+    g = c;
+    blue = x;
+  } else if (h >= 180 && h < 240) {
+    r = 0;
+    g = x;
+    blue = c;
+  } else if (h >= 240 && h < 300) {
+    r = x;
+    g = 0;
+    blue = c;
+  } else if (h >= 300 && h < 360) {
+    r = c;
+    g = 0;
+    blue = x;
+  }
+  return {
+    r: Math.round((r + m) * 255),
+    g: Math.round((g + m) * 255),
+    b: Math.round((blue + m) * 255)
+  };
+};
+
+/**
+ * 将 hex 颜色值转换为 HSB 值
+ * @param color hex 颜色值（不包含 #）
+ * @returns HSB 对象 { h, s, b } 或 null
+ */
+export var hexToHsb = function hexToHsb(color) {
+  var rgb = hexToRgb(color);
+  if (!rgb) return null;
+  return rgbToHsb(rgb.r, rgb.g, rgb.b);
+};
+
+/**
+ * 将 HSB 值转换为 hex 颜色值
+ * @param h 色相 (0-360)
+ * @param s 饱和度 (0-100)
+ * @param b 亮度 (0-100)
+ * @returns hex 颜色值（不包含 #）
+ */
+export var hsbToHex = function hsbToHex(h, s, b) {
+  var rgb = hsbToRgb(h, s, b);
+  return rgbToHex(rgb.r, rgb.g, rgb.b);
+};
+
+/**
+ * 默认颜色值
+ */
+export var DEFAULT_COLOR = 'FFFFFF';

package/dist/_util/date.d.ts

@@ -0,0 +1,53 @@
+export declare const MONTHS: {
+    zhCN: string;
+    enUS: string;
+}[];
+export declare const DATE_INPUT_PLACEHOLDER: {
+    zhCN: {
+        day: string;
+        week: string;
+        month: string;
+        quarter: string;
+        year: string;
+    };
+    enUS: {
+        day: string;
+        week: string;
+        month: string;
+        quarter: string;
+        year: string;
+    };
+};
+export declare const DATE_RANGE_INPUT_PLACEHOLDER: {
+    zhCN: string;
+    enUS: string;
+};
+export declare const convertDateToString: (date?: Date | '' | null, locale?: 'zhCN' | 'enUS') => string;
+export declare const convertDateRangeToString: (range?: [Date | undefined | null, Date | undefined | null], locale?: 'zhCN' | 'enUS', separator?: string) => string;
+export declare const convertWeekToString: (week?: [Date | undefined | null, Date | undefined | null], locale?: 'zhCN' | 'enUS') => string;
+export declare const convertQuarterToString: (quarterRange?: [Date | undefined | null, Date | undefined | null], locale?: 'zhCN' | 'enUS') => string;
+export declare const convertMonthToString: (monthRange?: [Date | undefined | null, Date | undefined | null], locale?: 'zhCN' | 'enUS') => string;
+export declare const isLegalYearString: (date: string, locale?: 'zhCN' | 'enUS') => boolean;
+export declare const parseYearStringToRange: (yearString: string, locale?: 'zhCN' | 'enUS') => [Date, Date] | null;
+export declare const convertYearToString: (yearRange?: [Date | undefined | null, Date | undefined | null], locale?: 'zhCN' | 'enUS') => string;
+export declare const isSameDay: (date1?: Date | null, date2?: Date | null) => boolean;
+export declare const isSameMonth: (date1?: Date | null, date2?: Date | null) => boolean;
+export declare const isLegalDateString: (date: string, locale?: 'zhCN' | 'enUS') => boolean;
+export declare const isLegalDateRangeString: (date: string, locale?: 'zhCN' | 'enUS') => boolean | 0;
+export declare const isLegalWeekString: (date: string, locale?: 'zhCN' | 'enUS') => boolean;
+export declare const isLegalQuarterString: (date: string, locale?: 'zhCN' | 'enUS') => boolean;
+export declare const isLegalMonthString: (date: string, locale?: 'zhCN' | 'enUS') => boolean;
+export declare const parseWeekStringToRange: (weekString: string, locale?: 'zhCN' | 'enUS') => [Date, Date] | null;
+export declare const parseQuarterStringToRange: (quarterString: string, locale?: 'zhCN' | 'enUS') => [Date, Date] | null;
+export declare const parseMonthStringToRange: (monthString: string, locale?: 'zhCN' | 'enUS') => [Date, Date] | null;
+export declare const isDayBefore: (date1?: Date | null, date2?: Date | null) => boolean;
+export declare const isDayAfter: (date1?: Date | null, date2?: Date | null) => boolean;
+export declare const today: Date;
+export declare const getDefaultMaxDate: () => Date;
+export declare const getDefaultMinDate: () => Date;
+export declare const getStartOfWeek: (date: Date, locale?: 'zhCN' | 'enUS') => Date;
+export declare const getEndOfWeek: (date: Date, locale?: 'zhCN' | 'enUS') => Date;
+export declare const clone: (d: Date | null | undefined) => Date | null;
+export declare const getStartOfQuarter: (date: Date) => Date;
+export declare const getEndOfQuarter: (date: Date) => Date;
+export declare const isDayInRange: (date: Date, dateRange: [Date | null | undefined, Date | null | undefined], exclusive?: boolean) => boolean;