Co-authored-by: ChristinaRaether <ChristinaRaether@users.noreply.github.com>

Author: ash-t-luu

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,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import ReactFlow, {
   addEdge,
   MiniMap,
@@ -7,7 +7,8 @@ import ReactFlow, {
   useNodesState,
   useEdgesState
 } from "reactflow";
-import "reactflow/dist/style.css"
+
+import "reactflow/dist/style.css";
 
 import FlowBuilder from './flowBuilder.js';
 
@@ -33,9 +34,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;

src/webview/Flow.jsx

@@ -1,6 +1,11 @@
 import React from 'react';
+// import CustomNode from '../styles/CustomNode';
 // 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
+// const nodeTypes = {
+//   custom: CustomNode,
+// };
+
 class FlowBuilder {
   constructor(data) {
     this.parsedData = [data];
@@ -19,31 +24,26 @@ class FlowBuilder {
         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-base font-medium">{item.fileName}</div>
+              </div>
             </div>
           )
         },
-        type: item.depth === 0 ? 'input' : '',
+        // type: item.depth === 0 ? 'input' : '',
+        type: 'default',
         position: { x: 0, y: 0 },
         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);
       }
     });
-    // console.log('initialNodes', this.initialNodes);
   };
 
   buildEdgesArray(parsedData, parentID) {
@@ -65,7 +65,6 @@ class FlowBuilder {
         this.buildEdgesArray(item.children, nodeID);
       }
     });
-    // console.log('initialEdges', this.initialEdges);
   }
 
   build(settings) {

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"