@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,160 @@
+import { Button, Field, Heading, NativeSelect, Text } from '@repo/ui'
+import { useRef, useState } from 'react'
+import { hstack } from 'styled-system/patterns'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Forms/NativeSelect',
+  component: NativeSelect.Root,
+  args: { size: 'md', variant: 'outline', disabled: false },
+  argTypes: {
+    size: { control: 'select', options: ['2xl', '2xs', 'lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+    variant: {
+      control: 'select',
+      options: ['flushed', 'outline', 'subtle', 'surface', 'unstyled'],
+    },
+    disabled: { control: 'boolean' },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '原生选项、分组、键盘行为和表单提交。' },
+    },
+  },
+} satisfies Meta<typeof NativeSelect.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' })}>
+      <NativeSelect.Root {...args}>
+        <NativeSelect.Field aria-label="选择框架" defaultValue="react">
+          <option value="react">React</option>
+          <option value="vue">Vue</option>
+          <option disabled value="solid">
+            Solid（禁用）
+          </option>
+        </NativeSelect.Field>
+        <NativeSelect.Indicator />
+      </NativeSelect.Root>
+    </div>
+  ),
+}
+
+export const ControlledAndStates: Story = {
+  render: function ControlledAndStates() {
+    const [framework, setFramework] = useState('react')
+    const [disabled, setDisabled] = useState(false)
+
+    const selectRef = useRef<HTMLSelectElement>(null)
+    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' })}>
+          <Field.Root required>
+            <Field.Label>
+              原生选择框
+              <Field.RequiredIndicator />
+            </Field.Label>
+            <NativeSelect.Root size="md" disabled={disabled} maxWidth="md">
+              <NativeSelect.Field
+                ref={selectRef}
+                placeholder="请选择框架"
+                value={framework}
+                onChange={(event) => setFramework(event.target.value)}
+                name="framework">
+                <optgroup label="框架">
+                  <option value="react">React</option>
+                  <option value="vue">Vue</option>
+                  <option value="angular">Angular</option>
+                </optgroup>
+              </NativeSelect.Field>
+              <NativeSelect.Indicator />
+            </NativeSelect.Root>
+            <Field.HelperText>当前值：{framework || '未选择'}</Field.HelperText>
+          </Field.Root>
+          <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+            <Button variant="outline" onClick={() => setDisabled((value) => !value)}>
+              选择框：{disabled ? '已禁用' : '可用'}
+            </Button>
+            <Button
+              variant="outline"
+              disabled={disabled}
+              onClick={() => selectRef.current?.focus()}>
+              通过 ref 聚焦选择框
+            </Button>
+          </div>
+          <Field.Root invalid disabled>
+            <Field.Label>Field 错误与禁用联动</Field.Label>
+            <NativeSelect.Root size="sm" variant="surface">
+              <NativeSelect.Field defaultValue="" placeholder="请选择">
+                <option value="one">选项一</option>
+              </NativeSelect.Field>
+              <NativeSelect.Indicator>⌄</NativeSelect.Indicator>
+            </NativeSelect.Root>
+            <Field.ErrorText>示例错误提示</Field.ErrorText>
+          </Field.Root>
+          <NativeSelect.Root size="lg" variant="subtle" invalid>
+            <NativeSelect.Field aria-label="根入口错误状态" placeholder="根入口 invalid">
+              <option value="one">选项一</option>
+            </NativeSelect.Field>
+            <NativeSelect.Indicator />
+          </NativeSelect.Root>
+          <Text>NativeSelect 保留原生 option / optgroup、表单提交和浏览器键盘行为。</Text>
+          <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>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Heading size="md">NativeSelect · 分维度定制</Heading>
+        <NativeSelect.Root size="unstyled" maxWidth="md" textStyle="sm">
+          <NativeSelect.Field
+            height="36px"
+            px="3"
+            paddingInlineEnd="36px"
+            aria-label="自定尺寸的原生选择">
+            <option value="react">React</option>
+            <option value="vue">Vue</option>
+          </NativeSelect.Field>
+          <NativeSelect.Indicator width="36px" css={{ _icon: { boxSize: '4' } }} />
+        </NativeSelect.Root>
+        <NativeSelect.Root variant="unstyled" maxWidth="md">
+          <NativeSelect.Field
+            bg="gray.3"
+            borderRadius="lg"
+            focusVisibleRing="inside"
+            aria-label="自定外观的原生选择">
+            <option value="react">React</option>
+            <option value="vue">Vue</option>
+          </NativeSelect.Field>
+          <NativeSelect.Indicator color="lime.11" />
+        </NativeSelect.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,149 @@
+import { fn } from 'storybook/test'
+import { Button, Field, NumberInput } 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: 'Forms/NumberInput',
+  component: NumberInput.Root,
+  args: {
+    size: 'md',
+    variant: 'outline',
+    min: 0,
+    max: 20,
+    step: 1,
+    disabled: false,
+    onValueChange: fn(),
+  },
+  argTypes: {
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled', 'xl'] },
+    variant: { control: 'select', options: ['outline', 'surface', 'unstyled'] },
+    min: { control: 'number' },
+    max: { control: 'number' },
+    step: { control: 'number' },
+    disabled: { control: 'boolean' },
+    onValueChange: { control: false },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '数值输入、步进、上下限和原生表单数据。' },
+    },
+  },
+} satisfies Meta<typeof NumberInput.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'variant', 'min', 'max', 'step', 'disabled'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <NumberInput.Root {...args} defaultValue="5">
+        <NumberInput.Label>数量</NumberInput.Label>
+        <NumberInput.Input />
+        <NumberInput.Control />
+      </NumberInput.Root>
+    </div>
+  ),
+}
+
+export const ControlledForm: Story = {
+  render: function ControlledForm() {
+    const [quantity, setQuantity] = useState('5')
+
+    const numberInput = NumberInput.useNumberInput({
+      name: 'quantity',
+      min: 0,
+      max: 20,
+      step: 1,
+      value: quantity,
+      onValueChange: ({ value }) => setQuantity(value),
+    })
+
+    const [submittedForm, setSubmittedForm] = useState('尚未提交')
+    const storyId = useId()
+    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={() => {
+            setQuantity('5')
+            setSubmittedForm('已重置')
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <div className={css({ display: 'grid', gap: '3', maxWidth: 'sm' })}>
+            <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>数值与边界</h3>
+            <Field.Root>
+              <Field.Label htmlFor={`${storyId}-advanced-quantity`}>数量（0–20）</Field.Label>
+              <NumberInput.RootProvider value={numberInput} size="lg" variant="outline">
+                <NumberInput.Input
+                  id={`${storyId}-advanced-quantity`}
+                  aria-describedby={`${storyId}-advanced-quantity-help`}
+                />
+                <NumberInput.Control />
+              </NumberInput.RootProvider>
+              <Field.HelperText id={`${storyId}-advanced-quantity-help`}>
+                支持输入、上下键和步进按钮；空值保留为空字符串。
+              </Field.HelperText>
+            </Field.Root>
+            <NumberInput.Root defaultValue="10" disabled size="sm">
+              <NumberInput.Input aria-label="禁用的数值输入" />
+              <NumberInput.Control />
+            </NumberInput.Root>
+            <p role="status">数量：{quantity === '' ? '空值' : quantity}</p>
+          </div>
+          <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 Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <NumberInput.Root
+          size="unstyled"
+          name="compact-quantity"
+          defaultValue="3"
+          min={0}
+          gap="1.5"
+          css={{
+            '& [data-part=control]': { width: '20px' },
+            '& [data-part=increment-trigger], & [data-part=decrement-trigger]': {
+              lineHeight: '1',
+              _icon: { boxSize: '3' },
+            },
+          }}>
+          <NumberInput.Label textStyle="sm">自定尺寸的数量</NumberInput.Label>
+          <NumberInput.Input height="36px" px="3" paddingInlineEnd="28px" textStyle="sm" />
+          <NumberInput.Control />
+        </NumberInput.Root>
+        <NumberInput.Root variant="unstyled" name="custom-quantity" defaultValue="2" min={0}>
+          <NumberInput.Label>自定外观，保留 md 尺寸</NumberInput.Label>
+          <NumberInput.Input bg="gray.3" borderRadius="lg" focusVisibleRing="inside" />
+          <NumberInput.Control height="full" bg="lime.3" borderRadius="md" />
+        </NumberInput.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,141 @@
+import { fn } from 'storybook/test'
+import { Button, Field, PasswordInput } from '@repo/ui'
+import { useRef, useState } from 'react'
+import { hstack } from 'styled-system/patterns'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Forms/PasswordInput',
+  component: PasswordInput,
+  args: { size: 'md', variant: 'outline', disabled: false, readOnly: false, onVisibleChange: fn() },
+  argTypes: {
+    size: { control: 'select', options: ['2xl', '2xs', 'lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+    variant: {
+      control: 'select',
+      options: ['flushed', 'outline', 'subtle', 'surface', 'unstyled'],
+    },
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+    onVisibleChange: { control: false },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      // Docgen cannot serialize the JSX icon defaults; use the explicit argTypes above.
+      extractArgTypes: false,
+      source: { type: 'code' },
+      description: { component: '密码可见性、ref 聚焦、Field 状态与尾部空间。' },
+    },
+  },
+} satisfies Meta<typeof PasswordInput>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'variant', 'disabled', 'readOnly'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <PasswordInput
+        {...args}
+        aria-label="密码"
+        defaultValue="demo-password"
+        autoComplete="new-password"
+      />
+    </div>
+  ),
+}
+
+export const ControlledAndStates: Story = {
+  render: function ControlledAndStates() {
+    const [visible, setVisible] = useState(false)
+    const [password, setPassword] = useState('demo-password')
+
+    const passwordRef = useRef<HTMLInputElement>(null)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Field.Root>
+          <Field.Label>受控密码和可见状态</Field.Label>
+          <PasswordInput
+            ref={passwordRef}
+            value={password}
+            onChange={(event) => setPassword(event.target.value)}
+            visible={visible}
+            onVisibleChange={setVisible}
+            autoComplete="new-password"
+            rootProps={{ maxWidth: 'md' }}
+          />
+          <Field.HelperText>
+            显示按钮可通过 Tab 和 Enter 操作；切换显示不应提交表单。
+          </Field.HelperText>
+        </Field.Root>
+        <div className={hstack({ gap: '3', flexWrap: 'wrap' })}>
+          <Button variant="outline" onClick={() => setVisible((value) => !value)}>
+            {visible ? '隐藏密码' : '显示密码'}
+          </Button>
+          <Button variant="outline" onClick={() => passwordRef.current?.focus()}>
+            通过 ref 聚焦密码
+          </Button>
+        </div>
+        <Field.Root invalid>
+          <Field.Label>默认可见、自定义图标与错误状态</Field.Label>
+          <PasswordInput
+            defaultVisible
+            size="sm"
+            variant="surface"
+            visibilityIcon={{ on: '+', off: '−' }}
+            defaultValue="example"
+            autoComplete="new-password"
+          />
+          <Field.ErrorText>示例错误提示</Field.ErrorText>
+        </Field.Root>
+        <Field.Root disabled>
+          <Field.Label>Field 禁用联动</Field.Label>
+          <PasswordInput size="xs" placeholder="输入与显示按钮都应禁用" />
+        </Field.Root>
+        <PasswordInput
+          aria-label="大尺寸密码输入"
+          size="2xl"
+          variant="subtle"
+          placeholder="2xl 尺寸"
+        />
+      </div>
+    )
+  },
+}
+export const CustomSize: Story = {
+  render: function CustomSize() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Field.Root>
+          <Field.Label>PasswordInput：自定尺寸与尾部预留</Field.Label>
+          <PasswordInput
+            size="unstyled"
+            name="custom-password"
+            height="64px"
+            ps="6"
+            paddingInlineEnd="72px"
+            textStyle="lg"
+            defaultValue="custom-password"
+            autoComplete="new-password"
+          />
+          <Field.HelperText>
+            点击眼睛并检查焦点；长密码不应被按钮遮挡。下面一项使用默认预留空间。
+          </Field.HelperText>
+          <PasswordInput
+            size="unstyled"
+            height="40px"
+            ps="4"
+            defaultValue="fallback-padding"
+            autoComplete="new-password"
+            aria-label="自动预留尾部空间的密码"
+          />
+        </Field.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,155 @@
+import { fn } from 'storybook/test'
+import { Button, PinInput } 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/PinInput',
+  component: PinInput.Root,
+  args: {
+    size: 'md',
+    variant: 'outline',
+    count: 4,
+    mask: false,
+    disabled: false,
+    onValueChange: fn(),
+  },
+  argTypes: {
+    size: { control: 'select', options: ['2xl', 'lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+    variant: { control: 'select', options: ['flushed', 'outline', 'subtle', 'unstyled'] },
+    count: { control: 'number' },
+    mask: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    onValueChange: { control: false },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '验证码输入、完成事件、遮罩和只读状态。' },
+    },
+  },
+} satisfies Meta<typeof PinInput.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'variant', 'count', 'mask', 'disabled'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <PinInput.Root {...args}>
+        <PinInput.Label>验证码</PinInput.Label>
+        <PinInput.Control>
+          {Array.from({ length: args.count || 4 }, (_, index) => (
+            <PinInput.Input key={index} index={index} />
+          ))}
+        </PinInput.Control>
+        <PinInput.HiddenInput />
+      </PinInput.Root>
+    </div>
+  ),
+}
+
+export const ControlledForm: Story = {
+  render: function ControlledForm() {
+    const [pin, setPin] = useState(['', '', '', ''])
+    const [completed, setCompleted] = 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())),
+            )
+          }}
+          onReset={() => {
+            setPin(['', '', '', ''])
+            setCompleted(false)
+            setSubmittedForm('已重置')
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <div className={css({ display: 'grid', gap: '3' })}>
+            <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>验证码输入</h3>
+            <PinInput.Root
+              name="pin"
+              count={4}
+              otp
+              value={pin}
+              onValueChange={({ value }) => {
+                setPin(value)
+                setCompleted(value.length === 4 && value.every((character) => character !== ''))
+              }}
+              onValueComplete={() => setCompleted(true)}>
+              <PinInput.Label>四位数字</PinInput.Label>
+              <PinInput.Control>
+                {[0, 1, 2, 3].map((index) => (
+                  <PinInput.Input key={index} index={index} />
+                ))}
+              </PinInput.Control>
+              <PinInput.HiddenInput />
+            </PinInput.Root>
+            <PinInput.Root count={4} mask defaultValue={['1', '2', '3', '4']} size="sm" readOnly>
+              <PinInput.Label>只读遮罩示例</PinInput.Label>
+              <PinInput.Control>
+                {[0, 1, 2, 3].map((index) => (
+                  <PinInput.Input key={index} index={index} />
+                ))}
+              </PinInput.Control>
+            </PinInput.Root>
+            <p role="status">
+              {completed ? '输入完成' : '等待输入'}；仅展示本地状态，不发送验证码。
+            </p>
+          </div>
+          <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 Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <PinInput.Root size="unstyled" name="compact-pin" count={4} gap="1.5">
+          <PinInput.Label>自定尺寸的验证码</PinInput.Label>
+          <PinInput.Control gap="1.5">
+            {[0, 1, 2, 3].map((index) => (
+              <PinInput.Input key={index} index={index} width="36px" height="36px" textStyle="sm" />
+            ))}
+          </PinInput.Control>
+          <PinInput.HiddenInput />
+        </PinInput.Root>
+        <PinInput.Root variant="unstyled" count={4} defaultValue={['1', '2', '3', '4']}>
+          <PinInput.Label>自定外观的验证码</PinInput.Label>
+          <PinInput.Control>
+            {[0, 1, 2, 3].map((index) => (
+              <PinInput.Input
+                key={index}
+                index={index}
+                bg="lime.3"
+                borderRadius="lg"
+                focusVisibleRing="inside"
+              />
+            ))}
+          </PinInput.Control>
+        </PinInput.Root>
+      </div>
+    )
+  },
+}