@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/stories/date/DatePicker.stories.tsx

@@ -0,0 +1,302 @@
+import {
+  Button,
+  DatePicker,
+  Heading,
+  Portal,
+  parseDate,
+  useDatePicker,
+  type DateValue,
+} from '@repo/ui'
+import { useRef, useState } from 'react'
+import { hstack, vstack } from 'styled-system/patterns'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const referenceDate = parseDate('2026-10-13')
+function CalendarViews({
+  months = 1,
+  selectors = false,
+}: {
+  months?: number
+  selectors?: boolean
+}) {
+  return (
+    <>
+      <DatePicker.View view="day">
+        <DatePicker.Header />
+        {selectors && (
+          <div className={hstack({ gap: '2' })}>
+            <DatePicker.MonthSelect aria-label="月份" />
+            <DatePicker.YearSelect aria-label="年份" />
+          </div>
+        )}
+        <div className={hstack({ alignItems: 'start', gap: '4', flexWrap: 'wrap' })}>
+          {Array.from({ length: months }, (_, offset) => (
+            <DatePicker.DayTable key={offset} offset={offset} />
+          ))}
+        </div>
+      </DatePicker.View>
+      <DatePicker.View view="month">
+        <DatePicker.Header />
+        <DatePicker.MonthTable />
+      </DatePicker.View>
+      <DatePicker.View view="year">
+        <DatePicker.Header />
+        <DatePicker.YearTable />
+      </DatePicker.View>
+    </>
+  )
+}
+const meta = {
+  title: 'Date/DatePicker',
+  component: DatePicker.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '单日、范围、内联多选、日历视图和表单提交。' },
+    },
+  },
+} satisfies Meta<typeof DatePicker.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const SingleDateForm: Story = {
+  render: function SingleDateForm() {
+    const [value, setValue] = useState<DateValue[]>([referenceDate])
+    const [disabled, setDisabled] = useState(false)
+    const [submitted, setSubmitted] = useState('')
+    const inputRef = useRef<HTMLInputElement>(null)
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          <Button variant="outline" onClick={() => inputRef.current?.focus()}>
+            通过 ref 聚焦输入
+          </Button>
+          <Button variant="outline" onClick={() => setDisabled(!disabled)} aria-pressed={disabled}>
+            {disabled ? '启用' : '禁用'}
+          </Button>
+          <Button variant="plain" onClick={() => setValue([referenceDate])}>
+            外部重置日期
+          </Button>
+        </div>
+        <form
+          className={vstack({ gap: '3', alignItems: 'start' })}
+          onSubmit={(event) => {
+            event.preventDefault()
+            const date = new FormData(event.currentTarget).get('appointment')
+            setSubmitted(typeof date === 'string' ? date : '')
+          }}>
+          <DatePicker.Root
+            lazyMount
+            value={value}
+            onValueChange={({ value }) => setValue(value)}
+            disabled={disabled}
+            locale="zh-CN"
+            name="appointment"
+            defaultFocusedValue={referenceDate}
+            width="72"
+            min={parseDate('2026-10-01')}
+            max={parseDate('2026-12-31')}
+            positioning={{ placement: 'bottom-start' }}>
+            <DatePicker.Label>受控日期 · 2026 年 10—12 月可选</DatePicker.Label>
+            <DatePicker.Control>
+              <DatePicker.Input ref={inputRef} aria-label="预约日期" />
+              <DatePicker.IndicatorGroup>
+                <DatePicker.ClearTrigger aria-label="清空日期" />
+                <DatePicker.Trigger aria-label="打开日历" />
+              </DatePicker.IndicatorGroup>
+            </DatePicker.Control>
+            <Portal>
+              <DatePicker.Positioner>
+                <DatePicker.Content aria-label="日期选择面板">
+                  <CalendarViews selectors />
+                </DatePicker.Content>
+              </DatePicker.Positioner>
+            </Portal>
+          </DatePicker.Root>
+          <Button type="submit" disabled={disabled}>
+            读取表单日期（不发送请求）
+          </Button>
+        </form>
+        <p role="status">
+          已选择：{value.map((date) => date.toString()).join('、') || '无'}；表单值：
+          {submitted || '尚未读取'}
+        </p>
+      </div>
+    )
+  },
+}
+export const Range: Story = {
+  render: function Range() {
+    const [range, setRange] = useState<DateValue[]>([referenceDate, referenceDate.add({ days: 4 })])
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">双月范围 · 预设范围 · 240px 窄容器</Heading>
+        <DatePicker.Root
+          lazyMount
+          selectionMode="range"
+          numOfMonths={2}
+          value={range}
+          onValueChange={({ value }) => setRange(value)}
+          locale="zh-CN"
+          defaultFocusedValue={referenceDate}
+          size="sm"
+          variant="subtle"
+          width="full"
+          maxWidth="240px">
+          <DatePicker.Label>日期范围</DatePicker.Label>
+          <DatePicker.Control>
+            <DatePicker.Input index={0} aria-label="起始日期" />
+            <DatePicker.Input index={1} aria-label="结束日期" />
+            <DatePicker.Trigger aria-label="打开范围日历" />
+          </DatePicker.Control>
+          <Portal>
+            <DatePicker.Positioner>
+              <DatePicker.Content width="auto" aria-label="范围选择面板">
+                <CalendarViews months={2} />
+                <DatePicker.PresetTrigger value={[referenceDate, referenceDate.add({ days: 6 })]}>
+                  选择示例的一周
+                </DatePicker.PresetTrigger>
+              </DatePicker.Content>
+            </DatePicker.Positioner>
+          </Portal>
+          <DatePicker.ValueText placeholder="尚未选择范围" separator=" → " />
+        </DatePicker.Root>
+      </div>
+    )
+  },
+}
+export const InlineStore: Story = {
+  render: function InlineStore() {
+    const store = useDatePicker({
+      inline: true,
+      locale: 'zh-CN',
+      selectionMode: 'multiple',
+      showWeekNumbers: true,
+      defaultFocusedValue: referenceDate,
+      defaultValue: [referenceDate, referenceDate.add({ days: 2 })],
+    })
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">内联多选 · 周数 · RootProvider</Heading>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          <Button variant="outline" onClick={() => store.setValue([])}>
+            通过 store 清空
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              store.setFocusedValue(referenceDate)
+              store.setView('day')
+            }}>
+            通过 store 返回示例月份
+          </Button>
+        </div>
+        <DatePicker.RootProvider value={store} size="xs" hideOutsideDays width="80">
+          <DatePicker.Label>多选日历</DatePicker.Label>
+          <CalendarViews />
+          <DatePicker.ValueText placeholder="选择任意多个日期">
+            {({ valueAsString, remove }) => (
+              <Button key={valueAsString} variant="outline" size="xs" onClick={remove}>
+                {valueAsString} ×
+              </Button>
+            )}
+          </DatePicker.ValueText>
+        </DatePicker.RootProvider>
+      </div>
+    )
+  },
+}
+export const ReadOnlyAndValue: Story = {
+  render: function ReadOnlyAndValue() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">便捷 Value · 只读</Heading>
+        <DatePicker.Root
+          readOnly
+          defaultValue={[referenceDate]}
+          locale="zh-CN"
+          size="lg"
+          width="72">
+          <DatePicker.Label>只读日期</DatePicker.Label>
+          <DatePicker.Control>
+            <DatePicker.Input aria-label="只读日期" />
+            <DatePicker.Trigger aria-label="只读日历" />
+          </DatePicker.Control>
+        </DatePicker.Root>
+        <DatePicker.Root lazyMount defaultFocusedValue={referenceDate} locale="zh-CN" width="72">
+          <DatePicker.Value placeholder="选择一个日期" />
+          <Portal>
+            <DatePicker.Positioner>
+              <DatePicker.Content aria-label="便捷日期面板">
+                <CalendarViews />
+              </DatePicker.Content>
+            </DatePicker.Positioner>
+          </Portal>
+        </DatePicker.Root>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">分维度定制 · 紧凑日历</Heading>
+        <DatePicker.Root
+          size="unstyled"
+          inline
+          locale="zh-CN"
+          defaultFocusedValue={referenceDate}
+          defaultValue={[referenceDate]}
+          width="64"
+          gap="2"
+          css={{
+            '& [data-part=view]': { gap: '2' },
+            '& [data-part=view-control]': { height: '28px', gap: '2' },
+            '& [data-part=prev-trigger], & [data-part=next-trigger], & [data-part=view-trigger]': {
+              boxSize: '28px',
+              _icon: { boxSize: '3.5' },
+            },
+            '& [data-part=view-trigger]': { width: 'auto', textStyle: 'sm', px: '2' },
+            '& [data-part=table-header]': { width: '32px', py: '1', textStyle: 'xs' },
+            '& [data-part=table-cell]': { py: '0.5' },
+            '& [data-part=table-cell-trigger]': {
+              minWidth: '32px',
+              minHeight: '32px',
+              textStyle: 'sm',
+            },
+          }}>
+          <DatePicker.Label textStyle="sm">自定尺寸，保留选中与范围外观</DatePicker.Label>
+          <CalendarViews />
+        </DatePicker.Root>
+        <DatePicker.Root
+          variant="unstyled"
+          inline
+          locale="zh-CN"
+          defaultFocusedValue={referenceDate}
+          defaultValue={[referenceDate]}
+          width="72"
+          css={{
+            '& [data-part=table-cell-trigger]': {
+              borderRadius: 'full',
+              cursor: 'pointer',
+              focusVisibleRing: 'inside',
+              _hover: { bg: 'gray.3' },
+              '&[data-selected]': { bg: 'lime.9', color: 'gray.1' },
+              '&[data-outside-range]': { color: 'gray.8' },
+            },
+            '& [data-part=prev-trigger], & [data-part=next-trigger], & [data-part=view-trigger]': {
+              borderRadius: 'md',
+              cursor: 'pointer',
+              focusVisibleRing: 'inside',
+              _hover: { bg: 'gray.3' },
+            },
+          }}>
+          <DatePicker.Label>自定外观，保留 md 尺寸</DatePicker.Label>
+          <CalendarViews />
+        </DatePicker.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/disclosure/Accordion.stories.tsx

@@ -0,0 +1,105 @@
+import { Accordion, Button } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Disclosure/Accordion',
+  component: Accordion.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '多项受控展开、禁用项与外观定制。' },
+    },
+  },
+} satisfies Meta<typeof Accordion.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const ControlledMultiple: Story = {
+  render: function ControlledMultiple() {
+    const [expanded, setExpanded] = useState(['intro'])
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>Accordion 支持多项展开；方向键移动焦点并跳过禁用项，Enter/空格切换展开状态。</p>
+        <Accordion.Root
+          multiple
+          collapsible
+          value={expanded}
+          onValueChange={(details) => setExpanded(details.value)}
+          maxWidth="xl">
+          <Accordion.Item value="intro">
+            <h3>
+              <Accordion.ItemTrigger>
+                组件说明
+                <Accordion.ItemIndicator />
+              </Accordion.ItemTrigger>
+            </h3>
+            <Accordion.ItemContent>
+              <Accordion.ItemBody>
+                默认 outline 配方，内容展开时应有高度动画，箭头随状态旋转。
+              </Accordion.ItemBody>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+          <Accordion.Item value="disabled" disabled>
+            <h3>
+              <Accordion.ItemTrigger>
+                禁用项目
+                <Accordion.ItemIndicator />
+              </Accordion.ItemTrigger>
+            </h3>
+            <Accordion.ItemContent>
+              <Accordion.ItemBody>该项目不可展开。</Accordion.ItemBody>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+          <Accordion.Item value="details">
+            <h3>
+              <Accordion.ItemTrigger>
+                更多详情
+                <Accordion.ItemIndicator />
+              </Accordion.ItemTrigger>
+            </h3>
+            <Accordion.ItemContent>
+              <Accordion.ItemBody>此项可以与第一项同时展开，也可以单独收起。</Accordion.ItemBody>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        </Accordion.Root>
+        <div className={css({ display: 'flex', gap: '3', flexWrap: 'wrap' })}>
+          <Button type="button" variant="outline" onClick={() => setExpanded(['intro', 'details'])}>
+            外部展开全部可用项目
+          </Button>
+          <Button type="button" variant="outline" onClick={() => setExpanded([])}>
+            外部收起全部
+          </Button>
+        </div>
+        <p role="status">展开项目：{expanded.join('、') || '无'}</p>
+      </div>
+    )
+  },
+}
+export const CustomAppearance: Story = {
+  render: function CustomAppearance() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>自定外观保留默认尺寸与展开行为；系统开启减少动态效果时，内容直接展开／收起。</p>
+        <Accordion.Root variant="unstyled" collapsible maxWidth="xl">
+          <Accordion.Item value="custom" borderBottomWidth="1px" borderColor="lime.6">
+            <h3>
+              <Accordion.ItemTrigger color="lime.11" fontWeight="medium" focusVisibleRing="outside">
+                自定外观
+                <Accordion.ItemIndicator color="lime.10" />
+              </Accordion.ItemTrigger>
+            </h3>
+            <Accordion.ItemContent>
+              <Accordion.ItemBody color="gray.fg.muted">
+                内容与指示器仍跟随展开状态。
+              </Accordion.ItemBody>
+            </Accordion.ItemContent>
+          </Accordion.Item>
+        </Accordion.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/disclosure/Collapsible.stories.tsx

@@ -0,0 +1,55 @@
+import { Button, Collapsible } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Disclosure/Collapsible',
+  component: Collapsible.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '按需挂载、退出卸载与内容内关闭。' },
+    },
+  },
+} satisfies Meta<typeof Collapsible.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const LazyMount: Story = {
+  render: function LazyMount() {
+    const [open, setOpen] = useState(false)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Collapsible.Root
+          open={open}
+          onOpenChange={(details) => setOpen(details.open)}
+          lazyMount
+          unmountOnExit
+          maxWidth="xl">
+          <Collapsible.Trigger asChild>
+            <Button type="button" variant="outline">
+              {open ? '收起详情' : '展开详情'}
+            </Button>
+          </Collapsible.Trigger>
+          <Collapsible.Content>
+            <div
+              className={css({
+                padding: '4',
+                borderWidth: '1px',
+                borderRadius: 'md',
+                marginTop: '3',
+              })}>
+              <p>首次展开才挂载，关闭动画结束后卸载。</p>
+              <Button type="button" variant="plain" onClick={() => setOpen(false)}>
+                从内容内部关闭
+              </Button>
+            </div>
+          </Collapsible.Content>
+        </Collapsible.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/disclosure/Steps.stories.tsx

@@ -0,0 +1,208 @@
+import { Button, Heading, Steps, useSteps } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+import { hstack, vstack } from 'styled-system/patterns'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const items = [
+  { title: '选择方案', description: '确认配置' },
+  { title: '填写信息', description: '完成资料' },
+  { title: '提交', description: '确认结果' },
+]
+function StepList({ custom = false }: { custom?: boolean }) {
+  return (
+    <Steps.List>
+      {items.map((item, index) => (
+        <Steps.Item key={item.title} index={index}>
+          <Steps.Trigger>
+            {custom ? (
+              <Steps.Indicator>
+                <Steps.Status
+                  complete={<span>✓</span>}
+                  current={<span>●</span>}
+                  incomplete={<span>○</span>}
+                />
+              </Steps.Indicator>
+            ) : (
+              <Steps.Indicator />
+            )}
+            <div>
+              <Steps.Title>{item.title}</Steps.Title>
+              <Steps.Description>{item.description}</Steps.Description>
+            </div>
+          </Steps.Trigger>
+          <Steps.Separator />
+        </Steps.Item>
+      ))}
+    </Steps.List>
+  )
+}
+const meta = {
+  title: 'Disclosure/Steps',
+  component: Steps.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '线性校验、完成状态、垂直布局与外部 store。' },
+    },
+  },
+} satisfies Meta<typeof Steps.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const LinearValidation: Story = {
+  render: function LinearValidation() {
+    const [step, setStep] = useState(0)
+    const [valid, setValid] = useState(false)
+    const [message, setMessage] = useState('')
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">受控流程 · 线性校验</Heading>
+        <Steps.Root
+          count={items.length}
+          step={step}
+          linear
+          isStepValid={(index) => index !== 1 || valid}
+          onStepChange={({ step: nextStep }) => {
+            setStep(nextStep)
+            setMessage('')
+          }}
+          onStepInvalid={() => setMessage('请先确认第二步资料，再继续。')}
+          onStepComplete={() => setMessage('已完成所有步骤。')}>
+          <StepList />
+          {items.map((item, index) => (
+            <Steps.Content key={item.title} index={index}>
+              <div className={vstack({ gap: '3', alignItems: 'start' })}>
+                <p>{item.title}的内容；线性模式请使用前后按钮依次完成。</p>
+                {index === 1 && (
+                  <Button variant="outline" onClick={() => setValid(!valid)} aria-pressed={valid}>
+                    {valid ? '资料已确认（点击撤销）' : '确认资料'}
+                  </Button>
+                )}
+              </div>
+            </Steps.Content>
+          ))}
+          <Steps.CompletedContent>所有步骤已完成。</Steps.CompletedContent>
+          <div className={hstack({ gap: '3' })}>
+            <Steps.PrevTrigger asChild>
+              <Button variant="outline">上一步</Button>
+            </Steps.PrevTrigger>
+            <Steps.NextTrigger asChild>
+              <Button>下一步</Button>
+            </Steps.NextTrigger>
+            <Button
+              variant="plain"
+              onClick={() => {
+                setStep(0)
+                setValid(false)
+                setMessage('')
+              }}>
+              重置
+            </Button>
+          </div>
+        </Steps.Root>
+        <p role="status" aria-live="polite">
+          {message || `当前步骤：${Math.min(step + 1, items.length)} / ${items.length}`}
+        </p>
+      </div>
+    )
+  },
+}
+export const VerticalStore: Story = {
+  render: function VerticalStore() {
+    const store = useSteps({ count: items.length, defaultStep: 1, orientation: 'vertical' })
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">竖向 · RootProvider · 自定义状态图标</Heading>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          <Button variant="outline" onClick={() => store.resetStep()}>
+            通过 store 重置
+          </Button>
+          <Button onClick={() => store.setStep(items.length)}>通过 store 完成</Button>
+        </div>
+        <Steps.RootProvider value={store} variant="subtle" size="sm" minH="64">
+          <StepList custom />
+          <div className={css({ flex: '1', minWidth: '0' })}>
+            {items.map((item, index) => (
+              <Steps.Content key={item.title} index={index}>
+                {item.description}
+              </Steps.Content>
+            ))}
+            <Steps.CompletedContent>store 流程已完成。</Steps.CompletedContent>
+          </div>
+        </Steps.RootProvider>
+      </div>
+    )
+  },
+}
+export const Variants: Story = {
+  tags: ['!dev'],
+  render: function Variants() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">尺寸与自由组合</Heading>
+        <Steps.Root count={items.length} defaultStep={1} size="xs">
+          <StepList />
+        </Steps.Root>
+        <Steps.Root count={items.length} defaultStep={1} size="lg" variant="subtle">
+          <Steps.List>
+            {items.map((item, index) => (
+              <Steps.Item key={item.title} index={index}>
+                <Steps.Trigger aria-label={item.title}>
+                  <Steps.Indicator>
+                    <Steps.Status
+                      complete={<span>✓</span>}
+                      current={0}
+                      incomplete={<Steps.Number />}
+                    />
+                  </Steps.Indicator>
+                </Steps.Trigger>
+                <Steps.Separator />
+              </Steps.Item>
+            ))}
+          </Steps.List>
+        </Steps.Root>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">分维度定制</Heading>
+        <Steps.Root
+          count={items.length}
+          defaultStep={1}
+          size="unstyled"
+          gap="3"
+          css={{
+            '& [data-part=list]': { textStyle: 'xs' },
+            '& [data-part=item], & [data-part=trigger]': { gap: '2' },
+            '& [data-part=indicator]': { boxSize: '28px', _icon: { boxSize: '14px' } },
+            '& [data-part=separator]': { height: '2px', mx: '2' },
+            '& [data-part=title]': { textStyle: 'xs' },
+          }}>
+          <StepList />
+        </Steps.Root>
+        <Steps.Root
+          count={items.length}
+          defaultStep={1}
+          variant="unstyled"
+          css={{
+            '& [data-part=indicator]': {
+              bg: 'lime.3',
+              color: 'lime.11',
+              borderRadius: 'sm',
+              '&[data-current]': { bg: 'lime.9', color: 'white' },
+            },
+            '& [data-part=separator]': { bg: 'lime.5' },
+            '& [data-part=trigger]': { focusVisibleRing: 'outside' },
+          }}>
+          <StepList />
+        </Steps.Root>
+      </div>
+    )
+  },
+}