@kaizen/components 0.0.0-canary-link-button-wip-canary-20241121043208 → 0.0.0-canary-debug-kaizenprovider-20241223004555

package/src/Filter/FilterBar/_docs/FilterBar.stories.tsx

@@ -1,27 +1,31 @@
-import React, { useEffect, useState } from "react"
-import { Meta, StoryObj } from "@storybook/react"
-import { expect, fn, userEvent, within, waitFor } from "@storybook/test"
-import queryString from "query-string"
-import Highlight from "react-highlight"
+import React, { useEffect, useState } from 'react'
+import { type Meta, type StoryObj } from '@storybook/react'
+import { expect, fn, userEvent, waitFor, within } from '@storybook/test'
+import queryString from 'query-string'
+import Highlight from 'react-highlight'
 import {
-  encodeQueryParams,
-  StringParam,
   ArrayParam,
   DateParam,
-  encodeDate,
-  encodeObject,
+  StringParam,
   decodeDate,
   decodeObject,
-  QueryParamConfig,
   decodeQueryParams,
-} from "serialize-query-params"
-import { DateRange, ItemType, SelectOption } from "~components/index"
-import { FilterMultiSelect } from "../../../index"
-import { FilterBar, Filters, useFilterBarContext } from "../index"
-import { FilterBarMultiSelectProps } from "../subcomponents"
+  encodeDate,
+  encodeObject,
+  encodeQueryParams,
+  type QueryParamConfig,
+} from 'serialize-query-params'
+import {
+  FilterMultiSelect,
+  type DateRange,
+  type ItemType,
+  type SelectOption,
+} from '~components/index'
+import { FilterBar, useFilterBarContext, type Filters } from '../index'
+import { type FilterBarMultiSelectProps } from '../subcomponents'
 
 const meta = {
-  title: "Components/Filter Bar",
+  title: 'Components/FilterBar',
   component: FilterBar,
   argTypes: {
     filters: { control: false },
@@ -126,37 +130,37 @@ type Values = {
 
 const filters = [
   {
-    id: "flavour",
-    name: "Flavour",
+    id: 'flavour',
+    name: 'Flavour',
     Component: (
       <FilterBar.Select
         items={[
-          { value: "jasmine-milk-tea", label: "Jasmine Milk Tea" },
-          { value: "honey-milk-tea", label: "Honey Milk Tea" },
-          { value: "lychee-green-tea", label: "Lychee Green Tea" },
+          { value: 'jasmine-milk-tea', label: 'Jasmine Milk Tea' },
+          { value: 'honey-milk-tea', label: 'Honey Milk Tea' },
+          { value: 'lychee-green-tea', label: 'Lychee Green Tea' },
         ]}
       />
     ),
   },
   {
-    id: "deliveryDates",
-    name: "Delivery Dates",
+    id: 'deliveryDates',
+    name: 'Delivery Dates',
     Component: <FilterBar.DateRangePicker />,
   },
   {
-    id: "toppings",
-    name: "Toppings",
+    id: 'toppings',
+    name: 'Toppings',
     Component: (
       <FilterBar.MultiSelect
         items={[
-          { value: "none", label: "None" },
-          { value: "pearls", label: "Pearls" },
-          { value: "fruit-jelly", label: "Fruit Jelly" },
-          { value: "peanuts", label: "Peanuts" },
-          { value: "coconut", label: "Coconut" },
-          { value: "aloe", label: "Aloe Vera" },
-          { value: "mochi", label: "Mini Mochi" },
-          { value: "popping-pearls", label: "Popping Pearls" },
+          { value: 'none', label: 'None' },
+          { value: 'pearls', label: 'Pearls' },
+          { value: 'fruit-jelly', label: 'Fruit Jelly' },
+          { value: 'peanuts', label: 'Peanuts' },
+          { value: 'coconut', label: 'Coconut' },
+          { value: 'aloe', label: 'Aloe Vera' },
+          { value: 'mochi', label: 'Mini Mochi' },
+          { value: 'popping-pearls', label: 'Popping Pearls' },
         ]}
       >
         {(): JSX.Element => (
@@ -164,9 +168,7 @@ const filters = [
             <FilterMultiSelect.SearchInput />
             <FilterMultiSelect.ListBox>
               {({ allItems }): JSX.Element | JSX.Element[] =>
-                allItems.map(item => (
-                  <FilterMultiSelect.Option key={item.key} item={item} />
-                ))
+                allItems.map((item) => <FilterMultiSelect.Option key={item.key} item={item} />)
               }
             </FilterMultiSelect.ListBox>
             <FilterMultiSelect.MenuFooter>
@@ -180,18 +182,18 @@ const filters = [
     isRemovable: true,
   },
   {
-    id: "drank",
-    name: "Drank",
+    id: 'drank',
+    name: 'Drank',
     Component: <FilterBar.DatePicker />,
     isRemovable: true,
   },
 ] satisfies Filters<Values>
 
 export const BasicImplementation: Story = {
-  render: args => {
+  render: (args) => {
     const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({
-      flavour: "jasmine-milk-tea",
-      toppings: ["pearls", "fruit-jelly"],
+      flavour: 'jasmine-milk-tea',
+      toppings: ['pearls', 'fruit-jelly'],
     })
 
     return (
@@ -215,8 +217,8 @@ export const BasicImplementation: Story = {
 export const OnValuesChange: Story = {
   render: () => {
     const [activeValues, onActiveValuesChange] = useState<Partial<Values>>({
-      flavour: "jasmine-milk-tea",
-      toppings: ["pearls", "fruit-jelly"],
+      flavour: 'jasmine-milk-tea',
+      toppings: ['pearls', 'fruit-jelly'],
     })
 
     return (
@@ -226,9 +228,7 @@ export const OnValuesChange: Story = {
           values={activeValues}
           onValuesChange={onActiveValuesChange}
         />
-        <Highlight className="json">
-          {JSON.stringify(activeValues, null, 4)}
-        </Highlight>
+        <Highlight className="json">{JSON.stringify(activeValues, null, 4)}</Highlight>
       </>
     )
   },
@@ -246,72 +246,68 @@ export const DependentFilter: Story = {
 
     const filtersDependent = [
       {
-        id: "coffee",
-        name: "Coffee",
+        id: 'coffee',
+        name: 'Coffee',
         Component: (
           <FilterBar.Select
             items={[
-              { value: "long-black", label: "Long Black" },
-              { value: "latte", label: "Latte" },
+              { value: 'long-black', label: 'Long Black' },
+              { value: 'latte', label: 'Latte' },
             ]}
           />
         ),
       },
       {
-        id: "milk",
-        name: "Milk",
+        id: 'milk',
+        name: 'Milk',
         Component: (
           <FilterBar.Select
             items={[
-              { value: "full-cream", label: "Full Cream" },
-              { value: "oat", label: "Oat" },
+              { value: 'full-cream', label: 'Full Cream' },
+              { value: 'oat', label: 'Oat' },
             ]}
           />
         ),
-        isUsableWhen: state => state.coffee.value === "latte",
+        isUsableWhen: (state) => state.coffee.value === 'latte',
       },
       {
-        id: "syrup",
-        name: "Syrup",
+        id: 'syrup',
+        name: 'Syrup',
         Component: (
           <FilterBar.Select
             items={[
-              { value: "vanilla", label: "Vanilla" },
-              { value: "caramel", label: "Caramel" },
+              { value: 'vanilla', label: 'Vanilla' },
+              { value: 'caramel', label: 'Caramel' },
             ]}
           />
         ),
         isRemovable: true,
-        isUsableWhen: state =>
-          state.milk.value !== undefined && !state.sugar.isActive,
+        isUsableWhen: (state) => state.milk.value !== undefined && !state.sugar.isActive,
       },
       {
-        id: "sugar",
-        name: "Sugar",
-        Component: (
-          <FilterBar.Select items={[{ value: "yes", label: "Yes" }]} />
-        ),
+        id: 'sugar',
+        name: 'Sugar',
+        Component: <FilterBar.Select items={[{ value: 'yes', label: 'Yes' }]} />,
         isRemovable: true,
-        isUsableWhen: state =>
-          state.milk.value !== undefined && !state.syrup.isActive,
+        isUsableWhen: (state) => state.milk.value !== undefined && !state.syrup.isActive,
       },
       {
-        id: "ice",
-        name: "Ice",
+        id: 'ice',
+        name: 'Ice',
         Component: (
           <FilterBar.Select
             items={[
-              { value: "yes", label: "Yes" },
-              { value: "no", label: "No" },
+              { value: 'yes', label: 'Yes' },
+              { value: 'no', label: 'No' },
             ]}
           />
         ),
-        isUsableWhen: state => state.coffee.value !== undefined,
+        isUsableWhen: (state) => state.coffee.value !== undefined,
       },
     ] satisfies Filters<ValuesDependent>
 
     const [values, setValues] = useState<Partial<ValuesDependent>>({
-      milk: "full-cream",
+      milk: 'full-cream',
     })
 
     return (
@@ -322,23 +318,18 @@ export const DependentFilter: Story = {
           onValuesChange={setValues}
         />
         <div className="flex gap-8 my-16">
-          <button
-            type="button"
-            onClick={() => setValues({ ...values, coffee: undefined })}
-          >
+          <button type="button" onClick={() => setValues({ ...values, coffee: undefined })}>
             Clear Coffee
           </button>
         </div>
-        <Highlight className="json">
-          {JSON.stringify(values, null, 4)}
-        </Highlight>
+        <Highlight className="json">{JSON.stringify(values, null, 4)}</Highlight>
       </>
     )
   },
 }
 
 const ExampleFilterMultiSelect = (
-  props: Omit<FilterBarMultiSelectProps, "children">
+  props: Omit<FilterBarMultiSelectProps, 'children'>,
 ): JSX.Element => (
   <FilterBar.MultiSelect {...props}>
     {(): JSX.Element => (
@@ -351,9 +342,7 @@ const ExampleFilterMultiSelect = (
               </FilterMultiSelect.NoResults>
             )
           }
-          return allItems.map(item => (
-            <FilterMultiSelect.Option key={item.key} item={item} />
-          ))
+          return allItems.map((item) => <FilterMultiSelect.Option key={item.key} item={item} />)
         }}
       </FilterMultiSelect.ListBox>
     )}
@@ -366,31 +355,30 @@ type ValuesSiblingDependent = {
   room: string
 }
 
-const sleep = (ms: number): Promise<unknown> =>
-  new Promise(resolve => setTimeout(resolve, ms))
+const sleep = (ms: number): Promise<unknown> => new Promise((resolve) => setTimeout(resolve, ms))
 
 const FilterPerson = (props: { id?: string }): JSX.Element => {
   const data = [
     {
-      value: "delete-it-g",
-      label: "Delete-it G (Engineer)",
-      role: ["engineer"],
+      value: 'delete-it-g',
+      label: 'Delete-it G (Engineer)',
+      role: ['engineer'],
     },
     {
-      value: "moustache-mackenzie",
-      label: "Moustache MacKenzie (Engineer)",
-      role: ["engineer"],
+      value: 'moustache-mackenzie',
+      label: 'Moustache MacKenzie (Engineer)',
+      role: ['engineer'],
     },
-    { value: "jacon", label: "Jacon (Designer)", role: ["designer"] },
+    { value: 'jacon', label: 'Jacon (Designer)', role: ['designer'] },
     {
-      value: "uppercase-winter",
-      label: "Uppercase Winter (Engineer)",
-      role: ["engineer"],
+      value: 'uppercase-winter',
+      label: 'Uppercase Winter (Engineer)',
+      role: ['engineer'],
     },
     {
-      value: "unicorn",
-      label: "Unicorn (Designer/Engineer)",
-      role: ["designer", "engineer"],
+      value: 'unicorn',
+      label: 'Unicorn (Designer/Engineer)',
+      role: ['designer', 'engineer'],
     },
   ]
 
@@ -398,16 +386,16 @@ const FilterPerson = (props: { id?: string }): JSX.Element => {
   const [isLoading, setIsLoading] = useState<boolean>(true)
 
   const { getFilterState } = useFilterBarContext<
-    ValuesSiblingDependent["person"],
+    ValuesSiblingDependent['person'],
     ValuesSiblingDependent
   >()
 
-  const roleFilter = getFilterState("role")
+  const roleFilter = getFilterState('role')
 
   const loadItems = async (roles: string[] | undefined): Promise<void> => {
     await sleep(3000).then(() => {
       setIsLoading(false)
-      setItems(data.filter(({ role }) => role.find(r => roles?.includes(r))))
+      setItems(data.filter(({ role }) => role.find((r) => roles?.includes(r))))
     })
   }
 
@@ -426,31 +414,27 @@ const FilterPerson = (props: { id?: string }): JSX.Element => {
   )
 }
 
-const FilterRoom = (props: {
-  id?: keyof ValuesSiblingDependent
-}): JSX.Element => {
+const FilterRoom = (props: { id?: keyof ValuesSiblingDependent }): JSX.Element => {
   type Item = SelectOption & {
     role: string
   }
 
   const data = [
-    { value: "eng-1", label: "Engineering Space 1", role: "engineer" },
-    { value: "eng-2", label: "Engineering Space 2", role: "engineer" },
-    { value: "des-1", label: "Design Space 1", role: "designer" },
+    { value: 'eng-1', label: 'Engineering Space 1', role: 'engineer' },
+    { value: 'eng-2', label: 'Engineering Space 2', role: 'engineer' },
+    { value: 'des-1', label: 'Design Space 1', role: 'designer' },
   ]
 
   const [items, setItems] = useState<Item[]>([])
 
-  type Id = typeof props.id extends keyof ValuesSiblingDependent
-    ? typeof props.id
-    : never
+  type Id = typeof props.id extends keyof ValuesSiblingDependent ? typeof props.id : never
 
   const { getFilterState } = useFilterBarContext<
     ValuesSiblingDependent[Id],
     ValuesSiblingDependent
   >()
 
-  const roleFilter = getFilterState("role")
+  const roleFilter = getFilterState('role')
 
   useEffect(() => {
     const roles = roleFilter.value
@@ -565,28 +549,28 @@ export const SiblingValueDependentFilter: Story = {
   render: () => {
     const filtersDependent = [
       {
-        id: "role",
-        name: "Role",
+        id: 'role',
+        name: 'Role',
         Component: (
           <ExampleFilterMultiSelect
             items={[
-              { value: "designer", label: "Designer" },
-              { value: "engineer", label: "Engineer" },
+              { value: 'designer', label: 'Designer' },
+              { value: 'engineer', label: 'Engineer' },
             ]}
           />
         ),
       },
       {
-        id: "person",
-        name: "Person",
+        id: 'person',
+        name: 'Person',
         Component: <FilterPerson />,
       },
       {
-        id: "room",
-        name: "Room",
+        id: 'room',
+        name: 'Room',
         Component: <FilterRoom />,
         isRemovable: true,
-        isUsableWhen: state => state.role.value !== undefined,
+        isUsableWhen: (state) => state.role.value !== undefined,
       },
     ] satisfies Filters<ValuesSiblingDependent>
 
@@ -599,9 +583,7 @@ export const SiblingValueDependentFilter: Story = {
           values={values}
           onValuesChange={setValues}
         />
-        <Highlight className="json">
-          {JSON.stringify(values, null, 4)}
-        </Highlight>
+        <Highlight className="json">{JSON.stringify(values, null, 4)}</Highlight>
       </>
     )
   },
@@ -617,12 +599,12 @@ export const SiblingValueDependentFilter: Story = {
 export const ExternalEventValuesUpdate: Story = {
   render: () => {
     const [values, setValues] = useState<Partial<Values>>({
-      flavour: "jasmine-milk-tea",
-      toppings: ["pearls", "fruit-jelly"],
+      flavour: 'jasmine-milk-tea',
+      toppings: ['pearls', 'fruit-jelly'],
     })
 
     const DateRangeParam = {
-      encode: dateRange => {
+      encode: (dateRange) => {
         if (!dateRange) return undefined
         return (
           encodeObject({
@@ -651,30 +633,17 @@ export const ExternalEventValuesUpdate: Story = {
     }
 
     const encodedQueryParams = encodeQueryParams(paramConfigMap, values)
-    const decodedQueryParams = decodeQueryParams(
-      paramConfigMap,
-      encodedQueryParams
-    )
+    const decodedQueryParams = decodeQueryParams(paramConfigMap, encodedQueryParams)
 
     return (
       <>
-        <FilterBar<Values>
-          filters={filters}
-          values={values}
-          onValuesChange={setValues}
-        />
+        <FilterBar<Values> filters={filters} values={values} onValuesChange={setValues} />
 
         <div className="flex gap-8 my-16">
-          <button
-            type="button"
-            onClick={() => setValues({ ...values, flavour: "honey-milk-tea" })}
-          >
+          <button type="button" onClick={() => setValues({ ...values, flavour: 'honey-milk-tea' })}>
             Update Flavour to honey-milk-tea
           </button>
-          <button
-            type="button"
-            onClick={() => setValues({ ...values, toppings: ["fruit-jelly"] })}
-          >
+          <button type="button" onClick={() => setValues({ ...values, toppings: ['fruit-jelly'] })}>
             Update Toppings to fruit-jelly
           </button>
           <button type="button" onClick={() => setValues({})}>
@@ -683,21 +652,13 @@ export const ExternalEventValuesUpdate: Story = {
         </div>
 
         <code className="mt-16">Values:</code>
-        <Highlight className="json">
-          {JSON.stringify(values, null, 4)}
-        </Highlight>
+        <Highlight className="json">{JSON.stringify(values, null, 4)}</Highlight>
 
-        <code>
-          queryString.stringify(encodeQueryParams(paramConfigMap, values))
-        </code>
-        <Highlight className="json">
-          {queryString.stringify(encodedQueryParams)}
-        </Highlight>
+        <code>queryString.stringify(encodeQueryParams(paramConfigMap, values))</code>
+        <Highlight className="json">{queryString.stringify(encodedQueryParams)}</Highlight>
 
         <code>decodeQueryParams(paramConfigMap, encodedQueryParams)</code>
-        <Highlight className="json">
-          {JSON.stringify(decodedQueryParams, null, 4)}
-        </Highlight>
+        <Highlight className="json">{JSON.stringify(decodedQueryParams, null, 4)}</Highlight>
       </>
     )
   },
@@ -709,21 +670,18 @@ type CycleFilterValues = {
 }
 
 const CycleFilter = ({ id }: { id?: string }): JSX.Element => {
-  const { openFilter } = useFilterBarContext<
-    CycleFilterValues["cycle"],
-    CycleFilterValues
-  >()
+  const { openFilter } = useFilterBarContext<CycleFilterValues['cycle'], CycleFilterValues>()
 
   return (
     <FilterBar.Select
       id={id}
       items={[
-        { value: "custom", label: "Custom Range" },
-        { value: "cycle-1", label: "Cycle 1" },
-        { value: "cycle-2", label: "Cycle 2" },
+        { value: 'custom', label: 'Custom Range' },
+        { value: 'cycle-1', label: 'Cycle 1' },
+        { value: 'cycle-2', label: 'Cycle 2' },
       ]}
-      onSelectionChange={key => {
-        if (key === "custom") openFilter("customRange")
+      onSelectionChange={(key) => {
+        if (key === 'custom') openFilter('customRange')
       }}
     />
   )
@@ -735,15 +693,15 @@ export const ExternalEventOpenFilter: Story = {
 
     const cycleFilters = [
       {
-        id: "cycle",
-        name: "Cycle",
+        id: 'cycle',
+        name: 'Cycle',
         Component: <CycleFilter />,
       },
       {
-        id: "customRange",
-        name: "Custom Range",
+        id: 'customRange',
+        name: 'Custom Range',
         Component: <FilterBar.DateRangePicker />,
-        isUsableWhen: state => state.cycle.value === "custom",
+        isUsableWhen: (state) => state.cycle.value === 'custom',
       },
     ] satisfies Filters<CycleFilterValues>
 
@@ -756,9 +714,7 @@ export const ExternalEventOpenFilter: Story = {
         />
         <div className="mt-16">
           <code>Values:</code>
-          <Highlight className="json">
-            {JSON.stringify(values, null, 4)}
-          </Highlight>
+          <Highlight className="json">{JSON.stringify(values, null, 4)}</Highlight>
         </div>
       </>
     )
@@ -767,14 +723,14 @@ export const ExternalEventOpenFilter: Story = {
 
 const emptyLabelFilters = [
   {
-    id: "cycle",
-    name: "",
+    id: 'cycle',
+    name: '',
     Component: <CycleFilter />,
     isRemovable: true,
   },
   {
-    id: "customRange",
-    name: "",
+    id: 'customRange',
+    name: '',
     Component: <FilterBar.DateRangePicker />,
     isRemovable: true,
   },
@@ -795,14 +751,14 @@ export const UpdatesLabels: Story = {
       const timer = setTimeout(() => {
         setF([
           {
-            id: "cycle",
-            name: "Cycle",
+            id: 'cycle',
+            name: 'Cycle',
             Component: <CycleFilter />,
             isRemovable: true,
           },
           {
-            id: "customRange",
-            name: "Custom Range",
+            id: 'customRange',
+            name: 'Custom Range',
             Component: <FilterBar.DateRangePicker />,
             isRemovable: true,
           },
@@ -813,26 +769,20 @@ export const UpdatesLabels: Story = {
 
     return (
       <>
-        <FilterBar<CycleFilterValues>
-          filters={f}
-          values={values}
-          onValuesChange={setValues}
-        />
+        <FilterBar<CycleFilterValues> filters={f} values={values} onValuesChange={setValues} />
         <div className="mt-16">
           <code>Filters:</code>
           <Highlight className="json">
             {JSON.stringify(
               f.map(({ id, name }) => ({ id, name })),
               null,
-              4
+              4,
             )}
           </Highlight>
         </div>
         <div className="mt-16">
           <code>Values:</code>
-          <Highlight className="json">
-            {JSON.stringify(values, null, 4)}
-          </Highlight>
+          <Highlight className="json">{JSON.stringify(values, null, 4)}</Highlight>
         </div>
       </>
     )
@@ -840,19 +790,18 @@ export const UpdatesLabels: Story = {
   play: async ({ canvasElement, step }) => {
     const canvas = within(canvasElement)
 
-    await step("Initial render complete", async () => {
-      await waitFor(() => canvas.getByRole("button", { name: "Add Filters" }))
+    await step('Initial render complete', async () => {
+      await waitFor(() => canvas.getByRole('button', { name: 'Add Filters' }))
     })
 
-    await userEvent.click(canvas.getByRole("button", { name: "Add Filters" }))
+    await userEvent.click(canvas.getByRole('button', { name: 'Add Filters' }))
 
-    expect(canvas.queryByText("Custom Range")).not.toBeInTheDocument()
+    expect(canvas.queryByText('Custom Range')).not.toBeInTheDocument()
 
-    await step("Labels have updated", async () => {
-      await waitFor(
-        () => expect(canvas.queryByText("Custom Range")).toBeInTheDocument(),
-        { timeout: 2100 }
-      )
+    await step('Labels have updated', async () => {
+      await waitFor(() => expect(canvas.queryByText('Custom Range')).toBeInTheDocument(), {
+        timeout: 2100,
+      })
     })
   },
 }