@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/item/stories.tsx

@@ -0,0 +1,432 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemExtra,
+  ItemFooter,
+  ItemGroup,
+  ItemGroupHeader,
+  ItemGroupFooter,
+  ItemHeader,
+  ItemMedia,
+  ItemSeparator,
+  ItemTitle,
+} from './index';
+import { Button } from '@/components/button';
+import { Tag } from '@/components/tag';
+import {
+  FileIcon,
+  ImageIcon,
+  MoreHorizontalIcon,
+  StarIcon,
+  TrashIcon,
+  PencilIcon,
+  BookmarkIcon,
+} from 'lucide-react';
+
+const meta: Meta<typeof Item> = {
+  title: '数据展示 · Data Display/Item 列表项',
+  component: Item,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Item>;
+
+/** 基础列表项 */
+export const Default: Story = {
+  render: () => (
+    <ItemGroup>
+      <Item>
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>项目文档.pdf</ItemTitle>
+          <ItemDescription>最后修改于 2 小时前</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+          >
+            <MoreHorizontalIcon />
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <ImageIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>设计稿.fig</ItemTitle>
+          <ItemDescription>最后修改于 1 天前</ItemDescription>
+        </ItemContent>
+        <ItemActions>
+          <Button
+            size="icon-sm"
+            variant="ghost"
+            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+          >
+            <MoreHorizontalIcon />
+          </Button>
+        </ItemActions>
+      </Item>
+    </ItemGroup>
+  ),
+};
+
+/** 变体对比 */
+export const Variants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <Item variant="default">
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Default 变体</ItemTitle>
+          <ItemDescription>无边框透明背景</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="outline">
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Outline 变体</ItemTitle>
+          <ItemDescription>带边框</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item variant="muted">
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Muted 变体</ItemTitle>
+          <ItemDescription>浅背景</ItemDescription>
+        </ItemContent>
+      </Item>
+    </div>
+  ),
+};
+
+/** 尺寸对比 */
+export const Sizes: Story = {
+  render: () => (
+    <ItemGroup>
+      <Item size="default" variant="outline">
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Default 尺寸</ItemTitle>
+          <ItemDescription>标准间距</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="sm" variant="outline">
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Small 尺寸</ItemTitle>
+          <ItemDescription>紧凑间距</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item size="xs" variant="outline">
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>XS 尺寸</ItemTitle>
+          <ItemDescription>极紧凑间距</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  ),
+};
+
+/** 图文卡片布局 */
+export const Horizontal: Story = {
+  render: () => (
+    <ItemGroup divider>
+      <Item layout="horizontal" variant="outline">
+        <ItemMedia variant="cover">
+          <img
+            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=320&h=200&fit=crop"
+            alt="cover"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>构建一套产品化设计系统</ItemTitle>
+          <ItemDescription>
+            随着互联网行业的聚变式发展，在电商业务从"信息透出"到"在线交易"的过程中，网站
+            UI 构建也经历了多个阶段的演进。
+          </ItemDescription>
+          <span className="text-xs text-muted-foreground">3 小时前更新</span>
+        </ItemContent>
+        <ItemActions>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+          >
+            编辑
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+          >
+            删除
+          </Button>
+        </ItemActions>
+      </Item>
+      <Item layout="horizontal" variant="outline">
+        <ItemMedia variant="cover">
+          <img
+            src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=320&h=200&fit=crop"
+            alt="cover"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>移动端适配最佳实践</ItemTitle>
+          <ItemDescription>
+            响应式设计在现代 Web
+            开发中的关键角色，以及如何通过组件化方案解决多端适配问题。
+          </ItemDescription>
+          <span className="text-xs text-muted-foreground">1 天前更新</span>
+        </ItemContent>
+        <ItemActions>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+          >
+            编辑
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+          >
+            删除
+          </Button>
+        </ItemActions>
+      </Item>
+    </ItemGroup>
+  ),
+};
+
+/** 右侧 Extra 信息 */
+export const WithExtra: Story = {
+  render: () => (
+    <ItemGroup bordered divider>
+      <Item>
+        <ItemMedia variant="icon">
+          <StarIcon className="text-warning" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Pro 订阅</ItemTitle>
+          <ItemDescription>每月自动续费</ItemDescription>
+        </ItemContent>
+        <ItemExtra>$20/月</ItemExtra>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <BookmarkIcon className="text-primary" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>Team 订阅</ItemTitle>
+          <ItemDescription>年付优惠</ItemDescription>
+        </ItemContent>
+        <ItemExtra>$180/年</ItemExtra>
+      </Item>
+    </ItemGroup>
+  ),
+};
+
+/** Actions 自动分隔 */
+export const ActionsSeparated: Story = {
+  render: () => (
+    <Item variant="outline">
+      <ItemMedia variant="icon">
+        <FileIcon />
+      </ItemMedia>
+      <ItemContent>
+        <ItemTitle>资源文件</ItemTitle>
+        <ItemDescription>点击操作按钮管理</ItemDescription>
+      </ItemContent>
+      <ItemActions separated>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+        >
+          <PencilIcon />
+          编辑
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+        >
+          <BookmarkIcon />
+          收藏
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-destructive hover:bg-transparent hover:text-destructive/80"
+        >
+          <TrashIcon />
+          删除
+        </Button>
+      </ItemActions>
+    </Item>
+  ),
+};
+
+/** 带边框和分隔线的容器 */
+export const GroupBordered: Story = {
+  render: () => (
+    <ItemGroup bordered divider>
+      <Item>
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>文档管理</ItemTitle>
+          <ItemDescription>管理所有项目文档</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <ImageIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>图片资源</ItemTitle>
+          <ItemDescription>管理图片和媒体文件</ItemDescription>
+        </ItemContent>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <StarIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>收藏夹</ItemTitle>
+          <ItemDescription>查看已收藏的内容</ItemDescription>
+        </ItemContent>
+      </Item>
+    </ItemGroup>
+  ),
+};
+
+/** 带 Header 和 Footer 的列表 */
+export const GroupWithHeaderFooter: Story = {
+  render: () => (
+    <ItemGroup bordered divider>
+      <ItemGroupHeader>通知列表</ItemGroupHeader>
+      <Item>
+        <ItemMedia variant="icon">
+          <StarIcon className="text-warning" />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>新功能上线</ItemTitle>
+          <ItemDescription>系统已完成 v2.0 升级</ItemDescription>
+        </ItemContent>
+        <ItemExtra>2 小时前</ItemExtra>
+      </Item>
+      <Item>
+        <ItemMedia variant="icon">
+          <FileIcon />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>文档更新</ItemTitle>
+          <ItemDescription>API 文档已同步至最新版本</ItemDescription>
+        </ItemContent>
+        <ItemExtra>昨天</ItemExtra>
+      </Item>
+      <ItemGroupFooter>
+        <span>共 2 条通知</span>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+        >
+          查看全部
+        </Button>
+      </ItemGroupFooter>
+    </ItemGroup>
+  ),
+};
+
+/** 单 Item 内部 Header + Footer */
+export const WithHeaderFooter: Story = {
+  render: () => (
+    <Item variant="outline">
+      <ItemHeader>
+        <ItemTitle>任务标题</ItemTitle>
+        <Tag variant="status" status="processing">
+          进行中
+        </Tag>
+      </ItemHeader>
+      <ItemContent>
+        <ItemDescription>
+          这是一个较为复杂的列表项，包含头部和底部区域。
+        </ItemDescription>
+      </ItemContent>
+      <ItemFooter>
+        <span>截止：2025-01-15</span>
+        <Button
+          size="sm"
+          variant="ghost"
+          className="text-muted-foreground hover:bg-transparent hover:text-foreground"
+        >
+          查看
+        </Button>
+      </ItemFooter>
+    </Item>
+  ),
+};
+
+/** 图文列表（复刻 cloud-design complex） */
+export const ImageList: Story = {
+  render: () => (
+    <ItemGroup divider>
+      <Item layout="horizontal">
+        <ItemMedia variant="image">
+          <img
+            src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?w=80&h=80&fit=crop"
+            alt="thumb"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>构建一套产品化设计系统</ItemTitle>
+          <ItemDescription>
+            随着互联网行业的聚变式发展，在电商业务从"信息透出"到"在线交易"的过程中…
+          </ItemDescription>
+        </ItemContent>
+        <ItemExtra>$20</ItemExtra>
+      </Item>
+      <Item layout="horizontal">
+        <ItemMedia variant="image">
+          <img
+            src="https://images.unsplash.com/photo-1551650975-87deedd944c3?w=80&h=80&fit=crop"
+            alt="thumb"
+          />
+        </ItemMedia>
+        <ItemContent>
+          <ItemTitle>移动端响应式方案</ItemTitle>
+          <ItemDescription>
+            响应式设计在现代 Web 开发中扮演着越来越重要的角色…
+          </ItemDescription>
+        </ItemContent>
+        <ItemExtra>$10</ItemExtra>
+      </Item>
+    </ItemGroup>
+  ),
+};

package/src/components/label/index.tsx

@@ -0,0 +1,44 @@
+/**
+ * 标签 Label
+ *
+ * 表单控件的文字标签，自动关联输入框，基于 Radix Label 原语。
+ *
+ * @when
+ * - 表单控件的描述标签
+ * - 必填项标记
+ * - 分组标题
+ */
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+export interface LabelProps
+  extends Omit<React.ComponentProps<typeof LabelPrimitive.Root>, 'htmlFor'> {
+  /** 是否为必填项，渲染 label 文本后的红色 `*` 标记。 @default false */
+  required?: boolean;
+  /** 关联的表单控件 id，等同于原生 `<label for>`。 */
+  htmlFor?: string;
+}
+
+function Label({ className, required, children, ...props }: LabelProps) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-1 text-xs leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {required && (
+        <span aria-hidden="true" className="text-destructive">
+          *
+        </span>
+      )}
+    </LabelPrimitive.Root>
+  );
+}
+
+export { Label };

package/src/components/label/meta.md

@@ -0,0 +1,68 @@
+# Label
+
+> 本文件由 `pnpm gen:meta` 自动生成，**请勿手动编辑**。
+
+## 描述
+
+标签 Label
+表单控件的文字标签，自动关联输入框，基于 Radix Label 原语。
+
+## 使用场景
+
+- 表单控件的描述标签
+- 必填项标记
+- 分组标题
+
+## Props
+
+| 名称 | 类型 | 默认值 | 必填 | 说明 |
+| --- | --- | --- | --- | --- |
+| `required` | `boolean` | `false` | – | 是否为必填项，渲染 label 文本后的红色 `*` 标记。 |
+| `htmlFor` | `string` | – | – | 关联的表单控件 id，等同于原生 `<label for>`。 |
+
+## 示例
+
+### WithInput
+
+关联输入框
+
+```tsx
+<div className="flex flex-col gap-1.5">
+  <Label htmlFor="email">邮箱地址</Label>
+  <Input id="email" type="email" placeholder="输入邮箱" />
+</div>
+```
+
+### WithCheckbox
+
+关联复选框
+
+```tsx
+<div className="flex items-center gap-2">
+  <Checkbox id="terms" />
+  <Label htmlFor="terms">同意服务条款</Label>
+</div>
+```
+
+### Disabled
+
+禁用状态
+
+```tsx
+<div className="group" data-disabled="true">
+  <Label>禁用标签</Label>
+</div>
+```
+
+### RequiredWithInput
+
+必填 + 关联输入框
+
+```tsx
+<div className="flex flex-col gap-1">
+  <Label htmlFor="name" required>
+    姓名
+  </Label>
+  <Input id="name" placeholder="请输入姓名" />
+</div>
+```

package/src/components/label/stories.tsx

@@ -0,0 +1,64 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Label } from './index';
+import { Input } from '@/components/input';
+import { Checkbox } from '@/components/checkbox';
+
+const meta: Meta<typeof Label> = {
+  title: '数据录入 · Data Entry/Label 标签',
+  component: Label,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Label>;
+
+/** 基础标签 */
+export const Default: Story = {
+  render: () => <Label>用户名</Label>,
+};
+
+/** 关联输入框 */
+export const WithInput: Story = {
+  render: () => (
+    <div className="flex flex-col gap-1.5">
+      <Label htmlFor="email">邮箱地址</Label>
+      <Input id="email" type="email" placeholder="输入邮箱" />
+    </div>
+  ),
+};
+
+/** 关联复选框 */
+export const WithCheckbox: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Checkbox id="terms" />
+      <Label htmlFor="terms">同意服务条款</Label>
+    </div>
+  ),
+};
+
+/** 禁用状态 */
+export const Disabled: Story = {
+  render: () => (
+    <div className="group" data-disabled="true">
+      <Label>禁用标签</Label>
+    </div>
+  ),
+};
+
+/** 必填标记 */
+export const Required: Story = {
+  render: () => <Label required>用户名</Label>,
+};
+
+/** 必填 + 关联输入框 */
+export const RequiredWithInput: Story = {
+  render: () => (
+    <div className="flex flex-col gap-1">
+      <Label htmlFor="name" required>
+        姓名
+      </Label>
+      <Input id="name" placeholder="请输入姓名" />
+    </div>
+  ),
+};