@teamix-evo/ui 0.3.0 → 0.5.0

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

@@ -1,284 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { SimplePagination } from './pagination';
-
-const meta: Meta<typeof SimplePagination> = {
-  title: '导航 · Navigation/Pagination',
-  component: SimplePagination,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '**分页 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。',
-      },
-    },
-  },
-  argTypes: {
-    total: { control: 'number' },
-    pageSize: { control: 'number' },
-    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,
-    size: 'md',
-    type: 'normal',
-  },
-  decorators: [(Story) => <div className="w-[760px]">{Story()}</div>],
-};
-
-export default meta;
-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={(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 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={1234}
-        current={page}
-        showFirstLast
-        showJump
-        pageSizeSelector
-        onChange={(p) => setPage(p)}
-      />
-    );
-  },
-};
-
-// ─── 自定义总数文本 ─────────────────────────────────────────────────────────
-
-export const CustomTotal: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [page, setPage] = React.useState(1);
-    return (
-      <SimplePagination
-        total={245}
-        current={page}
-        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 />
-  ),
-};