@oyolincc/create 0.3.0 → 0.5.0

package/templates/hono-fullstack/libs/ui/stories/feedback/Alert.stories.tsx

@@ -0,0 +1,122 @@
+import { Alert, Heading } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Feedback/Alert',
+  component: Alert.Root,
+  args: { size: 'md', status: 'info', variant: 'subtle' },
+  argTypes: {
+    size: { control: 'select', options: ['lg', 'md', 'unstyled'] },
+    status: { control: 'select', options: ['info', 'success', 'warning', 'error'] },
+    variant: { control: 'select', options: ['outline', 'solid', 'subtle', 'surface', 'unstyled'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '信息、成功、警告和错误状态及配方对比。' },
+    },
+  },
+} satisfies Meta<typeof Alert.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'status', 'variant'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Alert.Root {...args}>
+        <Alert.Indicator />
+        <Alert.Content>
+          <Alert.Title>状态提示</Alert.Title>
+          <Alert.Description>通过 Controls 切换状态与外观。</Alert.Description>
+        </Alert.Content>
+      </Alert.Root>
+    </div>
+  ),
+}
+
+export const StatusesAndVariants: Story = {
+  render: function StatusesAndVariants() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '3', maxWidth: '2xl' })}>
+          <Heading as="h3" textStyle="lg">
+            提示状态与配方
+          </Heading>
+          <Alert.Root status="info" variant="subtle">
+            <Alert.Indicator aria-hidden="true" />
+            <Alert.Content>
+              <Alert.Title>信息提示</Alert.Title>
+              <Alert.Description>默认图标与柔和背景。</Alert.Description>
+            </Alert.Content>
+          </Alert.Root>
+          <Alert.Root status="success" variant="surface">
+            <Alert.Indicator aria-hidden="true">✓</Alert.Indicator>
+            <Alert.Content>
+              <Alert.Title>操作成功</Alert.Title>
+              <Alert.Description>自定义指示图标。</Alert.Description>
+            </Alert.Content>
+          </Alert.Root>
+          <Alert.Root status="warning" variant="outline">
+            <Alert.Indicator asChild>
+              <span aria-hidden="true">!</span>
+            </Alert.Indicator>
+            <Alert.Content>
+              <Alert.Title>请注意</Alert.Title>
+              <Alert.Description>asChild 应复用提供的 span。</Alert.Description>
+            </Alert.Content>
+          </Alert.Root>
+          <Alert.Root status="error" variant="solid" size="lg">
+            <Alert.Indicator aria-hidden="true" />
+            <Alert.Content>
+              <Alert.Title>错误提示</Alert.Title>
+              <Alert.Description>通过文字明确状态，不只依赖颜色。</Alert.Description>
+            </Alert.Content>
+          </Alert.Root>
+          <Alert.Root status="success">
+            <Alert.Indicator aria-hidden="true" />
+            <Alert.Title>成功状态默认使用勾选图标</Alert.Title>
+          </Alert.Root>
+          <Alert.Root status="warning">
+            <Alert.Indicator aria-hidden="true" />
+            <Alert.Title>警告状态默认使用警告图标</Alert.Title>
+          </Alert.Root>
+        </div>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <Alert.Root size="unstyled" status="success" p="3" gap="2" textStyle="sm">
+          <Alert.Indicator css={{ _icon: { width: '18px', height: '18px' } }} />
+          <Alert.Content gap="1">
+            <Alert.Title>自定尺寸</Alert.Title>
+            <Alert.Description>保留默认外观与成功状态。</Alert.Description>
+          </Alert.Content>
+        </Alert.Root>
+        <Alert.Root
+          variant="unstyled"
+          status="success"
+          bg="gray.3"
+          borderRadius="lg"
+          borderInlineStart="3px solid"
+          borderColor="lime.9">
+          <Alert.Indicator color="lime.11" />
+          <Alert.Content>
+            <Alert.Title fontWeight="bold">自定外观</Alert.Title>
+            <Alert.Description>保留 md 尺寸及状态图标。</Alert.Description>
+          </Alert.Content>
+        </Alert.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/feedback/Progress.stories.tsx

@@ -0,0 +1,163 @@
+import { Button, Progress, Text } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Feedback/Progress',
+  component: Progress.Root,
+  args: {
+    shape: 'rounded',
+    size: 'md',
+    variant: 'solid',
+    value: 40,
+    striped: false,
+    animated: false,
+  },
+  argTypes: {
+    animated: { control: 'boolean' },
+    shape: { control: 'select', options: ['full', 'rounded', 'square', 'unstyled'] },
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+    striped: { control: 'boolean' },
+    variant: { control: 'select', options: ['solid', 'subtle', 'unstyled'] },
+    value: { control: 'number' },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '确定与未定进度、条纹动画和轨道定制。' },
+    },
+  },
+} satisfies Meta<typeof Progress.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: {
+      disable: false,
+      include: ['animated', 'shape', 'size', 'striped', 'variant', 'value'],
+    },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Progress.Root {...args}>
+        <Progress.Label>任务进度</Progress.Label>
+        <Progress.ValueText />
+        <Progress.Track>
+          <Progress.Range />
+        </Progress.Track>
+      </Progress.Root>
+    </div>
+  ),
+}
+
+export const Controlled: Story = {
+  render: function Controlled() {
+    const [value, setValue] = useState(40)
+    const [indeterminate, setIndeterminate] = useState(false)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 0}
+            onClick={() => setValue((current) => Math.max(0, current - 20))}>
+            减少
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 100}
+            onClick={() => setValue((current) => Math.min(100, current + 20))}>
+            增加
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setIndeterminate((current) => !current)}>
+            {indeterminate ? '使用确定值' : '使用未定进度'}
+          </Button>
+        </div>
+        <Progress.Root value={indeterminate ? null : value} shape="full">
+          <div className={css({ display: 'flex', justifyContent: 'space-between', mb: '2' })}>
+            <Progress.Label>任务进度</Progress.Label>
+            <Progress.ValueText />
+          </div>
+          <Progress.Track>
+            <Progress.Range />
+          </Progress.Track>
+        </Progress.Root>
+        <Progress.Root value={value} variant="subtle" striped animated size="lg">
+          <Progress.Label>条纹进度</Progress.Label>
+          <Progress.Track>
+            <Progress.Range />
+          </Progress.Track>
+        </Progress.Root>
+        <Text role="status">{indeterminate ? '未定进度' : `当前进度 ${value}%`}</Text>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    const [value, setValue] = useState(40)
+    const [indeterminate, setIndeterminate] = useState(false)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 0}
+            onClick={() => setValue((current) => Math.max(0, current - 20))}>
+            减少
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 100}
+            onClick={() => setValue((current) => Math.min(100, current + 20))}>
+            增加
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setIndeterminate((current) => !current)}>
+            {indeterminate ? '使用确定值' : '使用未定进度'}
+          </Button>
+        </div>
+        <Progress.Root size="unstyled" value={indeterminate ? null : value} textStyle="sm">
+          <Progress.Label gap="1">自定轨道尺寸</Progress.Label>
+          <Progress.ValueText textStyle="xs" lineHeight="1" />
+          <Progress.Track height="6px">
+            <Progress.Range />
+          </Progress.Track>
+        </Progress.Root>
+        <Progress.Root variant="unstyled" value={indeterminate ? null : value}>
+          <Progress.Label>自定配色，保留 md 尺寸与未定动画</Progress.Label>
+          <Progress.Track bg="gray.3">
+            <Progress.Range bg="lime.9" />
+          </Progress.Track>
+        </Progress.Root>
+        <Progress.Root shape="unstyled" size="sm" value={value}>
+          <Progress.Label>自定轨道圆角</Progress.Label>
+          <Progress.Track borderRadius="3px">
+            <Progress.Range />
+          </Progress.Track>
+        </Progress.Root>
+        <Progress.Root value={indeterminate ? null : value} striped animated>
+          <Progress.Label>默认条纹与未定状态组合对照</Progress.Label>
+          <Progress.Track>
+            <Progress.Range />
+          </Progress.Track>
+        </Progress.Root>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/feedback/ProgressCircle.stories.tsx

@@ -0,0 +1,176 @@
+import { Button, ProgressCircle, Text, useProgress } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Feedback/ProgressCircle',
+  component: ProgressCircle.Root,
+  args: { size: 'md', variant: 'solid', value: 40 },
+  argTypes: {
+    size: { control: 'select', options: ['lg', 'md', 'sm', 'unstyled', 'xl', 'xs'] },
+    variant: { control: 'select', options: ['solid', 'subtle', 'unstyled'] },
+    value: { control: 'number' },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '圆形进度、居中数值、未定状态和外部 store。' },
+    },
+  },
+} satisfies Meta<typeof ProgressCircle.Root>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['size', 'variant', 'value'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <ProgressCircle.Root {...args}>
+        <ProgressCircle.Label>圆形进度</ProgressCircle.Label>
+        <ProgressCircle.Circle>
+          <ProgressCircle.Track />
+          <ProgressCircle.Range />
+        </ProgressCircle.Circle>
+        <ProgressCircle.ValueText />
+      </ProgressCircle.Root>
+    </div>
+  ),
+}
+
+export const Controlled: Story = {
+  render: function Controlled() {
+    const [value, setValue] = useState(40)
+    const [indeterminate, setIndeterminate] = useState(false)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 0}
+            onClick={() => setValue((current) => Math.max(0, current - 20))}>
+            减少
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 100}
+            onClick={() => setValue((current) => Math.min(100, current + 20))}>
+            增加
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setIndeterminate((current) => !current)}>
+            {indeterminate ? '使用确定值' : '使用未定进度'}
+          </Button>
+        </div>
+        <ProgressCircle.Root value={indeterminate ? null : value} size="xl">
+          <ProgressCircle.Label>圆形任务进度</ProgressCircle.Label>
+          <div className={css({ display: 'flex', alignItems: 'center', gap: '3', mt: '2' })}>
+            <ProgressCircle.Circle>
+              <ProgressCircle.Track />
+              <ProgressCircle.Range />
+            </ProgressCircle.Circle>
+            <ProgressCircle.ValueText />
+          </div>
+        </ProgressCircle.Root>
+        <Text role="status">{indeterminate ? '未定进度' : `当前进度 ${value}%`}</Text>
+      </div>
+    )
+  },
+}
+export const Store: Story = {
+  render: function Store() {
+    const progress = useProgress({ defaultValue: 25 })
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <ProgressCircle.RootProvider value={progress} size="xl" variant="subtle">
+          <ProgressCircle.Label>独立 store 与居中数值</ProgressCircle.Label>
+          <div className={css({ display: 'flex', alignItems: 'center', gap: '3', mt: '2' })}>
+            <div className={css({ position: 'relative', display: 'inline-flex' })}>
+              <ProgressCircle.Circle css={{ '--thickness': '5px' }}>
+                <ProgressCircle.Track />
+                <ProgressCircle.Range strokeLinecap="round" />
+              </ProgressCircle.Circle>
+              <div
+                className={css({
+                  position: 'absolute',
+                  inset: '0',
+                  display: 'grid',
+                  placeItems: 'center',
+                })}>
+                <ProgressCircle.ValueText />
+              </div>
+            </div>
+            <Button
+              type="button"
+              variant="outline"
+              onClick={() =>
+                progress.setValue(progress.value === 100 ? 0 : (progress.value || 0) + 25)
+              }>
+              {progress.value === 100 ? '重置 store' : 'store 增加 25%'}
+            </Button>
+          </div>
+        </ProgressCircle.RootProvider>
+      </div>
+    )
+  },
+}
+export const Customization: Story = {
+  render: function Customization() {
+    const [value, setValue] = useState(40)
+    const [indeterminate, setIndeterminate] = useState(false)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'flex', flexWrap: 'wrap', gap: '3' })}>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 0}
+            onClick={() => setValue((current) => Math.max(0, current - 20))}>
+            减少
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            disabled={value === 100}
+            onClick={() => setValue((current) => Math.min(100, current + 20))}>
+            增加
+          </Button>
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => setIndeterminate((current) => !current)}>
+            {indeterminate ? '使用确定值' : '使用未定进度'}
+          </Button>
+        </div>
+        <div className={css({ display: 'flex', alignItems: 'start', gap: '6', flexWrap: 'wrap' })}>
+          <ProgressCircle.Root size="unstyled" value={indeterminate ? null : value} textStyle="sm">
+            <ProgressCircle.Label gap="1">自定圆环尺寸</ProgressCircle.Label>
+            <ProgressCircle.Circle css={{ '--size': '32px', '--thickness': '3px' }}>
+              <ProgressCircle.Track />
+              <ProgressCircle.Range />
+            </ProgressCircle.Circle>
+            <ProgressCircle.ValueText textStyle="xs" lineHeight="1" />
+          </ProgressCircle.Root>
+          <ProgressCircle.Root variant="unstyled" value={indeterminate ? null : value}>
+            <ProgressCircle.Label>自定圆环配色</ProgressCircle.Label>
+            <ProgressCircle.Circle>
+              <ProgressCircle.Track stroke="gray.4" />
+              <ProgressCircle.Range stroke="lime.9" strokeLinecap="round" />
+            </ProgressCircle.Circle>
+            <ProgressCircle.ValueText />
+          </ProgressCircle.Root>
+        </div>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/feedback/Skeleton.stories.tsx

@@ -0,0 +1,75 @@
+import { Button, Skeleton, SkeletonCircle, SkeletonText } from '@repo/ui'
+import { useState } from 'react'
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Feedback/Skeleton',
+  component: Skeleton,
+  args: { loading: true, variant: 'pulse' },
+  argTypes: {
+    circle: { control: 'boolean' },
+    loading: { control: 'boolean' },
+    variant: { control: 'select', options: ['none', 'pulse', 'shine'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '占位动画、圆形与多行占位和内容切换。' },
+    },
+  },
+} satisfies Meta<typeof Skeleton>
+export default meta
+type Story = StoryObj<typeof meta>
+export const Playground: Story = {
+  parameters: {
+    controls: { disable: false, include: ['circle', 'loading', 'variant'] },
+    docs: { source: { type: 'dynamic' } },
+  },
+  render: (args) => (
+    <div className={css({ maxWidth: '2xl' })}>
+      <Skeleton {...args} p="4" minHeight="20">
+        加载完成后的内容
+      </Skeleton>
+    </div>
+  ),
+}
+
+export const LoadingAndContent: Story = {
+  render: function LoadingAndContent() {
+    const [loading, setLoading] = useState(true)
+
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <div className={css({ display: 'grid', gap: '4', maxWidth: 'xl' })}>
+          <h3 className={css({ textStyle: 'lg', fontWeight: 'semibold' })}>
+            Skeleton 占位与内容切换
+          </h3>
+          <div
+            className={css({ display: 'flex', alignItems: 'center', gap: '4' })}
+            aria-hidden="true">
+            <SkeletonCircle boxSize="12" />
+            <SkeletonText noOfLines={3} rootProps={{ flex: '1' }} />
+          </div>
+          <div className={css({ display: 'grid', gap: '3' })} aria-hidden="true">
+            <Skeleton variant="pulse" height="8" />
+            <Skeleton variant="shine" height="8" />
+            <Skeleton variant="none" height="8" bg="gray.subtle.bg.active" />
+          </div>
+          <Button type="button" variant="outline" onClick={() => setLoading((value) => !value)}>
+            {loading ? '显示内容' : '恢复加载占位'}
+          </Button>
+          <div aria-busy={loading}>
+            <Skeleton loading={loading} aria-hidden={loading} padding="4" minHeight="20">
+              <p>加载完成后的真实内容。</p>
+              <p>关闭 loading 后应恢复文字可见性，并退出占位动画。</p>
+            </Skeleton>
+          </div>
+          <p role="status">当前状态：{loading ? '加载中' : '内容已显示'}</p>
+        </div>
+      </div>
+    )
+  },
+}

package/templates/hono-fullstack/libs/ui/stories/feedback/Spinner.stories.tsx

@@ -0,0 +1,49 @@
+import { Spinner } from '@repo/ui'
+
+import { css } from 'styled-system/css'
+
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+const meta = {
+  title: 'Feedback/Spinner',
+  component: Spinner,
+  args: { size: 'md' },
+  argTypes: {
+    size: { control: 'select', options: ['2xl', 'inherit', 'lg', 'md', 'sm', 'xl', 'xs'] },
+  },
+  parameters: {
+    controls: { disable: true },
+    docs: {
+      source: { type: 'code' },
+      description: { component: '加载指示器的尺寸与可访问文本。' },
+    },
+  },
+} satisfies Meta<typeof Spinner>
+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' })}>
+      <Spinner {...args} aria-label="加载中" role="status" />
+    </div>
+  ),
+}
+
+export const Sizes: Story = {
+  tags: ['!dev'],
+  render: function Sizes() {
+    return (
+      <div className={css({ display: 'grid', gap: '4', maxWidth: '4xl' })}>
+        <span className={css({ display: 'inline-flex', alignItems: 'center', gap: '2' })}>
+          <Spinner size="sm" aria-hidden="true" />
+          加载中
+        </span>
+        <Spinner size="lg" aria-label="加载中" role="status" />
+      </div>
+    )
+  },
+}