@pisell/materials 1.0.1023 → 1.8.1

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

@@ -0,0 +1,35 @@
+import type { CountryCode, PisellPhoneProps } from '../types';
+/**
+ * 根据国家码获取国旗 emoji
+ * @param countryCode 国家码
+ * @returns 国旗 emoji
+ */
+export declare function getCountryFlag(countryCode: string): string;
+/**
+ * 根据国家码获取最大长度
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 最大长度
+ */
+export declare function getMaxLength(countryCode: string, countryCodes: CountryCode[]): number;
+/**
+ * 根据国家码获取配置
+ * @param countryCode 国家码
+ * @param countryCodes 国家码列表
+ * @returns 国家码配置
+ */
+export declare function getCountryConfig(countryCode: string, countryCodes: CountryCode[]): CountryCode | undefined;
+/**
+ * 获取最终的国家码列表
+ *
+ * 优先级：
+ * 1. props.countryCodes（完全自定义）
+ * 2. props.availableCountryCodes（从预设中过滤）
+ * 3. PRESET_COUNTRY_CODES（默认全部24个）
+ *
+ * 然后根据 props.commonCountryCodes 排序（置顶）
+ *
+ * @param props 组件 Props
+ * @returns 国家码列表
+ */
+export declare function getCountryCodes(props: PisellPhoneProps): CountryCode[];

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

@@ -0,0 +1,6 @@
+/**
+ * 电话号码工具函数导出
+ */
+export { formatPhone, formatChinaMobile, formatUSPhone, maskPhone, detectPhoneType } from './phoneFormatter';
+export { validatePhone } from './phoneValidator';
+export { getCountryFlag, getMaxLength, getCountryConfig, getCountryCodes, } from './countryCodeHelper';

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/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/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.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/index.d.ts

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

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

@@ -0,0 +1,124 @@
+import type { CSSProperties, ReactNode } from 'react';
+/**
+ * 从 @pisell/utils 重新导出公共类型
+ */
+export type { DisplayState } from '@pisell/utils';
+/**
+ * PisellRating 组件 Props 类型定义
+ *
+ * 基于 Ant Design Rate 组件，独立实现
+ */
+export interface PisellRatingProps {
+    /**
+     * 显示模式
+     * @default 'edit'
+     */
+    mode?: 'read' | 'edit';
+    /**
+     * 是否禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * 当前评分值（受控）
+     */
+    value?: number;
+    /**
+     * 默认评分值（非受控）
+     */
+    defaultValue?: number;
+    /**
+     * 评分变更回调
+     */
+    onChange?: (value: number) => void;
+    /**
+     * 星星数量
+     * @default 5
+     */
+    count?: number;
+    /**
+     * 最大评分值（同 count，为了与 Number 系列保持一致）
+     * @default 5
+     */
+    max?: number;
+    /**
+     * 是否允许半星评分
+     * @default false
+     */
+    allowHalf?: boolean;
+    /**
+     * 是否允许清除评分
+     * @default true
+     */
+    allowClear?: boolean;
+    /**
+     * 自定义字符
+     * @default StarFilled
+     */
+    character?: ReactNode | ((props: {
+        index: number;
+        value: number;
+    }) => ReactNode);
+    /**
+     * 评分描述文本数组
+     * @example ['很差', '差', '一般', '好', '很好']
+     */
+    tooltips?: string[];
+    /**
+     * 是否显示数值文本
+     * @default false
+     */
+    showValue?: boolean;
+    /**
+     * 是否显示评分人数
+     * @default false
+     */
+    showCount?: boolean;
+    /**
+     * 评分人数
+     */
+    reviewCount?: number;
+    /**
+     * 星星尺寸（仅影响样式）
+     * @default 20
+     */
+    size?: number;
+    /**
+     * 星星颜色（已选中）
+     * @default '#fadb14'
+     */
+    color?: string;
+    /**
+     * 星星颜色（未选中）
+     * @default '#d9d9d9'
+     */
+    unselectedColor?: string;
+    /**
+     * 悬停评分值变化回调
+     */
+    onHoverChange?: (value: number) => void;
+    /**
+     * 聚焦回调
+     */
+    onFocus?: () => void;
+    /**
+     * 失焦回调
+     */
+    onBlur?: () => void;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+    /**
+     * 自定义样式
+     */
+    style?: CSSProperties;
+    /**
+     * ARIA 标签
+     */
+    'aria-label'?: string;
+    /**
+     * HTML id 属性
+     */
+    id?: string;
+}

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

@@ -0,0 +1,22 @@
+import React from 'react';
+import { PisellContextType } from '../pisell-config-provider/context';
+import './index.less';
+export interface PisellRowProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+    platform?: PisellContextType['platform'];
+    gap?: number;
+    padding?: number;
+    leftContent?: React.ReactNode;
+    rightContent?: React.ReactNode;
+    centerContent?: React.ReactNode;
+    centerContentFill?: boolean;
+}
+/**
+ * @title: Pisell Row
+ * @description:  左中右布局组件
+ * @param {PisellRowProps} props
+ * @return {*}
+ * @Author: zhiwei.Wang
+ * @Date: 2024-08-16 10:38
+ */
+declare const PisellRow: (props: PisellRowProps) => React.JSX.Element;
+export default PisellRow;

package/lib/components/pisellSingleLineText/PisellSingleLineText.d.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from './types';
+import './PisellSingleLineText.less';
+/**
+ * PisellSingleLineText 单行文本组件
+ *
+ * 通用的单行文本输入/展示组件，支持只读、编辑、禁用三种状态。
+ * 基于 Ant Design Input 组件开发，提供完整的校验框架。
+ *
+ * @param props 组件 Props
+ *
+ * @example
+ * // 受控模式
+ * const [value, setValue] = useState('');
+ * <PisellSingleLineText
+ *   value={value}
+ *   onChange={(v) => setValue(v)}
+ *   placeholder="请输入"
+ * />
+ *
+ * @example
+ * // 非受控模式
+ * <PisellSingleLineText
+ *   defaultValue="初始值"
+ *   required
+ *   minLength={3}
+ * />
+ *
+ * @example
+ * // 只读态
+ * <PisellSingleLineText
+ *   mode="read"
+ *   value="这是一段很长的文本内容"
+ *   ellipsis
+ *   showTooltip
+ * />
+ */
+export declare const PisellSingleLineText: React.FC<PisellSingleLineTextProps>;
+declare const _default: React.NamedExoticComponent<PisellSingleLineTextProps>;
+export default _default;

package/lib/components/pisellSingleLineText/PisellSingleLineText.less

@@ -1,6 +1,5 @@
 /**
  * PisellSingleLineText 组件样式
- * 不依赖全局 antd token，使用内置样式
  */
 
 .pisell-single-line-text {
@@ -8,154 +7,16 @@
     position: relative;
     width: 100%;
 
-    // Input 组件内置样式，覆盖 antd token 配置
-    .ant-input,
-    .ant-input-affix-wrapper {
-      // 基础样式（基于 Figma 设计规范）
-      font-size: 16px !important;
-      line-height: 24px !important;
-      
-      // 边框和圆角
-      border-radius: 8px !important;
-      border: 1px solid #D0D5DD !important; // Gray/300
-      
-      // 内边距（Figma: 16px 12px）
-      padding: 12px 16px !important;
-      height: 48px !important; // 12px + 24px + 12px = 48px
-      
-      // 颜色
-      color: #101828 !important; // Gray/900 - 输入文本
-      background-color: #FFFFFF !important; // 背景色
-      
-      &::placeholder {
-        color: #667085 !important; // Gray/500 - 占位符
-      }
-      
-      // 聚焦态
-      &:focus,
-      &:focus-within {
-        border-color: #D6BBFB !important; // Primary/300
-        box-shadow: 0 0 0 4px #F4EBFF !important; // Primary/100
-        outline: none !important;
-      }
-      
-      // Hover 态
-      &:hover:not(:focus):not(:focus-within):not([disabled]) {
-        border-color: #B692F6 !important; // Primary/400
-      }
-      
-      // 禁用态
-      &[disabled],
-      &.ant-input-disabled {
-        background-color: #F9FAFB !important; // Gray/50
-        color: #98A2B3 !important; // Gray/400
-        border-color: #D0D5DD !important;
-        cursor: not-allowed !important;
-      }
-    }
-    
-    // 前后缀容器样式
-    .ant-input-affix-wrapper {
-      padding: 0 !important;
-      
-      .ant-input-prefix {
-        margin-right: 8px;
-        margin-left: 16px;
-        color: #667085; // Gray/500
-        font-size: 16px;
-      }
-      
-      .ant-input-suffix {
-        margin-left: 8px;
-        margin-right: 16px;
-        color: #667085; // Gray/500
-        font-size: 16px;
-      }
-      
-      .ant-input {
-        padding: 12px 0 !important;
-        border: none !important;
-        box-shadow: none !important;
-        
-        &:focus {
-          box-shadow: none !important;
-        }
-      }
-    }
-    
-    // 前后置标签样式
-    .ant-input-group-wrapper {
-      .ant-input-group-addon {
-        background-color: #FFFFFF !important;
-        border: 1px solid #D0D5DD !important;
-        color: #344054 !important; // Gray/700
-        font-size: 16px !important;
-        padding: 12px 16px !important;
-        
-        &:first-child {
-          border-right: none !important;
-          border-radius: 8px 0 0 8px !important;
-        }
-        
-        &:last-child {
-          border-left: none !important;
-          border-radius: 0 8px 8px 0 !important;
-        }
-      }
-      
-      .ant-input-wrapper {
-        .ant-input,
-        .ant-input-affix-wrapper {
-          border-radius: 0 !important;
-          
-          &:first-child {
-            border-radius: 8px 0 0 8px !important;
-          }
-          
-          &:last-child {
-            border-radius: 0 8px 8px 0 !important;
-          }
-        }
-      }
-    }
-    
-    // 清空按钮样式
-    .ant-input-clear-icon {
-      color: #667085 !important; // Gray/500
-      font-size: 14px !important;
-      
-      &:hover {
-        color: #344054 !important; // Gray/700
-      }
-    }
-    
-    // 字数统计样式
-    .ant-input-show-count-suffix {
-      color: #667085 !important; // Gray/500
-      font-size: 14px !important;
-    }
-    
-    // 错误状态样式
-    .ant-input-status-error,
-    .ant-input-affix-wrapper-status-error {
-      border-color: #FDA29B !important; // Error/300
-      
-      &:focus,
-      &:focus-within {
-        border-color: #F97066 !important; // Error/400
-        box-shadow: 0 0 0 4px #FEE4E2 !important; // Error/100
-      }
-      
-      &:hover:not(:focus):not(:focus-within) {
-        border-color: #F97066 !important; // Error/400
-      }
+    // 可以在这里添加自定义输入框样式
+    .ant-input {
+      // 保持 Ant Design 默认样式
     }
   }
 
   &-error {
     margin-top: 4px;
     font-size: 12px;
-    color: #D92D20; // Error/600
+    color: #ff4d4f;
     line-height: 1.5;
     animation: fadeIn 0.3s ease-in-out;
   }

package/lib/components/pisellSingleLineText/PisellSingleLineText.stories.d.ts

@@ -0,0 +1,102 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { PisellSingleLineText } from './PisellSingleLineText';
+/**
+ * PisellSingleLineText 是一个通用的单行文本输入/展示组件。
+ *
+ * ## 功能特性
+ * - 支持三种状态：只读、编辑、禁用
+ * - 完整的校验框架
+ * - 受控/非受控模式
+ * - 丰富的配置项
+ */
+declare const meta: Meta<typeof PisellSingleLineText>;
+export default meta;
+declare type Story = StoryObj<typeof PisellSingleLineText>;
+/**
+ * 基础编辑态示例
+ */
+export declare const Basic: Story;
+/**
+ * 只读态示例 - 展示文本内容
+ */
+export declare const ReadMode: Story;
+/**
+ * 只读态 - 超长文本截断
+ */
+export declare const ReadModeEllipsis: Story;
+/**
+ * 禁用态示例
+ */
+export declare const Disabled: Story;
+/**
+ * 必填校验示例
+ */
+export declare const Required: Story;
+/**
+ * 长度校验示例
+ */
+export declare const LengthValidation: Story;
+/**
+ * 正则校验 - 仅数字
+ */
+export declare const PatternValidation: Story;
+/**
+ * 自定义校验函数
+ */
+export declare const CustomValidator: Story;
+/**
+ * 前缀图标
+ */
+export declare const WithPrefix: Story;
+/**
+ * 后缀文本
+ */
+export declare const WithSuffix: Story;
+/**
+ * 前置标签
+ */
+export declare const WithAddonBefore: Story;
+/**
+ * 后置标签 - 按钮
+ */
+export declare const WithAddonAfter: Story;
+/**
+ * 完整配置示例
+ */
+export declare const FullFeatures: Story;
+/**
+ * 自定义样式 - 只读态
+ */
+export declare const CustomStyle: Story;
+/**
+ * 只读态 - 普通文本样式（默认）
+ */
+export declare const DisplayVariantText: Story;
+/**
+ * 只读态 - 超链接样式
+ */
+export declare const DisplayVariantLink: Story;
+/**
+ * 只读态 - 徽标样式（圆形红色徽标）
+ */
+export declare const DisplayVariantBadge: Story;
+/**
+ * 只读态 - 徽标样式（文本内容）
+ */
+export declare const DisplayVariantBadgeText: Story;
+/**
+ * 只读态 - 标签样式（默认灰色边框）
+ */
+export declare const DisplayVariantTag: Story;
+/**
+ * 只读态 - 标签样式（自定义颜色）
+ */
+export declare const DisplayVariantTagColored: Story;
+/**
+ * 只读态 - 标签样式（可关闭）
+ */
+export declare const DisplayVariantTagClosable: Story;
+/**
+ * 展示样式对比 - 所有变体（基于 Figma 设计）
+ */
+export declare const AllDisplayVariants: Story;

package/lib/components/pisellSingleLineText/components/DisabledView.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 禁用态视图组件
+ *
+ * 负责渲染禁用态视图，基于原始 mode 渲染对应的视图，并添加禁用样式
+ *
+ * 设计规则：
+ * - 基于编辑态或只读态的视觉
+ * - 透明度 40%
+ * - 禁止所有交互行为
+ *
+ * @param props 组件 Props
+ */
+declare const DisabledView: React.FC<PisellSingleLineTextProps>;
+export default DisabledView;

package/lib/components/pisellSingleLineText/components/EditView.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { PisellSingleLineTextProps } from '../types';
+/**
+ * PisellSingleLineText 编辑态视图组件
+ *
+ * 负责渲染编辑态的输入框，基于 Ant Design Input 组件
+ *
+ * 功能：
+ * - 文本输入
+ * - 实时或失焦校验
+ * - 错误提示展示
+ * - 字数统计
+ * - 清空按钮
+ * - 前后缀、前后置标签
+ *
+ * @param props 组件 Props
+ */
+declare const EditView: React.FC<PisellSingleLineTextProps>;
+export default EditView;