@vention/machine-ui 3.27.0

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

@@ -0,0 +1,224 @@
+import { SelectChangeEvent } from "@mui/material"
+import { useArgs } from "@storybook/preview-api"
+import type { Meta, StoryObj } from "@storybook/react"
+import React from "react"
+
+import { VentionSelect, VentionSelectProps } from "./vention-select"
+
+const meta: Meta<typeof VentionSelect> = {
+  component: VentionSelect,
+  title: "Components/VentionSelect",
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+        options: ["small", "medium", "large"],
+      },
+    },
+    variant: {
+      control: {
+        type: "radio",
+        options: ["outlined"],
+      },
+    },
+    value: {
+      control: {
+        type: "text",
+      },
+    },
+    state: {
+      control: {
+        type: "radio",
+        options: ["default", "warning"],
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof VentionSelect>
+
+const renderFunction = (props: VentionSelectProps) => {
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [, setArgs] = useArgs()
+
+  const handleChange = (event: SelectChangeEvent<VentionSelectProps["value"]>) => {
+    setArgs({ value: props.isMultiple ? event.target.value : Number(event.target.value) })
+  }
+
+  const getValue = () => {
+    if (props.isMultiple && !Array.isArray(props.value)) return []
+    if (props.isMultiple) return props.value
+    if (Array.isArray(props.value)) return props.value[0]
+
+    return props.value
+  }
+
+  return <VentionSelect {...props} onChange={handleChange} value={getValue()} />
+}
+
+export const Default: Story = {
+  args: {
+    size: "large",
+    variant: "outlined",
+    placeholder: "Select an option",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: false,
+    state: "default",
+  },
+  render: renderFunction,
+}
+
+export const Disabled: Story = {
+  args: {
+    size: "large",
+    variant: "outlined",
+    placeholder: "Select an option",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: true,
+    isMultiple: false,
+  },
+  render: renderFunction,
+}
+
+export const SmallSize: Story = {
+  args: {
+    size: "small",
+    variant: "outlined",
+    placeholder: "Select an option",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: false,
+  },
+  render: renderFunction,
+}
+
+export const MediumSize: Story = {
+  args: {
+    size: "medium",
+    variant: "outlined",
+    placeholder: "Select an option",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: false,
+  },
+  render: renderFunction,
+}
+
+export const LargeSize: Story = {
+  args: {
+    size: "large",
+    variant: "outlined",
+    placeholder: "Select multiple options",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: false,
+  },
+  render: renderFunction,
+}
+
+export const WithCustomLabel: Story = {
+  args: {
+    size: "medium",
+    variant: "outlined",
+    placeholder: "Select an option",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: false,
+    labelText: "Custom Label",
+  },
+  render: renderFunction,
+}
+
+export const WithError: Story = {
+  args: {
+    size: "medium",
+    variant: "outlined",
+    placeholder: "Select an option",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: false,
+    errorText: "Error message",
+  },
+  render: renderFunction,
+}
+
+export const WithDefaultValue: Story = {
+  args: {
+    size: "medium",
+    variant: "outlined",
+    placeholder: "Select an option",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: false,
+    value: 2,
+  },
+  render: renderFunction,
+}
+
+export const WithMultipleOptions: Story = {
+  args: {
+    size: "medium",
+    variant: "outlined",
+    placeholder: "Select multiple options",
+    menuItems: [
+      { displayText: "first", value: 1 },
+      { displayText: "second", value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: true,
+    value: [1, 3],
+  },
+  render: renderFunction,
+}
+
+export const WithMultipleOptionsNode: Story = {
+  args: {
+    size: "medium",
+    variant: "outlined",
+    placeholder: "Select multiple options",
+    menuItems: [
+      { displayNode: <div style={{ background: "red" }}>first</div>, value: 1 },
+      { displayNode: <div style={{ background: "yellow" }}>second</div>, value: 2 },
+      { displayText: "third", value: 3 },
+    ],
+    isDisabled: false,
+    isMultiple: true,
+    value: [1, 2, 3],
+  },
+  render: renderFunction,
+}

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

@@ -0,0 +1,348 @@
+import "@testing-library/jest-dom"
+
+import { screen } from "@testing-library/react"
+import userEvent from "@testing-library/user-event"
+
+import { renderWithTheme } from "../../testing/utils"
+import { VentionSelect, VentionSelectMenuItem, VentionSelectProps } from "./vention-select"
+import { machineUiTheme } from "../../theme/machine-ui-theme"
+
+describe("VentionSelect", () => {
+  const mockHandleChange = jest.fn()
+  const menuItems: VentionSelectMenuItem<string>[] = [
+    { value: "1", displayText: "Option 1" },
+    { value: "2", displayText: "Option 2" },
+  ]
+  const sizes: VentionSelectProps["size"][] = ["small", "medium", "large", "x-large", "xx-large"]
+  const labelTexts = ["Test Label", null]
+
+  it("displays the correct default text", () => {
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value={undefined}
+        onChange={mockHandleChange}
+        menuItems={menuItems}
+        placeholder="Select an option"
+      />
+    )
+
+    expect(getByText("Select an option")).toBeInTheDocument()
+  })
+
+  it("displays the correct default text", () => {
+    const { getByRole } = renderWithTheme(
+      <VentionSelect
+        size="large"
+        variant="outlined"
+        isDisabled
+        value="1"
+        onChange={mockHandleChange}
+        menuItems={menuItems}
+        placeholder="Select an option"
+      />
+    )
+
+    const selectElement = getByRole("combobox")
+    expect(selectElement).toHaveStyle("cursor: default;")
+  })
+
+  it("closes the dropdown when an option is selected", async () => {
+    const { getByRole } = renderWithTheme(
+      <VentionSelect
+        isDisabled={false}
+        value="1"
+        onChange={mockHandleChange}
+        menuItems={menuItems}
+        placeholder="Select an option"
+        size={"small"}
+        variant="outlined"
+      />
+    )
+
+    const select = getByRole("combobox")
+    await userEvent.click(select)
+
+    const option = await screen.findByRole("option", { name: "Option 1" })
+    expect(option).toBeInTheDocument()
+    await userEvent.click(option)
+    expect(option).not.toBeInTheDocument()
+  })
+
+  it("displays the labelText correctly", () => {
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value="1"
+        onChange={mockHandleChange}
+        menuItems={menuItems}
+        placeholder="Select an option"
+        labelText="Test Label"
+      />
+    )
+
+    expect(getByText("Test Label")).toBeInTheDocument()
+  })
+
+  it("displays the errorText correctly", () => {
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value="1"
+        onChange={mockHandleChange}
+        menuItems={menuItems}
+        placeholder="Select an option"
+        errorText="Test Error"
+      />
+    )
+
+    expect(getByText("Test Error")).toBeInTheDocument()
+  })
+
+  it("displays the displayNode correctly", () => {
+    const menuItemsWithDisplayNode: VentionSelectMenuItem<string>[] = [
+      { value: "1", displayNode: <div>Option 1</div> },
+      { value: "2", displayNode: <div>Option 2</div> },
+    ]
+
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value={["1"]}
+        onChange={mockHandleChange}
+        menuItems={menuItemsWithDisplayNode}
+        isMultiple
+        placeholder="Select an option"
+      />
+    )
+
+    userEvent.click(getByText("Option 1"))
+    expect(getByText("Option 1")).toBeInTheDocument()
+  })
+
+  it("throws an error when isMultiple is true but value is not an array", () => {
+    const handleChange = jest.fn()
+    // Temporarily disable console.error
+    const consoleError = console.error
+    console.error = jest.fn()
+
+    expect(() => {
+      renderWithTheme(
+        <VentionSelect
+          size="medium"
+          variant="outlined"
+          value="1"
+          onChange={handleChange}
+          menuItems={menuItems}
+          placeholder="Select an option"
+          isMultiple={true}
+        />
+      )
+    }).toThrow("Selected value must be an array when isMultiple is true")
+
+    // Restore console.error
+    console.error = consoleError
+  })
+
+  it("throws an error when isMultiple is false but value is an array", () => {
+    const handleChange = jest.fn()
+    // Temporarily disable console.error
+    const consoleError = console.error
+    console.error = jest.fn()
+
+    expect(() => {
+      renderWithTheme(
+        <VentionSelect
+          size="medium"
+          variant="outlined"
+          value={["123"]}
+          onChange={handleChange}
+          menuItems={menuItems}
+          placeholder="Select an option"
+          isMultiple={false}
+        />
+      )
+    }).toThrow("Selected value must be a string or number when isMultiple is false")
+
+    // Restore console.error
+    console.error = consoleError
+  })
+
+  it("handles multiple selection and displayText correctly", () => {
+    const handleChange = jest.fn()
+
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value={["1", "2"]}
+        onChange={handleChange}
+        menuItems={menuItems}
+        placeholder="Select an option"
+        isMultiple={true}
+      />
+    )
+
+    expect(getByText("Option 1, Option 2")).toBeInTheDocument()
+  })
+
+  it("handles multiple selection and displayNode correctly", () => {
+    const handleChange = jest.fn()
+
+    const menuItemsWithDisplayNode: VentionSelectMenuItem<string>[] = [
+      { value: "1", displayNode: <div>Option 1</div> },
+      { value: "2", displayNode: <div>Option 2</div> },
+      { value: "3", displayText: "third" },
+      { value: "4" },
+    ]
+
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value={["1", "2", "3", "4"]}
+        onChange={handleChange}
+        menuItems={menuItemsWithDisplayNode}
+        placeholder="Select an option"
+        isMultiple={true}
+      />
+    )
+
+    expect(getByText("Option 1")).toBeInTheDocument()
+    expect(getByText("Option 2")).toBeInTheDocument()
+    expect(getByText("third")).toBeInTheDocument()
+  })
+
+  it("handles displayText and displayNode empty", () => {
+    const handleChange = jest.fn()
+
+    const menuItemsWithDisplayNode: VentionSelectMenuItem<string>[] = [{ value: "1", displayText: "second" }, { value: "2" }]
+
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value={["1", "2", "3"]}
+        onChange={handleChange}
+        menuItems={menuItemsWithDisplayNode}
+        placeholder="Select an option"
+        isMultiple={true}
+      />
+    )
+
+    expect(getByText("second, 2, 3")).toBeInTheDocument()
+  })
+
+  it("handles selected item not part of menuItems", () => {
+    const handleChange = jest.fn()
+
+    // Temporarily mock console.warn to suppress MUI's warning
+    const originalConsoleWarn = console.warn
+    console.warn = jest.fn()
+
+    try {
+      const { getByText } = renderWithTheme(
+        <VentionSelect
+          size="medium"
+          variant="outlined"
+          value={"3"}
+          onChange={handleChange}
+          menuItems={menuItems}
+          placeholder="Select an option"
+        />
+      )
+
+      expect(getByText("3")).toBeInTheDocument()
+    } finally {
+      // Restore the original console.warn regardless of test outcome
+      console.warn = originalConsoleWarn
+    }
+  })
+
+  sizes.forEach(size => {
+    labelTexts.forEach(labelText => {
+      it(`renders without errors with ${size} size and ${labelText ? "with" : "without"} labelText`, () => {
+        const { container } = renderWithTheme(
+          <VentionSelect
+            size={size}
+            variant="outlined"
+            value="1"
+            onChange={mockHandleChange}
+            menuItems={menuItems}
+            placeholder="Select an option"
+            labelText={labelText}
+          />
+        )
+
+        expect(container).toBeInTheDocument()
+      })
+
+      it(`renders ${size} size in error state`, () => {
+        const { getByText } = renderWithTheme(
+          <VentionSelect
+            size={size}
+            variant="outlined"
+            value="1"
+            onChange={mockHandleChange}
+            menuItems={menuItems}
+            placeholder="Select an option"
+            labelText={labelText}
+            errorText="Error"
+          />
+        )
+
+        expect(getByText("Error")).toBeInTheDocument()
+      })
+    })
+  })
+
+  it("displays the correct react node if displayNode is provided", () => {
+    const menuItemsWithDisplayNode: VentionSelectMenuItem<string>[] = [
+      {
+        value: "1",
+        displayNode: (
+          <div>
+            <p>Hello</p>
+            <p>Option 1</p>
+          </div>
+        ),
+      },
+      { value: "2", displayNode: <div>Option 2</div> },
+    ]
+
+    const { getByText } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value="1"
+        onChange={mockHandleChange}
+        menuItems={menuItemsWithDisplayNode}
+        placeholder="Select an option"
+      />
+    )
+
+    expect(getByText("Option 1")).toBeInTheDocument()
+    expect(getByText("Hello")).toBeInTheDocument()
+  })
+
+  it("displays correct select container border color if state is warning", () => {
+    const { container } = renderWithTheme(
+      <VentionSelect
+        size="medium"
+        variant="outlined"
+        value="1"
+        onChange={mockHandleChange}
+        menuItems={menuItems}
+        placeholder="Select an option"
+        state="warning"
+      />
+    )
+
+    const selectElement = container.getElementsByClassName("MuiOutlinedInput-notchedOutline")[0]
+    expect(selectElement).toHaveStyle(`border: 1px solid ${machineUiTheme.palette.border.subtleWarning}`)
+  })
+})