@springmicro/forms 0.1.3 → 0.2.0-alpha.1

package/src/types/form-builder.ts

@@ -0,0 +1,135 @@
+import { UseStateType } from "./utils.type";
+
+export type FullFormType = {
+  form: FormType;
+  nodes: FormNodeType[];
+};
+
+export type FormType = {
+  title?: string;
+  description?: string;
+};
+
+/**
+ * Extracts each key from @type {FormNodeTypes} exctracting the string from @param {T["type"]}
+ * which is then mapped to @type {FormNodeKeys}
+ */
+type ExtractTypes<T extends { type: string }> = T["type"];
+export type FormNodeKeys = ExtractTypes<FormNodeType>;
+
+export type SearchNodeTypeByKey = {
+  [key in FormNodeKeys]: FormNodeType extends { type: infer T }
+    ? T extends key
+      ? FormNodeType
+      : never
+    : never;
+};
+
+export interface BaseNode {
+  nodeId: string;
+  propertyName?: string;
+  title?: string;
+  description?: string;
+  required?: boolean;
+}
+
+/**
+ * =================== NODES ===================
+ */
+
+export type FormNodeType =
+  | FileNode
+  | TextNode
+  | IntegerNode
+  | DateNode
+  | ArrayNode
+  | ObjectNode;
+
+export type TextNode = BaseNode & TextNodeEmpty;
+
+export type FileNode = BaseNode & FileNodeEmpty;
+
+export type IntegerNode = BaseNode & IntegerNodeEmpty;
+
+export type DateNode = BaseNode & DateNodeEmpty;
+
+export type ArrayNode = BaseNode & ArrayNodeEmpty;
+
+export type ObjectNode = BaseNode & ObjectNodeEmpty;
+
+/**
+ * =================== NODES ===================
+ */
+
+export type EmptyFormNodeType =
+  | FileNodeEmpty
+  | TextNodeEmpty
+  | IntegerNodeEmpty
+  | DateNodeEmpty
+  | ArrayNodeEmpty
+  | ObjectNodeEmpty;
+
+export interface TextNodeEmpty {
+  type: "string";
+  default?: string;
+  minLength?: number;
+  maxLength?: number;
+  format?: string;
+}
+
+export interface FileNodeEmpty {
+  type: "file";
+  multiple?: boolean;
+  filetype?: string;
+}
+
+export interface IntegerNodeEmpty {
+  type: "integer";
+}
+
+export interface DateNodeEmpty {
+  type: "date";
+}
+
+export interface ArrayNodeEmpty {
+  type: "array";
+  child: EmptyFormNodeType;
+}
+
+export interface ObjectNodeEmpty {
+  type: "object";
+  children: FormNodeType[]; // a list of nodes
+}
+
+/**
+ * ================== UTILS ==================
+ */
+
+export type CountdownType =
+  | undefined
+  | number
+  | "Saved."
+  | "Saving..."
+  | "Save failed.";
+
+export type EditingStateType = false | string;
+
+// The format for creating a field or checkmark inside a node.
+export type FieldArrayType<T> = Array<{
+  prop: keyof T;
+  tooltip?: string;
+  title?: string;
+  props?: any;
+}>;
+
+/**
+ * ================== SHARED PROPS ==================
+ */
+
+export type ChildNodeProps = {
+  nodeState: UseStateType<FormNodeType>;
+  updateNode: (nodeData: FormNodeType) => void;
+  defaultFields: React.JSX.Element[];
+  defaultChecks: React.JSX.Element[];
+  updatePath: () => void;
+};

package/src/types/utils.type.ts

@@ -0,0 +1 @@
+export type UseStateType<T> = [T, React.Dispatch<React.SetStateAction<T>>];

package/src/utils/form-builder.ts

@@ -0,0 +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();