@ploykit/ui 0.5.0 → 0.6.2

package/src/components/ui/__tests__/overlay-size.test.tsx

@@ -0,0 +1,84 @@
+import '@testing-library/jest-dom/vitest'
+import { render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, it, expect } from 'vitest'
+import {
+  Sheet, SheetTrigger, SheetContent,
+} from '../sheet'
+import {
+  Dialog, DialogTrigger, DialogContent,
+} from '../dialog'
+
+function SheetDemo({ size }: { size?: 'sm' | 'md' | 'lg' }) {
+  const [open, setOpen] = useState(true)
+  return (
+    <Sheet open={open} onOpenChange={setOpen}>
+      <SheetTrigger>打开</SheetTrigger>
+      <SheetContent size={size} data-testid="sheet-content">
+        <div>面板内容</div>
+      </SheetContent>
+    </Sheet>
+  )
+}
+
+function DialogDemo({ size }: { size?: 'sm' | 'md' | 'lg' | 'xl' }) {
+  const [open, setOpen] = useState(true)
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger>打开</DialogTrigger>
+      <DialogContent size={size} data-testid="dialog-content">
+        <div>弹窗内容</div>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+describe('sheet/dialog size 档位（data-size 落地）', () => {
+  it('Sheet 默认 size=sm → data-size="sm"', () => {
+    render(<SheetDemo />)
+    expect(screen.getByTestId('sheet-content')).toHaveAttribute('data-size', 'sm')
+  })
+
+  it('Sheet size=lg → data-size="lg"，类含 data-[size=lg] 档位与 overflow-y-auto', () => {
+    render(<SheetDemo size="lg" />)
+    const el = screen.getByTestId('sheet-content')
+    expect(el).toHaveAttribute('data-size', 'lg')
+    expect(el).toHaveAttribute('data-side', 'right')
+    expect(el.className).toContain('data-[side=right]:data-[size=lg]:sm:max-w-2xl')
+    expect(el.className).toContain('overflow-y-auto')
+  })
+
+  it('Sheet top 侧 lg → max-h 档位', () => {
+    render(
+      <Sheet open>
+        <SheetContent side="top" size="lg" data-testid="sheet-top">
+          内容
+        </SheetContent>
+      </Sheet>,
+    )
+    const el = screen.getByTestId('sheet-top')
+    expect(el.className).toContain('data-[side=top]:data-[size=lg]:max-h-[80vh]')
+  })
+
+  it('Dialog 默认 size=sm → data-size="sm"，保留 sm:max-w-sm 基础类', () => {
+    render(<DialogDemo />)
+    const el = screen.getByTestId('dialog-content')
+    expect(el).toHaveAttribute('data-size', 'sm')
+    expect(el.className).toContain('sm:max-w-sm')
+  })
+
+  it('Dialog size=xl → data-size="xl"', () => {
+    render(<DialogDemo size="xl" />)
+    const el = screen.getByTestId('dialog-content')
+    expect(el).toHaveAttribute('data-size', 'xl')
+    expect(el.className).toContain('data-[size=xl]:sm:max-w-4xl')
+  })
+
+  it('Dialog size=md / lg → 对应档位类', () => {
+    const { rerender } = render(<DialogDemo size="md" />)
+    expect(screen.getByTestId('dialog-content').className).toContain('data-[size=md]:sm:max-w-lg')
+
+    rerender(<DialogDemo size="lg" />)
+    expect(screen.getByTestId('dialog-content').className).toContain('data-[size=lg]:sm:max-w-2xl')
+  })
+})

package/src/components/ui/__tests__/popover.test.tsx

@@ -0,0 +1,32 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import {
+  Popover, PopoverTrigger, PopoverContent, PopoverHeader,
+  PopoverTitle, PopoverDescription,
+} from '../popover'
+
+describe('popover 冒烟', () => {
+  it('Trigger 打开浮层；Escape 关闭', async () => {
+    render(
+      <Popover>
+        <PopoverTrigger>打开</PopoverTrigger>
+        <PopoverContent>
+          <PopoverHeader>
+            <PopoverTitle>浮层标题</PopoverTitle>
+            <PopoverDescription>浮层描述</PopoverDescription>
+          </PopoverHeader>
+        </PopoverContent>
+      </Popover>,
+    )
+
+    fireEvent.click(screen.getByRole('button', { name: '打开' }))
+    expect(await screen.findByText('浮层标题')).toBeVisible()
+    expect(screen.getByText('浮层描述')).toBeVisible()
+
+    fireEvent.keyDown(document.body, { key: 'Escape' })
+    await waitFor(() =>
+      expect(screen.queryByText('浮层标题')).not.toBeInTheDocument(),
+    )
+  })
+})

package/src/components/ui/__tests__/progress.test.tsx

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom/vitest'
+import { render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import {
+  Progress, ProgressLabel, ProgressValue,
+} from '../progress'
+
+describe('progress 冒烟', () => {
+  it('value=50 渲染轨道/指示条/标签/数值', () => {
+    const { container } = render(
+      <Progress value={50}>
+        <ProgressLabel>用量</ProgressLabel>
+        <ProgressValue />
+      </Progress>,
+    )
+    expect(screen.getByText('用量')).toBeInTheDocument()
+    expect(screen.getByText('50%')).toBeInTheDocument()
+    expect(screen.getByRole('progressbar')).toHaveAttribute('aria-valuenow', '50')
+
+    
+    expect(container.querySelector('[data-slot="progress-track"]')).toBeInTheDocument()
+    expect(container.querySelector('[data-slot="progress-indicator"]')).toBeInTheDocument()
+  })
+})

package/src/components/ui/__tests__/select-callback.test.tsx

@@ -0,0 +1,72 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, it, expect } from 'vitest'
+import {
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '../select'
+import type * as React from 'react'
+
+const items = [
+  { value: 'a', label: '选项 A' },
+  { value: 'b', label: '选项 B' },
+]
+
+/** 产品侧目标写法：回调参数已是 string，无需 `v ?? ''` 卫语句。 */
+function Demo({ onValueChange }: { onValueChange: (v: string) => void }) {
+  const [value, setValue] = useState<string | null>('a')
+  const handle = (v: string) => {
+    received.push(v)
+    setValue(v || null)
+    onValueChange(v)
+  }
+  return (
+    <Select items={items} value={value} onValueChange={handle}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((item) => (
+          <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+const received: string[] = []
+
+describe('select 包装层：onValueChange 永远收到 string', () => {
+  it('受控交互：点击选项后回调收到 string（非 null）', async () => {
+    render(<Demo onValueChange={() => {}} />)
+    const trigger = screen.getByRole('combobox')
+    expect(trigger).toHaveTextContent('选项 A')
+
+    fireEvent.click(trigger)
+    const option = await screen.findByRole('option', { name: '选项 B' })
+    fireEvent.pointerDown(option, { button: 0, pointerType: 'mouse' })
+    fireEvent.pointerUp(option, { button: 0, pointerType: 'mouse' })
+    fireEvent.click(option)
+
+    await waitFor(() => expect(trigger).toHaveTextContent('选项 B'))
+    await waitFor(() => expect(screen.queryByRole('listbox')).not.toBeInTheDocument())
+    expect(received).toEqual(['b'])
+    received.length = 0
+  })
+
+  it('类型契约：onValueChange 参数为 string，value 仍允许 null（编译期断言）', () => {
+    // 1) string 回调可直接作为 onValueChange 使用
+    const onString = (_v: string) => {}
+    const ok: React.ComponentProps<typeof Select>['onValueChange'] = onString
+    expect(ok).toBeTypeOf('function')
+
+    // 2) 受控 value 保留 null 能力（base-ui 原生语义不收窄）
+    const nullValue: React.ComponentProps<typeof Select>['value'] = null
+    expect(nullValue).toBeNull()
+
+    // 3) 旧卫语句写法 `(v) => setX(v ?? '')` 对 string 参数仍合法（?? 的左操作数可为非空类型）
+    const legacy = (_v: string) => {}
+    const tolerant = (v: string) => legacy(v ?? '')
+    expect(tolerant).toBeTypeOf('function')
+  })
+})

package/src/components/ui/__tests__/select.test.tsx

@@ -0,0 +1,48 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, it, expect } from 'vitest'
+import {
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '../select'
+
+const items = [
+  { value: 'a', label: '选项 A' },
+  { value: 'b', label: '选项 B' },
+]
+
+function Demo() {
+  const [value, setValue] = useState<string | null>('a')
+  return (
+    <Select items={items} value={value} onValueChange={(v) => setValue(v)}>
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((item) => (
+          <SelectItem key={item.value} value={item.value}>{item.label}</SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  )
+}
+
+describe('select 冒烟', () => {
+  it('Trigger 显示当前值；点击选项后切换', async () => {
+    render(<Demo />)
+    const trigger = screen.getByRole('combobox')
+    expect(trigger).toHaveTextContent('选项 A')
+
+    fireEvent.click(trigger)
+    const option = await screen.findByRole('option', { name: '选项 B' })
+    expect(option).toBeVisible()
+
+    
+    fireEvent.pointerDown(option, { button: 0, pointerType: 'mouse' })
+    fireEvent.pointerUp(option, { button: 0, pointerType: 'mouse' })
+    fireEvent.click(option)
+
+    await waitFor(() => expect(trigger).toHaveTextContent('选项 B'))
+    await waitFor(() => expect(screen.queryByRole('listbox')).not.toBeInTheDocument())
+  })
+})

package/src/components/ui/__tests__/sidebar.test.tsx

@@ -0,0 +1,121 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, it, expect, beforeEach } from 'vitest'
+import {
+  Sidebar, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarMenu,
+  SidebarMenuItem, SidebarMenuButton, SidebarMenuSkeleton, SidebarProvider, useSidebar,
+} from '../sidebar'
+
+
+
+
+function StateProbe() {
+  const { state, open } = useSidebar()
+  return (
+    <div>
+      <div data-testid="state">{state}</div>
+      <div data-testid="open">{String(open)}</div>
+    </div>
+  )
+}
+
+function renderSidebar(props: { defaultOpen?: boolean } = {}) {
+  return render(
+    <SidebarProvider {...props}>
+      <Sidebar>
+        <SidebarContent>
+          <SidebarGroup>
+            <SidebarGroupContent>
+              <SidebarMenu>
+                <SidebarMenuItem>
+                  <SidebarMenuButton>菜单项</SidebarMenuButton>
+                </SidebarMenuItem>
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        </SidebarContent>
+      </Sidebar>
+      <StateProbe />
+      <input aria-label="输入框" />
+    </SidebarProvider>,
+  )
+}
+
+beforeEach(() => {
+  document.cookie = 'sidebar_state=; path=/; max-age=0'
+})
+
+describe('SidebarProvider 状态持久化（P2-17）', () => {
+  it('stock 语义：provider 不回读 cookie（回读在 AppShell 组合层，P2-17 见 AppShell 测试）', () => {
+    document.cookie = 'sidebar_state=false; path=/'
+    renderSidebar()
+    expect(screen.getByTestId('state').textContent).toBe('expanded')
+  })
+
+  it('cookie 缺省 → 默认展开', () => {
+    renderSidebar()
+    expect(screen.getByTestId('state').textContent).toBe('expanded')
+  })
+
+  it('显式 defaultOpen 优先于 cookie', () => {
+    document.cookie = 'sidebar_state=false; path=/'
+    renderSidebar({ defaultOpen: true })
+    expect(screen.getByTestId('state').textContent).toBe('expanded')
+  })
+
+  it('切换写回 cookie（持久化不再是死功能）', () => {
+    renderSidebar()
+    fireEvent.keyDown(window, { key: 'b', ctrlKey: true })
+    expect(document.cookie).toContain('sidebar_state=false')
+    fireEvent.keyDown(window, { key: 'b', ctrlKey: true })
+    expect(document.cookie).toContain('sidebar_state=true')
+  })
+})
+
+describe('Ctrl/Cmd+B 快捷键（P3-1）', () => {
+  it('全局 Cmd/Ctrl+B 切换折叠', () => {
+    renderSidebar()
+    expect(screen.getByTestId('state').textContent).toBe('expanded')
+    fireEvent.keyDown(window, { key: 'b', metaKey: true })
+    expect(screen.getByTestId('state').textContent).toBe('collapsed')
+    fireEvent.keyDown(window, { key: 'b', ctrlKey: true })
+    expect(screen.getByTestId('state').textContent).toBe('expanded')
+  })
+
+  it('stock 语义：input 内 Ctrl+B 同样折叠（产品级输入保护在 AppShell，P3-1 见 AppShell 测试）', () => {
+    renderSidebar()
+    const input = screen.getByRole('textbox', { name: '输入框' })
+    fireEvent.keyDown(input, { key: 'b', ctrlKey: true })
+    expect(screen.getByTestId('state').textContent).toBe('collapsed')
+  })
+})
+
+describe('SidebarMenuSkeleton 确定性（P2-11）', () => {
+  it('宽度来自固定序列，且同一实例跨重渲染稳定（渲染期随机数的判别性质）', () => {
+    function Tree({ tag }: { tag: string }) {
+      return (
+        <SidebarMenu>
+          {['a', 'b', 'c', 'd'].map((k) => (
+            <SidebarMenuSkeleton key={`${tag}-${k}`} />
+          ))}
+        </SidebarMenu>
+      )
+    }
+    const widthsOf = (container: HTMLElement) =>
+      Array.from(container.querySelectorAll('[data-sidebar="menu-skeleton-text"]')).map(
+        (el) => (el as HTMLElement).style.getPropertyValue('--skeleton-width'),
+      )
+    const allowed = Array.from({ length: 40 }, (_, i) => `${50 + i}%`) // stock: floor(rand*40)+50
+
+    const { rerender, container } = render(<Tree tag="t" />)
+    const w1 = widthsOf(container)
+    expect(w1).toHaveLength(4)
+    
+    for (const w of w1) expect(allowed).toContain(w)
+
+    
+    
+    rerender(<Tree tag="t" />)
+    expect(widthsOf(container)).toEqual(w1)
+  })
+})

package/src/components/ui/__tests__/stock-mirror.test.ts

@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest'
+import { readFileSync, readdirSync } from 'node:fs'
+import { join, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// stock 镜像不变式：components/ui 与 shadcn registry 输出保持一致（唯一允许的差异
+// 是 adopt-shadcn.mjs 的 import 路径改写），业务概念禁止进入该目录。
+// 本守卫钉住 import 白名单；未来 re-sync 时若 diff 出现白名单外依赖，说明有人
+// 手改了 stock 文件——去组合层（AppShell/业务组件）实现，而不是改这里。
+const uiDir = join(dirname(fileURLToPath(import.meta.url)), '..')
+
+describe('components/ui stock 镜像守卫', () => {
+  const files = readdirSync(uiDir).filter((f) => f.endsWith('.tsx') || f.endsWith('.ts'))
+
+  it('目录非空且为 23+ 件 stock 组件', () => {
+    expect(files.length).toBeGreaterThanOrEqual(23)
+  })
+
+  for (const f of files) {
+    it(`${f} 的 import 全部在白名单内`, () => {
+      const src = readFileSync(join(uiDir, f), 'utf8')
+      const imports = [...src.matchAll(/from ["']([^"']+)["']/g)].map((m) => m[1])
+      for (const spec of imports) {
+        const ok =
+          spec === 'react' || spec.startsWith('react/') ||
+          spec === '@base-ui/react' || spec.startsWith('@base-ui/react/') ||
+          spec.startsWith('@base-ui/') ||
+          spec === 'class-variance-authority' || spec === 'clsx' || spec === 'tailwind-merge' ||
+          spec === 'lucide-react' ||
+          spec === '../../lib/utils' || spec === '../../hooks/use-mobile' ||
+          /^\.\.?\//.test(spec) // 同目录兄弟 ui 件（./button、./separator 等）
+        // 白名单之外的"包级"或"跨层"导入直接失败：
+        //  - @ploykit/*（业务包）      - ../../provider、../../pages（包内跨层）
+        expect(ok, `${f} 引用了非白名单模块: ${spec}`).toBe(true)
+        expect(spec.startsWith('@ploykit/'), `${f} 引入了业务包 ${spec}`).toBe(false)
+      }
+    })
+  }
+})

package/src/components/ui/__tests__/subpath.test.tsx

@@ -0,0 +1,38 @@
+import { describe, expect, it } from 'vitest'
+
+// 子路径导出合同：components/ui 的全部组件必须能经
+// '@ploykit/ui/components/ui/<name>' 深路径导入（exports map wildcard）。
+// 这里逐个 import + 存在性断言——解析失败（exports map 配错）会让整个文件挂掉。
+import * as alertDialog from '@ploykit/ui/components/ui/alert-dialog'
+import * as avatar from '@ploykit/ui/components/ui/avatar'
+import * as breadcrumb from '@ploykit/ui/components/ui/breadcrumb'
+import * as button from '@ploykit/ui/components/ui/button'
+import * as badge from '@ploykit/ui/components/ui/badge'
+import * as input from '@ploykit/ui/components/ui/input'
+import * as card from '@ploykit/ui/components/ui/card'
+import * as checkbox from '@ploykit/ui/components/ui/checkbox'
+import * as popover from '@ploykit/ui/components/ui/popover'
+import * as progress from '@ploykit/ui/components/ui/progress'
+import * as select from '@ploykit/ui/components/ui/select'
+import * as sw from '@ploykit/ui/components/ui/switch'
+
+describe('子路径导出 @ploykit/ui/components/ui/*', () => {
+  const modules = {
+    'alert-dialog': alertDialog,
+    avatar,
+    breadcrumb,
+    card,
+    checkbox,
+    popover,
+    progress,
+    select,
+    switch: sw,
+  } as const
+
+  for (const [name, mod] of Object.entries(modules)) {
+    it(`${name} 深路径可解析且导出组件`, () => {
+      const components = Object.values(mod).filter((v) => typeof v === 'function')
+      expect(components.length, `${name} 应至少导出一个组件函数`).toBeGreaterThan(0)
+    })
+  }
+})

package/src/components/ui/__tests__/switch.test.tsx

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+import { describe, it, expect } from 'vitest'
+import { Switch } from '../switch'
+
+function Demo() {
+  const [on, setOn] = useState(false)
+  return <Switch checked={on} onCheckedChange={setOn} aria-label="通知开关" />
+}
+
+describe('switch 冒烟', () => {
+  it('点击切换 aria-checked', () => {
+    render(<Demo />)
+    const sw = screen.getByRole('switch', { name: '通知开关' })
+    expect(sw).toHaveAttribute('aria-checked', 'false')
+
+    fireEvent.click(sw)
+    expect(sw).toHaveAttribute('aria-checked', 'true')
+
+    fireEvent.click(sw)
+    expect(sw).toHaveAttribute('aria-checked', 'false')
+  })
+})

package/src/components/ui/__tests__/tabs.test.tsx

@@ -0,0 +1,24 @@
+import '@testing-library/jest-dom/vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { describe, it, expect } from 'vitest'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '../tabs'
+
+describe('tabs 冒烟', () => {
+  it('点击 Tab 切换面板', () => {
+    render(
+      <Tabs defaultValue="a">
+        <TabsList>
+          <TabsTrigger value="a">Tab A</TabsTrigger>
+          <TabsTrigger value="b">Tab B</TabsTrigger>
+        </TabsList>
+        <TabsContent value="a">Content A</TabsContent>
+        <TabsContent value="b">Content B</TabsContent>
+      </Tabs>,
+    )
+    expect(screen.getByText('Content A')).toBeVisible()
+    expect(screen.getByRole('tab', { name: 'Tab B' })).toBeInTheDocument()
+
+    fireEvent.click(screen.getByRole('tab', { name: 'Tab B' }))
+    expect(screen.getByText('Content B')).toBeVisible()
+  })
+})

package/src/components/ui/__tests__/textarea.test.tsx

@@ -0,0 +1,41 @@
+import '@testing-library/jest-dom/vitest'
+import { render, screen } from '@testing-library/react'
+import { createRef } from 'react'
+import { describe, it, expect } from 'vitest'
+import { Textarea } from '../textarea'
+
+describe('textarea 冒烟', () => {
+  it('渲染为 textarea 且 data-slot 正确', () => {
+    render(<Textarea data-testid="ta" placeholder="备注" />)
+    const ta = screen.getByTestId('ta')
+    expect(ta.tagName).toBe('TEXTAREA')
+    expect(ta).toHaveAttribute('data-slot', 'textarea')
+    expect(ta).toHaveAttribute('placeholder', '备注')
+  })
+
+  it('className 合并：自定义类与基础类共存，同族类后者覆盖', () => {
+    render(<Textarea data-testid="ta" className="min-h-32 custom-x" />)
+    const cls = screen.getByTestId('ta').className
+    expect(cls).toContain('custom-x')
+    expect(cls).toContain('border-input')
+    // tailwind-merge：同族冲突时用户类覆盖基础类
+    expect(cls).not.toMatch(/(^|\s)min-h-16(\s|$)/)
+    expect(cls).toMatch(/(^|\s)min-h-32(\s|$)/)
+  })
+
+  it('ref 正确转发到 DOM 节点', () => {
+    const ref = createRef<HTMLTextAreaElement>()
+    render(<Textarea ref={ref} defaultValue="hello" />)
+    expect(ref.current).not.toBeNull()
+    expect(ref.current?.tagName).toBe('TEXTAREA')
+    expect(ref.current?.value).toBe('hello')
+  })
+
+  it('aria-invalid 语义类在基础类中（token 合同同族）', () => {
+    render(<Textarea data-testid="ta" aria-invalid />)
+    const cls = screen.getByTestId('ta').className
+    expect(cls).toContain('aria-invalid:border-destructive')
+    expect(cls).toContain('dark:bg-input/30')
+    expect(cls).toContain('min-h-16')
+  })
+})