Skip to content

Commit 3c1f29e

Browse files
valoriecarlijaikamat
valoriecarli
authored and
jaikamat
committed
chore(docs): adjust code examples
1 parent e922b59 commit 3c1f29e

File tree

3 files changed

+106
-60
lines changed

3 files changed

+106
-60
lines changed

‎apps/docs/package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"react-dom": "catalog:react",
4444
"react-intl": "catalog:react",
4545
"react-live": "^4.1.7",
46+
"react-stately": "catalog:react",
4647
"react-router": "^7.12.0",
4748
"react-router-dom": "^7.11.0",
4849
"react-syntax-highlighter": "^15.6.6",
@@ -52,6 +53,7 @@
5253
"remark-mark-highlight": "^0.1.1",
5354
"slug": "^11.0.1",
5455
"to-vfile": "^8.0.0",
56+
"use-debounce": "^10.0.0",
5557
"vite-plugin-markdown": "^2.2.0",
5658
"vite-tsconfig-paths": "^5.1.3",
5759
"zod": "^4.1.12"

‎apps/docs/src/components/document-renderer/components/live-code-editor/live-code-editor.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
getLocalTimeZone,
1414
today,
1515
} from "@internationalized/date";
16+
import { useAsyncList } from "react-stately";
17+
import { useDebouncedCallback } from "use-debounce";
1618

1719
const baseHooks = {
1820
useState,
@@ -33,6 +35,8 @@ const scope = {
3335
parseZonedDateTime,
3436
getLocalTimeZone,
3537
today,
38+
useAsyncList,
39+
useDebouncedCallback,
3640
};
3741

3842
const removeImportStatements = (code: string) => {

‎packages/nimbus/src/components/combobox/combobox.mdx‎

Lines changed: 100 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -47,25 +47,35 @@ const App = () => {
4747
return (
4848
<Stack direction="horizontal" gap="400" alignItems="flex-start">
4949
<ComboBox.Root size="md" items={options} placeholder="Search...">
50-
{(item) => (
51-
<ComboBox.Option id={item.id} textValue={item.name}>
52-
<Stack gap="100">
53-
<Text textStyle="sm">{item.name}</Text>
54-
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
55-
</Stack>
56-
</ComboBox.Option>
57-
)}
50+
<ComboBox.Trigger />
51+
<ComboBox.Popover>
52+
<ComboBox.ListBox>
53+
{(item) => (
54+
<ComboBox.Option id={item.id} textValue={item.name}>
55+
<Stack gap="100">
56+
<Text textStyle="sm">{item.name}</Text>
57+
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
58+
</Stack>
59+
</ComboBox.Option>
60+
)}
61+
</ComboBox.ListBox>
62+
</ComboBox.Popover>
5863
</ComboBox.Root>
5964
6065
<ComboBox.Root size="sm" items={options} placeholder="Search...">
61-
{(item) => (
62-
<ComboBox.Option id={item.id} textValue={item.name}>
63-
<Stack gap="100">
64-
<Text textStyle="sm">{item.name}</Text>
65-
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
66-
</Stack>
67-
</ComboBox.Option>
68-
)}
66+
<ComboBox.Trigger />
67+
<ComboBox.Popover>
68+
<ComboBox.ListBox>
69+
{(item) => (
70+
<ComboBox.Option id={item.id} textValue={item.name}>
71+
<Stack gap="100">
72+
<Text textStyle="sm">{item.name}</Text>
73+
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
74+
</Stack>
75+
</ComboBox.Option>
76+
)}
77+
</ComboBox.ListBox>
78+
</ComboBox.Popover>
6979
</ComboBox.Root>
7080
</Stack>
7181
)
@@ -87,25 +97,35 @@ const App = () => {
8797
return (
8898
<Stack direction="horizontal" gap="400" alignItems="flex-start">
8999
<ComboBox.Root variant="solid" items={options} placeholder="Search...">
90-
{(item) => (
91-
<ComboBox.Option id={item.id} textValue={item.name}>
92-
<Stack gap="100">
93-
<Text textStyle="sm">{item.name}</Text>
94-
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
95-
</Stack>
96-
</ComboBox.Option>
97-
)}
100+
<ComboBox.Trigger />
101+
<ComboBox.Popover>
102+
<ComboBox.ListBox>
103+
{(item) => (
104+
<ComboBox.Option id={item.id} textValue={item.name}>
105+
<Stack gap="100">
106+
<Text textStyle="sm">{item.name}</Text>
107+
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
108+
</Stack>
109+
</ComboBox.Option>
110+
)}
111+
</ComboBox.ListBox>
112+
</ComboBox.Popover>
98113
</ComboBox.Root>
99114
100115
<ComboBox.Root variant="ghost" items={options} placeholder="Search...">
101-
{(item) => (
102-
<ComboBox.Option id={item.id} textValue={item.name}>
103-
<Stack gap="100">
104-
<Text textStyle="sm">{item.name}</Text>
105-
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
106-
</Stack>
107-
</ComboBox.Option>
108-
)}
116+
<ComboBox.Trigger />
117+
<ComboBox.Popover>
118+
<ComboBox.ListBox>
119+
{(item) => (
120+
<ComboBox.Option id={item.id} textValue={item.name}>
121+
<Stack gap="100">
122+
<Text textStyle="sm">{item.name}</Text>
123+
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
124+
</Stack>
125+
</ComboBox.Option>
126+
)}
127+
</ComboBox.ListBox>
128+
</ComboBox.Popover>
109129
</ComboBox.Root>
110130
</Stack>
111131
)
@@ -127,29 +147,39 @@ const App = () => {
127147
return (
128148
<Stack direction="horizontal" gap="400" alignItems="flex-start">
129149
<ComboBox.Root items={options} placeholder="Search...">
130-
{(item) => (
131-
<ComboBox.Option id={item.id} textValue={item.name}>
132-
<Stack gap="100">
133-
<Text textStyle="sm">{item.name}</Text>
134-
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
135-
</Stack>
136-
</ComboBox.Option>
137-
)}
150+
<ComboBox.Trigger />
151+
<ComboBox.Popover>
152+
<ComboBox.ListBox>
153+
{(item) => (
154+
<ComboBox.Option id={item.id} textValue={item.name}>
155+
<Stack gap="100">
156+
<Text textStyle="sm">{item.name}</Text>
157+
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
158+
</Stack>
159+
</ComboBox.Option>
160+
)}
161+
</ComboBox.ListBox>
162+
</ComboBox.Popover>
138163
</ComboBox.Root>
139-
164+
140165
<ComboBox.Root
141166
selectionMode="multiple"
142167
items={options}
143168
placeholder="Search..."
144169
>
170+
<ComboBox.Trigger />
171+
<ComboBox.Popover>
172+
<ComboBox.ListBox>
145173
{(item) => (
146174
<ComboBox.Option id={item.id} textValue={item.name}>
147175
<Stack gap="100">
148176
<Text textStyle="sm">{item.name}</Text>
149177
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
150178
</Stack>
151179
</ComboBox.Option>
152-
)}
180+
)}
181+
</ComboBox.ListBox>
182+
</ComboBox.Popover>
153183
</ComboBox.Root>
154184
</Stack>
155185
)
@@ -229,16 +259,21 @@ const App = () => {
229259
return <Text padding="300">No results found</Text>;
230260
}}
231261
>
232-
{(character) => (
233-
<ComboBox.Option textValue={character.name}>
234-
<Stack gap="100">
235-
<Text textStyle="sm">{character.name}</Text>
236-
<Text textStyle="xs" color="neutral.11">
237-
{character.gender} • Born {character.birth_year}
238-
</Text>
239-
</Stack>
240-
</ComboBox.Option>
241-
)}
262+
<ComboBox.Trigger />
263+
<ComboBox.Popover>
264+
<ComboBox.ListBox>
265+
{(character) => (
266+
<ComboBox.Option textValue={character.name}>
267+
<Stack gap="100">
268+
<Text textStyle="sm">{character.name}</Text>
269+
<Text textStyle="xs" color="neutral.11">
270+
{character.gender} • Born {character.birth_year}
271+
</Text>
272+
</Stack>
273+
</ComboBox.Option>
274+
)}
275+
</ComboBox.ListBox>
276+
</ComboBox.Popover>
242277
</ComboBox.Root>
243278
{error && <FormField.ErrorMessage>{error}</FormField.ErrorMessage>}
244279
</FormField.Root>
@@ -349,14 +384,19 @@ const App = () => {
349384
aria-label="Food category selection"
350385
isRequired
351386
>
352-
{(item) => (
353-
<ComboBox.Option id={item.id} textValue={item.name}>
354-
<Stack gap="100">
355-
<Text textStyle="sm">{item.name}</Text>
356-
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
357-
</Stack>
358-
</ComboBox.Option>
359-
)}
387+
<ComboBox.Trigger />
388+
<ComboBox.Popover>
389+
<ComboBox.ListBox>
390+
{(item) => (
391+
<ComboBox.Option id={item.id} textValue={item.name}>
392+
<Stack gap="100">
393+
<Text textStyle="sm">{item.name}</Text>
394+
<Text textStyle="xs" color="neutral.11">{item.description}</Text>
395+
</Stack>
396+
</ComboBox.Option>
397+
)}
398+
</ComboBox.ListBox>
399+
</ComboBox.Popover>
360400
</ComboBox.Root>
361401
)
362402
}

0 commit comments

Comments
 (0)