@oyolincc/create 0.4.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/stories/feedback/Toast.stories.tsx

@@ -0,0 +1,145 @@
+import { Button, CloseButton, Spinner, Toast, Toaster, createToaster } from '@repo/ui'
+import { useEffect, useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Feedback/Toast',
+  component: Toast.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '通知类型、加载更新、操作回调、自定义内容和实例清理。' },
+    },
+  },
+} satisfies Meta<typeof Toast.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Lifecycle: Story = {
+  render: function Lifecycle() {
+    const [toaster] = useState(() =>
+      createToaster({
+        placement: 'bottom-end',
+        pauseOnPageIdle: true,
+        overlap: true,
+        max: 3,
+      }),
+    )
+    const [loadingId, setLoadingId] = useState<string>()
+    const [actions, setActions] = useState(0)
+    const [status, setStatus] = useState('尚未操作')
+    const [customContent, setCustomContent] = useState(false)
+    useEffect(() => () => toaster.remove(), [toaster])
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>通知在右下角显示；悬停时暂停关闭，离开后继续计时。离开此示例后清理通知。</p>
+        <Toaster toaster={toaster} label="组件预览通知">
+          {customContent
+            ? (toast) => (
+                <Toast.Root>
+                  {toast.type === 'loading' ? <Spinner /> : <Toast.Indicator />}
+                  <div>
+                    <Toast.Title>{toast.title}</Toast.Title>
+                    <Toast.Description>{toast.description}</Toast.Description>
+                    {toast.action && (
+                      <Toast.ActionTrigger>{toast.action.label}</Toast.ActionTrigger>
+                    )}
+                  </div>
+                  {toast.closable && (
+                    <Toast.CloseTrigger asChild>
+                      <CloseButton size="sm" />
+                    </Toast.CloseTrigger>
+                  )}
+                </Toast.Root>
+              )
+            : undefined}
+        </Toaster>
+        <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+          <Button variant="outline" onClick={() => setCustomContent((value) => !value)}>
+            {customContent ? '切换默认通知内容' : '切换自定义通知内容'}
+          </Button>
+          {(['info', 'success', 'warning', 'error'] as const).map((type) => (
+            <Button
+              key={type}
+              variant="outline"
+              onClick={() =>
+                toaster.create({
+                  type,
+                  title: `${type} 通知`,
+                  description: '4 秒后自动关闭，也可点击关闭按钮。',
+                  duration: 4000,
+                  closable: true,
+                  onStatusChange: (details) => setStatus(`${type}: ${details.status}`),
+                })
+              }>
+              {type}
+            </Button>
+          ))}
+          <Button
+            onClick={() => {
+              const id = toaster.create({
+                type: 'loading',
+                title: '等待操作完成',
+                description: '点击“更新为成功”更新同一条通知。',
+                closable: true,
+              })
+              setLoadingId(id)
+            }}>
+            创建 loading
+          </Button>
+          <Button
+            variant="outline"
+            disabled={!loadingId}
+            onClick={() => {
+              if (!loadingId) return
+              toaster.update(loadingId, {
+                type: 'success',
+                title: '操作完成',
+                description: '这条通知由 loading 更新而来。',
+                duration: 4000,
+              })
+              setLoadingId(undefined)
+            }}>
+            更新为成功
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() =>
+              toaster.create({
+                type: 'info',
+                title: '带操作的通知',
+                description: '操作按钮应执行一次并关闭通知。',
+                duration: Infinity,
+                closable: true,
+                action: { label: '执行操作', onClick: () => setActions((count) => count + 1) },
+              })
+            }>
+            带操作的通知
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              for (let index = 1; index <= 5; index++) {
+                toaster.create({ title: `批量通知 ${index}`, duration: Infinity, closable: true })
+              }
+            }}>
+            连续创建 5 条
+          </Button>
+          <Button
+            variant="outline"
+            onClick={() => {
+              toaster.dismiss()
+              setLoadingId(undefined)
+            }}>
+            关闭全部
+          </Button>
+        </div>
+        <p role="status">
+          操作执行 {actions} 次；生命周期：{status}
+        </p>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/forms/Checkbox.stories.tsx

@@ -0,0 +1,281 @@
+import { fn } from 'storybook/test'
+import { Button, Checkbox, CheckboxGroup, Field } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const channels = ['邮件', '站内通知']
+
+const meta = {
+  title: 'Forms/Checkbox',
+  component: Checkbox.Root,
+  args: { size: 'md', variant: 'solid', disabled: false, onCheckedChange: fn() },
+  argTypes: {
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled'] },
+    variant: {
+      control: 'select',
+      options: ['outline', 'plain', 'solid', 'subtle', 'surface', 'unstyled'],
+    },
+    disabled: { control: 'boolean' },
+    onCheckedChange: { control: false },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '半选、全选联动、分组表单及自定义指示器。' },
+    },
+  },
+} satisfies Meta<typeof Checkbox.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'variant', 'disabled'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Checkbox.Root {...args}>
+        <Checkbox.HiddenInput />
+        <Checkbox.Control />
+        <Checkbox.Label>同意选项</Checkbox.Label>
+      </Checkbox.Root>
+    </div>
+  ),
+}
+
+export const ValidationAndGroup: Story = {
+  render: function ValidationAndGroup() {
+    const [selected, setSelected] = useState(['邮件'])
+    const [accepted, setAccepted] = useState(false)
+    const [validated, setValidated] = useState(false)
+    const [submitted, setSubmitted] = useState('尚未提交')
+    const allChecked = selected.length === channels.length
+    const checked: Checkbox.CheckedState = allChecked
+      ? true
+      : selected.length > 0
+        ? 'indeterminate'
+        : false
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>点击文字或使用 Tab + 空格切换。通知全选应随子项显示未选、半选、全选。</p>
+        <form
+          noValidate
+          className={css({ display: 'grid', gap: '4', maxWidth: 'md' })}
+          onReset={() => {
+            setSelected(['邮件'])
+            setAccepted(false)
+            setValidated(false)
+            setSubmitted('尚未提交')
+          }}
+          onSubmit={(event) => {
+            event.preventDefault()
+            setValidated(true)
+            if (!accepted) {
+              setSubmitted('请先同意使用条款')
+              const input = event.currentTarget.elements.namedItem('terms')
+              if (input instanceof HTMLInputElement) input.focus()
+              return
+            }
+            const data = new FormData(event.currentTarget)
+            setSubmitted(
+              JSON.stringify({
+                channels: data.getAll('channels'),
+                terms: data.get('terms'),
+                digest: data.get('digest'),
+                disabled: data.get('disabled'),
+                customSize: data.get('custom-checkbox-size'),
+                customAppearance: data.get('custom-checkbox-appearance'),
+              }),
+            )
+          }}>
+          <Checkbox.Root
+            checked={checked}
+            onCheckedChange={(details) =>
+              setSelected(details.checked === true ? [...channels] : [])
+            }>
+            <Checkbox.Control>
+              <Checkbox.Indicator
+                checked={
+                  <svg>
+                    <path d="M5 12l4 4L19 6" />
+                  </svg>
+                }
+                indeterminate={
+                  <svg>
+                    <circle cx="12" cy="12" r="4" />
+                  </svg>
+                }
+              />
+            </Checkbox.Control>
+            <Checkbox.Label>全部通知渠道</Checkbox.Label>
+            <Checkbox.HiddenInput />
+            <Checkbox.Context>
+              {(api) => (
+                <span>（{api.indeterminate ? '半选' : api.checked ? '全选' : '未选'}）</span>
+              )}
+            </Checkbox.Context>
+          </Checkbox.Root>
+          <CheckboxGroup
+            name="channels"
+            value={selected}
+            onValueChange={setSelected}
+            className={css({ display: 'grid', gap: '3', pl: '8' })}>
+            {channels.map((channel) => (
+              <Checkbox.Root key={channel} value={channel} variant="outline" size="sm">
+                <Checkbox.Control>
+                  <Checkbox.Indicator />
+                </Checkbox.Control>
+                <Checkbox.Label>{channel}</Checkbox.Label>
+                <Checkbox.HiddenInput />
+              </Checkbox.Root>
+            ))}
+          </CheckboxGroup>
+          <p role="status">通知渠道：{selected.join('、') || '无'}</p>
+
+          <Field.Root required invalid={validated && !accepted}>
+            <Checkbox.Root
+              name="terms"
+              value="accepted"
+              checked={accepted}
+              onCheckedChange={(details) => setAccepted(details.checked === true)}>
+              <Checkbox.Control>
+                <Checkbox.Indicator />
+              </Checkbox.Control>
+              <Checkbox.Label>
+                同意使用条款 <Field.RequiredIndicator>（必选）</Field.RequiredIndicator>
+              </Checkbox.Label>
+              <Checkbox.HiddenInput />
+            </Checkbox.Root>
+            <Field.HelperText>验证状态由 Field.Root 提供。</Field.HelperText>
+            <Field.ErrorText>请先同意使用条款。</Field.ErrorText>
+          </Field.Root>
+
+          <Checkbox.Root name="digest" value="enabled" defaultChecked variant="surface" size="lg">
+            <Checkbox.Control>
+              <Checkbox.Indicator />
+            </Checkbox.Control>
+            <Checkbox.Label>每日摘要（非受控，默认选中）</Checkbox.Label>
+            <Checkbox.HiddenInput />
+          </Checkbox.Root>
+          <Field.Root disabled>
+            <Checkbox.Root name="disabled" defaultChecked>
+              <Checkbox.Control>
+                <Checkbox.Indicator />
+              </Checkbox.Control>
+              <Checkbox.Label>禁用选项（不参与提交）</Checkbox.Label>
+              <Checkbox.HiddenInput />
+            </Checkbox.Root>
+          </Field.Root>
+          <Checkbox.Root defaultChecked>
+            <Checkbox.Control>
+              <Checkbox.Indicator>
+                <circle cx="12" cy="12" r="6" />
+              </Checkbox.Indicator>
+            </Checkbox.Control>
+            <Checkbox.Label>自定义 SVG 内容</Checkbox.Label>
+            <Checkbox.HiddenInput />
+          </Checkbox.Root>
+          <Checkbox.Root defaultChecked>
+            <Checkbox.Control>
+              <Checkbox.Indicator asChild>
+                <svg aria-hidden="true">
+                  <path d="M5 12l4 4L19 6" />
+                </svg>
+              </Checkbox.Indicator>
+            </Checkbox.Control>
+            <Checkbox.Label>asChild 自定义图标</Checkbox.Label>
+            <Checkbox.HiddenInput />
+          </Checkbox.Root>
+          <div className={css({ display: 'grid', gap: '4' })}>
+            <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>
+              复选框：尺寸与外观独立自定义
+            </h3>
+            <Checkbox.Root
+              size="unstyled"
+              name="custom-checkbox-size"
+              value="yes"
+              gap="4"
+              defaultChecked>
+              <Checkbox.Control boxSize="32px" _icon={{ boxSize: '24px' }}>
+                <Checkbox.Indicator />
+              </Checkbox.Control>
+              <Checkbox.Label textStyle="lg">自定 32px 复选框，保留 solid</Checkbox.Label>
+              <Checkbox.HiddenInput />
+            </Checkbox.Root>
+            <Checkbox.Root
+              variant="unstyled"
+              name="custom-checkbox-appearance"
+              value="yes"
+              defaultChecked>
+              <Checkbox.Control
+                borderWidth="2px"
+                borderColor="gray.8"
+                borderRadius="full"
+                focusVisibleRing="outside"
+                _checked={{ bg: 'lime.9', color: 'black' }}>
+                <Checkbox.Indicator />
+              </Checkbox.Control>
+              <Checkbox.Label>自定圆形外观，保留 md 尺寸</Checkbox.Label>
+              <Checkbox.HiddenInput />
+            </Checkbox.Root>
+          </div>
+
+          <div className={css({ display: 'flex', gap: '3' })}>
+            <Button colorPalette="lime" type="submit">
+              提交 Checkbox 表单
+            </Button>
+            <Button type="reset" variant="outline">
+              重置 Checkbox 表单
+            </Button>
+          </div>
+          <p role="status">Checkbox 提交结果：{submitted}</p>
+        </form>
+      </div>
+    )
+  },
+}
+export const Indicators: Story = {
+  render: function Indicators() {
+    const [checked, setChecked] = useState<Checkbox.CheckedState>(true)
+    const [customChecked, setCustomChecked] = useState(true)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <Checkbox.Root checked={checked} onCheckedChange={({ checked }) => setChecked(checked)}>
+            <Checkbox.HiddenInput />
+            <Checkbox.Control />
+            <Checkbox.Label>Control 默认提供指示器</Checkbox.Label>
+          </Checkbox.Root>
+          <Checkbox.Root checked="indeterminate">
+            <Checkbox.HiddenInput />
+            <Checkbox.Control />
+            <Checkbox.Label>默认半选指示器</Checkbox.Label>
+          </Checkbox.Root>
+          <Checkbox.Root
+            checked={customChecked}
+            onCheckedChange={({ checked }) => setCustomChecked(checked === true)}>
+            <Checkbox.HiddenInput />
+            <Checkbox.Control>
+              {customChecked && (
+                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                  <path d="m9 17-5-5 2-2 3 3 9-9 2 2Z" />
+                </svg>
+              )}
+            </Checkbox.Control>
+            <Checkbox.Label>自定义 children 替换默认指示器</Checkbox.Label>
+          </Checkbox.Root>
+          <Checkbox.Root defaultChecked>
+            <Checkbox.HiddenInput />
+            <Checkbox.Control>
+              <Checkbox.Indicator />
+            </Checkbox.Control>
+            <Checkbox.Label>原有显式 Indicator 用法继续有效</Checkbox.Label>
+          </Checkbox.Root>
+        </div>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/forms/Editable.stories.tsx

@@ -0,0 +1,94 @@
+import { Button, Editable } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Forms/Editable',
+  component: Editable.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '编辑、提交、取消与外部 store。' },
+    },
+  },
+} satisfies Meta<typeof Editable.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const CommitAndCancel: Story = {
+  render: function CommitAndCancel() {
+    const [title, setTitle] = useState('可编辑的标题')
+    const [savedTitle, setSavedTitle] = useState(title)
+
+    const editable = Editable.useEditable({
+      value: title,
+      onValueChange: ({ value }) => setTitle(value),
+      onValueCommit: ({ value }) => setSavedTitle(value),
+      activationMode: 'none',
+      submitMode: 'enter',
+    })
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3', maxWidth: 'xl' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>提交与取消编辑</h3>
+          <Editable.RootProvider value={editable} size="md">
+            <Editable.Label className={css({ srOnly: true })}>标题</Editable.Label>
+            <Editable.Area>
+              <Editable.Input />
+              <Editable.Preview />
+            </Editable.Area>
+            <Editable.Control>
+              <Editable.Context>
+                {(context) =>
+                  context.editing ? (
+                    <>
+                      <Editable.SubmitTrigger asChild>
+                        <Button size="sm">保存</Button>
+                      </Editable.SubmitTrigger>
+                      <Editable.CancelTrigger asChild>
+                        <Button size="sm" variant="outline">
+                          取消
+                        </Button>
+                      </Editable.CancelTrigger>
+                    </>
+                  ) : (
+                    <Editable.EditTrigger asChild>
+                      <Button size="sm" variant="outline">
+                        编辑
+                      </Button>
+                    </Editable.EditTrigger>
+                  )
+                }
+              </Editable.Context>
+            </Editable.Control>
+          </Editable.RootProvider>
+          <p role="status">最后提交：{savedTitle}；Enter 保存，Escape 取消。</p>
+          <Editable.Root defaultValue="只读文本" readOnly size="sm">
+            <Editable.Label className={css({ srOnly: true })}>只读标题</Editable.Label>
+            <Editable.Area>
+              <Editable.Input />
+              <Editable.Preview />
+            </Editable.Area>
+          </Editable.Root>
+        </div>
+      </div>
+    )
+  },
+}
+export const CustomSize: Story = {
+  render: function CustomSize() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Editable.Root size="unstyled" defaultValue="点击编辑标题" gap="2">
+          <Editable.Label className={css({ srOnly: true })}>自定尺寸的标题</Editable.Label>
+          <Editable.Area>
+            <Editable.Preview minHeight="36px" px="2" textStyle="sm" />
+            <Editable.Input minHeight="36px" px="2" textStyle="sm" />
+          </Editable.Area>
+        </Editable.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/forms/Field.stories.tsx

@@ -0,0 +1,72 @@
+import { Button, Field } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Forms/Field',
+  component: Field.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '标签关联、必填校验、错误提示、只读与禁用。' },
+    },
+  },
+} satisfies Meta<typeof Field.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Validation: Story = {
+  render: function Validation() {
+    const [username, setUsername] = useState('')
+    const [validated, setValidated] = useState(false)
+    const [submitted, setSubmitted] = useState('尚未提交')
+    const invalid = validated && username.trim().length < 3
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>点击标签应聚焦输入框；提交空值或不足 3 个字符时显示错误，修改后自动恢复。</p>
+        <form
+          noValidate
+          className={css({ display: 'grid', gap: '4', maxWidth: 'md' })}
+          onSubmit={(event) => {
+            event.preventDefault()
+            setValidated(true)
+            if (username.trim().length < 3) {
+              setSubmitted('验证未通过')
+              const input = event.currentTarget.elements.namedItem('username')
+              if (input instanceof HTMLInputElement) input.focus()
+              return
+            }
+            setSubmitted(JSON.stringify(Object.fromEntries(new FormData(event.currentTarget))))
+          }}>
+          <Field.Root required invalid={invalid}>
+            <Field.Label>
+              用户名 <Field.RequiredIndicator>（必填）</Field.RequiredIndicator>
+            </Field.Label>
+            <Field.Input
+              name="username"
+              value={username}
+              onChange={(event) => setUsername(event.target.value)}
+              placeholder="输入至少 3 个字符"
+            />
+            <Field.HelperText>用于公开展示，至少 3 个字符。</Field.HelperText>
+            <Field.ErrorText>用户名至少需要 3 个字符。</Field.ErrorText>
+          </Field.Root>
+          <Field.Root disabled>
+            <Field.Label>禁用字段</Field.Label>
+            <Field.Input name="disabled" defaultValue="不可编辑，也不参与提交" variant="surface" />
+            <Field.HelperText>禁用状态从 Field.Root 传给输入框。</Field.HelperText>
+          </Field.Root>
+          <Field.Root readOnly>
+            <Field.Label>只读字段</Field.Label>
+            <Field.Input name="account" defaultValue="demo-account" variant="subtle" />
+            <Field.HelperText>可聚焦和复制，参与表单提交。</Field.HelperText>
+          </Field.Root>
+          <Button type="submit">验证并读取表单</Button>
+          <p role="status">Field 提交结果：{submitted}</p>
+        </form>
+      </div>
+    )
+  },
+}