feat: initialize React Spectrum template with layouts and showcases

1 files changed, 101 insertions, 0 deletions

diff --git a/src/components/ui-kit/actions-feedback.tsx b/src/components/ui-kit/actions-feedback.tsx
new file mode 100644
index 0000000..ade8d48
--- /dev/null
+++ b/src/components/ui-kit/actions-feedback.tsx
@@ -0,0 +1,101 @@
+import { useEffect, useRef, useState } from 'react'
+import { Button, Text } from '@react-spectrum/s2/Button'
+import { ActionButton } from '@react-spectrum/s2/ActionButton'
+import { ToggleButton } from '@react-spectrum/s2/ToggleButton'
+import { ActionMenu, MenuItem } from '@react-spectrum/s2/ActionMenu'
+import { Badge } from '@react-spectrum/s2/Badge'
+import { StatusLight } from '@react-spectrum/s2/StatusLight'
+import { ProgressBar } from '@react-spectrum/s2/ProgressBar'
+import { ProgressCircle } from '@react-spectrum/s2/ProgressCircle'
+import { Meter } from '@react-spectrum/s2/Meter'
+import { InlineAlert, Heading, Content } from '@react-spectrum/s2/InlineAlert'
+import { DialogTrigger, Dialog, ButtonGroup } from '@react-spectrum/s2/Dialog'
+import { Popover } from '@react-spectrum/s2/Popover'
+import { Tooltip, TooltipTrigger } from '@react-spectrum/s2/Tooltip'
+import { ToastContainer, ToastQueue } from '@react-spectrum/s2/Toast'
+import AddIcon from '@react-spectrum/s2/icons/Add'
+import EditIcon from '@react-spectrum/s2/icons/Edit'
+import InfoIcon from '@react-spectrum/s2/icons/InfoCircle'
+import styles from './ui-kit.module.css'
+
+export default function ActionsFeedback() {
+  const [message, setMessage] = useState('点击按钮体验交互。')
+  const [selected, setSelected] = useState(false)
+  const [progress, setProgress] = useState(40)
+  const toastClosers = useRef<Array<() => void>>([])
+  useEffect(() => () => { toastClosers.current.forEach((close) => close()) }, [])
+
+  return (
+    <>
+      <section className={styles.section} aria-labelledby="kit-buttons">
+        <h2 id="kit-buttons">按钮与操作</h2>
+        <div className={styles.row}>
+          <Button variant="primary" onPress={() => setMessage('已点击主要按钮。')}>主要按钮</Button>
+          <Button variant="secondary" onPress={() => setMessage('已点击次要按钮。')}>次要按钮</Button>
+          <Button variant="accent" onPress={() => setMessage('已点击强调按钮。')}><AddIcon /><Text>新建</Text></Button>
+          <Button variant="negative" onPress={() => setMessage('这是危险操作的样式示例。')}>危险操作</Button>
+          <Button isDisabled>禁用按钮</Button>
+        </div>
+        <div className={styles.row}>
+          {(['S', 'M', 'L', 'XL'] as const).map((size) => <Button key={size} size={size} variant="secondary" onPress={() => setMessage(`已点击 ${size} 尺寸按钮。`)}>{size}</Button>)}
+          <TooltipTrigger><ActionButton aria-label="编辑示例" onPress={() => setMessage('已点击图标按钮。')}><EditIcon /></ActionButton><Tooltip>编辑示例</Tooltip></TooltipTrigger>
+          <ToggleButton isSelected={selected} onChange={setSelected}>{selected ? '已收藏' : '收藏'}</ToggleButton>
+          <ActionMenu aria-label="更多示例操作" onAction={(key) => setMessage(key === 'copy' ? '已选择复制示例。' : '已选择重命名示例。')}>
+            <MenuItem id="copy">复制</MenuItem><MenuItem id="rename">重命名</MenuItem>
+          </ActionMenu>
+        </div>
+        <p role="status" className={styles.caption}>{message}</p>
+      </section>
+
+      <section className={styles.section} aria-labelledby="kit-status">
+        <h2 id="kit-status">徽标与状态</h2>
+        <div className={styles.row}>
+          <Badge variant="neutral">默认</Badge><Badge variant="informative">信息</Badge><Badge variant="positive">成功</Badge><Badge variant="notice">提醒</Badge><Badge variant="negative">错误</Badge><Badge variant="accent">强调</Badge>
+        </div>
+        <div className={styles.row}>
+          <StatusLight variant="positive">已完成</StatusLight><StatusLight variant="notice">待处理</StatusLight><StatusLight variant="negative">失败</StatusLight><StatusLight variant="neutral">草稿</StatusLight>
+        </div>
+        <div className={styles.grid}>
+          <InlineAlert variant="informative"><Heading>信息提示</Heading><Content>用于展示与当前操作相关的说明。</Content></InlineAlert>
+          <InlineAlert variant="positive"><Heading>成功提示</Heading><Content>这是一条成功状态示例。</Content></InlineAlert>
+          <InlineAlert variant="notice"><Heading>注意事项</Heading><Content>操作前需要留意的提示信息。</Content></InlineAlert>
+          <InlineAlert variant="negative"><Heading>错误提示</Heading><Content>展示问题原因及后续处理方式。</Content></InlineAlert>
+        </div>
+      </section>
+
+      <section className={styles.section} aria-labelledby="kit-progress">
+        <h2 id="kit-progress">进度与容量</h2>
+        <div className={styles.grid}>
+          <ProgressBar label="示例进度" value={progress} />
+          <Meter label="已用容量" value={65} variant="notice" />
+          <ProgressBar label="不确定进度" isIndeterminate />
+          <div className={styles.row}><ProgressCircle aria-label="正在加载" isIndeterminate /><span>加载中</span></div>
+        </div>
+        <div className={styles.row}>
+          <Button variant="secondary" isDisabled={progress === 100} onPress={() => setProgress((value) => Math.min(value + 20, 100))}>增加进度</Button>
+          <Button variant="secondary" onPress={() => setProgress(0)}>重置进度</Button>
+        </div>
+      </section>
+
+      <section className={styles.section} aria-labelledby="kit-overlays">
+        <h2 id="kit-overlays">弹层与通知</h2>
+        <div className={styles.row}>
+          <DialogTrigger>
+            <Button variant="secondary">打开对话框</Button>
+            <Dialog size="S">
+              {({ close }) => <><Heading>对话框示例</Heading><Content>对话框用于需要用户确认的操作。</Content><ButtonGroup><Button variant="secondary" onPress={close}>取消</Button><Button variant="primary" onPress={() => { setMessage('已确认对话框。'); close() }}>确认</Button></ButtonGroup></>}
+            </Dialog>
+          </DialogTrigger>
+          <DialogTrigger>
+            <Button variant="secondary">打开 Popover</Button>
+            <Popover aria-label="Popover 示例"><div className={styles.popover}><InfoIcon /><p>Popover 用于在操作附近展示补充内容，点击外部或按 Esc 关闭。</p></div></Popover>
+          </DialogTrigger>
+          <TooltipTrigger><Button variant="secondary">悬停查看提示</Button><Tooltip>这是一条 Tooltip 提示。</Tooltip></TooltipTrigger>
+          <Button variant="secondary" onPress={() => toastClosers.current.push(ToastQueue.positive('这是一条成功通知。', { timeout: 5000 }))}>成功通知</Button>
+          <Button variant="secondary" onPress={() => toastClosers.current.push(ToastQueue.negative('这是一条错误通知示例。', { timeout: 5000 }))}>错误通知</Button>
+        </div>
+      </section>
+      <ToastContainer />
+    </>
+  )
+}