@vention/machine-ui 3.27.0

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

@@ -0,0 +1,295 @@
+import { Box, FormControl, FormHelperText, MenuItem, Select, SelectChangeEvent, SelectProps, Theme, Typography } from "@mui/material"
+import { useTheme } from "@mui/material/styles"
+import { IconAlertTriangleFilled } from "@tabler/icons-react"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import { ReactNode, useMemo } from "react"
+import { tss } from "tss-react/mui"
+import { InputStates } from "../shared/types/input-types"
+import {
+  getBackgroundColorFromState,
+  getBorderColorFromState,
+  getInputHeight,
+  getInputPaddingStyles,
+  getTypography,
+  typographyNameFromSizeMap,
+} from "../shared/styles/input-styles"
+import { VentionIcon } from "../vention-icon/vention-icon"
+
+export type VentionSelectMenuItem<T> = { value: T; displayText?: string; displayNode?: ReactNode }
+
+export interface VentionSelectProps extends Omit<SelectProps, "placeholder" | "size" | "defaultValue" | "label"> {
+  size: StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large">
+  variant: "outlined"
+  value: string | number | string[] | number[] | undefined
+  onChange: (event: SelectChangeEvent<VentionSelectProps["value"]>, child: ReactNode) => void
+  menuItems: VentionSelectMenuItem<string | number>[]
+  labelText?: string
+  isDisabled?: boolean
+  placeholder?: string
+  errorText?: string
+  isMultiple?: boolean
+  state?: StrictExtract<InputStates, "default" | "warning">
+}
+
+const getChevronIconSize = (size: VentionSelectProps["size"]) => {
+  switch (size) {
+    case "small":
+    case "medium":
+    case "large":
+      return 16
+    case "x-large":
+    case "xx-large":
+      return 32
+  }
+}
+
+export const VentionSelect = (props: VentionSelectProps) => {
+  const { classes } = useStyles(props)
+  const { size, placeholder, value, menuItems, labelText, isDisabled, onChange, errorText, isMultiple, state = "default", ...other } = props
+  const theme = useTheme()
+  const typographyVariants = typographyNameFromSizeMap[size]
+  const menuItemsMap = useMemo(() => new Map(menuItems.map(item => [item.value, item])), [menuItems])
+
+  return (
+    <FormControl fullWidth error={Boolean(errorText)}>
+      <Box display="flex" flexDirection="column" gap={theme.spacing(1)}>
+        {labelText && (
+          <Typography variant={typographyVariants.label} component="label">
+            {labelText}
+          </Typography>
+        )}
+        <Select
+          IconComponent={() => (
+            <div className={classes.chevronIconContainer}>
+              <VentionIcon type="chevron-down" size={getChevronIconSize(size)} color={theme.palette.icon.primary} />
+            </div>
+          )}
+          disabled={isDisabled}
+          displayEmpty
+          onChange={onChange}
+          value={value ?? ""}
+          MenuProps={{ classes: { paper: classes.dropdownStyle } }}
+          className={classes.selectContainer}
+          multiple={isMultiple}
+          renderValue={selected => {
+            if (!selected || (Array.isArray(selected) && selected.length === 0)) {
+              return (
+                <Typography variant={typographyVariants.text} className={classes.placeholder}>
+                  {placeholder}
+                </Typography>
+              )
+            }
+
+            if (isMultiple) {
+              if (!Array.isArray(selected)) throw new Error("Selected value must be an array when isMultiple is true")
+
+              const isOnlyText = selected.every(value => menuItemsMap.get(value)?.displayNode === undefined)
+
+              if (isOnlyText) {
+                const inputValue = selected
+                  .map((value: string | number) => {
+                    const menuItem = menuItemsMap.get(value)
+
+                    return menuItem?.displayText ?? value
+                  })
+                  .join(", ")
+
+                return <div className={classes.inputValue}>{inputValue}</div>
+              }
+
+              return (
+                <Box display="flex" flexWrap="nowrap" gap={theme.spacing(2)} className={classes.inputValue}>
+                  {selected.map((value: string | number) => {
+                    const menuItem = menuItemsMap.get(value)
+
+                    return <Box key={value}>{menuItem && "displayNode" in menuItem ? menuItem.displayNode : menuItem.displayText}</Box>
+                  })}
+                </Box>
+              )
+            }
+
+            if (Array.isArray(selected)) throw new Error("Selected value must be a string or number when isMultiple is false")
+
+            const menuItemSelected = menuItemsMap.get(selected)
+            const inputValue = menuItemSelected?.displayText ?? menuItemSelected?.displayNode ?? selected
+
+            return <div className={classes.inputValue}>{inputValue}</div>
+          }}
+          {...other}
+        >
+          {menuItems.map((item: VentionSelectMenuItem<string | number>) => (
+            <MenuItem key={item.value} value={item.value} className={classes.menuItem} disableRipple>
+              {"displayText" in item && <Typography variant={typographyVariants.text}>{item.displayText}</Typography>}
+              {"displayNode" in item && item.displayNode}
+            </MenuItem>
+          ))}
+        </Select>
+        {errorText && (
+          <FormHelperText error={Boolean(errorText)} classes={{ root: classes.formHelperText }}>
+            <IconAlertTriangleFilled size={getIconSize(props.size)} />
+            <Typography variant={typographyVariants.helperText}>{errorText}</Typography>
+          </FormHelperText>
+        )}
+      </Box>
+    </FormControl>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionSelectProps, "size" | "variant" | "isDisabled" | "labelText" | "value" | "errorText" | "state">>()
+  .create(({ theme, size, isDisabled, value, errorText, state }) => {
+    const textColor = getTextColor(theme, isDisabled, Boolean(value))
+    const height = getInputHeight(size, theme)
+    const typographyVariant = getTypography(size, theme)
+
+    return {
+      selectContainer: {
+        boxSizing: "border-box",
+        marginBottom: 0,
+        color: textColor,
+        display: "flex",
+        alignItems: "center",
+        height,
+        borderRadius: theme.shape.borderRadius,
+        textAlign: "center",
+        "& .MuiSelect-select": {
+          ...theme.typography[typographyVariant.text],
+          display: "flex",
+          alignItems: "center",
+          overflow: "hidden",
+        },
+        ".MuiOutlinedInput-input": {
+          zIndex: 1,
+          ...getInputPaddingStyles(size, theme),
+        },
+        ".MuiSelect-iconOutlined": {
+          zIndex: 1,
+        },
+        // Hover state
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          border: !errorText && !isDisabled && `1px solid ${getBorderColorFromState(state === "warning" ? state : "hover", theme)}`,
+          backgroundColor: !errorText && !isDisabled && getBackgroundColorFromState(state === "warning" ? state : "hover", theme),
+        },
+        // Focused state
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          border: !errorText && `1px solid ${getBorderColorFromState(state === "warning" ? state : "focused", theme)}`,
+          backgroundColor: getBackgroundColorFromState(state === "warning" ? state : "focused", theme),
+        },
+        // Disabled state
+        "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+          border: !errorText && `1px solid ${getBorderColorFromState(state === "warning" ? state : "disabled", theme)}`,
+          backgroundColor: getBackgroundColorFromState(state === "warning" ? state : "disabled", theme),
+        },
+        // Default state
+        ".MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${getBorderColorFromState(state, theme)}`,
+          backgroundColor: getBackgroundColorFromState(state, theme),
+        },
+        "fieldset.MuiOutlinedInput-notchedOutline": {
+          top: "0px",
+
+          legend: {
+            /**
+             *  Fieldset is used by MUI for the outlined input.
+             *  The legend is used for a floating label, however we omit the default MUI label in favor of our own label.
+             *  The legend was adding margin, which resulted in a input which was not true to size.
+             */
+            display: "none",
+          },
+        },
+        // Icon dropdown
+        "& .MuiSelect-iconOutlined": {
+          top: "calc(50% - 12px)",
+        },
+      },
+      dropdownStyle: {
+        boxShadow: "0px 25px 50px -12px rgba(2, 6, 23, 0.18)",
+        border: `1px solid ${theme.palette.border.default}`,
+      },
+      menuItem: {
+        paddingTop: 0,
+        paddingBottom: 0,
+        marginBottom: 0,
+        height,
+        "&.Mui-selected, &.MuiMenuItem-root.Mui-selected:hover": {
+          backgroundColor: theme.palette.background.surface1,
+        },
+        "&.Mui-focusVisible, &.MuiMenuItem-root.Mui-focusVisible": {
+          backgroundColor: theme.palette.background.surface1active,
+        },
+        "&:hover": {
+          backgroundColor: theme.palette.background.surface1hover,
+        },
+      },
+      rootInputLabel: {
+        top: getPlaceholderTopOffset(size),
+        color: `${theme.palette.text.secondary} !important`,
+      },
+      formHelperText: {
+        marginLeft: 0,
+        display: "flex",
+        gap: theme.spacing(1),
+        alignItems: "center",
+      },
+      placeholder: {
+        color: theme.palette.text.tertiary,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+      },
+      inputValue: {
+        display: "flex",
+        color: theme.palette.text.primary,
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        whiteSpace: "nowrap",
+        ...typographyVariant.text,
+      },
+      chevronIconContainer: {
+        position: "absolute",
+        top: "50%",
+        transform: "translateY(-50%)",
+        zIndex: 1,
+        pointerEvents: "none",
+        right: getChevronIconsPadding(size, theme),
+      },
+    }
+  })
+
+const getChevronIconsPadding = (size: VentionSelectProps["size"], theme: Theme) => {
+  switch (size) {
+    case "small":
+      return theme.spacing(2)
+    case "medium":
+    case "large":
+      return theme.spacing(3)
+    case "x-large":
+    case "xx-large":
+      return theme.spacing(4)
+  }
+}
+
+const getTextColor = (theme: Theme, isDisabled: boolean, hasValue: boolean) => {
+  if (isDisabled) return theme.palette.text.disabled
+  if (hasValue) return theme.palette.text.primary
+
+  return theme.palette.text.secondary
+}
+
+const getPlaceholderTopOffset = (size: VentionSelectProps["size"]): number => {
+  if (size === "small") return -16
+  if (size === "medium") return -12
+  if (size === "large") return -8
+
+  return -4
+}
+
+const getIconSize = (size: VentionSelectProps["size"]) => {
+  switch (size) {
+    case "xx-large":
+      return 18
+    default:
+      return 14
+  }
+}

package/src/lib/components/vention-sidebar-item/vention-sidebar-item.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { VentionSidebarItem } from "./vention-sidebar-item"
+
+const meta: Meta<typeof VentionSidebarItem> = {
+  component: VentionSidebarItem,
+  title: "Components/VentionSidebarItem",
+  args: {
+    type: "profile",
+    title: "Sidebar Item",
+    subtitle: "This is an example sidebar item",
+    state: "default",
+    size: "xx-large",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof VentionSidebarItem>
+
+export const Default: Story = {
+  args: {
+    type: "profile",
+    title: "Sidebar Item",
+    subtitle: "This is an example sidebar item",
+    state: "default",
+    onClick: () => console.log("Clicked"),
+  },
+}

package/src/lib/components/vention-sidebar-item/vention-sidebar-item.test.tsx

@@ -0,0 +1,45 @@
+import { screen, fireEvent } from "@testing-library/react"
+import { VentionSidebarItem, VentionSidebarItemProps } from "./vention-sidebar-item"
+import { renderWithTheme } from "../../testing/utils"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+
+describe("VentionSidebarItem", () => {
+  const defaultProps: VentionSidebarItemProps = {
+    type: "profile",
+    title: "Test Title",
+    state: "default",
+    onClick: jest.fn(),
+  }
+
+  it("renders with default state", () => {
+    const { getByText, getByTestId } = renderWithTheme(<VentionSidebarItem {...defaultProps} />)
+    expect(getByText("Test Title")).toBeInTheDocument()
+    expect(getByTestId("vention-sidebar-item-button")).toHaveStyle({
+      border: "1px solid transparent",
+    })
+  })
+
+  it("renders with active state", () => {
+    const { getByTestId } = renderWithTheme(<VentionSidebarItem {...defaultProps} state="active" />)
+    expect(getByTestId("vention-sidebar-item-button")).toHaveStyle({
+      border: `1px solid ${machineUiTheme.palette.border.main}`,
+    })
+  })
+
+  it("renders with disabled state", () => {
+    const { getByRole, getByText } = renderWithTheme(<VentionSidebarItem {...defaultProps} state="disabled" />)
+    expect(getByRole("button")).toBeDisabled()
+    expect(getByText("Test Title")).toHaveStyle(`color: ${machineUiTheme.palette.text.tertiary}`)
+  })
+
+  it("calls onClick when clicked", () => {
+    renderWithTheme(<VentionSidebarItem {...defaultProps} />)
+    fireEvent.click(screen.getByRole("button"))
+    expect(defaultProps.onClick).toHaveBeenCalled()
+  })
+
+  it("renders subtitle when provided", () => {
+    const { getByText } = renderWithTheme(<VentionSidebarItem {...defaultProps} subtitle="Test Subtitle" />)
+    expect(getByText("Test Subtitle")).toBeInTheDocument()
+  })
+})

package/src/lib/components/vention-sidebar-item/vention-sidebar-item.tsx

@@ -0,0 +1,82 @@
+import { Button, Stack, Theme, Typography } from "@mui/material"
+import { IconChevronRight } from "@tabler/icons-react"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+import { tss } from "tss-react/mui"
+
+export interface VentionSidebarItemProps {
+  type: "profile"
+  title: string
+  state: "default" | "active" | "disabled"
+  subtitle?: string
+  size?: StrictExtract<Sizes, "xx-large">
+  onClick: () => void
+}
+
+export const VentionSidebarItem = (props: VentionSidebarItemProps) => {
+  const { classes } = useStyles({ state: props.state })
+  const isDisabled = props.state === "disabled"
+
+  return (
+    <Button
+      className={classes.sidebarItem}
+      onClick={props.onClick}
+      disabled={isDisabled}
+      disableRipple
+      disableFocusRipple
+      disableTouchRipple
+      data-testid="vention-sidebar-item-button"
+    >
+      <Stack direction="row" alignItems="center" justifyContent="space-between" gap={4}>
+        <div>
+          <Typography variant="heading24SemiBold" color={isDisabled ? `text.tertiary` : `text.primary`}>
+            {props.title}
+          </Typography>
+          <Typography variant="hmiText20Regular" color={isDisabled ? `text.tertiary` : `text.secondary`}>
+            {props.subtitle}
+          </Typography>
+        </div>
+        <IconChevronRight className={classes.icon} />
+      </Stack>
+    </Button>
+  )
+}
+
+const useStyles = tss.withParams<Pick<VentionSidebarItemProps, "state">>().create(({ theme, state }) => {
+  const backgroundColor = getBackgroundColor(state, theme)
+  const borderColor = getBorderColor(state, theme)
+  const iconColor = getIconColor(state, theme)
+
+  return {
+    sidebarItem: {
+      backgroundColor,
+      border: `1px solid ${borderColor}`,
+      borderRadius: theme.spacing(1),
+      textAlign: "left",
+      padding: `${theme.spacing(5)} ${theme.spacing(4)} ${theme.spacing(5)} ${theme.spacing(5)}`,
+      display: "block",
+    },
+    icon: {
+      color: iconColor,
+      width: theme.spacing(5),
+      height: theme.spacing(5),
+    },
+  }
+})
+
+const getBackgroundColor = (state: VentionSidebarItemProps["state"], theme: Theme) => {
+  if (state === "active") return theme.palette.background.surface1active
+
+  return "transparent"
+}
+
+const getBorderColor = (state: VentionSidebarItemProps["state"], theme: Theme) => {
+  if (state === "active") return theme.palette.border.main
+
+  return "transparent"
+}
+
+const getIconColor = (state: VentionSidebarItemProps["state"], theme: Theme) => {
+  if (state === "disabled") return theme.palette.text.tertiary
+
+  return theme.palette.text.secondary
+}

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

@@ -0,0 +1,65 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import React, { useEffect, useState } from "react"
+
+import { VentionSlider, VentionSliderProps } from "./vention-slider"
+
+const Template = (args: Partial<VentionSliderProps>) => {
+  const [value, setValue] = useState(args.value)
+
+  useEffect(() => {
+    setValue(args.value)
+  }, [args.value])
+
+  const handleChange = (_: unknown, newValue: number | number[]) => {
+    setValue(newValue as number)
+  }
+
+  return <VentionSlider {...args} value={value} onChange={handleChange} />
+}
+
+const meta: Meta<typeof VentionSlider> = {
+  component: VentionSlider,
+  title: "Components/VentionSlider",
+  argTypes: {
+    size: {
+      options: ["small", "medium"],
+      control: {
+        type: "radio",
+        defaultValue: "medium",
+      },
+    },
+    value: {
+      control: {
+        type: "number",
+        min: 0,
+        max: 100,
+        step: 1,
+        defaultValue: 42,
+      },
+    },
+  },
+  args: {
+    value: 42,
+    size: "medium",
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof VentionSlider>
+
+export const Default: Story = Template.bind({})
+Default.args = {
+  value: 42,
+}
+
+export const Small: Story = Template.bind({})
+Small.args = {
+  value: 42,
+  size: "small",
+}
+
+export const Disabled: Story = Template.bind({})
+Disabled.args = {
+  value: 42,
+  disabled: true,
+}

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

@@ -0,0 +1,35 @@
+import "@testing-library/jest-dom"
+
+import { fireEvent } from "@testing-library/react"
+import React from "react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { VentionSlider } from "./vention-slider"
+
+describe("VentionSlider", () => {
+  it("renders the component with the correct value", () => {
+    const { getByDisplayValue } = renderWithTheme(<VentionSlider value={0} />)
+    expect(getByDisplayValue("0")).toBeInTheDocument()
+  })
+  it("should call the onChange function when the slider value changes", () => {
+    const handle = jest.fn()
+    const { getByRole } = renderWithTheme(<VentionSlider value={0} onChange={handle} />)
+    const slider = getByRole("slider")
+    fireEvent.change(slider, { target: { value: 70 } })
+    expect(handle).toHaveBeenCalledWith(expect.anything(), 70, 0)
+  })
+
+  it("should render a large thumb", () => {
+    const { getByTestId } = renderWithTheme(<VentionSlider value={0} largeThumb />)
+    const thumb = getByTestId("slider").querySelector(".MuiSlider-thumb")
+    expect(thumb).toHaveStyle("height: 40px")
+    expect(thumb).toHaveStyle("width: 40px")
+  })
+
+  it("should render a disabled slider", () => {
+    const { getByTestId } = renderWithTheme(<VentionSlider value={0} disabled />)
+    const track = getByTestId("slider").querySelector(".MuiSlider-track")
+    expect(track).toHaveStyle(`color: ${machineUiTheme.palette.misc.sliderDisabled} `)
+  })
+})

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

@@ -0,0 +1,74 @@
+import Slider, { SliderOwnProps } from "@mui/material/Slider"
+import React from "react"
+import { tss } from "tss-react/mui"
+
+export interface VentionSliderProps extends SliderOwnProps {
+  largeThumb?: boolean
+}
+
+export const VentionSlider = (props: VentionSliderProps) => {
+  const { value, onChange, largeThumb, ...other } = props
+
+  const { classes } = useStyles({ largeThumb })
+
+  return (
+    <div className={classes.root}>
+      <Slider data-testid="slider" value={value} onChange={onChange} {...other} />
+    </div>
+  )
+}
+
+const useStyles = tss.withParams<Pick<VentionSliderProps, "largeThumb">>().create(({ theme, largeThumb }) => {
+  return {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+      gap: "24px",
+      "& .MuiSlider-root": {
+        width: "100%",
+      },
+      "& .MuiSlider-thumb": {
+        border: `2px solid #fff`,
+        color: theme.palette.primary.main,
+        "&:hover": {
+          color: theme.palette.button.primaryHover,
+        },
+        "&.Mui-active": {
+          color: theme.palette.button.primaryPressed,
+        },
+        height: largeThumb ? 40 : 16,
+        width: largeThumb ? 40 : 16,
+        "&.Mui-disabled": {
+          color: theme.palette.misc.sliderDisabled,
+        },
+      },
+      "& .MuiSlider-rail": {
+        color: theme.palette.misc.scrollbar,
+        height: 4,
+        ".Mui-disabled &": {
+          color: theme.palette.misc.sliderDisabled,
+        },
+      },
+      "& .MuiSlider-track": {
+        height: 4,
+        color: theme.palette.primary.main,
+        ".Mui-disabled &": {
+          color: theme.palette.misc.sliderDisabled,
+        },
+      },
+      "& .MuiSlider-sizeSmall": {
+        "& .MuiSlider-rail": {
+          height: 2,
+        },
+      },
+      "& .MuiSlider-thumbSizeSmall": {
+        height: largeThumb ? 24 : 12,
+        width: largeThumb ? 24 : 12,
+      },
+      "& .Mui-disabled .MuiSlider-track": {
+        color: theme.palette.misc.sliderDisabled,
+      },
+    },
+  }
+})