@vention/machine-ui 3.27.0

package/src/lib/components/vention-text-input/vention-text-input.tsx

@@ -0,0 +1,205 @@
+import { FormHelperTextProps, InputLabelProps, TextField, TextFieldProps, Theme, InputAdornment, Box, Typography } from "@mui/material"
+import { tss } from "tss-react/mui"
+
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+import { InputStates } from "../shared/types/input-types"
+import {
+  getBackgroundColorFromState,
+  getBorderColorFromState,
+  getInputHeight,
+  getInputPaddingStyles,
+  getTypography,
+} from "../shared/styles/input-styles"
+
+type VentionFormHelperTextProps = FormHelperTextProps & { "data-testid"?: string }
+type VentionInputLabelProps = Partial<InputLabelProps> & { "data-testid"?: string }
+type VentionInputVariants = "outlined" | "shaded"
+
+export interface VentionTextInputProps extends Omit<TextFieldProps, "variant" | "error" | "disabled" | "FormHelperTextProps" | "size"> {
+  variant?: VentionInputVariants
+  state?: InputStates
+  className?: string
+  FormHelperTextProps?: VentionFormHelperTextProps
+  "data-testid"?: string
+  InputLabelProps?: VentionInputLabelProps
+  size?: StrictExtract<Sizes, "x-small" | "small" | "medium" | "large" | "x-large" | "xx-large">
+  rightItemText?: string
+  leftItemText?: string
+}
+
+export const VentionTextInput = ({ state = "default", variant, size, rightItemText, leftItemText, ...props }: VentionTextInputProps) => {
+  const { classes } = useStyles({ size, variant, state })
+
+  const inputProps = {
+    ...props.InputProps,
+    disabled: state === "disabled",
+    ...(leftItemText
+      ? {
+          startAdornment: (
+            <InputAdornment position="start" className={classes.leftItem}>
+              <Box display="flex" alignItems="center" height="100%">
+                <Typography className={classes.leftItemText}>{leftItemText}</Typography>
+              </Box>
+            </InputAdornment>
+          ),
+        }
+      : {}),
+    ...(rightItemText
+      ? {
+          endAdornment: (
+            <InputAdornment position="end" className={classes.rightItem}>
+              <Box display="flex" alignItems="center" height="100%">
+                <Typography className={classes.rightItemText}>{rightItemText}</Typography>
+              </Box>
+            </InputAdornment>
+          ),
+        }
+      : {}),
+  }
+
+  return (
+    <TextField
+      classes={{ root: classes.root }}
+      /**
+       * The variant is always outlined.
+       * the shaded variant is used only in the useStyles because TextField does not support custom variants.
+       *
+       * More: https://github.com/mui/material-ui/issues/37846#issuecomment-1639917252
+       */
+      {...props}
+      value={(props.type === "number" || props.type === "tel") && (props.value === undefined || props.value === null) ? "" : props.value}
+      variant="outlined"
+      error={state === "error"}
+      helperText={state !== "disabled" && props.helperText}
+      InputProps={inputProps}
+    />
+  )
+}
+
+const useStyles = tss.withParams<Pick<VentionTextInputProps, "size" | "variant" | "state">>().create(({ size, variant, state, theme }) => {
+  const typographyVariants = getTypography(size, theme)
+
+  return {
+    root: {
+      gap: theme.spacing(1),
+      display: "flex",
+      " & .MuiInputBase-root": {
+        minWidth: theme.spacing(9),
+        margin: 0,
+        padding: 0,
+        borderRadius: getBorderRadius(size),
+        height: getInputHeight(size, theme),
+
+        // Default state
+        "& .MuiOutlinedInput-notchedOutline": {
+          borderColor: getBorderColorFromState(state, theme),
+          backgroundColor: getFieldSetBackgroundColor(state, theme, variant),
+        },
+        // Hover state
+        "&:hover .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${getBorderColorFromState(state === "disabled" ? state : "hover", theme)}`,
+          backgroundColor: getBackgroundColorFromState(state === "disabled" ? state : "hover", theme),
+        },
+        // Focused state
+        "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${getBorderColorFromState(state === "disabled" ? state : "focused", theme)}`,
+          backgroundColor: getBackgroundColorFromState(state === "disabled" ? state : "focused", theme),
+        },
+        // Disabled state
+        "&.Mui-disabled .MuiOutlinedInput-notchedOutline": {
+          border: `1px solid ${getBorderColorFromState("disabled", theme)}`,
+          backgroundColor: getBackgroundColorFromState("disabled", theme),
+        },
+      },
+      " & .MuiInputBase-input": {
+        ...typographyVariants.text,
+        zIndex: 1,
+        backgroundColor: "transparent",
+        ...getInputPaddingStyles(size, theme),
+      },
+      " & .MuiInputBase-input::placeholder": {
+        color: theme.palette.text.tertiary,
+        opacity: 1,
+      },
+      " & .MuiInputAdornment-root": {
+        maxHeight: "none",
+        height: "100%",
+      },
+      " & .MuiInputLabel-root": {
+        marginBottom: 0,
+        ...typographyVariants.label,
+      },
+      " & .MuiFormHelperText-root": {
+        marginTop: "2px",
+        color: getLabelColor(state, theme),
+        ...typographyVariants.helperText,
+      },
+      ".MuiOutlinedInput-notchedOutline > legend": {
+        // Bootstrap appears to override this with extra margin, so we need to reset it
+        margin: 0,
+      },
+    },
+    rightItem: {
+      height: "100%",
+      boxSizing: "border-box",
+      paddingRight: theme.spacing(2),
+      paddingLeft: theme.spacing(2),
+      borderTopRightRadius: getBorderRadius(size),
+      borderBottomRightRadius: getBorderRadius(size),
+      backgroundColor: theme.palette.background.surface1,
+      border: `1px solid ${theme.palette.divider}`,
+      margin: 0,
+    },
+    rightItemText: {
+      color: theme.palette.text.primary,
+      fontSize: 10,
+    },
+    leftItem: {
+      height: "100%",
+      boxSizing: "border-box",
+      paddingLeft: theme.spacing(2),
+      paddingRight: theme.spacing(2),
+      borderTopLeftRadius: getBorderRadius(size),
+      borderBottomLeftRadius: getBorderRadius(size),
+      backgroundColor: theme.palette.background.surface1,
+      border: `1px solid ${theme.palette.divider}`,
+      margin: 0,
+    },
+    leftItemText: {
+      color: theme.palette.text.primary,
+      fontSize: 10,
+    },
+  }
+})
+
+const getBorderRadius = (size: VentionTextInputProps["size"]) => {
+  switch (size) {
+    case "x-small":
+      return "2px"
+    case "small":
+      return "2px"
+    default:
+      return "4px"
+  }
+}
+
+const getLabelColor = (state: VentionTextInputProps["state"], theme: Theme) => {
+  switch (state) {
+    case "warning":
+      return theme.palette.text.warning
+    case "success":
+      return theme.palette.text.positive
+    case "error":
+      return theme.palette.text.negative
+    default:
+      return undefined
+  }
+}
+
+const getFieldSetBackgroundColor = (state: InputStates, theme: Theme, variant: VentionTextInputProps["variant"]) => {
+  if (variant === "shaded" && state !== "disabled") {
+    return `${theme.palette.background.inputShaded}${state === "error" ? " !important" : ""}`
+  }
+
+  return getBackgroundColorFromState(state, theme)
+}

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { VentionTooltip, VentionTooltipProps } from "./vention-tooltip"
+import React from "react"
+
+const meta: Meta<typeof VentionTooltip> = {
+  component: VentionTooltip,
+  title: "Components/VentionTooltip",
+}
+export default meta
+type Story = StoryObj<typeof VentionTooltip>
+
+const Template = (args: VentionTooltipProps) => {
+  return (
+    <div style={{ display: "inline-block", marginTop: 100, marginLeft: 300 }}>
+      <VentionTooltip {...args}>
+        <span>Hover Me!</span>
+      </VentionTooltip>
+    </div>
+  )
+}
+
+export const Default: Story = Template.bind({})
+Default.args = {
+  title: "This is the tooltip content!",
+}

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

@@ -0,0 +1,19 @@
+import { VentionTooltip } from "./vention-tooltip"
+import { renderWithTheme } from "../../testing/utils"
+import userEvent from "@testing-library/user-event"
+
+describe("<VentionTooltip />", () => {
+  it("should render correctly", async () => {
+    const tooltipText = "tooltip text"
+    const { getByTestId, findByRole } = renderWithTheme(
+      <VentionTooltip title={tooltipText}>
+        <span data-testid="anchor">anchor element</span>
+      </VentionTooltip>
+    )
+
+    const anchor = getByTestId("anchor")
+    await userEvent.hover(anchor)
+
+    expect(await findByRole("tooltip", { name: tooltipText })).toBeInTheDocument()
+  })
+})

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

@@ -0,0 +1,53 @@
+import { Tooltip, TooltipProps } from "@mui/material"
+import { tss } from "tss-react/mui"
+
+// Import theme file to load TypeScript module augmentations for custom MUI theme properties
+// This enables TypeScript to recognize custom palette properties like theme.palette.background.tooltip
+// and custom typography variants like "uiText12Medium"
+import "../../theme/machine-ui-theme"
+
+export interface VentionTooltipProps extends TooltipProps {
+  // Redefining the placement type here makes it so storybook renders a select with only those options in the controls. Purely for convenience
+  placement?:
+    | "top"
+    | "top-start"
+    | "top-end"
+    | "right"
+    | "right-start"
+    | "right-end"
+    | "bottom"
+    | "bottom-start"
+    | "bottom-end"
+    | "left"
+    | "left-start"
+    | "left-end"
+  classes?: Partial<ReturnType<typeof useStyles>["classes"]>
+}
+
+export const VentionTooltip = ({
+  children,
+  arrow = true,
+  placement = "top-end",
+  classes: classesOverrides,
+  ...props
+}: VentionTooltipProps) => {
+  const { classes } = useStyles({ classesOverrides })
+
+  return (
+    <Tooltip {...props} classes={classes} arrow={arrow} placement={placement}>
+      <span>{children}</span>
+    </Tooltip>
+  )
+}
+
+const useStyles = tss.create(({ theme }) => ({
+  tooltip: {
+    backgroundColor: theme.palette.background.tooltip,
+    color: theme.palette.text.primaryOnColor,
+    padding: theme.spacing(1, 2),
+    ...theme.typography.uiText12Medium,
+  },
+  arrow: {
+    color: theme.palette.background.tooltip,
+  },
+}))

package/src/lib/components/vention-tree-item/vention-collapsible-caret-button.tsx

@@ -0,0 +1,42 @@
+import { FC } from "react"
+import { IconCaretRightFilled } from "@tabler/icons-react"
+import { Box } from "@mui/material"
+import { tss } from "tss-react/mui"
+
+/**
+ * Caret button that is used to collapse and expand the tree item
+ */
+interface VentionCollapsibleCaretButtonProps {
+  isExpanded: boolean
+  isVisible: boolean
+  onClick: (event: React.MouseEvent<HTMLDivElement>) => void
+  dataTestid?: string
+}
+
+export const VentionCollapsibleCaretButton: FC<VentionCollapsibleCaretButtonProps> = ({ isVisible, isExpanded, onClick, dataTestid }) => {
+  const { classes } = useStyles({ isVisible, isExpanded })
+
+  return (
+    <Box
+      component={"div"}
+      className={classes.root}
+      onClick={onClick}
+      data-testid={dataTestid ? `${dataTestid}-collapse-button` : "collapsibleCaretButton"}
+    >
+      <IconCaretRightFilled size={16} />
+    </Box>
+  )
+}
+
+const useStyles = tss.withParams<{ isVisible: boolean; isExpanded: boolean }>().create(({ isVisible, isExpanded, theme }) => {
+  return {
+    root: {
+      display: "flex",
+      visibility: isVisible ? "visible" : "hidden",
+      alignItems: "center",
+      transition: "transform 0.2s",
+      transform: isExpanded ? "rotate(90deg)" : "rotate(0deg)",
+      color: theme.palette.icon.tertiaryHover,
+    },
+  }
+})