@canmingir/link 1.2.22 → 1.2.24

package/src/lib/Schema/Schema.jsx

@@ -0,0 +1,204 @@
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { v4 as uuidv4 } from "uuid";
+
+import { Box, Typography } from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
+
+const Schema = ({ initialData = {}, customTypes = [] }) => {
+  const [schemaData, setSchemaData] = useState({});
+
+  useEffect(() => {
+    const addIdsToSchema = (schema) => {
+      if (!schema) return null;
+
+      return {
+        ...schema,
+        id: uuidv4(),
+        properties: schema.properties?.map(addIdsToSchema),
+      };
+    };
+
+    if (Object.keys(initialData).length === 0) {
+      setSchemaData({
+        type: "object",
+        properties: [],
+      });
+    } else {
+      setSchemaData(addIdsToSchema(initialData));
+    }
+  }, [initialData]);
+
+  const renderTree = (node, level = 0) => (
+    <TreeItem
+      key={node.id}
+      itemId={level === 0 ? "1" : node.id}
+      label={
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            width: "100%",
+          }}
+        >
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "1px",
+              width: "100%",
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-between",
+                width: "100%",
+                gap: "4px",
+              }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                }}
+              >
+                <Typography
+                  variant="body2"
+                  sx={{
+                    padding: "2px 2px",
+                    borderRadius: "4px",
+                  }}
+                >
+                  {level === 0 ? "" : node.name}
+                </Typography>
+              </Box>
+
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  cursor: "pointer",
+                }}
+              >
+                <Typography
+                  variant="body2"
+                  sx={{
+                    cursor: "pointer",
+                    borderRadius: "4px",
+                  }}
+                >
+                  {node.type}
+                </Typography>
+              </Box>
+            </Box>
+          </div>
+        </div>
+      }
+    >
+      {Array.isArray(node.properties)
+        ? node.properties.map((childNode) => renderTree(childNode, level + 1))
+        : isCustomType(node.type)
+        ? renderCustomTypeNode(node)
+        : null}
+    </TreeItem>
+  );
+
+  const isCustomType = (type) => {
+    return customTypes.some((customType) => customType.name === type);
+  };
+
+  const renderCustomTypeNode = (node) => {
+    const customTypeSchema = customTypes.find(
+      (type) => type.name === node.type
+    )?.schema;
+
+    if (!customTypeSchema || !customTypeSchema.properties) {
+      return <Box sx={{ paddingLeft: "20px" }}>No properties defined</Box>;
+    }
+
+    return (
+      <Box sx={{ paddingLeft: "20px" }}>
+        {customTypeSchema.properties.map((prop, index) => (
+          <Box
+            key={index}
+            sx={{
+              paddingTop: "5px",
+              paddingBottom: "5px",
+              display: "flex",
+              alignItems: "center",
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                color: (theme) => theme.palette.grey[600],
+              }}
+            >
+              {prop.name}
+            </Typography>
+            <Typography
+              variant="body2"
+              sx={{
+                marginLeft: "8px",
+                color: (theme) => theme.palette.grey[500],
+              }}
+            >
+              {prop.type}
+            </Typography>
+          </Box>
+        ))}
+      </Box>
+    );
+  };
+
+  return (
+    <SimpleTreeView
+      slots={{
+        collapseIcon: () => <ExpandMoreIcon />,
+        expandIcon: () => <ChevronRightIcon />,
+      }}
+      defaultExpandedItems={["1"]}
+      sx={{
+        flexGrow: 1,
+        overflowY: "auto",
+        width: "100%",
+        ".MuiTreeItem-root": {
+          alignItems: "center",
+        },
+        ".MuiTreeItem-content": {
+          width: "100%",
+          display: "flex",
+          justifyContent: "space-between",
+          padding: "1px 8px",
+          borderRadius: "4px",
+          margin: "1px 0",
+          transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
+        },
+        ".MuiTreeItem-label": {
+          width: "100%",
+          fontWeight: "bold",
+        },
+        ".MuiTreeItem-group": {
+          marginLeft: "16px !important",
+          paddingLeft: "8px",
+          borderLeft: `1px solid`,
+          borderColor: (theme) => theme.palette.grey[400],
+        },
+        ".MuiTreeItem-iconContainer": {
+          minWidth: "0",
+          marginRight: "0px",
+          padding: "0px",
+        },
+      }}
+    >
+      {renderTree(schemaData, 0)}
+    </SimpleTreeView>
+  );
+};
+
+export default Schema;

package/src/lib/Schema/index.js

@@ -0,0 +1 @@
+export { default } from "./Schema";

package/src/lib/SchemaEditor/SchemaEditor.jsx

@@ -0,0 +1,258 @@
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import IconButton from "@mui/material/IconButton";
+import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
+import SchemaPropertyEditor from "./SchemaPropertyEditor";
+import { v4 as uuidv4 } from "uuid";
+
+import { Box, Typography } from "@mui/material";
+import React, { forwardRef, useEffect, useState } from "react";
+import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView";
+import { TreeItem } from "@mui/x-tree-view/TreeItem";
+import { addProperty, changeProperty, removeProperty } from "./SchemaUtils";
+
+const SchemaEditor = forwardRef(
+  ({ initialData = {}, customTypes = [] }, ref) => {
+    const [schemaData, setSchemaData] = useState({});
+
+    useEffect(() => {
+      const addIdsToSchema = (schema) => {
+        return {
+          ...schema,
+          id: uuidv4(),
+          properties: schema.properties?.map(addIdsToSchema),
+        };
+      };
+
+      if (!schemaData || Object.keys(schemaData).length === 0) {
+        if (Object.keys(initialData).length === 0) {
+          setSchemaData({
+            type: "object",
+            properties: [],
+          });
+        } else {
+          const dataWithIds = addIdsToSchema(initialData);
+          setSchemaData(dataWithIds);
+        }
+      }
+    }, [initialData, schemaData]);
+
+    const handleAddProperty = (newProperty, parentId = null) => {
+      addProperty(parentId, setSchemaData);
+    };
+
+    const handleRemoveProperty = (propertyId) => {
+      removeProperty(propertyId, setSchemaData);
+    };
+
+    const handleChangeProperty = (propertyId, changes) => {
+      changeProperty(propertyId, changes, setSchemaData);
+    };
+
+    const renderTree = (node, level = 0) => (
+      <TreeItem
+        key={node.id}
+        itemId={level === 0 ? "1" : node.id}
+        label={
+          <Box
+            sx={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+            }}
+          >
+            <Box
+              sx={{
+                display: "flex",
+                alignItems: "center",
+                gap: "1px",
+                width: "100%",
+              }}
+            >
+              <SchemaPropertyEditor
+                node={{ ...node, level }}
+                disableNameChange={level === 0}
+                onNameChange={(newName) => {
+                  handleChangeProperty(node.id, {
+                    name: newName,
+                    type: node.type,
+                  });
+                }}
+                onTypeChange={(newType) => {
+                  handleChangeProperty(level === 0 ? "1" : node.id, {
+                    name: node.name,
+                    type: newType,
+                  });
+                }}
+                customTypes={customTypes}
+              />
+              {true && (
+                <IconButton
+                  size="small"
+                  onClick={(e) => {
+                    e.preventDefault();
+                    e.stopPropagation();
+                    handleAddProperty(
+                      { type: "string", name: "newProperty" },
+                      level === 0 ? null : node.id
+                    );
+                  }}
+                  disabled={
+                    node.type !== "object" ||
+                    (node.type === "array" && node.properties.length >= 1)
+                  }
+                  sx={{
+                    color: (theme) => theme.palette.grey[600],
+                    marginRight: "-8px ",
+                  }}
+                  data-cy={`add-property-button-${node.id}`}
+                >
+                  <AddCircleOutlineIcon fontSize="small" />
+                </IconButton>
+              )}
+            </Box>
+
+            {true && (
+              <IconButton
+                size="small"
+                style={{ marginLeft: "auto" }}
+                onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  handleRemoveProperty(node.id);
+                }}
+                disabled={level === 0}
+                sx={{
+                  color: (theme) => theme.palette.grey[600],
+                }}
+              >
+                <RemoveCircleOutlineIcon fontSize="small" />
+              </IconButton>
+            )}
+          </Box>
+        }
+      >
+        {Array.isArray(node.properties)
+          ? node.properties.map((childNode) => renderTree(childNode, level + 1))
+          : isCustomType(node.type)
+          ? renderCustomTypeNode(node)
+          : null}
+      </TreeItem>
+    );
+
+    const isCustomType = (type) => {
+      return customTypes.some((customType) => customType.name === type);
+    };
+
+    const renderCustomTypeNode = (node) => {
+      const customTypeSchema = customTypes.find(
+        (type) => type.name === node.type
+      )?.schema;
+
+      if (!customTypeSchema || !customTypeSchema.properties) {
+        return <Box sx={{ paddingLeft: "20px" }}>No properties defined</Box>;
+      }
+
+      return (
+        <Box sx={{ paddingLeft: "20px" }}>
+          {customTypeSchema.properties.map((prop, index) => (
+            <Box
+              key={index}
+              sx={{
+                paddingTop: "5px",
+                paddingBottom: "5px",
+                display: "flex",
+                alignItems: "center",
+              }}
+            >
+              <Typography
+                variant="body2"
+                sx={{
+                  color: (theme) => theme.palette.grey[600],
+                }}
+              >
+                {prop.name}
+              </Typography>
+              <Typography
+                variant="body2"
+                sx={{
+                  marginLeft: "8px",
+                  color: (theme) => theme.palette.grey[500],
+                }}
+              >
+                {prop.type}
+              </Typography>
+            </Box>
+          ))}
+        </Box>
+      );
+    };
+
+    const schemaOutput = () => {
+      const removeIds = (node) => {
+        // eslint-disable-next-line no-unused-vars
+        const { id, properties, ...rest } = node;
+        if ((node.type === "object" || node.type === "array") && properties) {
+          return { ...rest, properties: properties.map(removeIds) };
+        }
+        return rest;
+      };
+
+      return removeIds(schemaData);
+    };
+
+    React.useImperativeHandle(ref, () => ({
+      schemaOutput: schemaOutput,
+    }));
+
+    const schemaOutputWithIDs = () => schemaData;
+
+    return (
+      <SimpleTreeView
+        slots={{
+          collapseIcon: () => <ExpandMoreIcon data-cy="collapse-icon" />,
+          expandIcon: () => <ChevronRightIcon data-cy="expand-icon" />,
+        }}
+        defaultExpandedItems={["1"]}
+        sx={{
+          flexGrow: 1,
+          overflowY: "auto",
+          width: "100%",
+          ".MuiTreeItem-root": {
+            alignItems: "center",
+          },
+          ".MuiTreeItem-content": {
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            padding: "1px 8px",
+            borderRadius: "4px",
+            margin: "1px 0",
+            transition: "width 0.3s ease-in-out, height 0.3s ease-in-out",
+          },
+          ".MuiTreeItem-label": {
+            width: "100%",
+            fontWeight: "bold",
+          },
+          ".MuiTreeItem-group": {
+            marginLeft: "16px !important",
+            paddingLeft: "8px",
+            borderLeft: `1px solid`,
+            borderColor: (theme) => theme.palette.grey[400],
+          },
+          ".MuiTreeItem-iconContainer": {
+            minWidth: "0",
+            marginRight: "0px",
+            padding: "0px",
+          },
+        }}
+      >
+        {renderTree(schemaData, 0)}
+      </SimpleTreeView>
+    );
+  }
+);
+
+export default SchemaEditor;

package/src/lib/SchemaEditor/SchemaEditor.test.js

@@ -0,0 +1,193 @@
+import "@testing-library/jest-dom";
+
+import React from "react";
+import SchemaEditor from "./SchemaEditor";
+import { act } from "react-dom/test-utils";
+
+import { render, screen } from "@testing-library/react";
+
+describe("SchemaEditor Component", () => {
+  const initialSchema = {
+    type: "object",
+    properties: [
+      { type: "string", name: "initial" },
+      { type: "integer", name: "schema" },
+      {
+        type: "object",
+        name: "object",
+        properties: [{ type: "integer", name: "nested" }],
+      },
+    ],
+  };
+
+  test("renders with initial schema", () => {
+    console.log("rendering ");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    expect(screen.getByDisplayValue(/initial/)).toBeInTheDocument();
+    expect(screen.getByDisplayValue(/schema/)).toBeInTheDocument();
+
+    // expect(screen.getByText(/nested/)).toBeInTheDocument();
+  });
+
+  test("initializes without initial data", () => {
+    console.log("initializing without initial data");
+    render(<SchemaEditor />);
+
+    const expectedSchema = {
+      type: "object",
+      properties: [],
+    };
+
+    const outputSchema = SchemaEditor.schemaOutput();
+    expect(outputSchema).toEqual(expectedSchema);
+  });
+
+  test("provides output correctly with initial data", () => {
+    console.log("provides output correctly with initial data");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    const outputSchema = SchemaEditor.schemaOutput();
+    expect(outputSchema).toEqual(initialSchema);
+  });
+
+  test("adds a new property", () => {
+    console.log("adds a new property");
+    const emptySchema = { type: "object", properties: [] };
+    render(<SchemaEditor initialData={emptySchema} />);
+
+    act(() => {
+      SchemaEditor.addProperty(null);
+    });
+
+    let updatedSchema = SchemaEditor.schemaOutput();
+    expect(updatedSchema.properties).toHaveLength(1);
+    expect(updatedSchema.properties[0].name).toBe("id");
+
+    act(() => {
+      SchemaEditor.addProperty(null);
+    });
+
+    updatedSchema = SchemaEditor.schemaOutput();
+    expect(updatedSchema.properties).toHaveLength(2);
+    expect(updatedSchema.properties[1].name).toBe("prop2");
+  });
+
+  test("removes a property by ID", () => {
+    console.log("removes a property by ID");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    const currentSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+
+    const propertyToRemove = currentSchemaWithIDs.properties.find(
+      (prop) => prop.name === "initial"
+    );
+    if (!propertyToRemove) {
+      throw new Error("Property to remove not found");
+    }
+    act(() => {
+      SchemaEditor.removeProperty(propertyToRemove.id);
+    });
+
+    const newCurrentSchema = SchemaEditor.schemaOutput();
+    const isPropertyRemoved = newCurrentSchema.properties.every(
+      (prop) => prop.name !== "initial"
+    );
+    expect(isPropertyRemoved).toBeTruthy();
+  });
+
+  test("changes a property type and name", () => {
+    console.log("changes a property type and name");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    const currentSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+
+    const propertyToChange = currentSchemaWithIDs.properties.find(
+      (prop) => prop.name === "initial"
+    );
+    if (!propertyToChange) {
+      throw new Error("Property to change not found");
+    }
+
+    const change = {
+      name: "initial2",
+      type: "integer",
+    };
+    act(() => {
+      SchemaEditor.changeProperty(propertyToChange.id, change);
+    });
+    const updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+
+    const changedProperty = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.id === propertyToChange.id
+    );
+    expect(changedProperty).toBeDefined();
+    expect(changedProperty.name).toBe(change.name);
+    expect(changedProperty.type).toBe(change.type);
+  });
+
+  test("adds a nested object and a property to it", () => {
+    console.log("adds a nested object and a property to it");
+    render(<SchemaEditor initialData={initialSchema} />);
+
+    act(() => {
+      SchemaEditor.addProperty(null);
+    });
+
+    let updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const newNestedObjectId = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.name === "prop4"
+    ).id;
+
+    act(() => {
+      SchemaEditor.addProperty(newNestedObjectId);
+    });
+
+    updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const updatedNestedObject = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.id === newNestedObjectId
+    );
+    console.log("updatedNestedObject: ", updatedNestedObject);
+    expect(updatedNestedObject).toBeDefined();
+    expect(updatedNestedObject.name).toBe("prop4");
+  });
+
+  test("changes a property to custom type", () => {
+    console.log("changes a property to custom type");
+    const customTypes = [
+      {
+        name: "Item",
+        schema: {
+          type: "object",
+          properties: [
+            { type: "string", name: "id" },
+            { type: "string", name: "name" },
+            { type: "string", name: "barcode" },
+          ],
+        },
+      },
+    ];
+
+    render(
+      <SchemaEditor initialData={initialSchema} customTypes={customTypes} />
+    );
+
+    const currentSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const propertyToChange = currentSchemaWithIDs.properties[0];
+
+    const change = {
+      type: "Item",
+    };
+
+    act(() => {
+      SchemaEditor.changeProperty(propertyToChange.id, change);
+    });
+
+    const updatedSchemaWithIDs = SchemaEditor.schemaOutputWithIDs();
+    const updatedProperty = updatedSchemaWithIDs.properties.find(
+      (prop) => prop.id === propertyToChange.id
+    );
+    expect(updatedProperty).toBeDefined();
+    expect(updatedProperty.type).toBe("Item");
+  });
+});