@springmicro/forms 0.7.0 → 0.7.2

package/src/utils/form-builder.ts

@@ -1,424 +1,424 @@
-import {
-  FormNodeKeys,
-  FormNodeType,
-  FormType,
-  FileNode,
-  IntegerNode,
-  TextNode,
-  ArrayNode,
-  DateNode,
-  ObjectNode,
-} from "../types/form-builder";
-import { UseStateType } from "../types/utils.type";
-import { RJSFSchema, UiSchema } from "@rjsf/utils";
-import { JSONSchema7 } from "json-schema";
-import { v4 as uuidv4 } from "uuid";
-
-/**
- * ---------------------- GENERATE NODE DATA ----------------------
- */
-
-const baseDefaultNode = { required: true, nodeId: "" };
-
-export const defaultNodes: {
-  [key in FormNodeKeys]: FormNodeType extends { type: infer T }
-    ? T extends key
-      ? FormNodeType
-      : never
-    : never;
-} = {
-  string: {
-    ...baseDefaultNode,
-    type: "string",
-    title: "New String Field",
-  },
-  file: {
-    ...baseDefaultNode,
-    type: "file",
-    title: "New File Field",
-  },
-  integer: {
-    ...baseDefaultNode,
-    type: "integer",
-    title: "New Integer Field",
-  },
-  date: {
-    ...baseDefaultNode,
-    type: "date",
-    title: "New Date Field",
-  },
-  array: {
-    ...baseDefaultNode,
-    type: "array",
-    title: "New Array Field",
-    child: { type: "string" },
-  },
-  object: {
-    ...baseDefaultNode,
-    type: "object",
-    title: "New Object",
-    children: [],
-  },
-};
-
-export function generateNodeData(
-  type: FormNodeKeys,
-  children?: FormNodeType[]
-) {
-  return {
-    ...defaultNodes[type],
-    nodeId: uuidv4(),
-    children: type !== "object" ? undefined : children ?? [],
-  };
-}
-
-/**
- * ---------------------- FORM JSON -> BUILDER JSON ----------------------
- */
-
-export function serializeFormToBuilder(
-  rjsfForm: RJSFSchema,
-  rjsfUiSchema: UiSchema = {}
-): {
-  form: FormType;
-  nodes: FormNodeType[];
-} {
-  if (rjsfForm === undefined) return { form: {}, nodes: [] };
-  function generate(form: RJSFSchema, ui: UiSchema) {
-    const nodes: (FormNodeType | undefined)[] = Object.keys(
-      form.properties!
-    ).map((key) => {
-      // The two parts of the current working node.
-      const formNode = form.properties![key] as JSONSchema7;
-      const uiNode = ui[key] ?? {};
-
-      const type = formNode.type;
-      const required = form.required?.includes(key);
-
-      const baseNode = {
-        title: formNode.title!,
-        nodeId: uuidv4(),
-        description: uiNode["ui:description"],
-        required,
-        propertyName: key,
-      };
-
-      if (type === "string") {
-        if (formNode.format === "data-url") {
-          // ==================== FILE ====================
-          const node: FileNode = {
-            type: "file",
-            ...baseNode,
-          };
-          if (uiNode["ui:options"] && uiNode["ui:options"].accept)
-            node.filetype = uiNode["ui:options"].accept;
-          return node;
-        }
-        if (formNode.format === "date-time") {
-          // ==================== DATE ====================
-          const node: DateNode = {
-            type: "date",
-            ...baseNode,
-          };
-          return node;
-        }
-        // ==================== TEXT ====================
-        const node: TextNode = {
-          type: "string",
-          ...baseNode,
-        };
-        if (formNode.format) node.format = formNode.format;
-        if (formNode.minLength) node.minLength = formNode.minLength;
-        if (formNode.maxLength) node.maxLength = formNode.maxLength;
-        if (formNode.default) node.default = formNode.default as string;
-        return node;
-      }
-      if (type === "integer") {
-        // ==================== INTEGER ====================
-        const node: IntegerNode = {
-          type: "integer",
-          ...baseNode,
-        };
-        return node;
-      }
-      if (type === "array") {
-        const items = formNode.items as JSONSchema7;
-        if (items.type === "string" && items.format === "data-url") {
-          // ==================== MULTIPLE FILES ====================
-          const node: FileNode = {
-            type: "file",
-            multiple: true,
-            ...baseNode,
-          };
-          if (uiNode["ui:options"] && uiNode["ui:options"].accept)
-            node.filetype = uiNode["ui:options"].accept;
-          return node;
-        }
-        if (items.type === "string" && items.format === "date-time") {
-          // ==================== DATE ARRAY ====================
-          const node: ArrayNode = {
-            type: "array",
-            ...baseNode,
-            child: { type: "date" },
-          };
-          return node;
-        }
-        if (items.type === "string" || items.type === "integer") {
-          // ==================== ARRAY ====================
-          const node: ArrayNode = {
-            type: "array",
-            ...baseNode,
-            child: { type: items.type },
-          };
-          return node;
-        }
-      }
-      if (type === "object") {
-        // ==================== OBJECT ====================
-        const node: ObjectNode = {
-          type: "object",
-          children: generate(formNode, uiNode).nodes, // Reruns through object as if it was base layer. '.form' is not needed because title is assigned automatically for anything nested inside an object.
-          ...baseNode,
-        };
-        return node;
-      }
-    });
-    return {
-      form: { title: form.title, description: form.description },
-      nodes: nodes.filter((n) => n !== undefined) as FormNodeType[],
-    };
-  }
-
-  return generate(rjsfForm, rjsfUiSchema);
-}
-
-/**
- * ---------------------- BUILDER JSON -> FORM JSON ----------------------
- */
-
-export function serializeBuilderToForm(
-  formConfig: FormType,
-  nodes: FormNodeType[]
-): { form: RJSFSchema; ui: UiSchema } {
-  function generate(_n: FormNodeType[]) {
-    const ui: UiSchema = {};
-
-    const formObjs: {
-      required: string[];
-      properties: Record<string, JSONSchema7>;
-    } = {
-      required: [],
-      properties: {},
-    };
-
-    _n.forEach((node) => {
-      let uniqueNum = 0;
-      const basePropName = node.propertyName
-        ? node.propertyName
-        : formatPropName(node.title!); // Can't use ?? because node.propertyName can be ""
-      let propName = basePropName;
-      while (formObjs.properties[propName]) {
-        uniqueNum++;
-        propName = `${basePropName}-${uniqueNum}`;
-      }
-
-      let propUi: any = node.description
-        ? {
-            "ui:description": node.description,
-            "ui:enableMarkdownInDescription": true,
-          }
-        : {};
-
-      const props: JSONSchema7 = {};
-      switch (node.type) {
-        case "string": {
-          // ==================== TEXT ====================
-          props.type = "string";
-          if (node.default) props.default = node.default;
-          if (node.format) props.format = node.format;
-          if (node.minLength)
-            props.minLength = Number.parseInt(`${node.minLength}`);
-          if (node.maxLength)
-            props.maxLength = Number.parseInt(`${node.maxLength}`);
-          break;
-        }
-        case "file": {
-          // ==================== FILE ====================
-          if (node.filetype) {
-            let filetype = node.filetype.trim().toLowerCase();
-            if (filetype.charAt(0) !== ".") filetype = "." + filetype;
-            propUi["ui:options"] = { accept: filetype };
-          }
-          if (node.multiple) {
-            // ==================== MULTIPLE FILES ====================
-            props.type = "array";
-            props.items = {
-              type: "string",
-              format: "data-url",
-            };
-            break;
-          }
-          // ==================== FILE CONT. ====================
-          props.type = "string";
-          props.format = "data-url";
-          break;
-        }
-        case "integer": {
-          // ==================== INTEGER ====================
-          props.type = "integer";
-          break;
-        }
-        case "object": {
-          // ==================== OBJECT ====================
-          props.type = "object";
-          const formData = generate(node.children);
-          props.properties = formData.form.properties;
-          props.required = formData.form.required;
-          propUi = { ...propUi, ...formData.ui };
-          break;
-        }
-        case "array": {
-          // ==================== ARRAY ====================
-          props.type = "array";
-          if (node.child.type === "date") {
-            // ==================== DATE ARRAY ====================
-            props.items = {
-              type: "string",
-              format: "date-time",
-            };
-            break;
-          }
-          if (node.child.type === "string") {
-            // ==================== TEXT ARRAY ====================
-            props.items = {
-              type: "string",
-            };
-            if (node.child.format) props.items.format = node.child.format;
-            if (node.child.default) props.items.default = node.child.default;
-            if (node.child.minLength)
-              props.items.minLength = Number.parseInt(
-                `${node.child.minLength}`
-              );
-            if (node.child.maxLength)
-              props.items.maxLength = Number.parseInt(
-                `${node.child.maxLength}`
-              );
-            break;
-          }
-          if (node.child.type === "integer") {
-            // ==================== INTEGER ARRAY ====================
-            props.items = {
-              type: "integer",
-            };
-            break;
-          }
-          if (node.child.type === "array") {
-            // ==================== NESTED ARRAY ====================
-            // props.items = {
-            //   type: "array",
-            // };
-
-            // ? Potentially something that can be done in the future, may need to write a generateArray function for this.
-
-            break;
-          }
-          break;
-        }
-        case "date": {
-          // ==================== DATE ====================
-          props.type = "string";
-          props.format = "date-time";
-          break;
-        }
-      }
-
-      if (Object.keys(props).length > 0) {
-        if (node.title) props.title = node.title;
-        if (node.required) formObjs.required.push(propName);
-        formObjs.properties[propName] = props;
-      }
-
-      if (Object.keys(propUi).length !== 0) ui[propName] = propUi;
-    });
-    return { form: formObjs, ui: ui };
-  }
-
-  const formData = generate(nodes);
-
-  const form: RJSFSchema = {
-    title: formConfig.title,
-    description: formConfig.description,
-    type: "object",
-    ...formData.form,
-  };
-  return { form, ui: formData.ui };
-}
-
-/**
- * ---------------------- BASE VALIDATION ----------------------
- */
-
-export function baseValidation(key: string, value: string, node: FormNodeType) {
-  if (key === "title" && !value && !node.propertyName) return false;
-  if (key === "propertyName" && !value && !node.title) return false;
-  return true;
-}
-
-/**
- * ---------------------- GENERATE UPDATE NODE BY KEY LOCAL ----------------------
- */
-
-export function generateUpdateNodeByKeyLocal(
-  isValid: (key: string, value: any) => boolean,
-  setNode: React.Dispatch<React.SetStateAction<any>>
-) {
-  return (
-    key: string,
-    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-    type?: string
-  ) => {
-    updateNodeByKey(key, e, isValid, setNode, type);
-  };
-}
-
-/**
- * ---------------------- UPDATE NODE BY KEY ----------------------
- */
-
-export function updateNodeByKey(
-  key: string,
-  e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-  isValid: (key: string, value: any) => boolean,
-  setNode: UseStateType<any>[1],
-  type?: string
-) {
-  if (type === "check") {
-    // @ts-ignore
-    const val = e.target.checked;
-    if (!isValid(key, val)) return;
-    setNode((n: any) => ({ ...n, [key]: val }));
-    return;
-  }
-  const val = e.target.value;
-  if (!isValid(key, val)) return;
-  setNode((n: any) => ({ ...n, [key]: val }));
-}
-
-/**
- * ---------------------- FIELD TITLE GENERATOR ----------------------
- */
-
-export const formatTitle = (field: string) =>
-  field.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
-
-/**
- * ---------------------- FORMAT PROP NAME ----------------------
- */
-
-export const formatPropName = (propName: string) =>
-  propName
-    .replace(/[()]/g, "")
-    .replace(/([A-Z])/g, " $1")
-    .trim()
-    .replace(/ +|--+/g, "-")
-    .toLowerCase();
+import {
+  FormNodeKeys,
+  FormNodeType,
+  FormType,
+  FileNode,
+  IntegerNode,
+  TextNode,
+  ArrayNode,
+  DateNode,
+  ObjectNode,
+} from "../types/form-builder";
+import { UseStateType } from "../types/utils.type";
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import { JSONSchema7 } from "json-schema";
+import { v4 as uuidv4 } from "uuid";
+
+/**
+ * ---------------------- GENERATE NODE DATA ----------------------
+ */
+
+const baseDefaultNode = { required: true, nodeId: "" };
+
+export const defaultNodes: {
+  [key in FormNodeKeys]: FormNodeType extends { type: infer T }
+    ? T extends key
+      ? FormNodeType
+      : never
+    : never;
+} = {
+  string: {
+    ...baseDefaultNode,
+    type: "string",
+    title: "New String Field",
+  },
+  file: {
+    ...baseDefaultNode,
+    type: "file",
+    title: "New File Field",
+  },
+  integer: {
+    ...baseDefaultNode,
+    type: "integer",
+    title: "New Integer Field",
+  },
+  date: {
+    ...baseDefaultNode,
+    type: "date",
+    title: "New Date Field",
+  },
+  array: {
+    ...baseDefaultNode,
+    type: "array",
+    title: "New Array Field",
+    child: { type: "string" },
+  },
+  object: {
+    ...baseDefaultNode,
+    type: "object",
+    title: "New Object",
+    children: [],
+  },
+};
+
+export function generateNodeData(
+  type: FormNodeKeys,
+  children?: FormNodeType[]
+) {
+  return {
+    ...defaultNodes[type],
+    nodeId: uuidv4(),
+    children: type !== "object" ? undefined : children ?? [],
+  };
+}
+
+/**
+ * ---------------------- FORM JSON -> BUILDER JSON ----------------------
+ */
+
+export function serializeFormToBuilder(
+  rjsfForm: RJSFSchema,
+  rjsfUiSchema: UiSchema = {}
+): {
+  form: FormType;
+  nodes: FormNodeType[];
+} {
+  if (rjsfForm === undefined) return { form: {}, nodes: [] };
+  function generate(form: RJSFSchema, ui: UiSchema) {
+    const nodes: (FormNodeType | undefined)[] = Object.keys(
+      form.properties!
+    ).map((key) => {
+      // The two parts of the current working node.
+      const formNode = form.properties![key] as JSONSchema7;
+      const uiNode = ui[key] ?? {};
+
+      const type = formNode.type;
+      const required = form.required?.includes(key);
+
+      const baseNode = {
+        title: formNode.title!,
+        nodeId: uuidv4(),
+        description: uiNode["ui:description"],
+        required,
+        propertyName: key,
+      };
+
+      if (type === "string") {
+        if (formNode.format === "data-url") {
+          // ==================== FILE ====================
+          const node: FileNode = {
+            type: "file",
+            ...baseNode,
+          };
+          if (uiNode["ui:options"] && uiNode["ui:options"].accept)
+            node.filetype = uiNode["ui:options"].accept;
+          return node;
+        }
+        if (formNode.format === "date-time") {
+          // ==================== DATE ====================
+          const node: DateNode = {
+            type: "date",
+            ...baseNode,
+          };
+          return node;
+        }
+        // ==================== TEXT ====================
+        const node: TextNode = {
+          type: "string",
+          ...baseNode,
+        };
+        if (formNode.format) node.format = formNode.format;
+        if (formNode.minLength) node.minLength = formNode.minLength;
+        if (formNode.maxLength) node.maxLength = formNode.maxLength;
+        if (formNode.default) node.default = formNode.default as string;
+        return node;
+      }
+      if (type === "integer") {
+        // ==================== INTEGER ====================
+        const node: IntegerNode = {
+          type: "integer",
+          ...baseNode,
+        };
+        return node;
+      }
+      if (type === "array") {
+        const items = formNode.items as JSONSchema7;
+        if (items.type === "string" && items.format === "data-url") {
+          // ==================== MULTIPLE FILES ====================
+          const node: FileNode = {
+            type: "file",
+            multiple: true,
+            ...baseNode,
+          };
+          if (uiNode["ui:options"] && uiNode["ui:options"].accept)
+            node.filetype = uiNode["ui:options"].accept;
+          return node;
+        }
+        if (items.type === "string" && items.format === "date-time") {
+          // ==================== DATE ARRAY ====================
+          const node: ArrayNode = {
+            type: "array",
+            ...baseNode,
+            child: { type: "date" },
+          };
+          return node;
+        }
+        if (items.type === "string" || items.type === "integer") {
+          // ==================== ARRAY ====================
+          const node: ArrayNode = {
+            type: "array",
+            ...baseNode,
+            child: { type: items.type },
+          };
+          return node;
+        }
+      }
+      if (type === "object") {
+        // ==================== OBJECT ====================
+        const node: ObjectNode = {
+          type: "object",
+          children: generate(formNode, uiNode).nodes, // Reruns through object as if it was base layer. '.form' is not needed because title is assigned automatically for anything nested inside an object.
+          ...baseNode,
+        };
+        return node;
+      }
+    });
+    return {
+      form: { title: form.title, description: form.description },
+      nodes: nodes.filter((n) => n !== undefined) as FormNodeType[],
+    };
+  }
+
+  return generate(rjsfForm, rjsfUiSchema);
+}
+
+/**
+ * ---------------------- BUILDER JSON -> FORM JSON ----------------------
+ */
+
+export function serializeBuilderToForm(
+  formConfig: FormType,
+  nodes: FormNodeType[]
+): { form: RJSFSchema; ui: UiSchema } {
+  function generate(_n: FormNodeType[]) {
+    const ui: UiSchema = {};
+
+    const formObjs: {
+      required: string[];
+      properties: Record<string, JSONSchema7>;
+    } = {
+      required: [],
+      properties: {},
+    };
+
+    _n.forEach((node) => {
+      let uniqueNum = 0;
+      const basePropName = node.propertyName
+        ? node.propertyName
+        : formatPropName(node.title!); // Can't use ?? because node.propertyName can be ""
+      let propName = basePropName;
+      while (formObjs.properties[propName]) {
+        uniqueNum++;
+        propName = `${basePropName}-${uniqueNum}`;
+      }
+
+      let propUi: any = node.description
+        ? {
+            "ui:description": node.description,
+            "ui:enableMarkdownInDescription": true,
+          }
+        : {};
+
+      const props: JSONSchema7 = {};
+      switch (node.type) {
+        case "string": {
+          // ==================== TEXT ====================
+          props.type = "string";
+          if (node.default) props.default = node.default;
+          if (node.format) props.format = node.format;
+          if (node.minLength)
+            props.minLength = Number.parseInt(`${node.minLength}`);
+          if (node.maxLength)
+            props.maxLength = Number.parseInt(`${node.maxLength}`);
+          break;
+        }
+        case "file": {
+          // ==================== FILE ====================
+          if (node.filetype) {
+            let filetype = node.filetype.trim().toLowerCase();
+            if (filetype.charAt(0) !== ".") filetype = "." + filetype;
+            propUi["ui:options"] = { accept: filetype };
+          }
+          if (node.multiple) {
+            // ==================== MULTIPLE FILES ====================
+            props.type = "array";
+            props.items = {
+              type: "string",
+              format: "data-url",
+            };
+            break;
+          }
+          // ==================== FILE CONT. ====================
+          props.type = "string";
+          props.format = "data-url";
+          break;
+        }
+        case "integer": {
+          // ==================== INTEGER ====================
+          props.type = "integer";
+          break;
+        }
+        case "object": {
+          // ==================== OBJECT ====================
+          props.type = "object";
+          const formData = generate(node.children);
+          props.properties = formData.form.properties;
+          props.required = formData.form.required;
+          propUi = { ...propUi, ...formData.ui };
+          break;
+        }
+        case "array": {
+          // ==================== ARRAY ====================
+          props.type = "array";
+          if (node.child.type === "date") {
+            // ==================== DATE ARRAY ====================
+            props.items = {
+              type: "string",
+              format: "date-time",
+            };
+            break;
+          }
+          if (node.child.type === "string") {
+            // ==================== TEXT ARRAY ====================
+            props.items = {
+              type: "string",
+            };
+            if (node.child.format) props.items.format = node.child.format;
+            if (node.child.default) props.items.default = node.child.default;
+            if (node.child.minLength)
+              props.items.minLength = Number.parseInt(
+                `${node.child.minLength}`
+              );
+            if (node.child.maxLength)
+              props.items.maxLength = Number.parseInt(
+                `${node.child.maxLength}`
+              );
+            break;
+          }
+          if (node.child.type === "integer") {
+            // ==================== INTEGER ARRAY ====================
+            props.items = {
+              type: "integer",
+            };
+            break;
+          }
+          if (node.child.type === "array") {
+            // ==================== NESTED ARRAY ====================
+            // props.items = {
+            //   type: "array",
+            // };
+
+            // ? Potentially something that can be done in the future, may need to write a generateArray function for this.
+
+            break;
+          }
+          break;
+        }
+        case "date": {
+          // ==================== DATE ====================
+          props.type = "string";
+          props.format = "date-time";
+          break;
+        }
+      }
+
+      if (Object.keys(props).length > 0) {
+        if (node.title) props.title = node.title;
+        if (node.required) formObjs.required.push(propName);
+        formObjs.properties[propName] = props;
+      }
+
+      if (Object.keys(propUi).length !== 0) ui[propName] = propUi;
+    });
+    return { form: formObjs, ui: ui };
+  }
+
+  const formData = generate(nodes);
+
+  const form: RJSFSchema = {
+    title: formConfig.title,
+    description: formConfig.description,
+    type: "object",
+    ...formData.form,
+  };
+  return { form, ui: formData.ui };
+}
+
+/**
+ * ---------------------- BASE VALIDATION ----------------------
+ */
+
+export function baseValidation(key: string, value: string, node: FormNodeType) {
+  if (key === "title" && !value && !node.propertyName) return false;
+  if (key === "propertyName" && !value && !node.title) return false;
+  return true;
+}
+
+/**
+ * ---------------------- GENERATE UPDATE NODE BY KEY LOCAL ----------------------
+ */
+
+export function generateUpdateNodeByKeyLocal(
+  isValid: (key: string, value: any) => boolean,
+  setNode: React.Dispatch<React.SetStateAction<any>>
+) {
+  return (
+    key: string,
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    type?: string
+  ) => {
+    updateNodeByKey(key, e, isValid, setNode, type);
+  };
+}
+
+/**
+ * ---------------------- UPDATE NODE BY KEY ----------------------
+ */
+
+export function updateNodeByKey(
+  key: string,
+  e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+  isValid: (key: string, value: any) => boolean,
+  setNode: UseStateType<any>[1],
+  type?: string
+) {
+  if (type === "check") {
+    // @ts-ignore
+    const val = e.target.checked;
+    if (!isValid(key, val)) return;
+    setNode((n: any) => ({ ...n, [key]: val }));
+    return;
+  }
+  const val = e.target.value;
+  if (!isValid(key, val)) return;
+  setNode((n: any) => ({ ...n, [key]: val }));
+}
+
+/**
+ * ---------------------- FIELD TITLE GENERATOR ----------------------
+ */
+
+export const formatTitle = (field: string) =>
+  field.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
+
+/**
+ * ---------------------- FORMAT PROP NAME ----------------------
+ */
+
+export const formatPropName = (propName: string) =>
+  propName
+    .replace(/[()]/g, "")
+    .replace(/([A-Z])/g, " $1")
+    .trim()
+    .replace(/ +|--+/g, "-")
+    .toLowerCase();