@springmicro/forms 0.1.3 → 0.2.0-alpha.0

package/src/builder/form-builder.tsx

@@ -0,0 +1,256 @@
+import React from "react";
+import NodeParent from "./nodes/node-parent";
+import BottomDrawer from "./bottom-drawer";
+import {
+  CountdownType,
+  EditingStateType,
+  FormNodeType,
+  FormType,
+  ObjectNode,
+} from "../types/form-builder";
+import { DragDropContext, Droppable } from "react-beautiful-dnd";
+import { serializeBuilderToForm } from "../utils/form-builder";
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+import { UseStateType } from "../types/utils.type";
+import { Box } from "@mui/material";
+
+export type FormBuilderProps = {
+  nodes: UseStateType<FormNodeType[]>;
+  form: UseStateType<FormType>;
+  saveCallback: (data: { form: RJSFSchema; ui: UiSchema }) => Promise<boolean>;
+};
+
+const countdownSeconds = 5;
+
+export default function FormBuilder({
+  nodes: providedNodes,
+  form: providedForm,
+  saveCallback,
+}: FormBuilderProps) {
+  const [form, setForm] = providedForm;
+  const [baseNodes, setBaseNodes] = providedNodes;
+  const [path, setPath] = React.useState<number[]>([]);
+  const [nodes, setNodes] = React.useState<FormNodeType[]>([...baseNodes]);
+  const editingState = React.useState<EditingStateType>(false);
+
+  /**
+   * ------------------------- PATH MANAGEMENT -----------------------------
+   */
+
+  React.useEffect(() => {
+    if (path.length === 0) {
+      setBaseNodes([...nodes]);
+    } else {
+      setBaseNodes((bn) => {
+        const basePathSearch = [...bn]; // The new base of nodes.
+        let pathSearch = basePathSearch; // Runs through the path and modifies basePathSearch.
+        for (let i = 0; i < path.length - 1; i++) {
+          // Sets pathSearch to every child in the path except for the last one.
+          pathSearch = (pathSearch[path[i]] as ObjectNode).children;
+        }
+        (pathSearch[path[path.length - 1]] as ObjectNode).children = nodes; // Sets the value pathSearch.children in the last value of the path to nodes. (Where the user is currently editing)
+        return [...basePathSearch];
+      });
+    }
+  }, [nodes]);
+
+  React.useEffect(() => {
+    let pathSearch = [...baseNodes];
+    for (let i = 0; i < path.length; i++) {
+      pathSearch = (pathSearch[path[i]] as ObjectNode).children;
+    }
+    setNodes(pathSearch);
+  }, [path]);
+
+  function updatePath(newPathNum?: number) {
+    editingState[1](false);
+    if (newPathNum === undefined) {
+      // If undefined, go up a layer in the path.
+      setPath((p) => p.filter((_, i) => i !== p.length - 1));
+    } else if (newPathNum < 0) {
+      // If negative, reset to base path.
+      setPath([]);
+    } else {
+      // If 0 or higher, push to the end of the path.
+      setPath((p) => [...p, newPathNum]);
+    }
+  }
+
+  /**
+   * ------------------------- AUTOSAVE -----------------------------
+   */
+
+  const timerRef = React.useRef<NodeJS.Timeout>();
+  const [countdown, setCountdown] = React.useState<CountdownType>(undefined);
+
+  function resetCountdown() {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+    }
+
+    setCountdown(countdownSeconds);
+    timerRef.current = setTimeout(() => {
+      Save();
+    }, countdownSeconds * 1000);
+  }
+
+  const AutosaveNodes: React.Dispatch<React.SetStateAction<FormNodeType[]>> = (
+    action: React.SetStateAction<FormNodeType[]>
+  ) => {
+    setNodes((prevNodes) => {
+      let currentState: FormNodeType[] = prevNodes;
+      if (typeof action === "function") {
+        currentState = action(currentState);
+      } else {
+        currentState = [...action];
+      }
+
+      resetCountdown();
+      return currentState;
+    });
+  };
+
+  const AutosaveForm: React.Dispatch<React.SetStateAction<FormType>> = (
+    action: React.SetStateAction<FormType>
+  ) => {
+    setForm((prevForm) => {
+      let currentState: FormType = prevForm;
+      if (typeof action === "function") {
+        currentState = action(currentState);
+      } else {
+        currentState = { ...prevForm, ...action };
+      }
+
+      resetCountdown();
+      return currentState;
+    });
+  };
+
+  React.useEffect(() => {
+    if (typeof countdown === "string" || countdown === undefined) return;
+    if (countdown > 0) {
+      const interval = setInterval(() => {
+        setCountdown((prevCount) => (prevCount as number) - 1);
+      }, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [countdown]);
+
+  React.useEffect(() => {
+    // Adds a warning when user tries to close tab with unsaved changes
+    if (countdown !== "Saved." && countdown !== undefined) {
+      const handleBeforeUnload = (event: BeforeUnloadEvent) => {
+        const confirmationMessage =
+          "You have unsaved changes. Are you sure you want to leave?";
+        event.returnValue = confirmationMessage; // Gecko, Trident, Chrome 34+
+        return confirmationMessage; // Gecko, WebKit, Chrome <34
+      };
+
+      window.addEventListener("beforeunload", handleBeforeUnload);
+
+      return () => {
+        window.removeEventListener("beforeunload", handleBeforeUnload);
+      };
+    }
+  }, [countdown]);
+
+  // Runs after autosave countdown finishes.
+  function Save() {
+    setCountdown("Saving...");
+    setBaseNodes((bn) => {
+      // Gets the most up-to-date baseNodes through the setBaseNodes function because it updates in a weird way.
+      const Form = serializeBuilderToForm(form, bn);
+      saveCallback({ ...Form }).then((res) => {
+        console.log("PROMISE RES:", res);
+        if (res) {
+          setCountdown("Saved.");
+          setTimeout(() => {
+            setCountdown(undefined);
+          }, 1500); // Waits 1.5s before removing text
+        } else {
+          setCountdown("Save failed."); // Do not remove this text until another change has been made by the user.
+        }
+      });
+
+      return bn; // doesn't need to return a new object because it's not intended to update any state.
+    });
+    setTimeout(() => {}, Math.random() * 700 + 300); // Simulated API wait time
+  }
+
+  return (
+    <Box
+      sx={{
+        p: 2,
+        width: "100%",
+        height: "100%",
+        borderRadius: 2,
+        border: "1px solid #999",
+        display: "flex",
+        flexDirection: "column",
+      }}
+    >
+      <Box
+        id="fb-scrollable"
+        sx={{
+          display: "flex",
+          flexGrow: 1,
+          overflow: "auto",
+          borderTopLeftRadius: 0.5,
+          borderTopRightRadius: 0.5,
+          flexDirection: "column",
+          scrollBehavior: "smooth",
+        }}
+      >
+        <Box sx={{ display: "flex", flexDirection: "column" }}>
+          <DragDropContext
+            onDragEnd={(result) => {
+              AutosaveNodes((prevNodes) => {
+                if (!result.destination) return prevNodes;
+
+                const items = Array.from(prevNodes);
+                const [reorderedItem] = items.splice(result.source.index, 1);
+                items.splice(result.destination.index, 0, reorderedItem);
+
+                return items;
+              });
+            }}
+          >
+            <Droppable droppableId="nodes">
+              {(provided) => (
+                <Box
+                  ref={provided.innerRef}
+                  {...provided.droppableProps}
+                  sx={{ display: "flex", flexDirection: "column", gap: 1 }}
+                >
+                  {nodes.map((node, i) => (
+                    <NodeParent
+                      key={node.nodeId}
+                      node={node}
+                      nodesState={[nodes, AutosaveNodes]}
+                      index={i}
+                      editingState={editingState}
+                      updatePath={() => {
+                        updatePath(i);
+                      }}
+                      deleteNode={() => {
+                        AutosaveNodes((n) => n.filter((_, j) => j !== i));
+                      }}
+                    />
+                  ))}
+                  {provided.placeholder}
+                </Box>
+              )}
+            </Droppable>
+          </DragDropContext>
+        </Box>
+      </Box>
+      <BottomDrawer
+        nodesState={[nodes, AutosaveNodes]}
+        formState={[form, AutosaveForm]}
+        countdown={countdown}
+        path={[path, updatePath]}
+        setEditing={editingState[1]}
+      />
+    </Box>
+  );
+}

package/src/builder/modal.tsx

@@ -0,0 +1,39 @@
+import { Box, Modal as MuiModal, SxProps } from "@mui/material";
+
+const style: SxProps = {
+  position: "absolute",
+  top: "50%",
+  left: "50%",
+  transform: "translate(-50%, -50%)",
+  width: 400,
+  bgcolor: "white",
+  borderRadius: 2,
+  boxShadow: 24,
+  p: 4,
+  gap: 2,
+  display: "flex",
+  flexDirection: "column",
+};
+
+export type ModalProps = {
+  open: boolean;
+  onClose?: () => void;
+  children: React.ReactNode;
+  sx?: SxProps;
+  innerBoxSx?: SxProps;
+};
+
+export default function Modal({
+  open,
+  onClose,
+  children,
+  sx,
+  innerBoxSx,
+}: ModalProps) {
+  const innerSx = { ...style, ...innerBoxSx };
+  return (
+    <MuiModal open={open} onClose={onClose} sx={sx}>
+      <Box sx={innerSx}>{children}</Box>
+    </MuiModal>
+  );
+}

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

@@ -0,0 +1,94 @@
+import { EditingStateType } from "../../types/form-builder";
+import { UseStateType } from "../../types/utils.type";
+import { Box, SxProps } from "@mui/material";
+import React from "react";
+import { Draggable } from "react-beautiful-dnd";
+
+export type NodeBaseProps = {
+  children?: React.ReactNode;
+  sx?: SxProps;
+  nodeId: string;
+  index: number;
+  editingState: UseStateType<EditingStateType>;
+  icon: React.ComponentType<any>;
+};
+
+export default function NodeBase({
+  children,
+  sx,
+  nodeId,
+  index,
+  editingState,
+  icon: Icon,
+}: NodeBaseProps) {
+  const [editingId, setEditing] = editingState;
+  const editingThisNode = editingId && editingId === nodeId;
+
+  const edit = () => {
+    if (editingThisNode) return;
+    setEditing(nodeId);
+  };
+
+  return (
+    <Draggable draggableId={nodeId} index={index}>
+      {(provided) => (
+        <div ref={provided.innerRef} {...provided.draggableProps}>
+          <Box
+            id={nodeId}
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              width: "100%",
+              backgroundColor: editingThisNode ? "#ececec" : "#e3e3e3",
+              border: editingThisNode
+                ? "2px solid #c0c0c0"
+                : "2px solid #e3e3e3",
+              borderRadius: 1,
+              transition: "all 0.2s",
+              cursor: editingThisNode ? "default" : "pointer",
+              ...(sx ?? {}), // Can be used for custom styles or overrides.
+            }}
+          >
+            <Handle {...provided.dragHandleProps} />
+            <Box
+              sx={{ flexGrow: 1, pr: 2, pb: 2, display: "flex" }}
+              onClick={edit}
+            >
+              <Box sx={{ width: 30, height: "100%", pt: 2 }} onClick={edit}>
+                <Icon sx={{ color: "#888" }} />
+              </Box>
+              {children}
+            </Box>
+          </Box>
+        </div>
+      )}
+    </Draggable>
+  );
+}
+
+// The draggable part of the icon.
+function Handle(props: any) {
+  return (
+    <Box
+      sx={{ p: 2, gap: 0.33, display: "flex", flexDirection: "row" }}
+      {...props}
+    >
+      <Box
+        sx={{
+          backgroundColor: "#888",
+          borderRadius: 2,
+          width: 3,
+          height: "100%",
+        }}
+      />
+      <Box
+        sx={{
+          backgroundColor: "#888",
+          borderRadius: 2,
+          width: 3,
+          height: "100%",
+        }}
+      />
+    </Box>
+  );
+}

package/src/builder/nodes/node-child-helpers.tsx

@@ -0,0 +1,273 @@
+import { FieldArrayType, FormNodeType } from "../../types/form-builder";
+import {
+  Checkbox,
+  FormControlLabel,
+  IconButton,
+  TextField,
+  Tooltip,
+} from "@mui/material";
+import { Box, SxProps } from "@mui/material";
+import CloseIcon from "@mui/icons-material/Close";
+import React from "react";
+import { formatTitle } from "../../utils/form-builder";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+
+/**
+ * ---------------------- NODE CHILD BASE ----------------------
+ */
+
+export type NodeChildBaseProps = {
+  children?: React.ReactNode;
+};
+
+export function NodeChildBase({ children }: NodeChildBaseProps) {
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", width: "100%" }}>
+      {children}
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- NODE ACCORDIAN ----------------------
+ */
+
+export type NodeAccordianProps = {
+  open?: boolean;
+  children?: React.ReactNode;
+  close: () => void;
+  deleteNode: () => void;
+};
+
+export function NodeAccordian({
+  open,
+  children,
+  close,
+  deleteNode,
+}: NodeAccordianProps) {
+  return (
+    <Box
+      className={open ? "open" : ""}
+      sx={{
+        overflow: "hidden",
+        transition: "max-height .45s cubic-bezier(0, 1, 0, 1) -.1s",
+        maxHeight: 0,
+        "&.open": {
+          maxHeight: 9999,
+          transitionTimingFunction: "cubic-bezier(0.5, 0, 1, 0)",
+          transitionDelay: "0s",
+        },
+        width: "100%",
+      }}
+    >
+      <Box
+        sx={{
+          pt: 2,
+          display: "flex",
+          flexDirection: "column",
+        }}
+      >
+        {children}
+      </Box>
+      <Box sx={{ pt: 1 }}>
+        <BottomSection close={close} deleteNode={deleteNode} />
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- NODE TITLE ----------------------
+ */
+
+export function NodeTitle({
+  children,
+  isPropname,
+  isEditing,
+  onClick,
+}: {
+  children: React.ReactNode;
+  isPropname?: boolean;
+  isEditing?: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        pt: 2,
+        cursor: "pointer",
+        transition: "background-color 0.5s",
+        borderBottomLeftRadius: 10,
+        borderBottomRightRadius: 10,
+        ":hover": {
+          backgroundColor: isEditing ? "#dddddd" : "transparent",
+        },
+      }}
+      onClick={isEditing ? onClick : () => {}}
+    >
+      <Box
+        sx={{
+          fontWeight: 400,
+          fontSize: 18,
+          backgroundColor: !isPropname ? "transparent" : "#d5d5d5",
+          borderRadius: 2,
+          px: 1,
+          display: "inline-block",
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- STYLED TEXT FIELD ----------------------
+ */
+
+export const textfieldStyle = (sx?: SxProps) => ({
+  minWidth: 250,
+  flexGrow: 1,
+  ...{
+    "& .MuiOutlinedInput-root": {
+      "& fieldset": {
+        borderColor: "#C0C3C7",
+      },
+      "&:hover fieldset": {
+        borderColor: "#A2AAB2",
+      },
+      "&.Mui-focused fieldset": {
+        borderColor: "#6F7E8C",
+      },
+    },
+  },
+  ...(sx ?? {}),
+});
+
+export function StyledTextField(props?: any, children?: React.ReactNode) {
+  return (
+    <TextField {...props} sx={textfieldStyle(props.sx)}>
+      {children}
+    </TextField>
+  );
+}
+
+/**
+ * ---------------------- BOTTOM SECTION ----------------------
+ */
+
+export function BottomSection({
+  close,
+  deleteNode,
+}: {
+  close: () => void;
+  deleteNode: () => void;
+}) {
+  return (
+    <Box
+      sx={{
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between",
+        backgroundColor: "#00000009",
+        borderRadius: 1,
+        py: 0.5,
+      }}
+    >
+      <Box>
+        <IconButton onClick={deleteNode}>
+          <DeleteOutlineIcon sx={{ color: "red" }} />
+        </IconButton>
+      </Box>
+      <Box>
+        <IconButton onClick={close}>
+          <CloseIcon />
+        </IconButton>
+      </Box>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- FIELD INPUTS ----------------------
+ */
+
+export function NodeField({
+  field,
+  node,
+  update,
+}: {
+  field: FieldArrayType<any>[0];
+  node: FormNodeType;
+  update: (
+    key: string,
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    type?: string
+  ) => void;
+}) {
+  const prop = field.prop as keyof FormNodeType;
+  const textfield = (
+    <StyledTextField
+      label={field.title ?? formatTitle(prop)}
+      value={node[prop] as string}
+      onChange={(e: any) => update(prop, e)}
+      {...field.props}
+    />
+  );
+  if (!field.tooltip) return textfield;
+  return (
+    <Tooltip title={field.tooltip} arrow>
+      {textfield}
+    </Tooltip>
+  );
+}
+
+export function NodeCheckbox({
+  field,
+  node,
+  update,
+}: {
+  field: FieldArrayType<any>[0];
+  node: FormNodeType;
+  update: (
+    key: string,
+    e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+    type?: string
+  ) => void;
+}) {
+  const prop = field.prop as keyof FormNodeType;
+  const checkbox = (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={node[prop] as boolean}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+            update(prop, e, "check");
+          }}
+        />
+      }
+      label={field.title ?? formatTitle(prop)}
+    />
+  );
+  if (!field.tooltip) return checkbox;
+  return (
+    <Tooltip title={field.tooltip} arrow>
+      {checkbox}
+    </Tooltip>
+  );
+}
+
+/**
+ * ---------------------- FIELD CONTAINERS ----------------------
+ */
+
+export function FieldContainer({ children }: { children?: React.ReactNode }) {
+  return (
+    <Box
+      sx={{ display: "flex", flexDirection: "row", gap: 2, flexWrap: "wrap" }}
+    >
+      {children}
+    </Box>
+  );
+}