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

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

@@ -1,401 +0,0 @@
-import { Typography, useTheme } from "@mui/material"
-import {
-  ReactElement,
-  useState,
-  MouseEvent,
-  Children,
-  useCallback,
-  forwardRef,
-  ForwardRefExoticComponent,
-  RefAttributes,
-  useEffect,
-} from "react"
-import { tss } from "tss-react/mui"
-import { VentionCollapsibleCaretButton } from "./vention-collapsible-caret-button"
-import { applyDefaultProps } from "../../utilities"
-import { IconAlertTriangleFilled } from "@tabler/icons-react"
-import { VentionIconButton } from "../vention-button/vention-icon-button/vention-icon-button"
-import { VentionTextInput } from "../vention-text-input/vention-text-input"
-import { COLORS } from "../../theme/colors"
-
-/** This is the default height of the tree item. This value only changes if you stack multiple captionRight elements.
- * This is needed for Machinebuilder for virtualization.
- */
-export const DEFAULT_VENTION_TREE_ITEM_HEIGHT = 32
-
-interface VentionTreeItemProps {
-  labelText: string
-  indentLevel?: number | undefined
-  hasWarning?: boolean | undefined
-  icon?: ReactElement | undefined
-  captionsRight?:
-    | {
-        text: string
-        color?: string
-        onClick?: (e: MouseEvent) => void
-      }[]
-    | undefined
-  actionButtons?:
-    | {
-        component: ReactElement
-        showOnHover?: boolean
-        onClick: (e: MouseEvent) => void
-      }[]
-    | undefined
-  onClick?: ((e: MouseEvent) => void) | undefined
-  onExpansionChange?: ((isExpanded: boolean) => void) | undefined
-  onLabelChange?: ((newLabel: string) => void) | undefined
-  onMouseEnter?: ((e: MouseEvent) => void) | undefined
-  onMouseLeave?: ((e: MouseEvent) => void) | undefined
-  onContextMenu?: ((e: MouseEvent) => void) | undefined
-  isSelected?: boolean | undefined
-  isRenaming?: boolean | undefined
-  onRenaming?: ((isRenaming: boolean) => void) | undefined
-  classes?: Partial<ReturnType<typeof useStyles>["classes"]> | undefined
-  children?: ReactElement<typeof VentionTreeItem> | ReactElement<typeof VentionTreeItem>[] | undefined
-  dataTestid?: string | undefined
-  isExpanded?: boolean | undefined
-  collapsible?: boolean | undefined
-}
-
-const defaultProps: Partial<VentionTreeItemProps> = {
-  indentLevel: 0,
-  hasWarning: false,
-  icon: null,
-  isSelected: false,
-  isExpanded: true,
-  isRenaming: false,
-  classes: {},
-  children: [],
-  collapsible: true,
-}
-
-export const VentionTreeItem: ForwardRefExoticComponent<VentionTreeItemProps & RefAttributes<HTMLDivElement>> = forwardRef<
-  HTMLDivElement,
-  VentionTreeItemProps
->((inputProps: VentionTreeItemProps, ref: React.ForwardedRef<HTMLDivElement>) => {
-  const theme = useTheme()
-  const {
-    isExpanded,
-    onExpansionChange: setIsExpanded,
-    labelText,
-    classes: classesOverrides,
-    hasWarning,
-    isSelected,
-    captionsRight,
-    onLabelChange,
-    actionButtons,
-    onClick,
-    indentLevel,
-    onContextMenu,
-    onMouseEnter,
-    icon,
-    onMouseLeave,
-    children,
-    dataTestid,
-    isRenaming,
-    onRenaming,
-    collapsible,
-  } = applyDefaultProps(inputProps, defaultProps)
-  const [isHovering, setIsHovering] = useState(false)
-  const [label, setLabel] = useState(labelText)
-
-  const { classes, cx } = useStyles({
-    classesOverrides,
-    hasWarning: hasWarning,
-    isSelected: isSelected,
-    isExpanded,
-    captionsRight: captionsRight,
-    indentLevel: indentLevel,
-  })
-
-  const handleRenaming = () => {
-    if (onRenaming) {
-      onRenaming(true)
-    }
-  }
-
-  // Need this useEffect for now to be able to set the label outside of this component...
-  useEffect(() => {
-    setLabel(labelText)
-  }, [labelText])
-
-  const handleIsExpandedToggle = (event: MouseEvent) => {
-    event.stopPropagation()
-
-    const expanded = !isExpanded
-    if (setIsExpanded) {
-      setIsExpanded(expanded)
-    }
-  }
-
-  const handleRename = (newLabel: string) => {
-    onLabelChange?.(newLabel)
-  }
-
-  const showActionButtonContainer = useCallback(() => {
-    if (actionButtons === undefined) return false
-
-    return actionButtons.some(button => !button.showOnHover) || (isHovering && actionButtons.some(button => button.showOnHover))
-  }, [actionButtons, isHovering])
-
-  const handleOnClick = (event: MouseEvent) => {
-    event.stopPropagation()
-    onClick?.(event)
-  }
-
-  const isCaretVisible = Children.count(children) > 0
-
-  return (
-    <div className={classes.root} onClick={handleOnClick} ref={ref}>
-      <div
-        data-testid="mainContent"
-        className={classes.mainContent}
-        onContextMenu={(event: MouseEvent) => onContextMenu?.(event)}
-        onMouseEnter={(event: MouseEvent) => {
-          if (!isSelected) {
-            onMouseEnter?.(event)
-            setIsHovering(true)
-          }
-        }}
-        onMouseLeave={(event: MouseEvent) => {
-          if (!isSelected) {
-            onMouseLeave?.(event)
-            setIsHovering(false)
-          }
-        }}
-      >
-        <div className={classes.singleLineContainer}>
-          {collapsible && (
-            <VentionCollapsibleCaretButton
-              isVisible={isCaretVisible}
-              isExpanded={isExpanded}
-              onClick={handleIsExpandedToggle}
-              dataTestid={dataTestid}
-            />
-          )}
-          <div data-testid={"treeItemIcon"} className={classes.iconContainer}>
-            {icon}
-          </div>
-          {/* Label/Rename Input */}
-          <div className={classes.labelContainer} data-testid={dataTestid} onDoubleClick={handleRenaming}>
-            <Typography className={classes.label} variant="uiText12Regular" title={label}>
-              {isRenaming ? (
-                <VentionTextInput
-                  autoFocus
-                  value={label}
-                  size="small"
-                  inputProps={{
-                    sx: {
-                      paddingLeft: theme.spacing(2),
-                    },
-                  }}
-                  data-testid="tree-item-text-input"
-                  onChange={event => setLabel(event.target.value)}
-                  onBlur={() => handleRename(label)}
-                  onKeyUp={event => {
-                    if (event.key === "Enter") {
-                      handleRename(label)
-                    }
-                  }}
-                />
-              ) : (
-                label
-              )}
-            </Typography>
-          </div>
-          {/* ActionButtons */}
-          {showActionButtonContainer() && (
-            <div className={classes.actionButtonsContainer} data-testid="actionButtonContainer">
-              {actionButtons.map((button, index) => {
-                const handleButtonOnClick = (event: MouseEvent) => {
-                  event.stopPropagation()
-                  button.onClick(event)
-                }
-
-                return (
-                  <VentionIconButton
-                    key={index}
-                    variant="shaded"
-                    className={`${classes.actionButton} ${button.showOnHover ? classes.showOnHover : ""}`}
-                    data-testid={`actionButtonContainer-${index}`}
-                    onClick={handleButtonOnClick}
-                  >
-                    {button.component}
-                  </VentionIconButton>
-                )
-              })}
-            </div>
-          )}
-        </div>
-        {/* captionRight */}
-        {captionsRight && captionsRight.length > 0 && (
-          <div className={classes.captionRightContainer} data-testid="captionRight">
-            {captionsRight.map((caption, index) => (
-              <div
-                key={index}
-                className={cx(classes.captionRight, !!caption.onClick && classes.clickableCaptionRight)}
-                onClick={
-                  caption.onClick
-                    ? (event: MouseEvent) => {
-                        event.stopPropagation()
-                        caption.onClick(event)
-                      }
-                    : undefined
-                }
-                style={{ color: caption.color }}
-                data-testid={`captionRight-${index}`}
-              >
-                <Typography className={cx(classes.label, classes.captionRightLabel)} variant="uiTableNumbers12Reg" title={caption.text}>
-                  {caption.text}
-                </Typography>
-              </div>
-            ))}
-          </div>
-        )}
-        {hasWarning && <IconAlertTriangleFilled className={classes.alertIcon} size={16} color={theme.palette.icon.warning} />}
-      </div>
-      <div className={classes.childrenItems}>{children}</div>
-    </div>
-  )
-})
-
-const useStyles = tss
-  .withParams<{
-    hasWarning: boolean
-    isSelected: boolean
-    isExpanded: boolean
-    captionsRight: VentionTreeItemProps["captionsRight"]
-    indentLevel: number
-  }>()
-  .withNestedSelectors<"actionButton">()
-  .create(({ hasWarning, isSelected, isExpanded, theme, classes, indentLevel, captionsRight }) => {
-    const getBackgroundColor = () => {
-      if (isSelected) return theme.palette.button.shaded
-
-      return "white"
-    }
-
-    const backgroundColor = getBackgroundColor()
-    // We use an invisible border to avoid the content from shifting when the border is shown on hover
-    const invisibleBorder = `1px solid transparent`
-    // 22 is padding per indent
-    const paddingLeft = indentLevel * 22 + 16
-
-    // Check if we have multiple captions
-    const hasMultipleCaptions = captionsRight && captionsRight.length > 1
-
-    return {
-      root: {
-        display: "flex",
-        flexDirection: "column",
-        cursor: "pointer",
-        backgroundColor: theme.palette.background.default,
-        width: "100%",
-      },
-      mainContent: {
-        paddingTop: hasMultipleCaptions ? "5px" : "0px",
-        paddingBottom: hasMultipleCaptions ? "5px" : "0px",
-        paddingLeft: `${paddingLeft}px`,
-        paddingRight: theme.spacing(3),
-        border: invisibleBorder,
-        display: "flex",
-        alignItems: "center",
-        backgroundColor: backgroundColor,
-        color: theme.palette.text.primary,
-        [`&:hover .${classes.actionButton}`]: {
-          visibility: "visible",
-        },
-        [`&:hover`]: {
-          border: isSelected ? invisibleBorder : `1px solid ${theme.palette.border.blueSelected}`,
-        },
-        overflow: "hidden",
-        gap: theme.spacing(2),
-        minHeight: DEFAULT_VENTION_TREE_ITEM_HEIGHT,
-        boxSizing: "border-box",
-      },
-      singleLineContainer: {
-        display: "flex",
-        alignItems: "center",
-        gap: theme.spacing(2),
-        flex: 1,
-        alignSelf: hasMultipleCaptions ? "flex-start" : "center",
-        overflow: "hidden",
-      },
-      iconContainer: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center",
-      },
-      labelContainer: {
-        display: "flex",
-        overflow: "hidden",
-        flex: 1,
-        minWidth: "20px",
-      },
-      label: {
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        whiteSpace: "nowrap",
-        userSelect: "none",
-      },
-      captionRightContainer: {
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "flex-end",
-        justifyContent: "center",
-        overflow: "hidden",
-        gap: theme.spacing(2),
-        maxWidth: "80px",
-      },
-      captionRight: {
-        padding: theme.spacing(0, 1),
-        borderRadius: "2px",
-        overflow: "hidden",
-        textOverflow: "ellipsis",
-        maxWidth: "100%",
-        height: "16px",
-        color: theme.palette.text.secondary,
-        display: "flex",
-        alignItems: "center",
-        boxSizing: "border-box",
-      },
-      captionRightLabel: {
-        fontSize: "10px",
-      },
-      clickableCaptionRight: {
-        cursor: "pointer",
-        backgroundColor: COLORS.slate[200],
-        "&:hover": {
-          background: COLORS.slate[300],
-          color: theme.palette.text.primary,
-        },
-      },
-      actionButtonsContainer: {
-        gap: theme.spacing(1),
-        display: "flex",
-        alignItems: "center",
-      },
-      actionButton: {
-        display: "flex",
-        justifyContent: "center",
-        background: "none",
-        width: "24px",
-        height: "24px",
-        flexShrink: 0,
-      },
-      showOnHover: {
-        visibility: "hidden",
-        [`${classes.actionButton}:hover &`]: {
-          visibility: "visible",
-        },
-      },
-      childrenItems: {
-        display: `${isExpanded ? "flex" : "none"}`,
-        flexDirection: "column",
-      },
-      alertIcon: {
-        flexShrink: 0,
-      },
-    }
-  })

package/src/lib/components/vention-uploadfile/vention-uploadfile-utils.tsx

@@ -1,115 +0,0 @@
-import { COLORS } from "../../theme/colors"
-
-export type UploadedFileStyleProps = {
-  size: "large" | "medium" | "small"
-  style: "outline" | "shaded"
-  state: "indeterminate" | "success" | "error"
-}
-
-export type UploadedFileProps = {
-  fileName: string
-  fileSize: string
-  errorMessage?: string
-  onCancel?: () => void
-  onRemove?: () => void
-  onRetry?: () => void
-} & UploadedFileStyleProps
-
-const SIZE_CONFIG = {
-  large: {
-    gap: "12px",
-    height: "64px",
-    fontSize: "14px",
-    nameHeight: "24px",
-    padding: 12,
-    borderRadius: "6px",
-    trashIconSize: 24,
-    trashBorderRadius: "6px",
-  },
-  medium: {
-    gap: "8px",
-    height: "48px",
-    fontSize: "14px",
-    nameHeight: "24px",
-    padding: 8,
-    borderRadius: "6px",
-    trashIconSize: 20,
-    trashBorderRadius: "6px",
-  },
-  small: {
-    gap: "6px",
-    height: "32px",
-    fontSize: "12px",
-    nameHeight: "16px",
-    padding: 4,
-    borderRadius: "4px",
-    trashIconSize: 16,
-    trashBorderRadius: "4px",
-  },
-}
-
-const STYLE_CONFIG = {
-  outline: {
-    backgroundColor: "white",
-    border: { borderBottom: `1px solid ${COLORS.slate[200]}` },
-    borderRadius: "0px",
-    trashBackgroundColor: "white",
-  },
-  shaded: {
-    backgroundColor: COLORS.slate[50],
-    border: { border: `1px solid ${COLORS.slate[50]}` },
-    trashBackgroundColor: COLORS.slate[100],
-  },
-}
-
-// Container styling
-export const getContainerBackgroundColor = (style: UploadedFileStyleProps["style"]): string => {
-  return STYLE_CONFIG[style].backgroundColor
-}
-
-export const getContainerBorder = (style: UploadedFileStyleProps["style"]): { borderBottom?: string; border?: string } => {
-  return STYLE_CONFIG[style].border
-}
-
-// Layout properties
-export const getGap = (size: UploadedFileStyleProps["size"]): string => {
-  return SIZE_CONFIG[size].gap
-}
-
-export const getPadding = (size: UploadedFileStyleProps["size"], style: UploadedFileStyleProps["style"]): string => {
-  if (style === "outline") {
-    return `${SIZE_CONFIG[size].padding}px 0px`
-  }
-
-  return `${SIZE_CONFIG[size].padding}px`
-}
-
-export const getBorderRadius = (size: UploadedFileStyleProps["size"], style: UploadedFileStyleProps["style"]): string => {
-  if (style === "outline") {
-    return STYLE_CONFIG[style].borderRadius
-  }
-
-  return SIZE_CONFIG[size].borderRadius
-}
-
-// Typography
-export const getFontSize = (size: UploadedFileStyleProps["size"]): string => {
-  return SIZE_CONFIG[size].fontSize
-}
-
-export const getNameHeight = (size: UploadedFileStyleProps["size"]): string => {
-  return SIZE_CONFIG[size].nameHeight
-}
-
-// Trash icon styling
-export const getTrashBackgroundColor = (style: UploadedFileStyleProps["style"]): string => {
-  return STYLE_CONFIG[style].trashBackgroundColor
-}
-
-export const getTrashBorderRadius = (size: UploadedFileStyleProps["size"]): string => {
-  return SIZE_CONFIG[size].trashBorderRadius
-}
-
-export const getActionIconSize = (size: UploadedFileStyleProps["size"]): number => {
-  return SIZE_CONFIG[size].trashIconSize
-}

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

@@ -1,69 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-
-import { VentionUploadFile } from "./vention-uploadfile"
-
-const meta: Meta<typeof VentionUploadFile> = {
-  component: VentionUploadFile,
-  title: "Components/VentionUploadFile",
-}
-
-export default meta
-type Story = StoryObj<typeof VentionUploadFile>
-
-export const Default: Story = {
-  args: {
-    size: "large",
-    style: "shaded",
-    state: "success",
-    fileName: "File name placeholder",
-    fileSize: "2.4 MB",
-    errorMessage: "Error message placeholder",
-    onCancel: () => alert("Cancel clicked"),
-    onRemove: () => alert("Remove clicked"),
-    onRetry: () => alert("Retry clicked"),
-  },
-}
-
-export const LargeShadedSuccess: Story = {
-  args: {
-    size: "large",
-    style: "shaded",
-    state: "success",
-    fileName: "File name placeholder",
-    fileSize: "2.4 MB",
-    onRemove: () => alert("Remove clicked"),
-  },
-}
-
-export const MediumOutlineIndeterminate: Story = {
-  args: {
-    size: "medium",
-    style: "outline",
-    state: "indeterminate",
-    fileName: "File name placeholder",
-    fileSize: "2.4 MB",
-    onRemove: () => alert("Remove clicked"),
-  },
-}
-
-export const LargeShadedError: Story = {
-  args: {
-    size: "large",
-    style: "shaded",
-    state: "error",
-    fileName: "File name placeholder",
-    fileSize: "2.4 MB",
-    onRemove: () => alert("Remove clicked"),
-  },
-}
-
-export const SmallOutlineError: Story = {
-  args: {
-    size: "small",
-    style: "outline",
-    state: "error",
-    fileName: "File name placeholder",
-    fileSize: "2.4 MB",
-    onRemove: () => alert("Remove clicked"),
-  },
-}

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

@@ -1,88 +0,0 @@
-import { UploadedFileProps } from "./vention-uploadfile-utils"
-import { renderWithTheme } from "../../testing/utils"
-import { VentionUploadFile } from "./vention-uploadfile"
-
-const testCases: (UploadedFileProps & {
-  hasFileName: boolean
-  hasSpinner: boolean
-  hasFileSize: boolean
-  cancelButton: boolean
-  removeButton: boolean
-  retryButton: boolean
-})[] = [
-  {
-    size: "large",
-    state: "indeterminate",
-    style: "outline",
-    fileName: "example1.txt",
-    fileSize: "15 KB",
-    hasSpinner: true,
-    hasFileName: true,
-    hasFileSize: true,
-    cancelButton: true,
-    removeButton: false,
-    retryButton: false,
-  },
-  {
-    size: "medium",
-    state: "success",
-    style: "shaded",
-    fileName: "example2.txt",
-    fileSize: "1 MB",
-    hasSpinner: true,
-    hasFileName: true,
-    hasFileSize: false,
-    cancelButton: false,
-    removeButton: true,
-    retryButton: false,
-  },
-  {
-    size: "small",
-    state: "error",
-    style: "outline",
-    errorMessage: "Upload failed",
-    fileName: "example3.txt",
-    fileSize: "5 GB",
-    hasSpinner: true,
-    hasFileName: true,
-    hasFileSize: false,
-    cancelButton: false,
-    removeButton: true,
-    retryButton: true,
-  },
-]
-
-function testInDocument(element: HTMLElement | null, expected: boolean): void {
-  if (expected) {
-    expect(element).toBeInTheDocument()
-  } else {
-    expect(element).not.toBeInTheDocument()
-  }
-}
-
-describe("VentionUploadFile", () => {
-  it.each(testCases)("renders with props %o", props => {
-    const { queryByTestId } = renderWithTheme(<VentionUploadFile {...props} fileName="example.txt" fileSize="15 KB" />)
-    const spinnerContainer = queryByTestId("spinnerContainer")
-    testInDocument(spinnerContainer, props.hasSpinner)
-
-    const fileNameElement = queryByTestId("fileName")
-    testInDocument(fileNameElement, props.hasFileName)
-
-    const fileSizeElement = queryByTestId("fileSize")
-    testInDocument(fileSizeElement, props.hasFileSize)
-
-    const cancelButton = queryByTestId("cancelButton")
-    testInDocument(cancelButton, props.cancelButton)
-
-    const removeButton = queryByTestId("removeButton")
-    testInDocument(removeButton, props.removeButton)
-
-    const retryButton = queryByTestId("retryButtonContainer")
-    testInDocument(retryButton, props.retryButton)
-
-    const errorMessageElement = queryByTestId("errorMessage")
-    const shouldShowErrorMessage = props.state === "error" && props.errorMessage !== undefined
-    testInDocument(errorMessageElement, shouldShowErrorMessage)
-  })
-})