@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/pagination/stories.tsx

@@ -0,0 +1,319 @@
+import * as React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Pagination } from './index';
+
+const meta: Meta<typeof Pagination> = {
+  title: '导航 · Navigation/Pagination 翻页器',
+  component: Pagination,
+  tags: ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          '分页 Pagination — 在大量内容中按页切换浏览。提供 `Pagination`（高阶 props 化）+ primitives（自由组合）两套 API。支持 `size`(sm/md/lg)、`type`(normal/simple/mini)、`showSizeChanger`、`showQuickJumper`、`showFirstLast`、`totalRender` 等能力。',
+      },
+    },
+  },
+  argTypes: {
+    total: { control: 'number' },
+    pageSize: { control: 'number' },
+    siblingCount: { control: 'number' },
+    showFirstLast: { control: 'boolean' },
+    showTotal: { control: 'boolean' },
+    showSizeChanger: { control: 'boolean' },
+    showQuickJumper: { control: 'boolean' },
+    size: { control: 'inline-radio', options: ['sm', 'md', 'lg'] },
+    type: { control: 'inline-radio', options: ['normal', 'simple', 'mini'] },
+  },
+  args: {
+    total: 245,
+    pageSize: 10,
+    siblingCount: 5,
+    size: 'md',
+    type: 'normal',
+  },
+  decorators: [(Story) => <div className="w-full max-w-3xl">{Story()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof Pagination>;
+
+// ─── 受控（Playground）───────────────────────────────────────────────────────
+
+/** 完全可交互的受控分页，可通过 Controls 面板调整所有参数。 */
+export const Playground: Story = {
+  render: (args) => {
+    const [page, setPage] = React.useState(args.current ?? 1);
+    return (
+      <Pagination
+        {...args}
+        current={page}
+        showQuickJumper
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+// ─── 非受控 ─────────────────────────────────────────────────────────────────
+
+/** 非受控模式，组件自行管理当前页状态。 */
+export const Uncontrolled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => <Pagination total={245} defaultCurrent={2} />,
+};
+
+// ─── type 三态 ───────────────────────────────────────────────────────────────
+
+/** 三种类型对比：normal（完整）/ simple（简化）/ mini（极简）。 */
+export const Types: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [p1, setP1] = React.useState(3);
+    const [p2, setP2] = React.useState(3);
+    const [p3, setP3] = React.useState(3);
+    return (
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">normal</span>
+          <Pagination
+            total={245}
+            type="normal"
+            current={p1}
+            onChange={(p) => setP1(p)}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">simple</span>
+          <Pagination
+            total={245}
+            type="simple"
+            current={p2}
+            onChange={(p) => setP2(p)}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">mini</span>
+          <Pagination
+            total={245}
+            type="mini"
+            current={p3}
+            onChange={(p) => setP3(p)}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// ─── size 三档 ───────────────────────────────────────────────────────────────
+
+/** 三档尺寸对比：sm(h-6) / md(h-8) / lg(h-9)。 */
+export const Sizes: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [p1, setP1] = React.useState(3);
+    const [p2, setP2] = React.useState(3);
+    const [p3, setP3] = React.useState(3);
+    return (
+      <div className="flex flex-col gap-6">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">sm</span>
+          <Pagination
+            total={245}
+            size="sm"
+            current={p1}
+            onChange={(p) => setP1(p)}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">md</span>
+          <Pagination
+            total={245}
+            size="md"
+            current={p2}
+            onChange={(p) => setP2(p)}
+          />
+        </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-muted-foreground">lg</span>
+          <Pagination
+            total={245}
+            size="lg"
+            current={p3}
+            onChange={(p) => setP3(p)}
+          />
+        </div>
+      </div>
+    );
+  },
+};
+
+// ─── 矩阵 type × size ──────────────────────────────────────────────────────
+
+/** type × size 的完整矩阵（9 个组合），用于一眼比对视觉密度。 */
+export const Matrix: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const types: Array<'normal' | 'simple' | 'mini'> = [
+      'normal',
+      'simple',
+      'mini',
+    ];
+    const sizes: Array<'sm' | 'md' | 'lg'> = ['sm', 'md', 'lg'];
+    return (
+      <div className="flex flex-col gap-6">
+        {types.map((t) => (
+          <div key={t} className="flex flex-col gap-3">
+            <div className="text-sm font-medium text-muted-foreground">
+              type = {t}
+            </div>
+            {sizes.map((s) => (
+              <MatrixRow key={`${t}-${s}`} type={t} size={s} />
+            ))}
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+const MatrixRow = ({
+  type,
+  size,
+}: {
+  type: 'normal' | 'simple' | 'mini';
+  size: 'sm' | 'md' | 'lg';
+}) => {
+  const [page, setPage] = React.useState(3);
+  return (
+    <div className="flex items-center gap-4">
+      <span className="w-8 shrink-0 text-xs text-muted-foreground">{size}</span>
+      <Pagination
+        total={245}
+        type={type}
+        size={size}
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    </div>
+  );
+};
+
+// ─── 每页显示选择器 ──────────────────────────────────────────────────────────
+
+/** 启用 showSizeChanger，用户可切换每页显示条数。 */
+export const WithPageSizeSelector: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(1);
+    const [size, setSize] = React.useState(10);
+    return (
+      <Pagination
+        total={1234}
+        current={page}
+        pageSize={size}
+        showSizeChanger
+        pageSizeOptions={[10, 20, 50, 100]}
+        onChange={(p, s) => {
+          setPage(p);
+          setSize(s);
+        }}
+        onPageSizeChange={(s) => setSize(s)}
+      />
+    );
+  },
+};
+
+// ─── 跳转 + 首末页 ──────────────────────────────────────────────────────────
+
+/** 启用跳转输入框 + 首末页快捷按钮 + showSizeChanger 的完整形态。 */
+export const WithJumpAndFirstLast: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(15);
+    return (
+      <Pagination
+        total={1234}
+        current={page}
+        showFirstLast
+        showQuickJumper
+        showSizeChanger
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+// ─── 显示总数 ────────────────────────────────────────────────────────────────
+
+/** 自定义 totalRender 函数，展示 "1-10 of 245" 格式。 */
+export const CustomTotal: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(1);
+    return (
+      <Pagination
+        total={245}
+        current={page}
+        onChange={(p) => setPage(p)}
+        totalRender={(t, [s, e]) => `${s}–${e} of ${t}`}
+      />
+    );
+  },
+};
+
+// ─── 隐藏跳转 ────────────────────────────────────────────────────────────────
+
+/** showQuickJumper=false 时强制隐藏跳转框（即使页数较多）。 */
+export const HideJump: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(1);
+    return (
+      <Pagination
+        total={500}
+        current={page}
+        showQuickJumper={false}
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+// ─── 少量数据 ────────────────────────────────────────────────────────────────
+
+/** 数据少于一页时的展示效果（仅 1 页）。 */
+export const FewItems: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(1);
+    return <Pagination total={5} current={page} onChange={(p) => setPage(p)} />;
+  },
+};
+
+// ─── 大数据量 ────────────────────────────────────────────────────────────────
+
+/** 大数据量（10000 条）带 showSizeChanger 和跳转。 */
+export const LargeDataset: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(50);
+    const [size, setSize] = React.useState(20);
+    return (
+      <Pagination
+        total={10000}
+        current={page}
+        pageSize={size}
+        showSizeChanger
+        showQuickJumper
+        showFirstLast
+        onChange={(p, s) => {
+          setPage(p);
+          setSize(s);
+        }}
+        onPageSizeChange={(s) => setSize(s)}
+      />
+    );
+  },
+};