@vention/machine-ui 3.29.0 → 3.29.1-test.1

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

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

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

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

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

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