@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,190 @@
+import { fn } from 'storybook/test'
+import { Button, Slider } 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/Slider',
+  component: Slider.Root,
+  args: {
+    orientation: 'horizontal',
+    size: 'md',
+    variant: 'outline',
+    min: 0,
+    max: 100,
+    step: 5,
+    disabled: false,
+    onValueChange: fn(),
+  },
+  argTypes: {
+    orientation: { control: 'select', options: ['horizontal', 'vertical'] },
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled'] },
+    variant: { control: 'select', options: ['outline'] },
+    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 Slider.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: {
+      disable: false,
+      include: ['orientation', 'size', 'variant', 'min', 'max', 'step', 'disabled'],
+    },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Slider.Root {...args} defaultValue={[40]} aria-label={['数值']}>
+        <Slider.Label>滑块</Slider.Label>
+        <Slider.ValueText />
+        <Slider.Control>
+          <Slider.Track>
+            <Slider.Range />
+          </Slider.Track>
+          <Slider.Thumbs />
+        </Slider.Control>
+      </Slider.Root>
+    </div>
+  ),
+}
+
+export const RangeAndVertical: Story = {
+  render: function RangeAndVertical() {
+    const [range, setRange] = useState([25, 75])
+
+    const slider = Slider.useSlider({
+      name: 'range',
+      value: range,
+      min: 0,
+      max: 100,
+      step: 5,
+      minStepsBetweenThumbs: 1,
+      'aria-label': ['范围下限', '范围上限'],
+      onValueChange: ({ value }) => setRange(value),
+    })
+    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={() => {
+            setRange([25, 75])
+            setSubmittedForm('已重置')
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <div className={css({ display: 'grid', gap: '3' })}>
+            <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>范围滑块与刻度</h3>
+            <Slider.RootProvider value={slider} size="md">
+              <Slider.Label>数值范围</Slider.Label>
+              <Slider.ValueText />
+              <Slider.Control>
+                <Slider.Track>
+                  <Slider.Range />
+                </Slider.Track>
+                <Slider.Thumbs />
+                <Slider.Marks
+                  marks={[
+                    { value: 0, label: '0' },
+                    { value: 50, label: '50' },
+                    { value: 100, label: '100' },
+                  ]}
+                />
+              </Slider.Control>
+            </Slider.RootProvider>
+            <Slider.Root defaultValue={[40]} disabled aria-label={['禁用的滑块']}>
+              <Slider.Label>禁用滑块</Slider.Label>
+              <Slider.Control>
+                <Slider.Track>
+                  <Slider.Range />
+                </Slider.Track>
+                <Slider.Thumbs />
+              </Slider.Control>
+            </Slider.Root>
+            <Slider.Root
+              orientation="vertical"
+              defaultValue={[60]}
+              height="56"
+              width="16"
+              aria-label={['垂直滑块']}>
+              <Slider.Label>垂直</Slider.Label>
+              <Slider.Control>
+                <Slider.Track>
+                  <Slider.Range />
+                </Slider.Track>
+                <Slider.Thumbs />
+              </Slider.Control>
+            </Slider.Root>
+            <p role="status">范围：{range.join(' – ')}</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 CustomSize: Story = {
+  render: function CustomSize() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Slider.Root
+          size="unstyled"
+          name="custom-slider"
+          defaultValue={[40]}
+          gap="3"
+          aria-label={['自定尺寸滑块']}>
+          <Slider.Label>28px 滑块与 12px 轨道</Slider.Label>
+          <Slider.ValueText />
+          <Slider.Control minHeight="28px" mb="8">
+            <Slider.Track height="12px">
+              <Slider.Range />
+            </Slider.Track>
+            <Slider.Thumb index={0} width="28px" height="28px">
+              <Slider.HiddenInput />
+            </Slider.Thumb>
+            <Slider.MarkerGroup top="8px" insetInline="0">
+              {[0, 50, 100].map((value) => (
+                <Slider.Marker
+                  key={value}
+                  value={value}
+                  flexDirection="column"
+                  gap="4"
+                  textStyle="sm">
+                  <Slider.MarkerIndicator boxSize="6px" />
+                  <span>{value}</span>
+                </Slider.Marker>
+              ))}
+            </Slider.MarkerGroup>
+          </Slider.Control>
+        </Slider.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,124 @@
+import { fn } from 'storybook/test'
+import { Button, Switch } 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/Switch',
+  component: Switch.Root,
+  args: { size: 'md', variant: 'solid', disabled: false, onCheckedChange: fn() },
+  argTypes: {
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled', 'xs'] },
+    variant: { control: 'select', options: ['solid'] },
+    disabled: { control: 'boolean' },
+    onCheckedChange: { control: false },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '受控与非受控开关、禁用状态和尺寸定制。' },
+    },
+  },
+} satisfies Meta<typeof Switch.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' })}>
+      <Switch.Root {...args}>
+        <Switch.HiddenInput />
+        <Switch.Control />
+        <Switch.Label>启用通知</Switch.Label>
+      </Switch.Root>
+    </div>
+  ),
+}
+
+export const Controlled: Story = {
+  render: function Controlled() {
+    const [enabled, setEnabled] = useState(true)
+
+    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={() => {
+            setEnabled(true)
+            setSubmittedForm('已重置')
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <Switch.Root
+            name="notifications"
+            value="enabled"
+            checked={enabled}
+            onCheckedChange={(details) => setEnabled(details.checked)}>
+            <Switch.HiddenInput />
+            <Switch.Control />
+            <Switch.Label>启用通知</Switch.Label>
+          </Switch.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 States: Story = {
+  render: function States() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Switch.Root size="sm" defaultChecked>
+          <Switch.HiddenInput />
+          <Switch.Control />
+          <Switch.Label>小尺寸非受控开关</Switch.Label>
+        </Switch.Root>
+        <Switch.Root size="lg" disabled defaultChecked>
+          <Switch.HiddenInput />
+          <Switch.Control />
+          <Switch.Label>大尺寸禁用开关</Switch.Label>
+        </Switch.Root>
+      </div>
+    )
+  },
+}
+export const CustomSize: Story = {
+  render: function CustomSize() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Switch.Root size="unstyled" name="custom-switch" gap="4" defaultChecked>
+          <Switch.HiddenInput />
+          <Switch.Control width="72px" height="36px">
+            <Switch.Thumb
+              width="36px"
+              height="36px"
+              scale="0.8"
+              _checked={{ translate: '36px 0', _rtl: { translate: '-36px 0' } }}
+            />
+          </Switch.Control>
+          <Switch.Label textStyle="lg">自定开关尺寸和位移，保留 solid</Switch.Label>
+        </Switch.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,154 @@
+import { Button, TagsInput } 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/TagsInput',
+  component: TagsInput.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '标签增删、编辑、数量限制及错误状态。' },
+    },
+  },
+} satisfies Meta<typeof TagsInput.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const ControlledForm: Story = {
+  render: function ControlledForm() {
+    const [tags, setTags] = useState(['Ark UI', 'Panda CSS'])
+
+    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())),
+            )
+          }}
+          onReset={() => {
+            setTags(['Ark UI', 'Panda CSS'])
+            setInvalid(false)
+            setSubmittedForm('已重置')
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <div className={css({ display: 'grid', gap: '3' })}>
+            <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>标签输入</h3>
+            <TagsInput.Root
+              name="tags"
+              value={tags}
+              onValueChange={({ value }) => setTags(value)}
+              max={5}
+              editable
+              variant="outline"
+              size="md">
+              <TagsInput.Label>技术标签（最多五个）</TagsInput.Label>
+              <TagsInput.Control>
+                <TagsInput.Items />
+                <TagsInput.Input placeholder="输入后按 Enter" />
+                <TagsInput.ClearTrigger aria-label="清空技术标签" />
+              </TagsInput.Control>
+              <TagsInput.HiddenInput />
+            </TagsInput.Root>
+            <TagsInput.Root defaultValue={['只读标签']} readOnly variant="subtle" size="sm">
+              <TagsInput.Label>只读状态</TagsInput.Label>
+              <TagsInput.Control>
+                <TagsInput.Items />
+                <TagsInput.Input />
+              </TagsInput.Control>
+            </TagsInput.Root>
+            <TagsInput.Root variant="subtle" invalid={invalid} defaultValue={['Subtle']}>
+              <TagsInput.Label>错误状态对照 · subtle</TagsInput.Label>
+              <TagsInput.Control>
+                <TagsInput.Items />
+                <TagsInput.Input placeholder="聚焦检查错误边框" />
+              </TagsInput.Control>
+            </TagsInput.Root>
+            <TagsInput.Root variant="surface" invalid={invalid} defaultValue={['Surface']}>
+              <TagsInput.Label>错误状态对照 · surface</TagsInput.Label>
+              <TagsInput.Control>
+                <TagsInput.Items />
+                <TagsInput.Input placeholder="聚焦检查错误边框" />
+              </TagsInput.Control>
+            </TagsInput.Root>
+            <Button variant="outline" onClick={() => setInvalid((current) => !current)}>
+              {invalid ? '清除错误' : '显示错误'}
+            </Button>
+            <p role="status">标签：{tags.join('、') || '无'}；支持增删和编辑，不发送网络请求。</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' })}>
+        <TagsInput.Root
+          size="unstyled"
+          name="compact-tags"
+          defaultValue={['Panda', 'Ark']}
+          editable
+          gap="1.5"
+          textStyle="sm"
+          css={{
+            '& [data-part=item-preview], & [data-part=item-input]': {
+              height: '24px',
+              px: '2',
+              gap: '1',
+              lineHeight: '1',
+            },
+            '& [data-part=item-delete-trigger], & [data-part=clear-trigger]': {
+              boxSize: '4',
+              _icon: { boxSize: '3.5' },
+            },
+          }}>
+          <TagsInput.Label>自定尺寸的标签</TagsInput.Label>
+          <TagsInput.Control minHeight="36px" px="2" gap="1.5">
+            <TagsInput.Items />
+            <TagsInput.Input height="28px" px="1" minWidth="16" placeholder="添加标签" />
+            <TagsInput.ClearTrigger aria-label="清空紧凑标签" />
+          </TagsInput.Control>
+          <TagsInput.HiddenInput />
+        </TagsInput.Root>
+        <TagsInput.Root
+          variant="unstyled"
+          defaultValue={['品牌页面']}
+          editable
+          css={{
+            '& [data-part=item-preview]': { bg: 'lime.3', color: 'lime.11', borderRadius: 'md' },
+            '& [data-part=input], & [data-part=item-input]': { outline: 'none' },
+          }}>
+          <TagsInput.Label>自定外观，保留 md 尺寸</TagsInput.Label>
+          <TagsInput.Control
+            bg="gray.3"
+            borderRadius="lg"
+            css={{ _focusWithin: { outline: '2px solid', outlineColor: 'lime.8' } }}>
+            <TagsInput.Items />
+            <TagsInput.Input placeholder="添加标签" />
+            <TagsInput.ClearTrigger aria-label="清空自定外观标签" />
+          </TagsInput.Control>
+          <TagsInput.HiddenInput />
+        </TagsInput.Root>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,148 @@
+import { action } from 'storybook/actions'
+import type { ChangeEvent } from 'react'
+import { Button, Field, 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/Textarea',
+  component: Textarea,
+  args: {
+    size: 'md',
+    variant: 'surface',
+    placeholder: '输入多行文字',
+    rows: 4,
+    disabled: false,
+    readOnly: false,
+    onChange: (event: ChangeEvent<HTMLTextAreaElement>) =>
+      action('onChange')({ value: event.currentTarget.value }),
+  },
+  argTypes: {
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+    variant: {
+      control: 'select',
+      options: ['flushed', 'outline', 'subtle', 'surface', 'unstyled'],
+    },
+    placeholder: { control: 'text' },
+    rows: { control: 'number' },
+    disabled: { control: 'boolean' },
+    readOnly: { control: 'boolean' },
+    onChange: { control: false },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '多行输入、字符限制、调整高度和禁用状态。' },
+    },
+  },
+} satisfies Meta<typeof Textarea>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: {
+      disable: false,
+      include: ['size', 'variant', 'placeholder', 'rows', 'disabled', 'readOnly'],
+    },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Textarea {...args} />
+    </div>
+  ),
+}
+
+export const ControlledForm: Story = {
+  render: function ControlledForm() {
+    const [note, setNote] = 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={() => {
+            setNote('')
+            setSubmittedForm('已重置')
+          }}
+          className={css({ display: 'grid', gap: '4' })}>
+          <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>
+          <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 Disabled: Story = {
+  render: function Disabled() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Field.Root disabled>
+          <Field.Label>禁用备注</Field.Label>
+          <Textarea defaultValue="从 Field 继承禁用状态" rows={2} variant="subtle" />
+        </Field.Root>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Field.Root>
+          <Field.Label>Textarea：仅自定尺寸</Field.Label>
+          <Textarea
+            size="unstyled"
+            name="custom-note"
+            minHeight="120px"
+            p="6"
+            textStyle="lg"
+            rows={3}
+            placeholder="自定内边距和字号，保留 surface"
+          />
+        </Field.Root>
+        <Field.Root>
+          <Field.Label>Textarea：仅自定外观</Field.Label>
+          <Textarea
+            variant="unstyled"
+            rows={2}
+            bg="gray.3"
+            borderRadius="xl"
+            focusVisibleRing="outside"
+            placeholder="保留 md 内边距和字号"
+          />
+        </Field.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/layout/Grid.stories.tsx

@@ -0,0 +1,60 @@
+import { Grid, GridItem, Heading, Stack, Text } from '@repo/ui'
+import { css } from 'styled-system/css'
+import { grid } from 'styled-system/patterns'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Layout/Grid',
+  component: Grid,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '响应式网格、跨列、自动适应与 asChild。' },
+    },
+  },
+} satisfies Meta<typeof Grid>
+export default meta
+type Story = StoryObj<typeof meta>
+export const ResponsiveAndAsChild: Story = {
+  render: function ResponsiveAndAsChild() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Stack gap="4">
+          <Heading as="h3" size="lg">
+            Grid / GridItem 与 grid pattern
+          </Heading>
+          <Grid templateColumns={{ base: '1fr', md: 'repeat(3, minmax(0, 1fr))' }} gap="3">
+            <GridItem colSpan={{ base: 1, md: 2 }} p="4" bg="gray.surface.bg" borderRadius="sm">
+              跨两列主内容
+            </GridItem>
+            <GridItem p="4" bg="gray.subtle.bg" borderRadius="sm">
+              侧栏
+            </GridItem>
+          </Grid>
+          <div className={grid({ columns: { base: 1, sm: 2, lg: 3 }, gap: '3' })}>
+            {['响应式列 A', '响应式列 B', '响应式列 C'].map((label) => (
+              <div key={label} className={css({ p: '4', borderWidth: '1px' })}>
+                {label}
+              </div>
+            ))}
+          </div>
+          <div className={grid({ minChildWidth: '180px', gap: '3' })}>
+            {['自动适应 A', '自动适应 B', '自动适应 C'].map((label) => (
+              <div key={label} className={css({ p: '4', bg: 'gray.subtle.bg' })}>
+                {label}
+              </div>
+            ))}
+          </div>
+          <Grid asChild columns={2} gap="3">
+            <article aria-label="asChild 网格示例">
+              <Text>asChild 复用 article</Text>
+              <Text>无额外容器</Text>
+            </article>
+          </Grid>
+        </Stack>
+      </div>
+    )
+  },
+}