@xyhp915/slack-base-ui 0.0.6 → 0.0.8

package/src/pages/ComponentShowcase.tsx

@@ -97,6 +97,21 @@ import { useToast } from '../components/Toast'
 import type { ToastPosition } from '../components/Toast'
 import { Loading } from '../components/Loading'
 import { AutoComplete } from '../components/AutoComplete'
+import { Combobox, ComboboxMultiple } from '../components/Combobox'
+import type { ComboboxOption } from '../components/Combobox'
+import {
+  Dropdown,
+  DropdownTrigger,
+  DropdownContent,
+  DropdownItem,
+  DropdownSeparator,
+  DropdownGroup,
+  DropdownSub,
+  DropdownSubTrigger,
+  DropdownSubContent,
+  useDropdown,
+} from '../components/Dropdown'
+import type { DropdownOption } from '../components/Dropdown'
 
 export const ComponentShowcase = () => {
   const [simpleDialogOpen, setSimpleDialogOpen] = useState(false)
@@ -134,6 +149,10 @@ export const ComponentShowcase = () => {
   const [acValue, setAcValue] = useState('')
   const [acAsync, setAcAsync] = useState('')
 
+  // Combobox states
+  const [cbValue, setCbValue] = useState<ComboboxOption | null>(null)
+  const [cbMultiValue, setCbMultiValue] = useState<ComboboxOption[]>([])
+
   // Imperative Dialog
   const { show: showDialog, confirm: confirmDialog, alert: alertDialog } = useDialog()
   const [dialogResult, setDialogResult] = useState<string | null>(null)
@@ -141,6 +160,10 @@ export const ComponentShowcase = () => {
   // Imperative Popover
   const imperativePopover = useImperativePopover()
 
+  // Dropdown
+  const dropdown = useDropdown()
+  const [dropdownResult, setDropdownResult] = useState<string | null>(null)
+
   return (
       <div className="min-h-screen bg-(--bg-muted) pb-20 font-sans transition-colors duration-300">
         {/* Header */}
@@ -1866,6 +1889,307 @@ export const ComponentShowcase = () => {
           </div>
         </section>
 
+        {/* Section: Combobox */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Combobox</h2>
+            <p className="text-(--text-secondary) mt-1">基于 Base UI Combobox 构建的组合输入框，支持过滤、分组、多选、Chip 等功能。</p>
+          </div>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            {/* Basic single */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">基础单选</h3>
+              <Combobox
+                label="选择水果"
+                placeholder="搜索水果…"
+                options={[
+                  { value: 'apple', label: 'Apple' },
+                  { value: 'banana', label: 'Banana' },
+                  { value: 'cherry', label: 'Cherry' },
+                  { value: 'grape', label: 'Grape' },
+                  { value: 'mango', label: 'Mango' },
+                  { value: 'orange', label: 'Orange' },
+                  { value: 'peach', label: 'Peach' },
+                  { value: 'pear', label: 'Pear' },
+                  { value: 'strawberry', label: 'Strawberry' },
+                  { value: 'watermelon', label: 'Watermelon' },
+                ]}
+                value={cbValue}
+                onValueChange={setCbValue}
+                fullWidth
+              />
+              {cbValue && (
+                <p className="text-[13px] text-(--text-secondary)">
+                  已选：<span className="font-semibold text-(--text-primary)">{cbValue.label}</span>
+                </p>
+              )}
+            </div>
+
+            {/* Grouped */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">分组选项</h3>
+              <Combobox
+                label="选择食物"
+                placeholder="搜索…"
+                groups={[
+                  {
+                    label: '水果',
+                    options: [
+                      { value: 'apple', label: 'Apple' },
+                      { value: 'banana', label: 'Banana' },
+                      { value: 'cherry', label: 'Cherry' },
+                    ],
+                  },
+                  {
+                    label: '蔬菜',
+                    options: [
+                      { value: 'carrot', label: 'Carrot' },
+                      { value: 'lettuce', label: 'Lettuce' },
+                      { value: 'spinach', label: 'Spinach' },
+                    ],
+                  },
+                ]}
+                fullWidth
+              />
+            </div>
+
+            {/* Error state */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Required & Error</h3>
+              <Combobox
+                label="所在城市"
+                placeholder="请选择城市…"
+                required
+                error="请选择一个城市"
+                options={[
+                  { value: 'beijing', label: '北京' },
+                  { value: 'shanghai', label: '上海' },
+                  { value: 'guangzhou', label: '广州' },
+                  { value: 'shenzhen', label: '深圳' },
+                  { value: 'hangzhou', label: '杭州' },
+                  { value: 'chengdu', label: '成都' },
+                ]}
+                fullWidth
+              />
+            </div>
+
+            {/* Disabled */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">Disabled</h3>
+              <Combobox
+                label="项目"
+                placeholder="已禁用"
+                disabled
+                options={[
+                  { value: 'alpha', label: 'Project Alpha' },
+                  { value: 'beta', label: 'Project Beta' },
+                ]}
+                defaultValue={{ value: 'alpha', label: 'Project Alpha' }}
+                fullWidth
+              />
+            </div>
+
+            {/* Multiple select */}
+            <div className="space-y-4 md:col-span-2">
+              <h3 className="font-semibold text-(--text-secondary)">多选（带 Chip）</h3>
+              <ComboboxMultiple
+                label="选择编程语言"
+                placeholder="搜索语言…"
+                options={[
+                  { value: 'ts', label: 'TypeScript' },
+                  { value: 'js', label: 'JavaScript' },
+                  { value: 'py', label: 'Python' },
+                  { value: 'rs', label: 'Rust' },
+                  { value: 'go', label: 'Go' },
+                  { value: 'java', label: 'Java' },
+                  { value: 'cpp', label: 'C++' },
+                  { value: 'swift', label: 'Swift' },
+                  { value: 'kotlin', label: 'Kotlin' },
+                  { value: 'ruby', label: 'Ruby' },
+                ]}
+                value={cbMultiValue}
+                onValueChange={setCbMultiValue}
+                fullWidth
+              />
+              {cbMultiValue.length > 0 && (
+                <p className="text-[13px] text-(--text-secondary)">
+                  已选：<span className="font-semibold text-(--text-primary)">{cbMultiValue.map(v => v.label).join(', ')}</span>
+                </p>
+              )}
+            </div>
+          </div>
+        </section>
+
+        {/* Section: Dropdown */}
+        <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
+          <div className="pb-2 border-b border-(--border-light)">
+            <h2 className="text-2xl font-bold text-(--text-primary)">Dropdown</h2>
+            <p className="text-(--text-secondary) mt-1">
+              选值导向的下拉菜单，支持图标、快捷键、分隔线、子菜单及危险项。提供声明式复合组件和{' '}
+              <code className="text-sm bg-(--bg-secondary) px-1.5 py-0.5 rounded border border-(--border-light) font-mono">useDropdown()</code>{' '}
+              命令式锚定 API。
+            </p>
+          </div>
+
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-10">
+            {/* 声明式 - 基础用法 */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">声明式 Declarative</h3>
+              <div className="flex flex-wrap gap-3">
+                {/* 基础 */}
+                <Dropdown onSelect={(v) => setDropdownResult(v)}>
+                  <DropdownTrigger>
+                    <Button size="sm" variant="secondary">基础菜单</Button>
+                  </DropdownTrigger>
+                  <DropdownContent>
+                    <DropdownItem value="copy" icon={<Copy size={14} />} shortcut="⌘C">复制</DropdownItem>
+                    <DropdownItem value="paste" icon={<ClipboardPaste size={14} />} shortcut="⌘V">粘贴</DropdownItem>
+                    <DropdownItem value="cut" icon={<Scissors size={14} />} shortcut="⌘X">剪切</DropdownItem>
+                    <DropdownSeparator />
+                    <DropdownItem value="delete" icon={<Trash2 size={14} />} destructive shortcut="⌘⌫">删除</DropdownItem>
+                  </DropdownContent>
+                </Dropdown>
+
+                {/* 带分组 */}
+                <Dropdown onSelect={(v) => setDropdownResult(v)}>
+                  <DropdownTrigger>
+                    <Button size="sm" variant="secondary">分组菜单</Button>
+                  </DropdownTrigger>
+                  <DropdownContent>
+                    <DropdownGroup label="文件">
+                      <DropdownItem value="new" icon={<FileText size={14} />}>新建</DropdownItem>
+                      <DropdownItem value="open" icon={<FolderOpen size={14} />}>打开</DropdownItem>
+                      <DropdownItem value="save" icon={<Save size={14} />} shortcut="⌘S">保存</DropdownItem>
+                    </DropdownGroup>
+                    <DropdownSeparator />
+                    <DropdownGroup label="导出">
+                      <DropdownItem value="export-pdf" icon={<Download size={14} />}>导出 PDF</DropdownItem>
+                      <DropdownItem value="share" icon={<Share2 size={14} />}>分享链接</DropdownItem>
+                    </DropdownGroup>
+                  </DropdownContent>
+                </Dropdown>
+
+                {/* 子菜单 */}
+                <Dropdown onSelect={(v) => setDropdownResult(v)}>
+                  <DropdownTrigger>
+                    <Button size="sm" variant="secondary">子菜单</Button>
+                  </DropdownTrigger>
+                  <DropdownContent>
+                    <DropdownItem value="refresh" icon={<RefreshCw size={14} />}>刷新</DropdownItem>
+                    <DropdownSeparator />
+                    <DropdownSub>
+                      <DropdownSubTrigger>
+                        <Star size={14} className="text-(--text-muted)" />
+                        <span>标记为</span>
+                      </DropdownSubTrigger>
+                      <DropdownSubContent>
+                        <DropdownItem value="star" icon={<Star size={14} />}>加星标</DropdownItem>
+                        <DropdownItem value="unstar" icon={<StarOff size={14} />}>取消星标</DropdownItem>
+                        <DropdownItem value="pin">置顶</DropdownItem>
+                      </DropdownSubContent>
+                    </DropdownSub>
+                    <DropdownSeparator />
+                    <DropdownItem value="delete" destructive icon={<Trash2 size={14} />}>删除</DropdownItem>
+                  </DropdownContent>
+                </Dropdown>
+              </div>
+              {dropdownResult && (
+                <p className="text-sm text-(--text-muted)">
+                  选中：<strong className="text-(--text-primary)">{dropdownResult}</strong>
+                </p>
+              )}
+            </div>
+
+            {/* 命令式 */}
+            <div className="space-y-4">
+              <h3 className="font-semibold text-(--text-secondary)">命令式 Imperative</h3>
+              <div className="flex flex-wrap gap-3">
+                {/* show */}
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={(e) => {
+                    const opts: DropdownOption[] = [
+                      { value: 'edit', label: '编辑', icon: <Pencil size={14} /> },
+                      { value: 'duplicate', label: '复制副本', icon: <Copy size={14} /> },
+                      { value: 'rename', label: '重命名', icon: <Pencil size={14} /> },
+                      { value: 'delete', label: '删除', icon: <Trash2 size={14} />, destructive: true },
+                    ]
+                    dropdown.show(e.currentTarget, {
+                      options: opts,
+                      onSelect: (v) => setDropdownResult(v),
+                      align: 'start',
+                    })
+                  }}
+                >
+                  show()
+                </Button>
+
+                {/* toggle */}
+                <Button
+                  size="sm"
+                  variant={dropdown.isOpen ? 'primary' : 'secondary'}
+                  onClick={(e) => {
+                    dropdown.toggle(e.currentTarget, {
+                      options: [
+                        { value: 'profile', label: '个人资料', icon: <UserCircle size={14} /> },
+                        { value: 'settings', label: '设置', icon: <Settings size={14} />, shortcut: '⌘,' },
+                        { value: 'shortcuts', label: '快捷键', icon: <Command size={14} />, shortcut: '⌘/' },
+                      ],
+                      onSelect: (v) => setDropdownResult(v),
+                      side: 'bottom',
+                      align: 'start',
+                    })
+                  }}
+                >
+                  toggle()
+                </Button>
+
+                {/* 带分组的命令式 */}
+                <Button
+                  size="sm"
+                  variant="secondary"
+                  onClick={(e) => {
+                    dropdown.show(e.currentTarget, {
+                      groups: [
+                        {
+                          label: '操作',
+                          options: [
+                            { value: 'open', label: '打开', icon: <ExternalLink size={14} /> },
+                            { value: 'download', label: '下载', icon: <Download size={14} /> },
+                          ],
+                        },
+                        {
+                          label: '危险区',
+                          options: [
+                            { value: 'delete', label: '删除', icon: <Trash2 size={14} />, destructive: true },
+                          ],
+                        },
+                      ],
+                      onSelect: (v) => setDropdownResult(v),
+                      align: 'start',
+                    })
+                  }}
+                >
+                  分组 groups
+                </Button>
+              </div>
+              {dropdownResult && (
+                <p className="text-sm text-(--text-muted)">
+                  选中：<strong className="text-(--text-primary)">{dropdownResult}</strong>
+                </p>
+              )}
+              <div className="rounded-md bg-(--bg-secondary) border border-(--border-light) p-3 text-[13px] text-(--text-secondary) font-mono leading-relaxed space-y-1">
+                <div><span className="text-(--text-muted)">// 任意组件内</span></div>
+                <div><span className="text-blue-500 dark:text-blue-400">const</span> dropdown = <span className="text-green-600 dark:text-green-400">useDropdown</span>()</div>
+                <div className="pt-1">dropdown.<span className="text-green-600 dark:text-green-400">show</span>(anchor, {'{'} options, onSelect {'}'})</div>
+                <div>dropdown.<span className="text-green-600 dark:text-green-400">toggle</span>(anchor, {'{'} options, onSelect {'}'})</div>
+                <div>dropdown.<span className="text-green-600 dark:text-green-400">hide</span>()</div>
+              </div>
+            </div>
+          </div>
+        </section>
+
         {/* Section: Toast */}
         <section className="max-w-5xl mx-auto px-8 pb-16 space-y-6">
           <div className="pb-2 border-b border-(--border-light)">