@vention/machine-ui 3.27.0

package/src/lib/components/vention-combobox/vention-combobox.tsx

@@ -0,0 +1,374 @@
+import { useState, useRef, Fragment } from "react"
+import { InputAdornment, Popover, Typography } from "@mui/material"
+import { tss } from "tss-react/mui"
+import { VentionButton } from "../vention-button/vention-button"
+import { VentionIcon } from "../vention-icon/vention-icon"
+import { VentionTextInput } from "../vention-text-input/vention-text-input"
+
+export interface VentionComboboxProps {
+  options: {
+    value: string
+    label: string
+    group?: string | undefined
+    dataTestId?: string | undefined
+  }[]
+  groups?:
+    | {
+        value: string
+        label: string
+      }[]
+    | undefined
+  placeholder?: string | undefined
+  searchPlaceholder?: string | undefined
+  value: string | null
+  onChange?: (value: string | null) => void | undefined
+  noOptionsMessage?: string | undefined
+  noItemsFoundMessage?: string | undefined
+  isClearable?: boolean | undefined
+  autoFocus?: boolean | undefined
+  buttonDataTestId?: string | undefined
+  inputDataTestId?: string | undefined
+  clearButtonDataTestId?: string | undefined
+}
+
+/**
+ * A custom combobox component with optional grouping, search, and clearable selection.
+ *
+ * @component
+ * @param {VentionComboboxProps} props - Props used to configure the component.
+ * @param {Array<{ value: string, label: string, group?: string, dataTestId?: string }>} props.options - List of selectable items. Items can optionally belong to a group.
+ * @param {Array<{ value: string, label: string }>} [props.groups] - Group data used for rendering labels above grouped options.
+ * @param {string} [props.value] - Currently selected item value.
+ * @param {(value: string | null) => void} [props.onChange] - Callback fired when a user selects or clears an option.
+ * @param {boolean} [props.isClearable=false] - Whether the selected item can be cleared.
+ * @param {string} [props.placeholder="Select item..."] - Placeholder text shown on the button when no item is selected.
+ * @param {string} [props.searchPlaceholder="Search item..."] - Placeholder shown in the search input field.
+ * @param {string} [props.noOptionsMessage="No options available."] - Message displayed when there are no options at all.
+ * @param {string} [props.noItemsFoundMessage="No items found."] - Message displayed when a search yields no results.
+ * @param {string} [props.buttonDataTestId] - Test ID applied to the button.
+ * @param {string} [props.inputDataTestId] - Test ID applied to the input field.
+ * @param {string} [props.clearButtonDataTestId] - Test ID applied to the clear icon inside the button.
+ * @param {boolean} [props.autoFocus=true] - Whether the search input should be focused when the menu opens.
+ *
+ * @returns {JSX.Element} The VentionCombobox component.
+ *
+ * @description
+ * Items that do not belong to any group (i.e., have no `group` property) are categorized under an implicit `"ungrouped"` section.
+ * These ungrouped items are always rendered **before** the grouped sections and **without a group label**, ensuring a clean and intuitive visual separation.
+ *
+ * @example
+ * <VentionCombobox
+ *   options={[
+ *     { value: 'a', label: 'Apple', group: 'fruits' },
+ *     { value: 'b', label: 'Broccoli', group: 'vegetables' },
+ *     { value: 'c', label: 'Carrot' }, // ungrouped
+ *   ]}
+ *   groups={[
+ *     { value: 'fruits', label: 'Fruits' },
+ *     { value: 'vegetables', label: 'Vegetables' },
+ *   ]}
+ *   value="a"
+ *   onChange={(val) => console.log(val)}
+ *   isClearable
+ * />
+ */
+export const VentionCombobox = (props: VentionComboboxProps) => {
+  const {
+    options,
+    value,
+    onChange,
+    placeholder = "Select item...",
+    searchPlaceholder = "Search item...",
+    noOptionsMessage = "No options available.",
+    noItemsFoundMessage = "No items found.",
+    buttonDataTestId,
+    inputDataTestId,
+    clearButtonDataTestId,
+    autoFocus = true,
+  } = props
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
+  const buttonRef = useRef<HTMLButtonElement | null>(null)
+  const [menuWidth, setMenuWidth] = useState<number | undefined>(undefined)
+  const [searchValue, setSearchValue] = useState<string>("")
+
+  const isOpen = Boolean(anchorEl)
+
+  const { theme, classes } = useStyles({ isOpen })
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+    if (buttonRef.current) {
+      setMenuWidth(buttonRef.current.offsetWidth)
+    }
+  }
+
+  const handleClear = event => {
+    event.stopPropagation()
+    if (onChange) {
+      onChange(undefined)
+    }
+    handleClose()
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+  }
+
+  const handleOptionClick = (optionValue: string) => {
+    if (onChange) {
+      onChange(optionValue)
+    }
+    handleClose()
+  }
+
+  const isOptionEmpty = options.length === 0
+
+  const buttonLabel = value ? options.find(framework => framework.value === value)?.label || placeholder : placeholder
+
+  const filteredOptions = options.filter(option => option.label.toLowerCase().includes(searchValue.toLowerCase()))
+
+  const isFilteredOptionEmpty = filteredOptions.length === 0
+
+  const groupedOptions = filteredOptions
+    .sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: "base" }))
+    .reduce<Record<string, VentionComboboxProps["options"]>>((accumulator, option) => {
+      const groupKey = option.group || "ungrouped"
+      if (!accumulator[groupKey]) {
+        accumulator[groupKey] = []
+      }
+      accumulator[groupKey].push(option)
+
+      return accumulator
+    }, {})
+
+  /* Make sure to render ungrouped items before grouped sections */
+  const sortedGroupedOptions = Object.entries(groupedOptions).sort(([groupA], [groupB]) => {
+    if (groupA === "ungrouped") return -1
+    if (groupB === "ungrouped") return 1
+
+    return groupA.localeCompare(groupB)
+  })
+
+  const groupLabels =
+    props.groups?.reduce<Record<string, string>>((accumulator, group) => {
+      accumulator[group.value] = group.label
+
+      return accumulator
+    }, {}) ?? {}
+
+  return (
+    <>
+      <VentionButton
+        data-testid={buttonDataTestId}
+        ref={buttonRef}
+        className={classes.button}
+        fullWidth
+        variant="outline"
+        onClick={handleClick}
+        labelText={buttonLabel}
+        title={buttonLabel}
+        iconRight={
+          <div className={classes.buttonEndItems}>
+            {value && props.isClearable && (
+              <div className={classes.clearButton} onClick={handleClear} data-testid={clearButtonDataTestId}>
+                <VentionIcon type="close" size={14} />
+              </div>
+            )}
+            <VentionIcon type="chevron-down" size={18} />
+          </div>
+        }
+        size="small"
+      />
+      <Popover
+        open={isOpen}
+        anchorEl={anchorEl}
+        onClose={handleClose}
+        anchorOrigin={{
+          vertical: "bottom",
+          horizontal: "center",
+        }}
+        transformOrigin={{
+          vertical: "top",
+          horizontal: "center",
+        }}
+        slotProps={{
+          paper: {
+            className: classes.popoverSlot,
+          },
+        }}
+      >
+        <div className={classes.menuContainer} style={{ width: menuWidth }}>
+          <div className={classes.inputContainer}>
+            <VentionTextInput
+              autoFocus={autoFocus}
+              data-testid={inputDataTestId}
+              size="small"
+              variant="outlined"
+              placeholder={searchPlaceholder}
+              onChange={event => setSearchValue(event.target.value)}
+              InputProps={{
+                startAdornment: (
+                  <InputAdornment position="start" className={classes.searchInputAdornment}>
+                    <VentionIcon type="search" color={theme.palette.icon.primary} size={16} />
+                  </InputAdornment>
+                ),
+              }}
+            />
+          </div>
+          <div className={classes.menuOptionsContainer}>
+            {isOptionEmpty ? (
+              <MenuMessage label={noOptionsMessage} />
+            ) : isFilteredOptionEmpty ? (
+              <MenuMessage label={noItemsFoundMessage} />
+            ) : (
+              sortedGroupedOptions.map(([groupKey, groupOptions]) => (
+                <Fragment key={groupKey}>
+                  {/* Ungrouped items should be displayed without a group label in their section */}
+                  {groupKey !== "ungrouped" && (
+                    <div key={groupKey} className={classes.menuOptionContainer}>
+                      <div className={classes.menuGroup}>
+                        <Typography variant={"uiText12Regular"} className={classes.menuGroupLabel} title={groupLabels[groupKey]}>
+                          {groupLabels[groupKey]}
+                        </Typography>
+                      </div>
+                    </div>
+                  )}
+                  {groupOptions.map((option, index) => (
+                    <div key={option.value} className={classes.menuOptionContainer} data-testid={`vention-combobox-option-${index}`}>
+                      <div className={classes.menuOption} onClick={() => handleOptionClick(option.value)} data-testid={option.dataTestId}>
+                        <Typography variant={"uiText12Medium"} className={classes.menuOptionLabel} title={option.label}>
+                          {option.label}
+                        </Typography>
+                        {option.value === value && <VentionIcon type="check" size={16} color={theme.palette.icon.primary} />}
+                      </div>
+                    </div>
+                  ))}
+                </Fragment>
+              ))
+            )}
+          </div>
+        </div>
+      </Popover>
+    </>
+  )
+}
+
+const MenuMessage = ({ label }: { label: string }) => {
+  const { classes } = useStyles()
+
+  return (
+    <div className={classes.menuMessageContainer}>
+      <Typography variant={"uiText12Regular"} className={classes.menuMessageLabel}>
+        {label}
+      </Typography>
+    </div>
+  )
+}
+
+const useStyles = tss
+  .withParams<{
+    isOpen?: boolean
+  }>()
+  .create(({ theme, isOpen }) => {
+    return {
+      button: {
+        display: "flex",
+        justifyContent: "space-between",
+        height: "24px",
+        backgroundColor: isOpen ? theme.palette.background.subtleSlate : undefined,
+        "& span": {
+          fontWeight: 400,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        },
+      },
+      buttonEndItems: {
+        display: "flex",
+        alignItems: "center",
+      },
+      clearButton: {
+        width: "16px",
+        height: "16px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        "& svg": {
+          color: theme.palette.icon.tertiary,
+        },
+        "&:hover svg": {
+          color: theme.palette.icon.primary,
+        },
+        "& svg>path": {
+          strokeWidth: 3,
+        },
+      },
+      popoverSlot: {
+        padding: theme.spacing(1, 0),
+        backgroundColor: "transparent",
+      },
+      menuContainer: {
+        display: "flex",
+        flexDirection: "column",
+        backgroundColor: "white",
+        border: `1px solid ${theme.palette.border.default}`,
+        borderRadius: "4px",
+        boxSizing: "border-box",
+      },
+      menuOptionsContainer: {
+        maxHeight: "300px",
+        overflowY: "auto",
+        padding: theme.spacing(1, 0),
+      },
+      inputContainer: {
+        padding: theme.spacing(2),
+        borderBottom: `1px solid ${theme.palette.border.default}`,
+      },
+      searchInputAdornment: {
+        marginRight: 0,
+      },
+      menuMessageContainer: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        padding: theme.spacing(4, 2, 4, 2),
+      },
+      menuMessageLabel: {
+        color: theme.palette.text.secondary,
+        textAlign: "center",
+      },
+      menuOptionContainer: {
+        padding: theme.spacing(0, 1),
+      },
+      menuOption: {
+        padding: theme.spacing(2),
+        borderRadius: theme.shape.borderRadius,
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        cursor: "pointer",
+        "&:hover": {
+          backgroundColor: theme.palette.background.subtleSlate,
+        },
+      },
+      menuGroup: {
+        padding: theme.spacing(2, 2, 2, 1),
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+      },
+      menuOptionLabel: {
+        color: theme.palette.text.primary,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      menuGroupLabel: {
+        color: theme.palette.text.tertiary,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+    }
+  })

package/src/lib/components/vention-counter/vention-counter.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { VentionCounter } from "./vention-counter"
+
+const meta: Meta<typeof VentionCounter> = {
+  component: VentionCounter,
+  title: "Components/VentionCounter",
+}
+export default meta
+type Story = StoryObj<typeof VentionCounter>
+
+export const Default: Story = {
+  args: {
+    size: "medium",
+    variant: "filled",
+    color: "blue",
+    value: 3,
+  },
+}

package/src/lib/components/vention-counter/vention-counter.test.tsx

@@ -0,0 +1,116 @@
+import "@testing-library/jest-dom"
+
+import { screen } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionCounter, VentionCounterColors, VentionCounterVariants } from "./vention-counter"
+
+describe("VentionCounter", () => {
+  it("render the correct value", () => {
+    renderWithTheme(<VentionCounter color="red" size="medium" value={5} variant="filled" />)
+    expect(screen.getByText("5")).toBeInTheDocument()
+  })
+
+  it("render with small size", () => {
+    renderWithTheme(<VentionCounter color="blue" size="small" value={10} variant="outlined" />)
+    const textElement = screen.getByText("9+")
+    expect(textElement).toHaveClass("MuiTypography-uiText12Medium")
+  })
+
+  it("render with medium or large size", () => {
+    renderWithTheme(<VentionCounter color="green" size="large" value={15} variant="subtle" />)
+    const textElement = screen.getByText("15")
+    expect(textElement).toHaveClass("MuiTypography-uiText14Medium")
+  })
+
+  const combinations: Array<[VentionCounterColors, VentionCounterVariants]> = [
+    ["red", "filled"],
+    ["red", "subtle"],
+    ["red", "outlined"],
+    ["blue", "filled"],
+    ["blue", "subtle"],
+    ["blue", "outlined"],
+    ["green", "filled"],
+    ["green", "subtle"],
+    ["green", "outlined"],
+    ["yellow", "filled"],
+    ["yellow", "subtle"],
+    ["yellow", "outlined"],
+    ["black", "filled"],
+    ["black", "subtle"],
+    ["black", "outlined"],
+  ]
+
+  combinations.forEach(([color, variant]) => {
+    it(`renders with ${color} color and ${variant} variant`, () => {
+      renderWithTheme(<VentionCounter color={color} size="medium" value={5} variant={variant} />)
+      const counterElement = screen.getByText("5")
+      expect(counterElement).toBeInTheDocument()
+    })
+  })
+  describe("VentionCounter - value display logic", () => {
+    it("shows '9+' for small size when value > 9", () => {
+      renderWithTheme(<VentionCounter color="red" size="small" value={12} variant="filled" />)
+      expect(screen.getByText("9+")).toBeInTheDocument()
+    })
+
+    it("shows value for small size when value <= 9", () => {
+      renderWithTheme(<VentionCounter color="red" size="small" value={7} variant="filled" />)
+      expect(screen.getByText("7")).toBeInTheDocument()
+    })
+
+    it("shows '99+' for medium size when value > 99", () => {
+      renderWithTheme(<VentionCounter color="blue" size="medium" value={120} variant="outlined" />)
+      expect(screen.getByText("99+")).toBeInTheDocument()
+    })
+
+    it("shows value for medium size when value <= 99", () => {
+      renderWithTheme(<VentionCounter color="green" size="medium" value={88} variant="subtle" />)
+      expect(screen.getByText("88")).toBeInTheDocument()
+    })
+
+    it("shows '99+' for large size when value > 99", () => {
+      renderWithTheme(<VentionCounter color="yellow" size="large" value={150} variant="filled" />)
+      expect(screen.getByText("99+")).toBeInTheDocument()
+    })
+
+    it("shows value for large size when value <= 99", () => {
+      renderWithTheme(<VentionCounter color="black" size="large" value={42} variant="outlined" />)
+      expect(screen.getByText("42")).toBeInTheDocument()
+    })
+  })
+
+  describe("VentionCounter - style application", () => {
+    it("applies correct class for small size", () => {
+      renderWithTheme(<VentionCounter color="red" size="small" value={1} variant="filled" />)
+      const text = screen.getByText("1")
+      expect(text).toHaveClass("MuiTypography-uiText12Medium")
+    })
+
+    it("applies correct class for medium size", () => {
+      renderWithTheme(<VentionCounter color="blue" size="medium" value={2} variant="subtle" />)
+      const text = screen.getByText("2")
+      expect(text).toHaveClass("MuiTypography-uiText14Medium")
+    })
+
+    it("applies correct class for large size", () => {
+      renderWithTheme(<VentionCounter color="green" size="large" value={3} variant="outlined" />)
+      const text = screen.getByText("3")
+      expect(text).toHaveClass("MuiTypography-uiText14Medium")
+    })
+  })
+
+  describe("VentionCounter - renders with all color and variant combinations", () => {
+    const colors: VentionCounterColors[] = ["red", "blue", "green", "yellow", "black"]
+    const variants: VentionCounterVariants[] = ["filled", "subtle", "outlined"]
+
+    colors.forEach(color => {
+      variants.forEach(variant => {
+        it(`renders with color=${color} and variant=${variant}`, () => {
+          renderWithTheme(<VentionCounter color={color} size="medium" value={5} variant={variant} />)
+          expect(screen.getByText("5")).toBeInTheDocument()
+        })
+      })
+    })
+  })
+})

package/src/lib/components/vention-counter/vention-counter.tsx

@@ -0,0 +1,165 @@
+import { Theme, Typography } from "@mui/material"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import { tss } from "tss-react/mui"
+
+type VentionCounterSizes = StrictExtract<Sizes, "small" | "medium" | "large">
+export type VentionCounterVariants = "filled" | "subtle" | "outlined"
+export type VentionCounterColors = "red" | "blue" | "green" | "yellow" | "black"
+
+interface VentionCounterProps {
+  color: VentionCounterColors
+  size: VentionCounterSizes
+  value: number
+  variant: VentionCounterVariants
+  "data-testid"?: string
+}
+
+export const VentionCounter = (props: VentionCounterProps) => {
+  const { classes } = useStyles({ size: props.size, color: props.color, variant: props.variant })
+
+  return (
+    <div className={classes.root} data-testid={props["data-testid"]}>
+      <Typography textAlign="center" variant={props.size === "small" ? "uiText12Medium" : "uiText14Medium"}>
+        {getShownValue(props)}
+      </Typography>
+    </div>
+  )
+}
+
+const getShownValue = (props: Pick<VentionCounterProps, "size" | "value">) => {
+  const { value, size } = props
+  const displayCap = size === "small" ? 9 : 99
+
+  return value > displayCap ? `${displayCap}+` : value.toString()
+}
+
+const useStyles = tss
+  .withParams<{ size: VentionCounterSizes; color: VentionCounterColors; variant: VentionCounterVariants }>()
+  .create(({ size, color, variant, theme }) => {
+    const { height, width } = getDimensions(size)
+    const { background, borderColor, textColor } = getColors(color, variant, theme)
+
+    return {
+      root: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width,
+        height,
+        background,
+        color: textColor,
+        border: borderColor && `0.5px solid ${borderColor}`,
+        borderRadius: 999,
+      },
+    }
+  })
+
+const getDimensions = (size: VentionCounterSizes) => {
+  switch (size) {
+    case "small":
+      return { height: 16, width: 16 }
+    case "medium":
+      return { height: 24, width: 24 }
+    case "large":
+      return { height: 32, width: 32 }
+  }
+}
+
+type CounterStyle = {
+  background: string | null
+  borderColor: string | null
+  textColor: string
+}
+
+const counterStyleMap: Record<VentionCounterColors, Record<VentionCounterVariants, (theme: Theme) => CounterStyle>> = {
+  red: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.destructive,
+      borderColor: "none",
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleDestructive,
+      borderColor: theme.palette.border.subtleDestructive,
+      textColor: theme.palette.text.negative,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.subtleDestructive,
+      textColor: theme.palette.text.negative,
+    }),
+  },
+  blue: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.blue,
+      borderColor: null,
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleBlue,
+      borderColor: theme.palette.border.blueSubtle,
+      textColor: theme.palette.text.brand,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.blueSubtle,
+      textColor: theme.palette.text.brand,
+    }),
+  },
+  green: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.success,
+      borderColor: null,
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleSuccess,
+      borderColor: theme.palette.border.subtleSuccess,
+      textColor: theme.palette.text.positive,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.subtleSuccess,
+      textColor: theme.palette.text.positive,
+    }),
+  },
+  yellow: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.warning,
+      borderColor: null,
+      textColor: theme.palette.common.black,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleWarning,
+      borderColor: theme.palette.border.subtleWarning,
+      textColor: theme.palette.text.warning,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.subtleWarning,
+      textColor: theme.palette.text.warning,
+    }),
+  },
+  black: {
+    filled: (theme: Theme) => ({
+      background: theme.palette.background.defaultInverse,
+      borderColor: null,
+      textColor: theme.palette.common.white,
+    }),
+    subtle: (theme: Theme) => ({
+      background: theme.palette.background.subtleSlate,
+      borderColor: theme.palette.border.main,
+      textColor: theme.palette.text.primary,
+    }),
+    outlined: (theme: Theme) => ({
+      background: null,
+      borderColor: theme.palette.border.main,
+      textColor: theme.palette.text.primary,
+    }),
+  },
+}
+
+const getColors = (color: VentionCounterColors, variant: VentionCounterVariants, theme: Theme): CounterStyle => {
+  return counterStyleMap[color][variant](theme)
+}