Skip to content

Commit 6dbf84b

Browse files
forestreamforestream
committed
Add test cases
1 parent 2819085 commit 6dbf84b

File tree

7 files changed

+406
-164
lines changed

7 files changed

+406
-164
lines changed

‎packages/components/src/components/Select/Checkbox.tsx‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎packages/components/src/components/Select/ControlledRadio.tsx‎

Lines changed: 0 additions & 73 deletions
This file was deleted.

packages/components/src/components/Select/ControlledCheckbox.tsx renamed to packages/components/src/components/Select/Default.tsx

Lines changed: 11 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
1-
'use client'
2-
31
import { css, Flex } from '@devup-ui/react'
4-
import { useState } from 'react'
2+
import { ComponentProps } from 'react'
53

64
import {
75
Select,
@@ -12,41 +10,23 @@ import {
1210
} from '.'
1311
import { IconArrow } from './IconArrow'
1412

15-
export function ControlledCheckbox() {
16-
const [value, setValue] = useState<string[]>([])
17-
const handleChange = (nextValue: string) => {
18-
if (value.includes(nextValue)) {
19-
setValue(value.filter((v) => v !== nextValue))
20-
} else {
21-
setValue([...value, nextValue])
22-
}
23-
}
24-
25-
const [subValue, setSubValue] = useState<string[]>([])
26-
const handleSubChange = (nextValue: string) => {
27-
if (subValue.includes(nextValue)) {
28-
setSubValue(subValue.filter((v) => v !== nextValue))
29-
} else {
30-
setSubValue([...subValue, nextValue])
31-
}
32-
}
33-
13+
export function Default({
14+
...props
15+
}: Omit<ComponentProps<typeof Select>, 'children'>) {
3416
return (
35-
<Select onValueChange={handleChange} type="checkbox" value={value}>
36-
<SelectTrigger>Select {value}</SelectTrigger>
17+
<Select {...props}>
18+
<SelectTrigger>Select</SelectTrigger>
3719
<SelectContainer>
3820
<SelectOption value="Option 1">Option 1</SelectOption>
3921
<SelectOption value="Option 2">Option 2</SelectOption>
4022
<SelectDivider />
4123
<SelectOption value="Option 3">Option 3</SelectOption>
42-
<SelectOption value="Option 4">Option 4</SelectOption>
43-
<Select
44-
onValueChange={handleSubChange}
45-
type="checkbox"
46-
value={subValue}
47-
>
24+
<SelectOption disabled value="Option 4">
25+
Option 4
26+
</SelectOption>
27+
<Select type="radio">
4828
<SelectTrigger asChild>
49-
<SelectOption showCheck={false}>
29+
<SelectOption>
5030
<Flex alignItems="center" justifyContent="space-between" w="100%">
5131
Option 5<IconArrow />
5232
</Flex>

‎packages/components/src/components/Select/Select.stories.tsx‎

Lines changed: 108 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { css, Flex } from '@devup-ui/react'
22
import { Meta, StoryObj } from '@storybook/react-vite'
3+
import { useState } from 'react'
34

45
import {
56
Select,
@@ -8,11 +9,10 @@ import {
89
SelectOption,
910
SelectTrigger,
1011
} from '.'
11-
import { ControlledCheckbox } from './ControlledCheckbox'
12-
import { ControlledRadio } from './ControlledRadio'
12+
import { Default as DefaultComponent } from './Default'
1313
import { IconArrow } from './IconArrow'
1414

15-
type Story = StoryObj<typeof meta>
15+
export type Story = StoryObj<typeof meta>
1616

1717
// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
1818
const meta: Meta<typeof Select> = {
@@ -27,24 +27,58 @@ const meta: Meta<typeof Select> = {
2727
],
2828
}
2929

30-
export const Default: Story = {
30+
export const DefaultStory: Story = {
3131
args: { type: 'radio' },
32-
render: (args) => (
33-
<Select {...args} defaultValue="Option 1">
34-
<SelectTrigger>Select</SelectTrigger>
32+
render: (args) => <DefaultComponent {...args} />,
33+
}
34+
35+
export const ControlledRadioStory: Story = {
36+
args: {},
37+
render: () => <ControlledRadio />,
38+
}
39+
40+
export const ControlledCheckboxStory: Story = {
41+
args: {},
42+
render: () => <ControlledCheckbox />,
43+
}
44+
45+
export default meta
46+
47+
function ControlledCheckbox() {
48+
const [value, setValue] = useState<string[]>([])
49+
const handleChange = (nextValue: string) => {
50+
if (value.includes(nextValue)) {
51+
setValue(value.filter((v) => v !== nextValue))
52+
} else {
53+
setValue([...value, nextValue])
54+
}
55+
}
56+
57+
const [subValue, setSubValue] = useState<string[]>([])
58+
const handleSubChange = (nextValue: string) => {
59+
if (subValue.includes(nextValue)) {
60+
setSubValue(subValue.filter((v) => v !== nextValue))
61+
} else {
62+
setSubValue([...subValue, nextValue])
63+
}
64+
}
65+
66+
return (
67+
<Select onValueChange={handleChange} type="checkbox" value={value}>
68+
<SelectTrigger>Select {value}</SelectTrigger>
3569
<SelectContainer>
36-
<SelectOption disabled value="Option 1">
37-
Option 1
38-
</SelectOption>
70+
<SelectOption value="Option 1">Option 1</SelectOption>
3971
<SelectOption value="Option 2">Option 2</SelectOption>
4072
<SelectDivider />
4173
<SelectOption value="Option 3">Option 3</SelectOption>
42-
<SelectOption disabled value="Option 4">
43-
Option 4
44-
</SelectOption>
45-
<Select type="radio">
74+
<SelectOption value="Option 4">Option 4</SelectOption>
75+
<Select
76+
onValueChange={handleSubChange}
77+
type="checkbox"
78+
value={subValue}
79+
>
4680
<SelectTrigger asChild>
47-
<SelectOption>
81+
<SelectOption showCheck={false}>
4882
<Flex alignItems="center" justifyContent="space-between" w="100%">
4983
Option 5<IconArrow />
5084
</Flex>
@@ -63,17 +97,65 @@ export const Default: Story = {
6397
</Select>
6498
</SelectContainer>
6599
</Select>
66-
),
67-
}
68-
69-
export const ControlledRadioStory: Story = {
70-
args: {},
71-
render: () => <ControlledRadio />,
100+
)
72101
}
73102

74-
export const ControlledCheckboxStory: Story = {
75-
args: {},
76-
render: () => <ControlledCheckbox />,
103+
function ControlledRadio() {
104+
const [value, setValue] = useState('')
105+
const handleChange = (value: string) => {
106+
setValue(value)
107+
}
108+
const [subValue, setSubValue] = useState('')
109+
const handleSubChange = (value: string) => {
110+
setSubValue(value)
111+
}
112+
return (
113+
<Select onValueChange={handleChange} type="radio" value={value}>
114+
<SelectTrigger>Select {value}</SelectTrigger>
115+
<SelectContainer>
116+
<SelectOption value="Option 1">Option 1</SelectOption>
117+
<SelectOption value="Option 2">Option 2</SelectOption>
118+
<SelectDivider />
119+
<SelectOption value="Option 3">Option 3</SelectOption>
120+
<SelectOption value="Option 4">Option 4</SelectOption>
121+
<Select onValueChange={handleSubChange} type="radio" value={subValue}>
122+
<SelectTrigger asChild>
123+
<SelectOption showCheck={false}>
124+
<Flex alignItems="center" justifyContent="space-between" w="100%">
125+
Option 5<IconArrow />
126+
</Flex>
127+
</SelectOption>
128+
</SelectTrigger>
129+
<SelectContainer
130+
className={css({
131+
right: '0',
132+
top: '0',
133+
transform: 'translateX(100%)',
134+
})}
135+
>
136+
<SelectOption
137+
onClick={(value) => {
138+
if (value) {
139+
setSubValue(value)
140+
}
141+
}}
142+
value="Option 6"
143+
>
144+
Option 6
145+
</SelectOption>
146+
<SelectOption
147+
onClick={(value) => {
148+
if (value) {
149+
setSubValue(value)
150+
}
151+
}}
152+
value="Option 7"
153+
>
154+
Option 7
155+
</SelectOption>
156+
</SelectContainer>
157+
</Select>
158+
</SelectContainer>
159+
</Select>
160+
)
77161
}
78-
79-
export default meta

0 commit comments

Comments
 (0)