@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/flex/flex.stories.tsx

@@ -1,199 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Flex } from './flex';
-import { Button } from '@/components/button/button';
-import { Separator } from '@/components/separator/separator';
-
-const meta: Meta<typeof Flex> = {
-  title: '布局 · Layout/Flex',
-  component: Flex,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'Flex 弹性布局 —— 以架构者语言描述一维 / 二维的子项排列。**等价 antd `Flex`**(v5.10+) **∪ antd `Space`**——覆盖完整布局容器(页头 / 卡片 / 整页)与 inline 小集合(按钮组 / tag 组 / 链接组)两类场景:`direction`(row/column/-reverse) / `gap`(none→xl 6 档走 design 间距刻度) / `align` / `justify` / `wrap` / `inline`(等价 antd `Space`) / `as`(语义标签 section/header/main…) / `split`(等价 antd `Space.split`,在相邻子项间插入分隔节点)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/design`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    direction: {
-      control: 'inline-radio',
-      options: ['row', 'column', 'row-reverse', 'column-reverse'],
-    },
-    gap: {
-      control: 'select',
-      options: ['none', 'xs', 'sm', 'default', 'lg', 'xl'],
-    },
-    align: {
-      control: 'inline-radio',
-      options: ['start', 'center', 'end', 'baseline', 'stretch'],
-    },
-    justify: {
-      control: 'select',
-      options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
-    },
-    wrap: { control: 'boolean' },
-    inline: { control: 'boolean' },
-  },
-  args: {
-    direction: 'row',
-    gap: 'default',
-    align: 'stretch',
-    justify: 'start',
-    wrap: false,
-    inline: false,
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Flex>;
-
-const swatch = (label: string) => (
-  <div className="grid h-12 w-20 place-items-center rounded-md border border-border bg-muted text-xs">
-    {label}
-  </div>
-);
-
-export const Playground: Story = {
-  render: (args) => (
-    <Flex {...args} className="min-h-32 rounded-md border border-border bg-card p-4">
-      {swatch('A')}
-      {swatch('B')}
-      {swatch('C')}
-    </Flex>
-  ),
-};
-
-export const Header: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Flex
-      as="header"
-      justify="between"
-      align="center"
-      className="rounded-md border border-border bg-card px-6 py-3"
-    >
-      <span className="font-semibold">Logo</span>
-      <Flex gap="sm">
-        <a href="#" className="text-sm hover:underline">
-          首页
-        </a>
-        <a href="#" className="text-sm hover:underline">
-          文档
-        </a>
-        <a href="#" className="text-sm hover:underline">
-          价格
-        </a>
-      </Flex>
-      <Button size="sm">登录</Button>
-    </Flex>
-  ),
-};
-
-export const ColumnStack: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Flex
-      direction="column"
-      gap="sm"
-      className="w-80 rounded-md border border-border bg-card p-6"
-    >
-      <span className="text-lg font-semibold">标题</span>
-      <span className="text-sm text-muted-foreground">这是一段描述文字</span>
-      <Button>操作</Button>
-    </Flex>
-  ),
-};
-
-export const Toolbar: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Flex justify="end" gap="sm" className="rounded-md border border-border bg-card p-3">
-      <Button variant="outline">取消</Button>
-      <Button>提交</Button>
-    </Flex>
-  ),
-};
-
-/**
- * inline 小集合——等价 antd `Space`。加 `inline` + 小 `gap` + `align="center"` 即可覆盖原 Space 场景。
- */
-export const InlineGroup: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Flex inline gap="sm" align="center">
-      <Button variant="outline">取消</Button>
-      <Button>确定</Button>
-      <Button variant="ghost">更多</Button>
-    </Flex>
-  ),
-};
-
-/**
- * 链接组带分隔——等价 antd `Space.split`。`split` 接受任意 ReactNode,常用 `<Separator orientation="vertical" />`。
- */
-export const WithSplit: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Flex
-      inline
-      gap="sm"
-      align="center"
-      split={<Separator orientation="vertical" className="h-4" />}
-    >
-      <a href="#" className="text-sm text-primary hover:underline">
-        查看
-      </a>
-      <a href="#" className="text-sm text-primary hover:underline">
-        编辑
-      </a>
-      <a href="#" className="text-sm text-destructive hover:underline">
-        删除
-      </a>
-    </Flex>
-  ),
-};
-
-/**
- * 主轴分几——表单行 “总计 / 金额”。等价 antd `Space justify="between"`。
- */
-export const Between: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="w-80 rounded-md border border-border p-3">
-      <Flex justify="between" align="center">
-        <span className="text-sm text-muted-foreground">总计</span>
-        <span className="text-lg font-semibold">¥ 1,299</span>
-      </Flex>
-    </div>
-  ),
-};
-
-export const WrapCloud: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Flex wrap gap="sm" className="w-96 rounded-md border border-border bg-card p-3">
-      {[
-        'React',
-        'Vue',
-        'Svelte',
-        'Solid',
-        'Angular',
-        'Lit',
-        'Qwik',
-        'Astro',
-        'Next',
-        'Remix',
-        'Nuxt',
-        'Gatsby',
-      ].map((t) => (
-        <span
-          key={t}
-          className="rounded-md border border-border bg-muted px-2 py-0.5 text-xs"
-        >
-          {t}
-        </span>
-      ))}
-    </Flex>
-  ),
-};

package/src/components/flex/flex.tsx

@@ -1,145 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-
-const gapMap = {
-  none: 'gap-0',
-  xs: 'gap-1',
-  sm: 'gap-2',
-  default: 'gap-4',
-  lg: 'gap-6',
-  xl: 'gap-8',
-} as const;
-
-const alignMap = {
-  start: 'items-start',
-  center: 'items-center',
-  end: 'items-end',
-  baseline: 'items-baseline',
-  stretch: 'items-stretch',
-} as const;
-
-const justifyMap = {
-  start: 'justify-start',
-  center: 'justify-center',
-  end: 'justify-end',
-  between: 'justify-between',
-  around: 'justify-around',
-  evenly: 'justify-evenly',
-} as const;
-
-export interface FlexProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * 方向(antd `vertical` 并集) — `row`(默认)/ `column` 直观可读;antd `vertical` boolean 映射为 `column`。
-   * @default "row"
-   */
-  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
-  /**
-   * 子项之间的间距档位(走 design 间距刻度,不接受任意 number)。
-   * @default "default"
-   */
-  gap?: 'none' | 'xs' | 'sm' | 'default' | 'lg' | 'xl';
-  /**
-   * 副轴对齐方式。
-   * @default "stretch"
-   */
-  align?: keyof typeof alignMap;
-  /**
-   * 主轴对齐方式。
-   * @default "start"
-   */
-  justify?: keyof typeof justifyMap;
-  /**
-   * 是否允许换行(antd `wrap` 并集)。
-   * @default false
-   */
-  wrap?: boolean;
-  /**
-   * inline-flex 而非 block-flex。
-   * @default false
-   */
-  inline?: boolean;
-  /**
-   * 渲染元素(antd `component` 并集) — 支持 `section / header / aside / main / nav` 等语义标签。
-   * @default "div"
-   */
-  as?: keyof Pick<
-    React.JSX.IntrinsicElements,
-    'div' | 'section' | 'header' | 'footer' | 'aside' | 'main' | 'nav' | 'article'
-  >;
-  /**
-   * 子项之间的分隔节点(antd `Space.split` 并集) — 常用 `<Separator orientation="vertical" />`、`'·'`、`'|'`。
-   * 设置后会在每两个相邻子项之间插入该节点。
-   */
-  split?: React.ReactNode;
-}
-
-/**
- * Flex 布局容器 — antd 独有补足。**等价 antd `Flex`**(v5.10+) ∪ **antd `Space`**(`split`)。
- * 把 Tailwind flex 的常用对齐 / 间距 / 换行 / 方向 / 渲染元素 / 分隔节点收敛为枚举,避免散落的 className 反复手写。
- *
- * 用法约定:
- * - 完整布局容器(页头、卡片体、整页): `<Flex as="header" justify="between" align="center" />`
- * - inline 小集合(按钮组、tag 组、链接组): `<Flex inline gap="sm" align="center" />`(等价 antd `Space`)
- * - 链接组带分隔: `<Flex inline gap="sm" split={<Separator orientation="vertical" />} />`
- */
-const Flex = React.forwardRef<HTMLDivElement, FlexProps>(
-  (
-    {
-      direction = 'row',
-      gap = 'default',
-      align = 'stretch',
-      justify = 'start',
-      wrap = false,
-      inline = false,
-      as = 'div',
-      split,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const Tag = as as React.ElementType;
-    const directionClass =
-      direction === 'row'
-        ? 'flex-row'
-        : direction === 'column'
-          ? 'flex-col'
-          : direction === 'row-reverse'
-            ? 'flex-row-reverse'
-            : 'flex-col-reverse';
-
-    const content = split
-      ? React.Children.toArray(children)
-          .filter(Boolean)
-          .map((child, i) => (
-            <React.Fragment key={i}>
-              {i > 0 ? split : null}
-              {child}
-            </React.Fragment>
-          ))
-      : children;
-
-    return (
-      <Tag
-        ref={ref}
-        className={cn(
-          inline ? 'inline-flex' : 'flex',
-          directionClass,
-          gapMap[gap],
-          alignMap[align],
-          justifyMap[justify],
-          wrap && 'flex-wrap',
-          className,
-        )}
-        {...props}
-      >
-        {content}
-      </Tag>
-    );
-  },
-);
-Flex.displayName = 'Flex';
-
-export { Flex };

package/src/components/float-button/float-button.meta.md

@@ -1,92 +0,0 @@
----
-id: float-button
-name: FloatButton
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 悬浮按钮
----
-
-# FloatButton 悬浮按钮
-
-悬浮按钮 — antd 独有补足。**等价 antd `FloatButton`**(v5.0 加入,取代旧 `BackTop`)。`position: fixed` 在右下角的强主张操作按钮:回到顶部、客服入口、新建按钮。配 `FloatButtonGroup` 纵向堆叠多个,`FloatButtonBackTop` 是预置的"回到顶部"快捷件。
-
-## When to use
-
-- "回到顶部"(`FloatButtonBackTop`)
-- 客服 / 反馈入口
-- 新建按钮(创建任务 / 写文章)
-- 移动端的"快速操作"(配 badge 显示未读数)
-
-## When NOT to use
-
-- 表单内的提交按钮 → 普通 `Button block`
-- 列表行末操作 → 普通 `Button` / `DropdownMenu`
-- 多个无关操作堆在右下:容易遮挡内容,> 3 个 FloatButton 时换 SpeedDial 模式
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `icon` | `React.ReactNode` | – | – | 图标(antd `icon` 并集)。 |
-| `variant` | `'primary' \| 'default'` | `"primary"` | – | 视觉风格 — `primary` 主色填充;`default` 灰色轮廓。 |
-| `shape` | `'circle' \| 'square'` | `"circle"` | – | 形状 — `circle`(默认)圆形;`square` 方形圆角。 |
-| `badge` | `React.ReactNode` | – | – | 触发徽标(antd `badge` 并集) — 简短数字 / 字符。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add float-button` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **多个 FloatButton 必用 `FloatButtonGroup`** — 单独散落会层级 / 位置冲突
-- **`shape="circle"`(默认)+ icon-only** 视觉最干净 — 文字 + 圆形会拥挤
-- **`badge`** 只显示 ≤ 2 位数字 / 文字(`99+` / `New`)— 长内容塞不下
-- **`FloatButtonBackTop` 默认滚动 > 200px 才显示** — 短页面不会出现,符合用户预期
-- **不要给 FloatButton 加 dropdown 菜单**:用 antd 的 `FloatButton.Menu` 思路时,改用 `DropdownMenu` 包 trigger
-- **z-index 默认 40** — 比 toast 低、比常规 dialog 略低;需要覆盖 Dialog 时自行 className 调
-
-## Examples
-
-```tsx
-import {
-  FloatButton,
-  FloatButtonGroup,
-  FloatButtonBackTop,
-} from '@/components/ui/float-button';
-import { MessageCircle, Plus } from 'lucide-react';
-
-// 仅回到顶部
-<FloatButtonBackTop />
-
-// 多按钮组
-<FloatButtonGroup>
-  <FloatButton icon={<MessageCircle className="size-5" />} aria-label="客服" badge="3" />
-  <FloatButton variant="default" icon={<Plus className="size-5" />} aria-label="新建" />
-  <FloatButtonBackTop />
-</FloatButtonGroup>
-
-// 自定义位置
-<FloatButtonGroup right={48} bottom={48}>
-  <FloatButton icon={<Plus className="size-5" />} aria-label="新建" />
-</FloatButtonGroup>
-```

package/src/components/float-button/float-button.stories.tsx

@@ -1,80 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { MessageCircle, Plus } from 'lucide-react';
-import {
-  FloatButton,
-  FloatButtonGroup,
-  FloatButtonBackTop,
-} from './float-button';
-
-const meta: Meta<typeof FloatButton> = {
-  title: '废弃 · Deprecated/FloatButton',
-  component: FloatButton,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n悬浮按钮 — position: fixed 在右下角的强主张操作按钮（回到顶部 / 客服 / 新建）。配 FloatButtonGroup 堆叠多个，FloatButtonBackTop 是预置的“回到顶部”。等价 antd `FloatButton`（v5.0，替代旧 BackTop）。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof FloatButton>;
-
-export const Playground: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="relative h-72 overflow-hidden rounded-md border border-border">
-      <div className="p-4 text-sm text-muted-foreground">
-        ← 右下角是 FloatButton 演示
-      </div>
-      <div className="absolute bottom-3 right-3">
-        <FloatButton icon={<Plus className="size-5" />} aria-label="新建" />
-      </div>
-    </div>
-  ),
-};
-
-export const Group: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="relative h-96 overflow-hidden rounded-md border border-border">
-      <div className="p-4 text-sm text-muted-foreground">右下角浮动按钮组</div>
-      <div className="absolute bottom-6 right-6 flex flex-col items-end gap-3">
-        <FloatButton
-          icon={<MessageCircle className="size-5" />}
-          aria-label="客服"
-          badge="3"
-        />
-        <FloatButton
-          variant="default"
-          icon={<Plus className="size-5" />}
-          aria-label="新建"
-        />
-      </div>
-    </div>
-  ),
-};
-
-export const BackTopReal: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <>
-      <div className="text-sm text-muted-foreground">
-        向下滚动 200px 查看回到顶部按钮:
-      </div>
-      <div className="mt-3 space-y-3">
-        {Array.from({ length: 30 }).map((_, i) => (
-          <div key={i} className="rounded-md border border-border bg-muted/30 p-6">
-            占位段落 {i + 1}
-          </div>
-        ))}
-      </div>
-      <FloatButtonGroup>
-        <FloatButtonBackTop />
-      </FloatButtonGroup>
-    </>
-  ),
-};

package/src/components/float-button/float-button.tsx

@@ -1,143 +0,0 @@
-import * as React from 'react';
-import { ArrowUp } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-export interface FloatButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-  /**
-   * 图标(antd `icon` 并集)。
-   */
-  icon?: React.ReactNode;
-  /**
-   * 视觉风格 — `primary` 主色填充;`default` 灰色轮廓。
-   * @default "primary"
-   */
-  variant?: 'primary' | 'default';
-  /**
-   * 形状 — `circle`(默认)圆形;`square` 方形圆角。
-   * @default "circle"
-   */
-  shape?: 'circle' | 'square';
-  /**
-   * 触发徽标(antd `badge` 并集) — 简短数字 / 字符。
-   */
-  badge?: React.ReactNode;
-}
-
-/**
- * 悬浮按钮 — antd 独有补足。**等价 antd `FloatButton`**(v5.0 加入,替代旧 `BackTop`)。
- * 默认 `position: fixed` 在右下角,典型用例:回到顶部、客服入口、新建按钮。
- *
- * **多个 FloatButton 请用 `FloatButtonGroup` 包裹**(纵向堆叠 + 间距统一)。
- */
-const FloatButton = React.forwardRef<HTMLButtonElement, FloatButtonProps>(
-  (
-    {
-      icon,
-      variant = 'primary',
-      shape = 'circle',
-      badge,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => (
-    <button
-      ref={ref}
-      type="button"
-      className={cn(
-        'relative inline-flex size-12 items-center justify-center transition-all',
-        'shadow-lg hover:shadow-xl active:scale-95',
-        'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
-        shape === 'circle' ? 'rounded-full' : 'rounded-md',
-        variant === 'primary'
-          ? 'bg-primary text-primary-foreground hover:bg-primary/90'
-          : 'border border-border bg-background text-foreground hover:bg-accent',
-        'disabled:cursor-not-allowed disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    >
-      {icon ?? children}
-      {badge != null ? (
-        <span className="absolute -right-1 -top-1 flex h-5 min-w-counter items-center justify-center rounded-full bg-destructive px-1 text-xxs font-medium leading-none text-destructive-foreground">
-          {badge}
-        </span>
-      ) : null}
-    </button>
-  ),
-);
-FloatButton.displayName = 'FloatButton';
-
-// ─── FloatButtonGroup(纵向堆叠)─────────────────────────────────────────
-
-export interface FloatButtonGroupProps
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * 距视口右侧的距离(像素)。
-   * @default 24
-   */
-  right?: number;
-  /**
-   * 距视口底部的距离(像素)。
-   * @default 24
-   */
-  bottom?: number;
-}
-
-const FloatButtonGroup = React.forwardRef<HTMLDivElement, FloatButtonGroupProps>(
-  ({ right = 24, bottom = 24, className, style, ...props }, ref) => (
-    <div
-      ref={ref}
-      className={cn(
-        'fixed z-40 flex flex-col items-end gap-3',
-        className,
-      )}
-      style={{ right, bottom, ...style }}
-      {...props}
-    />
-  ),
-);
-FloatButtonGroup.displayName = 'FloatButtonGroup';
-
-// ─── FloatButtonBackTop(antd `FloatButton.BackTop` 等价)──────────────
-
-export interface FloatButtonBackTopProps
-  extends Omit<FloatButtonProps, 'icon' | 'onClick'> {
-  /**
-   * 滚动到此偏移量(px)以下时隐藏;为 0 始终显示。
-   * @default 200
-   */
-  visibilityHeight?: number;
-}
-
-const FloatButtonBackTop = React.forwardRef<
-  HTMLButtonElement,
-  FloatButtonBackTopProps
->(({ visibilityHeight = 200, ...rest }, ref) => {
-  const [visible, setVisible] = React.useState(visibilityHeight === 0);
-
-  React.useEffect(() => {
-    if (typeof window === 'undefined') return;
-    const update = () => setVisible(window.scrollY > visibilityHeight);
-    update();
-    window.addEventListener('scroll', update, { passive: true });
-    return () => window.removeEventListener('scroll', update);
-  }, [visibilityHeight]);
-
-  if (!visible) return null;
-  return (
-    <FloatButton
-      ref={ref}
-      icon={<ArrowUp className="size-5" />}
-      onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
-      aria-label="回到顶部"
-      {...rest}
-    />
-  );
-});
-FloatButtonBackTop.displayName = 'FloatButtonBackTop';
-
-export { FloatButton, FloatButtonGroup, FloatButtonBackTop };