feat: initialize React Spectrum template with layouts and showcases

1 files changed, 68 insertions, 0 deletions

diff --git a/src/components/form-examples/selection-fields.tsx b/src/components/form-examples/selection-fields.tsx
new file mode 100644
index 0000000..84e1ec1
--- /dev/null
+++ b/src/components/form-examples/selection-fields.tsx
@@ -0,0 +1,68 @@
+import FieldGrid from './field-grid'
+import { useState } from 'react'
+import { Checkbox, CheckboxGroup } from '@react-spectrum/s2/CheckboxGroup'
+import { Radio, RadioGroup } from '@react-spectrum/s2/RadioGroup'
+import { Switch } from '@react-spectrum/s2/Switch'
+import { Picker, PickerItem } from '@react-spectrum/s2/Picker'
+import { ComboBox, ComboBoxItem } from '@react-spectrum/s2/ComboBox'
+import { SelectBox, SelectBoxGroup, Text, type Selection } from '@react-spectrum/s2/SelectBoxGroup'
+import { SegmentedControl, SegmentedControlItem, type Key } from '@react-spectrum/s2/SegmentedControl'
+import { ToggleButton, ToggleButtonGroup } from '@react-spectrum/s2/ToggleButtonGroup'
+import styles from './form-examples.module.css'
+
+export default function SelectionFields({ disabled }: { disabled: boolean }) {
+  const [plan, setPlan] = useState<Selection>(new Set(['personal']))
+  const [view, setView] = useState<Key>('list')
+  const [format, setFormat] = useState<Selection>(new Set())
+  const [favorite, setFavorite] = useState(false)
+  const [partial, setPartial] = useState(true)
+  const [partialSelected, setPartialSelected] = useState(false)
+  return (
+    <section className={styles.section} aria-labelledby="selection-fields-title">
+      <h2 id="selection-fields-title">选择控件</h2>
+      <FieldGrid>
+        <Picker name="region" label="下拉单选" defaultSelectedKey="shanghai">
+          <PickerItem id="shanghai">上海</PickerItem><PickerItem id="beijing">北京</PickerItem><PickerItem id="shenzhen">深圳</PickerItem>
+        </Picker>
+        <ComboBox name="language" label="可搜索下拉框" defaultItems={[{ id: 'ts', name: 'TypeScript' }, { id: 'js', name: 'JavaScript' }, { id: 'py', name: 'Python' }]}>
+          {(item) => <ComboBoxItem id={item.id}>{item.name}</ComboBoxItem>}
+        </ComboBox>
+        <RadioGroup name="contact" label="单选组" defaultValue="email" orientation="horizontal">
+          <Radio value="email">邮件</Radio><Radio value="phone">电话</Radio>
+        </RadioGroup>
+        <CheckboxGroup name="interests" label="复选框组" defaultValue={['design']}>
+          <Checkbox value="design">设计</Checkbox><Checkbox value="development">开发</Checkbox><Checkbox value="research">研究</Checkbox>
+        </CheckboxGroup>
+        <div className={styles.stack}>
+          <Checkbox name="newsletter" value="yes">订阅邮件</Checkbox>
+          <Checkbox name="partialSelection" value="yes" isIndeterminate={partial} isSelected={partialSelected} onChange={(value) => { setPartial(false); setPartialSelected(value) }}>部分选中状态</Checkbox>
+          <Switch name="notifications" value="on" defaultSelected>开启通知</Switch>
+        </div>
+        <div className={styles.stack}>
+          <span id="view-label">分段选择</span>
+          <SegmentedControl aria-labelledby="view-label" selectedKey={view} onSelectionChange={setView}>
+            <SegmentedControlItem isDisabled={disabled} id="list">列表</SegmentedControlItem><SegmentedControlItem isDisabled={disabled} id="grid">网格</SegmentedControlItem>
+          </SegmentedControl>
+          <input type="hidden" name="view" value={String(view)} />
+        </div>
+        <div className={styles.stack}>
+          <span id="format-label">切换按钮组</span>
+          <ToggleButtonGroup aria-labelledby="format-label" selectionMode="multiple" selectedKeys={format} onSelectionChange={setFormat}>
+            <ToggleButton id="bold">粗体</ToggleButton><ToggleButton id="italic">斜体</ToggleButton>
+          </ToggleButtonGroup>
+          <input type="hidden" name="format" value={JSON.stringify(format === 'all' ? ['bold', 'italic'] : [...format])} />
+          <ToggleButton isSelected={favorite} onChange={setFavorite}>收藏</ToggleButton>
+          <input type="hidden" name="favorite" value={String(favorite)} />
+        </div>
+      </FieldGrid>
+      <div className={styles.stack}>
+        <span id="plan-label">卡片选择</span>
+        <SelectBoxGroup isDisabled={disabled} aria-labelledby="plan-label" selectedKeys={plan} onSelectionChange={setPlan}>
+          <SelectBox id="personal" textValue="个人版"><Text slot="label">个人版</Text><Text slot="description">个人工作空间</Text></SelectBox>
+          <SelectBox id="team" textValue="团队版"><Text slot="label">团队版</Text><Text slot="description">多人协作空间</Text></SelectBox>
+        </SelectBoxGroup>
+        <input type="hidden" name="plan" value={plan === 'all' ? 'all' : [...plan].join(',')} />
+      </div>
+    </section>
+  )
+}