diff --git a/packages/docs/examples/select-controlled.tsx b/packages/docs/examples/select-controlled.tsx new file mode 100644 index 0000000000..9cbce0b776 --- /dev/null +++ b/packages/docs/examples/select-controlled.tsx @@ -0,0 +1,17 @@ +import { Select, SelectItem } from '@vtex/shoreline' +import { useState } from 'react' + +export default function Example() { + const [value, setValue] = useState('Apple') + + return ( +
+
Selected: {value}
+ +
+ ) +} diff --git a/packages/docs/examples/select-custom-placeholder.tsx b/packages/docs/examples/select-custom-placeholder.tsx new file mode 100644 index 0000000000..5891eff81c --- /dev/null +++ b/packages/docs/examples/select-custom-placeholder.tsx @@ -0,0 +1,15 @@ +import { Select, SelectItem } from '@vtex/shoreline' + +export default function Example() { + return ( + + ) +} diff --git a/packages/docs/examples/select-i18n.tsx b/packages/docs/examples/select-i18n.tsx new file mode 100644 index 0000000000..574ac51ebe --- /dev/null +++ b/packages/docs/examples/select-i18n.tsx @@ -0,0 +1,13 @@ +import { LocaleProvider, Select, SelectItem } from '@vtex/shoreline' + +export default function Example() { + return ( + + + + ) +} diff --git a/packages/docs/examples/select-multiselect.tsx b/packages/docs/examples/select-multiselect.tsx new file mode 100644 index 0000000000..7526ff2bff --- /dev/null +++ b/packages/docs/examples/select-multiselect.tsx @@ -0,0 +1,14 @@ +import { Select, SelectItem } from '@vtex/shoreline' +import { useState } from 'react' + +export default function Example() { + const [value, setValue] = useState([]) + + return ( + + ) +} diff --git a/packages/docs/examples/select-object-items.tsx b/packages/docs/examples/select-object-items.tsx new file mode 100644 index 0000000000..9ed3d53c62 --- /dev/null +++ b/packages/docs/examples/select-object-items.tsx @@ -0,0 +1,37 @@ +import { + SelectItem, + SelectPopover, + SelectProvider, + SelectTrigger, +} from '@vtex/shoreline' +import { useState } from 'react' + +const fruitList = [ + { label: 'Apple 🍎', id: 'id_1' }, + { label: 'Banana 🍌', id: 'id_2' }, + { label: 'Cherry 🍒', id: 'id_3' }, + { label: 'Grape 🍇', id: 'id_4' }, + { label: 'Green apple 🍏', id: 'id_5' }, +] + +export default function Example() { + const [value, setValue] = useState('Apple') + const placeholder = 'Select a fruit' + + return ( +
+ + + {fruitList.find((bind) => bind.id === value)?.label || placeholder} + + + {fruitList.map((binding) => ( + + {binding.label} + + ))} + + +
+ ) +} diff --git a/packages/docs/examples/select-search.tsx b/packages/docs/examples/select-search.tsx new file mode 100644 index 0000000000..6c23a1bdc1 --- /dev/null +++ b/packages/docs/examples/select-search.tsx @@ -0,0 +1,101 @@ +import { + ComboboxInput, + ComboboxItem, + ComboboxList, + ComboboxProvider, + SelectItem, + SelectItemCheck, + SelectPopover, + SelectProvider, + SelectTrigger, +} from '@vtex/shoreline' +import { startTransition, useMemo, useState } from 'react' +import { matchSorter } from 'match-sorter' + +const fruitList = [ + 'Apple', + 'Bacon', + 'Banana', + 'Broccoli', + 'Burger', + 'Cake', + 'Candy', + 'Carrot', + 'Cherry', + 'Chocolate', + 'Cookie', + 'Cucumber', + 'Donut', + 'Fish', + 'Fries', + 'Grape', + 'Green apple', + 'Hot dog', + 'Ice cream', + 'Kiwi', + 'Lemon', + 'Lollipop', + 'Onion', + 'Orange', + 'Pasta', + 'Pineapple', + 'Pizza', + 'Potato', + 'Salad', + 'Sandwich', + 'Steak', + 'Strawberry', + 'Tomato', + 'Watermelon', +] + +export default function Example() { + const [value, setValue] = useState('') + const [searchValue, setSearchValue] = useState('') + const placeholder = 'Select a fruit' + + const matches = useMemo(() => { + return matchSorter(fruitList, searchValue) + }, [searchValue]) + + return ( + { + startTransition(() => { + setSearchValue(value) + }) + }} + > +
+ + + {value || placeholder} + + +
+ +
+ + {matches.length ? ( + matches.map((value) => ( + + + {value} + + + )) + ) : ( +
No results found
+ )} + + + +
+ + ) +} diff --git a/packages/docs/examples/select-states.tsx b/packages/docs/examples/select-states.tsx new file mode 100644 index 0000000000..b568ee6cd1 --- /dev/null +++ b/packages/docs/examples/select-states.tsx @@ -0,0 +1,60 @@ +import { + Field, + FieldDescription, + FieldError, + Label, + Select, + SelectItem, + Stack, +} from '@vtex/shoreline' + +export default function Example() { + return ( + + + + + + + + + Short description + + + + + Short error message + + + + + Short description + Short error message + + + + + + + ) +} diff --git a/packages/docs/pages/components/select.mdx b/packages/docs/pages/components/select.mdx index 7d4bab0694..ac713dd4af 100644 --- a/packages/docs/pages/components/select.mdx +++ b/packages/docs/pages/components/select.mdx @@ -4,6 +4,34 @@ +## States + + + +## Controlled + + + +## Localized + + + +## Custom placeholder + + + +## Filter with multiselect + + + +## With search + + + +## With label different from value + + + ## Optional props