@kaizen/components 0.0.0-canary-test-exports-20231114054615 → 0.0.0-canary-bundle-size-check-20231115005811

package/src/Filter/FilterBar/subcomponents/FilterBarSelect/FilterBarSelect.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from "react"
+import {
+  FilterSelect,
+  FilterSelectProps,
+  SelectItem,
+  SelectOption,
+} from "~components/Filter/FilterSelect"
+import { useFilterBarContext } from "../../context/FilterBarContext"
+import { checkArraysMatch } from "../../utils/checkArraysMatch"
+import { FilterBarButton } from "../FilterBarButton"
+
+export type FilterBarSelectProps<Option extends SelectOption = SelectOption> =
+  Omit<
+    FilterSelectProps<Option>,
+    "isOpen" | "setIsOpen" | "renderTrigger" | "label" | "selectedKey"
+  > & {
+    id?: string
+  }
+
+export const FilterBarSelect = <Option extends SelectOption = SelectOption>({
+  id,
+  items: propsItems,
+  onSelectionChange,
+  ...props
+}: FilterBarSelectProps<Option>): JSX.Element => {
+  const { getFilterState, setFilterOpenState, updateValue } =
+    useFilterBarContext<Option["value"] | undefined>()
+  const [items, setItems] = useState<Array<SelectItem<Option>>>(propsItems)
+
+  if (!id) throw Error("Missing `id` prop in FilterBarSelect")
+
+  const filterState = getFilterState(id)
+
+  useEffect(() => {
+    if (!checkArraysMatch(items, propsItems)) {
+      setItems(propsItems)
+    }
+  }, [propsItems])
+
+  useEffect(() => {
+    if (filterState.value) {
+      const itemValues = items.map(item => (item as Option)?.value)
+      if (!itemValues.includes(filterState.value)) {
+        updateValue(id, undefined)
+      }
+    }
+  }, [items])
+
+  return (
+    <FilterSelect<Option>
+      {...props}
+      items={items}
+      selectedKey={filterState.value || null}
+      label={filterState.name}
+      renderTrigger={(triggerProps): JSX.Element => (
+        <FilterBarButton
+          {...triggerProps}
+          id={id}
+          isRemovable={filterState.isRemovable}
+        />
+      )}
+      onSelectionChange={(key): void => {
+        updateValue(id, key)
+        onSelectionChange?.(key)
+      }}
+      isOpen={filterState.isOpen}
+      setIsOpen={(open): void => setFilterOpenState(id, open)}
+    />
+  )
+}
+
+FilterBarSelect.displayName = "FilterBarSelect"

package/src/Filter/FilterBar/subcomponents/FilterBarSelect/index.ts

@@ -0,0 +1 @@
+export * from "./FilterBarSelect"

package/src/Filter/FilterBar/subcomponents/index.ts

@@ -0,0 +1,4 @@
+export * from "./FilterBarDatePicker"
+export * from "./FilterBarDateRangePicker"
+export * from "./FilterBarMultiSelect"
+export * from "./FilterBarSelect"

package/src/Filter/FilterBar/types.ts

@@ -0,0 +1,42 @@
+export type FiltersValues = Record<string, any>
+
+type SourceFilterAttributes<Id, Value> = {
+  id: Id
+  name: string
+  value?: Value
+  isActive: boolean
+}
+
+export type SourceFiltersState<ValuesMap extends FiltersValues> = {
+  [K in keyof ValuesMap]: SourceFilterAttributes<K, ValuesMap[K]>
+}
+
+export type FilterIsUsableWhen<ValuesMap extends FiltersValues> = (
+  state: SourceFiltersState<ValuesMap>
+) => boolean
+
+export type FilterAttributes<
+  ValuesMap extends FiltersValues,
+  Id = keyof ValuesMap,
+> = {
+  id: Id
+  name: string
+  Component: React.ReactElement
+  isRemovable?: boolean
+  isUsableWhen?: FilterIsUsableWhen<ValuesMap>
+}
+
+export type Filters<ValuesMap extends FiltersValues> = Array<
+  FilterAttributes<ValuesMap>
+>
+
+export type FilterState<Id, Value> = {
+  id: Id
+  name: string
+  isRemovable: boolean
+  isUsableWhen?: never
+  isUsable: boolean
+  isOpen: boolean
+  value?: Value
+  isActive: boolean
+}

package/src/Filter/FilterBar/utils/checkArraysMatch.spec.ts

@@ -0,0 +1,18 @@
+import { checkArraysMatch } from "./checkArraysMatch"
+
+describe("checkArraysMatch()", () => {
+  it("returns false if the arrays do not have the same length", () => {
+    const result = checkArraysMatch(["a"], ["a", "b"])
+    expect(result).toBe(false)
+  })
+
+  it("returns false if the arrays do not have the same values", () => {
+    const result = checkArraysMatch(["a"], ["b"])
+    expect(result).toBe(false)
+  })
+
+  it("returns true if the arrays have the same values", () => {
+    const result = checkArraysMatch(["a"], ["a"])
+    expect(result).toBe(true)
+  })
+})

package/src/Filter/FilterBar/utils/checkArraysMatch.ts

@@ -0,0 +1,4 @@
+export const checkArraysMatch = (a1: any[], a2: any[]): boolean => {
+  if (a1.length !== a2.length) return false
+  return a1.every((v, i) => v === a2[i])
+}

package/src/Filter/FilterButton/FilterButton/FilterButton.module.scss

@@ -0,0 +1,22 @@
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.filterButton {
+  gap: $spacing-xs;
+}
+
+.labelContainer {
+  display: inline-flex;
+}
+
+.hasSelectedValues {
+  font-weight: $typography-button-primary-font-weight;
+}
+
+.labelSeparator {
+  margin-inline-end: $spacing-xs;
+
+  [dir="ltr"] [dir="rtl"] & {
+    margin-right: 0;
+  }
+}

package/src/Filter/FilterButton/FilterButton/FilterButton.spec.tsx

@@ -0,0 +1,42 @@
+import React from "react"
+import { render, screen } from "@testing-library/react"
+import { FilterButton, FilterButtonProps } from "."
+
+const FilterButtonWrapper = (
+  props: Partial<FilterButtonProps>
+): JSX.Element => <FilterButton label="Desserts" isOpen={false} {...props} />
+
+describe("<FilterButton />", () => {
+  it("has the required attributes when not expanded", () => {
+    render(<FilterButtonWrapper />)
+    const button = screen.getByRole("button", { name: "Desserts" })
+    expect(button).toHaveAttribute("aria-haspopup", "true")
+    expect(button).toHaveAttribute("aria-expanded", "false")
+  })
+
+  it("has the required attributes when expanded", () => {
+    render(<FilterButtonWrapper isOpen />)
+    const button = screen.getByRole("button", {
+      name: "Desserts",
+    })
+    expect(button).toHaveAttribute("aria-haspopup", "true")
+    expect(button).toHaveAttribute("aria-expanded", "true")
+  })
+
+  it("should only show the label when there is no value", () => {
+    render(<FilterButtonWrapper />)
+    expect(screen.getByRole("button", { name: "Desserts" })).toBeVisible()
+  })
+
+  it("should show the label and selected value when defined", () => {
+    render(<FilterButtonWrapper selectedValue="Cake" />)
+    expect(
+      screen.getByRole("button", { name: "Desserts : Cake" })
+    ).toBeVisible()
+  })
+
+  it("should only show the label when selected value is an empty string", () => {
+    render(<FilterButtonWrapper selectedValue="" />)
+    expect(screen.getByRole("button", { name: "Desserts" })).toBeVisible()
+  })
+})

package/src/Filter/FilterButton/FilterButton/FilterButton.tsx

@@ -0,0 +1,58 @@
+import React, { forwardRef } from "react"
+import classnames from "classnames"
+import { ChevronDownIcon, ChevronUpIcon } from "~components/Icon"
+import { isRefObject } from "~utils/isRefObject"
+import { FilterTriggerRef } from "../../Filter/types"
+import {
+  FilterButtonBase,
+  FilterButtonBaseProps,
+} from "../subcomponents/FilterButtonBase"
+import styles from "./FilterButton.module.scss"
+
+export type FilterButtonProps = {
+  label: string
+  selectedValue?: string | JSX.Element
+  isOpen?: boolean
+} & Omit<FilterButtonBaseProps, "children">
+
+export const FilterButton = forwardRef<FilterTriggerRef, FilterButtonProps>(
+  (
+    { label, selectedValue, isOpen = false, classNameOverride, ...restProps },
+    ref
+  ) => {
+    const customRefObject = isRefObject(ref) ? ref.current : null
+    const triggerRef = customRefObject?.triggerRef
+    const selectedValuesLabel = selectedValue
+
+    return (
+      <FilterButtonBase
+        ref={triggerRef}
+        classNameOverride={classnames(styles.filterButton, classNameOverride)}
+        aria-haspopup="true"
+        aria-expanded={isOpen}
+        {...restProps}
+      >
+        <span className={styles.labelContainer}>
+          {selectedValuesLabel ? (
+            <>
+              <span className={styles.hasSelectedValues}>
+                <span>{label}</span>
+                <span className={styles.labelSeparator}>:</span>
+              </span>
+              <span>{selectedValuesLabel}</span>
+            </>
+          ) : (
+            label
+          )}
+        </span>
+        {isOpen ? (
+          <ChevronUpIcon role="presentation" />
+        ) : (
+          <ChevronDownIcon role="presentation" />
+        )}
+      </FilterButtonBase>
+    )
+  }
+)
+
+FilterButton.displayName = "FilterButton"

package/src/Filter/FilterButton/FilterButton/index.ts

@@ -0,0 +1 @@
+export * from "./FilterButton"

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.spec.tsx

@@ -0,0 +1,84 @@
+import React, { useRef } from "react"
+import { render, screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+import {
+  FilterButtonRemovable,
+  FilterButtonRemovableProps,
+  FilterButtonRemovableRefs,
+} from "."
+
+const user = userEvent.setup()
+
+const FilterButtonRemovableWrapper = ({
+  triggerButtonProps,
+  removeButtonProps,
+  ...restProps
+}: Partial<FilterButtonRemovableProps>): JSX.Element => (
+  <FilterButtonRemovable
+    triggerButtonProps={{
+      ...triggerButtonProps,
+      label: "Desserts",
+    }}
+    removeButtonProps={{
+      ...removeButtonProps,
+    }}
+    {...restProps}
+  />
+)
+
+describe("<FilterButtonRemovable />", () => {
+  it("should use fallback label for remove button if not specified", () => {
+    render(<FilterButtonRemovableWrapper />)
+    expect(
+      screen.getByRole("button", { name: "Remove filter - Desserts" })
+    ).toBeVisible()
+  })
+
+  describe("Refs", () => {
+    it("correctly passes through both button refs", async () => {
+      const onClick = jest.fn<
+        void,
+        [string | null | undefined, string | null | undefined]
+      >()
+
+      const Wrapper = (): JSX.Element => {
+        const triggerRef = useRef<HTMLButtonElement>(null)
+        const removeButtonRef = useRef<HTMLButtonElement>(null)
+        const ref = useRef<FilterButtonRemovableRefs>({
+          triggerRef,
+          removeButtonRef,
+        })
+
+        const handleClick = (): void => {
+          onClick(triggerRef.current?.id, removeButtonRef.current?.id)
+        }
+        return (
+          <>
+            <FilterButtonRemovable
+              ref={ref}
+              id="test__date-input-field--ref"
+              triggerButtonProps={{
+                label: "Desserts",
+                id: "test__trigger-button",
+              }}
+              removeButtonProps={{
+                id: "test__remove-button",
+              }}
+            />
+            <button type="button" onClick={handleClick}>
+              Click me
+            </button>
+          </>
+        )
+      }
+
+      render(<Wrapper />)
+
+      await user.click(screen.getByText("Click me"))
+      expect(onClick).toBeCalledWith(
+        "test__trigger-button",
+        "test__remove-button"
+      )
+    })
+  })
+})

package/src/Filter/FilterButton/FilterButtonRemovable/FilterButtonRemovable.tsx

@@ -0,0 +1,47 @@
+import React, { forwardRef } from "react"
+import { ButtonGroup, ButtonGroupProps } from "~components/ButtonGroup"
+import { FilterTriggerRef } from "~components/Filter/Filter"
+import { ClearIcon } from "~components/Icon"
+import { Tooltip } from "~components/Tooltip"
+import { DataAttributes } from "~types/DataAttributes"
+import { isRefObject } from "~utils/isRefObject"
+import { FilterButton, FilterButtonProps } from "../FilterButton"
+import {
+  FilterButtonBase,
+  FilterButtonBaseProps,
+} from "../subcomponents/FilterButtonBase"
+
+export type FilterButtonRemovableProps = {
+  triggerButtonProps: FilterButtonProps & DataAttributes
+  removeButtonProps: Partial<Omit<FilterButtonBaseProps, "children">> &
+    DataAttributes & { tooltipText?: string }
+} & Omit<ButtonGroupProps, "children">
+
+export type FilterButtonRemovableRefs = FilterTriggerRef & {
+  removeButtonRef?: React.RefObject<HTMLButtonElement>
+}
+
+export const FilterButtonRemovable = forwardRef<
+  FilterButtonRemovableRefs,
+  FilterButtonRemovableProps
+>(({ triggerButtonProps, removeButtonProps, ...restProps }, ref) => {
+  const customRefObject = isRefObject(ref) ? ref.current : null
+  const removeButtonRef = customRefObject?.removeButtonRef
+
+  const removeButtonLabel =
+    removeButtonProps?.tooltipText ??
+    `Remove filter - ${triggerButtonProps?.label}`
+
+  return (
+    <ButtonGroup {...restProps}>
+      <FilterButton ref={ref} {...triggerButtonProps} />
+      <Tooltip text={removeButtonLabel} display="inline-block" position="below">
+        <FilterButtonBase ref={removeButtonRef} {...removeButtonProps}>
+          <ClearIcon role="img" aria-label={removeButtonLabel} />
+        </FilterButtonBase>
+      </Tooltip>
+    </ButtonGroup>
+  )
+})
+
+FilterButtonRemovable.displayName = "FilterButtonRemovable"

package/src/Filter/FilterButton/FilterButtonRemovable/index.ts

@@ -0,0 +1 @@
+export * from "./FilterButtonRemovable"

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

@@ -0,0 +1,58 @@
+import React from "react"
+import { Meta, StoryObj } from "@storybook/react"
+import { FilterButton } from "../FilterButton"
+
+const meta = {
+  title: "Components/Filter Base/Filter Buttons/Filter Button",
+  component: FilterButton,
+  argTypes: {
+    selectedValue: { type: "string" },
+    isOpen: { type: "boolean" },
+  },
+  args: {
+    label: "Label",
+  },
+} satisfies Meta<typeof FilterButton>
+
+export default meta
+
+export const Playground: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+/**
+ * A string or JSX.Element (most common for values with dom formatting).
+ */
+export const SelectedValue: StoryObj<typeof meta> = {
+  render: args => (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <FilterButton {...args} selectedValue="Pancakes" />
+      <FilterButton
+        {...args}
+        selectedValue={
+          <span>
+            <span>3 Apr 2023</span> - <span>1 May 2023</span>
+          </span>
+        }
+      />
+    </div>
+  ),
+}
+
+/**
+ * Controls the open state (chevron changes direction).
+ */
+export const IsOpen: StoryObj<typeof meta> = {
+  render: args => (
+    <div style={{ display: "flex", gap: "1rem" }}>
+      <FilterButton {...args} />
+      <FilterButton {...args} isOpen />
+    </div>
+  ),
+}

package/src/Filter/FilterButton/_docs/FilterButtonRemovable.stories.tsx

@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { FilterButtonRemovable } from "../FilterButtonRemovable"
+
+const meta = {
+  title: "Components/Filter Base/Filter Buttons/Filter Button Removable",
+  component: FilterButtonRemovable,
+  args: {
+    triggerButtonProps: {
+      label: "Label",
+    },
+    removeButtonProps: {
+      onClick: (): void => alert("Remove clicked!"),
+    },
+  },
+} satisfies Meta<typeof FilterButtonRemovable>
+
+export default meta
+
+export const Playground: StoryObj<typeof meta> = {
+  parameters: {
+    docs: {
+      canvas: {
+        sourceState: "shown",
+      },
+    },
+  },
+}
+
+export const TriggerButtonProps: StoryObj<typeof meta> = {
+  args: {
+    triggerButtonProps: {
+      label: "Ice cream flavour",
+      selectedValue: "Vanilla",
+      "data-testid": "testid__ice-cream-sandwich",
+    },
+  },
+}
+
+export const RemoveButtonProps: StoryObj<typeof meta> = {
+  args: {
+    removeButtonProps: {
+      tooltipText: "Custom tooltip :)",
+      "data-testid": "testid__carrot-cake",
+    },
+  },
+}

package/src/Filter/FilterButton/_docs/filter-buttons.mdx

@@ -0,0 +1,46 @@
+import { Canvas, Controls, DocsStory, Meta } from "@storybook/blocks"
+import { Installation, KaioNotification, ResourceLinks } from "~storybook/components"
+import * as FilterButtonExamples from "./FilterButton.stories"
+import * as FilterButtonRemovableExamples from "./FilterButtonRemovable.stories"
+
+<Meta title="Components/Filter Base/Filter Buttons" />
+
+# Filter Buttons
+
+<ResourceLinks
+  sourceCode="https://github.com/cultureamp/kaizen-design-system/tree/main/packages/components/src/FilterButton"
+  className="!mb-8"
+/>
+
+<KaioNotification />
+
+Trigger buttons for use by components using the `<Filter>` abstraction.
+
+<Installation
+  installCommand="yarn add @kaizen/components"
+  importStatement='import { FilterButton, FilterButtonRemovable } from "@kaizen/components"'
+/>
+
+## Filter Button
+
+<Canvas of={FilterButtonExamples.Playground} />
+
+<Controls of={FilterButtonExamples.Playground} />
+
+<DocsStory of={FilterButtonExamples.SelectedValue} />
+
+<DocsStory of={FilterButtonExamples.IsOpen} />
+
+## Filter Button Removable
+
+<Canvas of={FilterButtonRemovableExamples.Playground} />
+
+<Controls of={FilterButtonRemovableExamples.Playground} />
+
+### Trigger Button Props
+
+Props for the trigger button. See [Filter Button](#filter-button).
+
+<Canvas of={FilterButtonRemovableExamples.TriggerButtonProps} />
+
+<DocsStory of={FilterButtonRemovableExamples.RemoveButtonProps} />

package/src/Filter/FilterButton/_docs/filter-buttons.stickersheet.stories.tsx

@@ -0,0 +1,102 @@
+import React from "react"
+import { Meta } from "@storybook/react"
+import {
+  StickerSheet,
+  StickerSheetStory,
+} from "~storybook/components/StickerSheet"
+import { FilterButton } from "../FilterButton"
+import { FilterButtonRemovable } from "../FilterButtonRemovable"
+import { FilterButtonBase } from "../subcomponents/FilterButtonBase"
+
+export default {
+  title: "Components/Filter Base/Filter Buttons",
+  parameters: {
+    chromatic: { disable: false },
+    controls: { disable: true },
+  },
+} satisfies Meta
+
+const StickerSheetTemplate: StickerSheetStory = {
+  render: () => (
+    <>
+      <StickerSheet heading="Filter Button Base">
+        <StickerSheet.Header
+          headings={["Default", "Hover", "Active", "Focus"]}
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <FilterButtonBase>Label</FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="hover"
+              data-sb-a11y-color-contrast-disable
+            >
+              Label
+            </FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="active"
+              data-sb-a11y-color-contrast-disable
+            >
+              Label
+            </FilterButtonBase>
+            <FilterButtonBase
+              data-sb-pseudo-styles="focus"
+              data-sb-a11y-color-contrast-disable
+            >
+              Label
+            </FilterButtonBase>
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+
+      <StickerSheet heading="Filter Button">
+        <StickerSheet.Header
+          headings={["Closed", "Open", "Has selected value"]}
+        />
+        <StickerSheet.Body>
+          <StickerSheet.Row>
+            <FilterButton label="Desserts" />
+            <FilterButton label="Desserts" isOpen />
+            <FilterButton label="Desserts" selectedValue="Cake" />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+
+      <StickerSheet heading="Filter Button Removable">
+        <StickerSheet.Body>
+          <StickerSheet.Row rowTitleWidth={70}>
+            <FilterButtonRemovable
+              triggerButtonProps={{
+                label: "Desserts",
+              }}
+              removeButtonProps={{
+                onClick: () => undefined,
+              }}
+            />
+          </StickerSheet.Row>
+        </StickerSheet.Body>
+      </StickerSheet>
+    </>
+  ),
+  parameters: {
+    pseudo: {
+      hover: '[data-sb-pseudo-styles="hover"]',
+      active: '[data-sb-pseudo-styles="active"]',
+      focus: '[data-sb-pseudo-styles="focus"]',
+      focusVisible: '[data-sb-pseudo-styles="focus"]',
+    },
+  },
+}
+
+export const StickerSheetDefault: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (Default)",
+}
+
+export const StickerSheetRTL: StickerSheetStory = {
+  ...StickerSheetTemplate,
+  name: "Sticker Sheet (RTL)",
+  parameters: {
+    ...StickerSheetTemplate["parameters"],
+    textDirection: "rtl",
+  },
+}

package/src/Filter/FilterButton/index.ts

@@ -0,0 +1,2 @@
+export * from "./FilterButton"
+export * from "./FilterButtonRemovable"