@teamix-evo/ui 0.2.0 → 0.3.0

package/src/components/pagination/pagination.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
 import { SimplePagination } from './pagination';
 
 const meta: Meta<typeof SimplePagination> = {
@@ -10,7 +10,7 @@ const meta: Meta<typeof SimplePagination> = {
     docs: {
       description: {
         component:
-          '分页 — 两套 API:SimplePagination(antd 风格 props 化,total / pageSize / current / onChange 即用) + shadcn primitives(完全可组合)。自动计算页码窗口 + 折叠 ellipsis + 显示总数。',
+          '**分页 Pagination —— 在大量内容中按页切换浏览,带受控/非受控 + 页码窗口折叠**。shadcn primitives(`Pagination / Content / Item / Link / Previous / Next / Ellipsis`)+ 高阶 `SimplePagination`(antd 风格 props 化)。**对齐 antd `size` / `defaultPageSize` / `pageSizeOptions` / `showSizeChanger` 与 cloud-design `type` / `pageSizeSelector` / `pageSizeList` / `showJump` 的并集**:`size` (`sm`/`md`/`lg` 对齐 Button/Input)、`type` (`normal`/`simple`/`mini`)、`pageSizeSelector`、`pageSizeList`、`showJump`、`showFirstLast`、`showTotal`、`totalRender`、`siblingCount`。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
       },
     },
   },
@@ -20,9 +20,19 @@ const meta: Meta<typeof SimplePagination> = {
     siblingCount: { control: 'number' },
     showFirstLast: { control: 'boolean' },
     showTotal: { control: 'boolean' },
+    showJump: { control: 'boolean' },
+    pageSizeSelector: { 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 },
-  decorators: [(Story) => <div className="w-[640px]">{Story()}</div>],
+  args: {
+    total: 245,
+    pageSize: 10,
+    siblingCount: 5,
+    size: 'md',
+    type: 'normal',
+  },
+  decorators: [(Story) => <div className="w-[760px]">{Story()}</div>],
 };
 
 export default meta;
@@ -31,26 +41,224 @@ type Story = StoryObj<typeof SimplePagination>;
 export const Playground: Story = {
   render: (args) => {
     const [page, setPage] = React.useState(args.current ?? 1);
-    return <SimplePagination {...args} current={page} onChange={setPage} />;
+    return (
+      <SimplePagination
+        {...args}
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+// ─── size 三档 ────────────────────────────────────────────────────────────────
+
+export const SizeSmall: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    return (
+      <SimplePagination
+        total={245}
+        size="sm"
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+export const SizeMedium: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    return (
+      <SimplePagination
+        total={245}
+        size="md"
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+export const SizeLarge: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    return (
+      <SimplePagination
+        total={245}
+        size="lg"
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+// ─── type 三态 ────────────────────────────────────────────────────────────────
+
+export const TypeNormal: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    return (
+      <SimplePagination
+        total={245}
+        type="normal"
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+export const TypeSimple: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    return (
+      <SimplePagination
+        total={245}
+        type="simple"
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    );
   },
 };
 
-export const FirstLast: Story = {
+export const TypeMini: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(3);
+    return (
+      <SimplePagination
+        total={245}
+        type="mini"
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    );
+  },
+};
+
+// ─── 矩阵:type × size(共 9 个组合)─────────────────────────────────────────
+
+export const Matrix: Story = {
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      description: {
+        story:
+          '`type × size` 的完整矩阵 — 用于一眼比对所有形态的视觉密度与高度对齐(对应 Button/Input 的 h-7 / h-8 / h-9 三档)。',
+      },
+    },
+  },
+  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) => {
+              // 每行独立受控 — 让 demo 可交互
+              return (
+                <MatrixRow
+                  key={`${t}-${s}`}
+                  type={t}
+                  size={s}
+                  showTotal={t !== 'mini'}
+                />
+              );
+            })}
+          </div>
+        ))}
+      </div>
+    );
+  },
+};
+
+const MatrixRow = ({
+  type,
+  size,
+  showTotal,
+}: {
+  type: 'normal' | 'simple' | 'mini';
+  size: 'sm' | 'md' | 'lg';
+  showTotal?: boolean;
+}) => {
+  const [page, setPage] = React.useState(3);
+  return (
+    <div className="flex items-center gap-4">
+      <span className="w-10 shrink-0 text-xs text-muted-foreground">
+        {size}
+      </span>
+      <SimplePagination
+        total={245}
+        type={type}
+        size={size}
+        showTotal={showTotal}
+        current={page}
+        onChange={(p) => setPage(p)}
+      />
+    </div>
+  );
+};
+
+// ─── pageSizeSelector + showJump(normal 专属)─────────────────────────────
+
+export const WithPageSizeSelector: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => {
+    const [page, setPage] = React.useState(1);
+    const [size, setSize] = React.useState(10);
+    return (
+      <SimplePagination
+        total={1234}
+        current={page}
+        pageSize={size}
+        pageSizeSelector
+        pageSizeList={[10, 20, 50, 100]}
+        onChange={(p, s) => {
+          setPage(p);
+          setSize(s);
+        }}
+        onPageSizeChange={(s) => setSize(s)}
+      />
+    );
+  },
+};
+
+export const WithJumpAndFirstLast: Story = {
   parameters: { controls: { disable: true } },
   render: () => {
     const [page, setPage] = React.useState(15);
     return (
       <SimplePagination
-        total={500}
-        pageSize={10}
+        total={1234}
         current={page}
-        onChange={setPage}
         showFirstLast
+        showJump
+        pageSizeSelector
+        onChange={(p) => setPage(p)}
       />
     );
   },
 };
 
+// ─── 自定义总数文本 ─────────────────────────────────────────────────────────
+
 export const CustomTotal: Story = {
   parameters: { controls: { disable: true } },
   render: () => {
@@ -58,11 +266,19 @@ export const CustomTotal: Story = {
     return (
       <SimplePagination
         total={245}
-        pageSize={10}
         current={page}
-        onChange={setPage}
+        onChange={(p) => setPage(p)}
         totalRender={(t, [s, e]) => `${s}–${e} of ${t}`}
       />
     );
   },
 };
+
+// ─── 非受控 ─────────────────────────────────────────────────────────────────
+
+export const Uncontrolled: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <SimplePagination total={245} defaultCurrent={2} pageSizeSelector />
+  ),
+};