Skip to content

Commit 1773c19

Browse files
SupakornNetsuwanSupakornNetsuwan
committed
feat dropzone, file-preview, color-pciker, slider, checkbox.
1 parent f87136c commit 1773c19

23 files changed

Lines changed: 2693 additions & 10 deletions

File tree

‎examples/ui-playground/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626
"@tiptap/extension-text-style": "^2.26.3",
2727
"@tiptap/extension-underline": "^2.26.3",
2828
"@tiptap/starter-kit": "^2.26.3",
29+
"color": "^5.0.2",
2930
"date-fns": "^4.1.0",
3031
"next": "15.2.2",
3132
"next-themes": "^0.4.6",

‎examples/ui-playground/src/app/playground/shadcn/checkbox-section.tsx‎

Lines changed: 344 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,344 @@
1+
import React from 'react'
2+
3+
import { CheckIcon, MinusIcon, XIcon } from '@phosphor-icons/react'
4+
5+
import { Checkbox, Label, Typography } from '@genseki/react/v2'
6+
7+
import { PlaygroundCard } from '~/src/components/card'
8+
9+
// Basic Checkbox
10+
function BasicCheckbox() {
11+
return (
12+
<div className="flex justify-start space-x-2 flex-col gap-y-8">
13+
<Typography type="body" weight="semibold">
14+
Square
15+
</Typography>
16+
<div className="flex gap-x-4">
17+
<Checkbox defaultChecked id="basic-checkbox" />
18+
<Label htmlFor="basic-checkbox">Accept terms and conditions (Default variant)</Label>
19+
</div>
20+
<div className="flex gap-x-4">
21+
<Checkbox defaultChecked id="basic-checkbox-undetermine" icon={MinusIcon} />
22+
<Label htmlFor="basic-checkbox-undetermine">
23+
Accept terms and conditions (Default gvariant with undetermine icon)
24+
</Label>
25+
</div>
26+
<div className="flex gap-x-4">
27+
<Checkbox defaultChecked id="basic-checkbox-incorrect" variant="incorrect" icon={XIcon} />
28+
<Label htmlFor="basic-checkbox-incorrect">
29+
Accept terms and conditions (Incorrect variant)
30+
</Label>
31+
</div>
32+
<div className="flex gap-x-4">
33+
<Checkbox defaultChecked id="basic-checkbox-correct" variant="correct" icon={CheckIcon} />
34+
<Label htmlFor="basic-checkbox-correct">
35+
Accept terms and conditions (Correct variant)
36+
</Label>
37+
</div>
38+
<Typography type="body" weight="semibold">
39+
Rounded
40+
</Typography>
41+
<div className="flex gap-x-4">
42+
<Checkbox defaultChecked shape="rounded" id="rounded-basic-checkbox" />
43+
<Label htmlFor="rounded-basic-checkbox">
44+
Accept terms and conditions (Default variant)
45+
</Label>
46+
</div>
47+
<div className="flex gap-x-4">
48+
<Checkbox
49+
defaultChecked
50+
shape="rounded"
51+
id="rounded-basic-checkbox-undetermine"
52+
icon={MinusIcon}
53+
/>
54+
<Label htmlFor="rounded-basic-checkbox-undetermine">
55+
Accept terms and conditions (Default gvariant with undetermine icon)
56+
</Label>
57+
</div>
58+
<div className="flex gap-x-4">
59+
<Checkbox
60+
defaultChecked
61+
shape="rounded"
62+
id="rounded-basic-checkbox-incorrect"
63+
variant="incorrect"
64+
icon={XIcon}
65+
/>
66+
<Label htmlFor="rounded-basic-checkbox-incorrect">
67+
Accept terms and conditions (Incorrect variant)
68+
</Label>
69+
</div>
70+
<div className="flex gap-x-4">
71+
<Checkbox
72+
defaultChecked
73+
shape="rounded"
74+
id="rounded-basic-checkbox-correct"
75+
variant="correct"
76+
icon={CheckIcon}
77+
/>
78+
<Label htmlFor="rounded-basic-checkbox-correct">
79+
Accept terms and conditions (Correct variant)
80+
</Label>
81+
</div>
82+
</div>
83+
)
84+
}
85+
86+
// Checked State
87+
function CheckedCheckbox() {
88+
const [checked, setChecked] = React.useState(true)
89+
90+
return (
91+
<div className="flex items-center space-x-2">
92+
<Checkbox
93+
id="checked-checkbox"
94+
checked={checked}
95+
onCheckedChange={(value) => {
96+
setChecked(value === true || false)
97+
}}
98+
/>
99+
<Label htmlFor="checked-checkbox">This is checked by default</Label>
100+
</div>
101+
)
102+
}
103+
104+
// Disabled Checkbox
105+
function DisabledCheckbox() {
106+
return (
107+
<div className="flex flex-col gap-4">
108+
<div className="flex items-center space-x-2">
109+
<Checkbox id="disabled-unchecked" disabled />
110+
<Label htmlFor="disabled-unchecked">Disabled unchecked</Label>
111+
</div>
112+
<div className="flex items-center space-x-2">
113+
<Checkbox id="disabled-checked" disabled checked />
114+
<Label htmlFor="disabled-checked">Disabled checked</Label>
115+
</div>
116+
</div>
117+
)
118+
}
119+
120+
// Checkbox with Error State
121+
function CheckboxWithError() {
122+
return (
123+
<div className="flex flex-col gap-4">
124+
<div className="flex items-center space-x-2">
125+
<Checkbox id="error-checkbox" aria-invalid="true" />
126+
<Label htmlFor="error-checkbox">This field has an error</Label>
127+
</div>
128+
<Typography type="caption" className="text-destructive">
129+
You must accept the terms to continue
130+
</Typography>
131+
</div>
132+
)
133+
}
134+
135+
// Checkbox Group
136+
function CheckboxGroup() {
137+
const [items, setItems] = React.useState({
138+
apples: false,
139+
oranges: false,
140+
bananas: false,
141+
})
142+
143+
return (
144+
<div className="flex flex-col gap-4">
145+
<Label>Select your favorite fruits:</Label>
146+
<div className="flex flex-col gap-2">
147+
<div className="flex items-center space-x-2">
148+
<Checkbox
149+
id="apples"
150+
checked={items.apples}
151+
onCheckedChange={(checked) => setItems({ ...items, apples: checked as boolean })}
152+
/>
153+
<Label htmlFor="apples">Apples</Label>
154+
</div>
155+
<div className="flex items-center space-x-2">
156+
<Checkbox
157+
id="oranges"
158+
checked={items.oranges}
159+
onCheckedChange={(checked) => setItems({ ...items, oranges: checked as boolean })}
160+
/>
161+
<Label htmlFor="oranges">Oranges</Label>
162+
</div>
163+
<div className="flex items-center space-x-2">
164+
<Checkbox
165+
id="bananas"
166+
checked={items.bananas}
167+
onCheckedChange={(checked) => setItems({ ...items, bananas: checked as boolean })}
168+
/>
169+
<Label htmlFor="bananas">Bananas</Label>
170+
</div>
171+
</div>
172+
</div>
173+
)
174+
}
175+
176+
// Controlled Checkbox
177+
function ControlledCheckbox() {
178+
const [agreed, setAgreed] = React.useState(false)
179+
180+
return (
181+
<div className="flex flex-col gap-4">
182+
<div className="flex items-center space-x-4">
183+
<Checkbox
184+
id="controlled"
185+
checked={agreed}
186+
onCheckedChange={(value) => setAgreed(value === true || false)}
187+
/>
188+
<Label htmlFor="controlled">
189+
I agree to the terms and conditions. I understand that this is a binding agreement.
190+
</Label>
191+
</div>
192+
<Typography type="caption" className="text-muted-foreground">
193+
Status: {agreed ? 'Agreed' : 'Not agreed'}
194+
</Typography>
195+
</div>
196+
)
197+
}
198+
199+
// Checkbox with Description
200+
function CheckboxWithDescription() {
201+
return (
202+
<div className="flex flex-col gap-4">
203+
<div className="flex items-start space-x-2">
204+
<Checkbox id="newsletter" className="mt-1" />
205+
<div className="grid gap-1.5 leading-none">
206+
<Label htmlFor="newsletter" className="leading-5">
207+
Subscribe to newsletter
208+
</Label>
209+
<Typography type="caption" className="text-muted-foreground">
210+
Get notified about new features and updates.
211+
</Typography>
212+
</div>
213+
</div>
214+
</div>
215+
)
216+
}
217+
218+
// Custom Styled Checkbox
219+
function CustomStyledCheckbox() {
220+
return (
221+
<div className="flex items-center space-x-2">
222+
<Checkbox
223+
id="custom-checkbox"
224+
className="border-primary data-[state=checked]:bg-primary data-[state=checked]:border-primary"
225+
/>
226+
<Label htmlFor="custom-checkbox" className="text-primary">
227+
Custom styled checkbox
228+
</Label>
229+
</div>
230+
)
231+
}
232+
233+
// All Checkbox States
234+
function AllCheckboxStates() {
235+
return (
236+
<div className="flex flex-col gap-4">
237+
<div className="flex items-center space-x-2">
238+
<Checkbox id="unchecked" />
239+
<Label htmlFor="unchecked">Unchecked</Label>
240+
</div>
241+
<div className="flex items-center space-x-2">
242+
<Checkbox id="checked" checked />
243+
<Label htmlFor="checked">Checked</Label>
244+
</div>
245+
<div className="flex items-center space-x-2">
246+
<Checkbox id="indeterminate" checked="indeterminate" />
247+
<Label htmlFor="indeterminate">Indeterminate</Label>
248+
</div>
249+
<div className="flex items-center space-x-2">
250+
<Checkbox id="focused" />
251+
<Label htmlFor="focused">Focused (click to see)</Label>
252+
</div>
253+
</div>
254+
)
255+
}
256+
257+
export function CheckboxSection() {
258+
return (
259+
<>
260+
<div className="grid gap-8">
261+
<PlaygroundCard title="Basic Checkbox" categoryTitle="Component">
262+
<Typography type="body" className="text-muted-foreground mb-4">
263+
A basic checkbox input with a label.
264+
</Typography>
265+
<div className="p-4 bg-background w-full rounded-lg">
266+
<BasicCheckbox />
267+
</div>
268+
</PlaygroundCard>
269+
270+
<PlaygroundCard title="Checked State" categoryTitle="Component">
271+
<Typography type="body" className="text-muted-foreground mb-4">
272+
A checkbox that is checked by default with controlled state.
273+
</Typography>
274+
<div className="p-4 bg-background w-full rounded-lg">
275+
<CheckedCheckbox />
276+
</div>
277+
</PlaygroundCard>
278+
279+
<PlaygroundCard title="Disabled Checkbox" categoryTitle="Component">
280+
<Typography type="body" className="text-muted-foreground mb-4">
281+
Checkbox in disabled state, both checked and unchecked.
282+
</Typography>
283+
<div className="p-4 bg-background w-full rounded-lg">
284+
<DisabledCheckbox />
285+
</div>
286+
</PlaygroundCard>
287+
288+
<PlaygroundCard title="Checkbox with Error State" categoryTitle="Component">
289+
<Typography type="body" className="text-muted-foreground mb-4">
290+
Checkbox in error state with validation feedback.
291+
</Typography>
292+
<div className="p-4 bg-background w-full rounded-lg">
293+
<CheckboxWithError />
294+
</div>
295+
</PlaygroundCard>
296+
297+
<PlaygroundCard title="Checkbox Group" categoryTitle="Component">
298+
<Typography type="body" className="text-muted-foreground mb-4">
299+
Multiple checkboxes used together in a group.
300+
</Typography>
301+
<div className="p-4 bg-background w-full rounded-lg">
302+
<CheckboxGroup />
303+
</div>
304+
</PlaygroundCard>
305+
306+
<PlaygroundCard title="Controlled Checkbox" categoryTitle="Component">
307+
<Typography type="body" className="text-muted-foreground mb-4">
308+
Checkbox with controlled state and real-time status feedback.
309+
</Typography>
310+
<div className="p-4 bg-background w-full rounded-lg">
311+
<ControlledCheckbox />
312+
</div>
313+
</PlaygroundCard>
314+
315+
<PlaygroundCard title="Checkbox with Description" categoryTitle="Component">
316+
<Typography type="body" className="text-muted-foreground mb-4">
317+
Checkbox with additional descriptive text.
318+
</Typography>
319+
<div className="p-4 bg-background w-full rounded-lg">
320+
<CheckboxWithDescription />
321+
</div>
322+
</PlaygroundCard>
323+
324+
<PlaygroundCard title="Custom Styled Checkbox" categoryTitle="Component">
325+
<Typography type="body" className="text-muted-foreground mb-4">
326+
Checkbox with custom styling for checked and unchecked states.
327+
</Typography>
328+
<div className="p-4 bg-background w-full rounded-lg">
329+
<CustomStyledCheckbox />
330+
</div>
331+
</PlaygroundCard>
332+
333+
<PlaygroundCard title="All Checkbox States" categoryTitle="Component">
334+
<Typography type="body" className="text-muted-foreground mb-4">
335+
Demonstration of all possible checkbox states.
336+
</Typography>
337+
<div className="p-4 bg-background w-full rounded-lg">
338+
<AllCheckboxStates />
339+
</div>
340+
</PlaygroundCard>
341+
</div>
342+
</>
343+
)
344+
}

0 commit comments

Comments
 (0)