feat(react-formio): add react-select

tsedio · Jan 16, 2025 · a296f7c · a296f7c
1 parent 8ef879c
commit a296f7c
Show file tree

Hide file tree

Showing 49 changed files with 2,081 additions and 605 deletions.
diff --git a/.storybook/preview.ts b/.storybook/preview.ts
@@ -11,17 +11,14 @@ Templates.framework = "tailwind";
 /** @type { import('@storybook/react').Preview } */
 const preview = {
   parameters: {
-    // actions: { argTypesRegex: "^on[A-Z].*" },
-    controls: {
-      matchers: {
-        color: /(background|color)$/i,
-        date: /Date$/
-      }
+    docs: {
+      source: { language: "tsx" }
     }
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS
-  }
+  },
+  tags: ["autodocs"]
 };
 
 export default preview;
diff --git a/package.json b/package.json
@@ -56,6 +56,7 @@
     "react-redux": "7.2.6",
     "react-router": "5.2.1",
     "react-router-dom": "5.2.1",
+    "react-select": "^5.9.0",
     "react-table": "^7.8.0",
     "redux-thunk": "^2.4.1",
     "tooltip.js": "^1.3.3"

diff --git a/packages/react-formio-container/src/views/forms.stories.tsx b/packages/react-formio-container/src/views/forms.stories.tsx
@@ -5,9 +5,7 @@ export default {
   component: FormsComponent,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     setParameters: { action: "setParameters" },
     dispatchOperation: { action: "dispatchOperation" }

diff --git a/packages/react-formio-container/src/views/submissions.stories.tsx b/packages/react-formio-container/src/views/submissions.stories.tsx
@@ -7,9 +7,7 @@ export default {
   component: SubmissionsComponent,
   argTypes: {
     data: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     setParameters: { action: "setParameters" },
     dispatchOperation: { action: "dispatchOperation" }

diff --git a/packages/react-formio/package.json b/packages/react-formio/package.json
@@ -38,6 +38,7 @@
     "react-dnd": ">=16.0.1",
     "react-dnd-html5-backend": ">=16.0.1",
     "react-dom": ">=16.14.0",
+    "react-select": ">=5.9.0",
     "react-table": ">=7.6.3",
     "tooltip.js": ">=1.3.3"
   },

diff --git a/packages/react-formio/src/molecules/alert/Alert.stories.tsx b/packages/react-formio/src/molecules/alert/Alert.stories.tsx
@@ -16,18 +16,18 @@ export default {
   component: Alert,
   argTypes: {
     message: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     type: {
-      control: {
-        type: "select",
-        options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
-      }
+      control: "select",
+      options: ["primary", "secondary", "success", "danger", "warning", "info", "light", "dark"]
+    }
+  },
+  parameters: {
+    docs: {
+      source: { language: "tsx" }
     }
   },
-  parameters: {},
   tags: ["autodocs"]
 };
 

diff --git a/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx b/packages/react-formio/src/molecules/forms/form-control/FormControl.stories.tsx
@@ -12,19 +12,13 @@ export default {
   component: FormControl,
   argTypes: {
     label: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     name: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     children: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     }
   },
   parameters: {},

diff --git a/packages/react-formio/src/molecules/forms/form-control/FormControl.tsx b/packages/react-formio/src/molecules/forms/form-control/FormControl.tsx
@@ -2,6 +2,7 @@ import classnames from "classnames";
 import type { PropsWithChildren, ReactNode } from "react";
 
 export interface FormControlProps<Data = any> {
+  id?: string;
   name: string;
   value?: Data;
   required?: boolean;
@@ -17,6 +18,7 @@ export interface FormControlProps<Data = any> {
 export function FormControl({
   children,
   name,
+  id = name,
   required,
   prefix,
   suffix,
@@ -27,7 +29,7 @@ export function FormControl({
   return (
     <div data-testid={name && `form-group-${name}`} id={`form-group-${name || ""}`} className={classnames("form-group", className)}>
       {label && (
-        <label htmlFor={name} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
+        <label htmlFor={id} data-testid='form-control-label' className={`col-form-label ${required ? " field-required" : ""}`}>
           {label}
         </label>
       )}

diff --git a/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx b/packages/react-formio/src/molecules/forms/input-tags/InputTags.stories.tsx
@@ -14,40 +14,26 @@ export default {
   component: InputTags,
   argTypes: {
     label: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     name: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     value: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
+      control: "select",
+      options: ["small", "normal"]
     },
     placeholder: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     choices: {
-      control: {
-        type: "object"
-      }
+      control: "object"
     },
     description: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     }
   },
   parameters: {},

diff --git a/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx b/packages/react-formio/src/molecules/forms/input-tags/InputTags.tsx
@@ -2,6 +2,7 @@ import Choices from "@formio/choices.js";
 import uniq from "lodash/uniq";
 import { useEffect, useRef } from "react";
 
+import { registerComponent } from "../../../registries/components";
 import { FormControl, FormControlProps } from "../form-control/FormControl";
 
 export interface InputTagsProps<T = any> extends Omit<FormControlProps, "description" | "prefix" | "suffix"> {
@@ -47,3 +48,5 @@ export function InputTags({ name, value = [], label, onChange, required, descrip
     </FormControl>
   );
 }
+
+registerComponent("InputTags", InputTags);
diff --git a/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx b/packages/react-formio/src/molecules/forms/input-text/InputText.stories.tsx
@@ -18,45 +18,29 @@ export default {
   component: InputText,
   argTypes: {
     label: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     type: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     name: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     value: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     required: {
-      control: {
-        type: "boolean"
-      }
+      control: "boolean"
     },
     size: {
-      control: {
-        type: "select",
-        options: ["sm", "normal"]
-      }
+      control: "select",
+      options: ["small", "normal"]
     },
     placeholder: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     description: {
-      control: {
-        type: "text"
-      }
+      control: "text"
     },
     onChange: {
       action: "onChange"
@@ -188,7 +172,7 @@ export const Sizing: Story = {
     label: "Label",
     type: "number",
     value: "",
-    size: "sm",
+    size: "small",
     placeholder: "Placeholder",
     description: "Use dollars!"
   }

diff --git a/packages/react-formio/src/molecules/forms/input-text/InputText.tsx b/packages/react-formio/src/molecules/forms/input-text/InputText.tsx
@@ -2,6 +2,7 @@ import classnames from "classnames";
 import { useEffect, useState } from "react";
 import { useDebouncedCallback } from "use-debounce";
 
+import { registerComponent } from "../../../registries/components";
 import { getEventValue } from "../../../utils/getEventValue";
 import { FormControl, FormControlProps } from "../form-control/FormControl";
 
@@ -11,7 +12,7 @@ export interface InputTextProps<Data = any> extends FormControlProps<Data> {
   /**
    * The input size
    */
-  size?: string;
+  size?: "small" | string;
   onChange?: (name: string, value: Data) => void;
   placeholder?: string;
   debounceDelay?: number;
@@ -21,6 +22,7 @@ export interface InputTextProps<Data = any> extends FormControlProps<Data> {
 
 export function InputText<T = any>({
   name,
+  id = name,
   value,
   label,
   onChange,
@@ -57,7 +59,8 @@ export function InputText<T = any>({
         {...props}
         data-testid={`input_${name}`}
         className={classnames("form-control", size && `form-control-${size}`)}
-        id={name}
+        id={id}
+        name={name}
         required={required}
         value={(localValue || "") as any}
         placeholder={placeholder}
@@ -71,3 +74,5 @@ export function InputText<T = any>({
     </FormControl>
   );
 }
+
+registerComponent("InputText", InputText);
diff --git a/packages/react-formio/src/molecules/forms/select/Select.interfaces.ts b/packages/react-formio/src/molecules/forms/select/Select.interfaces.ts
@@ -0,0 +1,47 @@
+import { HTMLAttributes } from "react";
+
+import { FormControlProps } from "../form-control/FormControl";
+
+export interface SelectOptionBaseProps<Data = any> extends Record<string, any> {
+  label: string | JSX.Element;
+  value: string;
+  id?: string;
+  disabled?: boolean;
+  note?: string | JSX.Element;
+  group?: string;
+  data?: Data;
+  template?: (item: SelectOptionProps<Data>) => JSX.Element;
+}
+
+export interface SelectOptionProps<Data = string> extends SelectOptionBaseProps<Data> {
+  options?: SelectOptionProps<Data>[];
+}
+
+export interface SelectProps<Data = string> extends FormControlProps, Omit<HTMLAttributes<HTMLSelectElement>, "onChange" | "prefix"> {
+  layout?: "html5" | "react" | "choicesjs";
+  /**
+   * Error message
+   */
+  errorMessage?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  size?: string;
+  options: (SelectOptionBaseProps<Data> | Omit<SelectOptionProps<Data>, "value">)[];
+  disableSearch?: boolean;
+  searchEnabled?: boolean;
+  customProperties?: Record<string, any>;
+}
+
+export interface SelectSingle<Data = string> extends SelectProps<Data> {
+  multiple?: false | undefined;
+  value?: Data;
+  onChange?: (name: string, value: Data) => void;
+}
+
+export interface SelectMultiple<Data = string> extends SelectProps<Data> {
+  multiple: true;
+  value?: Data[];
+  onChange?: (name: string, value: Data[]) => void;
+}
+
+export type AllSelectProps<Data = string> = SelectSingle<Data> | SelectMultiple<Data>;