refactor: fix spelling and wording errors

packages/web/src/components/EditorNew/Edge/Edge.jsx

@@ -12,7 +12,7 @@ export default function Edge({
   targetX,
   targetY,
   source,
-  data: { layouted },
+  data: { laidOut },
 }) {
   const { stepCreationInProgress, flowActive, onAddStep } =
     useContext(EdgesContext);
@@ -34,7 +34,7 @@ export default function Edge({
             position: 'absolute',
             transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
             pointerEvents: 'all',
-            visibility: layouted ? 'visible' : 'hidden',
+            visibility: laidOut ? 'visible' : 'hidden',
           }}
           disabled={stepCreationInProgress || flowActive}
         >
@@ -52,6 +52,6 @@ Edge.propTypes = {
   targetY: PropTypes.number.isRequired,
   source: PropTypes.string.isRequired,
   data: PropTypes.shape({
-    layouted: PropTypes.bool,
+    laidOut: PropTypes.bool,
   }).isRequired,
 };

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -8,7 +8,7 @@ import { UPDATE_STEP } from 'graphql/mutations/update-step';
 import { CREATE_STEP } from 'graphql/mutations/create-step';
 
 import { useAutoLayout } from './useAutoLayout';
-import { useScrollBoundries } from './useScrollBoundries';
+import { useScrollBoundaries } from './useScrollBoundaries';
 import FlowStepNode from './FlowStepNode/FlowStepNode';
 import Edge from './Edge/Edge';
 import InvisibleNode from './InvisibleNode/InvisibleNode';
@@ -47,7 +47,7 @@ const EditorNew = ({ flow }) => {
   );
 
   useAutoLayout();
-  useScrollBoundries();
+  useScrollBoundaries();
 
   const createdStepIdRef = useRef(null);
 
@@ -157,7 +157,7 @@ const EditorNew = ({ flow }) => {
               zIndex: 1,
               data: {
                 collapsed: false,
-                layouted: false,
+                laidOut: false,
               },
             };
           }
@@ -192,7 +192,7 @@ const EditorNew = ({ flow }) => {
                 target: targetId,
                 type: 'addNodeEdge',
                 data: {
-                  layouted: edge ? edge?.data.layouted : false,
+                  laidOut: edge ? edge?.data.laidOut : false,
                 },
               };
             }
@@ -212,10 +212,10 @@ const EditorNew = ({ flow }) => {
                 target: INVISIBLE_NODE_ID,
                 type: 'addNodeEdge',
                 data: {
-                  layouted:
+                  laidOut:
                     lastEdge?.id ===
                     generateEdgeId(lastStep.id, INVISIBLE_NODE_ID)
-                      ? lastEdge?.data.layouted
+                      ? lastEdge?.data.laidOut
                       : false,
                 },
               },

packages/web/src/components/EditorNew/FlowStepNode/FlowStepNode.jsx

@@ -7,15 +7,9 @@ import { NodeWrapper, NodeInnerWrapper } from './style.js';
 import { useContext } from 'react';
 import { NodesContext } from '../EditorNew.jsx';
 
-function FlowStepNode({ data: { collapsed, layouted }, id }) {
+function FlowStepNode({ data: { collapsed, laidOut }, id }) {
-  const {
+  const { openNextStep, onStepOpen, onStepClose, onStepChange, flowId, steps } =
-    openNextStep,
+    useContext(NodesContext);
-    onStepOpen,
-    onStepClose,
-    onStepChange,
-    flowId,
-    steps,
-  } = useContext(NodesContext);
 
   const step = steps.find(({ id: stepId }) => stepId === id);
 
@@ -23,7 +17,7 @@ function FlowStepNode({ data: { collapsed, layouted }, id }) {
     <NodeWrapper
       className="nodrag"
       sx={{
-        visibility: layouted ? 'visible' : 'hidden',
+        visibility: laidOut ? 'visible' : 'hidden',
       }}
     >
       <NodeInnerWrapper>
@@ -59,7 +53,7 @@ FlowStepNode.propTypes = {
   id: PropTypes.string,
   data: PropTypes.shape({
     collapsed: PropTypes.bool.isRequired,
-    layouted: PropTypes.bool.isRequired,
+    laidOut: PropTypes.bool.isRequired,
   }).isRequired,
 };
 

packages/web/src/components/EditorNew/useAutoLayout.js

@@ -4,7 +4,7 @@ import { usePrevious } from 'hooks/usePrevious';
 import { isEqual } from 'lodash';
 import { useNodesInitialized, useNodes, useReactFlow } from 'reactflow';
 
-const getLayoutedElements = (nodes, edges) => {
+const getLaidOutElements = (nodes, edges) => {
   const graph = new Dagre.graphlib.Graph().setDefaultEdgeLabel(() => ({}));
   graph.setGraph({
     rankdir: 'TB',
@@ -36,18 +36,18 @@ export const useAutoLayout = () => {
 
   const onLayout = useCallback(
     (nodes, edges) => {
-      const layoutedElements = getLayoutedElements(nodes, edges);
+      const laidOutElements = getLaidOutElements(nodes, edges);
 
       setNodes([
-        ...layoutedElements.nodes.map((node) => ({
+        ...laidOutElements.nodes.map((node) => ({
           ...node,
-          data: { ...node.data, layouted: true },
+          data: { ...node.data, laidOut: true },
         })),
       ]);
       setEdges([
-        ...layoutedElements.edges.map((edge) => ({
+        ...laidOutElements.edges.map((edge) => ({
           ...edge,
-          data: { ...edge.data, layouted: true },
+          data: { ...edge.data, laidOut: true },
         })),
       ]);
     },

packages/web/src/components/EditorNew/useScrollBoundaries.js

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import { useViewport, useReactFlow } from 'reactflow';
 
-export const useScrollBoundries = () => {
+export const useScrollBoundaries = () => {
   const { setViewport } = useReactFlow();
   const { x, y, zoom } = useViewport();
 

packages/web/src/components/EditorNew/utils.js

@@ -31,7 +31,7 @@ export const generateInitialNodes = (flow) => {
       zIndex: collapsed ? 0 : 1,
       data: {
         collapsed,
-        layouted: false,
+        laidOut: false,
       },
     };
   });
@@ -61,7 +61,7 @@ export const generateInitialEdges = (flow) => {
           target: targetId,
           type: 'addNodeEdge',
           data: {
-            layouted: false,
+            laidOut: false,
           },
         };
       }
@@ -80,7 +80,7 @@ export const generateInitialEdges = (flow) => {
           target: INVISIBLE_NODE_ID,
           type: 'addNodeEdge',
           data: {
-            layouted: false,
+            laidOut: false,
           },
         },
       ]