@pisell/materials 1.8.20 → 1.8.21

package/lib/components/pisellDateTimeDisplay/PisellDateTimeDisplay.stories.d.ts

@@ -0,0 +1,195 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellDateTimeDisplay from './PisellDateTimeDisplay';
+/**
+ * PisellDateTimeDisplay 组件 Storybook
+ */
+declare const meta: Meta<typeof PisellDateTimeDisplay>;
+export default meta;
+declare type Story = StoryObj<typeof PisellDateTimeDisplay>;
+/**
+ * 基础示例
+ */
+export declare const Basic: Story;
+/**
+ * 水平布局（默认）
+ */
+export declare const HorizontalLayout: Story;
+/**
+ * 垂直布局
+ */
+export declare const VerticalLayout: Story;
+/**
+ * 单行布局
+ */
+export declare const InlineLayout: Story;
+/**
+ * 单行布局 - 自定义分隔符
+ */
+export declare const InlineWithCustomSeparator: Story;
+/**
+ * 中文完整日期格式：2025-12-31 - 2:00 周四
+ * 单行、日期在前、日期与时间之间 " - "、时间与星期之间空格
+ */
+export declare const InlineDateTimeWeekdayZh: Story;
+/**
+ * 12小时制
+ */
+export declare const Time12Hour: Story;
+/**
+ * 显示秒
+ */
+export declare const TimeWithSeconds: Story;
+/**
+ * 12小时制 + 显示秒
+ */
+export declare const Time12HourWithSeconds: Story;
+/**
+ * 小时补零
+ */
+export declare const TimePadHour: Story;
+/**
+ * 只显示小时
+ */
+export declare const TimeOnlyHour: Story;
+/**
+ * 完整日期（Y-M-D）
+ */
+export declare const DateFullYMD: Story;
+/**
+ * 月-日-年 格式
+ */
+export declare const DateMDY: Story;
+/**
+ * 日-月-年 格式
+ */
+export declare const DateDMY: Story;
+/**
+ * 中文日期带单位
+ */
+export declare const DateChinese: Story;
+/**
+ * 相对日：今天/昨天/明天
+ * 与「当前日期」同天显示「今天」，前一天「昨天」，后一天「明天」；其他日期仍按原格式。
+ * 参考日为 dayjs()，随时间变化：例如 2 月 4 日当天，2 月 4 日显示「今天」，2 月 3 日显示「昨天」。
+ */
+export declare const RelativeDay: Story;
+/**
+ * 相对日 - 英文
+ */
+export declare const RelativeDayEn: Story;
+/**
+ * 相对日 - 自定义文案
+ */
+export declare const RelativeDayCustomLabels: Story;
+/**
+ * 英文完整月份
+ */
+export declare const DateFullMonth: Story;
+/**
+ * 自定义分隔符
+ */
+export declare const DateCustomSeparator: Story;
+/**
+ * 星期完整展示（英文）
+ */
+export declare const WeekdayFull: Story;
+/**
+ * 星期完整展示（中文）
+ */
+export declare const WeekdayFullChinese: Story;
+/**
+ * 星期单字母展示
+ */
+export declare const WeekdaySingleLetter: Story;
+/**
+ * 只显示时间
+ */
+export declare const OnlyTime: Story;
+/**
+ * 只显示日期
+ */
+export declare const OnlyDate: Story;
+/**
+ * 自定义字段顺序
+ */
+export declare const CustomFieldOrder: Story;
+/**
+ * 自定义格式化 - ISO 格式
+ */
+export declare const CustomFormatISO: Story;
+/**
+ * 自定义格式化 - 中文格式
+ */
+export declare const CustomFormatChinese: Story;
+/**
+ * 自定义格式化 - 包含星期
+ */
+export declare const CustomFormatWithWeekday: Story;
+/**
+ * 中文环境
+ */
+export declare const LocaleChinese: Story;
+/**
+ * 英文环境
+ */
+export declare const LocaleEnglish: Story;
+/**
+ * 自定义容器样式
+ */
+export declare const CustomContainerStyle: Story;
+/**
+ * 自定义文本样式
+ */
+export declare const CustomTextStyle: Story;
+/**
+ * 居中对齐
+ */
+export declare const CenterAlign: Story;
+/**
+ * 禁用自动刷新
+ */
+export declare const DisableRefresh: Story;
+/**
+ * 自定义刷新间隔（5秒）
+ */
+export declare const CustomRefreshInterval: Story;
+/**
+ * 应用场景 - 后台首页
+ */
+export declare const ScenarioDashboard: Story;
+/**
+ * 应用场景 - 状态栏
+ */
+export declare const ScenarioStatusBar: Story;
+/**
+ * 应用场景 - 欢迎页
+ */
+export declare const ScenarioWelcome: Story;
+/**
+ * 应用场景 - 大屏展示
+ */
+export declare const ScenarioLargeScreen: Story;
+/**
+ * 多语言对比
+ */
+export declare const MultiLanguage: Story;
+/**
+ * 时间格式对比
+ */
+export declare const TimeFormats: Story;
+/**
+ * 日期格式对比
+ */
+export declare const DateFormats: Story;
+/**
+ * 星期格式对比
+ */
+export declare const WeekdayFormats: Story;
+/**
+ * 所有布局对比
+ */
+export declare const AllLayouts: Story;
+/**
+ * 深色主题
+ */
+export declare const DarkTheme: Story;

package/lib/components/pisellDateTimeDisplay/components/DateDisplay.d.ts

@@ -0,0 +1,48 @@
+import React from 'react';
+import { type Dayjs } from 'dayjs';
+import type { DateFormatConfig, TextStyleConfig } from '../types';
+/**
+ * DateDisplay 组件 Props
+ */
+export interface DateDisplayProps {
+    /**
+     * 日期对象
+     */
+    date: Dayjs;
+    /**
+     * 日期格式配置
+     */
+    format?: DateFormatConfig;
+    /**
+     * 参考日期（用于「今天/昨天/明天」判定，默认当前时间 dayjs()）
+     */
+    referenceDate?: Dayjs;
+    /**
+     * 文本样式
+     */
+    style?: TextStyleConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * 日期展示组件
+ *
+ * @description
+ * - 格式化并展示日期
+ * - 支持 showRelativeDay：今天/昨天/明天时用相对日替换原日期展示，不展示具体日期
+ * - 支持不同的日期顺序（YMD/MDY/DMY）
+ * - 支持年月日字段显隐
+ * - 支持中文单位（年、月、日）
+ * - 支持英文月份格式（简写/完整/数字）
+ *
+ * @example
+ * <DateDisplay
+ *   date={dayjs()}
+ *   format={{ order: 'YMD', showYear: true, showChineseUnit: true }}
+ *   style={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+ * />
+ */
+export declare const DateDisplay: React.FC<DateDisplayProps>;
+export default DateDisplay;

package/lib/components/pisellDateTimeDisplay/components/TimeDisplay.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+import type { TimeFormatConfig, TextStyleConfig } from '../types';
+/**
+ * TimeDisplay 组件 Props
+ */
+export interface TimeDisplayProps {
+    /**
+     * 时间对象
+     */
+    time: Dayjs;
+    /**
+     * 时间格式配置
+     */
+    format?: TimeFormatConfig;
+    /**
+     * 文本样式
+     */
+    style?: TextStyleConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * 时间展示组件
+ *
+ * @description
+ * - 格式化并展示时间
+ * - 支持 12/24 小时制
+ * - 支持显示秒
+ * - 支持小时补零
+ *
+ * @example
+ * <TimeDisplay
+ *   time={dayjs()}
+ *   format={{ use12Hour: false, showSeconds: true }}
+ *   style={{ fontSize: 24, fontWeight: 600, color: '#000' }}
+ * />
+ */
+export declare const TimeDisplay: React.FC<TimeDisplayProps>;
+export default TimeDisplay;

package/lib/components/pisellDateTimeDisplay/components/WeekdayDisplay.d.ts

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Dayjs } from 'dayjs';
+import type { WeekdayFormatConfig, TextStyleConfig } from '../types';
+/**
+ * WeekdayDisplay 组件 Props
+ */
+export interface WeekdayDisplayProps {
+    /**
+     * 日期对象（用于获取星期）
+     */
+    weekday: Dayjs;
+    /**
+     * 星期格式配置
+     */
+    format?: WeekdayFormatConfig;
+    /**
+     * 文本样式
+     */
+    style?: TextStyleConfig;
+    /**
+     * 自定义类名
+     */
+    className?: string;
+}
+/**
+ * 星期展示组件
+ *
+ * @description
+ * - 格式化并展示星期
+ * - 支持完整/缩写/单字母模式
+ * - 自动支持中英文
+ *
+ * @example
+ * // 默认（缩写）
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ full: false, singleLetter: false }}
+ *   style={{ fontSize: 18, fontWeight: 400, color: '#666' }}
+ * />
+ * // => "Sat" / "周六"
+ *
+ * // 完整
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ full: true }}
+ * />
+ * // => "Saturday" / "星期六"
+ *
+ * // 单字母
+ * <WeekdayDisplay
+ *   weekday={dayjs()}
+ *   format={{ singleLetter: true }}
+ * />
+ * // => "S" / "六"
+ */
+export declare const WeekdayDisplay: React.FC<WeekdayDisplayProps>;
+export default WeekdayDisplay;

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

@@ -0,0 +1,6 @@
+export { TimeDisplay } from './TimeDisplay';
+export { DateDisplay } from './DateDisplay';
+export { WeekdayDisplay } from './WeekdayDisplay';
+export type { TimeDisplayProps } from './TimeDisplay';
+export type { DateDisplayProps } from './DateDisplay';
+export type { WeekdayDisplayProps } from './WeekdayDisplay';

package/lib/components/pisellDateTimeDisplay/formats/dateTimeDisplayFormats.d.ts

@@ -0,0 +1,7 @@
+import type { DateTimeDisplayFormatPreset } from '../types';
+/**
+ * PisellDateTimeDisplay 按语言预设的格式
+ * - zh-cn：完整日期 - 时间 星期（如 2025-12-31 - 2:00 周四）；默认不展示相对日，可传 dateFormat.showRelativeDay: true 开启
+ * - en：时间 星期, 日期（如 2:00 Sat, 21 Mar, 2026）；默认不展示相对日，可传 dateFormat.showRelativeDay: true 开启
+ */
+export declare const DATETIME_DISPLAY_FORMATS: Record<string, Partial<DateTimeDisplayFormatPreset>>;

package/lib/components/pisellDateTimeDisplay/formats/index.d.ts

@@ -0,0 +1 @@
+export { DATETIME_DISPLAY_FORMATS } from './dateTimeDisplayFormats';

package/lib/components/pisellDateTimeDisplay/hooks/index.d.ts

@@ -0,0 +1,2 @@
+export { useCurrentTime } from './useCurrentTime';
+export type { UseCurrentTimeOptions } from './useCurrentTime';

package/lib/components/pisellDateTimeDisplay/hooks/useCurrentTime.d.ts

@@ -0,0 +1,46 @@
+import { Dayjs } from 'dayjs';
+/**
+ * useCurrentTime Hook 配置项
+ */
+export interface UseCurrentTimeOptions {
+    /**
+     * 刷新间隔（毫秒）
+     * @default 60000
+     */
+    refreshInterval?: number;
+    /**
+     * 是否禁用自动刷新
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * dayjs locale
+     * @default 优先使用全局配置，其次使用 i18n 当前语言（getCurrentLocale）
+     * @example 'zh-CN' | 'zh-HK' | 'en' | 'en-US' | 'ja'
+     */
+    locale?: string;
+    /**
+     * 时间更新回调
+     */
+    onUpdate?: (time: Dayjs) => void;
+}
+/**
+ * 管理当前时间状态的自定义 Hook
+ *
+ * @description
+ * - 自动创建定时器刷新时间
+ * - 支持自定义刷新间隔
+ * - 支持国际化（locale）：优先级为 用户指定 > 全局配置 > i18n 当前语言
+ * - 组件卸载时自动清除定时器
+ *
+ * @example
+ * const currentTime = useCurrentTime({
+ *   refreshInterval: 1000,
+ *   locale: 'zh-CN',
+ *   onUpdate: (time) => console.log(time.format())
+ * });
+ *
+ * @param options 配置项
+ * @returns 当前时间（Dayjs 对象）
+ */
+export declare function useCurrentTime(options?: UseCurrentTimeOptions): Dayjs;

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

@@ -0,0 +1,3 @@
+export { default as PisellDateTimeDisplay } from './PisellDateTimeDisplay';
+export type { PisellDateTimeDisplayProps, LayoutDirection, DateOrder, TextAlign, FieldType, TimeFormatConfig, DateFormatConfig, WeekdayFormatConfig, FieldConfig, TextStyleConfig, ContainerStyleConfig, } from './types';
+export { default } from './PisellDateTimeDisplay';