@springmicro/forms 0.1.3 → 0.2.0-alpha.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@springmicro/forms",
-  "version": "0.1.3",
+  "version": "0.2.0-alpha.1",
   "type": "module",
   "private": false,
   "publishConfig": {
@@ -16,15 +16,21 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.11.4",
+    "@emotion/styled": "^11.11.5",
+    "@mui/icons-material": "^5.15.18",
+    "@mui/material": "^5.15.20",
     "@rjsf/core": "^5.10.0",
     "@rjsf/utils": "^5.10.0",
     "@rjsf/validator-ajv8": "^5.10.0",
     "lodash": "^4.17.21",
     "nanoid": "^5.0.7",
     "react": "^18.2.0",
+    "react-beautiful-dnd": "^13.1.1",
     "react-datepicker": "^4.16.0",
     "react-dom": "^18.2.0",
-    "react-select": "^5.7.4"
+    "react-select": "^5.7.4",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@types/json-schema": "^7.0.12",
@@ -42,5 +48,5 @@
     "vite": "^5.2.0",
     "vite-plugin-dts": "^3.9.0"
   },
-  "gitHead": "d09e3906681dadcf2680775e01a1aabc35b82812"
+  "gitHead": "d988e7008130d071792f11d20bd22ab2fe4ea695"
 }

package/src/builder/bottom-drawer.tsx

@@ -0,0 +1,429 @@
+import {
+  Box,
+  Button,
+  FormControl,
+  FormControlLabel,
+  FormLabel,
+  IconButton,
+  Radio,
+  RadioGroup,
+  TextField,
+} from "@mui/material";
+import React from "react";
+import { UseStateType } from "../types/utils.type";
+import Modal from "./modal";
+import {
+  CountdownType,
+  EditingStateType,
+  FormNodeKeys,
+  FormNodeType,
+  FormType,
+} from "../types/form-builder";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import SettingsIcon from "@mui/icons-material/Settings";
+import HomeIcon from "@mui/icons-material/Home";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import {
+  defaultNodes,
+  generateNodeData,
+  serializeFormToBuilder,
+} from "../utils/form-builder";
+import { RJSFSchema, UiSchema } from "@rjsf/utils";
+/**
+ * ---------------------- BOTTOM DRAWER ----------------------
+ */
+
+export type BottomDrawerProps = {
+  nodesState: UseStateType<FormNodeType[]>;
+  formState: UseStateType<FormType>;
+  countdown: CountdownType;
+  path: [number[], (num?: number) => void];
+  setEditing: UseStateType<EditingStateType>[1];
+};
+
+export default function BottomDrawer({
+  nodesState,
+  countdown,
+  formState,
+  path: pathInfo,
+  setEditing,
+}: BottomDrawerProps) {
+  const [createModalOpen, setCreateModalOpen] = React.useState(false);
+  const [configModalOpen, setConfigModalOpen] = React.useState(false);
+
+  const [path, setPath] = pathInfo; // setPath is not from useState.
+
+  function importFunction(form: RJSFSchema, ui: UiSchema) {
+    const [, setNodes] = nodesState;
+    const [, setForm] = formState;
+    try {
+      const { nodes, form: formData } = serializeFormToBuilder(form, ui);
+      setNodes(nodes);
+      setForm(formData);
+    } catch {
+      return "Could not parse data.";
+    }
+  }
+
+  return (
+    <>
+      <Box
+        sx={{
+          width: "100%",
+          height: 60,
+          pt: 1,
+          borderTop: "1px solid #777",
+          flexShrink: 0,
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            gap: 1,
+            alignItems: "flex-end",
+            height: "100%",
+          }}
+        >
+          <DrawerIconButton
+            icon={SettingsIcon}
+            onClick={() => {
+              setConfigModalOpen(true);
+            }}
+          />
+          {path.length > 0 && (
+            <>
+              {/* PATH NAVIGATION */}
+              <DrawerIconButton
+                icon={HomeIcon}
+                onClick={() => {
+                  setPath(-1);
+                }}
+              />
+              <DrawerIconButton
+                icon={ArrowBackIcon}
+                onClick={() => {
+                  setPath();
+                }}
+              />
+            </>
+          )}
+        </Box>
+        <Box
+          sx={{
+            display: "flex",
+            gap: 1,
+            alignItems: "flex-end",
+            height: "100%",
+          }}
+        >
+          <p
+            style={{
+              color: countdown !== "Save failed." ? "#888" : "#d22",
+              fontSize: 20,
+            }}
+          >
+            <CountdownTimer countdown={countdown} />
+          </p>
+          <DrawerIconButton
+            icon={AddCircleIcon}
+            onClick={() => {
+              setCreateModalOpen(true);
+            }}
+          />
+        </Box>
+      </Box>
+      <CreateModal
+        openState={[createModalOpen, setCreateModalOpen]}
+        nodesState={nodesState}
+        setEditing={setEditing}
+      />
+      <ConfigModal
+        openState={[configModalOpen, setConfigModalOpen]}
+        formState={formState}
+        import={importFunction}
+      />
+    </>
+  );
+}
+
+/**
+ * ---------------------- COUNTDOWN ----------------------
+ */
+
+const CountdownTimer = ({ countdown }: { countdown: CountdownType }) => {
+  if (countdown === undefined) return <></>;
+  if (typeof countdown === "string") return <>{countdown}</>;
+  return <>Autosaving ({countdown})</>;
+};
+
+/**
+ * ---------------------- ICON BUTTON ----------------------
+ */
+
+type DrawerIconButtonProps = {
+  onClick?: () => void;
+  icon: React.ComponentType<any>;
+};
+
+function DrawerIconButton({
+  // children,
+  onClick,
+  icon: Icon,
+}: DrawerIconButtonProps) {
+  return (
+    <Box
+      sx={{
+        height: "100%",
+        aspectRatio: 1,
+        backgroundColor: "#eaeaea",
+        borderRadius: 1,
+        cursor: "pointer",
+      }}
+      onClick={onClick}
+    >
+      <IconButton sx={{ height: "100%", aspectRatio: 1 }}>
+        <Icon fontSize="large" sx={{ color: "#777" }} />
+      </IconButton>
+    </Box>
+  );
+}
+
+/**
+ * ---------------------- CONFIG MODAL ----------------------
+ */
+
+type ConfigModalProps = {
+  openState: UseStateType<boolean>;
+  formState: UseStateType<FormType>;
+  import: (form: RJSFSchema, ui: UiSchema) => void | string;
+};
+
+function ConfigModal({
+  openState,
+  formState,
+  import: importFunction,
+}: ConfigModalProps) {
+  const [open, setOpen] = openState;
+  const [form, setForm] = formState;
+
+  const [error, setError] = React.useState("");
+
+  function closeModal() {
+    setError("");
+    setOpen(false);
+  }
+
+  function openImport(): void {
+    const inputElement: HTMLInputElement = document.createElement("input");
+    inputElement.type = "file";
+    inputElement.accept = ".json";
+
+    inputElement.onchange = (event: Event) => {
+      const { files } = event.target as HTMLInputElement;
+      if (!files) return;
+      if (files.length === 0) {
+        setError("No file selected.");
+        return;
+      }
+      if (files.length !== 1) {
+        setError("Please select only one JSON file.");
+        return;
+      }
+      const file: File = files[0];
+      if (file.type === "application/json") {
+        const reader: FileReader = new FileReader();
+        reader.onload = () => {
+          try {
+            const jsonData = JSON.parse(reader.result as string);
+            if (!jsonData.form)
+              throw `Invalid JSON.\nExample format: {\n\t"form": {...formData},\n\t"ui": {...uiData | undefined}\n}`;
+            const imported = importFunction(jsonData.form, jsonData.ui ?? {});
+            if (typeof imported === "string") throw imported;
+
+            // Successful import!
+            closeModal();
+          } catch (err) {
+            setError(err);
+          }
+        };
+        reader.readAsText(file);
+      } else {
+        setError("Please select a valid JSON file.");
+      }
+    };
+
+    inputElement.click();
+  }
+
+  return (
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <h2>Edit Form Details:</h2>
+      <TextField
+        label="Title"
+        required
+        value={form.title}
+        onChange={(e) => {
+          if (!e.target.value) return;
+          setForm((f) => ({ ...f, title: e.target.value }));
+        }}
+      />
+      <TextField
+        label="Description"
+        value={form.description}
+        onChange={(e) => {
+          setForm((f) => ({ ...f, description: e.target.value }));
+        }}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 2,
+          button: { flexGrow: 1 },
+        }}
+      >
+        <Button variant="contained" onClick={openImport}>
+          Import
+        </Button>
+        <Button variant="contained" onClick={closeModal}>
+          Exit
+        </Button>
+      </Box>
+      <p style={{ color: "red", whiteSpace: "pre-wrap" }}>{error}</p>
+    </Modal>
+  );
+}
+
+/**
+ * ---------------------- OBJECT PRESET CHILDREN (CREATE MODAL) ----------------------
+ */
+
+const presetChildren: Record<string, Array<FormNodeType> | undefined> = {
+  // @ts-ignore
+  empty: [] as FormNodeType[],
+  image: [
+    {
+      ...generateNodeData("string"),
+      format: "uri",
+      propertyName: "src",
+      title: undefined,
+    },
+    {
+      ...generateNodeData("string"),
+      propertyName: "alt",
+      title: undefined,
+    },
+    {
+      ...generateNodeData("string"),
+      propertyName: "width",
+      title: undefined,
+    },
+    {
+      ...generateNodeData("string"),
+      propertyName: "height",
+      title: undefined,
+    },
+  ] as FormNodeType[],
+};
+
+/**
+ * ---------------------- CREATE MODAL ----------------------
+ */
+
+type CreateModalProps = {
+  openState: UseStateType<boolean>;
+  nodesState: UseStateType<FormNodeType[]>;
+  setEditing: UseStateType<EditingStateType>[1];
+};
+
+function CreateModal({ openState, nodesState, setEditing }: CreateModalProps) {
+  const [open, setOpen] = openState;
+  const [nodes, setNodes] = nodesState;
+  const [nodeType, setNodeType] = React.useState<FormNodeKeys>("string");
+  const [presetType, setPresetType] = React.useState<"empty" | "image">(
+    "empty"
+  );
+
+  return (
+    <Modal open={open} onClose={() => setOpen(false)}>
+      <h2>Create a new node:</h2>
+      <FormControl>
+        <FormLabel id="demo-radio-buttons-group-label">Field Type</FormLabel>
+        <RadioGroup
+          value={nodeType}
+          onChange={(e) => {
+            setNodeType(e.target.value as FormNodeKeys);
+          }}
+        >
+          {Object.keys(defaultNodes).map((key) => {
+            return (
+              <FormControlLabel
+                key={key}
+                value={key}
+                control={<Radio />}
+                label={key.slice(0, 1).toUpperCase() + key.slice(1)}
+              />
+            );
+          })}
+        </RadioGroup>
+      </FormControl>
+      {nodeType === "object" && (
+        // ======================= OBJECT PRESETS =======================
+        <FormControl>
+          <FormLabel id="demo-radio-buttons-group-label">Preset</FormLabel>
+          <RadioGroup
+            value={presetType}
+            onChange={(e) => {
+              setPresetType(e.target.value as any);
+            }}
+          >
+            {Object.keys(presetChildren).map((key) => {
+              return (
+                <FormControlLabel
+                  key={key}
+                  value={key}
+                  control={<Radio />}
+                  label={key.slice(0, 1).toUpperCase() + key.slice(1)}
+                />
+              );
+            })}
+          </RadioGroup>
+        </FormControl>
+      )}
+      <Button
+        onClick={() => {
+          setEditing(false);
+          let nodeId: EditingStateType = false;
+          setNodes((nodes) => {
+            const newNode = generateNodeData(
+              nodeType,
+              nodeType === "object"
+                ? // @ts-ignore
+                  (presetChildren[presetType] as FormNodeType[])
+                : undefined
+            ) as FormNodeType;
+            nodeId = newNode.nodeId;
+            setEditing(nodeId);
+            return [...nodes, newNode];
+          });
+          setOpen(false);
+          setTimeout(() => {
+            const element = document.getElementById(
+              "fb-scrollable"
+            ) as HTMLElement;
+            const newElement = document.getElementById(
+              nodeId as string
+            ) as HTMLElement;
+            element.scrollTop = element.scrollHeight - newElement.offsetHeight;
+          }, 0);
+        }}
+      >
+        Create
+      </Button>
+    </Modal>
+  );
+}