@vention/machine-ui 3.27.0

package/src/lib/components/vention-status-indicator/vention-status-indicator.tsx

@@ -0,0 +1,205 @@
+import Typography from "@mui/material/Typography"
+import { Box } from "@mui/material"
+import { tss } from "tss-react/mui"
+import { VentionStatusDot, VentionStatusDotProps } from "../vention-status-dot/vention-status-dot"
+import { TYPOGRAPHY } from "../../theme/typography"
+import { Theme } from "@mui/material/styles"
+
+interface VentionStatusIndicatorProps {
+  outline?: boolean
+  size?: "xx-large" | "x-large" | "large" | "medium" | "small"
+  dotPosition?: "left" | "right"
+  dotColor: string
+  label: string
+}
+
+const defaultProps: Partial<VentionStatusIndicatorProps> = {
+  outline: false,
+  size: "medium",
+  dotPosition: "left",
+}
+
+interface SizeMappingEntry {
+  paddingLeft: string
+  paddingRight: string
+  paddingTop: string
+  paddingBottom: string
+  gap: string
+  lineHeight: string
+  dotSize: VentionStatusDotProps["size"]
+}
+
+export const VentionStatusIndicator = (inputProps: VentionStatusIndicatorProps) => {
+  const props = { ...defaultProps, ...inputProps }
+  const { classes, theme } = useStyles({
+    size: props.size,
+    outline: props.outline,
+    dotPosition: props.dotPosition,
+  })
+  const typographyVariant = getTypographyVariant(props.size)
+  const sizeStyles = sizeMapping(props.size, props.dotPosition, theme)
+
+  return (
+    <Box className={classes.root}>
+      {props.dotPosition === "left" && <VentionStatusDot color={props.dotColor} size={sizeStyles.dotSize} />}
+      <Typography variant={typographyVariant} className={classes.label}>
+        {props.label}
+      </Typography>
+      {props.dotPosition === "right" && <VentionStatusDot color={props.dotColor} size={sizeStyles.dotSize} />}
+    </Box>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionStatusIndicatorProps, "size" | "outline" | "dotPosition">>()
+  .create(({ size, outline, dotPosition, theme }) => {
+    const sizeStyles = sizeMapping(size, dotPosition, theme)
+
+    return {
+      root: {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "flex-start",
+        paddingLeft: sizeStyles.paddingLeft,
+        paddingRight: sizeStyles.paddingRight,
+        paddingTop: sizeStyles.paddingTop,
+        paddingBottom: sizeStyles.paddingBottom,
+        borderRadius: "999px",
+        border: outline ? `${size === "xx-large" ? 2 : 1}px solid ${theme.palette.border.main}` : "none",
+        gap: sizeStyles.gap,
+        height: sizeStyles.lineHeight,
+      },
+      label: {
+        color: theme.palette.text.primary,
+        lineHeight: sizeStyles.lineHeight,
+      },
+    }
+  })
+
+const sizeMapping = (
+  size: NonNullable<VentionStatusIndicatorProps["size"]>,
+  dotPosition: NonNullable<VentionStatusIndicatorProps["dotPosition"]>,
+  theme: Theme
+): SizeMappingEntry => {
+  const mappings: Record<
+    NonNullable<VentionStatusIndicatorProps["size"]>,
+    Record<NonNullable<VentionStatusIndicatorProps["dotPosition"]>, SizeMappingEntry>
+  > = {
+    "xx-large": {
+      left: {
+        paddingLeft: theme.spacing(5),
+        paddingRight: theme.spacing(6),
+        paddingTop: theme.spacing(8),
+        paddingBottom: theme.spacing(8),
+        gap: theme.spacing(2),
+        lineHeight: theme.spacing(5),
+        dotSize: "xx-large",
+      },
+      right: {
+        paddingLeft: theme.spacing(6),
+        paddingRight: theme.spacing(5),
+        paddingTop: theme.spacing(8),
+        paddingBottom: theme.spacing(8),
+        gap: theme.spacing(2),
+        lineHeight: theme.spacing(5),
+        dotSize: "xx-large",
+      },
+    },
+    "x-large": {
+      left: {
+        paddingLeft: theme.spacing(0),
+        paddingRight: theme.spacing(3),
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(5),
+        dotSize: "medium",
+      },
+      right: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(0),
+        paddingTop: theme.spacing(2),
+        paddingBottom: theme.spacing(2),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(5),
+        dotSize: "medium",
+      },
+    },
+    large: {
+      left: {
+        paddingLeft: theme.spacing(0),
+        paddingRight: theme.spacing(3),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(5),
+        dotSize: "medium",
+      },
+      right: {
+        paddingLeft: theme.spacing(3),
+        paddingRight: theme.spacing(0),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(5),
+        dotSize: "medium",
+      },
+    },
+    medium: {
+      left: {
+        paddingLeft: theme.spacing(0),
+        paddingRight: theme.spacing(2),
+        paddingTop: theme.spacing(0),
+        paddingBottom: theme.spacing(0),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(5),
+        dotSize: "small",
+      },
+      right: {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(0),
+        paddingTop: theme.spacing(0),
+        paddingBottom: theme.spacing(0),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(5),
+        dotSize: "small",
+      },
+    },
+    small: {
+      left: {
+        paddingLeft: theme.spacing(0),
+        paddingRight: theme.spacing(2),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(4),
+        dotSize: "small",
+      },
+      right: {
+        paddingLeft: theme.spacing(2),
+        paddingRight: theme.spacing(0),
+        paddingTop: theme.spacing(1),
+        paddingBottom: theme.spacing(1),
+        gap: theme.spacing(0),
+        lineHeight: theme.spacing(4),
+        dotSize: "small",
+      },
+    },
+  }
+
+  return mappings[size][dotPosition]
+}
+
+const getTypographyVariant = (size: VentionStatusIndicatorProps["size"]): keyof typeof TYPOGRAPHY => {
+  switch (size) {
+    case "xx-large":
+      return "hmiText28SemiBold"
+    case "x-large":
+      return "paragraph16Regular"
+    case "large":
+    case "medium":
+      return "uiText14Regular"
+    case "small":
+      return "uiText12Regular"
+  }
+}

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

@@ -0,0 +1,141 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import React, { useState } from "react"
+
+import { VentionStepper, VentionStepperProps } from "./vention-stepper"
+
+const Template = (args: VentionStepperProps) => {
+  const [value, setValue] = useState(Number(args.value))
+
+  const plusButtonProps = {
+    onClick: () => {
+      setValue(value + 0.01)
+    },
+    onMouseDown: () => {
+      const interval = setInterval(() => {
+        setValue(prev => prev + 0.01)
+      }, 100)
+      document.addEventListener("mouseup", () => {
+        clearInterval(interval)
+      })
+    },
+  }
+
+  const minusButtonProps = {
+    onClick: () => {
+      setValue(value - 0.01)
+    },
+    onMouseDown: () => {
+      const interval = setInterval(() => {
+        setValue(prev => prev - 0.01)
+      }, 100)
+      document.addEventListener("mouseup", () => {
+        clearInterval(interval)
+      })
+    },
+  }
+
+  return (
+    <VentionStepper
+      value={value.toFixed(2)}
+      leadingText={args.leadingText}
+      trailingText={args.trailingText}
+      plusButtonProps={plusButtonProps}
+      minusButtonProps={minusButtonProps}
+    />
+  )
+}
+
+const meta: Meta<typeof VentionStepper> = {
+  component: VentionStepper,
+  title: "Components/VentionStepper",
+  argTypes: {
+    value: {
+      control: {
+        type: "number",
+        step: 0.01,
+        defaultValue: 123.45,
+      },
+      leadingText: {
+        control: {
+          type: "text",
+          defaultValue: "J1",
+        },
+      },
+      trailingText: {
+        control: {
+          type: "text",
+          defaultValue: "deg",
+        },
+      },
+    },
+  },
+  args: {
+    value: "123.45",
+    leadingText: "J1",
+    trailingText: "deg",
+  },
+  render: Template,
+}
+export default meta
+type Story = StoryObj<typeof VentionStepper>
+
+export const Default: Story = {
+  args: {
+    value: "123.45",
+    leadingText: "J1",
+    trailingText: "deg",
+  },
+}
+
+export const StepperOne: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: "360px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    value: "123.45",
+    leadingText: "J1",
+    trailingText: "deg",
+  },
+}
+
+export const StepperNegativeValue: Story = {
+  decorators: [
+    Story => (
+      <div style={{ width: "360px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    value: "-434.45",
+    leadingText: "J1",
+    trailingText: "deg",
+  },
+}
+
+export const StepperSmallValue: Story = {
+  args: {
+    value: "3.45",
+    leadingText: "Rx",
+    trailingText: "deg",
+  },
+}
+
+export const StepperLongValue: Story = {
+  decorators: [
+    Story => (
+      <div style={{ maxWidth: "420px" }}>
+        <Story />
+      </div>
+    ),
+  ],
+  args: {
+    value: "35345323.45",
+    leadingText: "J2",
+    trailingText: "deg",
+  },
+}

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

@@ -0,0 +1,55 @@
+import "@testing-library/jest-dom"
+
+import { fireEvent } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionStepper } from "./vention-stepper"
+
+describe("VentionStepper", () => {
+  it("renders the component with the correct value", () => {
+    const { getByText } = renderWithTheme(<VentionStepper value={"5"} leadingText="J1" trailingText="cm" />)
+    expect(getByText("5")).toBeInTheDocument()
+    expect(getByText("J1")).toBeInTheDocument()
+    expect(getByText("cm")).toBeInTheDocument()
+  })
+
+  it("calls the onPlusEvent callback when the plus button is clicked", () => {
+    const handleClickMock = jest.fn()
+    const plusButtonProps = {
+      onMouseDown: handleClickMock,
+      onMouseUp: handleClickMock,
+    }
+    const { getByTestId } = renderWithTheme(<VentionStepper value={"5"} plusButtonProps={plusButtonProps} />)
+    fireEvent.mouseDown(getByTestId("plus-button"))
+    expect(handleClickMock).toHaveBeenCalled()
+    fireEvent.mouseUp(getByTestId("plus-button"))
+    expect(handleClickMock).toHaveBeenCalledTimes(2)
+  })
+
+  it("calls the onMinusEvent callback when the minus button is clicked", () => {
+    const handleMinusMock = jest.fn()
+    const minusButtonProps = {
+      onMouseDown: handleMinusMock,
+      onMouseUp: handleMinusMock,
+    }
+    const { getByTestId } = renderWithTheme(<VentionStepper value={"5"} minusButtonProps={minusButtonProps} />)
+    fireEvent.mouseDown(getByTestId("minus-button"))
+    fireEvent.mouseUp(getByTestId("minus-button"))
+    expect(handleMinusMock).toHaveBeenCalledTimes(2)
+  })
+  it("does not calls the onPlusEvent callback when the plus button is clicked", () => {
+    const noClickMock = jest.fn()
+    const { getByTestId } = renderWithTheme(<VentionStepper value={"5"} minusButtonProps={undefined} plusButtonProps={undefined} />)
+    fireEvent.mouseDown(getByTestId("plus-button"))
+    fireEvent.mouseUp(getByTestId("plus-button"))
+    expect(noClickMock).toHaveBeenCalledTimes(0)
+  })
+
+  it("does not calls the onMinusEvent callback when the minus button is clicked", () => {
+    const noClickMock = jest.fn()
+    const { getByTestId } = renderWithTheme(<VentionStepper value={"5"} minusButtonProps={undefined} plusButtonProps={undefined} />)
+    fireEvent.mouseDown(getByTestId("minus-button"))
+    fireEvent.mouseUp(getByTestId("minus-button"))
+    expect(noClickMock).toHaveBeenCalledTimes(0)
+  })
+})

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

@@ -0,0 +1,127 @@
+import { Button, ButtonGroup, Paper, Typography } from "@mui/material"
+import { IconMinus, IconPlus } from "@tabler/icons-react"
+import React from "react"
+import { tss } from "tss-react/mui"
+
+// Import theme file to load TypeScript module augmentations for custom MUI theme properties
+// This enables TypeScript to recognize custom palette properties like theme.palette.misc.stepper.border
+// and custom typography variants like "heading18SemiBold"
+import "../../theme/machine-ui-theme"
+
+export interface VentionStepperProps {
+  leadingText?: string
+  trailingText?: string
+  value: string
+  plusButtonProps?: React.ComponentProps<typeof Button>
+  minusButtonProps?: React.ComponentProps<typeof Button>
+}
+
+export const VentionStepper = (props: VentionStepperProps) => {
+  const { leadingText, trailingText, value, plusButtonProps, minusButtonProps } = props
+  const { classes } = useStyles()
+
+  return (
+    <ButtonGroup
+      variant="contained"
+      aria-label="Basic button group"
+      className={classes.root}
+      disableElevation
+      sx={{
+        ".MuiButtonGroup-firstButton": {
+          borderRight: "none !important",
+        },
+        ".MuiButtonGroup-lastButton": {
+          borderLeft: "none !important",
+        },
+      }}
+    >
+      <Button data-testid="minus-button" className={classes.buttonStep} {...minusButtonProps}>
+        <IconMinus className={classes.signSVG} />
+      </Button>
+      <Paper data-testid="input-paper" elevation={0} className={classes.inputPaper}>
+        {leadingText && (
+          <Typography variant="heading18SemiBold" className={classes.text}>
+            {leadingText}
+          </Typography>
+        )}
+        <Typography variant="heading18SemiBold" className={classes.value}>
+          {value}
+        </Typography>
+        {trailingText && (
+          <Typography variant="heading18SemiBold" className={classes.text}>
+            {trailingText}
+          </Typography>
+        )}
+      </Paper>
+      <Button data-testid="plus-button" className={classes.buttonStep} {...plusButtonProps}>
+        <IconPlus className={classes.signSVG} />
+      </Button>
+    </ButtonGroup>
+  )
+}
+
+const useStyles = tss.withNestedSelectors<"inputPaper">().create(({ theme, classes }) => {
+  return {
+    root: {
+      width: "inherit",
+      height: theme.spacing(11),
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      gap: 0,
+    },
+    inputPaper: {
+      display: "flex",
+      height: `calc(${theme.spacing(11)} - 4px)`,
+      justifyContent: "space-between",
+      alignItems: "center",
+      gap: theme.spacing(5),
+      flex: 1,
+      borderRadius: 0,
+      border: `2px solid ${theme.palette.misc.stepper.border}`,
+      padding: `0 ${theme.spacing(4)}`,
+      boxSizing: "content-box",
+    },
+    text: {
+      flexShrink: 0,
+      width: theme.spacing(8),
+      overflow: "hidden",
+      textAlign: "center",
+      textOverflow: "ellipsis",
+      color: theme.palette.misc.stepper.text,
+    },
+    value: {
+      flex: "1 1",
+      textAlign: "center",
+      textOverflow: "ellipsis",
+      color: theme.palette.misc.stepper.text,
+    },
+    buttonStep: {
+      height: theme.spacing(11),
+      width: theme.spacing(11),
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: theme.palette.background.default,
+      "&:hover": {
+        backgroundColor: theme.palette.background.default,
+      },
+      "&:active": {
+        backgroundColor: theme.palette.background.surface1active,
+      },
+      "@media (hover: hover) and (pointer: fine)": {
+        "&:hover": {
+          backgroundColor: theme.palette.background.surface1hover,
+        },
+      },
+      border: "2px solid !important",
+      borderRadius: theme.spacing(1),
+      borderColor: `${theme.palette.border.main} !important`,
+    },
+    signSVG: {
+      "&>path": {
+        stroke: theme.palette.misc.stepper.text,
+        fill: theme.palette.misc.stepper.text,
+      },
+    },
+  }
+})

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

@@ -0,0 +1,45 @@
+import { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+
+import { VentionSteps } from "./vention-steps"
+import { VentionButton } from "../vention-button/vention-button"
+
+const meta: Meta<typeof VentionSteps> = {
+  title: "Components/VentionSteps",
+  component: VentionSteps,
+  argTypes: {
+    variant: {
+      control: {
+        type: "select",
+        options: ["number"],
+      },
+    },
+    layout: {
+      control: {
+        type: "select",
+        options: ["vertical"],
+      },
+    },
+    steps: {
+      control: {
+        type: "object",
+      },
+    },
+  },
+}
+export default meta
+type Story = StoryObj<typeof VentionSteps>
+
+export const Primary: Story = {
+  args: {
+    variant: "number",
+    layout: "vertical",
+    steps: [
+      { title: "Step 1", isCompleted: true, isSelected: false },
+      { title: "Step 2", description: "Description 2", isCompleted: false, isSelected: false },
+      { title: "Step 3", description: "Description 3", isCompleted: false, isSelected: false, addon: <VentionButton /> },
+      { title: "Step 4", isCompleted: false, isSelected: false, onClick: step => console.info(`Clicked on ${step.title}`) },
+    ],
+    size: "xx-large",
+  },
+}