feat: nestedNode component

Author: 318097

README.md

@@ -62,7 +62,7 @@
     - [ ] JSONEditor
     - [ ] UploadButton
   - [ ] Atom:
-    - [ ] Nested Nodes
+    - [x] Nested Nodes
     - [ ] Item component - used in Flash - history
   - [x] Code Drops: Dropdown
   - [x] DOT:
@@ -96,4 +96,4 @@
 - [x] Text overflow class
 - [x] Move popover position
 - [x] Change dot loader colors
-- [ ] Create item component/card or move NodeEditor from Octon
+- [x] Create item component/card or move NodeEditor from Octon

package-lock.json

@@ -39,7 +39,8 @@
     "eslint-plugin-react-hooks": "^4.2.0",
     "husky": "^7.0.4",
     "semantic-release-cli": "^5.4.4",
-    "semantic-release": "^18.0.1"
+    "semantic-release": "^18.0.1",
+    "@codedrops/lib": "0.0.49"
   },
   "scripts": {
     "dev": "webpack-dev-server --config webpack.app.js",
@@ -67,4 +68,4 @@
       "@commitlint/config-conventional"
     ]
   }
-}
+}

package.json

@@ -22,6 +22,7 @@ import BlockerScreen from "./molecules/BlockerScreen";
 import CheckboxGroup from "./molecules/CheckboxGroup";
 import ProfileDropdown from "./molecules/ProfileDropdown";
 import ProfileAvatar from "./molecules/ProfileAvatar";
+import NestedNodes from "./molecules/NestedNodes";
 
 export {
   Card,
@@ -45,6 +46,7 @@ export {
   ProfileDropdown,
   ProfileAvatar,
   Backdrop,
+  NestedNodes,
 };
 
 export default color;

src/UIComponents/index.js

@@ -0,0 +1,159 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useState, Fragment } from "react";
+import colors, { Icon, Card, Button, Input, Select } from "../../index";
+import { useObject } from "@codedrops/lib";
+import "./NestedNodes.scss";
+import { v4 as uuidv4 } from "uuid";
+import classnames from "classnames";
+
+const NestedNodesContainer = ({ nodes = [], onChange }) => {
+  const [showAddRow, setShowAddRow] = useState(false);
+  const [editId, setEditId] = useState(null);
+  const [addData, setAddData, resetAddData] = useObject({});
+
+  const setNodeToEdit = (node) => {
+    setAddData(node);
+    setEditId(node._id);
+    setShowAddRow(true);
+  };
+
+  const handleChange = () => {
+    if (!addData.label) return;
+
+    if (editId) {
+      onChange(
+        addData,
+        "UPDATE",
+        nodes.map((node) =>
+          node._id === editId ? { ...node, ...addData } : node
+        )
+      );
+      setEditId(null);
+    } else {
+      const newItem = { ...addData, _id: uuidv4() };
+      onChange(newItem, "CREATE", [...nodes, newItem]);
+    }
+    reset();
+  };
+
+  const reset = () => {
+    resetAddData({});
+    setShowAddRow(false);
+    setEditId(null);
+  };
+
+  const deleteNode = (_id) => {
+    onChange(
+      { _id },
+      "DELETE",
+      nodes.filter((node) => node._id !== _id)
+    );
+  };
+
+  const hideParentSelect = editId && addData.default; // hide select parent dropdown when a field is `default` & in edit mode
+
+  return (
+    <div className="nested-container">
+      <NestedNodes
+        nodes={nodes}
+        setNodeToEdit={setNodeToEdit}
+        deleteNode={deleteNode}
+      />
+      <div className="controller mt">
+        {showAddRow ? (
+          <>
+            <div className="flex center gap-4">
+              <Input
+                value={addData.label}
+                name="label"
+                placeholder="Label"
+                onChange={(e, value) => setAddData(value)}
+                autoFocus={true}
+              />
+              {hideParentSelect ? null : (
+                <Select
+                  dropPosition={"top"}
+                  placeholder="Parent"
+                  value={addData.parentTagId}
+                  name="parentTagId"
+                  onChange={(e, value) => setAddData(value)}
+                  options={nodes
+                    .map((node) => ({
+                      label: node.label,
+                      value: node._id,
+                    }))
+                    .filter((node) => node.value !== editId)}
+                />
+              )}
+            </div>
+            <div className="flex center gap-4 mt-4">
+              <Button onClick={handleChange}>
+                {editId ? "Update" : "Add"}
+              </Button>
+              <Button onClick={reset}>Cancel</Button>
+            </div>
+          </>
+        ) : (
+          <Button onClick={() => setShowAddRow(true)}>Add</Button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+const NestedNodes = (props) => {
+  const { nodes, depth = 0, parentTagId, setNodeToEdit, deleteNode } = props;
+
+  const filteredNodes = nodes.filter((node) =>
+    depth > 0
+      ? node.parentTagId && node.parentTagId === parentTagId
+      : !node.parentTagId
+  );
+  const isRootLevel = !depth || depth === 0;
+  const showDivider = Boolean(filteredNodes.length && !isRootLevel);
+  const nextDepth = Number(depth) + 1;
+
+  return (
+    <Fragment>
+      {showDivider && <div className="divider"></div>}
+      <div className="wrapper">
+        {filteredNodes.map((node, index) => {
+          const { _id, label, canDelete } = node;
+          const hasChildNodes = nodes.filter(
+            (node) => node.parentTagId === _id
+          ).length;
+          const nodeClasses = classnames(
+            "node",
+            // `level-${depth || 0}`,
+            {
+              expanded: hasChildNodes,
+            }
+          );
+          return (
+            <Card key={_id} className={nodeClasses}>
+              <div className="title-wrapper">
+                <div className="title">{`${index + 1}. ${label}`}</div>
+                <div>
+                  <Icon
+                    type="edit"
+                    size={10}
+                    onClick={() => setNodeToEdit(node)}
+                  />
+                  <Icon
+                    type="delete"
+                    size={10}
+                    fill={canDelete ? colors.iron : colors.strokeOne}
+                    onClick={() => (canDelete ? deleteNode(node._id) : null)}
+                  />
+                </div>
+              </div>
+              <NestedNodes {...props} depth={nextDepth} parentTagId={_id} />
+            </Card>
+          );
+        })}
+      </div>
+    </Fragment>
+  );
+};
+
+export default NestedNodesContainer;

src/UIComponents/molecules/NestedNodes/NestedNodes.js

@@ -0,0 +1,41 @@
+@import "../../../magicdust/colors";
+
+.nested-container {
+  .wrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+  .node {
+    display: flex;
+    flex-direction: column;
+    background: $white;
+    padding: 8px 12px;
+    box-shadow: 4px 4px 4px $bg;
+    border-color: $strokeOne;
+    .divider {
+      margin: 0;
+    }
+    .title-wrapper {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    &.expanded {
+      // contains child nodes
+      padding: 0;
+      & > .title-wrapper {
+        padding: 8px 12px;
+      }
+      & > .wrapper {
+        padding: 12px;
+      }
+    }
+    &:not(.expanded) {
+      transition: 0.2s;
+      &:hover {
+        background: $feather;
+      }
+    }
+  }
+}

src/UIComponents/molecules/NestedNodes/NestedNodes.scss

@@ -0,0 +1,2 @@
+import comp from "./NestedNodes";
+export default comp;

src/UIComponents/molecules/NestedNodes/index.js

@@ -20,6 +20,7 @@ import {
   Dropdown,
   ProfileDropdown,
   ProfileAvatar,
+  NestedNodes,
 } from "../UIComponents";
 import "./Home.scss";
 import colors from "../magicdust/colors";
@@ -47,6 +48,7 @@ const uiList = [
   "EMPTYSTATE",
   "BLOCKERSCREEN",
   "ICON",
+  "NESTED_NODES",
 ];
 
 const icons = [
@@ -138,12 +140,15 @@ const UIComponent = ({ type }) => {
     radio: "a",
     select: "a",
     checkbox: true,
+    nodes: [],
   });
 
   const [id, setId] = useState();
 
   const setInputField = (update) => setData((prev) => ({ ...prev, ...update }));
 
+  console.log("data::-", data);
+
   switch (type) {
     case "PROFILE_AVATAR":
       return (
@@ -387,6 +392,13 @@ const UIComponent = ({ type }) => {
           <BlockerScreen />
         </div>
       );
+    case "NESTED_NODES":
+      return (
+        <NestedNodes
+          nodes={data.nodes}
+          onChange={(node) => setInputField({ nodes: [...data.nodes, node] })}
+        />
+      );
     case "DROPDOWN":
       return (
         <Dropdown