@tsed/react-formio 2.3.6 → 3.0.0-alpha.10

package/src/molecules/forms/select/components/HtmlSelect.stories.tsx

@@ -0,0 +1,305 @@
+import "./HtmlSelect";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { expect, fn, userEvent, within } from "@storybook/test";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { Select } from "../Select";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1"
+  },
+  {
+    label: "Option 2",
+    value: "option-2"
+  },
+  {
+    label: "Option 3",
+    value: "option-3"
+  }
+];
+/**
+ * HTML5 select component.
+ *
+ * ```tsx
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/all"; // import HTML5, ChoicesJS and React components
+ *
+ * // or
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/HtmlSelect"; // register only HTML5 component
+ *
+ * ```
+ */
+export default {
+  title: "forms/Select/Html5",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "pearl" }
+  },
+  args: {},
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "select",
+      options: ["option-1", "option-2", "option-3"]
+    },
+    size: {
+      control: "radio",
+      options: ["small", "normal"]
+    },
+    layout: {
+      control: "select",
+      options: ["html5", "choicesjs", "react"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    options: {
+      control: "object"
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  tags: ["autodocs"],
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { value, onChange } = useValue(args);
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Select {...args} value={value} onChange={onChange} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select<string>>;
+/**
+ * Basic select component using HTML5 syntax.
+ */
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: "option-1",
+    options,
+    onChange: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("select_name");
+
+    await expect(select).toBeInTheDocument();
+    await expect(select).toHaveValue("option-1");
+
+    await userEvent.selectOptions(select, "option-2");
+
+    await expect(select).toHaveValue("option-2");
+    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+
+    const label = canvas.getByTestId("form-group-name");
+
+    await expect(label).toBeInTheDocument();
+    await expect(label).toHaveTextContent("Label");
+  }
+};
+
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholder: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    onChange: fn()
+  },
+  play: async ({ canvasElement, args }) => {
+    const canvas = within(canvasElement);
+
+    const select = canvas.getByTestId("select_name");
+
+    await expect(select).toBeInTheDocument();
+    await expect(select).toHaveValue("");
+
+    await userEvent.selectOptions(select, "option-2");
+
+    await expect(select).toHaveValue("option-2");
+    await expect(args.onChange).toHaveBeenCalledWith("name", "option-2");
+  }
+};
+/**
+ * Select component with a disabled prop.
+ */
+export const WithDisabledProp: Story = {
+  args: {
+    disabled: true,
+    options
+  }
+};
+
+/**
+ * Select component with a disabled option.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    size: "small",
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const AppendBefore: Story = {
+  args: {
+    before: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const AppendAfter: Story = {
+  args: {
+    after: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: "",
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroups: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Group 2",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
+
+export const WithMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroupsAndMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Group 2",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};

package/src/molecules/forms/select/components/HtmlSelect.tsx

@@ -0,0 +1,54 @@
+import cx from "classnames";
+
+import { registerComponent } from "../../../../registries/components";
+import { getEventValue } from "../../../../utils/getEventValue";
+import { cleanFormControlProps } from "../../form-control/FormControl";
+import { AllSelectProps, SelectOptionBaseProps } from "../Select.interface";
+
+function Option({ value, label, ...props }: SelectOptionBaseProps) {
+  return (
+    <option {...props} value={value as any}>
+      {label}
+    </option>
+  );
+}
+
+export function HTMLSelect({ name, id = name, size, value, multiple, onChange, options, placeholder, ...props }: AllSelectProps) {
+  const hasGroup = !!options[0].options;
+
+  return (
+    <select
+      data-testid={`select_${name}`}
+      {...cleanFormControlProps(props as any)}
+      className={cx("form-control", size && `form-control-${size}`)}
+      name={name}
+      id={id}
+      multiple={multiple}
+      value={value || ("" as any)}
+      onChange={(event) => {
+        onChange && onChange(name, getEventValue(event));
+      }}
+    >
+      {placeholder && !multiple && (
+        <option value='' disabled>
+          {placeholder}
+        </option>
+      )}
+      {hasGroup
+        ? options.map(({ label, options }) => {
+            return (
+              <optgroup key={label} label={label}>
+                {options.map((props: SelectOptionBaseProps) => {
+                  return <Option key={String(props.value)} {...props} />;
+                })}
+              </optgroup>
+            );
+          })
+        : (options as SelectOptionBaseProps[]).map((props) => {
+            return <Option key={String(props.value)} {...props} />;
+          })}
+    </select>
+  );
+}
+
+registerComponent("Select.html5", HTMLSelect);

package/src/molecules/forms/select/components/ReactSelect.stories.tsx

@@ -0,0 +1,287 @@
+import "../all";
+
+import { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+
+import { iconClass } from "../../../../utils/iconClass";
+import { useValue } from "../../../__fixtures__/useValue.hook";
+import { Select } from "../Select";
+
+const options = [
+  {
+    label: "Option 1",
+    value: "option-1"
+  },
+  {
+    label: "Option 2",
+    value: "option-2"
+  },
+  {
+    label: "Option 3",
+    value: "option-3"
+  }
+];
+/**
+ * React select component.
+ *
+ * ```tsx
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/all"; // import HTML5, ChoicesJS and React components
+ *
+ * // or
+ * import {Select} from "@tsed/react-formio/molecules/forms/select/Select";
+ * import "@tsed/react-formio/molecules/forms/select/components/ReactSelect"; // register only React select component
+ *
+ * ```
+ */
+export default {
+  title: "forms/Select/React",
+  component: Select,
+  parameters: {
+    layout: "centered",
+    backgrounds: { default: "pearl" }
+  },
+  args: {
+    layout: "react"
+  },
+  argTypes: {
+    label: {
+      control: "text"
+    },
+    name: {
+      control: "text"
+    },
+    value: {
+      control: "select",
+      options: ["option-1", "option-2", "option-3"]
+    },
+    size: {
+      control: "radio",
+      options: ["small", "normal"]
+    },
+    layout: {
+      control: "select",
+      options: ["html5", "choicesjs", "react"]
+    },
+    placeholder: {
+      control: "text"
+    },
+    options: {
+      control: "object"
+    },
+    onChange: {
+      action: "onChange"
+    }
+  },
+  tags: ["autodocs"],
+  render(args) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { value, onChange } = useValue(args);
+
+    return (
+      <div style={{ width: "300px" }}>
+        <Select {...args} value={value} onChange={onChange} />
+      </div>
+    );
+  }
+} satisfies Meta<typeof Select>;
+
+type Story = StoryObj<typeof Select<string>>;
+/**
+ * Basic select component using HTML5 syntax.
+ */
+export const Usage: Story = {
+  args: {
+    name: "name",
+    label: "Label",
+    value: "option-1",
+    options,
+    onChange: fn()
+  }
+};
+
+/**
+ * Select component with a placeholder.
+ */
+export const WithPlaceholder: Story = {
+  args: {
+    name: "name",
+    placeholder: "Select an option",
+    options,
+    onChange: fn()
+  }
+};
+/**
+ * Select component with a disabled prop.
+ */
+export const WithDisabledProp: Story = {
+  args: {
+    disabled: true,
+    options
+  }
+};
+
+/**
+ * Select component with a disabled option.
+ */
+export const WithDisabledOption: Story = {
+  args: {
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const WithSizeOption: Story = {
+  args: {
+    multiple: true,
+    size: "small",
+    value: ["option-1"],
+    options: [
+      {
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        label: "Option 2",
+        value: "option-2",
+        disabled: true
+      },
+      {
+        label: "Option 3",
+        value: "option-3"
+      }
+    ]
+  }
+};
+
+export const AppendBefore: Story = {
+  args: {
+    before: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const AppendAfter: Story = {
+  args: {
+    after: <i className={iconClass(undefined, "calendar")} />,
+    label: "Label",
+    value: "",
+    size: "",
+    placeholder: "Placeholder",
+    options
+  }
+};
+
+export const WithDescription: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: "",
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroups: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Group 1",
+        options: [
+          {
+            label: "Option 1",
+            value: "option-1"
+          }
+        ]
+      },
+      {
+        group: "group-1",
+        label: "Option 1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        group: "group-2",
+        label: "Option 3",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};
+
+export const WithMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    placeholder: "Placeholder",
+    description: "Select multiple values",
+    options
+  }
+};
+
+export const WithGroupsAndMultiple: Story = {
+  args: {
+    label: "Label",
+    name: "name",
+    value: [],
+    size: "",
+    multiple: true,
+    description: "Select multiple values",
+    options: [
+      {
+        label: "Option 1",
+        group: "group-1",
+        value: "option-1"
+      },
+      {
+        group: "group-1",
+        label: "Option 2",
+        value: "option-2"
+      },
+      {
+        label: "Option 3",
+        group: "group-2",
+        value: "option-3"
+      },
+      {
+        group: "group-2",
+        label: "Option 4",
+        value: "option-4"
+      }
+    ]
+  }
+};

package/src/molecules/forms/select/components/ReactSelect.tsx

@@ -0,0 +1,60 @@
+import Select, { OptionsOrGroups } from "react-select";
+import makeAnimated from "react-select/animated";
+
+import { registerComponent } from "../../../../registries/components";
+import { AllSelectProps } from "../Select.interface";
+
+const animatedComponents = makeAnimated();
+
+function findValues(value: string | string[], options: AllSelectProps["options"][0]) {
+  const localValue: string[] = [].concat(value as never);
+
+  return options
+    .flatMap((item: any) => {
+      if (localValue.includes(item.value)) {
+        return item;
+      }
+
+      if (item.options) {
+        return item.options.filter((option: any) => localValue.includes(option.value));
+      }
+    })
+    .filter(Boolean);
+}
+
+function mapValues(value: { label: string; value: never[] } | null, multiple?: boolean) {
+  return multiple
+    ? []
+        .concat(value as never)
+        .filter(Boolean)
+        .map((v: { value: unknown }) => v.value)
+    : (value as any).value;
+}
+
+export function ReactSelect(props: AllSelectProps) {
+  const { placeholder, options, multiple, searchEnabled = true, customProperties = {} } = props;
+
+  const values = findValues(props.value!, props.options);
+
+  return (
+    <Select<{ label: string; value: never | never[] }>
+      {...customProperties}
+      id={props.id}
+      placeholder={placeholder}
+      className='react-select-container'
+      classNamePrefix='react-select'
+      name={props.name || ""}
+      components={animatedComponents}
+      options={options as OptionsOrGroups<any, any>}
+      isDisabled={props.disabled}
+      isSearchable={searchEnabled}
+      isMulti={props.multiple as false}
+      value={multiple ? values : values[0]}
+      onChange={(value) => {
+        props.onChange?.(props.name, mapValues(value, props.multiple));
+      }}
+    />
+  );
+}
+
+registerComponent("Select.react", ReactSelect);