@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/tabs/stories.tsx

@@ -0,0 +1,312 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import * as React from 'react';
+import { Tabs, TabsList, TabsTrigger, TabsContent } from './index';
+
+const meta: Meta<typeof Tabs> = {
+  title: '导航 · Navigation/Tabs 选项卡',
+  component: Tabs,
+  tags: ['autodocs'],
+  argTypes: {
+    defaultValue: { control: 'text', description: '初始激活项的 value' },
+    value: { control: 'text', description: '受控激活项的 value' },
+    orientation: {
+      control: 'inline-radio',
+      options: ['horizontal', 'vertical'],
+      description: '方向',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** 默认线型选项卡（line variant），底部下划线指示激活项。 */
+export const Default: Story = {
+  render: () => (
+    <Tabs defaultValue="account">
+      <TabsList>
+        <TabsTrigger value="account">账户</TabsTrigger>
+        <TabsTrigger value="password">密码</TabsTrigger>
+        <TabsTrigger value="notifications">通知</TabsTrigger>
+      </TabsList>
+      <TabsContent value="account">
+        <p className="text-muted-foreground">管理您的账户设置和偏好。</p>
+      </TabsContent>
+      <TabsContent value="password">
+        <p className="text-muted-foreground">修改密码，建议定期更换。</p>
+      </TabsContent>
+      <TabsContent value="notifications">
+        <p className="text-muted-foreground">配置消息通知的接收方式。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** 胶囊型（capsule variant）：muted 底色容器 + 选中白底，紧凑互斥单选场景。 */
+export const Capsule: Story = {
+  render: () => (
+    <Tabs defaultValue="day">
+      <TabsList variant="capsule">
+        <TabsTrigger value="day">今日</TabsTrigger>
+        <TabsTrigger value="week">本周</TabsTrigger>
+        <TabsTrigger value="month">本月</TabsTrigger>
+      </TabsList>
+      <TabsContent value="day">
+        <p className="text-muted-foreground">今日数据汇总。</p>
+      </TabsContent>
+      <TabsContent value="week">
+        <p className="text-muted-foreground">本周数据汇总。</p>
+      </TabsContent>
+      <TabsContent value="month">
+        <p className="text-muted-foreground">本月数据汇总。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** 文本型（text variant）：纯文本切换，无背景无下划线，仅颜色变化。 */
+export const Text: Story = {
+  render: () => (
+    <Tabs defaultValue="overview">
+      <TabsList variant="text">
+        <TabsTrigger value="overview">概览</TabsTrigger>
+        <TabsTrigger value="analytics">分析</TabsTrigger>
+        <TabsTrigger value="reports">报告</TabsTrigger>
+      </TabsList>
+      <TabsContent value="overview">
+        <p className="text-muted-foreground">系统运行概览。</p>
+      </TabsContent>
+      <TabsContent value="analytics">
+        <p className="text-muted-foreground">详细分析图表。</p>
+      </TabsContent>
+      <TabsContent value="reports">
+        <p className="text-muted-foreground">定期生成的报告。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** 包裹型（wrapped variant）：每项是独立 card，选中态蓝色 outline。 */
+export const Wrapped: Story = {
+  render: () => (
+    <Tabs defaultValue="general">
+      <TabsList variant="wrapped">
+        <TabsTrigger value="general">通用</TabsTrigger>
+        <TabsTrigger value="advanced">高级</TabsTrigger>
+        <TabsTrigger value="experimental">实验</TabsTrigger>
+      </TabsList>
+      <TabsContent value="general">
+        <p className="text-muted-foreground">通用设置项。</p>
+      </TabsContent>
+      <TabsContent value="advanced">
+        <p className="text-muted-foreground">高级配置选项。</p>
+      </TabsContent>
+      <TabsContent value="experimental">
+        <p className="text-muted-foreground">实验性功能开关。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** 尺寸档位 sm / default。 */
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col gap-6">
+      <Tabs defaultValue="a">
+        <TabsList size="sm">
+          <TabsTrigger value="a">小尺寸 A</TabsTrigger>
+          <TabsTrigger value="b">小尺寸 B</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="a">
+        <TabsList size="default">
+          <TabsTrigger value="a">默认 A</TabsTrigger>
+          <TabsTrigger value="b">默认 B</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="a">
+        <TabsList variant="capsule" size="sm">
+          <TabsTrigger value="a">小</TabsTrigger>
+          <TabsTrigger value="b">中</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <Tabs defaultValue="a">
+        <TabsList variant="capsule" size="default">
+          <TabsTrigger value="a">小</TabsTrigger>
+          <TabsTrigger value="b">中</TabsTrigger>
+        </TabsList>
+      </Tabs>
+    </div>
+  ),
+};
+
+/** 右侧附加内容（extra prop），常见于刷新/新建等操作入口。 */
+export const WithExtra: Story = {
+  render: () => (
+    <Tabs defaultValue="all">
+      <TabsList
+        extra={
+          <div className="flex gap-3 text-sm">
+            <a href="#" className="text-muted-foreground hover:text-foreground">
+              刷新
+            </a>
+            <a href="#" className="text-primary hover:text-primary/80">
+              新建
+            </a>
+          </div>
+        }
+      >
+        <TabsTrigger value="all">全部</TabsTrigger>
+        <TabsTrigger value="active">运行中</TabsTrigger>
+        <TabsTrigger value="archived">已归档</TabsTrigger>
+      </TabsList>
+      <TabsContent value="all">
+        <p className="text-muted-foreground">全部任务列表。</p>
+      </TabsContent>
+      <TabsContent value="active">
+        <p className="text-muted-foreground">运行中的任务。</p>
+      </TabsContent>
+      <TabsContent value="archived">
+        <p className="text-muted-foreground">已归档的任务。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** 禁用某个选项卡。 */
+export const Disabled: Story = {
+  render: () => (
+    <Tabs defaultValue="general">
+      <TabsList>
+        <TabsTrigger value="general">通用</TabsTrigger>
+        <TabsTrigger value="advanced" disabled>
+          高级（禁用）
+        </TabsTrigger>
+        <TabsTrigger value="other">其他</TabsTrigger>
+      </TabsList>
+      <TabsContent value="general">
+        <p className="text-muted-foreground">通用设置。</p>
+      </TabsContent>
+      <TabsContent value="other">
+        <p className="text-muted-foreground">其他选项。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** 可关闭选项卡（closable + onClose），适合多文档/工作区场景。 */
+export const Closable: Story = {
+  render: () => {
+    const [tabs, setTabs] = React.useState([
+      { key: 'doc-1', title: '文档 1' },
+      { key: 'doc-2', title: '文档 2' },
+      { key: 'doc-3', title: '文档 3' },
+    ]);
+    const [active, setActive] = React.useState('doc-1');
+
+    const handleClose = (key: string) => {
+      const next = tabs.filter((t) => t.key !== key);
+      setTabs(next);
+      if (active === key && next.length > 0) {
+        setActive(next[0]!.key);
+      }
+    };
+
+    return (
+      <Tabs value={active} onValueChange={setActive}>
+        <TabsList>
+          {tabs.map((t) => (
+            <TabsTrigger
+              key={t.key}
+              value={t.key}
+              closable
+              onClose={handleClose}
+            >
+              {t.title}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+        {tabs.map((t) => (
+          <TabsContent key={t.key} value={t.key}>
+            <p className="text-muted-foreground">{t.title} 的内容</p>
+          </TabsContent>
+        ))}
+      </Tabs>
+    );
+  },
+};
+
+/** 垂直方向选项卡。 */
+export const Vertical: Story = {
+  render: () => (
+    <Tabs defaultValue="profile" orientation="vertical">
+      <TabsList>
+        <TabsTrigger value="profile">个人资料</TabsTrigger>
+        <TabsTrigger value="security">安全</TabsTrigger>
+        <TabsTrigger value="billing">账单</TabsTrigger>
+      </TabsList>
+      <TabsContent value="profile">
+        <p className="text-muted-foreground">管理你的公开个人资料信息。</p>
+      </TabsContent>
+      <TabsContent value="security">
+        <p className="text-muted-foreground">两步验证、登录设备管理。</p>
+      </TabsContent>
+      <TabsContent value="billing">
+        <p className="text-muted-foreground">查看和管理订阅计划。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};
+
+/** 受控用法 + onValueChange 回调。 */
+export const Controlled: Story = {
+  render: () => {
+    const [value, setValue] = React.useState('home');
+    return (
+      <div className="flex flex-col gap-2">
+        <Tabs value={value} onValueChange={setValue}>
+          <TabsList>
+            <TabsTrigger value="home">首页</TabsTrigger>
+            <TabsTrigger value="docs">文档</TabsTrigger>
+            <TabsTrigger value="api">API</TabsTrigger>
+          </TabsList>
+          <TabsContent value="home">
+            <p className="text-muted-foreground">首页内容。</p>
+          </TabsContent>
+          <TabsContent value="docs">
+            <p className="text-muted-foreground">文档内容。</p>
+          </TabsContent>
+          <TabsContent value="api">
+            <p className="text-muted-foreground">API 参考。</p>
+          </TabsContent>
+        </Tabs>
+        <div className="text-xs text-muted-foreground">当前激活：{value}</div>
+      </div>
+    );
+  },
+};
+
+/** 溢出滑动：当选项卡超出容器宽度时，显示左右箭头进行滑动。 */
+export const Overflow: Story = {
+  render: () => (
+    <Tabs defaultValue="tab-1" className="max-w-80">
+      <TabsList>
+        <TabsTrigger value="tab-1">概览</TabsTrigger>
+        <TabsTrigger value="tab-2">详细信息</TabsTrigger>
+        <TabsTrigger value="tab-3">配置管理</TabsTrigger>
+        <TabsTrigger value="tab-4">操作日志</TabsTrigger>
+        <TabsTrigger value="tab-5">关联资源</TabsTrigger>
+        <TabsTrigger value="tab-6">监控告警</TabsTrigger>
+        <TabsTrigger value="tab-7">权限管理</TabsTrigger>
+      </TabsList>
+      <TabsContent value="tab-1">
+        <p className="text-muted-foreground">
+          概览内容，尝试缩小宽度查看溢出滚动效果。
+        </p>
+      </TabsContent>
+      <TabsContent value="tab-2">
+        <p className="text-muted-foreground">详细信息内容。</p>
+      </TabsContent>
+    </Tabs>
+  ),
+};