@oyolincc/create 0.3.0 → 0.5.0

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

@@ -0,0 +1,90 @@
+import { Badge, Heading, Float, Stack, Text, VisuallyHidden } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+import { grid, hstack } from 'styled-system/patterns'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Layout/Positioning',
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '原生 CSS 居中、比例容器和 Float 定位。' },
+    },
+  },
+} satisfies Meta
+export default meta
+type Story = StoryObj<typeof meta>
+export const Centered: Story = {
+  render: function Centered() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div
+          className={css({
+            position: 'relative',
+            height: '24',
+            borderWidth: '1px',
+            borderRadius: 'sm',
+          })}>
+          <div
+            className={css({
+              position: 'absolute',
+              inset: '0',
+              display: 'grid',
+              placeItems: 'center',
+            })}>
+            <Badge>原生元素居中</Badge>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}
+export const FloatAndAspectRatio: Story = {
+  render: function FloatAndAspectRatio() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Stack gap="4">
+          <Heading as="h3" size="lg">
+            原生样式与 Float
+          </Heading>
+          <div className={hstack({ flexWrap: 'wrap', gap: '3', maxWidth: 'sm' })}>
+            {['设计', '组件', 'Panda CSS', 'Ark UI', '响应式', '可定制'].map((label) => (
+              <Badge key={label}>{label}</Badge>
+            ))}
+          </div>
+          <div className={grid({ columns: { base: 1, md: 2 }, gap: '6' })}>
+            <div
+              className={css({
+                aspectRatio: '16 / 9',
+                display: 'grid',
+                placeItems: 'center',
+                bg: 'gray.subtle.bg',
+                borderRadius: 'sm',
+              })}>
+              16:9 内容容器
+            </div>
+            <div
+              className={css({
+                position: 'relative',
+                minHeight: '40',
+                display: 'grid',
+                placeItems: 'center',
+                borderWidth: '1px',
+                borderRadius: 'sm',
+              })}>
+              <Text>原生元素居中</Text>
+              <Float placement="top-end" offset="2">
+                <Badge variant="solid">
+                  3<VisuallyHidden>条通知</VisuallyHidden>
+                </Badge>
+              </Float>
+            </div>
+          </div>
+        </Stack>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,68 @@
+import { Button, ScrollArea } from '@repo/ui'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Layout/ScrollArea',
+  component: ScrollArea.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '双向滚动、滚动条和 store 滚动命令。' },
+    },
+  },
+} satisfies Meta<typeof ScrollArea.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const BidirectionalStore: Story = {
+  render: function BidirectionalStore() {
+    const scrollArea = ScrollArea.useScrollArea()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p>双向滚动：滚轮、触控板、键盘和拖动滚动条均使用 Ark 的原生行为。</p>
+        <ScrollArea.RootProvider
+          value={scrollArea}
+          scrollbar="visible"
+          size="sm"
+          height="64"
+          maxWidth="xl"
+          borderWidth="1px"
+          borderRadius="md">
+          <ScrollArea.Viewport role="region" aria-label="可滚动的示例列表" tabIndex={0}>
+            <ScrollArea.Content padding="4" minWidth="2xl">
+              <ol className={css({ display: 'grid', gap: '3' })}>
+                {Array.from({ length: 20 }, (_, index) => (
+                  <li
+                    key={index}
+                    className={css({ display: 'flex', justifyContent: 'space-between' })}>
+                    <span>第 {index + 1} 条示例内容</span>
+                    <span>右侧内容用于展示横向滚动</span>
+                  </li>
+                ))}
+              </ol>
+            </ScrollArea.Content>
+          </ScrollArea.Viewport>
+          <ScrollArea.Scrollbar orientation="vertical" />
+          <ScrollArea.Scrollbar orientation="horizontal" />
+          <ScrollArea.Corner />
+        </ScrollArea.RootProvider>
+        <div className={css({ display: 'flex', gap: '3', flexWrap: 'wrap' })}>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => scrollArea.scrollToEdge({ edge: 'top' })}>
+            回到顶部
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => scrollArea.scrollToEdge({ edge: 'bottom' })}>
+            滚动到底部
+          </Button>
+        </div>
+      </div>
+    )
+  },
+}

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

@@ -0,0 +1,87 @@
+import { Badge, Button, Group, Heading, HStack, Separator, Stack, Text, VStack } from '@repo/ui'
+import { css } from 'styled-system/css'
+import { hstack, vstack } from 'styled-system/patterns'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Layout/Stack',
+  component: Stack,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '布局 patterns、组合、分隔符和响应式方向。' },
+    },
+  },
+} satisfies Meta<typeof Stack>
+export default meta
+type Story = StoryObj<typeof meta>
+export const PatternsAndGroup: Story = {
+  render: function PatternsAndGroup() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={vstack({ alignItems: 'stretch', gap: '4' })}>
+          <Heading as="h3" size="lg">
+            Patterns 与组合
+          </Heading>
+          <div
+            className={hstack({
+              flexWrap: 'wrap',
+              gap: '3',
+              p: '4',
+              bg: 'gray.subtle.bg',
+              borderRadius: 'sm',
+            })}>
+            <Text fontWeight="semibold" flex="1">
+              弹性工具栏
+            </Text>
+            <Group attached>
+              <Button variant="outline">查看</Button>
+              <Button variant="outline">编辑</Button>
+            </Group>
+          </div>
+          <HStack gap="4">
+            <Badge>HStack</Badge>
+            <Text>默认水平居中对齐</Text>
+          </HStack>
+          <VStack align="stretch" gap="2">
+            <Badge alignSelf="start">VStack</Badge>
+            <Text>组件入口支持 asChild 和 separator；patterns 适合普通元素。</Text>
+          </VStack>
+        </div>
+      </div>
+    )
+  },
+}
+export const ResponsiveSeparators: Story = {
+  render: function ResponsiveSeparators() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Stack gap="4">
+          <Heading as="h3" size="lg">
+            响应式 Stack 与 Separator
+          </Heading>
+          <Stack
+            direction={{ base: 'column', md: 'row' }}
+            gap="6"
+            separator={<Separator variant="dashed" />}>
+            <div className={css({ p: '3' })}>第一项</div>
+            <div className={css({ p: '3' })}>第二项</div>
+            <div className={css({ p: '3' })}>第三项</div>
+          </Stack>
+          <HStack gap={{ base: '2', md: '4' }} separator={<Separator size="md" />}>
+            <Text>水平</Text>
+            <Text>分隔</Text>
+          </HStack>
+          <Separator variant="dotted" size="lg" />
+          <div className={hstack({ gap: '3', h: '10' })}>
+            <Text>显式垂直分隔</Text>
+            <Separator orientation="vertical" />
+            <Text>另一侧</Text>
+          </div>
+        </Stack>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/navigation/Breadcrumb.stories.tsx

@@ -0,0 +1,104 @@
+import { Breadcrumb, Heading } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+import { useId } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Navigation/Breadcrumb',
+  component: Breadcrumb.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '链接组合、自定义分隔、省略和当前页。' },
+    },
+  },
+} satisfies Meta<typeof Breadcrumb.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Composition: Story = {
+  render: function Composition() {
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Breadcrumb.Root aria-label="组件导航路径">
+          <Breadcrumb.List>
+            <Breadcrumb.Item>
+              <Breadcrumb.Link asChild>
+                <a href={`#${storyId}-breadcrumb-target`}>UI 首页</a>
+              </Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              <Breadcrumb.Link asChild>
+                <a href={`#${storyId}-breadcrumb-target`}>表格与标签</a>
+              </Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              <Breadcrumb.CurrentLink>折叠与导航</Breadcrumb.CurrentLink>
+            </Breadcrumb.Item>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
+        <Breadcrumb.Root variant="underline" size="sm" aria-label="自定义分隔与省略路径">
+          <Breadcrumb.List>
+            <Breadcrumb.Item>
+              <Breadcrumb.Link href={`#${storyId}-breadcrumb-target`}>首页</Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator>/</Breadcrumb.Separator>
+            <Breadcrumb.Ellipsis />
+            <Breadcrumb.Separator>/</Breadcrumb.Separator>
+            <Breadcrumb.Item>
+              <Breadcrumb.CurrentLink>当前页面</Breadcrumb.CurrentLink>
+            </Breadcrumb.Item>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
+        <div id={`${storyId}-breadcrumb-target`}>链接目标</div>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div id={`${storyId}-breadcrumb-target`}>链接目标</div>
+        <Heading size="md">分维度定制</Heading>
+        <Breadcrumb.Root size="unstyled" aria-label="自定尺寸路径">
+          <Breadcrumb.List gap="1.5" textStyle="sm">
+            <Breadcrumb.Item>
+              <Breadcrumb.Link href={`#${storyId}-breadcrumb-target`} gap="1">
+                首页
+              </Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator />
+            <Breadcrumb.Item>
+              <Breadcrumb.CurrentLink>自定尺寸</Breadcrumb.CurrentLink>
+            </Breadcrumb.Item>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
+        <Breadcrumb.Root variant="unstyled" aria-label="自定外观路径">
+          <Breadcrumb.List>
+            <Breadcrumb.Item color="lime.11">
+              <Breadcrumb.Link
+                href={`#${storyId}-breadcrumb-target`}
+                focusRing="outside"
+                css={{ _hover: { textDecoration: 'underline' } }}>
+                首页
+              </Breadcrumb.Link>
+            </Breadcrumb.Item>
+            <Breadcrumb.Separator color="lime.7">/</Breadcrumb.Separator>
+            <Breadcrumb.Item>
+              <Breadcrumb.CurrentLink color="lime.11" fontWeight="semibold">
+                自定外观
+              </Breadcrumb.CurrentLink>
+            </Breadcrumb.Item>
+          </Breadcrumb.List>
+        </Breadcrumb.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/navigation/Link.stories.tsx

@@ -0,0 +1,62 @@
+import { Link } from '@repo/ui'
+import { useId } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Navigation/Link',
+  component: Link,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '链接外观、asChild 和键盘焦点。' },
+    },
+  },
+} satisfies Meta<typeof Link>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Variants: Story = {
+  tags: ['!dev'],
+  render: function Variants() {
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p id={`${storyId}-feedback-heading`}>链接目标</p>
+        <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '4' })}>
+          <Link href={`#${storyId}-feedback-heading`}>Underline 链接</Link>
+          <Link variant="plain" href={`#${storyId}-feedback-heading`}>
+            Plain 链接
+          </Link>
+          <Link asChild>
+            <a href={`#${storyId}-feedback-heading`}>asChild 链接</a>
+          </Link>
+        </div>
+      </div>
+    )
+  },
+}
+export const CustomAppearance: Story = {
+  render: function CustomAppearance() {
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <p id={`${storyId}-feedback-heading`}>链接目标</p>
+        <Link
+          variant="unstyled"
+          href={`#${storyId}-feedback-heading`}
+          alignSelf="start"
+          bg="gray.3"
+          color="lime.11"
+          borderRadius="md"
+          px="2"
+          py="1"
+          focusVisibleRing="outside"
+          css={{ _hover: { bg: 'lime.3' } }}>
+          自定外观的链接，保留导航行为
+        </Link>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/navigation/LinkBox.stories.tsx

@@ -0,0 +1,45 @@
+import { Heading, Link, LinkBox, LinkOverlay, Stack, Text } from '@repo/ui'
+import { css } from 'styled-system/css'
+
+import { useId } from 'react'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Navigation/LinkBox',
+  component: LinkBox,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '整卡链接与独立次级链接。' },
+    },
+  },
+} satisfies Meta<typeof LinkBox>
+export default meta
+type Story = StoryObj<typeof meta>
+export const OverlayAndSecondaryLink: Story = {
+  render: function OverlayAndSecondaryLink() {
+    const storyId = useId()
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Stack gap="4">
+          <Heading as="h3" size="lg">
+            整卡链接
+          </Heading>
+          <LinkBox as="article" p="6" borderWidth="1px" borderRadius="sm">
+            <Heading as="h3" size="md">
+              <LinkOverlay href={`#${storyId}-layout-link-target`}>
+                点击整张卡片跳至页尾
+              </LinkOverlay>
+            </Heading>
+            <Text my="3">标题链接覆盖卡片，次级链接保留独立交互。</Text>
+            <Link href={`#${storyId}-layout-secondary-target`}>独立的次级链接</Link>
+          </LinkBox>
+          <Text id={`${storyId}-layout-link-target`}>卡片链接目标</Text>
+          <Text id={`${storyId}-layout-secondary-target`}>次级链接目标</Text>
+        </Stack>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/navigation/Pagination.stories.tsx

@@ -0,0 +1,74 @@
+import { Button, Pagination } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Navigation/Pagination',
+  component: Pagination.Root,
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '分页、首尾跳转和外部状态控制。' },
+    },
+  },
+} satisfies Meta<typeof Pagination.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Controlled: Story = {
+  render: function Controlled() {
+    const [page, setPage] = useState(1)
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>受控分页</h3>
+          <Pagination.Root
+            count={200}
+            pageSize={10}
+            page={page}
+            onPageChange={(details) => setPage(details.page)}
+            aria-label="示例数据分页"
+            display="flex"
+            gap="2"
+            flexWrap="wrap">
+            <Pagination.PrevTrigger asChild>
+              <Button type="button" variant="outline">
+                上一页
+              </Button>
+            </Pagination.PrevTrigger>
+            <Pagination.Items
+              render={({ value, selected }) => (
+                <Button type="button" variant={selected ? 'solid' : 'outline'}>
+                  {value}
+                </Button>
+              )}
+              ellipsis={
+                <span className={css({ display: 'inline-flex', alignItems: 'center', px: '2' })}>
+                  …
+                </span>
+              }
+            />
+            <Pagination.NextTrigger asChild>
+              <Button type="button" variant="outline">
+                下一页
+              </Button>
+            </Pagination.NextTrigger>
+          </Pagination.Root>
+          <p role="status">
+            第 {page} / 20 页；当前范围 {(page - 1) * 10 + 1}–{page * 10} / 200 条。
+          </p>
+          <div className={css({ display: 'flex', gap: '3', flexWrap: 'wrap' })}>
+            <Button type="button" variant="outline" onClick={() => setPage(1)}>
+              外部回到首页
+            </Button>
+            <Button type="button" variant="outline" onClick={() => setPage(20)}>
+              外部跳到末页
+            </Button>
+          </div>
+        </div>
+      </div>
+    )
+  },
+}