Skip to content

Commit accbbc7

Browse files
OnlylongerOnlylonger
committed
docs: add relative components docs
1 parent efd58db commit accbbc7

14 files changed

Lines changed: 522 additions & 30 deletions

File tree

‎docs/components/checkbox-group/index.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# CheckboxGroup
2+
3+
基于 [Checkbox](../checkbox) 进行封装. 可结合 [Form](../form) 使用
4+
5+
## Playground
6+
7+
<code src="./playground.tsx" />
8+
9+
## API

‎docs/components/checkbox-group/playground.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Button, CheckboxGroup } from '@shilong/react'
2+
import { useState } from 'react'
3+
4+
const options = [
5+
{
6+
label: '豆腐',
7+
value: 'toufu',
8+
},
9+
{
10+
label: '棉花糖',
11+
value: 'mianhuatang',
12+
},
13+
{
14+
label: '棉花糖2',
15+
value: 'mianhuatang2',
16+
},
17+
{
18+
label: '棉花糖3',
19+
value: 'mianhuatang3',
20+
},
21+
{
22+
label: '棉花糖4',
23+
value: 'mianhuatang4',
24+
},
25+
]
26+
27+
function App() {
28+
const [error, setError] = useState(false)
29+
const [value, setValue] = useState<string[] | undefined>()
30+
31+
return (
32+
<>
33+
<CheckboxGroup
34+
aria-invalid={error}
35+
options={options}
36+
value={value}
37+
onChange={(v) => setValue(v)}
38+
/>
39+
<div style={{ marginTop: 20, display: 'flex', gap: 20 }}>
40+
<Button variant="destructive" onClick={() => setError(!error)}>
41+
Toggle Error
42+
</Button>
43+
</div>
44+
</>
45+
)
46+
}
47+
48+
export default App

‎docs/components/checkbox/index.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# Checkbox
2+
3+
基于 `@radix-ui/react-checkbox` 和 `lucide-react` 进行封装. 可结合 [Form](../form) 使用
4+
5+
## Playground
6+
7+
<code src="./playground.tsx" />
8+
9+
## API

‎docs/components/checkbox/playground.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Button, Checkbox } from '@shilong/react'
2+
import { useState } from 'react'
3+
4+
function App() {
5+
const [error, setError] = useState(false)
6+
const [disabled, setDisabled] = useState(false)
7+
8+
return (
9+
<>
10+
<Checkbox aria-invalid={error} disabled={disabled} />
11+
<div style={{ marginTop: 20, display: 'flex', gap: 20 }}>
12+
<Button variant="destructive" onClick={() => setError(!error)}>
13+
Toggle Error
14+
</Button>
15+
<Button onClick={() => setDisabled(!disabled)}>Toggle disabled</Button>
16+
</div>
17+
</>
18+
)
19+
}
20+
21+
export default App

‎docs/components/data-table/index.mdx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
# DataTable
2+
3+
用于表单搜索+列表展示
4+
5+
## Playground
6+
7+
<code src="./playground.tsx" direction="vertical" />
8+
9+
## API

‎docs/components/data-table/playground.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { DataTable, Form, FormItem, Input } from '@shilong/react'
2+
3+
export type Payment = {
4+
id: string
5+
amount: number
6+
status: 'pending' | 'processing' | 'success' | 'failed'
7+
email: string
8+
}
9+
10+
const data: Payment[] = [
11+
{
12+
id: 'm5gr84i9',
13+
amount: 316,
14+
status: 'success',
15+
email: 'ken99@example.com',
16+
},
17+
{
18+
id: '3u1reuv4',
19+
amount: 242,
20+
status: 'success',
21+
email: 'Abe45@example.com',
22+
},
23+
{
24+
id: 'derv1ws0',
25+
amount: 837,
26+
status: 'processing',
27+
email: 'Monserrat44@example.com',
28+
},
29+
{
30+
id: '5kma53ae',
31+
amount: 874,
32+
status: 'success',
33+
email: 'Silas22@example.com',
34+
},
35+
{
36+
id: 'bhqecj4p',
37+
amount: 721,
38+
status: 'failed',
39+
email: 'carmella@example.com',
40+
},
41+
]
42+
43+
export const columns: DataTable.ColumnDef<Payment>[] = [
44+
{
45+
accessorKey: 'id',
46+
header: 'ID',
47+
cell: ({ row }) => row.getValue('id'),
48+
},
49+
{
50+
accessorKey: 'status',
51+
header: 'Status',
52+
cell: ({ row }) => (
53+
<div className="capitalize">{row.getValue('status')}</div>
54+
),
55+
},
56+
{
57+
accessorKey: 'email',
58+
header: 'email',
59+
cell: ({ row }) => <div className="lowercase">{row.getValue('email')}</div>,
60+
},
61+
{
62+
accessorKey: 'amount',
63+
header: () => <div className="text-right">Amount</div>,
64+
cell: ({ row }) => {
65+
const amount = parseFloat(row.getValue('amount'))
66+
// Format the amount as a dollar amount
67+
const formatted = new Intl.NumberFormat('en-US', {
68+
style: 'currency',
69+
currency: 'USD',
70+
}).format(amount)
71+
return <div className="text-right font-medium">{formatted}</div>
72+
},
73+
},
74+
]
75+
76+
function App() {
77+
const handleSubmit = (v: object) => {
78+
// table.getColumn("email")?.setFilterValue(event.target.value)
79+
}
80+
81+
return (
82+
<div>
83+
<div>
84+
<Form onSubmit={handleSubmit}>
85+
<FormItem name="emial" label="Email" render={<Input />} />
86+
</Form>
87+
</div>
88+
<div>
89+
<DataTable.Table
90+
data={data}
91+
columns={columns}
92+
getCoreRowModel={DataTable.getCoreRowModel()}
93+
getFilteredRowModel={DataTable.getFilteredRowModel()}
94+
/>
95+
</div>
96+
</div>
97+
)
98+
}
99+
100+
export default App

‎docs/components/form/index.mdx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
# Form
2+
3+
表单组件，作为一个容器组件更好的为用户表单输入提供交互功能。
4+
5+
目前仅提供了如下表单组件
6+
7+
- [Input](../input)
8+
- [Checkbox](../checkbox)
9+
- [CheckboxGroup](../checkboxGroup)
10+
11+
## Playground
12+
13+
<code src="./playground.tsx" direction="vertical" />
14+
15+
## API

‎docs/components/form/playground.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { Button, CheckboxGroup, Form, FormItem, Input } from '@shilong/react'
2+
import { useState } from 'react'
3+
4+
const options = [
5+
{
6+
label: '豆腐',
7+
value: 'toufu',
8+
},
9+
{
10+
label: '棉花糖',
11+
value: 'mianhuatang',
12+
},
13+
{
14+
label: '棉花糖2',
15+
value: 'mianhuatang2',
16+
},
17+
{
18+
label: '棉花糖3',
19+
value: 'mianhuatang3',
20+
},
21+
{
22+
label: '棉花糖4',
23+
value: 'mianhuatang4',
24+
},
25+
]
26+
27+
function App() {
28+
const [json, setJson] = useState('')
29+
30+
const handleSubmit = (v: object) => {
31+
console.log(v)
32+
setJson(JSON.stringify(v))
33+
}
34+
35+
return (
36+
<>
37+
<div
38+
style={{
39+
display: 'flex',
40+
height: 500,
41+
justifyContent: 'center',
42+
alignItems: 'center',
43+
}}
44+
>
45+
<div
46+
style={{
47+
width: 450,
48+
padding: 50,
49+
boxShadow:
50+
'0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)',
51+
}}
52+
>
53+
<h2 style={{ textAlign: 'center', fontSize: 24, fontWeight: 600 }}>
54+
Sign in
55+
</h2>
56+
<p
57+
style={{
58+
textAlign: 'center',
59+
fontWeight: 400,
60+
color: '#0009',
61+
fontSize: 14,
62+
}}
63+
>
64+
Welcome user, please sign in to continue
65+
</p>
66+
<Form
67+
onSubmit={handleSubmit}
68+
style={{
69+
marginTop: 40,
70+
}}
71+
>
72+
<FormItem
73+
name="username"
74+
label="Username"
75+
rules={{ required: '必填项' }}
76+
render={<Input placeholder="Please input" />}
77+
/>
78+
<FormItem
79+
name="password"
80+
label="Password"
81+
rules={{ required: '必填项' }}
82+
render={<Input type="password" placeholder="Please input" />}
83+
/>
84+
<FormItem
85+
name="food"
86+
label="Food"
87+
rules={{ required: '必填项' }}
88+
className="items-start"
89+
controlled
90+
render={<CheckboxGroup options={options} />}
91+
/>
92+
<Button type="submit" style={{ marginTop: 20 }}>
93+
Submit
94+
</Button>
95+
</Form>
96+
</div>
97+
</div>
98+
<div style={{ textAlign: 'center', marginTop: 20 }}>{json}</div>
99+
</>
100+
)
101+
}
102+
103+
export default App

‎docs/components/input/index.mdx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
# Input
2+
3+
基于 `input` 进行样式封装的基本输入框. 可结合 [Form](../form) 使用
4+
5+
## Playground
6+
7+
<code src="./playground.tsx" />
8+
9+
## API
10+
11+
与 `input` 标签相同

‎docs/components/input/playground.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { Button, Input } from '@shilong/react'
2+
import { useState } from 'react'
3+
4+
function App() {
5+
const [error, setError] = useState(false)
6+
const [disabled, setDisabled] = useState(false)
7+
8+
return (
9+
<>
10+
<Input aria-invalid={error} disabled={disabled} />
11+
<div style={{ marginTop: 20, display: 'flex', gap: 20 }}>
12+
<Button variant="destructive" onClick={() => setError(!error)}>
13+
Toggle Error
14+
</Button>
15+
<Button onClick={() => setDisabled(!disabled)}>Toggle disabled</Button>
16+
</div>
17+
</>
18+
)
19+
}
20+
21+
export default App

0 commit comments

Comments
 (0)