Skip to content

Commit 7433c6f

Browse files
trinhthinh388trinhthinh388
authored
feat: added select recipe (#199)
1 parent c720765 commit 7433c6f

File tree

9 files changed

+351
-27
lines changed

9 files changed

+351
-27
lines changed

‎docs/app/docs/(components)/select/apis.ts‎

Lines changed: 92 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,92 @@
1+
import { ComponentAPI } from "@/components/page";
2+
3+
export const selectAPIs: ComponentAPI[] = [
4+
{
5+
name: "open",
6+
type: "boolean"
7+
},
8+
{
9+
name: "defaultOpen",
10+
type: "boolean"
11+
},
12+
{
13+
name: "onOpenChange",
14+
type: "(open: boolean) => void"
15+
},
16+
{
17+
name: "name",
18+
type: "string"
19+
},
20+
{
21+
name: "size",
22+
type: ["sm", "md", "lg"],
23+
default: "md"
24+
},
25+
{
26+
name: "disabled",
27+
type: "boolean",
28+
default: "false"
29+
},
30+
{
31+
name: "error",
32+
type: "boolean",
33+
default: "false"
34+
},
35+
{
36+
name: "value",
37+
type: "string"
38+
},
39+
{
40+
name: "defaultValue",
41+
type: "string"
42+
},
43+
{
44+
name: "onValueChange",
45+
type: "(value: string) => void"
46+
},
47+
{
48+
name: "container",
49+
type: "HTMLElement",
50+
default: "window.document.body"
51+
},
52+
{
53+
name: "position",
54+
type: ["item-aligned", "popper"],
55+
default: "popper"
56+
},
57+
{
58+
name: "side",
59+
type: ["top", "right", "bottom", "left"],
60+
default: "bottom"
61+
},
62+
{
63+
name: "alignOffset",
64+
type: "number",
65+
default: "0"
66+
},
67+
{
68+
name: "avoidCollisions",
69+
type: "boolean",
70+
default: "true"
71+
}
72+
];
73+
74+
export const selectValueAPIs: ComponentAPI[] = [
75+
{
76+
name: "placeholder",
77+
type: "string"
78+
}
79+
];
80+
81+
export const selectItemAPIs: ComponentAPI[] = [
82+
{
83+
required: true,
84+
name: "value",
85+
type: "string"
86+
},
87+
{
88+
name: "disabled",
89+
type: "boolean",
90+
default: "false"
91+
}
92+
];

‎docs/app/docs/(components)/select/page.tsx‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,14 @@ import { ChevronsUpDownIcon } from "lucide-react";
55
import { Select } from "@brifui/components";
66
import { css } from "@brifui/styled/css";
77

8+
import { selectAPIs, selectItemAPIs, selectValueAPIs } from "./apis";
9+
import {
10+
customIconSnippet,
11+
disabledSnippet,
12+
errorSnippet,
13+
sizeSnippet
14+
} from "./snippet";
15+
816
export default function SelectDocs() {
917
return (
1018
<Page>
@@ -66,7 +74,7 @@ export default function SelectDocs() {
6674
</Select.Content>
6775
</Select>
6876
</Page.Preview>
69-
<Page.CodePreview>HIHI</Page.CodePreview>
77+
<Page.CodePreview>{sizeSnippet}</Page.CodePreview>
7078
</Page.Section>
7179

7280
<Page.Section title="Custom icon">
@@ -131,7 +139,7 @@ export default function SelectDocs() {
131139
</Select.Content>
132140
</Select>
133141
</Page.Preview>
134-
<Page.CodePreview>HIHI</Page.CodePreview>
142+
<Page.CodePreview>{customIconSnippet}</Page.CodePreview>
135143
</Page.Section>
136144

137145
<Page.Section title="Disabled">
@@ -189,7 +197,7 @@ export default function SelectDocs() {
189197
</Select.Content>
190198
</Select>
191199
</Page.Preview>
192-
<Page.CodePreview>HIHI</Page.CodePreview>
200+
<Page.CodePreview>{disabledSnippet}</Page.CodePreview>
193201
</Page.Section>
194202

195203
<Page.Section title="Error">
@@ -245,7 +253,18 @@ export default function SelectDocs() {
245253
</Select.Content>
246254
</Select>
247255
</Page.Preview>
248-
<Page.CodePreview>HIHI</Page.CodePreview>
256+
<Page.CodePreview>{errorSnippet}</Page.CodePreview>
257+
</Page.Section>
258+
259+
<Page.Section shadow={false} title="API Reference">
260+
<Page.APIReference title="Select" apis={selectAPIs} />
261+
<Page.APIReference title="Trigger" tag="button" />
262+
<Page.APIReference title="Value" tag="span" apis={selectValueAPIs} />
263+
<Page.APIReference title="Icon" />
264+
<Page.APIReference title="Group" />
265+
<Page.APIReference title="Content" />
266+
<Page.APIReference title="Item" apis={selectItemAPIs} />
267+
<Page.APIReference title="ItemText" tag="label" />
249268
</Page.Section>
250269
</Page>
251270
);

‎docs/app/docs/(components)/select/snippet.ts‎

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
export const sizeSnippet = `import { Select } from "@brifui/components"
2+
3+
const Example = () => (
4+
<>
5+
<Select size="sm">
6+
<Select.Trigger className={css({ w: "100%" })}>
7+
<Select.Value placeholder="Choose option" />
8+
</Select.Trigger>
9+
<Select.Content>
10+
<Select.Item value="1">
11+
<Select.ItemText>Option 1</Select.ItemText>
12+
</Select.Item>
13+
<Select.Item value="2">
14+
<Select.ItemText>Option 2</Select.ItemText>
15+
</Select.Item>
16+
</Select.Content>
17+
</Select>
18+
19+
<Select size="md">
20+
<Select.Trigger className={css({ w: "100%" })}>
21+
<Select.Value placeholder="Choose option" />
22+
</Select.Trigger>
23+
<Select.Content>
24+
<Select.Item value="1">
25+
<Select.ItemText>Option 1</Select.ItemText>
26+
</Select.Item>
27+
<Select.Item value="2">
28+
<Select.ItemText>Option 2</Select.ItemText>
29+
</Select.Item>
30+
</Select.Content>
31+
</Select>
32+
33+
<Select size="lg">
34+
<Select.Trigger className={css({ w: "100%" })}>
35+
<Select.Value placeholder="Choose option" />
36+
</Select.Trigger>
37+
<Select.Content>
38+
<Select.Item value="1">
39+
<Select.ItemText>Option 1</Select.ItemText>
40+
</Select.Item>
41+
<Select.Item value="2">
42+
<Select.ItemText>Option 2</Select.ItemText>
43+
</Select.Item>
44+
</Select.Content>
45+
</Select>
46+
</>
47+
)
48+
`;
49+
50+
export const customIconSnippet = `import { Select } from "@brifui/components"
51+
import { ChevronsUpDownIcon } from "lucide-react"
52+
53+
const Example = () => (
54+
<>
55+
<Select size="sm">
56+
<Select.Trigger className={css({ w: "100%" })}>
57+
<Select.Value placeholder="Choose option" />
58+
<Select.Icon>
59+
<ChevronsUpDownIcon size={16} />
60+
</Select.Icon>
61+
</Select.Trigger>
62+
<Select.Content>
63+
<Select.Item value="1">
64+
<Select.ItemText>Option 1</Select.ItemText>
65+
</Select.Item>
66+
<Select.Item value="2">
67+
<Select.ItemText>Option 2</Select.ItemText>
68+
</Select.Item>
69+
</Select.Content>
70+
</Select>
71+
72+
<Select size="md">
73+
<Select.Trigger className={css({ w: "100%" })}>
74+
<Select.Value placeholder="Choose option" />
75+
<Select.Icon>
76+
<ChevronsUpDownIcon size={16} />
77+
</Select.Icon>
78+
</Select.Trigger>
79+
<Select.Content>
80+
<Select.Item value="1">
81+
<Select.ItemText>Option 1</Select.ItemText>
82+
</Select.Item>
83+
<Select.Item value="2">
84+
<Select.ItemText>Option 2</Select.ItemText>
85+
</Select.Item>
86+
</Select.Content>
87+
</Select>
88+
89+
<Select size="lg">
90+
<Select.Trigger className={css({ w: "100%" })}>
91+
<Select.Value placeholder="Choose option" />
92+
<Select.Icon>
93+
<ChevronsUpDownIcon size={18} />
94+
</Select.Icon>
95+
</Select.Trigger>
96+
<Select.Content>
97+
<Select.Item value="1">
98+
<Select.ItemText>Option 1</Select.ItemText>
99+
</Select.Item>
100+
<Select.Item value="2">
101+
<Select.ItemText>Option 2</Select.ItemText>
102+
</Select.Item>
103+
</Select.Content>
104+
</Select>
105+
</>
106+
)`;
107+
108+
export const disabledSnippet = `import { Select } from "@brifui/components"
109+
110+
const Example = () => (
111+
<>
112+
<Select disabled size="sm">
113+
<Select.Trigger className={css({ w: "100%" })}>
114+
<Select.Value placeholder="Choose option" />
115+
</Select.Trigger>
116+
<Select.Content>
117+
<Select.Item value="1">
118+
<Select.ItemText>Option 1</Select.ItemText>
119+
</Select.Item>
120+
<Select.Item value="2">
121+
<Select.ItemText>Option 2</Select.ItemText>
122+
</Select.Item>
123+
</Select.Content>
124+
<Page.CodePreview>HIHI</Page.CodePreview>
125+
</Select>
126+
127+
<Select disabled size="md">
128+
<Select.Trigger className={css({ w: "100%" })}>
129+
<Select.Value placeholder="Choose option" />
130+
</Select.Trigger>
131+
<Select.Content>
132+
<Select.Item value="1">
133+
<Select.ItemText>Option 1</Select.ItemText>
134+
</Select.Item>
135+
<Select.Item value="2">
136+
<Select.ItemText>Option 2</Select.ItemText>
137+
</Select.Item>
138+
</Select.Content>
139+
<Page.CodePreview>HIHI</Page.CodePreview>
140+
</Select>
141+
142+
<Select disabled size="lg">
143+
<Select.Trigger className={css({ w: "100%" })}>
144+
<Select.Value placeholder="Choose option" />
145+
</Select.Trigger>
146+
<Select.Content>
147+
<Select.Item value="1">
148+
<Select.ItemText>Option 1</Select.ItemText>
149+
</Select.Item>
150+
<Select.Item value="2">
151+
<Select.ItemText>Option 2</Select.ItemText>
152+
</Select.Item>
153+
</Select.Content>
154+
</Select>
155+
</>
156+
)`;
157+
158+
export const errorSnippet = `import { Select } from "@brifui/components"
159+
160+
const Example = () => (
161+
<>
162+
<Select error size="sm">
163+
<Select.Trigger className={css({ w: "100%" })}>
164+
<Select.Value placeholder="Choose option" />
165+
</Select.Trigger>
166+
<Select.Content>
167+
<Select.Item value="1">
168+
<Select.ItemText>Option 1</Select.ItemText>
169+
</Select.Item>
170+
<Select.Item value="2">
171+
<Select.ItemText>Option 2</Select.ItemText>
172+
</Select.Item>
173+
</Select.Content>
174+
</Select>
175+
176+
<Select error size="md">
177+
<Select.Trigger className={css({ w: "100%" })}>
178+
<Select.Value placeholder="Choose option" />
179+
</Select.Trigger>
180+
<Select.Content>
181+
<Select.Item value="1">
182+
<Select.ItemText>Option 1</Select.ItemText>
183+
</Select.Item>
184+
<Select.Item value="2">
185+
<Select.ItemText>Option 2</Select.ItemText>
186+
</Select.Item>
187+
</Select.Content>
188+
</Select>
189+
190+
<Select error size="lg">
191+
<Select.Trigger className={css({ w: "100%" })}>
192+
<Select.Value placeholder="Choose option" />
193+
</Select.Trigger>
194+
<Select.Content>
195+
<Select.Item value="1">
196+
<Select.ItemText>Option 1</Select.ItemText>
197+
</Select.Item>
198+
<Select.Item value="2">
199+
<Select.ItemText>Option 2</Select.ItemText>
200+
</Select.Item>
201+
</Select.Content>
202+
</Select>
203+
</>
204+
)`;

‎packages/components/select/src/context.tsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
11
"use client";
22

33
import React from "react";
4-
5-
import { SelectVariantProps } from "./variants";
4+
import { SelectVariantProps } from "@brifui/styled/recipes";
65

76
export type SelectContextType = Pick<
87
NonNullable<SelectVariantProps>,

0 commit comments

Comments
 (0)