@teamix-evo/ui 0.4.0 → 0.5.0

package/src/components/carousel/carousel.tsx

@@ -1,224 +0,0 @@
-import * as React from 'react';
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from 'embla-carousel-react';
-import { ArrowLeft, ArrowRight } from 'lucide-react';
-
-import { cn } from '@/utils/cn';
-import { Button } from '@/components/button/button';
-
-type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1];
-
-export interface CarouselProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** embla 选项透传(`loop / align / startIndex / dragFree` 等)。 */
-  opts?: CarouselOptions;
-  /** embla 插件数组(`autoplay`、`fade` 等)。 */
-  plugins?: CarouselPlugin;
-  /**
-   * 滚动方向。
-   * @default "horizontal"
-   */
-  orientation?: 'horizontal' | 'vertical';
-  /** 提供 embla API 的回调,用于业务侧自行控制(scrollNext / scrollTo 等)。 */
-  setApi?: (api: CarouselApi) => void;
-}
-
-interface CarouselContextValue {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: CarouselApi;
-  orientation: 'horizontal' | 'vertical';
-  scrollPrev: () => void;
-  scrollNext: () => void;
-  canScrollPrev: boolean;
-  canScrollNext: boolean;
-}
-
-const CarouselContext = React.createContext<CarouselContextValue | null>(null);
-
-function useCarousel() {
-  const ctx = React.useContext(CarouselContext);
-  if (!ctx)
-    throw new Error('useCarousel must be used within a <Carousel />');
-  return ctx;
-}
-
-const Carousel = React.forwardRef<HTMLDivElement, CarouselProps>(
-  (
-    {
-      orientation = 'horizontal',
-      opts,
-      plugins,
-      setApi,
-      className,
-      children,
-      ...props
-    },
-    ref,
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      { ...opts, axis: orientation === 'horizontal' ? 'x' : 'y' },
-      plugins,
-    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false);
-
-    const onSelect = React.useCallback((a: CarouselApi) => {
-      if (!a) return;
-      setCanScrollPrev(a.canScrollPrev());
-      setCanScrollNext(a.canScrollNext());
-    }, []);
-
-    const scrollPrev = React.useCallback(() => api?.scrollPrev(), [api]);
-    const scrollNext = React.useCallback(() => api?.scrollNext(), [api]);
-
-    React.useEffect(() => {
-      if (!api || !setApi) return;
-      setApi(api);
-    }, [api, setApi]);
-
-    React.useEffect(() => {
-      if (!api) return;
-      onSelect(api);
-      api.on('reInit', onSelect);
-      api.on('select', onSelect);
-      return () => {
-        api.off('select', onSelect);
-      };
-    }, [api, onSelect]);
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api,
-          orientation,
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          className={cn('relative', className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    );
-  },
-);
-Carousel.displayName = 'Carousel';
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel();
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          'flex',
-          orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
-          className,
-        )}
-        {...props}
-      />
-    </div>
-  );
-});
-CarouselContent.displayName = 'CarouselContent';
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel();
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        'min-w-0 shrink-0 grow-0 basis-full',
-        orientation === 'horizontal' ? 'pl-4' : 'pt-4',
-        className,
-      )}
-      {...props}
-    />
-  );
-});
-CarouselItem.displayName = 'CarouselItem';
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? '-left-12 top-1/2 -translate-y-1/2'
-          : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
-        className,
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      aria-label="上一张"
-      {...props}
-    >
-      <ArrowLeft />
-    </Button>
-  );
-});
-CarouselPrevious.displayName = 'CarouselPrevious';
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof Button>
->(({ className, variant = 'outline', size = 'icon', ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel();
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        'absolute size-8 rounded-full',
-        orientation === 'horizontal'
-          ? '-right-12 top-1/2 -translate-y-1/2'
-          : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
-        className,
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      aria-label="下一张"
-      {...props}
-    >
-      <ArrowRight />
-    </Button>
-  );
-});
-CarouselNext.displayName = 'CarouselNext';
-
-export {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-  type CarouselApi,
-};

package/src/components/cascader/cascader.meta.md

@@ -1,140 +0,0 @@
----
-id: cascader
-name: Cascader
-displayName: 级联选择
-type: component
-category: data-entry
-since: 0.1.0
-package: '@teamix-evo/ui'
----
-
-# Cascader 级联选择
-
-级联选择 — antd 独有补足。**等价 antd `Cascader`**。多级联动选择(地区 / 分类 / 组织架构 / 文件夹路径),选项树由 `options.children` 表达;点击触发器弹出多列面板,**叶子触发 onChange**(可改 `changeOnSelect` 为每级触发)。
-
-## When to use
-
-- 地区 / 行政区划选择(国 - 省 - 市 - 区)
-- 分类导航(电商类目、文件夹层级)
-- 组织架构选择(公司 - 部门 - 团队 - 人)
-
-## When NOT to use
-
-- 单层下拉 → `Select` / `Combobox`
-- 树形多选 → `TreeSelect`(可勾选)
-- 离散级别独立选择 → 多个 `Select` 并排(级联弱)
-
-## Props
-
-<!-- auto:props:begin -->
-_(组件无 `<Name>Props` interface — props 详见 [`cascader.tsx`](./cascader.tsx))_
-<!-- auto:props:end -->
-
-## 依赖
-
-<!-- auto:deps:begin -->
-### 同库依赖
-
-> `teamix-evo ui add cascader` 时,以下 entry 会被自动连带安装(无需手动 add)。
-
-| Entry | 类型 | 描述 |
-| --- | --- | --- |
-| `cn` | util | Tailwind className 合并工具(clsx + tailwind-merge) |
-| `button` | component | 通用按钮 — shadcn 实现 + cloud-design 能力并集(loading / icon / shape / block / dashed variant / color 语义双 prop / disabledTooltip)。同文件合一导出 ButtonGroup + ButtonGroupText(等价 antd Space.Compact + cd SplitButton)。 |
-| `popover` | component | 可交互浮层 — Radix Popover + antd arrow 并集,使用 showArrow 控制尖角(与 Tooltip / HoverCard 命名统一) |
-
-### npm 依赖
-
-> 业务侧需要先 `pnpm add` / `npm install` 这些包。CLI 在 `ui add` 完成后会列出此提示。
-
-```bash
-pnpm add lucide-react@^0.460.0
-```
-<!-- auto:deps:end -->
-
-## AI 生成纪律
-
-- **`value` 是 value 数组**(每层一个),`onChange` 第二参数给完整 `CascaderOption` 路径 — 用第二参数拿到 label / 业务字段
-- **`changeOnSelect=true`** 允许"中途选择",适合"地区可只选到省" / "分类可选到任意级"
-- **同级 `value` 必须唯一**(否则 findPath 出错)— 数据准备时务必检查
-- **大量节点(> 300)**建议懒加载:数据先只展开第一层,在 onChange 中按需 fetch 子节点并更新 options
-- **不要给 disabled 节点设可点击的子项** — 用户预期父级禁用即整支禁用
-
-## Examples
-
-```tsx
-import { Cascader, type CascaderOption } from '@/components/ui/cascader';
-import * as React from 'react';
-
-const regions: CascaderOption[] = [
-  {
-    value: 'cn',
-    label: '中国',
-    children: [
-      {
-        value: 'zj',
-        label: '浙江',
-        children: [
-          { value: 'hz', label: '杭州' },
-          { value: 'nb', label: '宁波' },
-        ],
-      },
-      {
-        value: 'jx',
-        label: '江西',
-        children: [{ value: 'nc', label: '南昌' }],
-      },
-    ],
-  },
-];
-
-// 基础
-<Cascader options={regions} placeholder="选择地区" />
-
-// 中途可选
-<Cascader options={regions} changeOnSelect />
-
-// 受控
-const [v, setV] = React.useState<string[]>(['cn', 'zj', 'hz']);
-<Cascader
-  options={regions}
-  value={v}
-  onChange={(vals, opts) => setV(vals)}
-/>
-```
-
----
-
-## Cascader 形态 — 旧库 API → 新映射
-
-> 旧库 `CascaderSelect`(hybridcloud) → 新库 `Cascader`(简化命名)。
-> 新库使用 Radix Popover + 自绘多列面板;点击触发器弹出 flex 列布局,每级一列,叶子节点触发 onChange。
-
-### 命名 & 结构映射
-
-| 旧库                           | 新库                                      | 说明                                |
-| ------------------------------ | ----------------------------------------- | ----------------------------------- |
-| `CascaderSelect`               | `Cascader`                                | 组件名简化                          |
-| `dataSource`                   | `options`                                 | 数据源 prop 更名                    |
-| `size: small/medium/large`     | `size: 'sm' \| 'md' \| 'default' \| 'lg'` | md = medium = default               |
-| `onChange(value, data, extra)` | `onChange(value, selectedOptions)`        | 签名简化,extra 合入 selectedOptions |
-| `canOnlyCheckLeaf={false}`     | `changeOnSelect`                          | 中途选择;默认仅叶子触发             |
-| `hasClear`                     | _(未来 P2: allowClear)_                   | MVP 不含清除按钮                    |
-| `showSearch`                   | _(未来 P1: showSearch + onSearch)_        | MVP 不含搜索                        |
-| `multiple`                     | _(未来 P1: multiple + checkbox)_          | MVP 仅单选                          |
-| `loadData`                     | _(未来 P1: loadData 异步)_                | MVP 需前端准备完整 options 树       |
-| `expandTriggerType="hover"`    | _(未来 P2: expandTrigger)_                | MVP 仅 click 展开                   |
-| `displayRender`                | _(未来 P2)_                               | MVP 用 separator 拼接 label         |
-| `header/footer`                | 不复刻                                    | 低频,Tailwind 自行包装              |
-| `useVirtual`                   | 不复刻                                    | 级联层级有限,无虚拟化需求           |
-| `valueRender/itemRender`       | 不复刻                                    | 精简 API                            |
-
-### 迁移 FAQ
-
-| 问题                                    | 回答                                                                                  |
-| --------------------------------------- | ------------------------------------------------------------------------------------- |
-| `dataSource` 和 `options` 结构有差异吗? | 无;旧库同样是 `{ value, label, children }` 递归结构                                   |
-| 怎么实现"只选到省"?                     | 设 `changeOnSelect`,每级点击都触发 onChange                                           |
-| 怎么实现懒加载?                         | MVP 暂不支持 loadData — 建议在 onChange 中拿到路径后异步 fetch 子节点、再更新 options |
-| 大数据量(> 300 节点)怎么办?             | 数据拆分:options 先只传第一层,onChange 时动态追加子层                                 |
-| 新库为什么没有 multiple?                | 多选级联复杂度高(checkbox + tag + search);待独立迭代,不阻塞基础级联能力               |

package/src/components/cascader/cascader.stories.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react';
-import type { Meta, StoryObj } from '@storybook/react-vite';
-import { Cascader, type CascaderOption } from './cascader';
-
-const meta: Meta<typeof Cascader> = {
-  title: '数据录入 · Data Entry/Cascader',
-  component: Cascader,
-  tags: ['autodocs'],
-  parameters: {
-    docs: {
-      description: {
-        component:
-          '级联选择 — 多级联动（地区 / 分类 / 文件夹路径），多列面板，叶子触发 onChange（可改 changeOnSelect 为每级触发）。等价 antd `Cascader`。',
-      },
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Cascader>;
-
-const regions: CascaderOption[] = [
-  {
-    value: 'cn',
-    label: '中国',
-    children: [
-      {
-        value: 'zj',
-        label: '浙江',
-        children: [
-          { value: 'hz', label: '杭州' },
-          { value: 'nb', label: '宁波' },
-          { value: 'wz', label: '温州' },
-        ],
-      },
-      {
-        value: 'js',
-        label: '江苏',
-        children: [
-          { value: 'nj', label: '南京' },
-          { value: 'sz', label: '苏州' },
-        ],
-      },
-      {
-        value: 'jx',
-        label: '江西',
-        disabled: true,
-        children: [{ value: 'nc', label: '南昌' }],
-      },
-    ],
-  },
-  {
-    value: 'us',
-    label: '美国',
-    children: [
-      {
-        value: 'ca',
-        label: '加州',
-        children: [{ value: 'sf', label: '旧金山' }],
-      },
-    ],
-  },
-];
-
-export const Playground: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => <Cascader options={regions} placeholder="选择地区" />,
-};
-
-export const ChangeOnSelect: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [v, setV] = React.useState<string[]>([]);
-    return (
-      <div className="flex flex-col gap-2">
-        <Cascader options={regions} changeOnSelect value={v} onChange={setV} />
-        <div className="text-xs text-muted-foreground">
-          value: {v.length ? v.join(' / ') : '(空)'}
-        </div>
-      </div>
-    );
-  },
-};
-
-export const Controlled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => {
-    const [v, setV] = React.useState<string[]>(['cn', 'zj', 'hz']);
-    return (
-      <div className="flex items-center gap-3">
-        <Cascader options={regions} value={v} onChange={setV} />
-        <button
-          type="button"
-          onClick={() => setV([])}
-          className="text-xs text-primary hover:underline"
-        >
-          清空
-        </button>
-      </div>
-    );
-  },
-};
-
-export const Disabled: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <Cascader disabled options={regions} defaultValue={['cn', 'zj', 'hz']} />
-  ),
-};
-
-export const Sizes: Story = {
-  parameters: { controls: { disable: true } },
-  render: () => (
-    <div className="flex flex-col gap-3">
-      <Cascader options={regions} size="sm" placeholder="sm" />
-      <Cascader options={regions} size="md" placeholder="md (default)" />
-      <Cascader options={regions} size="lg" placeholder="lg" />
-    </div>
-  ),
-};