@pisell/materials 6.8.9 → 6.8.10

package/lib/components/PisellSteps/PisellSteps.stories.d.ts

@@ -0,0 +1,155 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PisellSteps from './PisellSteps';
+/**
+ * PisellSteps 步骤条组件
+ *
+ * 基于 Ant Design Steps 组件进行二次封装和增强
+ * 支持多种展示样式、布局方式和丰富的交互功能
+ */
+declare const meta: Meta<typeof PisellSteps>;
+export default meta;
+declare type Story = StoryObj<typeof PisellSteps>;
+/**
+ * 基础用法 - 默认步骤条
+ */
+export declare const Default: Story;
+/**
+ * 非受控模式
+ * @description 使用 defaultCurrent 设置初始步骤
+ */
+export declare const Uncontrolled: Story;
+/**
+ * 垂直方向
+ */
+export declare const Vertical: Story;
+/**
+ * 点状步骤条
+ * @description 通过 progressDot 属性启用点状样式
+ */
+export declare const Dot: Story;
+/**
+ * 自定义点状渲染
+ * @description 使用函数自定义点状图标的渲染
+ */
+export declare const CustomProgressDot: Story;
+/**
+ * 导航步骤条
+ */
+export declare const Navigation: Story;
+/**
+ * 小尺寸
+ */
+export declare const Small: Story;
+/**
+ * 大尺寸
+ */
+export declare const Large: Story;
+/**
+ * 标签垂直布局
+ * @description 标签在图标下方显示
+ */
+export declare const LabelVertical: Story;
+/**
+ * 错误状态
+ */
+export declare const ErrorStatus: Story;
+/**
+ * 自定义步骤状态
+ * @description 每个步骤可以单独设置状态
+ */
+export declare const CustomStatus: Story;
+/**
+ * 可点击步骤
+ */
+export declare const Clickable: Story;
+/**
+ * 禁止点击已完成步骤
+ * @description 设置 allowClickFinished 为 false
+ */
+export declare const DisallowClickFinished: Story;
+/**
+ * 禁用特定步骤
+ * @description 通过 disabled 属性禁用某个步骤
+ */
+export declare const DisabledStep: Story;
+/**
+ * 自定义图标
+ */
+export declare const CustomIcon: Story;
+/**
+ * 完成图标
+ */
+export declare const FinishIcon: Story;
+/**
+ * 栅格布局
+ * @description 启用栅格布局，自定义列数
+ */
+export declare const GridLayout: Story;
+/**
+ * 自定义图标与文本间距
+ * @description 通过 itemGap 属性自定义间距
+ */
+export declare const CustomItemGap: Story;
+/**
+ * 移动端 - 完整模式
+ * @description 移动端显示完整步骤条
+ */
+export declare const MobileModeFull: Story;
+/**
+ * 移动端 - 当前步骤模式
+ * @description 只显示当前步骤信息
+ */
+export declare const MobileModeCurrent: Story;
+/**
+ * 移动端 - 自动模式
+ * @description 根据屏幕宽度自动切换显示模式
+ */
+export declare const MobileModeAuto: Story;
+/**
+ * 自定义移动端断点
+ * @description 通过 mobileBreakpoint 自定义断点宽度
+ */
+export declare const CustomMobileBreakpoint: Story;
+/**
+ * 自定义起始索引
+ * @description 通过 initial 设置起始步骤索引
+ */
+export declare const InitialIndex: Story;
+/**
+ * 隐藏特定步骤
+ * @description 通过 hidden 属性动态隐藏步骤
+ */
+export declare const HiddenStep: Story;
+/**
+ * 带子标题
+ * @description 步骤可以包含子标题
+ */
+export declare const WithSubTitle: Story;
+/**
+ * 响应式步骤条
+ * @description 开启响应式后会自动调整布局
+ */
+export declare const Responsive: Story;
+/**
+ * 完整功能演示
+ * @description 展示多种功能的组合使用
+ */
+export declare const FullFeature: Story;
+/**
+ * 多步骤流程
+ * @description 更多步骤的场景
+ */
+export declare const ManySteps: Story;
+/**
+ * 购物流程示例
+ * @description 模拟真实的购物流程
+ */
+export declare const ShoppingFlow: Story;
+/**
+ * 交互测试 - 点击步骤
+ */
+export declare const InteractionTest: Story;
+/**
+ * 交互测试 - 验证组件渲染
+ */
+export declare const RenderTest: Story;

package/lib/components/PisellSteps/PisellSteps.stories.js

@@ -0,0 +1,570 @@
+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/PisellSteps/PisellSteps.stories.tsx
+var PisellSteps_stories_exports = {};
+__export(PisellSteps_stories_exports, {
+  Clickable: () => Clickable,
+  CustomIcon: () => CustomIcon,
+  CustomItemGap: () => CustomItemGap,
+  CustomMobileBreakpoint: () => CustomMobileBreakpoint,
+  CustomProgressDot: () => CustomProgressDot,
+  CustomStatus: () => CustomStatus,
+  Default: () => Default,
+  DisabledStep: () => DisabledStep,
+  DisallowClickFinished: () => DisallowClickFinished,
+  Dot: () => Dot,
+  ErrorStatus: () => ErrorStatus,
+  FinishIcon: () => FinishIcon,
+  FullFeature: () => FullFeature,
+  GridLayout: () => GridLayout,
+  HiddenStep: () => HiddenStep,
+  InitialIndex: () => InitialIndex,
+  InteractionTest: () => InteractionTest,
+  LabelVertical: () => LabelVertical,
+  Large: () => Large,
+  ManySteps: () => ManySteps,
+  MobileModeAuto: () => MobileModeAuto,
+  MobileModeCurrent: () => MobileModeCurrent,
+  MobileModeFull: () => MobileModeFull,
+  Navigation: () => Navigation,
+  RenderTest: () => RenderTest,
+  Responsive: () => Responsive,
+  ShoppingFlow: () => ShoppingFlow,
+  Small: () => Small,
+  Uncontrolled: () => Uncontrolled,
+  Vertical: () => Vertical,
+  WithSubTitle: () => WithSubTitle,
+  default: () => PisellSteps_stories_default
+});
+module.exports = __toCommonJS(PisellSteps_stories_exports);
+var import_test = require("@storybook/test");
+var import_react = __toESM(require("react"));
+var import_icons = require("@ant-design/icons");
+var import_PisellSteps = __toESM(require("./PisellSteps"));
+var meta = {
+  title: "Components/PisellSteps",
+  component: import_PisellSteps.default,
+  parameters: {
+    layout: "padded",
+    docs: {
+      description: {
+        component: "步骤条组件，用于展示流程进度和引导用户完成操作步骤。"
+      }
+    }
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    type: {
+      control: "select",
+      options: ["default", "navigation"],
+      description: "步骤条类型"
+    },
+    direction: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "步骤条方向"
+    },
+    size: {
+      control: "select",
+      options: ["small", "default", "large"],
+      description: "步骤条尺寸"
+    },
+    status: {
+      control: "select",
+      options: ["wait", "process", "finish", "error"],
+      description: "当前步骤状态"
+    },
+    labelPlacement: {
+      control: "select",
+      options: ["horizontal", "vertical"],
+      description: "标签放置位置"
+    },
+    mobileMode: {
+      control: "select",
+      options: ["full", "current", "auto"],
+      description: "移动端显示模式"
+    },
+    clickable: {
+      control: "boolean",
+      description: "是否可点击"
+    },
+    responsive: {
+      control: "boolean",
+      description: "是否响应式"
+    },
+    progressDot: {
+      control: "boolean",
+      description: "是否使用点状步骤条"
+    },
+    gridLayout: {
+      control: "boolean",
+      description: "是否启用栅格布局"
+    },
+    enableAnchor: {
+      control: "boolean",
+      description: "是否启用锚链接"
+    }
+  }
+};
+var PisellSteps_stories_default = meta;
+var Default = {
+  args: {
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var Uncontrolled = {
+  args: {
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    defaultCurrent: 1,
+    clickable: true
+  }
+};
+var Vertical = {
+  args: {
+    direction: "vertical",
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var Dot = {
+  args: {
+    progressDot: true,
+    items: [
+      { title: "已完成", description: "这是第一步" },
+      { title: "进行中", description: "这是第二步" },
+      { title: "等待中", description: "这是第三步" }
+    ],
+    current: 1
+  }
+};
+var CustomProgressDot = {
+  args: {
+    progressDot: (dot, { index, status }) => /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          width: 24,
+          height: 24,
+          borderRadius: "50%",
+          background: status === "finish" ? "#52c41a" : status === "process" ? "#1890ff" : "#d9d9d9",
+          color: "#fff",
+          fontSize: 12
+        }
+      },
+      status === "finish" ? "✓" : index + 1
+    ),
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var Navigation = {
+  args: {
+    type: "navigation",
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var Small = {
+  args: {
+    size: "small",
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var Large = {
+  args: {
+    size: "large",
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var LabelVertical = {
+  args: {
+    labelPlacement: "vertical",
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var ErrorStatus = {
+  args: {
+    items: [
+      { title: "步骤一", status: "finish" },
+      { title: "步骤二", status: "error" },
+      { title: "步骤三" }
+    ],
+    current: 1,
+    status: "error"
+  }
+};
+var CustomStatus = {
+  args: {
+    items: [
+      { title: "步骤一", status: "finish", description: "已完成" },
+      { title: "步骤二", status: "process", description: "进行中" },
+      { title: "步骤三", status: "wait", description: "等待中" },
+      { title: "步骤四", status: "error", description: "出错了" }
+    ],
+    current: 1
+  }
+};
+var Clickable = {
+  args: {
+    clickable: true,
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1,
+    onChange: (current) => console.log("点击了步骤:", current)
+  }
+};
+var DisallowClickFinished = {
+  args: {
+    clickable: true,
+    allowClickFinished: false,
+    items: [
+      { title: "步骤一", description: "不可点击回去" },
+      { title: "步骤二", description: "当前步骤" },
+      { title: "步骤三", description: "点击前进" }
+    ],
+    current: 1,
+    onChange: (current) => console.log("点击了步骤:", current)
+  }
+};
+var DisabledStep = {
+  args: {
+    clickable: true,
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二", disabled: true },
+      { title: "步骤三" }
+    ],
+    current: 0,
+    onChange: (current) => console.log("点击了步骤:", current)
+  }
+};
+var CustomIcon = {
+  args: {
+    items: [
+      { title: "登录", icon: import_react.default.createElement(import_icons.UserOutlined) },
+      { title: "验证", icon: import_react.default.createElement(import_icons.SolutionOutlined) },
+      { title: "付款", icon: import_react.default.createElement(import_icons.LoadingOutlined) },
+      { title: "完成", icon: import_react.default.createElement(import_icons.SmileOutlined) }
+    ],
+    current: 2
+  }
+};
+var FinishIcon = {
+  args: {
+    items: [
+      { title: "步骤一", icon: import_react.default.createElement(import_icons.CheckCircleOutlined, { style: { color: "#52c41a" } }) },
+      { title: "步骤二", icon: "2" },
+      { title: "步骤三", icon: "3" }
+    ],
+    current: 1
+  }
+};
+var GridLayout = {
+  args: {
+    gridLayout: true,
+    gridColumns: 4,
+    items: [
+      { title: "步骤一", description: "描述" },
+      { title: "步骤二", description: "描述" },
+      { title: "步骤三", description: "描述" },
+      { title: "步骤四", description: "描述" }
+    ],
+    current: 1
+  }
+};
+var CustomItemGap = {
+  args: {
+    itemGap: 16,
+    items: [
+      { title: "步骤一", description: "描述文本" },
+      { title: "步骤二", description: "描述文本" },
+      { title: "步骤三", description: "描述文本" }
+    ],
+    current: 1
+  }
+};
+var MobileModeFull = {
+  args: {
+    mobileMode: "full",
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  },
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile1"
+    }
+  }
+};
+var MobileModeCurrent = {
+  args: {
+    mobileMode: "current",
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  }
+};
+var MobileModeAuto = {
+  args: {
+    mobileMode: "auto",
+    mobileBreakpoint: 744,
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  }
+};
+var CustomMobileBreakpoint = {
+  args: {
+    mobileMode: "auto",
+    mobileBreakpoint: 500,
+    items: [
+      { title: "步骤一", description: "第一步描述" },
+      { title: "步骤二", description: "第二步描述" },
+      { title: "步骤三", description: "第三步描述" }
+    ],
+    current: 1
+  }
+};
+var InitialIndex = {
+  args: {
+    initial: 1,
+    current: 2,
+    items: [
+      { title: "步骤 1" },
+      { title: "步骤 2" },
+      { title: "步骤 3" }
+    ]
+  }
+};
+var HiddenStep = {
+  args: {
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二（隐藏）", hidden: true },
+      { title: "步骤三" }
+    ],
+    current: 1
+  }
+};
+var WithSubTitle = {
+  args: {
+    items: [
+      { title: "已完成", subTitle: "00:00:05", description: "这是第一步" },
+      { title: "进行中", subTitle: "剩余 00:00:08", description: "这是第二步" },
+      { title: "等待中", subTitle: "", description: "这是第三步" }
+    ],
+    current: 1
+  }
+};
+var Responsive = {
+  args: {
+    responsive: true,
+    items: [
+      { title: "步骤一", description: "这是第一步的描述" },
+      { title: "步骤二", description: "这是第二步的描述" },
+      { title: "步骤三", description: "这是第三步的描述" }
+    ],
+    current: 1
+  }
+};
+var FullFeature = {
+  args: {
+    clickable: true,
+    responsive: true,
+    labelPlacement: "vertical",
+    items: [
+      {
+        title: "创建账户",
+        description: "填写基本信息",
+        icon: import_react.default.createElement(import_icons.UserOutlined)
+      },
+      {
+        title: "身份验证",
+        description: "验证您的身份",
+        icon: import_react.default.createElement(import_icons.SolutionOutlined)
+      },
+      {
+        title: "完成注册",
+        description: "设置完成",
+        icon: import_react.default.createElement(import_icons.SmileOutlined)
+      }
+    ],
+    current: 1,
+    onChange: (current) => console.log("当前步骤:", current)
+  }
+};
+var ManySteps = {
+  args: {
+    size: "small",
+    items: [
+      { title: "步骤 1" },
+      { title: "步骤 2" },
+      { title: "步骤 3" },
+      { title: "步骤 4" },
+      { title: "步骤 5" },
+      { title: "步骤 6" }
+    ],
+    current: 3
+  }
+};
+var ShoppingFlow = {
+  args: {
+    type: "navigation",
+    items: [
+      { title: "购物车", description: "已选 3 件商品" },
+      { title: "填写订单", description: "收货信息" },
+      { title: "支付", description: "选择支付方式" },
+      { title: "完成", description: "订单完成" }
+    ],
+    current: 1,
+    clickable: true,
+    allowClickFinished: true
+  }
+};
+var InteractionTest = {
+  args: {
+    clickable: true,
+    items: [
+      { title: "步骤一" },
+      { title: "步骤二" },
+      { title: "步骤三" }
+    ],
+    current: 1
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    const step1 = canvas.getByText("步骤一");
+    await (0, import_test.expect)(step1).toBeInTheDocument();
+    await import_test.userEvent.click(step1);
+  }
+};
+var RenderTest = {
+  args: {
+    items: [
+      { title: "步骤一", description: "描述一" },
+      { title: "步骤二", description: "描述二" },
+      { title: "步骤三", description: "描述三" }
+    ],
+    current: 0
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = (0, import_test.within)(canvasElement);
+    await (0, import_test.expect)(canvas.getByText("步骤一")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("步骤二")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("步骤三")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("描述一")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("描述二")).toBeInTheDocument();
+    await (0, import_test.expect)(canvas.getByText("描述三")).toBeInTheDocument();
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Clickable,
+  CustomIcon,
+  CustomItemGap,
+  CustomMobileBreakpoint,
+  CustomProgressDot,
+  CustomStatus,
+  Default,
+  DisabledStep,
+  DisallowClickFinished,
+  Dot,
+  ErrorStatus,
+  FinishIcon,
+  FullFeature,
+  GridLayout,
+  HiddenStep,
+  InitialIndex,
+  InteractionTest,
+  LabelVertical,
+  Large,
+  ManySteps,
+  MobileModeAuto,
+  MobileModeCurrent,
+  MobileModeFull,
+  Navigation,
+  RenderTest,
+  Responsive,
+  ShoppingFlow,
+  Small,
+  Uncontrolled,
+  Vertical,
+  WithSubTitle
+});