@pisell/materials 6.9.3 → 6.9.5

package/lib/components/pisellPhone/utils/phoneFormatter.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 电话号码格式化工具
+ */
+/**
+ * 中国大陆手机号格式化：138 0000 0000
+ */
+export declare function formatChinaMobile(phone: string): string;
+/**
+ * 美国/加拿大号码格式化：(555) 123-4567
+ */
+export declare function formatUSPhone(phone: string): string;
+/**
+ * 英国号码格式化：1234 567 8900
+ */
+export declare function formatUKPhone(phone: string): string;
+/**
+ * 根据国家码格式化电话号码
+ * @param phone 电话号码（纯数字）
+ * @param countryCode 国家码
+ * @returns 格式化后的电话号码
+ */
+export declare function formatPhone(phone: string, countryCode: string): string;
+/**
+ * 电话号码脱敏
+ * @param phone 电话号码
+ * @param pattern 脱敏模式
+ * @returns 脱敏后的号码
+ *
+ * @example
+ * maskPhone('13800000000', 'middle') // '138****0000'
+ * maskPhone('13800000000', 'last')   // '1380000****'
+ */
+export declare function maskPhone(phone: string, pattern?: 'middle' | 'last'): string;
+/**
+ * 检测号码类型（中国）
+ * @param phone 电话号码
+ * @returns 号码类型
+ */
+export declare function detectPhoneType(phone: string): 'mobile' | 'landline' | 'unknown';

package/lib/components/pisellPhone/utils/phoneFormatter.js

@@ -0,0 +1,103 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellPhone/utils/phoneFormatter.ts
+var phoneFormatter_exports = {};
+__export(phoneFormatter_exports, {
+  detectPhoneType: () => detectPhoneType,
+  formatChinaMobile: () => formatChinaMobile,
+  formatPhone: () => formatPhone,
+  formatUKPhone: () => formatUKPhone,
+  formatUSPhone: () => formatUSPhone,
+  maskPhone: () => maskPhone
+});
+module.exports = __toCommonJS(phoneFormatter_exports);
+function formatChinaMobile(phone) {
+  const cleaned = phone.replace(/\D/g, "");
+  if (cleaned.length <= 3) return cleaned;
+  if (cleaned.length <= 7) {
+    return `${cleaned.slice(0, 3)} ${cleaned.slice(3)}`;
+  }
+  return `${cleaned.slice(0, 3)} ${cleaned.slice(3, 7)} ${cleaned.slice(7, 11)}`;
+}
+function formatUSPhone(phone) {
+  const cleaned = phone.replace(/\D/g, "");
+  if (cleaned.length <= 3) return cleaned;
+  if (cleaned.length <= 6) {
+    return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3)}`;
+  }
+  return `(${cleaned.slice(0, 3)}) ${cleaned.slice(3, 6)}-${cleaned.slice(6, 10)}`;
+}
+function formatUKPhone(phone) {
+  const cleaned = phone.replace(/\D/g, "");
+  if (cleaned.length <= 4) return cleaned;
+  if (cleaned.length <= 7) {
+    return `${cleaned.slice(0, 4)} ${cleaned.slice(4)}`;
+  }
+  return `${cleaned.slice(0, 4)} ${cleaned.slice(4, 7)} ${cleaned.slice(7, 11)}`;
+}
+function formatPhone(phone, countryCode) {
+  const cleaned = phone.replace(/\D/g, "");
+  switch (countryCode) {
+    case "+86":
+      return formatChinaMobile(cleaned);
+    case "+1":
+      return formatUSPhone(cleaned);
+    case "+44":
+      return formatUKPhone(cleaned);
+    default:
+      return cleaned;
+  }
+}
+function maskPhone(phone, pattern = "middle") {
+  const cleaned = phone.replace(/\D/g, "");
+  if (cleaned.length < 7) return cleaned;
+  switch (pattern) {
+    case "middle":
+      if (cleaned.length === 11) {
+        return cleaned.replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
+      }
+      return cleaned;
+    case "last":
+      if (cleaned.length >= 7) {
+        return cleaned.slice(0, -4) + "****";
+      }
+      return cleaned;
+    default:
+      return cleaned;
+  }
+}
+function detectPhoneType(phone) {
+  const cleaned = phone.replace(/\D/g, "");
+  if (/^1[3-9]\d{9}$/.test(cleaned)) {
+    return "mobile";
+  }
+  if (/^0\d{2,3}\d{7,8}$/.test(cleaned)) {
+    return "landline";
+  }
+  return "unknown";
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  detectPhoneType,
+  formatChinaMobile,
+  formatPhone,
+  formatUKPhone,
+  formatUSPhone,
+  maskPhone
+});

package/lib/components/pisellPhone/utils/phoneValidator.d.ts

@@ -0,0 +1,11 @@
+import type { CountryCode, PisellPhoneProps } from '../types';
+import type { ValidationResult } from '@pisell/utils';
+/**
+ * 电话号码校验
+ * @param phone 电话号码（纯数字）
+ * @param countryCode 国家码
+ * @param countryConfig 国家码配置
+ * @param props 组件 Props
+ * @returns 校验结果
+ */
+export declare function validatePhone(phone: string, countryCode: string, countryConfig: CountryCode | undefined, props: PisellPhoneProps): ValidationResult;

package/lib/components/pisellPhone/utils/phoneValidator.js

@@ -0,0 +1,61 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellPhone/utils/phoneValidator.ts
+var phoneValidator_exports = {};
+__export(phoneValidator_exports, {
+  validatePhone: () => validatePhone
+});
+module.exports = __toCommonJS(phoneValidator_exports);
+function validatePhone(phone, countryCode, countryConfig, props) {
+  const errors = [];
+  const cleaned = phone.replace(/\D/g, "");
+  if (props.required && !cleaned) {
+    errors.push(props.errorMessage || "请输入电话号码");
+    return { isValid: false, errors };
+  }
+  if (!cleaned) {
+    return { isValid: true, errors };
+  }
+  if (props.validateFormat !== false && countryConfig) {
+    if (cleaned.length !== countryConfig.maxLength) {
+      const patternStr = countryConfig.pattern.toString();
+      const isRangePattern = patternStr.includes(",");
+      if (!isRangePattern || !countryConfig.pattern.test(cleaned)) {
+        errors.push(`电话号码应为 ${countryConfig.maxLength} 位`);
+      }
+    }
+    if (!countryConfig.pattern.test(cleaned)) {
+      errors.push(props.errorMessage || "电话号码格式不正确");
+    }
+  }
+  if (props.customValidator) {
+    const result = props.customValidator(cleaned, countryCode);
+    if (result !== true) {
+      errors.push(typeof result === "string" ? result : "校验失败");
+    }
+  }
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  validatePhone
+});

package/lib/components/pisellRating/PisellRating.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+import type { PisellRatingProps } from './types';
+import './PisellRating.less';
+/**
+ * PisellRating 评分组件
+ *
+ * 基于 Ant Design Rate 组件开发，提供直观的星级评分交互。
+ * 支持只读、编辑、禁用三种状态。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 基础使用
+ * const [rating, setRating] = useState(0);
+ * <PisellRating value={rating} onChange={setRating} />
+ *
+ * @example
+ * // 只读态
+ * <PisellRating mode="read" value={4.5} allowHalf />
+ *
+ * @example
+ * // 带评分描述
+ * <PisellRating
+ *   value={rating}
+ *   onChange={setRating}
+ *   tooltips={['很差', '差', '一般', '好', '很好']}
+ * />
+ */
+export declare const PisellRating: React.FC<PisellRatingProps>;
+declare const _default: React.NamedExoticComponent<PisellRatingProps>;
+export default _default;

package/lib/components/pisellRating/PisellRating.js

@@ -0,0 +1,110 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRating/PisellRating.tsx
+var PisellRating_exports = {};
+__export(PisellRating_exports, {
+  PisellRating: () => PisellRating,
+  default: () => PisellRating_default
+});
+module.exports = __toCommonJS(PisellRating_exports);
+var import_react = __toESM(require("react"));
+var import_antd = require("antd");
+var import_utils = require("@pisell/utils");
+var import_PisellRating = require("./PisellRating.less");
+var PisellRating = (props) => {
+  const {
+    mode = "edit",
+    disabled = false,
+    value,
+    defaultValue,
+    onChange,
+    count,
+    max = count ?? 5,
+    allowHalf = false,
+    allowClear = true,
+    character,
+    tooltips,
+    showValue = false,
+    showCount = false,
+    reviewCount,
+    size = 20,
+    color = "#fadb14",
+    unselectedColor = "#d9d9d9",
+    onHoverChange,
+    onFocus,
+    onBlur,
+    className,
+    style,
+    "aria-label": ariaLabel,
+    id
+  } = props;
+  const displayState = (0, import_utils.getDisplayState)(mode, disabled);
+  const isReadOnly = displayState === "read";
+  const isDisabled = displayState === "disabled";
+  const rateStyle = {
+    fontSize: size,
+    color,
+    ...style
+  };
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      className: `pisell-rating pisell-rating-${displayState} ${className || ""}`,
+      id
+    },
+    /* @__PURE__ */ import_react.default.createElement(
+      import_antd.Rate,
+      {
+        value,
+        defaultValue,
+        onChange,
+        onHoverChange,
+        onFocus,
+        onBlur,
+        count: max,
+        allowHalf,
+        allowClear,
+        character,
+        tooltips,
+        disabled: isReadOnly || isDisabled,
+        style: rateStyle,
+        "aria-label": ariaLabel
+      }
+    ),
+    showValue && value !== void 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-rating-value", style: { marginLeft: 8 } }, value.toFixed(allowHalf ? 1 : 0)),
+    showCount && reviewCount !== void 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: "pisell-rating-count", style: { marginLeft: 8, color: "#999" } }, "(", reviewCount, " 人评价)")
+  );
+};
+var PisellRating_default = import_react.default.memo(PisellRating, (prevProps, nextProps) => {
+  return prevProps.value === nextProps.value && prevProps.mode === nextProps.mode && prevProps.disabled === nextProps.disabled;
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  PisellRating
+});

package/lib/components/pisellRating/PisellRating.less

@@ -0,0 +1,41 @@
+// PisellRating 组件样式
+
+.pisell-rating {
+  display: inline-flex;
+  align-items: center;
+  
+  // 只读态
+  &-read {
+    .ant-rate {
+      cursor: default;
+      pointer-events: none;
+    }
+  }
+  
+  // 编辑态
+  &-edit {
+    .ant-rate {
+      cursor: pointer;
+    }
+  }
+  
+  // 禁用态
+  &-disabled {
+    opacity: 0.4;
+    
+    .ant-rate {
+      cursor: not-allowed;
+    }
+  }
+  
+  // 评分数值文本
+  &-value {
+    font-size: 14px;
+    color: rgba(0, 0, 0, 0.85);
+  }
+  
+  // 评分人数文本
+  &-count {
+    font-size: 14px;
+  }
+}

package/lib/components/pisellRating/PisellRating.stories.d.ts

@@ -0,0 +1,53 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellRating } from './PisellRating';
+declare const meta: Meta<typeof PisellRating>;
+export default meta;
+declare type Story = StoryObj<typeof PisellRating>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态
+ */
+export declare const ReadOnly: Story;
+/**
+ * 禁用态
+ */
+export declare const Disabled: Story;
+/**
+ * 半星评分
+ */
+export declare const HalfStar: Story;
+/**
+ * 显示数值
+ */
+export declare const WithValue: Story;
+/**
+ * 显示评分人数
+ */
+export declare const WithCount: Story;
+/**
+ * 带评分描述
+ */
+export declare const WithTooltips: Story;
+/**
+ * 自定义星星数量
+ */
+export declare const CustomCount: Story;
+/**
+ * 自定义图标 - 爱心
+ */
+export declare const HeartIcon: Story;
+/**
+ * 自定义图标 - 笑脸
+ */
+export declare const SmileIcon: Story;
+/**
+ * 商品评分场景
+ */
+export declare const ProductReview: Story;
+/**
+ * 不同尺寸
+ */
+export declare const Sizes: Story;

package/lib/components/pisellRating/PisellRating.stories.js

@@ -0,0 +1,199 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellRating/PisellRating.stories.tsx
+var PisellRating_stories_exports = {};
+__export(PisellRating_stories_exports, {
+  Basic: () => Basic,
+  CustomCount: () => CustomCount,
+  Disabled: () => Disabled,
+  HalfStar: () => HalfStar,
+  HeartIcon: () => HeartIcon,
+  ProductReview: () => ProductReview,
+  ReadOnly: () => ReadOnly,
+  Sizes: () => Sizes,
+  SmileIcon: () => SmileIcon,
+  WithCount: () => WithCount,
+  WithTooltips: () => WithTooltips,
+  WithValue: () => WithValue,
+  default: () => PisellRating_stories_default
+});
+module.exports = __toCommonJS(PisellRating_stories_exports);
+var import_PisellRating = require("./PisellRating");
+var import_react = require("react");
+var import_antd = require("antd");
+var import_icons = require("@ant-design/icons");
+var meta = {
+  title: "Components/PisellRating",
+  component: import_PisellRating.PisellRating,
+  tags: ["autodocs"]
+};
+var PisellRating_stories_default = meta;
+var Basic = {
+  args: {
+    value: 3
+  },
+  render: (args) => {
+    const [value, setValue] = (0, import_react.useState)(args.value);
+    return /* @__PURE__ */ React.createElement(import_PisellRating.PisellRating, { ...args, value, onChange: setValue });
+  }
+};
+var ReadOnly = {
+  args: {
+    mode: "read",
+    value: 4.5,
+    allowHalf: true
+  }
+};
+var Disabled = {
+  args: {
+    disabled: true,
+    value: 3
+  }
+};
+var HalfStar = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)(3.5);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellRating.PisellRating,
+      {
+        value,
+        onChange: setValue,
+        allowHalf: true
+      }
+    );
+  }
+};
+var WithValue = {
+  args: {
+    mode: "read",
+    value: 4.2,
+    allowHalf: true,
+    showValue: true
+  }
+};
+var WithCount = {
+  args: {
+    mode: "read",
+    value: 4.5,
+    allowHalf: true,
+    showValue: true,
+    showCount: true,
+    reviewCount: 328
+  }
+};
+var WithTooltips = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)(0);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellRating.PisellRating,
+      {
+        value,
+        onChange: setValue,
+        tooltips: ["很差", "差", "一般", "好", "很好"]
+      }
+    );
+  }
+};
+var CustomCount = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)(6);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellRating.PisellRating,
+      {
+        value,
+        onChange: setValue,
+        max: 10
+      }
+    );
+  }
+};
+var HeartIcon = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)(3);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellRating.PisellRating,
+      {
+        value,
+        onChange: setValue,
+        character: /* @__PURE__ */ React.createElement(import_icons.HeartFilled, null),
+        color: "#ff4d4f"
+      }
+    );
+  }
+};
+var SmileIcon = {
+  render: () => {
+    const [value, setValue] = (0, import_react.useState)(4);
+    return /* @__PURE__ */ React.createElement(
+      import_PisellRating.PisellRating,
+      {
+        value,
+        onChange: setValue,
+        character: /* @__PURE__ */ React.createElement(import_icons.SmileFilled, null),
+        color: "#52c41a"
+      }
+    );
+  }
+};
+var ProductReview = {
+  render: () => {
+    const [userRating, setUserRating] = (0, import_react.useState)(0);
+    const averageRating = 4.2;
+    const reviewCount = 328;
+    return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 24 } }, /* @__PURE__ */ React.createElement("div", { style: { marginBottom: 8, fontWeight: "bold" } }, "商品评分"), /* @__PURE__ */ React.createElement(
+      import_PisellRating.PisellRating,
+      {
+        mode: "read",
+        value: averageRating,
+        allowHalf: true,
+        showValue: true,
+        showCount: true,
+        reviewCount
+      }
+    )), /* @__PURE__ */ React.createElement(import_antd.Form.Item, { label: "您的评分" }, /* @__PURE__ */ React.createElement(
+      import_PisellRating.PisellRating,
+      {
+        value: userRating,
+        onChange: setUserRating,
+        allowHalf: true,
+        tooltips: ["非常差", "差", "一般", "满意", "非常满意"]
+      }
+    )));
+  }
+};
+var Sizes = {
+  render: () => {
+    return /* @__PURE__ */ React.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 16 } }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8 } }, "小："), /* @__PURE__ */ React.createElement(import_PisellRating.PisellRating, { value: 4, size: 16 })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8 } }, "默认："), /* @__PURE__ */ React.createElement(import_PisellRating.PisellRating, { value: 4, size: 20 })), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { style: { marginRight: 8 } }, "大："), /* @__PURE__ */ React.createElement(import_PisellRating.PisellRating, { value: 4, size: 24 })));
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Basic,
+  CustomCount,
+  Disabled,
+  HalfStar,
+  HeartIcon,
+  ProductReview,
+  ReadOnly,
+  Sizes,
+  SmileIcon,
+  WithCount,
+  WithTooltips,
+  WithValue
+});

package/lib/components/pisellRating/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellRating 组件导出
+ */
+export { default as PisellRating } from './PisellRating';
+export type { PisellRatingProps } from './types';
+export type { DisplayState } from './types';