refactor: examples and stories

Author: segunadebayo

apps/compositions/src/examples/combobox-multi-with-replace-selection-behavior.tsx

@@ -1,21 +1,18 @@
 "use client"
 
 import {
-  Badge,
   Box,
   Combobox,
   Heading,
   Stack,
   Text,
-  createListCollection,
+  useFilter,
+  useListCollection,
 } from "@chakra-ui/react"
-import { useState } from "react"
 
-const companies = ["Apple", "Amazon", "Meta", "Netflix", "Google"]
-
-export const ComboboxSelectionBehavior = () => {
+export const ComboboxWithSelectionBehavior = () => {
   return (
-    <Stack gap={8} p={4}>
+    <Stack gap="8" p="4">
       <ComboboxDemo selectionBehavior="replace" />
       <ComboboxDemo selectionBehavior="clear" />
       <ComboboxDemo selectionBehavior="preserve" />
@@ -29,12 +26,15 @@ const descriptions = {
   preserve: "Input value is preserved after selection",
 }
 
-function ComboboxDemo(props: Partial<Combobox.RootProps>) {
+const ComboboxDemo = (props: Partial<Combobox.RootProps>) => {
   const { selectionBehavior = "replace" } = props
-  const [value, setValue] = useState<string[]>([])
-  const [inputValue, setInputValue] = useState("")
 
-  const collection = createListCollection({ items: companies })
+  const { contains } = useFilter({ sensitivity: "base" })
+
+  const { collection, filter } = useListCollection({
+    initialItems: companies,
+    filter: contains,
+  })
 
   return (
     <Box>
@@ -46,48 +46,33 @@ function ComboboxDemo(props: Partial<Combobox.RootProps>) {
       </Stack>
 
       <Combobox.Root
-        multiple
-        value={value}
-        inputValue={inputValue}
         collection={collection}
         selectionBehavior={selectionBehavior}
-        onValueChange={(details) => setValue(details.value)}
-        onInputValueChange={(details) => setInputValue(details.inputValue)}
+        onInputValueChange={(details) => filter(details.inputValue)}
       >
         <Combobox.Label>Select Companies</Combobox.Label>
 
-        {selectionBehavior !== "replace" && (
-          <Stack direction="row">
-            {value.map((company) => (
-              <Badge key={company}>{company}</Badge>
-            ))}
-          </Stack>
-        )}
-
         <Combobox.Control>
           <Combobox.Input />
-          <Combobox.IndicatorGroup>
-            <Combobox.ClearTrigger />
-            <Combobox.Trigger />
-          </Combobox.IndicatorGroup>
         </Combobox.Control>
 
         <Combobox.Content>
           {collection.items.map((item) => (
-            <Combobox.Item key={item} item={item}>
-              {item}
+            <Combobox.Item key={item.value} item={item}>
+              {item.label}
               <Combobox.ItemIndicator />
             </Combobox.Item>
           ))}
         </Combobox.Content>
       </Combobox.Root>
-
-      <Box mt={2} p={2} bg="gray.50" rounded="sm">
-        <Box textStyle="sm">
-          <Box>Selected: {value.join(", ") || "none"}</Box>
-          <Box>Input Value: {inputValue || "empty"}</Box>
-        </Box>
-      </Box>
     </Box>
   )
 }
+
+const companies = [
+  { label: "Apple", value: "apple" },
+  { label: "Amazon", value: "amazon" },
+  { label: "Meta", value: "meta" },
+  { label: "Netflix", value: "netflix" },
+  { label: "Google", value: "google" },
+]

apps/compositions/src/examples/combobox-with-custom-options.tsx

@@ -41,8 +41,6 @@ export { ComboboxWithField as Field } from "compositions/examples/combobox-with-
 export { ComboboxWithCustomFilter as CustomFilter } from "compositions/examples/combobox-with-custom-filter"
 export { ComboboxWithInputInContent as InputInContent } from "compositions/examples/combobox-with-input-in-content"
 
-export { ComboboxMultiWithReplaceSelectionBehavior as MultiWithReplaceSelectionBehaviors } from "compositions/examples/combobox-multi-with-replace-selection-behavior"
-export { ComboboxWithCustomOptions as CustomOptions } from "compositions/examples/combobox-with-custom-options"
 export { ComboboxSelectionBehavior as SelectionBehavior } from "compositions/examples/combobox-with-selection-behavior"
 export { ComboboxWithCreateableOptions as CreateableOptions } from "compositions/examples/combobox-with-createable-options"
 export { ComboboxColorPicker as ColorPicker } from "compositions/examples/combobox-color-picker"

apps/compositions/src/examples/combobox-with-selection-behavior.tsx

@@ -73,7 +73,7 @@ export const comboboxSlotRecipe = defineSlotRecipe({
       justifyContent: "center",
       gap: "1",
       pos: "absolute",
-      right: "0",
+      insetEnd: "0",
       top: "0",
       bottom: "0",
       px: "var(--combobox-input-padding-x)",