@springmicro/forms 0.1.3 → 0.2.0-alpha.1

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

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

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

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

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

@@ -0,0 +1,60 @@
+import {
+  ChildNodeProps,
+  DateNode as DateNodeType,
+  FieldArrayType,
+} from "../../../types/form-builder";
+import React from "react";
+import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
+import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
+
+export default function DateNode({
+  nodeState,
+  updateNode,
+  defaultFields,
+  defaultChecks,
+}: ChildNodeProps) {
+  const [node, setNode] = nodeState;
+
+  React.useEffect(() => {
+    updateNode(node);
+  }, [node]);
+
+  function isValid(key: string, value: string) {
+    return true;
+  }
+
+  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
+
+  const fields: FieldArrayType<DateNodeType> = [];
+
+  const checks: FieldArrayType<DateNodeType> = [];
+
+  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>
+    </>
+  );
+}

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

@@ -0,0 +1,67 @@
+import {
+  ChildNodeProps,
+  FieldArrayType,
+  FileNodeEmpty as FileNodeType,
+} from "../../../types/form-builder";
+import React from "react";
+import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
+import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
+
+export default function FileNode({
+  nodeState,
+  updateNode,
+  defaultFields,
+  defaultChecks,
+}: ChildNodeProps) {
+  const [node, setNode] = nodeState;
+
+  React.useEffect(() => {
+    updateNode(node);
+  }, [node]);
+
+  function isValid(key: string, value: string) {
+    return true;
+  }
+
+  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
+
+  const fields: FieldArrayType<FileNodeType> = [
+    {
+      prop: "filetype",
+      tooltip: "Require a specific file type. Leave blank for any filetype.",
+    },
+  ];
+
+  const checks: FieldArrayType<FileNodeType> = [
+    { prop: "multiple", title: "Multiple Files" },
+  ];
+
+  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>
+    </>
+  );
+}

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

@@ -0,0 +1,60 @@
+import {
+  ChildNodeProps,
+  FieldArrayType,
+  IntegerNode as IntegerNodeType,
+} from "../../../types/form-builder";
+import React from "react";
+import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
+import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
+
+export default function IntegerNode({
+  nodeState,
+  updateNode,
+  defaultFields,
+  defaultChecks,
+}: ChildNodeProps) {
+  const [node, setNode] = nodeState;
+
+  React.useEffect(() => {
+    updateNode(node);
+  }, [node]);
+
+  function isValid(key: string, value: string) {
+    return true;
+  }
+
+  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
+
+  const fields: FieldArrayType<IntegerNodeType> = [];
+
+  const checks: FieldArrayType<IntegerNodeType> = [];
+
+  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>
+    </>
+  );
+}

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

@@ -0,0 +1,67 @@
+import {
+  ChildNodeProps,
+  FieldArrayType,
+  ObjectNodeEmpty,
+} from "../../../types/form-builder";
+import React from "react";
+import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
+import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
+import { Button } from "@mui/material";
+
+export default function ObjectNode({
+  nodeState,
+  updateNode,
+  defaultFields,
+  defaultChecks,
+  updatePath,
+}: ChildNodeProps) {
+  const [node, setNode] = nodeState;
+
+  React.useEffect(() => {
+    updateNode(node);
+  }, [node]);
+
+  function isValid(key: string, value: string) {
+    const n = node as ObjectNodeEmpty;
+    return true;
+  }
+
+  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
+
+  const fields: FieldArrayType<ObjectNodeEmpty> = [];
+
+  const checks: FieldArrayType<ObjectNodeEmpty> = [];
+
+  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>
+
+      <Button onClick={updatePath} variant="contained" fullWidth>
+        Open
+      </Button>
+    </>
+  );
+}

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

@@ -0,0 +1,66 @@
+import {
+  ChildNodeProps,
+  FieldArrayType,
+  TextNodeEmpty,
+} from "../../../types/form-builder";
+import React from "react";
+import { FieldContainer, NodeCheckbox, NodeField } from "../node-child-helpers";
+import { generateUpdateNodeByKeyLocal } from "../../../utils/form-builder";
+
+export default function TextNode({
+  nodeState,
+  updateNode,
+  defaultFields,
+  defaultChecks,
+}: ChildNodeProps) {
+  const [node, setNode] = nodeState;
+
+  React.useEffect(() => {
+    updateNode(node);
+  }, [node]);
+
+  function isValid(key: string, value: string) {
+    const n = node as TextNodeEmpty;
+    return true;
+  }
+
+  const updateNodeByKeyLocal = generateUpdateNodeByKeyLocal(isValid, setNode);
+
+  const fields: FieldArrayType<TextNodeEmpty> = [
+    { prop: "default" },
+    { prop: "format" },
+    { prop: "minLength", props: { type: "number" } },
+    { prop: "maxLength", props: { type: "number" } },
+  ];
+
+  const checks: FieldArrayType<TextNodeEmpty> = [];
+
+  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>
+    </>
+  );
+}