@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/resizable/resizable.stories.tsx

@@ -1,104 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  ResizablePanelGroup,
-  ResizablePanel,
-  ResizableHandle,
-} from './resizable';
-
-const meta: Meta<typeof ResizablePanelGroup> = {
-  title: '布局 · Layout/Resizable',
-  component: ResizablePanelGroup,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '可拖拽分栏 — 编辑器 / 桌面应用风格(VS Code、Figma)。基于 react-resizable-panels,支持横/纵向、嵌套、min/max 限制、握把可视化。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ResizablePanelGroup>;
-
-export const Horizontal: Story = {
-  render: () => (
-    <ResizablePanelGroup
-      direction="horizontal"
-      className="min-h-[300px] w-[600px] rounded-lg border border-border"
-    >
-      <ResizablePanel defaultSize={30} minSize={20}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="text-sm">侧栏(30%)</span>
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={70}>
-        <div className="flex h-full items-center justify-center p-6">
-          <span className="text-sm">主区(70%)</span>
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  ),
-};
-
-export const Vertical: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ResizablePanelGroup
-      direction="vertical"
-      className="min-h-[400px] w-[400px] rounded-lg border border-border"
-    >
-      <ResizablePanel defaultSize={70}>
-        <div className="flex h-full items-center justify-center p-6 text-sm">
-          上(70%)
-        </div>
-      </ResizablePanel>
-      <ResizableHandle />
-      <ResizablePanel defaultSize={30}>
-        <div className="flex h-full items-center justify-center p-6 text-sm">
-          下(30%)
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  ),
-};
-
-export const Nested: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <ResizablePanelGroup
-      direction="horizontal"
-      className="min-h-[400px] w-[700px] rounded-lg border border-border"
-    >
-      <ResizablePanel defaultSize={20} minSize={15}>
-        <div className="flex h-full items-center justify-center p-4 text-sm">
-          目录
-        </div>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={55}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={70}>
-            <div className="flex h-full items-center justify-center p-4 text-sm">
-              编辑区
-            </div>
-          </ResizablePanel>
-          <ResizableHandle />
-          <ResizablePanel defaultSize={30}>
-            <div className="flex h-full items-center justify-center p-4 text-sm">
-              终端
-            </div>
-          </ResizablePanel>
-        </ResizablePanelGroup>
-      </ResizablePanel>
-      <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={25}>
-        <div className="flex h-full items-center justify-center p-4 text-sm">
-          预览
-        </div>
-      </ResizablePanel>
-    </ResizablePanelGroup>
-  ),
-};

package/src/components/resizable/resizable.tsx

@@ -1,56 +0,0 @@
-import * as React from 'react';
-import { GripVertical } from 'lucide-react';
-import * as ResizablePrimitive from 'react-resizable-panels';
-
-import { cn } from '@/utils/cn';
-
-export interface ResizablePanelGroupProps
-  extends React.ComponentProps<typeof ResizablePrimitive.PanelGroup> {}
-
-const ResizablePanelGroup = ({
-  className,
-  ...props
-}: ResizablePanelGroupProps) => (
-  <ResizablePrimitive.PanelGroup
-    className={cn(
-      'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
-      className,
-    )}
-    {...props}
-  />
-);
-ResizablePanelGroup.displayName = 'ResizablePanelGroup';
-
-const ResizablePanel = ResizablePrimitive.Panel;
-
-export interface ResizableHandleProps
-  extends React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> {
-  /**
-   * 是否在 handle 上显示握把图标(`<GripVertical />`),提升可发现性。
-   * @default false
-   */
-  withHandle?: boolean;
-}
-
-const ResizableHandle = ({
-  withHandle = false,
-  className,
-  ...props
-}: ResizableHandleProps) => (
-  <ResizablePrimitive.PanelResizeHandle
-    className={cn(
-      'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90',
-      className,
-    )}
-    {...props}
-  >
-    {withHandle ? (
-      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border border-border bg-border">
-        <GripVertical className="size-2.5" />
-      </div>
-    ) : null}
-  </ResizablePrimitive.PanelResizeHandle>
-);
-ResizableHandle.displayName = 'ResizableHandle';
-
-export { ResizablePanelGroup, ResizablePanel, ResizableHandle };

package/src/components/result/result.meta.md

@@ -1,95 +0,0 @@
----
-id: result
-name: Result
-type: component
-category: feedback
-since: 0.1.0
-package: '@teamix-evo/ui'
-displayName: 结果页
----
-
-# Result 结果页
-
-结果页 — antd 独有补足。**整页级反馈**:操作成功、失败、404、403、500 等场景的居中状态页(图标 + 标题 + 副标题 + 操作区)。
-
-## When to use
-
-- 操作完成的成功页(订单提交、支付完成)
-- 错误页(500 / 404 / 403)
-- 表单提交失败的反馈页
-- 空数据 + 引导操作(也可考虑 `Empty`)
-
-## When NOT to use
-
-- 行内提示 → `Alert`
-- 短暂消息 → `Sonner`
-- 阻断式确认 → `AlertDialog`
-
-## Props
-
-<!-- auto:props:begin -->
-| 名称 | 类型 | 默认值 | 必填 | 说明 |
-| --- | --- | --- | --- | --- |
-| `status` | `ResultStatus` | `"info"` | – | 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。 |
-| `icon` | `React.ReactNode` | – | – | 自定义图标(覆盖默认)。 |
-| `title` | `React.ReactNode` | – | – | 标题。 |
-| `subTitle` | `React.ReactNode` | – | – | 副标题(描述)。 |
-| `extra` | `React.ReactNode` | – | – | 操作区(放 Button)。 |
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add result` 时,以下 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 生成纪律
-
-- **`status` 决定默认图标 + 配色**:用语义,不要随便覆盖
-- **`extra` 必有主 / 次操作**:错误页放"重试 + 返回",成功页放"查看详情 + 完成"
-- **大字号错误码**(`404 / 403 / 500`)自动渲染,无需自行加 icon
-- **不要嵌套 Result**:Result 是页面级组件
-- **subTitle 简短**:< 1 段,长说明用单独的内容区
-
-## Examples
-
-```tsx
-import { Result } from '@/components/ui/result';
-import { Button } from '@/components/ui/button';
-
-// 成功
-<Result
-  status="success"
-  title="提交成功"
-  subTitle="订单已生成,我们将尽快处理。"
-  extra={[
-    <Button key="view">查看订单</Button>,
-    <Button key="back" variant="outline">返回首页</Button>,
-  ]}
-/>
-
-// 错误页
-<Result
-  status="500"
-  title="服务异常"
-  subTitle="抱歉,系统出错。请稍后重试或联系管理员。"
-  extra={<Button>返回首页</Button>}
-/>
-
-// 404
-<Result status="404" title="页面不存在" extra={<Button>返回首页</Button>} />
-```

package/src/components/result/result.stories.tsx

@@ -1,67 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Result } from './result';
-import { Button } from '@/components/button/button';
-
-const meta: Meta<typeof Result> = {
-  title: '反馈 · Feedback/Result',
-  component: Result,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '结果页 — 整页级反馈（成功 / 失败 / 404 / 403 / 500）。图标 + 标题 + 副标题 + 操作区，自动配色。等价 antd Result。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Result>;
-
-export const Success: Story = {
-  render: () => (
-    <Result
-      status="success"
-      title="提交成功"
-      subTitle="订单已生成,我们将尽快处理并通过邮件通知你。"
-      extra={
-        <>
-          <Button>查看订单</Button>
-          <Button variant="outline">返回首页</Button>
-        </>
-      }
-    />
-  ),
-};
-
-export const Error500: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Result
-      status="500"
-      title="服务异常"
-      subTitle="抱歉,系统出错了。请稍后重试或联系管理员。"
-      extra={<Button>返回首页</Button>}
-    />
-  ),
-};
-
-export const NotFound: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Result
-      status="404"
-      title="页面不存在"
-      subTitle="你访问的页面已被移除或不存在。"
-      extra={<Button>返回首页</Button>}
-    />
-  ),
-};
-
-export const Forbidden: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Result status="403" title="无权访问" subTitle="联系管理员申请访问权限。" />
-  ),
-};

package/src/components/result/result.tsx

@@ -1,100 +0,0 @@
-import * as React from 'react';
-import { AlertCircle, CheckCircle2, Info, XCircle } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-
-export type ResultStatus =
-  | 'success'
-  | 'error'
-  | 'info'
-  | 'warning'
-  | '404'
-  | '403'
-  | '500';
-
-const iconMap = {
-  success: { Icon: CheckCircle2, color: 'text-success' },
-  error: { Icon: XCircle, color: 'text-destructive' },
-  info: { Icon: Info, color: 'text-info' },
-  warning: { Icon: AlertCircle, color: 'text-warning' },
-  '404': { Icon: AlertCircle, color: 'text-muted-foreground' },
-  '403': { Icon: AlertCircle, color: 'text-muted-foreground' },
-  '500': { Icon: AlertCircle, color: 'text-destructive' },
-} as const;
-
-const codeText = {
-  '404': '404',
-  '403': '403',
-  '500': '500',
-} as const;
-
-export interface ResultProps
-  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-  /**
-   * 状态类型 — 决定默认图标和配色;`404 / 403 / 500` 显示大字号错误码代替图标。
-   * @default "info"
-   */
-  status?: ResultStatus;
-  /** 自定义图标(覆盖默认)。 */
-  icon?: React.ReactNode;
-  /** 标题。 */
-  title?: React.ReactNode;
-  /** 副标题(描述)。 */
-  subTitle?: React.ReactNode;
-  /** 操作区(放 Button)。 */
-  extra?: React.ReactNode;
-}
-
-const Result = React.forwardRef<HTMLDivElement, ResultProps>(
-  (
-    {
-      status = 'info',
-      icon,
-      title,
-      subTitle,
-      extra,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const { Icon, color } = iconMap[status];
-    const isCode = status === '404' || status === '403' || status === '500';
-    return (
-      <div
-        ref={ref}
-        className={cn(
-          'flex flex-col items-center gap-4 px-6 py-12 text-center',
-          className,
-        )}
-        {...props}
-      >
-        {icon ? (
-          <div className="text-6xl">{icon}</div>
-        ) : isCode ? (
-          <div className={cn('text-7xl font-bold', color)}>
-            {codeText[status as '404' | '403' | '500']}
-          </div>
-        ) : (
-          <Icon className={cn('size-16', color)} aria-hidden="true" />
-        )}
-        {title ? <h2 className="text-2xl font-semibold">{title}</h2> : null}
-        {subTitle ? (
-          <p className="max-w-prose text-xs text-muted-foreground">
-            {subTitle}
-          </p>
-        ) : null}
-        {children ? <div className="w-full">{children}</div> : null}
-        {extra ? (
-          <div className="flex flex-wrap items-center justify-center gap-2">
-            {extra}
-          </div>
-        ) : null}
-      </div>
-    );
-  },
-);
-Result.displayName = 'Result';
-
-export { Result };

package/src/components/scroll-area/scroll-area.meta.md

@@ -1,85 +0,0 @@
----
-id: scroll-area
-name: ScrollArea
-displayName: 滚动区域
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# ScrollArea 滚动区域
-
-自定义滚动容器 — Radix ScrollArea。**shadcn-only**(antd 用原生滚动)。
-**核心价值**:跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。
-
-## When to use
-
-- 需要一致滚动条样式的容器(列表 / 侧栏 / 抽屉内长内容)
-- 在 Radix Dialog / Sheet 内的可滚动子区域
-- 需要隐藏原生滚动条但保留滚动能力
-
-## When NOT to use
-
-- 整页滚动 → 用 `<body>` 默认
-- 短内容(< 视口)→ 不需要包装
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。
-
-<!-- auto:props:begin -->
-_(no props)_
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add scroll-area` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-scroll-area@^1.2.0
-```
-<!-- auto:deps:end -->
-
-> 子组件:`ScrollArea`(主容器,内置 Viewport + ScrollBar 组合)/ `ScrollBar`(独立 ScrollBar,需要自定义双向滚动时使用)。
-
-## AI 生成纪律
-
-- **必给容器固定高度**:ScrollArea 不会自动撑满父级,要么 `h-*` / `max-h-*`,要么父级 flex 撑开
-- **`type` 控制行为**:`auto`(默认,内容溢出才显示)/ `always`(常驻)/ `scroll`(交互后显示)/ `hover`(hover 时显示)
-- **横向滚动需独立 ScrollBar**:`<ScrollBar orientation="horizontal" />` 加在 `<ScrollArea>` 内
-- **不嵌套 ScrollArea**:嵌套滚动会让 thumb 行为混乱
-
-## Examples
-
-```tsx
-import { ScrollArea, ScrollBar } from '@/components/ui/scroll-area';
-
-// 纵向(默认)
-<ScrollArea className="h-72 w-48 rounded-md border p-4">
-  {Array.from({ length: 50 }).map((_, i) => (
-    <div key={i} className="text-sm">第 {i + 1} 行</div>
-  ))}
-</ScrollArea>
-
-// 横向 + 纵向
-<ScrollArea className="h-72 w-96 whitespace-nowrap rounded-md border">
-  <div className="flex w-max gap-4 p-4">
-    {items.map((it) => <div key={it.id} className="size-32 shrink-0">...</div>)}
-  </div>
-  <ScrollBar orientation="horizontal" />
-</ScrollArea>
-```

package/src/components/scroll-area/scroll-area.stories.tsx

@@ -1,49 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { ScrollArea, ScrollBar } from './scroll-area';
-
-const meta: Meta<typeof ScrollArea> = {
-  title: '废弃 · Deprecated/ScrollArea',
-  component: ScrollArea,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n自定义滚动容器 — 基于 Radix ScrollArea,跨浏览器一致的滚动条样式 + 触屏友好 + 自动隐藏 thumb。shadcn 专有,antd 用原生滚动。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof ScrollArea>;
-
-export const Vertical: Story = {
-  render: () => (
-    <ScrollArea className="h-72 w-48 rounded-md border border-border p-4">
-      {Array.from({ length: 50 }).map((_, i) => (
-        <div key={i} className="py-1 text-sm">
-          第 {i + 1} 行
-        </div>
-      ))}
-    </ScrollArea>
-  ),
-};
-
-export const Horizontal: Story = {
-  render: () => (
-    <ScrollArea className="w-96 whitespace-nowrap rounded-md border border-border">
-      <div className="flex w-max gap-4 p-4">
-        {Array.from({ length: 12 }).map((_, i) => (
-          <div
-            key={i}
-            className="flex size-32 shrink-0 items-center justify-center rounded-md bg-muted text-sm text-muted-foreground"
-          >
-            #{i + 1}
-          </div>
-        ))}
-      </div>
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  ),
-};

package/src/components/scroll-area/scroll-area.tsx

@@ -1,51 +0,0 @@
-import * as React from 'react';
-import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
-
-import { cn } from '@/utils/cn';
-
-export interface ScrollAreaProps
-  extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {}
-
-const ScrollArea = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  ScrollAreaProps
->(({ className, children, ...props }, ref) => (
-  <ScrollAreaPrimitive.Root
-    ref={ref}
-    className={cn('relative overflow-hidden', className)}
-    {...props}
-  >
-    <ScrollAreaPrimitive.Viewport className="size-full rounded-inherit">
-      {children}
-    </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
-    <ScrollAreaPrimitive.Corner />
-  </ScrollAreaPrimitive.Root>
-));
-ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-
-const ScrollBar = React.forwardRef<
-  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  React.ComponentPropsWithoutRef<
-    typeof ScrollAreaPrimitive.ScrollAreaScrollbar
-  >
->(({ className, orientation = 'vertical', ...props }, ref) => (
-  <ScrollAreaPrimitive.ScrollAreaScrollbar
-    ref={ref}
-    orientation={orientation}
-    className={cn(
-      'flex touch-none select-none transition-colors',
-      orientation === 'vertical' &&
-        'h-full w-2.5 border-l border-l-transparent p-px',
-      orientation === 'horizontal' &&
-        'h-2.5 flex-col border-t border-t-transparent p-px',
-      className,
-    )}
-    {...props}
-  >
-    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-  </ScrollAreaPrimitive.ScrollAreaScrollbar>
-));
-ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
-
-export { ScrollArea, ScrollBar };