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

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

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

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

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

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

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

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

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

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