@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,176 @@
+import { Button, Tabs } from '@repo/ui'
+import { useRef, useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+function PanelCounter({ label }: { label: string }) {
+  const [count, setCount] = useState(0)
+  return (
+    <Button type="button" variant="outline" onClick={() => setCount((value) => value + 1)}>
+      {label}计数：{count}
+    </Button>
+  )
+}
+const meta = {
+  title: 'Disclosure/Tabs',
+  component: Tabs.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '自动与手动激活、焦点、状态保留和尺寸定制。' },
+    },
+  },
+} satisfies Meta<typeof Tabs.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const ControlledAutomatic: Story = {
+  render: function ControlledAutomatic() {
+    const [value, setValue] = useState('overview')
+    const [focusedValue, setFocusedValue] = useState<string | null>(null)
+    const triggerRef = useRef<HTMLButtonElement>(null)
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>水平自动模式：左右方向键切换并跳过禁用项，Home/End 跳到首尾；计数应在切换后保留。</p>
+        <Tabs.Root
+          value={value}
+          onValueChange={(details) => setValue(details.value)}
+          onFocusChange={(details) => setFocusedValue(details.focusedValue)}
+          lazyMount
+          variant="line"
+          size="md"
+          maxWidth="xl">
+          <Tabs.List aria-label="受控自动切换">
+            <Tabs.Trigger
+              ref={triggerRef}
+              value="overview"
+              css={{
+                _focus: {
+                  outline: '2px solid',
+                  outlineColor: 'colorPalette.solid.bg',
+                  outlineOffset: '2px',
+                },
+              }}>
+              概览
+            </Tabs.Trigger>
+            <Tabs.Trigger value="disabled" disabled>
+              禁用标签
+            </Tabs.Trigger>
+            <Tabs.Trigger value="settings">设置</Tabs.Trigger>
+            <Tabs.Indicator />
+          </Tabs.List>
+          <Tabs.Content value="overview">
+            <PanelCounter label="概览" />
+          </Tabs.Content>
+          <Tabs.Content value="settings">
+            <PanelCounter label="设置" />
+          </Tabs.Content>
+        </Tabs.Root>
+        <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+          <Button type="button" variant="outline" onClick={() => setValue('settings')}>
+            从外部切到设置
+          </Button>
+          <Button type="button" variant="outline" onClick={() => triggerRef.current?.focus()}>
+            通过 ref 聚焦概览
+          </Button>
+        </div>
+        <p role="status">
+          当前受控标签：{value}；焦点标签：{focusedValue || '无'}
+        </p>
+        <p>通过 ref 聚焦只移动焦点，不切换选中项；聚焦概览后可用 Enter/空格选中。</p>
+      </div>
+    )
+  },
+}
+export const VerticalManual: Story = {
+  render: function VerticalManual() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>垂直手动模式：上下方向键仅移动焦点，Enter/空格确认；退出面板再返回时计数归零。</p>
+        <Tabs.Root
+          defaultValue="profile"
+          orientation="vertical"
+          activationMode="manual"
+          lazyMount
+          unmountOnExit
+          variant="subtle"
+          size="sm">
+          <Tabs.List aria-label="垂直手动切换">
+            <Tabs.Trigger value="profile">资料</Tabs.Trigger>
+            <Tabs.Trigger value="activity">活动</Tabs.Trigger>
+            <Tabs.Indicator />
+          </Tabs.List>
+          <Tabs.Content value="profile">
+            <PanelCounter label="资料" />
+          </Tabs.Content>
+          <Tabs.Content value="activity">
+            <PanelCounter label="活动" />
+          </Tabs.Content>
+        </Tabs.Root>
+      </div>
+    )
+  },
+}
+export const Fitted: Story = {
+  render: function Fitted() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Tabs.Root defaultValue="first" variant="enclosed" size="lg" fitted maxWidth="xl">
+          <Tabs.List aria-label="等宽标签">
+            <Tabs.Trigger value="first">第一项</Tabs.Trigger>
+            <Tabs.Trigger value="second">第二项</Tabs.Trigger>
+            <Tabs.Indicator />
+          </Tabs.List>
+          <Tabs.Content value="first">Enclosed：第一项面板</Tabs.Content>
+          <Tabs.Content value="second">Enclosed：第二项面板</Tabs.Content>
+        </Tabs.Root>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>分维度定制：紧凑尺寸保留 line 外观；自定外观保留默认尺寸与键盘切换。</p>
+        <Tabs.Root defaultValue="first" size="unstyled" gap="2">
+          <Tabs.List aria-label="自定尺寸标签">
+            <Tabs.Trigger value="first" height="32px" px="3" textStyle="sm">
+              概览
+            </Tabs.Trigger>
+            <Tabs.Trigger value="second" height="32px" px="3" textStyle="sm">
+              详情
+            </Tabs.Trigger>
+            <Tabs.Indicator />
+          </Tabs.List>
+          <Tabs.Content value="first">自定尺寸：概览</Tabs.Content>
+          <Tabs.Content value="second">自定尺寸：详情</Tabs.Content>
+        </Tabs.Root>
+        <Tabs.Root defaultValue="first" variant="unstyled">
+          <Tabs.List aria-label="自定外观标签">
+            <Tabs.Trigger
+              value="first"
+              borderRadius="full"
+              focusVisibleRing="outside"
+              css={{ _selected: { bg: 'lime.3', color: 'lime.11' } }}>
+              概览
+            </Tabs.Trigger>
+            <Tabs.Trigger
+              value="second"
+              borderRadius="full"
+              focusVisibleRing="outside"
+              css={{ _selected: { bg: 'lime.3', color: 'lime.11' } }}>
+              详情
+            </Tabs.Trigger>
+          </Tabs.List>
+          <Tabs.Content value="first" focusVisibleRing="inside">
+            自定外观：概览
+          </Tabs.Content>
+          <Tabs.Content value="second" focusVisibleRing="inside">
+            自定外观：详情
+          </Tabs.Content>
+        </Tabs.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Avatar.stories.tsx

@@ -0,0 +1,108 @@
+import { Avatar, Heading, Text } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Display/Avatar',
+  component: Avatar.Root,
+  args: { shape: 'full', size: 'md', variant: 'subtle' },
+  argTypes: {
+    shape: { control: 'select', options: ['full', 'rounded', 'square', 'unstyled'] },
+    size: {
+      control: 'select',
+      options: ['2xl', '2xs', 'full', 'lg', 'md', 'sm', 'unstyled', 'xl', 'xs'],
+    },
+    variant: { control: 'select', options: ['outline', 'solid', 'subtle', 'surface', 'unstyled'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '图片、姓名缩写、回退内容和形状定制。' },
+    },
+  },
+} satisfies Meta<typeof Avatar.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['shape', 'size', 'variant'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Avatar.Root {...args}>
+        <Avatar.Fallback name="News Now" />
+      </Avatar.Root>
+    </div>
+  ),
+}
+
+export const FallbacksAndImage: Story = {
+  render: function FallbacksAndImage() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <Heading as="h3" textStyle="lg">
+            头像与回退
+          </Heading>
+          <div
+            className={css({ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '4' })}>
+            <Avatar.Root size="sm" variant="solid">
+              <Avatar.Fallback name="Park UI" />
+            </Avatar.Root>
+            <Avatar.Root size="md" variant="surface" shape="rounded">
+              <Avatar.Fallback name="  News   Now  " />
+            </Avatar.Root>
+            <Avatar.Root size="lg" variant="outline" shape="square">
+              <Avatar.Fallback />
+            </Avatar.Root>
+            <Avatar.Root shape="full" size="lg">
+              <Avatar.Fallback name="Random User" />
+              <Avatar.Image src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%20viewBox%3D%220%200%2096%2096%22%3E%3Crect%20width%3D%2296%22%20height%3D%2296%22%20fill%3D%22%233b82f6%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2236%22%20r%3D%2218%22%20fill%3D%22%23fff%22%2F%3E%3Cpath%20d%3D%22M12%2096a36%2036%200%200%201%2072%200%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E" />
+            </Avatar.Root>
+            <Avatar.Root size="xl">
+              <Avatar.Fallback asChild>
+                <span>自定义</span>
+              </Avatar.Fallback>
+            </Avatar.Root>
+          </div>
+          <Text color="fg.muted">
+            支持姓名缩写、默认图标、自定义节点和本地图片，不请求外部头像服务。
+          </Text>
+        </div>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'flex', alignItems: 'center', gap: '3', flexWrap: 'wrap' })}>
+          <Avatar.Root
+            size="unstyled"
+            width="36px"
+            height="36px"
+            fontSize="14px"
+            aria-label="自定尺寸头像">
+            <Avatar.Fallback name="News Now" lineHeight="1" css={{ _icon: { boxSize: '4' } }} />
+          </Avatar.Root>
+          <Avatar.Root
+            variant="unstyled"
+            bg="lime.3"
+            color="lime.11"
+            fontWeight="bold"
+            aria-label="自定外观头像">
+            <Avatar.Fallback name="Ada Lovelace" />
+          </Avatar.Root>
+          <Avatar.Root shape="unstyled" borderRadius="10px" aria-label="自定形状头像">
+            <Avatar.Fallback name="Park UI" borderRadius="inherit" />
+          </Avatar.Root>
+        </div>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Badge.stories.tsx

@@ -0,0 +1,90 @@
+import { Badge } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Display/Badge',
+  component: Badge,
+  args: { size: 'md', variant: 'subtle', children: '标签' },
+  argTypes: {
+    size: { control: 'select', options: ['2xl', 'lg', 'md', 'sm', 'unstyled', 'xl'] },
+    variant: { control: 'select', options: ['outline', 'solid', 'subtle', 'surface', 'unstyled'] },
+    children: { control: 'text' },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '标签的配色、外观、尺寸和 asChild。' },
+    },
+  },
+} satisfies Meta<typeof Badge>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'variant', 'children'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Badge {...args} />
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  tags: ['!dev'],
+  render: function Variants() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>Badge 配方与尺寸</h3>
+          <div
+            className={css({ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '3' })}>
+            <Badge variant="solid">Solid</Badge>
+            <Badge variant="surface">Surface</Badge>
+            <Badge variant="subtle">Subtle</Badge>
+            <Badge variant="outline">Outline</Badge>
+            <Badge colorPalette="red">错误</Badge>
+            <Badge colorPalette="green">成功</Badge>
+            <Badge colorPalette="gray" asChild>
+              <span>asChild：span</span>
+            </Badge>
+          </div>
+          <div
+            className={css({ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '3' })}>
+            <Badge size="sm">sm</Badge>
+            <Badge size="md">md</Badge>
+            <Badge size="lg">lg</Badge>
+            <Badge size="xl">xl</Badge>
+            <Badge size="2xl">2xl</Badge>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '3' })}>
+          <Badge size="unstyled" height="22px" px="2" gap="1" fontSize="12px" lineHeight="1">
+            自定尺寸
+          </Badge>
+          <Badge
+            variant="unstyled"
+            bg="lime.3"
+            color="lime.11"
+            borderRadius="full"
+            fontWeight="semibold">
+            自定外观
+          </Badge>
+        </div>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Card.stories.tsx

@@ -0,0 +1,121 @@
+import { Badge, Button, Card } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Display/Card',
+  component: Card.Root,
+  args: { variant: 'outline' },
+  argTypes: {
+    variant: { control: 'select', options: ['elevated', 'outline', 'subtle', 'unstyled'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { type: 'code' }, description: { component: '卡片插槽、外观与操作反馈。' } },
+  },
+} satisfies Meta<typeof Card.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['variant'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Card.Root {...args}>
+        <Card.Header>
+          <Card.Title>卡片标题</Card.Title>
+          <Card.Description>卡片描述</Card.Description>
+        </Card.Header>
+        <Card.Body>内容区域</Card.Body>
+        <Card.Footer>
+          <Button>操作</Button>
+        </Card.Footer>
+      </Card.Root>
+    </div>
+  ),
+}
+
+export const Variants: Story = {
+  tags: ['!dev'],
+  render: function Variants() {
+    const [actions, setActions] = useState(0)
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div
+          className={css({
+            display: 'grid',
+            gap: '4',
+            gridTemplateColumns: { base: '1fr', lg: 'repeat(3, minmax(0, 1fr))' },
+          })}>
+          <Card.Root variant="outline">
+            <Card.Header>
+              <Card.Title asChild>
+                <h3>Outline 卡片</h3>
+              </Card.Title>
+              <Card.Description>默认配方：边框与背景。</Card.Description>
+            </Card.Header>
+            <Card.Body>Header、Body 和 Footer 应保持一致的内边距。</Card.Body>
+            <Card.Footer>
+              <Button
+                type="button"
+                variant="outline"
+                onClick={() => setActions((count) => count + 1)}>
+                操作
+              </Button>
+            </Card.Footer>
+          </Card.Root>
+          <Card.Root variant="elevated">
+            <Card.Header>
+              <Card.Title>Elevated 卡片</Card.Title>
+              <Card.Description>阴影配方。</Card.Description>
+            </Card.Header>
+            <Card.Body>卡片内容通过插槽组合，支持 css 和原生属性。</Card.Body>
+            <Card.Footer>
+              <Button type="button" onClick={() => setActions((count) => count + 1)}>
+                操作
+              </Button>
+            </Card.Footer>
+          </Card.Root>
+          <Card.Root variant="subtle">
+            <Card.Header>
+              <Card.Title>Subtle 卡片</Card.Title>
+              <Card.Description>柔和背景配方。</Card.Description>
+            </Card.Header>
+            <Card.Body>Footer 使用 div，不应被识别为额外标题。</Card.Body>
+            <Card.Footer>
+              <Badge>仅供展示</Badge>
+            </Card.Footer>
+          </Card.Root>
+        </div>
+        <p role="status">卡片操作执行 {actions} 次。</p>
+      </div>
+    )
+  },
+}
+export const CustomAppearance: Story = {
+  render: function CustomAppearance() {
+    const [, setActions] = useState(0)
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Card.Root variant="unstyled" bg="gray.3" borderRadius="lg">
+          <Card.Header>
+            <Card.Title fontWeight="bold">自定外观，保留卡片间距</Card.Title>
+            <Card.Description color="gray.11">
+              单档尺寸继续保留，不需要重新设置全部 slots。
+            </Card.Description>
+          </Card.Header>
+          <Card.Body>背景、圆角、标题字重与描述颜色由当前实例定义。</Card.Body>
+          <Card.Footer>
+            <Button type="button" size="sm" onClick={() => setActions((count) => count + 1)}>
+              操作
+            </Button>
+          </Card.Footer>
+        </Card.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Heading.stories.tsx

@@ -0,0 +1,62 @@
+import { Heading } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Display/Heading',
+  component: Heading,
+  args: { size: 'xl', children: '组件标题' },
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['2xl', '3xl', '4xl', '5xl', '6xl', '7xl', 'lg', 'md', 'sm', 'unstyled', 'xl', 'xs'],
+    },
+    children: { control: 'text' },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: 'HTML 标题层级、字号和样式覆盖。' },
+    },
+  },
+} satisfies Meta<typeof Heading>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'children'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Heading {...args} />
+    </div>
+  ),
+}
+
+export const LevelsAndSizes: Story = {
+  render: function LevelsAndSizes() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <Heading as="h3" size="lg">
+            标题 size 与 HTML 层级分别控制
+          </Heading>
+          <Heading as="h4" size="sm">
+            sm 标题
+          </Heading>
+          <Heading as="h4" size="lg" textStyle="sm">
+            textStyle 可以覆盖 size 的文字样式
+          </Heading>
+        </div>
+        <Heading as="h3">默认标题 · xl</Heading>
+        <Heading as="h4" size="unstyled" fontSize="17px" lineHeight="1.5">
+          自定字号，保留默认字重
+        </Heading>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/display/Icon.stories.tsx

@@ -0,0 +1,51 @@
+import { Icon } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+import { SearchIcon } from 'lucide-react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Display/Icon',
+  component: Icon,
+  args: { size: 'md' },
+  argTypes: {
+    size: { control: 'select', options: ['2xs', 'lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: { source: { type: 'code' }, description: { component: '图标组合、尺寸和颜色。' } },
+  },
+} satisfies Meta<typeof Icon>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Icon {...args} asChild>
+        <SearchIcon />
+      </Icon>
+    </div>
+  ),
+}
+
+export const CompositionAndSize: Story = {
+  render: function CompositionAndSize() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Icon asChild size="lg" color="fg.muted">
+          <SearchIcon aria-hidden="true" />
+        </Icon>
+        <span className={css({ display: 'inline-flex', alignItems: 'center', gap: '2' })}>
+          <Icon asChild size="unstyled" width="18px" height="18px" color="lime.11">
+            <SearchIcon />
+          </Icon>
+          自定图标尺寸
+        </span>
+      </div>
+    )
+  },
+}