@pisell/materials 6.9.4 → 6.11.1

package/lib/components/pisellEmail/utils/emailHelper.d.ts

@@ -0,0 +1,66 @@
+/**
+ * 邮箱辅助函数
+ */
+import type { MailtoOptions } from '../types';
+/**
+ * 提取邮箱域名
+ * @param email 邮箱地址
+ * @returns 域名部分
+ *
+ * @example
+ * extractEmailDomain('user@example.com') // 'example.com'
+ */
+export declare function extractEmailDomain(email: string): string;
+/**
+ * 提取邮箱本地部分
+ * @param email 邮箱地址
+ * @returns 本地部分（@ 前面的部分）
+ *
+ * @example
+ * extractEmailLocal('user@example.com') // 'user'
+ */
+export declare function extractEmailLocal(email: string): string;
+/**
+ * 规范化邮箱地址（转小写）
+ * @param email 邮箱地址
+ * @returns 规范化后的邮箱地址
+ *
+ * @example
+ * normalizeEmail('User@Example.COM') // 'user@example.com'
+ */
+export declare function normalizeEmail(email: string): string;
+/**
+ * 邮箱域名脱敏（partial 模式）
+ * 只显示本地部分的第一个字符，其余用 *** 替代
+ *
+ * @param email 邮箱地址
+ * @returns 脱敏后的邮箱（u***@gmail.com）
+ *
+ * @example
+ * hideEmailDomain('user@gmail.com') // 'u***@gmail.com'
+ */
+export declare function hideEmailDomain(email: string): string;
+/**
+ * 邮箱域名完全隐藏（full 模式）
+ * 隐藏整个域名部分
+ *
+ * @param email 邮箱地址
+ * @returns 脱敏后的邮箱（user@***）
+ *
+ * @example
+ * maskEmailDomain('user@gmail.com') // 'user@***'
+ */
+export declare function maskEmailDomain(email: string): string;
+/**
+ * 处理 mailto 点击，唤起邮件客户端
+ *
+ * @param email 邮箱地址
+ * @param options mailto 可选参数（主题、正文、抄送等）
+ *
+ * @example
+ * handleEmailClick('support@example.com', {
+ *   subject: '产品咨询',
+ *   body: '您好，我想咨询...'
+ * })
+ */
+export declare function handleEmailClick(email: string, options?: MailtoOptions): void;

package/lib/components/pisellEmail/utils/emailHelper.js

@@ -0,0 +1,89 @@
+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/pisellEmail/utils/emailHelper.ts
+var emailHelper_exports = {};
+__export(emailHelper_exports, {
+  extractEmailDomain: () => extractEmailDomain,
+  extractEmailLocal: () => extractEmailLocal,
+  handleEmailClick: () => handleEmailClick,
+  hideEmailDomain: () => hideEmailDomain,
+  maskEmailDomain: () => maskEmailDomain,
+  normalizeEmail: () => normalizeEmail
+});
+module.exports = __toCommonJS(emailHelper_exports);
+function extractEmailDomain(email) {
+  const parts = email.split("@");
+  return parts.length === 2 ? parts[1] : "";
+}
+function extractEmailLocal(email) {
+  const parts = email.split("@");
+  return parts.length >= 1 ? parts[0] : "";
+}
+function normalizeEmail(email) {
+  return email.trim().toLowerCase();
+}
+function hideEmailDomain(email) {
+  if (!email || !email.includes("@")) {
+    return email;
+  }
+  const [localPart, domainPart] = email.split("@");
+  if (!localPart || !domainPart) {
+    return email;
+  }
+  const visibleChars = Math.min(1, localPart.length);
+  const maskedLocal = localPart.substring(0, visibleChars) + "***";
+  return `${maskedLocal}@${domainPart}`;
+}
+function maskEmailDomain(email) {
+  if (!email || !email.includes("@")) {
+    return email;
+  }
+  const [localPart] = email.split("@");
+  return `${localPart}@***`;
+}
+function handleEmailClick(email, options) {
+  if (!email) return;
+  let mailtoUrl = `mailto:${email}`;
+  const params = [];
+  if (options == null ? void 0 : options.subject) {
+    params.push(`subject=${encodeURIComponent(options.subject)}`);
+  }
+  if (options == null ? void 0 : options.body) {
+    params.push(`body=${encodeURIComponent(options.body)}`);
+  }
+  if (options == null ? void 0 : options.cc) {
+    params.push(`cc=${encodeURIComponent(options.cc)}`);
+  }
+  if (options == null ? void 0 : options.bcc) {
+    params.push(`bcc=${encodeURIComponent(options.bcc)}`);
+  }
+  if (params.length > 0) {
+    mailtoUrl += "?" + params.join("&");
+  }
+  window.location.href = mailtoUrl;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  extractEmailDomain,
+  extractEmailLocal,
+  handleEmailClick,
+  hideEmailDomain,
+  maskEmailDomain,
+  normalizeEmail
+});

package/lib/components/pisellEmail/utils/emailValidator.d.ts

@@ -0,0 +1,45 @@
+/**
+ * 邮箱校验工具函数
+ */
+/**
+ * 标准邮箱格式校验
+ * @param email 邮箱地址
+ * @returns 是否通过校验
+ *
+ * @example
+ * validateEmail('user@example.com') // true
+ * validateEmail('invalid-email') // false
+ */
+export declare function validateEmail(email: string): boolean;
+/**
+ * 严格邮箱格式校验（RFC 5322）
+ * @param email 邮箱地址
+ * @returns 是否通过校验
+ *
+ * @example
+ * validateEmailStrict('user@example.com') // true
+ */
+export declare function validateEmailStrict(email: string): boolean;
+/**
+ * 邮箱分部校验
+ * 检查邮箱的各个部分是否符合规范
+ *
+ * @param email 邮箱地址
+ * @returns 校验结果
+ */
+export declare function validateEmailParts(email: string): {
+    isValid: boolean;
+    errors: string[];
+};
+/**
+ * 域名白名单/黑名单校验
+ *
+ * @param email 邮箱地址
+ * @param allowedDomains 白名单域名列表
+ * @param blockedDomains 黑名单域名列表
+ * @returns 校验结果
+ */
+export declare function validateEmailDomain(email: string, allowedDomains?: string[], blockedDomains?: string[]): {
+    isValid: boolean;
+    errors: string[];
+};

package/lib/components/pisellEmail/utils/emailValidator.js

@@ -0,0 +1,97 @@
+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/pisellEmail/utils/emailValidator.ts
+var emailValidator_exports = {};
+__export(emailValidator_exports, {
+  validateEmail: () => validateEmail,
+  validateEmailDomain: () => validateEmailDomain,
+  validateEmailParts: () => validateEmailParts,
+  validateEmailStrict: () => validateEmailStrict
+});
+module.exports = __toCommonJS(emailValidator_exports);
+var import_emailRegex = require("../constants/emailRegex");
+var import_emailHelper = require("./emailHelper");
+function validateEmail(email) {
+  if (!email) return true;
+  return import_emailRegex.EMAIL_REGEX.test(email);
+}
+function validateEmailStrict(email) {
+  if (!email) return true;
+  return import_emailRegex.STRICT_EMAIL_REGEX.test(email);
+}
+function validateEmailParts(email) {
+  const errors = [];
+  if (!email.includes("@")) {
+    errors.push("邮箱地址必须包含 @ 符号");
+    return { isValid: false, errors };
+  }
+  const [localPart, domainPart] = email.split("@");
+  if (!localPart || localPart.length === 0) {
+    errors.push("@ 符号前不能为空");
+  }
+  if (localPart.length > 64) {
+    errors.push("@ 符号前最多 64 个字符");
+  }
+  if (!domainPart || domainPart.length === 0) {
+    errors.push("@ 符号后不能为空");
+  }
+  if (!domainPart.includes(".")) {
+    errors.push("域名必须包含 . 符号");
+  }
+  if (domainPart.endsWith(".")) {
+    errors.push("域名不能以 . 结尾");
+  }
+  const parts = domainPart.split(".");
+  const tld = parts[parts.length - 1];
+  if (tld && tld.length < 2) {
+    errors.push("顶级域名至少 2 个字符");
+  }
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+}
+function validateEmailDomain(email, allowedDomains, blockedDomains) {
+  const errors = [];
+  const domain = (0, import_emailHelper.extractEmailDomain)(email);
+  if (!domain) {
+    return { isValid: true, errors };
+  }
+  if (allowedDomains && allowedDomains.length > 0) {
+    if (!allowedDomains.includes(domain)) {
+      errors.push(`只允许以下域名：${allowedDomains.join(", ")}`);
+    }
+  }
+  if (blockedDomains && blockedDomains.length > 0) {
+    if (blockedDomains.includes(domain)) {
+      errors.push("该邮箱域名不可用");
+    }
+  }
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  validateEmail,
+  validateEmailDomain,
+  validateEmailParts,
+  validateEmailStrict
+});

package/lib/components/pisellEmail/utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * PisellEmail 工具函数导出
+ */
+export * from './emailValidator';
+export * from './emailHelper';
+export * from './domainSuggestions';

package/lib/components/pisellEmail/utils/index.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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 __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/pisellEmail/utils/index.ts
+var utils_exports = {};
+module.exports = __toCommonJS(utils_exports);
+__reExport(utils_exports, require("./emailValidator"), module.exports);
+__reExport(utils_exports, require("./emailHelper"), module.exports);
+__reExport(utils_exports, require("./domainSuggestions"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./emailValidator"),
+  ...require("./emailHelper"),
+  ...require("./domainSuggestions")
+});

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

@@ -4,7 +4,7 @@ import React from 'react';
 export interface PisellLayoutProps extends LayoutProps {
     children?: React.ReactNode;
 }
-interface CompoundedComponent extends React.FC<PisellLayoutProps> {
+export interface CompoundedComponent extends React.FC<PisellLayoutProps> {
     Header: typeof Layout.Header;
     Content: typeof Layout.Content;
     Footer: typeof Layout.Footer;

package/lib/components/pisellLongText/PisellLongText.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { PisellLongTextProps } from './types';
+import './PisellLongText.less';
+/**
+ * PisellLongText 长文本/多行文本组件
+ *
+ * 多行文本输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design TextArea 组件开发，提供展开/折叠功能和完整的校验框架。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 编辑态
+ * <PisellLongText
+ *   placeholder="请输入内容"
+ *   rows={3}
+ *   maxLength={500}
+ *   showCount
+ * />
+ *
+ * @example
+ * // 只读态（展开折叠）
+ * <PisellLongText
+ *   mode="read"
+ *   value={longText}
+ *   maxLines={3}
+ *   enableExpand
+ * />
+ *
+ * @example
+ * // 自动高度
+ * <PisellLongText
+ *   autoSize={{ minRows: 3, maxRows: 10 }}
+ *   placeholder="自动调整高度"
+ * />
+ */
+export declare const PisellLongText: React.FC<PisellLongTextProps>;
+declare const _default: React.NamedExoticComponent<PisellLongTextProps>;
+export default _default;

package/lib/components/pisellLongText/PisellLongText.js

@@ -0,0 +1,62 @@
+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/pisellLongText/PisellLongText.tsx
+var PisellLongText_exports = {};
+__export(PisellLongText_exports, {
+  PisellLongText: () => PisellLongText,
+  default: () => PisellLongText_default
+});
+module.exports = __toCommonJS(PisellLongText_exports);
+var import_react = __toESM(require("react"));
+var import_utils = require("@pisell/utils");
+var import_ReadOnlyView = __toESM(require("./components/ReadOnlyView"));
+var import_EditView = __toESM(require("./components/EditView"));
+var import_DisabledView = __toESM(require("./components/DisabledView"));
+var import_PisellLongText = require("./PisellLongText.less");
+var PisellLongText = (props) => {
+  const { mode = "edit", disabled = false } = props;
+  const displayState = (0, import_utils.getDisplayState)(mode, disabled);
+  switch (displayState) {
+    case "read":
+      return /* @__PURE__ */ import_react.default.createElement(import_ReadOnlyView.default, { ...props });
+    case "edit":
+      return /* @__PURE__ */ import_react.default.createElement(import_EditView.default, { ...props });
+    case "disabled":
+      return /* @__PURE__ */ import_react.default.createElement(import_DisabledView.default, { ...props });
+    default:
+      return null;
+  }
+};
+var PisellLongText_default = import_react.default.memo(PisellLongText, (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 = {
+  PisellLongText
+});

package/lib/components/pisellLongText/PisellLongText.less

@@ -0,0 +1,60 @@
+/**
+ * PisellLongText 组件样式
+ */
+
+.pisell-long-text {
+  &-edit {
+    position: relative;
+    width: 100%;
+
+    // 基于 Figma 设计规范的 TextArea 样式
+    .ant-input {
+      padding: 12px 14px; // Figma: 垂直12px，水平14px（比 Input 小2px）
+    }
+  }
+
+  &-error {
+    margin-top: 4px;
+    font-size: 12px;
+    color: #ff4d4f;
+    line-height: 1.5;
+    animation: fadeIn 0.3s ease-in-out;
+  }
+
+  &-read {
+    .ant-typography {
+      margin-bottom: 0;
+    }
+  }
+
+  &-expand-btn {
+    padding: 0;
+    height: auto;
+    font-size: 14px;
+    margin-top: 8px;
+  }
+
+  &-word-count {
+    margin-top: 8px;
+    font-size: 12px;
+    color: #667085;
+    text-align: right;
+  }
+
+  &-disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+// 错误提示淡入动画
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

package/lib/components/pisellLongText/PisellLongText.stories.d.ts

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellLongText } from './PisellLongText';
+/**
+ * PisellLongText 是一个多行文本输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 展开/折叠功能（只读态）
+ * - 自动高度调整
+ * - 完整的校验框架
+ * - 字数统计
+ */
+declare const meta: Meta<typeof PisellLongText>;
+export default meta;
+declare type Story = StoryObj<typeof PisellLongText>;
+/**
+ * 基础编辑态示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态示例 - 短文本
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 展开/折叠功能（核心）
+ */
+export declare const ReadModeExpandCollapse: Story;
+/**
+ * 只读态 - 自定义展开/收起文案
+ */
+export declare const ReadModeCustomExpandText: Story;
+/**
+ * 只读态 - 禁用展开功能
+ */
+export declare const ReadModeDisableExpand: Story;
+/**
+ * 只读态 - 字数统计
+ */
+export declare const ReadModeWithWordCount: Story;
+/**
+ * 只读态 - 展开 + 字数统计
+ */
+export declare const ReadModeExpandAndWordCount: Story;
+/**
+ * 禁用态示例
+ */
+export declare const Disabled: Story;
+/**
+ * 编辑态 - 默认行数
+ */
+export declare const EditModeCustomRows: Story;
+/**
+ * 编辑态 - 自动高度（boolean）
+ */
+export declare const EditModeAutoSize: Story;
+/**
+ * 编辑态 - 自动高度（范围限定）
+ */
+export declare const EditModeAutoSizeRange: Story;
+/**
+ * 编辑态 - minRows 和 maxRows
+ */
+export declare const EditModeMinMaxRows: Story;
+/**
+ * 编辑态 - 字数统计
+ */
+export declare const EditModeWithCount: Story;
+/**
+ * 编辑态 - 清空按钮
+ */
+export declare const EditModeWithClear: Story;
+/**
+ * 必填校验
+ */
+export declare const Required: Story;
+/**
+ * 长度校验
+ */
+export declare const LengthValidation: Story;
+/**
+ * 自定义校验 - 段落数量限制
+ */
+export declare const CustomValidatorParagraphs: Story;
+/**
+ * 组合校验
+ */
+export declare const CombinedValidation: Story;
+/**
+ * 自动高度 + 字数统计
+ */
+export declare const AutoSizeWithCount: Story;
+/**
+ * 保留换行和空格
+ */
+export declare const PreserveWhitespace: Story;
+/**
+ * 自定义样式（只读态）
+ */
+export declare const CustomStyle: Story;
+/**
+ * 完整功能示例
+ */
+export declare const FullFeatures: Story;
+/**
+ * 所有展开/折叠场景对比
+ */
+export declare const AllExpandScenarios: Story;
+/**
+ * 所有自动高度场景对比
+ */
+export declare const AllAutoSizeScenarios: Story;
+/**
+ * 校验场景对比
+ */
+export declare const ValidationScenarios: Story;
+/**
+ * 边界情况测试
+ */
+export declare const EdgeCases: Story;
+/**
+ * 完整功能演示
+ */
+export declare const CompleteExample: Story;