@springmicro/forms 0.7.0 → 0.7.1

package/src/builder/nodes/node-parent.tsx

@@ -1,187 +1,187 @@
-import NodeBase from "./node-base";
-import {
-  BaseNode,
-  ChildNodeProps,
-  EditingStateType,
-  FieldArrayType,
-  FormNodeKeys,
-  FormNodeType,
-} from "../../types/form-builder";
-import { UseStateType } from "../../types/utils.type";
-import {
-  NodeAccordian,
-  NodeCheckbox,
-  NodeChildBase,
-  NodeField,
-  NodeTitle,
-} from "./node-child-helpers";
-import {
-  baseValidation,
-  formatPropName,
-  generateUpdateNodeByKeyLocal,
-} from "../../utils/form-builder";
-import React from "react";
-
-import TextFieldsIcon from "@mui/icons-material/TextFields";
-import TextNode from "./node-types/text-node";
-import AttachFileIcon from "@mui/icons-material/AttachFile";
-import FileNode from "./node-types/file-node";
-import NumbersIcon from "@mui/icons-material/Numbers";
-import IntegerNode from "./node-types/integer-node";
-import ListIcon from "@mui/icons-material/List";
-import ArrayNode from "./node-types/array-node";
-import ViewInArIcon from "@mui/icons-material/ViewInAr";
-import ObjectNode from "./node-types/object-node";
-import DateRangeIcon from "@mui/icons-material/DateRange";
-import DateNode from "./node-types/date-node";
-
-export type FormNodeProps = {
-  nodesState: UseStateType<FormNodeType[]>;
-  node: FormNodeType;
-  index: number;
-  editingState: UseStateType<EditingStateType>;
-  updatePath: () => void;
-  deleteNode: () => void;
-};
-
-export const nodeComponents: {
-  [key in FormNodeKeys]: FormNodeType extends { type: infer T }
-    ? T extends key
-      ? {
-          icon: React.ComponentType<any>;
-          component: React.ComponentType<ChildNodeProps>;
-        }
-      : never
-    : never;
-} = {
-  string: {
-    icon: TextFieldsIcon,
-    component: TextNode,
-  },
-  file: {
-    icon: AttachFileIcon,
-    component: FileNode,
-  },
-  integer: {
-    icon: NumbersIcon,
-    component: IntegerNode,
-  },
-  date: {
-    icon: DateRangeIcon,
-    component: DateNode,
-  },
-  array: {
-    icon: ListIcon,
-    component: ArrayNode,
-  },
-  object: {
-    icon: ViewInArIcon,
-    component: ObjectNode,
-  },
-};
-
-export default function NodeParent({
-  nodesState,
-  node: _initNode,
-  index,
-  editingState,
-  updatePath,
-  deleteNode,
-}: FormNodeProps) {
-  const nodeState = React.useState<FormNodeType>(_initNode);
-  const [node, setNode] = nodeState;
-  const [editing, setEditing] = editingState;
-  const editingThisNode = editing === node.nodeId;
-
-  function isValid(key: string, value: string) {
-    if (!baseValidation(key, value, node)) return false;
-    return true;
-  }
-
-  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
-
-  const Component = nodeComponents[node.type].component;
-
-  React.useEffect(() => {
-    // ! Minimal testing has happened. If there are saving issues, this if statement is likely the cause.
-    if (nodesState[0][index] === node) return; // Prevents autosave from running when switching paths.
-
-    nodesState[1]((_nodes) => {
-      const nodes = [..._nodes];
-      nodes[index] = node;
-      return nodes;
-    });
-  }, [node]);
-
-  function updateNode(newNode: FormNodeType) {
-    setNode(newNode);
-  }
-
-  return (
-    <NodeBase
-      nodeId={node.nodeId}
-      index={index}
-      editingState={editingState}
-      icon={nodeComponents[node.type].icon}
-    >
-      <NodeChildBase>
-        <NodeTitle
-          isPropname={!node.title}
-          isEditing={editingThisNode}
-          onClick={() => {
-            setEditing(false);
-          }}
-        >
-          {node.title ?? node.propertyName}
-        </NodeTitle>
-
-        <NodeAccordian
-          open={editingThisNode}
-          close={() => {
-            setEditing(false);
-          }}
-          deleteNode={deleteNode}
-        >
-          <Component
-            nodeState={[node, setNode]}
-            updateNode={updateNode}
-            updatePath={updatePath}
-            defaultFields={(
-              [
-                {
-                  prop: "propertyName",
-                  tooltip:
-                    "The json key the value will be assinged to. In the case of a duplicate key, '-x' x being a number will be added to the end until it's resolved.",
-                  props: {
-                    helperText: node.propertyName
-                      ? undefined
-                      : 'Property name: "' + formatPropName(node.title!) + '"',
-                  },
-                },
-                { prop: "title" },
-                { prop: "description" },
-              ] as FieldArrayType<BaseNode>
-            ).map((field) => (
-              <NodeField
-                key={field.prop}
-                field={field}
-                node={node}
-                update={updateNodeByKeyLocal}
-              />
-            ))}
-            defaultChecks={(
-              [{ prop: "required" }] as FieldArrayType<BaseNode>
-            ).map((check) => (
-              <NodeCheckbox
-                key={check.prop}
-                field={check}
-                node={node}
-                update={updateNodeByKeyLocal}
-              />
-            ))}
-          />
-        </NodeAccordian>
-      </NodeChildBase>
-    </NodeBase>
-  );
-}
+import NodeBase from "./node-base";
+import {
+  BaseNode,
+  ChildNodeProps,
+  EditingStateType,
+  FieldArrayType,
+  FormNodeKeys,
+  FormNodeType,
+} from "../../types/form-builder";
+import { UseStateType } from "../../types/utils.type";
+import {
+  NodeAccordian,
+  NodeCheckbox,
+  NodeChildBase,
+  NodeField,
+  NodeTitle,
+} from "./node-child-helpers";
+import {
+  baseValidation,
+  formatPropName,
+  generateUpdateNodeByKeyLocal,
+} from "../../utils/form-builder";
+import React from "react";
+
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import TextNode from "./node-types/text-node";
+import AttachFileIcon from "@mui/icons-material/AttachFile";
+import FileNode from "./node-types/file-node";
+import NumbersIcon from "@mui/icons-material/Numbers";
+import IntegerNode from "./node-types/integer-node";
+import ListIcon from "@mui/icons-material/List";
+import ArrayNode from "./node-types/array-node";
+import ViewInArIcon from "@mui/icons-material/ViewInAr";
+import ObjectNode from "./node-types/object-node";
+import DateRangeIcon from "@mui/icons-material/DateRange";
+import DateNode from "./node-types/date-node";
+
+export type FormNodeProps = {
+  nodesState: UseStateType<FormNodeType[]>;
+  node: FormNodeType;
+  index: number;
+  editingState: UseStateType<EditingStateType>;
+  updatePath: () => void;
+  deleteNode: () => void;
+};
+
+export const nodeComponents: {
+  [key in FormNodeKeys]: FormNodeType extends { type: infer T }
+    ? T extends key
+      ? {
+          icon: React.ComponentType<any>;
+          component: React.ComponentType<ChildNodeProps>;
+        }
+      : never
+    : never;
+} = {
+  string: {
+    icon: TextFieldsIcon,
+    component: TextNode,
+  },
+  file: {
+    icon: AttachFileIcon,
+    component: FileNode,
+  },
+  integer: {
+    icon: NumbersIcon,
+    component: IntegerNode,
+  },
+  date: {
+    icon: DateRangeIcon,
+    component: DateNode,
+  },
+  array: {
+    icon: ListIcon,
+    component: ArrayNode,
+  },
+  object: {
+    icon: ViewInArIcon,
+    component: ObjectNode,
+  },
+};
+
+export default function NodeParent({
+  nodesState,
+  node: _initNode,
+  index,
+  editingState,
+  updatePath,
+  deleteNode,
+}: FormNodeProps) {
+  const nodeState = React.useState<FormNodeType>(_initNode);
+  const [node, setNode] = nodeState;
+  const [editing, setEditing] = editingState;
+  const editingThisNode = editing === node.nodeId;
+
+  function isValid(key: string, value: string) {
+    if (!baseValidation(key, value, node)) return false;
+    return true;
+  }
+
+  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
+
+  const Component = nodeComponents[node.type].component;
+
+  React.useEffect(() => {
+    // ! Minimal testing has happened. If there are saving issues, this if statement is likely the cause.
+    if (nodesState[0][index] === node) return; // Prevents autosave from running when switching paths.
+
+    nodesState[1]((_nodes) => {
+      const nodes = [..._nodes];
+      nodes[index] = node;
+      return nodes;
+    });
+  }, [node]);
+
+  function updateNode(newNode: FormNodeType) {
+    setNode(newNode);
+  }
+
+  return (
+    <NodeBase
+      nodeId={node.nodeId}
+      index={index}
+      editingState={editingState}
+      icon={nodeComponents[node.type].icon}
+    >
+      <NodeChildBase>
+        <NodeTitle
+          isPropname={!node.title}
+          isEditing={editingThisNode}
+          onClick={() => {
+            setEditing(false);
+          }}
+        >
+          {node.title ?? node.propertyName}
+        </NodeTitle>
+
+        <NodeAccordian
+          open={editingThisNode}
+          close={() => {
+            setEditing(false);
+          }}
+          deleteNode={deleteNode}
+        >
+          <Component
+            nodeState={[node, setNode]}
+            updateNode={updateNode}
+            updatePath={updatePath}
+            defaultFields={(
+              [
+                {
+                  prop: "propertyName",
+                  tooltip:
+                    "The json key the value will be assinged to. In the case of a duplicate key, '-x' x being a number will be added to the end until it's resolved.",
+                  props: {
+                    helperText: node.propertyName
+                      ? undefined
+                      : 'Property name: "' + formatPropName(node.title!) + '"',
+                  },
+                },
+                { prop: "title" },
+                { prop: "description" },
+              ] as FieldArrayType<BaseNode>
+            ).map((field) => (
+              <NodeField
+                key={field.prop}
+                field={field}
+                node={node}
+                update={updateNodeByKeyLocal}
+              />
+            ))}
+            defaultChecks={(
+              [{ prop: "required" }] as FieldArrayType<BaseNode>
+            ).map((check) => (
+              <NodeCheckbox
+                key={check.prop}
+                field={check}
+                node={node}
+                update={updateNodeByKeyLocal}
+              />
+            ))}
+          />
+        </NodeAccordian>
+      </NodeChildBase>
+    </NodeBase>
+  );
+}

package/src/builder/nodes/node-types/array-node.tsx

@@ -1,134 +1,134 @@
-/* eslint-disable react-hooks/rules-of-hooks */
-import { nodeComponents } from "../node-parent";
-import { UseStateType } from "../../../types/utils.type";
-import {
-  ArrayNodeEmpty,
-  ArrayNode as ArrayNodeType,
-  ChildNodeProps,
-  FieldArrayType,
-} from "../../../types/form-builder";
-import React from "react";
-import {
-  FieldContainer,
-  NodeCheckbox,
-  NodeField,
-  textfieldStyle,
-} from "../node-child-helpers";
-import {
-  formatTitle,
-  generateUpdateNodeByKeyLocal,
-} from "../../../utils/form-builder";
-import { Box, MenuItem, TextField } from "@mui/material";
-
-const defaultEmptyNodes = {
-  string: { type: "string" },
-  integer: { type: "integer" },
-  date: { type: "date" },
-  // TODO
-  // ? The node works but serializtion does not.
-  // array: { type: "array", child: { type: "string" } },
-};
-
-export default function ArrayNode({
-  nodeState,
-  updateNode,
-  defaultFields,
-  defaultChecks,
-}: ChildNodeProps) {
-  const [node, setNode] = nodeState;
-
-  // @ts-ignore
-  if (!node.child) {
-    return <></>;
-  }
-  React.useEffect(() => {
-    updateNode(node);
-  }, [node]);
-
-  function isValid(key: string, value: string) {
-    return true;
-  }
-
-  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
-
-  const fields: FieldArrayType<ArrayNodeType> = [];
-
-  const checks: FieldArrayType<ArrayNodeType> = [];
-
-  return (
-    <>
-      <FieldContainer>
-        {defaultFields}
-        {fields.map((field) => (
-          <NodeField
-            key={field.prop}
-            field={field}
-            node={node}
-            update={updateNodeByKeyLocal}
-            {...field.props}
-          />
-        ))}
-      </FieldContainer>
-      <FieldContainer>
-        {defaultChecks}
-        {checks.map((check) => (
-          <NodeCheckbox
-            key={check.prop}
-            field={check}
-            node={node}
-            update={updateNodeByKeyLocal}
-            {...check.props}
-          />
-        ))}
-      </FieldContainer>
-      <ArrayChildContainer
-        nodeState={nodeState as UseStateType<ArrayNodeType>}
-      />
-    </>
-  );
-}
-
-function ArrayChildContainer({
-  nodeState,
-}: {
-  nodeState: UseStateType<ArrayNodeType>;
-}) {
-  const [_n, set_Node] = nodeState;
-  const [node, setNode] = React.useState(_n);
-  const [nodeChild, setNodeChild] = React.useState(node.child);
-  if (!node.child) return <></>;
-  React.useEffect(() => {
-    setNode(_n);
-    setNodeChild(_n.child);
-  }, [_n]);
-
-  React.useEffect(() => {
-    set_Node((n) => ({ ...n, child: nodeChild }));
-  }, [nodeChild]);
-
-  const Component = nodeComponents[nodeChild.type].component;
-
-  return (
-    <Box
-      sx={{
-        borderTop: "2px solid #aaa",
-        borderLeft: "2px solid #aaa",
-        pt: 1,
-        pl: 2,
-        borderTopLeftRadius: 6,
-      }}
-    >
-      <h3>Array Child ({nodeChild.type})</h3>
-      <Box sx={{ pt: 2, display: "flex", gap: 1, flexDirection: "column" }}>
-        <Component
-          //@ts-ignore
-          nodeState={[nodeChild, setNodeChild]}
-          //@ts-ignore
-          updateNode={setNodeChild}
-          defaultFields={[]}
-          defaultChecks={[]}
-        />
-      </Box>
-    </Box>
-  );
-}
+/* eslint-disable react-hooks/rules-of-hooks */
+import { nodeComponents } from "../node-parent";
+import { UseStateType } from "../../../types/utils.type";
+import {
+  ArrayNodeEmpty,
+  ArrayNode as ArrayNodeType,
+  ChildNodeProps,
+  FieldArrayType,
+} from "../../../types/form-builder";
+import React from "react";
+import {
+  FieldContainer,
+  NodeCheckbox,
+  NodeField,
+  textfieldStyle,
+} from "../node-child-helpers";
+import {
+  formatTitle,
+  generateUpdateNodeByKeyLocal,
+} from "../../../utils/form-builder";
+import { Box, MenuItem, TextField } from "@mui/material";
+
+const defaultEmptyNodes = {
+  string: { type: "string" },
+  integer: { type: "integer" },
+  date: { type: "date" },
+  // TODO
+  // ? The node works but serializtion does not.
+  // array: { type: "array", child: { type: "string" } },
+};
+
+export default function ArrayNode({
+  nodeState,
+  updateNode,
+  defaultFields,
+  defaultChecks,
+}: ChildNodeProps) {
+  const [node, setNode] = nodeState;
+
+  // @ts-ignore
+  if (!node.child) {
+    return <></>;
+  }
+  React.useEffect(() => {
+    updateNode(node);
+  }, [node]);
+
+  function isValid(key: string, value: string) {
+    return true;
+  }
+
+  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
+
+  const fields: FieldArrayType<ArrayNodeType> = [];
+
+  const checks: FieldArrayType<ArrayNodeType> = [];
+
+  return (
+    <>
+      <FieldContainer>
+        {defaultFields}
+        {fields.map((field) => (
+          <NodeField
+            key={field.prop}
+            field={field}
+            node={node}
+            update={updateNodeByKeyLocal}
+            {...field.props}
+          />
+        ))}
+      </FieldContainer>
+      <FieldContainer>
+        {defaultChecks}
+        {checks.map((check) => (
+          <NodeCheckbox
+            key={check.prop}
+            field={check}
+            node={node}
+            update={updateNodeByKeyLocal}
+            {...check.props}
+          />
+        ))}
+      </FieldContainer>
+      <ArrayChildContainer
+        nodeState={nodeState as UseStateType<ArrayNodeType>}
+      />
+    </>
+  );
+}
+
+function ArrayChildContainer({
+  nodeState,
+}: {
+  nodeState: UseStateType<ArrayNodeType>;
+}) {
+  const [_n, set_Node] = nodeState;
+  const [node, setNode] = React.useState(_n);
+  const [nodeChild, setNodeChild] = React.useState(node.child);
+  if (!node.child) return <></>;
+  React.useEffect(() => {
+    setNode(_n);
+    setNodeChild(_n.child);
+  }, [_n]);
+
+  React.useEffect(() => {
+    set_Node((n) => ({ ...n, child: nodeChild }));
+  }, [nodeChild]);
+
+  const Component = nodeComponents[nodeChild.type].component;
+
+  return (
+    <Box
+      sx={{
+        borderTop: "2px solid #aaa",
+        borderLeft: "2px solid #aaa",
+        pt: 1,
+        pl: 2,
+        borderTopLeftRadius: 6,
+      }}
+    >
+      <h3>Array Child ({nodeChild.type})</h3>
+      <Box sx={{ pt: 2, display: "flex", gap: 1, flexDirection: "column" }}>
+        <Component
+          //@ts-ignore
+          nodeState={[nodeChild, setNodeChild]}
+          //@ts-ignore
+          updateNode={setNodeChild}
+          defaultFields={[]}
+          defaultChecks={[]}
+        />
+      </Box>
+    </Box>
+  );
+}