feat: initialize React Spectrum template with layouts and showcases

1 files changed, 28 insertions, 0 deletions

diff --git a/src/components/form-examples/text-fields.tsx b/src/components/form-examples/text-fields.tsx
new file mode 100644
index 0000000..59cdd28
--- /dev/null
+++ b/src/components/form-examples/text-fields.tsx
@@ -0,0 +1,28 @@
+import FieldGrid from './field-grid'
+import { TextField } from '@react-spectrum/s2/TextField'
+import { TextArea } from '@react-spectrum/s2/TextArea'
+import { SearchField } from '@react-spectrum/s2/SearchField'
+import { ContextualHelp, Heading, Content } from '@react-spectrum/s2/ContextualHelp'
+import styles from './form-examples.module.css'
+
+export default function TextFields() {
+  return (
+    <section className={styles.section} aria-labelledby="text-fields-title">
+      <h2 id="text-fields-title">文本输入</h2>
+      <FieldGrid>
+        <TextField name="username" label="用户名" isRequired minLength={3} maxLength={20}
+          description="3–20 个字符；输入 admin 可体验提交后的业务校验。"
+          contextualHelp={<ContextualHelp><Heading>用户名</Heading><Content>可使用字母、数字和下划线。</Content></ContextualHelp>}
+          validate={(value) => value && !/^[a-zA-Z0-9_]+$/.test(value) ? '只能包含字母、数字和下划线。' : null} />
+        <TextField name="email" label="邮箱" type="email" isRequired placeholder="name@example.com" />
+        <TextField name="password" label="密码" type="password" minLength={8} description="选填，至少 8 位；提交预览中隐藏密码。" />
+        <TextField name="website" label="网址" type="url" placeholder="https://example.com" />
+        <TextField name="phone" label="电话" type="tel" placeholder="输入联系电话" />
+        <SearchField name="keyword" label="搜索关键词" description="支持输入与一键清空。" />
+        <TextArea name="bio" label="多行简介" maxLength={200} description="最多 200 个字符。" />
+        <TextField name="reference" label="只读字段" value="FORM-DEMO-001" isReadOnly />
+        <TextField label="禁用字段" defaultValue="不可编辑，也不参与提交" isDisabled />
+      </FieldGrid>
+    </section>
+  )
+}