@oyolincc/create 0.4.0 → 0.5.0

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

@@ -0,0 +1,109 @@
+import { Button, Field, Fieldset, Group, Input, InputAddon, InputGroup } 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/Fieldset',
+  component: Fieldset.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '字段组的禁用、校验和表单提交。' },
+    },
+  },
+} satisfies Meta<typeof Fieldset.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const ValidationAndForm: Story = {
+  render: function ValidationAndForm() {
+    const [disabled, setDisabled] = useState(false)
+    const [invalid, setInvalid] = useState(false)
+
+    const [submittedForm, setSubmittedForm] = useState('尚未提交')
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <form
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault()
+            setSubmittedForm(
+              JSON.stringify(Array.from(new FormData(event.currentTarget).entries())),
+            )
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <div className={css({ display: 'grid', gap: '3' })}>
+            <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>
+              Fieldset 与输入组合
+            </h3>
+            <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setDisabled((value) => !value)}>
+                {disabled ? '启用字段组' : '禁用字段组'}
+              </Button>
+              <Button type="button" variant="outline" onClick={() => setInvalid((value) => !value)}>
+                {invalid ? '清除错误' : '显示错误'}
+              </Button>
+            </div>
+            <Fieldset.Root disabled={disabled} invalid={invalid} flexDirection="column" gap="3">
+              <Fieldset.Legend>账户信息</Fieldset.Legend>
+              <Fieldset.HelperText>
+                组合组件继承原生表单语义，禁用字段不参与 FormData。
+              </Fieldset.HelperText>
+              <Fieldset.Content>
+                <Field.Root>
+                  <Field.Label>账户标识</Field.Label>
+                  <InputGroup
+                    startElement={<span aria-hidden="true">@</span>}
+                    endElement={<span aria-hidden="true">✓</span>}>
+                    <Input name="account" defaultValue="example" />
+                  </InputGroup>
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>零值装饰元素</Field.Label>
+                  <InputGroup startElement={0} size="sm">
+                    <Input name="sequence" placeholder="左侧的 0 应可见" size="sm" />
+                  </InputGroup>
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>可调整的装饰元素</Field.Label>
+                  <InputGroup
+                    startElement="https://"
+                    startElementProps={{ minW: '20', pointerEvents: 'none', color: 'fg' }}
+                    startOffset="-3rem"
+                    endElement="域名"
+                    endElementProps={{ minW: '16' }}
+                    endOffset="-1.5rem">
+                    <Input placeholder="example.com" />
+                  </InputGroup>
+                </Field.Root>
+                <Field.Root>
+                  <Field.Label>站点域名</Field.Label>
+                  <Group attached width="full">
+                    <InputAddon>https://</InputAddon>
+                    <Input name="domain" defaultValue="example" />
+                    <InputAddon>.com</InputAddon>
+                  </Group>
+                </Field.Root>
+              </Fieldset.Content>
+              <Fieldset.ErrorText>这是本地演示错误，字段组需要重新检查。</Fieldset.ErrorText>
+            </Fieldset.Root>
+            <p role="status">
+              字段组：{disabled ? '禁用' : '启用'}；错误：{invalid ? '显示' : '无'}
+            </p>
+          </div>
+          <div className={css({ display: 'flex', gap: '3' })}>
+            <Button type="submit">读取本地 FormData</Button>
+          </div>
+          <pre role="status" className={css({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' })}>
+            {submittedForm}
+          </pre>
+        </form>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,115 @@
+import { Button, FileUpload } from '@repo/ui'
+import { css } from 'styled-system/css'
+import { useId } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+const fileErrors: Record<string, string> = {
+  TOO_MANY_FILES: '最多选择 3 个文件',
+  FILE_INVALID_TYPE: '仅支持 PNG、JPEG 和 TXT 文件',
+  FILE_TOO_LARGE: '单个文件不能超过 5 MiB',
+  FILE_TOO_SMALL: '文件过小',
+  FILE_INVALID: '文件无效',
+  FILE_EXISTS: '该文件已在列表中',
+}
+const meta = {
+  title: 'Forms/FileUpload',
+  component: FileUpload.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '本地文件选择、拖放、预览、移除与拒绝原因。' },
+    },
+  },
+} satisfies Meta<typeof FileUpload.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const LocalFiles: Story = {
+  render: function LocalFiles() {
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>文件仅保留在当前页面内存中。选择、拖放、预览和移除均不发起上传请求。</p>
+        <FileUpload.Root
+          accept={['image/png', 'image/jpeg', 'text/plain']}
+          maxFiles={3}
+          maxFileSize={5 * 1024 * 1024}
+          locale="zh-CN"
+          translations={{
+            dropzone: '拖放文件或点击选择文件',
+            deleteFile: (file) => `移除 ${file.name}`,
+            itemPreview: (file) => `${file.name} 的预览`,
+          }}
+          maxWidth="xl">
+          <FileUpload.HiddenInput />
+          <FileUpload.Label>本地附件</FileUpload.Label>
+          <FileUpload.Dropzone aria-describedby={`${storyId}-file-upload-help`} gap="3">
+            <p>拖放文件到这里，或点击选择</p>
+            <p id={`${storyId}-file-upload-help`}>PNG、JPEG、TXT；最多 3 个，每个不超过 5 MiB。</p>
+          </FileUpload.Dropzone>
+          <div className={css({ display: 'flex', gap: '3', flexWrap: 'wrap' })}>
+            <FileUpload.Trigger asChild>
+              <Button type="button">选择文件</Button>
+            </FileUpload.Trigger>
+            <FileUpload.ClearTrigger asChild>
+              <Button type="button" variant="outline">
+                清空列表
+              </Button>
+            </FileUpload.ClearTrigger>
+          </div>
+          <FileUpload.Context>
+            {({ acceptedFiles, rejectedFiles }) => (
+              <>
+                <p role="status">已选择 {acceptedFiles.length} 个文件</p>
+                <FileUpload.ItemGroup>
+                  {acceptedFiles.map((file, index) => (
+                    <FileUpload.Item file={file} key={`${file.name}-${file.lastModified}-${index}`}>
+                      <FileUpload.ItemPreview type="image">
+                        <FileUpload.ItemPreviewImage />
+                      </FileUpload.ItemPreview>
+                      <FileUpload.ItemPreview type="application" />
+                      <FileUpload.ItemPreview type="text" />
+                      <div className={css({ display: 'grid', gap: '1', flex: '1', minWidth: '0' })}>
+                        <FileUpload.ItemName overflowWrap="anywhere" />
+                        <FileUpload.ItemSizeText />
+                      </div>
+                      <FileUpload.ItemDeleteTrigger />
+                    </FileUpload.Item>
+                  ))}
+                </FileUpload.ItemGroup>
+                {rejectedFiles.length > 0 && (
+                  <ul role="alert" className={css({ color: 'error' })}>
+                    {rejectedFiles.map(({ file, errors }, index) => (
+                      <li key={`${file.name}-${index}`}>
+                        {file.name}：
+                        {errors.map((error) => fileErrors[error] || '文件不符合要求').join('；')}
+                      </li>
+                    ))}
+                  </ul>
+                )}
+              </>
+            )}
+          </FileUpload.Context>
+        </FileUpload.Root>
+      </div>
+    )
+  },
+}
+export const Disabled: Story = {
+  render: function Disabled() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <FileUpload.Root disabled maxWidth="xl">
+          <FileUpload.HiddenInput />
+          <FileUpload.Label>禁用的文件选择</FileUpload.Label>
+          <FileUpload.Trigger asChild>
+            <Button type="button" variant="outline">
+              不可选择文件
+            </Button>
+          </FileUpload.Trigger>
+          <FileUpload.List />
+        </FileUpload.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,120 @@
+import { Button, Field, Input, RadioGroup, Switch, Textarea } 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/Form',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '受控输入、开关和单选共同参与原生表单提交与重置。' },
+    },
+  },
+} satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+export const Submission: Story = {
+  render: function Submission() {
+    const [title, setTitle] = useState('')
+    const [note, setNote] = useState('')
+    const [enabled, setEnabled] = useState(true)
+    const [frequency, setFrequency] = useState<string | null>('daily')
+    const [submitted, setSubmitted] = useState('尚未读取')
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>
+          点击标签聚焦输入；Tab + 空格操作开关，方向键切换单选并跳过禁用项。读取表单仅展示本地数据。
+        </p>
+        <form
+          className={css({ display: 'grid', gap: '5', maxWidth: 'xl' })}
+          onSubmit={(event) => {
+            event.preventDefault()
+            setSubmitted(JSON.stringify(Object.fromEntries(new FormData(event.currentTarget))))
+          }}
+          onReset={() => {
+            setTitle('')
+            setNote('')
+            setEnabled(true)
+            setFrequency('daily')
+            setSubmitted('已重置')
+          }}>
+          <Field.Root>
+            <Field.Label>标题</Field.Label>
+            <Input
+              name="title"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              placeholder="输入标题"
+            />
+            <Field.HelperText>独立 Input 也能继承 Field 的标签和描述。</Field.HelperText>
+          </Field.Root>
+          <Field.Root>
+            <Field.Label>备注</Field.Label>
+            <Textarea
+              name="note"
+              value={note}
+              onChange={(event) => setNote(event.target.value)}
+              placeholder="输入多行备注"
+              rows={4}
+              maxLength={200}
+              resize="vertical"
+            />
+            <Field.HelperText>{note.length} / 200 字符，可拖动调整高度。</Field.HelperText>
+          </Field.Root>
+          <Switch.Root
+            name="notifications"
+            value="enabled"
+            checked={enabled}
+            onCheckedChange={(details) => setEnabled(details.checked)}>
+            <Switch.HiddenInput />
+            <Switch.Control />
+            <Switch.Label>启用通知</Switch.Label>
+          </Switch.Root>
+          <RadioGroup.Root
+            name="frequency"
+            value={frequency}
+            onValueChange={(details) => setFrequency(details.value)}
+            size="md">
+            <RadioGroup.Label>通知频率</RadioGroup.Label>
+            <RadioGroup.Item value="immediate">
+              <RadioGroup.ItemHiddenInput />
+              <RadioGroup.ItemIndicator />
+              <RadioGroup.ItemText>立即通知</RadioGroup.ItemText>
+            </RadioGroup.Item>
+            <RadioGroup.Item value="disabled" disabled>
+              <RadioGroup.ItemHiddenInput />
+              <RadioGroup.ItemIndicator />
+              <RadioGroup.ItemText>禁用选项</RadioGroup.ItemText>
+            </RadioGroup.Item>
+            <RadioGroup.Item value="daily">
+              <RadioGroup.ItemHiddenInput />
+              <RadioGroup.ItemIndicator />
+              <RadioGroup.ItemText>每日摘要</RadioGroup.ItemText>
+            </RadioGroup.Item>
+          </RadioGroup.Root>
+          <div className={css({ display: 'flex', gap: '3', flexWrap: 'wrap' })}>
+            <Button type="submit">读取表单</Button>
+            <Button type="reset" variant="outline">
+              重置
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() => {
+                setEnabled(false)
+                setFrequency('immediate')
+              }}>
+              外部关闭通知并切到立即通知
+            </Button>
+          </div>
+          <p role="status">
+            通知：{enabled ? '开启' : '关闭'}；频率：{frequency || '未选'}；表单：{submitted}
+          </p>
+        </form>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,155 @@
+import { action } from 'storybook/actions'
+import type { ChangeEvent } from 'react'
+import { Button, Field, Input } 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/Input',
+  component: Input,
+  args: {
+    size: 'md',
+    variant: 'outline',
+    placeholder: '输入文字',
+    disabled: false,
+    readOnly: false,
+    onChange: (event: ChangeEvent<HTMLInputElement>) =>
+      action('onChange')({ value: event.currentTarget.value }),
+  },
+  argTypes: {
+    size: { control: 'select', options: ['2xl', '2xs', 'lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+    variant: {
+      control: 'select',
+      options: ['flushed', 'outline', 'subtle', 'surface', 'unstyled'],
+    },
+    placeholder: { control: 'text' },
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+    onChange: { control: false },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '单行输入、Field 状态继承和外观定制。' },
+    },
+  },
+} satisfies Meta<typeof Input>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: {
+      disable: false,
+      include: ['size', 'variant', 'placeholder', 'disabled', 'readOnly'],
+    },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Input {...args} />
+    </div>
+  ),
+}
+
+export const ControlledForm: Story = {
+  render: function ControlledForm() {
+    const [title, setTitle] = useState('')
+
+    const [submittedForm, setSubmittedForm] = useState('尚未提交')
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <form
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault()
+            setSubmittedForm(
+              JSON.stringify(Array.from(new FormData(event.currentTarget).entries())),
+            )
+          }}
+          onReset={() => {
+            setTitle('')
+            setSubmittedForm('已重置')
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <Field.Root>
+            <Field.Label>标题</Field.Label>
+            <Input
+              name="title"
+              value={title}
+              onChange={(event) => setTitle(event.target.value)}
+              placeholder="输入标题"
+            />
+            <Field.HelperText>独立 Input 也能继承 Field 的标签和描述。</Field.HelperText>
+          </Field.Root>
+          <div className={css({ display: 'flex', gap: '3' })}>
+            <Button type="submit">读取本地 FormData</Button>
+            <Button type="reset" variant="outline">
+              重置
+            </Button>
+          </div>
+          <pre role="status" className={css({ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' })}>
+            {submittedForm}
+          </pre>
+        </form>
+      </div>
+    )
+  },
+}
+export const Variants: Story = {
+  tags: ['!dev'],
+  render: function Variants() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>Outline 背景透明，Surface 自带背景；使用对比背景展示两者差异。</p>
+        <div
+          className={css({
+            display: 'grid',
+            gap: '3',
+            bg: 'gray.3',
+            padding: '4',
+            borderRadius: 'md',
+          })}>
+          <Input aria-label="Outline 输入" variant="outline" defaultValue="Outline：透明背景" />
+          <Input aria-label="Surface 输入" variant="surface" defaultValue="Surface：填充背景" />
+          <Input aria-label="Subtle 输入" variant="subtle" defaultValue="Subtle" />
+          <Input aria-label="Flushed 输入" variant="flushed" defaultValue="Flushed" />
+        </div>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Field.Root>
+          <Field.Label>Input：仅自定尺寸</Field.Label>
+          <Input
+            size="unstyled"
+            name="custom-title"
+            height="60px"
+            px="6"
+            textStyle="lg"
+            placeholder="60px 高度，保留 outline"
+          />
+        </Field.Root>
+        <Field.Root invalid>
+          <Field.Label>Input：仅自定外观，错误状态由页面提供</Field.Label>
+          <Input
+            variant="unstyled"
+            name="custom-appearance"
+            defaultValue="保留 md 尺寸"
+            bg="gray.3"
+            borderRadius="full"
+            focusVisibleRing="outside"
+            _invalid={{ outline: '2px solid', outlineColor: 'red.9' }}
+          />
+          <Field.ErrorText>示例错误：自定外观仍接收 Field 状态。</Field.ErrorText>
+        </Field.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,79 @@
+import { Field, Group, Input, InputAddon, InputGroup } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Forms/InputGroup',
+  component: InputGroup,
+  args: { children: null },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '输入前后装饰、附加文本及尺寸和外观定制。' },
+    },
+  },
+} satisfies Meta<typeof InputGroup>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '4' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>
+            输入组合：自定尺寸与外观
+          </h3>
+          <Field.Root>
+            <Field.Label>InputGroup：组合双方分别退出尺寸</Field.Label>
+            <InputGroup
+              size="unstyled"
+              startElement={<span aria-hidden="true">＠</span>}
+              startElementProps={{ minWidth: '56px' }}>
+              <Input
+                size="unstyled"
+                name="custom-handle"
+                height="60px"
+                ps="64px"
+                paddingInlineEnd="4"
+                textStyle="lg"
+                placeholder="前缀宽度由页面定义"
+              />
+            </InputGroup>
+          </Field.Root>
+          <Field.Root>
+            <Field.Label>InputAddon：自定尺寸</Field.Label>
+            <Group attached width="full">
+              <InputAddon size="unstyled" px="6" textStyle="lg">
+                https://
+              </InputAddon>
+              <Input
+                size="unstyled"
+                height="60px"
+                px="4"
+                textStyle="lg"
+                placeholder="example.com"
+              />
+            </Group>
+          </Field.Root>
+          <Field.Root>
+            <Field.Label>InputAddon 与 Input：自定外观，保留 md 尺寸</Field.Label>
+            <Group attached width="full">
+              <InputAddon variant="unstyled" bg="gray.12" color="gray.1">
+                https://
+              </InputAddon>
+              <Input
+                variant="unstyled"
+                bg="gray.3"
+                focusVisibleRing="inside"
+                placeholder="example.com"
+              />
+            </Group>
+          </Field.Root>
+        </div>
+      </div>
+    )
+  },
+}