Merge pull request #16 from oslabs-beta/AL/tailwind-node

AL/tailwind node

Author: Louka3

package-lock.json

@@ -72,6 +72,9 @@
     "eslint": "^8.54.0",
     "glob": "^10.3.10",
     "mocha": "^10.2.0",
+    "postcss-loader": "^7.3.3",
+    "postcss-preset-env": "^9.3.0",
+    "tailwindcss": "^3.3.6",
     "typescript": "^5.2.2",
     "webpack-cli": "^5.1.4"
   },

package.json

@@ -0,0 +1,7 @@
+const tailwindcss = require('tailwindcss');
+module.exports = {
+    plugins: [
+        'postcss-preset-env',
+        tailwindcss
+    ],
+};

postcss.config.js

@@ -1,13 +1,15 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import ReactFlow, {
   addEdge,
   MiniMap,
+  Panel,
   Controls,
   Background,
   useNodesState,
   useEdgesState
 } from "reactflow";
-import "reactflow/dist/style.css"
+
+import "reactflow/dist/style.css";
 
 import FlowBuilder from './flowBuilder.js';
 
@@ -33,9 +35,9 @@ const OverviewFlow = () => {
         case 'parsed-data': {
           const results = new FlowBuilder(msg.value);
           results.build(msg.settings)
-          console.log('results: ', results);
-          console.log('results.initialNodes: ', results.initialNodes);
-          console.log('results.initialEdges: ', results.initialEdges);
+          // console.log('results: ', results);
+          // console.log('results.initialNodes: ', results.initialNodes);
+          // console.log('results.initialEdges: ', results.initialEdges);
           setNodes(results.initialNodes);
           setEdges(results.initialEdges);
           break;
@@ -58,22 +60,31 @@ const OverviewFlow = () => {
       <MiniMap
         nodeStrokeColor={(n) => {
           if (n.style?.background) return n.style.background;
-          if (n.type === "input") return "#0041d0";
-          if (n.type === "output") return "#ff0072";
+          if (n.data.label.props.className.includes('orange')) return "#fdba74";
+          if (n.data.label.props.className.includes('blue')) return "#93C5FD";
           if (n.type === "default") return "#1a192b";
 
           return "#eee";
         }}
         nodeColor={(n) => {
           if (n.style?.background) return n.style.background;
-
           return "#fff";
         }}
         nodeBorderRadius={2}
       />
+      <Panel position="top-left">
+        <div className="border-1 border-gray-500">
+          <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
+            <p className="pl-2 pr-2 py-2">Client: <span className="border-1 border-gray-500 bg-orange-300 text-transparent rounded-full">00</span></p>
+          </div>
+          <div className="flex justify-end place-items-end shadow-lg bg-slate-50 w-20 h-15">
+            <p className="pl-2 pr-2 pb-2">Server: <span className="bg-blue-300 text-transparent  rounded-full">00</span></p>
+          </div>
+        </div>
+      </Panel >
       <Controls />
       <Background color="#aaa" gap={16} />
-    </ReactFlow>
+    </ReactFlow >
   );
 };
 

src/webview/Flow.jsx

@@ -1,49 +1,48 @@
 import React from 'react';
 // will create a build func and then call the helper funcs to return an object
 // make a new instance of this class in flow, call the build method, and pass this as state
+
 class FlowBuilder {
   constructor(data) {
     this.parsedData = [data];
     this.id = 0;
+    this.x = 0;
+    this.y = 0;
     this.initialNodes = [];
     this.viewData;
     this.edgeId = 0;
     this.initialEdges = [];
   }
 
-  buildNodesArray(parsedData) {
+  buildNodesArray(parsedData, x = this.x, y = this.y) {
     if (!parsedData) return;
 
     parsedData.forEach((item) => {
       const node = {
         id: (++this.id).toString(),
         data: {
           label: (
-            <div key={this.id}>
-              <ul>
-                <li>{item.fileName}</li>
-                <li>Client Component: {item.isClientComponent.toString()}</li>
-              </ul>
+            <div className={`-mx-2.5 -my-2.5 py-2 px-9 shadow-lg rounded-md border-2 border-gray-500 ${(item.isClientComponent) ? 'bg-orange-300' : 'bg-blue-300'}`}>
+              <div className="flex justify-center place-items-center" key={this.id}>
+                <div className="text-sm font-medium">{item.fileName}</div>
+              </div>
             </div>
           )
         },
-        type: item.depth === 0 ? 'input' : '',
-        position: { x: 0, y: 0 },
+        // type: item.depth === 0 ? 'input' : '',
+        // type: item.isClientComponent ? 'input' : 'output',
+        type: 'default',
+        position: { x: x += 40, y: y += 30 },
         style: {
-          backgroundColor: "var(--vscode-dropdown-background)",
-          borderRadius: "15px",
-          width: '265px',
-          boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)',
           border: 'none',
-          padding: '10px 10px 3px 10px'
-        },
+          borderRadius: "6px"
+        }
       };
       this.initialNodes.push(node);
       if (item.children) {
-        this.buildNodesArray(item.children);
+        this.buildNodesArray(item.children, this.x += 40, this.y += 30);
       }
     });
-    // console.log('initialNodes', this.initialNodes);
   };
 
   buildEdgesArray(parsedData, parentID) {
@@ -65,7 +64,6 @@ class FlowBuilder {
         this.buildEdgesArray(item.children, nodeID);
       }
     });
-    // console.log('initialEdges', this.initialEdges);
   }
 
   build(settings) {
@@ -98,7 +96,7 @@ class FlowBuilder {
       });
     }
     traverse(treeParsed);
-    // Update the vewData state
+    // Update the viewData state
     this.viewData = ([treeParsed]);
     console.log('viewData:', this.viewData);
     this.buildNodesArray(this.viewData);

src/webview/flowBuilder.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { createRoot } from "react-dom/client";
+import './style.css';
 
 import App from "./App.jsx";
 

src/webview/index.jsx

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body,
 #root,

src/webview/style.css

@@ -0,0 +1,11 @@
+module.exports = {
+    content: ['./build/bundle.js'],
+    theme: {
+        extend: {},
+    },
+    variants: {
+        extend: {},
+    },
+    plugins: [],
+    important: true,
+}

tailwind.config.js

@@ -1,8 +1,7 @@
 const path = require('path')
 
-
 module.exports = {
-entry: './src/webview/index.jsx',
+  entry: './src/webview/index.jsx',
   output: {
     filename: 'bundle.js',
     path: path.resolve(__dirname, './build'),
@@ -12,20 +11,20 @@ entry: './src/webview/index.jsx',
   },
   module: {
     rules: [
-        {
-            test: /\.jsx?/,
-            exclude: /node_modules/,
-            use: {
-              loader: "babel-loader",
-              options: {
-                presets: ['@babel/preset-env', '@babel/preset-react']
-              }
-            }
-          },
-          {
-            test: /\.(scss|css)$/,
-            use: ["style-loader", "css-loader"],
-          },
+      {
+        test: /\.jsx?/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {
+            presets: ['@babel/preset-env', '@babel/preset-react']
+          }
+        }
+      },
+      {
+        test: /\.(css|scss)$/,
+        use: ["style-loader", "css-loader", "postcss-loader"],
+      },
     ]
   },
   mode: "development"