@teamix-evo/ui 0.3.0 → 0.5.0

package/src/components/badge/stories.tsx

@@ -0,0 +1,275 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { BellIcon, MailIcon } from 'lucide-react';
+
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/avatar';
+import { Button } from '@/components/button';
+import { Badge } from './index';
+
+const meta: Meta<typeof Badge> = {
+  title: '数据展示 · Data Display/Badge 徽标',
+  component: Badge,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+// ─── Label 形态 ────────────────────────────────────────────────────────
+
+/** 默认（primary）文本徽标。 */
+export const Default: Story = {
+  render: () => <Badge>默认</Badge>,
+};
+
+/** 所有 label 变体。 */
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="ghost">Ghost</Badge>
+      <Badge variant="link">Link</Badge>
+    </div>
+  ),
+};
+
+// ─── Wrapped indicator（包裹目标元素） ───────────────────────────────
+
+/** 基本：包裹元素后右上角浮一个数字胶囊。 */
+export const Basic: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Badge count={5}>
+        <Avatar>
+          <AvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <AvatarFallback>SC</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge count={0} showZero>
+        <Avatar>
+          <AvatarFallback>SZ</AvatarFallback>
+        </Avatar>
+      </Badge>
+    </div>
+  ),
+};
+
+/** 小红点：仅展示一个红点提示，不显示数字。 */
+export const Dot: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Badge dot>
+        <Button variant="ghost" size="icon" aria-label="messages">
+          <MailIcon />
+        </Button>
+      </Badge>
+      <Badge dot>
+        <Button variant="ghost" size="icon" aria-label="notifications">
+          <BellIcon />
+        </Button>
+      </Badge>
+      <Badge dot>
+        <a href="#">A Link</a>
+      </Badge>
+    </div>
+  ),
+};
+
+/** 封顶数字：超过 `overflowCount` 显示为 `${overflowCount}+`。 */
+export const OverflowCount: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Badge count={99}>
+        <Avatar>
+          <AvatarFallback>99</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge count={100}>
+        <Avatar>
+          <AvatarFallback>A</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge count={100} overflowCount={10}>
+        <Avatar>
+          <AvatarFallback>B</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge count={1000} overflowCount={999}>
+        <Avatar>
+          <AvatarFallback>C</AvatarFallback>
+        </Avatar>
+      </Badge>
+    </div>
+  ),
+};
+
+// ─── Standalone（不包裹任何元素） ─────────────────────────────────────
+
+/** 独立使用：不传 children，单独渲染数字 / 红点 / 自定义内容。 */
+export const Standalone: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge count={25} />
+      <Badge count={109} color="var(--color-success)" />
+      <Badge dot />
+      <Badge content="hot" color="var(--color-destructive)" />
+    </div>
+  ),
+};
+
+// ─── 自定义内容 / 颜色 ────────────────────────────────────────────────
+
+/** 自定义内容：通过 `content` 注入文本或图标，`color` 覆盖底色。 */
+export const CustomContent: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Badge content="hot" color="var(--color-destructive)">
+        <Avatar>
+          <AvatarFallback>H</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge content={<BellIcon className="size-3" />} color="transparent">
+        <Avatar>
+          <AvatarFallback>B</AvatarFallback>
+        </Avatar>
+      </Badge>
+    </div>
+  ),
+};
+
+// ─── Clickable（外层 a 标签）─────────────────────────────────────────
+
+/** 整个徽标 + 目标元素均可点击，外层 `<a>` 包裹 Badge。 */
+export const Clickable: Story = {
+  render: () => (
+    <a href="#" className="inline-block">
+      <Badge count={5}>
+        <Avatar>
+          <AvatarFallback>L</AvatarFallback>
+        </Avatar>
+      </Badge>
+    </a>
+  ),
+};
+
+// ─── Status 5 档语义点 ───────────────────────────────────────────────
+
+/** 状态点：5 档语义色 + 文本，processing 带脉冲动画。 */
+export const Status: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2">
+      <Badge status="default">Default</Badge>
+      <Badge status="processing">Processing</Badge>
+      <Badge status="success">Success</Badge>
+      <Badge status="warning">Warning</Badge>
+      <Badge status="error">Error</Badge>
+    </div>
+  ),
+};
+
+// ─── Size ─────────────────────────────────────────────────────────────
+
+/** 尺寸：sm 与 default 对比。 */
+export const Size: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Badge size="sm" count={5}>
+        <Avatar>
+          <AvatarFallback>S</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge count={5}>
+        <Avatar>
+          <AvatarFallback>D</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge size="sm" dot>
+        <Avatar>
+          <AvatarFallback>S</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge dot>
+        <Avatar>
+          <AvatarFallback>D</AvatarFallback>
+        </Avatar>
+      </Badge>
+    </div>
+  ),
+};
+
+// ─── Offset ───────────────────────────────────────────────────────────
+
+/** 偏移：通过 `offset=[x, y]` 微调 indicator 位置。 */
+export const Offset: Story = {
+  render: () => (
+    <div className="flex items-center gap-8">
+      <Badge count={5}>
+        <Avatar>
+          <AvatarFallback>0</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge count={5} offset={[-4, 4]}>
+        <Avatar>
+          <AvatarFallback>L</AvatarFallback>
+        </Avatar>
+      </Badge>
+      <Badge count={5} offset={[4, -4]}>
+        <Avatar>
+          <AvatarFallback>R</AvatarFallback>
+        </Avatar>
+      </Badge>
+    </div>
+  ),
+};
+
+// ─── Dynamic（受控） ──────────────────────────────────────────────────
+
+/** 受控示例：count 与 dot 动态切换。 */
+export const Dynamic: Story = {
+  render: () => {
+    function DynamicDemo() {
+      const [count, setCount] = React.useState(0);
+      const [show, setShow] = React.useState(true);
+      return (
+        <div className="flex flex-col gap-4">
+          <div className="flex items-center gap-3">
+            <Badge count={count}>
+              <Avatar>
+                <AvatarFallback>N</AvatarFallback>
+              </Avatar>
+            </Badge>
+            <Badge count={count} showZero>
+              <Avatar>
+                <AvatarFallback>Z</AvatarFallback>
+              </Avatar>
+            </Badge>
+            <Button size="sm" onClick={() => setCount((c) => c + 1)}>
+              +
+            </Button>
+            <Button
+              size="sm"
+              variant="outline"
+              onClick={() => setCount((c) => Math.max(0, c - 1))}
+            >
+              -
+            </Button>
+          </div>
+          <div className="flex items-center gap-3">
+            <Badge dot={show}>
+              <Avatar>
+                <AvatarFallback>D</AvatarFallback>
+              </Avatar>
+            </Badge>
+            <Button size="sm" onClick={() => setShow((s) => !s)}>
+              Toggle Dot
+            </Button>
+          </div>
+        </div>
+      );
+    }
+    return <DynamicDemo />;
+  },
+};

package/src/components/breadcrumb/index.tsx

@@ -0,0 +1,137 @@
+/**
+ * 面包屑 Breadcrumb
+ *
+ * 展示当前页面在层级结构中的位置，提供快速返回上级路径的导航。
+ *
+ * @when
+ * - 页面层级超过 2 层，需要用户知晓当前所处位置
+ * - 配合 PageHeader 组件展示路径
+ * - 多层嵌套管理后台类场景
+ */
+
+import * as React from 'react';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+import { ChevronRightIcon, MoreHorizontalIcon } from 'lucide-react';
+
+/** 面包屑根容器（nav 元素）。 */
+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav
+      aria-label="breadcrumb"
+      data-slot="breadcrumb"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** 面包屑有序列表。 */
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-xs wrap-break-word text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** 单个面包屑项。 */
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+/** 可点击的面包屑链接。 */
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot.Root : 'a';
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+/** 当前页面（不可点击）。 */
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+/** 分隔符。 */
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRightIcon />}
+    </li>
+  );
+}
+
+/** 省略号（层级过深时折叠中间项）。 */
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn(
+        'flex size-5 items-center justify-center [&>svg]:size-4',
+        className,
+      )}
+      {...props}
+    >
+      <MoreHorizontalIcon />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/src/components/breadcrumb/meta.md

@@ -0,0 +1,64 @@
+# Breadcrumb
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+面包屑 Breadcrumb
+展示当前页面在层级结构中的位置，提供快速返回上级路径的导航。
+
+## 使用场景
+
+- 页面层级超过 2 层，需要用户知晓当前所处位置
+- 配合 PageHeader 组件展示路径
+- 多层嵌套管理后台类场景
+
+## 示例
+
+### WithEllipsis
+
+当层级过深时，使用省略号折叠中间项。
+
+```tsx
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">首页</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbEllipsis />
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">数据录入</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator />
+    <BreadcrumbItem>
+      <BreadcrumbPage>输入框</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```
+
+### CustomSeparator
+
+自定义分隔符。
+
+```tsx
+<Breadcrumb>
+  <BreadcrumbList>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">首页</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator>/</BreadcrumbSeparator>
+    <BreadcrumbItem>
+      <BreadcrumbLink href="#">设置</BreadcrumbLink>
+    </BreadcrumbItem>
+    <BreadcrumbSeparator>/</BreadcrumbSeparator>
+    <BreadcrumbItem>
+      <BreadcrumbPage>通用</BreadcrumbPage>
+    </BreadcrumbItem>
+  </BreadcrumbList>
+</Breadcrumb>
+```

package/src/components/breadcrumb/stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+} from './index';
+
+const meta: Meta<typeof Breadcrumb> = {
+  title: '导航 · Navigation/Breadcrumb 面包屑',
+  component: Breadcrumb,
+  tags: ['autodocs'],
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 基础面包屑导航，展示当前路径层级。 */
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">首页</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">组件</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>面包屑</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+/** 当层级过深时，使用省略号折叠中间项。 */
+export const WithEllipsis: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">首页</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">数据录入</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>输入框</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+/** 自定义分隔符。 */
+export const CustomSeparator: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">首页</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>/</BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">设置</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator>/</BreadcrumbSeparator>
+        <BreadcrumbItem>
+          <BreadcrumbPage>通用</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};