@vention/machine-ui 3.27.0

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

@@ -0,0 +1,122 @@
+import { Grid, Stack, Typography } from "@mui/material"
+import {
+  getGap,
+  getPadding,
+  getContainerBackgroundColor,
+  getContainerBorder,
+  getBorderRadius,
+  getFontSize,
+  getNameHeight,
+  getTrashBackgroundColor,
+  getTrashBorderRadius,
+  type UploadedFileProps,
+  type UploadedFileStyleProps,
+  getActionIconSize,
+} from "./vention-uploadfile-utils"
+import { tss } from "tss-react"
+import { COLORS } from "../../theme/colors"
+import { VentionIcon } from "../vention-icon/vention-icon"
+import { VentionIconButton } from "../vention-button/vention-icon-button/vention-icon-button"
+import { VentionSpinner } from "../vention-spinner/vention-spinner"
+
+/**
+ * A component that displays an uploaded file with its upload status, file name, file size, and a remove button.
+ */
+export function VentionUploadFile({
+  fileName,
+  fileSize,
+  errorMessage,
+  onCancel,
+  onRemove,
+  onRetry,
+  size,
+  style,
+  state,
+}: UploadedFileProps): JSX.Element {
+  const { classes } = useStyle({ size, style, state })
+
+  return (
+    <Grid container className={classes.container}>
+      <Grid item xs={"auto"} className={classes.spinnerContainer}>
+        <VentionSpinner type={state} size={size} />
+      </Grid>
+
+      <Grid item xs={true}>
+        <Stack>
+          <Typography title={fileName} className={classes.nameContainer} data-testid="fileName" noWrap>
+            {fileName}
+          </Typography>
+          {size === "large" && (
+            <Typography className={classes.sizeContainer} data-testid="fileSize">
+              {fileSize}
+            </Typography>
+          )}
+          {state === "error" && errorMessage && (
+            <Typography className={classes.errorMessage} data-testid="errorMessage">
+              {errorMessage}
+            </Typography>
+          )}
+        </Stack>
+      </Grid>
+
+      {state === "error" && (
+        <Grid item xs={"auto"} data-testid="retryButtonContainer">
+          <VentionIconButton onClick={onRetry} variant="outline" size={size} className={classes.actionButton}>
+            <VentionIcon type="reload" size={getActionIconSize(size)} />
+          </VentionIconButton>
+        </Grid>
+      )}
+
+      <Grid item xs={"auto"}>
+        {state === "indeterminate" ? (
+          <VentionIconButton onClick={onCancel} variant="outline" size={size} className={classes.actionButton} data-testid="cancelButton">
+            <VentionIcon type="close" size={getActionIconSize(size)} />
+          </VentionIconButton>
+        ) : (
+          <VentionIconButton onClick={onRemove} variant="outline" size={size} className={classes.actionButton} data-testid="removeButton">
+            <VentionIcon type="trash" size={getActionIconSize(size)} />
+          </VentionIconButton>
+        )}
+      </Grid>
+    </Grid>
+  )
+}
+
+const useStyle = tss.withParams<UploadedFileStyleProps>().create(({ size, style }) => ({
+  container: {
+    flexDirection: "row",
+    gap: getGap(size),
+    padding: getPadding(size, style),
+    alignItems: "center",
+    backgroundColor: getContainerBackgroundColor(style),
+    ...getContainerBorder(style),
+    borderRadius: getBorderRadius(size, style),
+    width: "100%",
+  },
+  spinnerContainer: {
+    display: "flex",
+  },
+  nameContainer: {
+    fontSize: getFontSize(size),
+    height: getNameHeight(size),
+    lineHeight: getNameHeight(size),
+    color: COLORS.slate[900],
+    overflow: "hidden",
+  },
+  sizeContainer: {
+    fontSize: "12px",
+    height: "16px",
+    lineHeight: "16px",
+    color: COLORS.slate[700],
+  },
+  errorMessage: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    color: COLORS.red[600],
+  },
+  actionButton: {
+    backgroundColor: getTrashBackgroundColor(style),
+    border: "none",
+    borderRadius: getTrashBorderRadius(size),
+  },
+}))

package/src/lib/testing/utils.tsx

@@ -0,0 +1,26 @@
+import "@testing-library/jest-dom"
+
+import { ThemeProvider } from "@mui/material/styles"
+import { RenderResult, render } from "@testing-library/react"
+import { ReactElement } from "react"
+
+import { machineUiTheme } from "../theme/machine-ui-theme"
+
+export const renderWithTheme = (component: ReactElement): RenderResult =>
+  render(<ThemeProvider theme={machineUiTheme}>{component}</ThemeProvider>)
+
+export const isElementInDOM = (element: HTMLElement | null, isInDOM: boolean) => {
+  if (isInDOM) expect(element).toBeInTheDocument()
+  else expect(element).not.toBeInTheDocument()
+}
+
+export const areElementsInDOM = (
+  elements: {
+    isInDOM: boolean
+    element: HTMLElement | null
+  }[]
+) => {
+  elements.forEach(({ isInDOM, element }) => {
+    isElementInDOM(element, isInDOM)
+  })
+}

package/src/lib/theme/colors.ts

@@ -0,0 +1,80 @@
+export const COLORS = {
+  slate: {
+    50: "#F8FAFC",
+    100: "#F1F5F9",
+    200: "#E2E8F0",
+    300: "#CBD5E1",
+    400: "#94A3B8",
+    500: "#64748B",
+    600: "#475569",
+    700: "#334155",
+    800: "#1E293B",
+    900: "#0F172A",
+    950: "#020617",
+  },
+  blue: {
+    50: "#EFF6FF",
+    100: "#DBEAFE",
+    200: "#BFDBFE",
+    300: "#93C5FD",
+    400: "#60A5FA",
+    500: "#3B82F6",
+    600: "#2563EB",
+    700: "#1D4ED8",
+    800: "#1E40AF",
+    900: "#1E3A8A",
+    950: "#172554",
+  },
+  cyan: {
+    50: "#ECFEFF",
+    100: "#CFFAFE",
+    200: "#A5F3FC",
+    300: "#67E8F9",
+    400: "#22D3EE",
+    500: "#06B6D4",
+    600: "#0891B2",
+    700: "#0E7490",
+    800: "#155E75",
+    900: "#164E63",
+    950: "#083344",
+  },
+  green: {
+    50: "#ECFDF5",
+    100: "#D1FAE5",
+    200: "#A7F3D0",
+    300: "#6EE7B7",
+    400: "#34D399",
+    500: "#10B981",
+    600: "#059669",
+    700: "#047857",
+    800: "#065F46",
+    900: "#064E3B",
+    950: "#022C22",
+  },
+  amber: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FBBF24",
+    500: "#F59E0B",
+    600: "#D97706",
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F",
+    950: "#451A03",
+  },
+  red: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+    950: "#450A0A",
+  },
+}