docs(select): add more examples

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<string | string[]>('Apple')
+
+  return (
+    <div>
+      <div>Selected: {value}</div>
+      <Select value={value} setValue={setValue}>
+        <SelectItem value="Apple">Apple</SelectItem>
+        <SelectItem value="Banana">Banana</SelectItem>
+        <SelectItem value="Grape">Grape</SelectItem>
+      </Select>
+    </div>
+  )
+}

packages/docs/examples/select-custom-placeholder.tsx

@@ -0,0 +1,15 @@
+import { Select, SelectItem } from '@vtex/shoreline'
+
+export default function Example() {
+  return (
+    <Select
+      messages={{
+        placeholder: 'Select a fruit from the list',
+      }}
+    >
+      <SelectItem value="Apple">Apple</SelectItem>
+      <SelectItem value="Banana">Banana</SelectItem>
+      <SelectItem value="Grape">Grape</SelectItem>
+    </Select>
+  )
+}

packages/docs/examples/select-i18n.tsx

@@ -0,0 +1,13 @@
+import { LocaleProvider, Select, SelectItem } from '@vtex/shoreline'
+
+export default function Example() {
+  return (
+    <LocaleProvider locale="ja-JP">
+      <Select>
+        <SelectItem value="りんご">りんご</SelectItem>
+        <SelectItem value="バナナ">バナナ</SelectItem>
+        <SelectItem value="葡萄">葡萄</SelectItem>
+      </Select>
+    </LocaleProvider>
+  )
+}

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<string | string[]>([])
+
+  return (
+    <Select value={value} setValue={setValue}>
+      <SelectItem value="Apple">Apple</SelectItem>
+      <SelectItem value="Banana">Banana</SelectItem>
+      <SelectItem value="Grape">Grape</SelectItem>
+    </Select>
+  )
+}

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<string | string[]>('Apple')
+  const placeholder = 'Select a fruit'
+
+  return (
+    <div data-sl-select>
+      <SelectProvider value={value} setValue={setValue}>
+        <SelectTrigger data-sl-select-button>
+          {fruitList.find((bind) => bind.id === value)?.label || placeholder}
+        </SelectTrigger>
+        <SelectPopover sameWidth unmountOnHide hideOnInteractOutside gutter={4}>
+          {fruitList.map((binding) => (
+            <SelectItem key={binding.id} value={binding.id}>
+              {binding.label}
+            </SelectItem>
+          ))}
+        </SelectPopover>
+      </SelectProvider>
+    </div>
+  )
+}

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<string[]>(() => {
+    return matchSorter(fruitList, searchValue)
+  }, [searchValue])
+
+  return (
+    <ComboboxProvider
+      resetValueOnHide
+      setValue={(value) => {
+        startTransition(() => {
+          setSearchValue(value)
+        })
+      }}
+    >
+      <div data-sl-select>
+        <SelectProvider value={value} setValue={setValue}>
+          <SelectTrigger data-sl-select-button>
+            {value || placeholder}
+          </SelectTrigger>
+          <SelectPopover>
+            <div>
+              <ComboboxInput
+                data-sl-search
+                autoSelect
+                placeholder="Search..."
+              />
+            </div>
+            <ComboboxList>
+              {matches.length ? (
+                matches.map((value) => (
+                  <SelectItem key={value} value={value} asChild>
+                    <ComboboxItem>
+                      {value} <SelectItemCheck />
+                    </ComboboxItem>
+                  </SelectItem>
+                ))
+              ) : (
+                <div>No results found</div>
+              )}
+            </ComboboxList>
+          </SelectPopover>
+        </SelectProvider>
+      </div>
+    </ComboboxProvider>
+  )
+}

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 (
+    <Stack>
+      <Field>
+        <Label>Plain select</Label>
+        <Select>
+          <SelectItem value="Apple">Apple</SelectItem>
+          <SelectItem value="Banana">Banana</SelectItem>
+          <SelectItem value="Grape">Grape</SelectItem>
+        </Select>
+      </Field>
+      <Field>
+        <Label>With description</Label>
+        <Select>
+          <SelectItem value="Apple">Apple</SelectItem>
+          <SelectItem value="Banana">Banana</SelectItem>
+          <SelectItem value="Grape">Grape</SelectItem>
+        </Select>
+        <FieldDescription>Short description</FieldDescription>
+      </Field>
+      <Field error>
+        <Label>With error</Label>
+        <Select>
+          <SelectItem value="Apple">Apple</SelectItem>
+          <SelectItem value="Banana">Banana</SelectItem>
+          <SelectItem value="Grape">Grape</SelectItem>
+        </Select>
+        <FieldError>Short error message</FieldError>
+      </Field>
+      <Field error>
+        <Label>With error and description</Label>
+        <Select>
+          <SelectItem value="Apple">Apple</SelectItem>
+          <SelectItem value="Banana">Banana</SelectItem>
+          <SelectItem value="Grape">Grape</SelectItem>
+        </Select>
+        <FieldDescription>Short description</FieldDescription>
+        <FieldError>Short error message</FieldError>
+      </Field>
+      <Field>
+        <Label>Disabled</Label>
+        <Select disabled>
+          <SelectItem value="Apple">Apple</SelectItem>
+          <SelectItem value="Banana">Banana</SelectItem>
+          <SelectItem value="Grape">Grape</SelectItem>
+        </Select>
+      </Field>
+    </Stack>
+  )
+}

packages/docs/pages/components/select.mdx

@@ -4,6 +4,34 @@
 
 <Preview name="select" />
 
+## States
+
+<Preview name="select-states" />
+
+## Controlled
+
+<Preview name="select-controlled" />
+
+## Localized
+
+<Preview name="select-i18n" />
+
+## Custom placeholder
+
+<Preview name="select-custom-placeholder" />
+
+## Filter with multiselect
+
+<Preview name="select-multiselect" />
+
+## With search
+
+<Preview name="select-search" />
+
+## With label different from value
+
+<Preview name="select-object-items" />
+
 ## Optional props
 
 <PropsDocs name="select" />