@vention/machine-ui 3.27.0

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

@@ -0,0 +1,189 @@
+import { Theme } from "@mui/material"
+import { SwitchProps } from "@mui/material/Switch"
+import { IconLoader2, IconMinus } from "@tabler/icons-react"
+import { Sizes, StrictExtract } from "../../theme/machine-ui-theme"
+
+import React from "react"
+import { tss } from "tss-react/mui"
+
+type Variant = "default" | "shaded"
+interface VentionSwitchProps {
+  checked: "on" | "off" | "mixed" | "loading"
+  size?: StrictExtract<Sizes, "small" | "medium" | "large" | "x-large" | "xx-large">
+  onChange?: (checked: "on" | "off") => void
+  disabled?: SwitchProps["disabled"]
+  variant?: Variant
+}
+
+export const VentionSwitch = (props: VentionSwitchProps) => {
+  const { checked, size, disabled, onChange } = props
+  const { classes, theme } = useStyles({ checked, size, variant: props.variant ?? "default", disabled: props.disabled ?? false })
+
+  const handleOnchange = () => {
+    if (disabled) return
+    if (onChange && ["on", "off"].includes(checked)) {
+      onChange(checked === "off" ? "on" : "off")
+    }
+  }
+
+  return (
+    <div className={classes.root} onClick={handleOnchange} data-testid="vention-switch-root">
+      {checked === "mixed" ? <IconMinus data-testid="vention-switch-minus" className={classes.iconMinus} /> : null}
+      {checked === "loading" ? (
+        <IconLoader2 data-testid="vention-switch-loading" color={theme.palette.icon.tertiary} className={classes.loader} />
+      ) : null}
+      {(checked === "on" || checked === "off") && <div className={classes.thumb} data-testid="vention-switch-thumb"></div>}
+    </div>
+  )
+}
+
+const useStyles = tss
+  .withParams<Pick<VentionSwitchProps, "checked" | "size" | "variant" | "disabled">>()
+  .create(({ theme, checked, size, variant, disabled }) => {
+    return {
+      root: {
+        backgroundColor: getBackgroundColor(theme, checked, variant),
+        display: "flex",
+        borderRadius: "999px",
+        alignItems: "center",
+        justifyContent: getRootJustifyContent(checked),
+        border: ["on", "off"].includes(checked)
+          ? undefined
+          : `${getThumbMarginSize(theme, size)} solid ${getRootBorderColor(theme, checked)}`,
+        boxSizing: "border-box",
+        ...getTrackSize(theme, size),
+        opacity: disabled ? 0.2 : 1,
+      },
+      iconMinus: {
+        color: theme.palette.icon.tertiary,
+      },
+      loader: {
+        "@keyframes spin": {
+          "0%": {
+            transform: "rotate(360deg)",
+          },
+          "100%": {
+            transform: "rotate(0deg)",
+          },
+        },
+        animation: "spin 4s linear infinite",
+      },
+      thumb: {
+        display: "flex",
+        width: getThumbSize(theme, size),
+        height: getThumbSize(theme, size),
+        borderRadius: ["on", "off"].includes(checked) && "50%",
+        backgroundColor: theme.palette.background.default,
+        margin: getThumbMarginSize(theme, size),
+        alignItems: "center",
+        justifyContent: "center",
+      },
+    }
+  })
+
+function getThumbSize(theme: Theme, size: VentionSwitchProps["size"]) {
+  switch (size) {
+    case "small":
+      return theme.spacing(2)
+    case "medium":
+      return theme.spacing(3)
+    case "large":
+      return theme.spacing(4)
+    case "x-large":
+      return `calc(${theme.spacing(5)} + 2px)` // 26px
+    case "xx-large":
+      return `calc(${theme.spacing(7)} + 6px)` // 38px
+    default:
+      return getThumbSize(theme, "medium")
+  }
+}
+
+function getThumbMarginSize(theme: Theme, size: VentionSwitchProps["size"]) {
+  switch (size) {
+    case "x-large":
+      return "3px"
+    case "xx-large":
+      return "4px"
+    default:
+      return "2px"
+  }
+}
+
+function getTrackSize(theme: Theme, size: VentionSwitchProps["size"]) {
+  switch (size) {
+    case "small":
+      return {
+        width: `calc(${theme.spacing(5)} - 2px)`, // 22px
+        height: theme.spacing(3),
+      }
+    case "medium":
+      return {
+        width: theme.spacing(6),
+        height: theme.spacing(4),
+      }
+    case "large":
+      return {
+        width: theme.spacing(7),
+        height: `calc(${theme.spacing(4)} + 4px)`, // 20px
+      }
+    case "x-large":
+      return {
+        width: theme.spacing(10),
+        height: theme.spacing(7),
+      }
+    case "xx-large":
+      return {
+        width: theme.spacing(12),
+        height: `calc(${theme.spacing(9)} - 2px)`,
+      }
+    default:
+      return getTrackSize(theme, "medium")
+  }
+}
+
+function getBackgroundColor(theme: Theme, checked: VentionSwitchProps["checked"], variant: Variant) {
+  if (variant === "shaded") {
+    switch (checked) {
+      case "on":
+        return theme.palette.background.brand
+      case "off":
+        return theme.palette.background.surface4
+      case "mixed":
+        return theme.palette.background.surface4
+      case "loading":
+        return theme.palette.background.surface4
+    }
+  }
+  switch (checked) {
+    case "on":
+      return theme.palette.button.primary
+    case "off":
+      return theme.palette.background.surface4
+    case "mixed":
+      return theme.palette.background.default
+    case "loading":
+      return theme.palette.background.default
+  }
+}
+
+function getRootJustifyContent(checked: VentionSwitchProps["checked"]) {
+  switch (checked) {
+    case "on":
+      return "flex-end"
+    case "off":
+      return "flex-start"
+    case "mixed":
+      return "center"
+    case "loading":
+      return "center"
+  }
+}
+
+function getRootBorderColor(theme: Theme, checked: VentionSwitchProps["checked"]) {
+  switch (checked) {
+    case "mixed":
+      return theme.palette.icon.tertiary
+    case "loading":
+      return theme.palette.icon.tertiary
+  }
+}

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

@@ -0,0 +1,28 @@
+import { useArgs } from "@storybook/preview-api"
+import { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+
+import { VentionTabs } from "./vention-tabs"
+
+const meta: Meta<typeof VentionTabs> = {
+  title: "Components/VentionTabs",
+  component: VentionTabs,
+}
+export default meta
+type Story = StoryObj<typeof VentionTabs>
+
+export const Primary: Story = {
+  args: {
+    tabOptions: ["A", "b", "C"],
+    value: 1,
+  },
+  render: function Render(args) {
+    const [{ tabOptions, value }, updateArgs] = useArgs()
+
+    const handleChange = (_, index: number) => {
+      updateArgs({ value: index })
+    }
+
+    return <VentionTabs {...args} tabOptions={tabOptions} value={value} onChange={handleChange} />
+  },
+}

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

@@ -0,0 +1,40 @@
+import "@testing-library/jest-dom"
+
+import { fireEvent, screen } from "@testing-library/react"
+
+import { renderWithTheme } from "../../testing/utils"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+import { VentionTabs } from "./vention-tabs"
+
+const handleToggleMock = jest.fn()
+
+describe("VentionTabs", () => {
+  const tabOptions = ["one", "two", "three", "four", "five"]
+
+  const value = 0
+
+  it("component renders on the page", () => {
+    const { container } = renderWithTheme(<VentionTabs onChange={handleToggleMock} tabOptions={tabOptions} value={value} />)
+    expect(container.firstChild).toBeInTheDocument()
+  })
+
+  it("renders correct number of tabs", () => {
+    renderWithTheme(<VentionTabs onChange={handleToggleMock} tabOptions={tabOptions} value={value} />)
+    const numberOfTabs = screen.getAllByRole("button")
+    expect(numberOfTabs).toHaveLength(5)
+  })
+
+  it("calls onChange function when the tab is clicked", () => {
+    const { getByText } = renderWithTheme(<VentionTabs onChange={handleToggleMock} tabOptions={tabOptions} value={value} />)
+
+    const tab = getByText("two")
+    fireEvent.click(tab)
+    expect(handleToggleMock).toHaveBeenCalled()
+  })
+
+  it("first tab is active by default", () => {
+    renderWithTheme(<VentionTabs onChange={handleToggleMock} tabOptions={tabOptions} value={value} />)
+    const firstTab = screen.getByRole("button", { name: tabOptions[0] })
+    expect(firstTab).toHaveStyle(`background: ${machineUiTheme.palette.background.default}`)
+  })
+})

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

@@ -0,0 +1,61 @@
+import { Box, Button, Typography } from "@mui/material"
+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"
+
+type VentionTabsProps = {
+  tabOptions: string[]
+  value: number
+  onChange: (event: React.MouseEvent<HTMLElement>, arg: number) => void
+}
+
+export const VentionTabs = ({ tabOptions, onChange, value }: VentionTabsProps) => {
+  const { cx, classes } = useStyles()
+
+  return (
+    <Box className={classes.root}>
+      {tabOptions.map((buttonLabel, index) => (
+        <Button
+          key={index}
+          className={index === value ? cx(classes.button, classes.selectedButton) : classes.button}
+          onClick={event => onChange(event, index)}
+          disableRipple={true}
+        >
+          <Typography variant="heading18SemiBold">{buttonLabel}</Typography>
+        </Button>
+      ))}
+    </Box>
+  )
+}
+const useStyles = tss.create(({ theme }) => {
+  return {
+    root: {
+      borderRadius: theme.spacing(1),
+      borderWidth: "2px",
+      borderColor: theme.palette.misc.stepper.border,
+      borderStyle: "solid",
+      backgroundColor: theme.palette.background.surface2,
+    },
+    button: {
+      color: theme.palette.text.primary,
+      borderWidth: theme.spacing(2),
+      margin: "1px",
+      minWidth: "120px",
+      textTransform: "none",
+      "&:hover": {
+        backgroundColor: theme.palette.background.default,
+      },
+      "@media (hover: none)": {
+        "&:hover": {
+          backgroundColor: "initial",
+        },
+      },
+    },
+    selectedButton: {
+      background: theme.palette.background.default,
+    },
+  }
+})

package/src/lib/components/vention-text-input/vention-text-input.stories.tsx

@@ -0,0 +1,203 @@
+import { Box } from "@mui/material"
+import InputAdornment from "@mui/material/InputAdornment"
+import type { Meta, StoryObj } from "@storybook/react"
+import { IconCircleXFilled, IconSearch } from "@tabler/icons-react"
+import React from "react"
+
+import { VentionSpinner } from "../vention-spinner/vention-spinner"
+import { VentionTextInput } from "./vention-text-input"
+
+const meta: Meta<typeof VentionTextInput> = {
+  component: VentionTextInput,
+  title: "Components/VentionTextInput",
+}
+export default meta
+type Story = StoryObj<typeof VentionTextInput>
+const inputProps = {
+  "data-testid": "input-input",
+}
+const FormHelperTextProps = {
+  "data-testid": "input-helper-text",
+}
+
+const InputLabelProps = {
+  "data-testid": "input-label",
+}
+
+export const Primary: Story = {
+  args: {
+    variant: "outlined",
+    size: "medium",
+    label: "Input",
+    "data-testid": "input",
+    inputProps,
+    FormHelperTextProps,
+  },
+}
+
+export const Disabled: Story = {
+  args: {
+    variant: "outlined",
+    size: "medium",
+    label: "Input",
+    "data-testid": "input",
+    inputProps,
+    FormHelperTextProps,
+    state: "disabled",
+  },
+}
+
+export const Placeholder: Story = {
+  args: {
+    variant: "outlined",
+    size: "small",
+    placeholder: "Input text",
+  },
+}
+
+export const SmallOutlined: Story = {
+  args: {
+    variant: "outlined",
+    size: "small",
+    label: "Small input",
+    helperText: "⚠ Helper text",
+    placeholder: "Input text",
+    "data-testid": "input",
+    inputProps,
+    FormHelperTextProps,
+  },
+}
+
+export const MediumOutlinedError: Story = {
+  args: {
+    variant: "outlined",
+    size: "medium",
+    label: "Medium input with error",
+    helperText: "⚠ Error message",
+    state: "error",
+    placeholder: "Input text",
+  },
+}
+
+export const MediumOutlinedWarning: Story = {
+  args: {
+    variant: "outlined",
+    size: "medium",
+    label: "Medium input with warning",
+    helperText: "⚠ Warning message",
+    state: "warning",
+    placeholder: "Input text",
+  },
+}
+
+export const MediumOutlinedSuccess: Story = {
+  args: {
+    variant: "outlined",
+    size: "medium",
+    label: "Medium input with success",
+    helperText: "✓ Success message",
+    state: "success",
+    placeholder: "Input text",
+  },
+}
+
+export const MediumOutlinedDisabled: Story = {
+  args: {
+    variant: "outlined",
+    size: "medium",
+    label: "Medium input with success",
+    helperText: "✓ Success message",
+    state: "disabled",
+    placeholder: "Input text",
+    FormHelperTextProps,
+  },
+}
+
+export const XLOutlined: Story = {
+  args: {
+    variant: "outlined",
+    size: "x-large",
+    label: "Small input",
+    helperText: "⚠ Helper text",
+    placeholder: "Input text",
+    "data-testid": "input",
+    inputProps,
+    FormHelperTextProps,
+    InputLabelProps,
+  },
+}
+
+export const XLOutlinedWithAdornments: Story = {
+  args: {
+    variant: "outlined",
+    size: "x-large",
+    label: "XL input with start, end grouped adornments",
+    helperText: "⚠ Helper text",
+    placeholder: "Input text",
+    "data-testid": "input",
+    inputProps,
+    FormHelperTextProps,
+    InputLabelProps,
+    InputProps: {
+      startAdornment: (
+        <InputAdornment position="start">
+          <IconSearch color="black" />
+        </InputAdornment>
+      ),
+      endAdornment: (
+        <InputAdornment position="end">
+          <Box display="flex" alignItems="center" gap={1}>
+            <VentionSpinner size="small" />
+            <IconCircleXFilled />
+          </Box>
+        </InputAdornment>
+      ),
+    },
+  },
+}
+
+export const XLOutlinedWithTextAdornments: Story = {
+  args: {
+    variant: "outlined",
+    size: "x-large",
+    label: "XL input with start and end adornments",
+    helperText: "⚠ Helper text",
+    placeholder: "Input text",
+    "data-testid": "input",
+    inputProps,
+    FormHelperTextProps,
+    InputLabelProps,
+    leftItemText: "Prefix",
+    rightItemText: "Suffix",
+  },
+}
+
+export const XLShadedWithAdornments: Story = {
+  args: {
+    variant: "shaded",
+    size: "x-large",
+    label: "XL shaded input with start, end grouped adornments",
+    helperText: "⚠ Helper text",
+    placeholder: "Input text",
+    "data-testid": "input",
+    inputProps,
+    FormHelperTextProps,
+    InputLabelProps,
+    InputProps: {
+      startAdornment: (
+        <InputAdornment position="start">
+          <IconSearch color="black" />
+        </InputAdornment>
+      ),
+      endAdornment: (
+        <InputAdornment position="end">
+          <Box display="flex" alignItems="center" gap={1}>
+            <VentionSpinner size="small" />
+            <IconCircleXFilled />
+          </Box>
+        </InputAdornment>
+      ),
+    },
+    state: "default",
+  },
+}