select is now multiple

VulcanJS · May 6, 2022 · 7527830 · 7527830
1 parent 772951c
commit 7527830
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 15 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -4,14 +4,14 @@ module.exports = {
     builder: "webpack5",
   },
   stories: [
+    // TODO: reenable progressively, we currently have an issue with build never ending
     "../packages/react-ui/**/*.stories.@(js|jsx|tsx)",
-    // TODO: reenable progressively
-    "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
     // // specifying packages folder is important to avoid rebuilding on cache change
     // // @see https://github.com/storybookjs/storybook/issues/14342
-    "../packages/**/*.stories.mdx",
-    "../packages/**/*.stories.@(js|jsx|ts|tsx)",
+    // "../packages/**/*.stories.mdx",
+    //"../packages/**/*.stories.@(js|jsx|ts|tsx)",
+    "../stories/**/*.stories.mdx",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   staticDirs: ["./public"],
   addons: [

diff --git a/packages/react-ui/components/form/Form/tests/Form.stories.tsx b/packages/react-ui/components/form/Form/tests/Form.stories.tsx
@@ -150,14 +150,6 @@ const selectFieldsSchema = withDefaultFieldSchema({
       { label: "c", value: "c" },
     ],
   },
-  /* 
-  // TODO:
-  checkboxgroup: {},
-  select,
-  selectmultiple,
-  autocomplete,
-  multiautocomplete
-  */
 });
 
 export const SelectFieldsForm = FormTemplate.bind({});
@@ -168,6 +160,39 @@ SelectFieldsForm.args = {
   }),
 };
 
+const selectMultipleFieldsSchema = withDefaultFieldSchema({
+  // multiple
+  "string-checkboxgroup": {
+    type: String,
+    input: "checkboxgroup",
+    options: [
+      { label: "a", value: "a" },
+      { label: "b", value: "b" },
+      { label: "c", value: "c" },
+    ],
+  },
+  "string-select-multiple": {
+    type: String,
+    input: "selectmultiple",
+    options: [
+      { label: "a", value: "a" },
+      { label: "b", value: "b" },
+      { label: "c", value: "c" },
+    ],
+  },
+  /* 
+  // TODO:
+  multiautocomplete
+  */
+});
+export const SelectMultipleFieldsForm = FormTemplate.bind({});
+SelectMultipleFieldsForm.args = {
+  model: createModel({
+    name: "Biography",
+    schema: selectMultipleFieldsSchema,
+  }),
+};
+
 // ARRAY AND OBJECTS
 export const ArrayOfObjectsForm = FormTemplate.bind({});
 ArrayOfObjectsForm.args = { model: models.ArrayOfObjects };

diff --git a/packages/react-ui/components/form/inputs/BasicInputs.tsx b/packages/react-ui/components/form/inputs/BasicInputs.tsx
@@ -47,7 +47,7 @@ export const FormItem = (
 };
 
 const HTMLSelectAdapter = (props: FormInputProps) => {
-  const { inputProperties, options = [], itemProperties } = props;
+  const { multiple, inputProperties, options = [], itemProperties } = props;
   const { label, name } = inputProperties;
   if (!Array.isArray(options))
     throw new Error("HTMLSelectAdapater not yet supporting functional options");
@@ -62,6 +62,7 @@ const HTMLSelectAdapter = (props: FormInputProps) => {
     >
       {/** TODO: whitelisting feature should be smarter to differentiate select and input */}
       <select
+        multiple={multiple}
         {...(inputProperties as unknown as React.HTMLProps<HTMLSelectElement>)}
       >
         {options.map(({ label, value }) => (

diff --git a/packages/react-ui/components/form/tests/fixtures/schemas.ts b/packages/react-ui/components/form/tests/fixtures/schemas.ts
@@ -5,6 +5,7 @@ export const defaultFieldSchema = {
   canUpdate: ["guests"],
 };
 
+import { VulcanFieldSchema } from "@vulcanjs/schema";
 import fromPairs from "lodash/fromPairs.js";
 import mapValues from "lodash/mapValues.js";
 import SimpleSchema from "simpl-schema";
@@ -14,7 +15,9 @@ import SimpleSchema from "simpl-schema";
  * @param partialSchema
  * @returns
  */
-export const withDefaultFieldSchema = (partialSchema) =>
+export const withDefaultFieldSchema = (
+  partialSchema: Partial<VulcanFieldSchema>
+) =>
   mapValues(partialSchema, (fieldSchema) => ({
     ...defaultFieldSchema,
     ...fieldSchema,