@vention/machine-ui 3.27.0

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

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

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

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

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