@vention/machine-ui 3.27.0

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

@@ -0,0 +1,47 @@
+import { Box, Typography } from "@mui/material"
+import { useArgs } from "@storybook/preview-api"
+import type { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+
+import { VentionButton } from "../vention-button/vention-button"
+import { VentionDraggable, VentionDraggableProps } from "./vention-draggable"
+
+const renderFunction = (props: VentionDraggableProps) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [{ isOpened }, setArgs] = useArgs()
+
+  return (
+    <>
+      <VentionButton
+        labelText={`${isOpened ? "Hide" : "Show"} Draggable Box`}
+        onClick={() => {
+          setArgs({ isOpened: !isOpened })
+        }}
+      />
+      {isOpened && (
+        <Box width="100%" height={500}>
+          <VentionDraggable {...props}>
+            <Typography variant="heading16SemiBold">Draggable Box</Typography>
+            <Typography>Lorem ipsum dolor sit amet, consectetur adipiscing elit, non enim praesent elementum facilisis leo vel.</Typography>
+            <Typography>
+              Rhoncus dolor purus non enim praesent elementum facilisis leo vel. Risus at ultrices mi tempus imperdiet.
+            </Typography>
+          </VentionDraggable>
+        </Box>
+      )}
+    </>
+  )
+}
+
+const meta: Meta<typeof VentionDraggable> = {
+  component: VentionDraggable,
+  title: "Components/VentionDraggable",
+  render: renderFunction,
+}
+
+export default meta
+type Story = StoryObj<typeof VentionDraggable>
+
+export const Default: Story = {
+  args: {},
+}

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

@@ -0,0 +1,54 @@
+import "@testing-library/jest-dom"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionDraggable, testIds } from "./vention-draggable"
+
+describe("VentionDraggable", () => {
+  it("should render correctly", () => {
+    const text = "Draggable Content"
+    const { getByText } = renderWithTheme(<VentionDraggable>{text}</VentionDraggable>)
+    expect(getByText(text)).toBeInTheDocument()
+  })
+
+  it("should show handle if location prop is not null", () => {
+    const { getByTestId } = renderWithTheme(<VentionDraggable tabLocation="top">Draggable Content</VentionDraggable>)
+    expect(getByTestId(testIds.handle)).toBeInTheDocument()
+  })
+
+  it("should not show handle if location prop is null", () => {
+    const { queryByTestId } = renderWithTheme(<VentionDraggable>Draggable Content</VentionDraggable>)
+    expect(queryByTestId(testIds.handle)).not.toBeInTheDocument()
+  })
+
+  it("should adjust to inputted width and height", () => {
+    const { getByTestId } = renderWithTheme(
+      <VentionDraggable width={200} height={100}>
+        Draggable Content
+      </VentionDraggable>
+    )
+    const container = getByTestId(testIds.body)
+    expect(container).toHaveStyle("width: 200px")
+    expect(container).toHaveStyle("height: 100px")
+  })
+
+  it("should adjust padding, margin and flex direction if location is set to top", () => {
+    const { getByTestId } = renderWithTheme(<VentionDraggable tabLocation="top">Draggable Content</VentionDraggable>)
+    expect(getByTestId(testIds.body)).toHaveStyle("padding: 4px 8px 8px 8px")
+    expect(getByTestId(testIds.handle)).toHaveStyle("margin: 0 0 8px 0")
+    expect(getByTestId(testIds.layoutContainer)).toHaveStyle("flex-direction: column")
+  })
+
+  it("should adjust padding, margin and flex direction if location is set to left", () => {
+    const { getByTestId } = renderWithTheme(<VentionDraggable tabLocation="left">Draggable Content</VentionDraggable>)
+    expect(getByTestId(testIds.body)).toHaveStyle("padding: 8px 8px 8px 4px")
+    expect(getByTestId(testIds.handle)).toHaveStyle("margin: 0 8px 0 0")
+    expect(getByTestId(testIds.layoutContainer)).toHaveStyle("flex-direction: row")
+  })
+
+  it("should adjust padding, margin and flex direction if location is set to right", () => {
+    const { getByTestId } = renderWithTheme(<VentionDraggable tabLocation="right">Draggable Content</VentionDraggable>)
+    expect(getByTestId(testIds.body)).toHaveStyle("padding: 8px 4px 8px 8px")
+    expect(getByTestId(testIds.handle)).toHaveStyle("margin: 0 0 0 8px")
+    expect(getByTestId(testIds.layoutContainer)).toHaveStyle("flex-direction: row-reverse")
+  })
+})

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

@@ -0,0 +1,120 @@
+import { Box, Stack, Theme } from "@mui/material"
+import * as React from "react"
+import Draggable, { ControlPosition } from "react-draggable"
+import { tss } from "tss-react/mui"
+
+export interface VentionDraggableProps {
+  children: React.ReactNode
+  defaultPosition?: ControlPosition
+  tabLocation?: "top" | "left" | "right"
+  width?: number
+  height?: number
+}
+
+export const VentionDraggable = (props: VentionDraggableProps) => {
+  const { classes } = useStyles(props)
+
+  return (
+    <Draggable handle="#draggable-area" positionOffset={props.defaultPosition}>
+      <Box className={classes.container} id={props.tabLocation == null ? "draggable-area" : null} data-testid={testIds.body}>
+        <Stack className={classes.layoutBox} data-testid={testIds.layoutContainer}>
+          {props.tabLocation != null && (
+            <Box id="draggable-area" className={classes.handleContainer} data-testid={testIds.handle}>
+              <Box className={classes.handle} />
+            </Box>
+          )}
+          <Box flexGrow={1}>{props.children}</Box>
+        </Stack>
+      </Box>
+    </Draggable>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionDraggableProps, "tabLocation" | "height" | "width">>()
+  .create(({ tabLocation, height, width, theme }) => {
+    const handleLength = 33
+    const handleWidth = 4
+    const containerPadding = getPadding(tabLocation, theme)
+    const handleContainerMargin = getMargin(tabLocation, theme)
+    const flexDirection = getFlexDirection(tabLocation)
+
+    return {
+      container: {
+        borderRadius: theme.spacing(1),
+        border: `1px solid ${theme.palette.border.main}`,
+        backgroundColor: theme.palette.background.default,
+        padding: containerPadding,
+        width: width ?? "fit-content",
+        height: height ?? "fit-content",
+        boxShadow: "0px 4px 6px -1px rgba(2, 6, 23, 0.08)",
+      },
+      layoutBox: {
+        flexDirection,
+      },
+      handle: {
+        flexShrink: 0,
+        backgroundColor: theme.palette.misc.scrollbar,
+        borderRadius: theme.spacing(1),
+        width: tabLocation === "top" ? handleLength : "100%",
+        height: tabLocation === "top" ? "100%" : handleLength,
+        marginLeft: 2,
+      },
+      handleContainer: {
+        width: tabLocation === "top" ? "inherit" : handleWidth,
+        height: tabLocation === "top" ? handleWidth : "inherit",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        margin: handleContainerMargin,
+        ":hover": {
+          cursor: "move",
+        },
+      },
+    }
+  })
+
+const getPadding = (location: VentionDraggableProps["tabLocation"], theme: Theme) => {
+  switch (location) {
+    case "top":
+      return theme.spacing(1, 2, 2, 2)
+    case "left":
+      return theme.spacing(2, 2, 2, 1)
+    case "right":
+      return theme.spacing(2, 1, 2, 2)
+    default:
+      return theme.spacing(2)
+  }
+}
+
+const getMargin = (location: VentionDraggableProps["tabLocation"], theme: Theme) => {
+  switch (location) {
+    case "top":
+      return theme.spacing(0, 0, 2, 0)
+    case "left":
+      return theme.spacing(0, 2, 0, 0)
+    case "right":
+      return theme.spacing(0, 0, 0, 2)
+    default:
+      return theme.spacing(0)
+  }
+}
+
+const getFlexDirection = (location: VentionDraggableProps["tabLocation"]) => {
+  switch (location) {
+    case "top":
+      return "column"
+    case "left":
+      return "row"
+    case "right":
+      return "row-reverse"
+    default:
+      return "row"
+  }
+}
+
+export const testIds = {
+  handle: "draggable-handle",
+  body: "draggable-body",
+  layoutContainer: "draggable-layout-container",
+}

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

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import React, { useState } from "react"
+
+import { VentionButton } from "../vention-button/vention-button"
+import { VentionDrawer, VentionDrawerProps } from "./vention-drawer"
+
+const DrawerStory = (props: VentionDrawerProps) => {
+  const [defaultOpened, setDefaultOpened] = useState(false)
+  const [traditionalOpened, setTraditionalOpened] = useState(false)
+  const contouredTextStyling = {
+    border: "1px solid lightgrey",
+    display: "flex",
+    justifyContent: "center",
+    alignItems: "center",
+  }
+
+  return props.onDrawerHandleClick ? (
+    <>
+      <header style={{ height: "100px", ...contouredTextStyling }}>HEADER</header>
+      <div style={{ height: "300px", display: "flex", justifyContent: "flex-end" }}>
+        <div style={{ background: "gray", width: "150px" }}>Some other div</div>
+        <VentionDrawer {...props} open={defaultOpened} onDrawerHandleClick={() => setDefaultOpened(!defaultOpened)} />
+      </div>
+      <footer style={{ height: "100px", ...contouredTextStyling }}>FOOTER</footer>
+    </>
+  ) : (
+    <>
+      <VentionButton labelText="Open Drawer" onClick={() => setTraditionalOpened(true)} />
+      <VentionDrawer {...props} open={traditionalOpened} onClose={() => setTraditionalOpened(!traditionalOpened)} />
+    </>
+  )
+}
+
+const meta: Meta<typeof VentionDrawer> = {
+  component: VentionDrawer,
+  title: "Components/VentionDrawer",
+  render: DrawerStory,
+}
+
+export default meta
+type Story = StoryObj<typeof VentionDrawer>
+
+export const Default: Story = {
+  args: {
+    children: (
+      <div>
+        <h1>My Drawer Title</h1>
+        <p>My Drawer Body</p>
+      </div>
+    ),
+    anchor: "right",
+    onDrawerHandleClick: () => undefined,
+  },
+}
+
+export const WithDefinedWidth: Story = {
+  args: {
+    children: (
+      <div>
+        <h1>My Drawer Title</h1>
+        <p>800 px width</p>
+      </div>
+    ),
+    anchor: "right",
+    width: "800px",
+    onDrawerHandleClick: () => undefined,
+  },
+}
+
+export const TraditionalDrawer: Story = {
+  args: {
+    children: (
+      <div>
+        <h1>My Drawer Title</h1>
+        <p>My Drawer Body</p>
+      </div>
+    ),
+    anchor: "right",
+  },
+}

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

@@ -0,0 +1,74 @@
+import { renderWithTheme } from "../../testing/utils"
+import userEvent from "@testing-library/user-event"
+import { VentionDrawer } from "./vention-drawer"
+
+describe("Vention Drawer", () => {
+  const mockDrawerHandleClick = jest.fn()
+
+  beforeEach(() => {
+    jest.clearAllMocks()
+  })
+
+  it.each(["right", "left"] as const)(
+    "should render the drawerHandle if there is a drawerHandleClick with %p anchor and the drawer is closed",
+    anchor => {
+      const { getByRole } = renderWithTheme(<VentionDrawer anchor={anchor} open={false} onDrawerHandleClick={mockDrawerHandleClick} />)
+      expect(getByRole("button", { name: "drawer-handle" })).toBeInTheDocument()
+    }
+  )
+
+  it.each(["right", "left"] as const)(
+    "should render the drawerHandle if there is a drawerHandleClick with %p anchor and the drawer is open",
+    anchor => {
+      const { getByRole } = renderWithTheme(<VentionDrawer anchor={anchor} open={true} onDrawerHandleClick={mockDrawerHandleClick} />)
+      expect(getByRole("button", { name: "drawer-handle" })).toBeInTheDocument()
+    }
+  )
+
+  it("should call onDrawerHandleClick when the handle is clicked", async () => {
+    const { getByRole } = renderWithTheme(<VentionDrawer onDrawerHandleClick={mockDrawerHandleClick} />)
+
+    await userEvent.click(getByRole("button", { name: "drawer-handle" }))
+    expect(mockDrawerHandleClick).toHaveBeenCalled()
+  })
+
+  it("should not show drawer content if it is not displayed", () => {
+    const text = "TEXT"
+    const { queryByText } = renderWithTheme(
+      <VentionDrawer open={false}>
+        <p>{text}</p>
+      </VentionDrawer>
+    )
+
+    expect(queryByText(text)).not.toBeInTheDocument()
+  })
+
+  it("should show drawer content if it is displayed", () => {
+    const text = "TEXT"
+    const { getByText } = renderWithTheme(
+      <VentionDrawer open>
+        <p>{text}</p>
+      </VentionDrawer>
+    )
+
+    expect(getByText(text)).toBeInTheDocument()
+  })
+
+  it.each([mockDrawerHandleClick, undefined] as const)(
+    "should show drawer as defined width for traditional and non-traditional drawers",
+    onDrawerHandleClickFunc => {
+      const text = "TEXT"
+      const width = "300px"
+      renderWithTheme(
+        <VentionDrawer open={true} width={width} onDrawerHandleClick={onDrawerHandleClickFunc}>
+          <p>{text}</p>
+        </VentionDrawer>
+      )
+
+      const paperElement = document.querySelector(".MuiPaper-root")
+      expect(paperElement).toBeInTheDocument()
+      const computedStyle = window.getComputedStyle(paperElement)
+      expect(computedStyle.width).toBe(width)
+    }
+  )
+})

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

@@ -0,0 +1,105 @@
+import { Drawer, DrawerProps } from "@mui/material"
+import { IconChevronsRight, IconChevronsLeft } from "@tabler/icons-react"
+import { tss } from "tss-react/mui"
+
+export type VentionDrawerProps = DrawerProps & {
+  dataTestid?: string
+  onDrawerHandleClick?: () => void
+  width?: string
+}
+
+const VentionDrawerWrapper = (props: VentionDrawerProps) => {
+  const { classes } = useStyles({ onDrawerHandleClick: props.onDrawerHandleClick, anchor: props.anchor, open: props.open })
+
+  return props.onDrawerHandleClick ? <div className={classes.drawerHandleWrapper}>{props.children}</div> : <>{props.children}</>
+}
+
+export const VentionDrawer = (props: VentionDrawerProps) => {
+  const { classes } = useStyles({
+    onDrawerHandleClick: props.onDrawerHandleClick,
+    width: props.width,
+    anchor: props.anchor,
+    open: props.open,
+  })
+  const { onDrawerHandleClick, dataTestid, ...muiDrawerProps } = props
+
+  const isRightIconVisible = (props.anchor === "right" && props.open) || (props.anchor === "left" && !props.open)
+  const isLeftIconVisible = (props.anchor === "right" && !props.open) || (props.anchor === "left" && props.open)
+
+  return (
+    <VentionDrawerWrapper {...props}>
+      <Drawer {...muiDrawerProps} variant={props.onDrawerHandleClick ? "permanent" : props.variant} className={classes.root}>
+        {props.onDrawerHandleClick && (
+          <button aria-label="drawer-handle" className={classes.drawerHandle} onClick={props.onDrawerHandleClick} data-testid={dataTestid}>
+            {isRightIconVisible && <IconChevronsRight className={classes.handleIcon} />}
+            {isLeftIconVisible && <IconChevronsLeft className={classes.handleIcon} />}
+          </button>
+        )}
+        <div className={classes.drawerChildren}>{props.children}</div>
+      </Drawer>
+    </VentionDrawerWrapper>
+  )
+}
+
+const DrawerHandleHeight = 64
+const DrawerHandleWidth = 24
+const useStyles = tss
+  .withParams<Pick<VentionDrawerProps, "onDrawerHandleClick" | "width" | "anchor" | "open">>()
+  .create(({ onDrawerHandleClick, width, anchor, open, theme }) => {
+    return {
+      root: {
+        "& .MuiPaper-root": onDrawerHandleClick
+          ? {
+              position: "relative",
+              overflow: "visible",
+              borderWidth: `${open ? "1px" : "0"}`,
+              pointerEvents: "all",
+              ...(width && open && { width: width }),
+            }
+          : {
+              pointerEvents: "all",
+              ...(width && { width: width }),
+            },
+        height: "100%",
+      },
+      drawerHandleWrapper: {
+        position: "relative",
+        height: "100%",
+        display: "flex",
+        justifyContent: anchor === "right" ? "flex-end" : "flex-start",
+      },
+      drawerHandle: {
+        position: "absolute",
+        top: "50%",
+        left: `${anchor === "right" ? `-${DrawerHandleWidth}px` : "unset"}`,
+        right: `${anchor === "left" ? `-${DrawerHandleWidth}px` : "unset"}`,
+        transform: `translateY(-${DrawerHandleHeight / 2}px)`,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: `${DrawerHandleHeight}px`,
+        width: `${DrawerHandleWidth}px`,
+        padding: 0,
+        backgroundColor: theme.palette.background.surface1,
+        border: `1px solid ${theme.palette.border.main}`,
+        borderRadius: `${anchor === "right" ? "4px 0 0 4px" : "0 4px 4px 0"}`,
+        pointerEvents: "all",
+        cursor: "pointer",
+        boxSizing: "border-box",
+
+        "&:hover": {
+          backgroundColor: theme.palette.background.surface1hover,
+        },
+      },
+      handleIcon: {
+        boxSizing: "content-box",
+        width: "16px",
+        height: "16px",
+        padding: "4px 3px",
+      },
+      drawerChildren: {
+        display: open ? "flex" : "none",
+        height: "100%",
+      },
+    }
+  })

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

@@ -0,0 +1,124 @@
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { COLORS } from "../../theme/colors"
+
+export enum DropZoneState {
+  Default = "Default",
+  Hover = "Hover",
+  Pressed = "Pressed",
+  DraggedOver = "DraggedOver",
+  Error = "Error",
+  DragLeave = "DragLeave",
+  MouseUp = "MouseUp",
+  MouseLeave = "MouseLeave",
+  Drop = "Drop",
+  FileChange = "FileChange",
+}
+
+export type DropZoneStyle = "outline" | "filled"
+export type DropZoneSize = "large" | "small"
+
+interface SizeProperties {
+  flexDirection: "column" | "row"
+  minHeight: string
+  containerGap: string
+  alignItems: "center" | "flex-start"
+  padding: string
+  borderRadius: string
+  titleFontSize: string
+  titleLineHeight: string
+  iconSize: number
+}
+
+const sizeProperties: Record<DropZoneSize, SizeProperties> = {
+  large: {
+    minHeight: "72px",
+    flexDirection: "column",
+    containerGap: "6px",
+    alignItems: "center",
+    padding: "48px 16px",
+    borderRadius: "6px",
+    titleFontSize: "14px",
+    titleLineHeight: "24px",
+    iconSize: 24,
+  },
+  small: {
+    minHeight: "34px",
+    flexDirection: "row",
+    containerGap: "8px",
+    alignItems: "flex-start",
+    padding: "16px",
+    borderRadius: "4px",
+    titleFontSize: "12px",
+    titleLineHeight: "16px",
+    iconSize: 16,
+  },
+}
+
+const styleProperties = {
+  outline: {
+    borderStyle: "dashed",
+    backgroundColor: machineUiTheme.palette.common.white,
+  },
+  filled: {
+    borderStyle: "solid",
+    backgroundColor: COLORS.slate[50],
+  },
+}
+
+const borderColors = {
+  [DropZoneState.Hover]: COLORS.slate[300],
+  [DropZoneState.Pressed]: COLORS.blue[400],
+  [DropZoneState.DraggedOver]: COLORS.blue[500],
+  [DropZoneState.Error]: COLORS.red[600],
+}
+
+export function getDropZoneBorder(state: DropZoneState, disabled: boolean, style: DropZoneStyle): string {
+  const defaultColor = COLORS.slate[200]
+  if (disabled) {
+    return `1px ${styleProperties[style].borderStyle} ${defaultColor}`
+  }
+
+  const borderStyle = styleProperties[style].borderStyle
+  const borderColor = borderColors[state] || defaultColor
+  const borderWidth = state === DropZoneState.DraggedOver ? "2px" : "1px"
+  const borderLineStyle = state === DropZoneState.DraggedOver ? "solid" : borderStyle
+
+  return `${borderWidth} ${borderLineStyle} ${borderColor}`
+}
+
+// Accessor functions for size-specific properties
+export function getDropZoneStyle<T extends keyof SizeProperties, K extends SizeProperties[T]>(size: DropZoneSize, property: T): K {
+  return sizeProperties[size][property] as K
+}
+
+// Accessor functions for style-specific properties
+export function getDropZoneBackgroundColor(style: DropZoneStyle): string {
+  return styleProperties[style].backgroundColor
+}
+
+/**
+ * consolidates derivation of new drop zone status. should be re-used for testing purpose as well
+ */
+export function getDropZoneStatus(type: DropZoneState, hasErrorMessages: boolean): DropZoneState {
+  if (type === DropZoneState.DraggedOver) {
+    return DropZoneState.DraggedOver
+  }
+
+  if (hasErrorMessages) {
+    return DropZoneState.Error
+  }
+
+  switch (type) {
+    case DropZoneState.Hover:
+    case DropZoneState.MouseUp:
+      return DropZoneState.Hover
+    case DropZoneState.Default:
+    case DropZoneState.FileChange:
+    case DropZoneState.Drop:
+    case DropZoneState.MouseLeave:
+    case DropZoneState.DragLeave:
+      return DropZoneState.Default
+    default:
+      return type
+  }
+}

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

@@ -0,0 +1,69 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { VentionDropZone } from "./vention-dropzone"
+
+const handleFilesSelect = (files: FileList) => {
+  const errors: string[] = []
+  const validExtensions = [".dxf", ".dwg", ".step"]
+  const maxSizeInBytes = 50 * 1024 * 1024 // 50 MB
+
+  for (const file of files) {
+    const extension = file.name.substring(file.name.lastIndexOf(".")).toLowerCase()
+    let error = ""
+    if (!validExtensions.includes(extension)) {
+      error = `Invalid file type.`
+    }
+    if (file.size > maxSizeInBytes) {
+      error += `File too large.`
+    }
+    if (error.length > 0) {
+      errors.push(`${error}: ${file.name}`)
+    }
+  }
+
+  return errors
+}
+
+const meta: Meta<typeof VentionDropZone> = {
+  component: VentionDropZone,
+  title: "Components/VentionDropZone",
+}
+
+export default meta
+type Story = StoryObj<typeof VentionDropZone>
+
+export const Default: Story = {
+  args: {
+    size: "large",
+    style: "outline",
+    fileCriteriaDescription: "DXF, DWG max 50 MB",
+    onFilesSelect: handleFilesSelect,
+  },
+}
+
+export const DropZoneLargeFilled: Story = {
+  args: {
+    size: "large",
+    style: "filled",
+    fileCriteriaDescription: "DXF, DWG max 50 MB",
+    onFilesSelect: handleFilesSelect,
+  },
+}
+
+export const DropZoneSmallOutline: Story = {
+  args: {
+    size: "small",
+    style: "outline",
+    fileCriteriaDescription: "DXF, DWG max 50 MB",
+    onFilesSelect: handleFilesSelect,
+  },
+}
+
+export const DropZoneSmallFilled: Story = {
+  args: {
+    size: "small",
+    style: "filled",
+    fileCriteriaDescription: "DXF, DWG max 50 MB",
+    onFilesSelect: handleFilesSelect,
+  },
+}