FB-05 Node Editor UI - Working w/ function node

README.md

@@ -293,7 +293,7 @@ The backlog is organized by epic, with each task having a unique ID, description
 
 | To Do | In Progress | In Review | Done  |
 | ----- | ----------- | --------- | ----- |
-| FB-05 |             |           | FB-01 |
+|       | FB-05       |           | FB-01 |
 |       |             |           | FB-02 |
 |       |             |           | FB-03 |
 |       |             |           | FB-04 |

package.json

@@ -11,17 +11,24 @@
   "type": "module",
   "private": true,
   "dependencies": {
+    "@fortawesome/fontawesome-free": "^6.5.2",
     "@projectstorm/react-canvas-core": "^7.0.3",
     "@projectstorm/react-diagrams": "^7.0.4",
     "@reduxjs/toolkit": "^2.2.3",
     "dompurify": "^3.1.0",
+    "i18next": "^23.11.2",
+    "jquery-i18next": "^1.2.1",
+    "jsonata": "^2.0.4",
     "marked": "^12.0.1",
+    "monaco-editor": "=0.47.0",
     "react": "18.2.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",
     "react-is": "18.2.0",
     "react-redux": "^9.1.0",
+    "react-shadow": "^20.4.0",
+    "redux-persist": "^6.0.0",
     "styled-components": "5.3.6"
   },
   "devDependencies": {

packages/flow-client/src/app/app.spec.tsx

@@ -1,3 +1,4 @@
+import '../../vitest-esbuild-compat';
 import { render } from '@testing-library/react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
@@ -32,6 +33,16 @@ vi.mock('./redux/modules/api/node.api', async importOriginal => {
     };
 });
 
+vi.mock('redux-persist/integration/react', async importOriginal => {
+    const real = await importOriginal<
+        typeof import('redux-persist/integration/react')
+    >();
+    return {
+        ...real,
+        PersistGate: ({ children }: { children: React.ReactNode }) => children,
+    };
+});
+
 vi.mock('./components/flow-canvas/flow-canvas', () => ({
     FlowCanvas: () => <div>Flow Container</div>,
 }));

packages/flow-client/src/app/app.tsx

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
 
 import { FlowCanvas } from './components/flow-canvas/flow-canvas'; // Ensure the path is correct
-import NodePalette from './components/node-palette/node-palette'; // Import NodePalette
+import { NodeEditor } from './components/node-editor';
+import { NodePalette } from './components/node-palette/node-palette'; // Import NodePalette
 
 // StyledApp defines the main application container styles.
 // It ensures the flow canvas takes up the full viewport height for better visibility.
@@ -21,6 +22,7 @@ const StyledApp = styled.div`
     .builder-container {
         display: flex;
         flex-direction: row;
+        position: relative;
         height: calc(100% - 60px);
 
         .node-palette {
@@ -44,6 +46,7 @@ export function App() {
             <div className="builder-container">
                 <NodePalette />
                 <FlowCanvas />
+                <NodeEditor />
             </div>
         </StyledApp>
     );