@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/stories/overlays/Dialog.stories.tsx

@@ -0,0 +1,255 @@
+import { Button, Dialog, Portal, useDialog } from '@repo/ui'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useId, useRef, useState } from 'react'
+import { fn } from 'storybook/test'
+import { css } from 'styled-system/css'
+
+const meta = {
+  title: 'Overlays/Dialog',
+  component: Dialog.Root,
+  parameters: {
+    docs: {
+      description: { component: '通过 Portal 展示弹窗，支持受控状态、焦点管理和外部 store。' },
+    },
+    controls: {
+      include: [
+        'size',
+        'placement',
+        'scrollBehavior',
+        'motionPreset',
+        'closeOnEscape',
+        'closeOnInteractOutside',
+      ],
+    },
+  },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'cover', 'full', 'unstyled'],
+    },
+    placement: { control: 'inline-radio', options: ['top', 'center', 'bottom'] },
+    scrollBehavior: { control: 'inline-radio', options: ['inside', 'outside'] },
+    motionPreset: {
+      control: 'select',
+      options: [
+        'scale',
+        'slide-in-bottom',
+        'slide-in-top',
+        'slide-in-left',
+        'slide-in-right',
+        'none',
+      ],
+    },
+    closeOnEscape: { control: 'boolean' },
+    closeOnInteractOutside: { control: 'boolean' },
+    onOpenChange: { control: false },
+  },
+  args: {
+    size: 'md',
+    placement: 'center',
+    scrollBehavior: 'outside',
+    motionPreset: 'scale',
+    closeOnEscape: true,
+    closeOnInteractOutside: true,
+    onOpenChange: fn(),
+  },
+} satisfies Meta<typeof Dialog.Root>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {
+  args: { size: 'sm', placement: 'top', motionPreset: 'none' },
+  render: (args) => (
+    <Dialog.Root {...args}>
+      <Dialog.Trigger asChild>
+        <Button variant="outline">打开非受控 Dialog</Button>
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content>
+            <Dialog.Header>
+              <Dialog.Title>非受控 Dialog</Dialog.Title>
+              <Dialog.Description>检查小尺寸、顶部定位，以及无动画关闭。</Dialog.Description>
+            </Dialog.Header>
+            <Dialog.Body>此示例由 Ark 自己管理打开状态。</Dialog.Body>
+            <Dialog.Footer>
+              <Dialog.CloseTrigger asChild>
+                <Button>关闭</Button>
+              </Dialog.CloseTrigger>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  ),
+}
+
+export const Controlled: Story = {
+  args: {
+    size: 'lg',
+    placement: 'center',
+    scrollBehavior: 'inside',
+    motionPreset: 'slide-in-bottom',
+  },
+  parameters: {
+    docs: {
+      source: { type: 'code' },
+      description: {
+        story:
+          '打开后聚焦输入框；Tab 循环、Escape 和遮罩关闭；关闭后焦点返回触发按钮。确认动作关闭弹窗，preventDefault 可阻止关闭。',
+      },
+    },
+  },
+  render: function Controlled(args) {
+    const [open, setOpen] = useState(false)
+    const [actions, setActions] = useState(0)
+    const [blocked, setBlocked] = useState(0)
+    const [lastEvent, setLastEvent] = useState('尚未操作')
+    const inputRef = useRef<HTMLInputElement>(null)
+    const inputId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4' })}>
+        <Dialog.Root
+          {...args}
+          open={open}
+          onOpenChange={(details) => {
+            setOpen(details.open)
+            args.onOpenChange?.(details)
+            setLastEvent(details.open ? '已打开' : '已关闭')
+          }}
+          initialFocusEl={() => inputRef.current}>
+          <Dialog.Trigger asChild>
+            <Button colorPalette="lime">打开受控 Dialog</Button>
+          </Dialog.Trigger>
+          <Portal>
+            <Dialog.Backdrop />
+            <Dialog.Positioner>
+              <Dialog.Content>
+                <Dialog.Header>
+                  <Dialog.Title>Dialog 验收</Dialog.Title>
+                  <Dialog.Description>这个弹窗通过 Portal 渲染到页面根部。</Dialog.Description>
+                </Dialog.Header>
+                <Dialog.Body gap="4">
+                  <label htmlFor={inputId}>打开后应自动聚焦这里</label>
+                  <input
+                    id={inputId}
+                    ref={inputRef}
+                    className={css({
+                      borderWidth: '1px',
+                      borderColor: 'border',
+                      p: '2',
+                      rounded: 'sm',
+                    })}
+                    placeholder="输入内容测试焦点"
+                  />
+                  <p>使用 Tab 和 Shift+Tab，焦点应始终停留在弹窗内部。</p>
+                  <Dialog.ActionTrigger
+                    asChild
+                    onClick={(event) => {
+                      event.preventDefault()
+                      setBlocked((count) => count + 1)
+                    }}>
+                    <Button variant="outline">阻止关闭</Button>
+                  </Dialog.ActionTrigger>
+                  <p role="status">已阻止关闭 {blocked} 次</p>
+                  {Array.from({ length: 12 }, (_, index) => (
+                    <p key={index}>
+                      滚动内容 {index + 1}：长内容应在弹窗内部滚动，背景页面保持锁定。
+                    </p>
+                  ))}
+                </Dialog.Body>
+                <Dialog.Footer>
+                  <Dialog.CloseTrigger asChild>
+                    <Button variant="outline">取消</Button>
+                  </Dialog.CloseTrigger>
+                  <Dialog.ActionTrigger asChild onClick={() => setActions((count) => count + 1)}>
+                    <Button colorPalette="lime">确认并关闭</Button>
+                  </Dialog.ActionTrigger>
+                </Dialog.Footer>
+              </Dialog.Content>
+            </Dialog.Positioner>
+          </Portal>
+        </Dialog.Root>
+
+        <p role="status">
+          {lastEvent}；确认动作执行 {actions} 次。
+        </p>
+      </div>
+    )
+  },
+}
+
+export const CustomSize: Story = {
+  parameters: { controls: { disable: true } },
+  render: () => (
+    <Dialog.Root size="unstyled">
+      <Dialog.Trigger asChild>
+        <Button variant="outline">打开自定尺寸 Dialog</Button>
+      </Dialog.Trigger>
+      <Portal>
+        <Dialog.Backdrop />
+        <Dialog.Positioner>
+          <Dialog.Content maxWidth="360px" p="4" gap="3" textStyle="sm">
+            <Dialog.Header gap="1">
+              <Dialog.Title textStyle="lg">紧凑弹窗</Dialog.Title>
+              <Dialog.Description textStyle="sm">
+                自定尺寸，保留默认外观和焦点行为。
+              </Dialog.Description>
+            </Dialog.Header>
+            <Dialog.Body>宽度 360px，窄屏仍适应可用空间。</Dialog.Body>
+            <Dialog.Footer gap="2">
+              <Dialog.CloseTrigger asChild>
+                <Button size="sm">关闭</Button>
+              </Dialog.CloseTrigger>
+            </Dialog.Footer>
+          </Dialog.Content>
+        </Dialog.Positioner>
+      </Portal>
+    </Dialog.Root>
+  ),
+}
+
+export const Store: Story = {
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { story: 'useDialog 与 RootProvider 共用 store，外部按钮打开弹窗并恢复焦点。' },
+    },
+  },
+  render: function Store(args) {
+    const triggerRef = useRef<HTMLButtonElement>(null)
+    const dialog = useDialog({
+      onOpenChange: args.onOpenChange,
+      finalFocusEl: () => triggerRef.current,
+    })
+    return (
+      <>
+        <Button ref={triggerRef} onClick={() => dialog.setOpen(true)}>
+          通过 useDialog 打开
+        </Button>
+        <Dialog.RootProvider value={dialog}>
+          <Portal>
+            <Dialog.Backdrop />
+            <Dialog.Positioner>
+              <Dialog.Content>
+                <Dialog.Header>
+                  <Dialog.Title>包级 hook 与 RootProvider</Dialog.Title>
+                  <Dialog.Description>在组件外访问 store，无需额外导入 Ark。</Dialog.Description>
+                </Dialog.Header>
+                <Dialog.Body>外部按钮通过 dialog.setOpen(true) 打开此弹窗。</Dialog.Body>
+                <Dialog.Footer>
+                  <Dialog.CloseTrigger asChild>
+                    <Button variant="outline">关闭</Button>
+                  </Dialog.CloseTrigger>
+                </Dialog.Footer>
+              </Dialog.Content>
+            </Dialog.Positioner>
+          </Portal>
+        </Dialog.RootProvider>
+      </>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/overlays/Drawer.stories.tsx

@@ -0,0 +1,114 @@
+import { Button, Drawer, Input, Portal } from '@repo/ui'
+import { useId } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Overlays/Drawer',
+  component: Drawer.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '侧边、底部抽屉与尺寸定制。' },
+    },
+  },
+} satisfies Meta<typeof Drawer.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const SideAndBottom: Story = {
+  render: function SideAndBottom() {
+    const drawer = Drawer.useDrawer()
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>侧边与底部 Drawer</h3>
+          <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+            <Drawer.RootProvider value={drawer} placement="end" size="md">
+              <Drawer.Trigger asChild>
+                <Button variant="outline">打开侧边抽屉</Button>
+              </Drawer.Trigger>
+              <Portal>
+                <Drawer.Backdrop />
+                <Drawer.Positioner>
+                  <Drawer.Content>
+                    <Drawer.Header>
+                      <Drawer.Title>侧边抽屉</Drawer.Title>
+                      <Drawer.Description>通过 useDrawer 与 RootProvider 组合。</Drawer.Description>
+                    </Drawer.Header>
+                    <Drawer.Body gap="3">
+                      <label htmlFor={`${storyId}-drawer-note`}>输入内容</label>
+                      <Input id={`${storyId}-drawer-note`} placeholder="测试焦点循环" />
+                      {Array.from({ length: 20 }, (_, index) => (
+                        <p key={index}>滚动内容 {index + 1}：长内容应在抽屉内部滚动。</p>
+                      ))}
+                    </Drawer.Body>
+                    <Drawer.Footer>
+                      <Drawer.CloseTrigger asChild>
+                        <Button variant="outline">关闭</Button>
+                      </Drawer.CloseTrigger>
+                    </Drawer.Footer>
+                  </Drawer.Content>
+                </Drawer.Positioner>
+              </Portal>
+            </Drawer.RootProvider>
+            <Drawer.Root placement="bottom" size="lg">
+              <Drawer.Trigger asChild>
+                <Button variant="outline">打开底部抽屉</Button>
+              </Drawer.Trigger>
+              <Portal>
+                <Drawer.Backdrop />
+                <Drawer.Positioner>
+                  <Drawer.Content>
+                    <Drawer.Header>
+                      <Drawer.Title>底部抽屉</Drawer.Title>
+                      <Drawer.Description>底部定位使用全宽布局。</Drawer.Description>
+                    </Drawer.Header>
+                    <Drawer.Body>支持遮罩、Escape 关闭，以及关闭后的焦点恢复。</Drawer.Body>
+                    <Drawer.Footer>
+                      <Drawer.CloseTrigger asChild>
+                        <Button>完成</Button>
+                      </Drawer.CloseTrigger>
+                    </Drawer.Footer>
+                  </Drawer.Content>
+                </Drawer.Positioner>
+              </Portal>
+            </Drawer.Root>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+export const CustomSize: Story = {
+  render: function CustomSize() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Drawer.Root size="unstyled" placement="end">
+          <Drawer.Trigger asChild>
+            <Button variant="outline">打开紧凑抽屉</Button>
+          </Drawer.Trigger>
+          <Portal>
+            <Drawer.Backdrop />
+            <Drawer.Positioner>
+              <Drawer.Content maxWidth="320px" p="4" gap="3">
+                <Drawer.Header gap="1">
+                  <Drawer.Title textStyle="lg">紧凑抽屉</Drawer.Title>
+                  <Drawer.Description textStyle="sm">自定宽度与内部间距。</Drawer.Description>
+                </Drawer.Header>
+                <Drawer.Body>默认滑入方向仍由 placement 决定。</Drawer.Body>
+                <Drawer.Footer gap="2">
+                  <Drawer.CloseTrigger asChild>
+                    <Button size="sm">关闭</Button>
+                  </Drawer.CloseTrigger>
+                </Drawer.Footer>
+              </Drawer.Content>
+            </Drawer.Positioner>
+          </Portal>
+        </Drawer.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/overlays/HoverCard.stories.tsx

@@ -0,0 +1,47 @@
+import { HoverCard, Link, Portal } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Overlays/HoverCard',
+  component: HoverCard.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '悬停与聚焦时显示补充信息。' },
+    },
+  },
+} satisfies Meta<typeof HoverCard.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const HoverAndFocus: Story = {
+  render: function HoverAndFocus() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>HoverCard 补充信息</h3>
+          <HoverCard.Root openDelay={200} closeDelay={200} positioning={{ placement: 'top-start' }}>
+            <HoverCard.Trigger asChild>
+              <Link href="#overlay-heading">查看 UI 库信息</Link>
+            </HoverCard.Trigger>
+            <Portal>
+              <HoverCard.Positioner>
+                <HoverCard.Content>
+                  <HoverCard.Arrow>
+                    <HoverCard.ArrowTip />
+                  </HoverCard.Arrow>
+                  <strong>@repo/ui</strong>
+                  <p>Ark 处理行为，Panda 生成样式，组件源码在仓库内维护。</p>
+                </HoverCard.Content>
+              </HoverCard.Positioner>
+            </Portal>
+          </HoverCard.Root>
+          <p>悬停或聚焦链接展示补充信息，移动到卡片时保持显示。</p>
+        </div>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/overlays/Menu.stories.tsx

@@ -0,0 +1,133 @@
+import { Button, Menu, Portal } from '@repo/ui'
+import { useState, useId } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Overlays/Menu',
+  component: Menu.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '菜单选择、复选与单选项以及右键菜单。' },
+    },
+  },
+} satisfies Meta<typeof Menu.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const SelectionAndContextMenu: Story = {
+  render: function SelectionAndContextMenu() {
+    const [selection, setSelection] = useState('尚未选择')
+    const [notifications, setNotifications] = useState(true)
+    const [density, setDensity] = useState('comfortable')
+
+    const menu = Menu.useMenu({ onSelect: ({ value }) => setSelection(value) })
+
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>菜单选择与右键菜单</h3>
+          <Menu.RootProvider value={menu} size="md">
+            <Menu.Trigger asChild>
+              <Button variant="outline">
+                打开菜单
+                <Menu.Indicator />
+              </Button>
+            </Menu.Trigger>
+            <Portal>
+              <Menu.Positioner>
+                <Menu.Content>
+                  <Menu.ItemGroup id={`${storyId}-overlay-actions`}>
+                    <Menu.ItemGroupLabel>操作</Menu.ItemGroupLabel>
+                    <Menu.Item value="copy">复制</Menu.Item>
+                    <Menu.Item value="disabled" disabled>
+                      禁用操作
+                    </Menu.Item>
+                  </Menu.ItemGroup>
+                  <Menu.Separator />
+                  <Menu.CheckboxItem
+                    value="notifications"
+                    checked={notifications}
+                    onCheckedChange={setNotifications}
+                    closeOnSelect={false}>
+                    <Menu.ItemText>开启通知</Menu.ItemText>
+                    <Menu.ItemIndicator />
+                  </Menu.CheckboxItem>
+                  <Menu.RadioItemGroup
+                    id={`${storyId}-overlay-density`}
+                    value={density}
+                    onValueChange={({ value }) => setDensity(value)}>
+                    <Menu.ItemGroupLabel>密度</Menu.ItemGroupLabel>
+                    <Menu.RadioItem value="comfortable" closeOnSelect={false}>
+                      <Menu.ItemText>舒适</Menu.ItemText>
+                      <Menu.ItemIndicator />
+                    </Menu.RadioItem>
+                    <Menu.RadioItem value="compact" closeOnSelect={false}>
+                      <Menu.ItemText>紧凑</Menu.ItemText>
+                      <Menu.ItemIndicator asChild>
+                        <span>✓</span>
+                      </Menu.ItemIndicator>
+                    </Menu.RadioItem>
+                  </Menu.RadioItemGroup>
+                </Menu.Content>
+              </Menu.Positioner>
+            </Portal>
+          </Menu.RootProvider>
+          <Menu.Root onSelect={({ value }) => setSelection(value)}>
+            <Menu.ContextTrigger
+              className={css({
+                borderWidth: '1px',
+                borderStyle: 'dashed',
+                borderColor: 'border',
+                borderRadius: 'sm',
+                p: '4',
+              })}>
+              在此区域右键，或长按触屏打开上下文菜单。
+            </Menu.ContextTrigger>
+            <Portal>
+              <Menu.Positioner>
+                <Menu.Content>
+                  <Menu.Item value="refresh">刷新示例</Menu.Item>
+                  <Menu.Item value="inspect">查看信息</Menu.Item>
+                </Menu.Content>
+              </Menu.Positioner>
+            </Portal>
+          </Menu.Root>
+          <p role="status">
+            选择：{selection}；通知：{notifications ? '开启' : '关闭'}；密度：{density}
+          </p>
+        </div>
+      </div>
+    )
+  },
+}
+export const CustomSize: Story = {
+  render: function CustomSize() {
+    const [, setSelection] = useState('尚未选择')
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Menu.Root size="unstyled" onSelect={({ value }) => setSelection(value)}>
+          <Menu.Trigger asChild>
+            <Button variant="outline">打开紧凑菜单</Button>
+          </Menu.Trigger>
+          <Portal>
+            <Menu.Positioner>
+              <Menu.Content minWidth="160px" maxHeight="240px" p="1" gap="1" textStyle="sm">
+                <Menu.Item value="compact-copy" px="2" minHeight="32px" gap="2">
+                  复制
+                </Menu.Item>
+                <Menu.Item value="compact-save" px="2" minHeight="32px" gap="2">
+                  保存
+                </Menu.Item>
+              </Menu.Content>
+            </Menu.Positioner>
+          </Portal>
+        </Menu.Root>
+      </div>
+    )
+  },
+}