@vention/machine-ui 3.27.0 → 3.29.1-test.0

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

@@ -1,295 +0,0 @@
-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

@@ -1,27 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,82 +0,0 @@
-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

@@ -1,65 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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

@@ -1,74 +0,0 @@
-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,
-      },
-    },
-  }
-})