@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/mentions/mentions.stories.tsx

@@ -1,189 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Mentions } from './mentions';
-
-const meta: Meta<typeof Mentions> = {
-  title: '废弃 · Deprecated/Mentions',
-  component: Mentions,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\n提及输入 —— 在多行文本中输入触发符(`@` / `#` / `/` 等)即弹出候选下拉,选中后插入 `@name<split>`,用于评论 @ 同事、# 话题、/ 命令等场景。基于 `Textarea` + 自定义 portal-less 候选层,等价 antd `Mentions`:`options` 候选、`prefix` 触发符、`split` 分隔、`onSearch` 异步刷新、`onSelect` 选中回调。键盘 ↑↓ 切换、Enter / Tab 选中、Esc 关闭;email 类 `a@b` 不会误触(触发符前必须为空白或行首)。视觉走 OpenTrek semantic tokens,所有样式来自 `@teamix-evo/tokens`,无 mock。',
-      },
-    },
-  },
-  argTypes: {
-    prefix: { control: 'text' },
-    placeholder: { control: 'text' },
-    rows: { control: { type: 'number', min: 1, max: 10 } },
-    disabled: { control: 'boolean' },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Mentions>;
-
-const users = [
-  { value: 'alice', label: 'Alice (前端)' },
-  { value: 'bob', label: 'Bob (后端)' },
-  { value: 'carol', label: 'Carol (设计)' },
-  { value: 'david', label: 'David (产品)' },
-];
-
-export const Playground: Story = {
-  args: { placeholder: '输入 @ 提及同事...', options: users, rows: 3 },
-  parameters: {
-    docs: {
-      description: {
-        story:
-          '基础 @提及 —— 输入 `@` 触发,候选从 `options` 中按 query 过滤;键盘 ↑↓ + Enter 选中,Esc 关闭。',
-      },
-    },
-  },
-};
-
-export const HashtagPrefix: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '自定义前缀 —— `prefix="#"` 用于话题标签场景。`prefix` 必须是单字符,多字符会与正文混淆。',
-      },
-    },
-  },
-  render: () => (
-    <Mentions
-      options={[
-        { value: 'frontend', label: '#frontend' },
-        { value: 'backend', label: '#backend' },
-        { value: 'design', label: '#design' },
-      ]}
-      prefix="#"
-      placeholder="输入 # 添加话题..."
-    />
-  ),
-};
-
-export const Multiline: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '多行场景 —— `rows={6}` 给到更长的输入区域。Enter 在候选打开时被消费(选中候选);候选关闭时回归原生换行 —— 这是预期行为。',
-      },
-    },
-  },
-  render: () => (
-    <Mentions
-      options={users}
-      rows={6}
-      placeholder={'多行评论:\n第一行...\n第二行 @ 提及同事...\n回车在候选打开时是"选中",关闭时是"换行"。'}
-    />
-  ),
-};
-
-export const AsyncSearch: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '异步候选 —— `onSearch(query, prefix)` 由消费侧拉接口刷新 `options`(组件不内置网络层)。下方实时显示当前候选数。',
-      },
-    },
-  },
-  render: () => {
-    const [opts, setOpts] = React.useState(users);
-    return (
-      <div className="flex flex-col gap-2">
-        <Mentions
-          options={opts}
-          placeholder="输入 @ 触发模拟异步搜索..."
-          onSearch={(q) => {
-            const next = users.filter((u) =>
-              u.value.toLowerCase().includes(q.toLowerCase()),
-            );
-            // simulate latency
-            window.setTimeout(() => setOpts(next), 80);
-          }}
-        />
-        <div className="text-xs text-muted-foreground">
-          当前候选数: {opts.length}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const WithOnSelect: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          'onSelect 回调 —— 在选中候选时记录最后一次选择。注意:`onSelect` 与 `onChange` 互不替代 —— 文本写入由 `onChange` 已经处理,`onSelect` 仅做埋点 / 业务联动。',
-      },
-    },
-  },
-  render: () => {
-    const [picked, setPicked] = React.useState<string | null>(null);
-    return (
-      <div className="flex flex-col gap-2">
-        <Mentions
-          options={users}
-          placeholder="选一个 @ 试试..."
-          onSelect={(opt, prefix) => setPicked(`${prefix}${opt.value}`)}
-        />
-        <div className="text-xs text-muted-foreground">
-          上次选中:{' '}
-          <code className="rounded bg-muted px-1">{picked ?? '(无)'}</code>
-        </div>
-      </div>
-    );
-  },
-};
-
-export const DisabledOption: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '禁用候选项 —— 单个 option 的 `disabled` 会让它在下拉中变灰且不可选中(键盘跳过、点击无效)。',
-      },
-    },
-  },
-  render: () => (
-    <Mentions
-      options={[
-        { value: 'alice', label: 'Alice (在线)' },
-        { value: 'bob', label: 'Bob (离线)', disabled: true },
-        { value: 'carol', label: 'Carol (在线)' },
-      ]}
-      placeholder="@ 试试,Bob 不可选..."
-    />
-  ),
-};
-
-export const Disabled: Story = {
-  parameters: {
-    controls: { disable: true },
-    docs: {
-      description: {
-        story:
-          '整组禁用 —— `disabled` 透传 Textarea,既不可输入也不弹出候选。',
-      },
-    },
-  },
-  render: () => (
-    <Mentions
-      options={users}
-      defaultValue="@alice 这个评论已经被锁定..."
-      disabled
-    />
-  ),
-};

package/src/components/mentions/mentions.tsx

@@ -1,243 +0,0 @@
-import * as React from 'react';
-
-import { cn } from '@/utils/cn';
-import { Textarea } from '@/components/textarea/textarea';
-
-export interface MentionsOption {
-  /** 真实插入到文本中的 value(不含前缀)。 */
-  value: string;
-  /** 候选列表显示文本(不传则用 value)。 */
-  label?: React.ReactNode;
-  /** 禁用此选项。 */
-  disabled?: boolean;
-}
-
-export interface MentionsProps
-  extends Omit<
-    React.TextareaHTMLAttributes<HTMLTextAreaElement>,
-    'onChange' | 'value' | 'defaultValue' | 'onSelect'
-  > {
-  /** 候选项(antd `options` 并集)。 */
-  options: MentionsOption[];
-  /** 受控值。 */
-  value?: string;
-  /** uncontrolled 初值。 */
-  defaultValue?: string;
-  /** 文本变化回调。 */
-  onChange?: (value: string) => void;
-  /**
-   * 触发符(antd `prefix` 并集) — 通常是 `@` 或 `#`。
-   * @default "@"
-   */
-  prefix?: string;
-  /**
-   * 选中候选项后插入文本的尾随分隔(对齐 antd `split` 默认空格)。
-   * @default " "
-   */
-  split?: string;
-  /**
-   * 用户在 prefix 后输入时的搜索回调,用于业务侧异步刷新 `options`。
-   */
-  onSearch?: (query: string, prefix: string) => void;
-  /**
-   * 选中候选项时回调。
-   */
-  onSelect?: (option: MentionsOption, prefix: string) => void;
-  /**
-   * 文本框尺寸传透传 Textarea(行数)。
-   * @default 3
-   */
-  rows?: number;
-  /** 禁用。 */
-  disabled?: boolean;
-}
-
-interface TriggerCtx {
-  /** prefix 在 value 中的索引(`@` 的位置)。 */
-  start: number;
-  /** prefix 后到光标位置的查询字符串。 */
-  query: string;
-}
-
-function getTriggerContext(
-  value: string,
-  caret: number,
-  prefix: string,
-): TriggerCtx | null {
-  if (caret <= 0) return null;
-  // Walk backwards from caret until we hit a whitespace, newline, or `prefix`.
-  for (let i = caret - 1; i >= 0; i--) {
-    const ch = value[i];
-    if (ch === undefined) return null;
-    if (ch === prefix) {
-      // The char immediately before prefix must be start-of-string / whitespace / newline,
-      // otherwise we'd trigger on emails like a@b.
-      const prev = i === 0 ? '' : value[i - 1] ?? '';
-      if (prev === '' || /\s/.test(prev)) {
-        return { start: i, query: value.slice(i + 1, caret) };
-      }
-      return null;
-    }
-    if (/\s/.test(ch)) return null;
-  }
-  return null;
-}
-
-const Mentions = React.forwardRef<HTMLTextAreaElement, MentionsProps>(
-  (
-    {
-      options,
-      value,
-      defaultValue,
-      onChange,
-      prefix = '@',
-      split = ' ',
-      onSearch,
-      onSelect,
-      rows = 3,
-      disabled,
-      className,
-      onKeyDown,
-      ...props
-    },
-    ref,
-  ) => {
-    const isControlled = value !== undefined;
-    const [internal, setInternal] = React.useState<string>(defaultValue ?? '');
-    const current = isControlled ? value! : internal;
-
-    const innerRef = React.useRef<HTMLTextAreaElement | null>(null);
-    React.useImperativeHandle(
-      ref,
-      () => innerRef.current as HTMLTextAreaElement,
-    );
-
-    const [ctx, setCtx] = React.useState<TriggerCtx | null>(null);
-    const [activeIdx, setActiveIdx] = React.useState(0);
-
-    const filtered = React.useMemo(() => {
-      if (!ctx) return [];
-      const q = ctx.query.toLowerCase();
-      return options.filter((o) =>
-        q === '' ? true : o.value.toLowerCase().includes(q),
-      );
-    }, [ctx, options]);
-
-    React.useEffect(() => {
-      setActiveIdx(0);
-    }, [ctx?.query]);
-
-    const update = (next: string) => {
-      if (!isControlled) setInternal(next);
-      onChange?.(next);
-    };
-
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const next = e.target.value;
-      update(next);
-      const caret = e.target.selectionStart ?? next.length;
-      const t = getTriggerContext(next, caret, prefix);
-      setCtx(t);
-      if (t) onSearch?.(t.query, prefix);
-    };
-
-    const insertOption = (opt: MentionsOption) => {
-      if (!ctx || opt.disabled) return;
-      const el = innerRef.current;
-      const before = current.slice(0, ctx.start);
-      const after = current.slice(
-        el?.selectionStart ?? ctx.start + 1 + ctx.query.length,
-      );
-      const inserted = `${prefix}${opt.value}${split}`;
-      const next = `${before}${inserted}${after}`;
-      update(next);
-      onSelect?.(opt, prefix);
-      setCtx(null);
-      // Restore caret right after the inserted mention.
-      window.requestAnimationFrame(() => {
-        if (!el) return;
-        const pos = (before + inserted).length;
-        el.focus();
-        el.setSelectionRange(pos, pos);
-      });
-    };
-
-    const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      if (ctx && filtered.length > 0) {
-        if (e.key === 'ArrowDown') {
-          e.preventDefault();
-          setActiveIdx((i) => (i + 1) % filtered.length);
-          return;
-        }
-        if (e.key === 'ArrowUp') {
-          e.preventDefault();
-          setActiveIdx((i) => (i - 1 + filtered.length) % filtered.length);
-          return;
-        }
-        if (e.key === 'Enter' || e.key === 'Tab') {
-          const opt = filtered[activeIdx];
-          if (opt && !opt.disabled) {
-            e.preventDefault();
-            insertOption(opt);
-            return;
-          }
-        }
-        if (e.key === 'Escape') {
-          e.preventDefault();
-          setCtx(null);
-          return;
-        }
-      }
-      onKeyDown?.(e);
-    };
-
-    return (
-      <div className={cn('relative', className)}>
-        <Textarea
-          ref={innerRef}
-          value={current}
-          rows={rows}
-          disabled={disabled}
-          onChange={handleChange}
-          onKeyDown={handleKeyDown}
-          onBlur={() => {
-            // Delay so click-on-option can fire first.
-            window.setTimeout(() => setCtx(null), 120);
-          }}
-          {...props}
-        />
-        {ctx && filtered.length > 0 ? (
-          <ul
-            role="listbox"
-            className="absolute left-0 top-full z-50 mt-1 max-h-60 w-56 overflow-auto rounded-md border border-border bg-popover p-1 text-xs text-popover-foreground shadow-md"
-          >
-            {filtered.map((opt, i) => (
-              <li
-                key={opt.value}
-                role="option"
-                aria-selected={i === activeIdx}
-                onMouseDown={(e) => {
-                  e.preventDefault();
-                  insertOption(opt);
-                }}
-                onMouseEnter={() => setActiveIdx(i)}
-                className={cn(
-                  'cursor-pointer rounded-sm px-2 py-1.5',
-                  i === activeIdx &&
-                    !opt.disabled &&
-                    'bg-accent text-accent-foreground',
-                  opt.disabled && 'cursor-not-allowed opacity-50',
-                )}
-              >
-                {opt.label ?? opt.value}
-              </li>
-            ))}
-          </ul>
-        ) : null}
-      </div>
-    );
-  },
-);
-Mentions.displayName = 'Mentions';
-
-export { Mentions };

package/src/components/menubar/menubar.meta.md

@@ -1,118 +0,0 @@
----
-id: menubar
-name: Menubar
-displayName: 菜单栏
-type: component
-category: deprecated
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Menubar 菜单栏
-
-应用顶部菜单栏 — Radix Menubar(典型 macOS 风格,文件 / 编辑 / 视图 / 帮助)。
-**与 DropdownMenu 区别**:Menubar 是**横排多个一级菜单**,鼠标 hover 切换;DropdownMenu 是单个独立下拉。
-
-## When to use
-
-- 桌面应用 / 编辑器顶部菜单(VS Code / Figma 风格)
-- 多组关联操作的横向汇总
-
-## When NOT to use
-
-- 单按钮触发 → `DropdownMenu`
-- 右键 → `ContextMenu`
-- 主导航(分类页面入口)→ `NavigationMenu`
-
-## Props
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成。下表是 `Menubar`(Root) 的 props。
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`menubar.tsx`](./menubar.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-> 以下表格由 `pnpm --filter @teamix-evo/ui gen:meta` 自动生成,数据源是 [`manifest.json`](../../../manifest.json)。**手工编辑 marker 之间的内容会在下次生成时被覆盖**。
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add menubar` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add @radix-ui/react-menubar@^1.1.0 lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-> 完整子组件:`Menubar` / `MenubarMenu` / `MenubarTrigger` / `MenubarContent` / `MenubarItem` / `MenubarCheckboxItem` / `MenubarRadioItem` / `MenubarLabel` / `MenubarSeparator` / `MenubarShortcut` / `MenubarSub` / `MenubarSubTrigger` / `MenubarSubContent` / `MenubarGroup` / `MenubarRadioGroup` / `MenubarPortal`。
-
-## AI 生成纪律
-
-- **Menubar 内必有 MenubarMenu**:每个一级菜单一个 `<MenubarMenu>`
-- **行业惯例顺序**:文件 / 编辑 / 视图 / 工具 / 帮助 — 不要打乱
-- **快捷键用 `<MenubarShortcut>`**:右对齐,与平台风格一致(macOS ⌘ / Windows Ctrl)
-- **避免太深的 Sub 嵌套**:超过 2 级的子菜单影响可用性
-
-## Examples
-
-```tsx
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-} from '@/components/ui/menubar';
-
-<Menubar>
-  <MenubarMenu>
-    <MenubarTrigger>文件</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>
-        新建文件 <MenubarShortcut>⌘N</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem>
-        打开 <MenubarShortcut>⌘O</MenubarShortcut>
-      </MenubarItem>
-      <MenubarSeparator />
-      <MenubarSub>
-        <MenubarSubTrigger>分享</MenubarSubTrigger>
-        <MenubarSubContent>
-          <MenubarItem>邮件</MenubarItem>
-          <MenubarItem>消息</MenubarItem>
-        </MenubarSubContent>
-      </MenubarSub>
-      <MenubarSeparator />
-      <MenubarItem>
-        退出 <MenubarShortcut>⌘Q</MenubarShortcut>
-      </MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-  <MenubarMenu>
-    <MenubarTrigger>编辑</MenubarTrigger>
-    <MenubarContent>
-      <MenubarItem>
-        撤销 <MenubarShortcut>⌘Z</MenubarShortcut>
-      </MenubarItem>
-      <MenubarItem>
-        重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-      </MenubarItem>
-    </MenubarContent>
-  </MenubarMenu>
-</Menubar>;
-```

package/src/components/menubar/menubar.stories.tsx

@@ -1,141 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import {
-  Menubar,
-  MenubarMenu,
-  MenubarTrigger,
-  MenubarContent,
-  MenubarItem,
-  MenubarSeparator,
-  MenubarShortcut,
-  MenubarSub,
-  MenubarSubTrigger,
-  MenubarSubContent,
-  MenubarCheckboxItem,
-  MenubarRadioGroup,
-  MenubarRadioItem,
-} from './menubar';
-
-const meta: Meta<typeof Menubar> = {
-  title: '废弃 · Deprecated/Menubar',
-  component: Menubar,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '⚠️ **已废弃** — 仅 Storybook 留档,不通过 manifest 对外发布。\n\nMenubar 菜单栏 —— 在桌面应用或编辑器顶部带出 macOS 风格的“文件 / 编辑 / 视图 / 帮助”多一级菜单。Radix `Menubar` 内核 + shadcn 原子，**shadcn 专有、antd 未提供对应原子**，对齐 shadcn 的 `MenubarMenu` / `MenubarTrigger` / `MenubarContent` / `MenubarShortcut` / `MenubarSub` / `MenubarCheckboxItem` / `MenubarRadioItem`。视觉走 OpenTrek semantic tokens，所有样式来自 `@teamix-evo/tokens`，无 mock。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Menubar>;
-
-export const Default: Story = {
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>文件</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            新建文件 <MenubarShortcut>⌘N</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            打开 <MenubarShortcut>⌘O</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarSub>
-            <MenubarSubTrigger>分享</MenubarSubTrigger>
-            <MenubarSubContent>
-              <MenubarItem>邮件</MenubarItem>
-              <MenubarItem>消息</MenubarItem>
-              <MenubarItem>复制链接</MenubarItem>
-            </MenubarSubContent>
-          </MenubarSub>
-          <MenubarSeparator />
-          <MenubarItem>
-            退出 <MenubarShortcut>⌘Q</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>编辑</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>
-            撤销 <MenubarShortcut>⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            重做 <MenubarShortcut>⇧⌘Z</MenubarShortcut>
-          </MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>
-            剪切 <MenubarShortcut>⌘X</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            复制 <MenubarShortcut>⌘C</MenubarShortcut>
-          </MenubarItem>
-          <MenubarItem>
-            粘贴 <MenubarShortcut>⌘V</MenubarShortcut>
-          </MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-      <MenubarMenu>
-        <MenubarTrigger>视图</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>侧边栏</MenubarItem>
-          <MenubarItem>状态栏</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-};
-
-export const WithCheckboxAndRadio: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [showStatus, setShowStatus] = React.useState(true);
-    const [showActivity, setShowActivity] = React.useState(false);
-    const [profile, setProfile] = React.useState('benoit');
-    return (
-      <Menubar>
-        <MenubarMenu>
-          <MenubarTrigger>视图</MenubarTrigger>
-          <MenubarContent>
-            <MenubarCheckboxItem checked={showStatus} onCheckedChange={setShowStatus}>
-              状态栏
-            </MenubarCheckboxItem>
-            <MenubarCheckboxItem checked={showActivity} onCheckedChange={setShowActivity}>
-              活动栏
-            </MenubarCheckboxItem>
-            <MenubarSeparator />
-            <MenubarRadioGroup value={profile} onValueChange={setProfile}>
-              <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
-              <MenubarRadioItem value="colm">Colm</MenubarRadioItem>
-              <MenubarRadioItem value="hubert">Hubert</MenubarRadioItem>
-            </MenubarRadioGroup>
-          </MenubarContent>
-        </MenubarMenu>
-      </Menubar>
-    );
-  },
-};
-
-export const DisabledItems: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Menubar>
-      <MenubarMenu>
-        <MenubarTrigger>文件</MenubarTrigger>
-        <MenubarContent>
-          <MenubarItem>新建</MenubarItem>
-          <MenubarItem disabled>从模板新建（即将上线）</MenubarItem>
-          <MenubarSeparator />
-          <MenubarItem>保存</MenubarItem>
-          <MenubarItem disabled>发布到云端（未设置）</MenubarItem>
-        </MenubarContent>
-      </MenubarMenu>
-    </Menubar>
-  ),
-};