React flow

.gitignore

@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.vscode

README.md

@@ -23,3 +23,8 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
+
+
+Illustration 
+
+https://undraw.co/illustrations

package.json

@@ -4,11 +4,11 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.7.0",
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/sortable": "^7.0.2",
+    "@dagrejs/dagre": "^1.0.4",
     "@headlessui/react": "^1.6.6",
-    "@heroicons/react": "^1.0.6",
-    "@primer/react": "^35.31.0",
+    "@heroicons/react": "^2.0.18",
+    "@material-tailwind/html": "^2.1.2",
+    "@material-tailwind/react": "^2.1.8",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
@@ -18,12 +18,14 @@
     "@types/react-dom": "^18.0.10",
     "@vercel/analytics": "^0.1.8",
     "antd": "^5.1.7",
+    "dagre": "latest",
     "immer": "^10.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-lazily": "^0.9.1",
     "react-router-dom": "^6.8.1",
     "react-scripts": "^5.0.1",
+    "reactflow": "^11.10.1",
     "typescript": "^4.9.5",
     "uuid": "^9.0.0",
     "web-vitals": "^2.1.4",
@@ -36,6 +38,7 @@
     "eject": "react-scripts eject"
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.7",
     "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^9.0.1",
     "@typescript-eslint/eslint-plugin": "^5.30.6",
@@ -50,9 +53,10 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-storybook": "^0.6.1",
     "postcss": "^8.4.14",
+    "preline": "^2.0.0",
     "prettier": "^2.7.1",
     "prop-types": "^15.8.1",
-    "tailwindcss": "^3.1.6",
+    "tailwindcss": "^3.4.0",
     "webpack": "^5.74.0"
   },
   "browserslist": {
@@ -67,5 +71,5 @@
       "last 1 safari version"
     ]
   },
-  "proxy": "http://127.0.0.1:10000/"
+  "proxy": "http://127.0.0.1:8080/"
 }

prettier.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+    tailwindConfig: "./tailwind.config.js",
+  };

public/index.html

@@ -15,6 +15,8 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+
+    <!-- <script src="./node_modules/preline/dist/preline.js"></script> -->
     <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/App.tsx

@@ -1,59 +1,61 @@
+import { ThemeProvider } from "@material-tailwind/react";
+import { Spinner } from "components/spinner";
+import { Suspense, useEffect } from "react";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
-import { Suspense } from "react";
-import { ConfigProvider, Skeleton } from "antd";
 import { ROUTES } from "./utils/route";
 
 function App() {
+  useEffect(() => {
+    import("preline");
+  }, []);
+
   return (
-    <ConfigProvider>
-      <BrowserRouter>
-        <main className="flex w-full">
-          <Suspense fallback={<Skeleton active={true} />}>
-            <Routes>
-              {ROUTES.map((route) => {
-                const Component = route.component();
-                return (
-                  <Route
-                    path={route.path}
-                    key={route.key}
-                    element={<Component />}
-                  >
-                    {route.nestedRoute
-                      ? route.nestedRoute.map((subRoute: any) => {
-                          const Element = subRoute.component();
-                          return (
-                            <Route
-                              path={subRoute.path}
-                              key={subRoute.path}
-                              element={<Element />}
-                            >
-                              {subRoute?.nestedRoute
-                                ? subRoute.nestedRoute.map(
-                                    (grandChildRoute: any) => {
-                                      const Element =
-                                        grandChildRoute.component();
-                                      return (
-                                        <Route
-                                          path={grandChildRoute.path}
-                                          key={grandChildRoute.path}
-                                          element={<Element />}
-                                        />
-                                      );
-                                    }
-                                  )
-                                : null}
-                            </Route>
-                          );
-                        })
-                      : null}
-                  </Route>
-                );
-              })}
-            </Routes>
-          </Suspense>
-        </main>
-      </BrowserRouter>
-    </ConfigProvider>
+    <BrowserRouter>
+      <ThemeProvider>
+        <Suspense fallback={<Spinner />}>
+          <Routes>
+            {ROUTES.map((route) => {
+              const Component = route.component();
+              return (
+                <Route
+                  path={route.path}
+                  key={route.key}
+                  element={<Component />}
+                >
+                  {route.nestedRoute
+                    ? route.nestedRoute.map((subRoute: any) => {
+                        const Element = subRoute.component();
+                        return (
+                          <Route
+                            path={subRoute.path}
+                            key={subRoute.path}
+                            element={<Element />}
+                          >
+                            {subRoute?.nestedRoute
+                              ? subRoute.nestedRoute.map(
+                                  (grandChildRoute: any) => {
+                                    const Element = grandChildRoute.component();
+                                    return (
+                                      <Route
+                                        path={grandChildRoute.path}
+                                        key={grandChildRoute.path}
+                                        element={<Element />}
+                                      />
+                                    );
+                                  }
+                                )
+                              : null}
+                          </Route>
+                        );
+                      })
+                    : null}
+                </Route>
+              );
+            })}
+          </Routes>
+        </Suspense>
+      </ThemeProvider>
+    </BrowserRouter>
   );
 }
 

src/assert/svg/index.ts

@@ -0,0 +1 @@
+export { ReactComponent as NotFound } from "./NotFound.svg";

src/components/application_card/index.tsx

@@ -1,7 +1,7 @@
 import { Card } from "antd";
+import { Application } from "pages/home";
 import { useNavigate } from "react-router-dom";
 import "./style.css";
-import { Application } from "pages/home";
 
 interface ApplicationCardProps {
   appDetails: Application;

src/components/flow/components/index.tsx

@@ -0,0 +1,3 @@
+import { New } from "./new";
+
+export { New };

src/components/flow/components/new.tsx

@@ -0,0 +1,76 @@
+import { Listbox, Transition } from "@headlessui/react";
+import {
+  ArrowPathRoundedSquareIcon,
+  CodeBracketSquareIcon,
+  HashtagIcon,
+  PlusIcon
+} from "@heroicons/react/24/outline";
+import { Fragment, useState } from "react";
+
+export const New: React.FC<any> = () => {
+  let options = [
+    {
+      key: "loop",
+      label: "Loop",
+      icon: <ArrowPathRoundedSquareIcon className="h-5 w-5 text-gray-400" />
+    },
+    {
+      key: "ifcondition",
+      label: "If Condidion",
+      icon: <HashtagIcon className="h-5 w-5 text-gray-400" />
+    },
+    {
+      key: "block",
+      label: "Block",
+      icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
+    },
+    {
+      key: "action_group",
+      label: "Action group",
+      icon: <CodeBracketSquareIcon className="h-5 w-5 text-gray-400" />
+    }
+  ];
+  const [open, setOpen] = useState(false);
+  return (
+    <Listbox>
+      <Listbox.Button
+        className="relative rounded-full p-1 text-blue-600 shadow-sm hover:shadow-md bg-white font-bold"
+        onMouseOver={() => setOpen(true)}
+        onMouseOut={() => setOpen(false)}
+      >
+        <PlusIcon width="20" height="20" className="self-center px-auto" />
+      </Listbox.Button>
+
+      <Transition
+        show={open}
+        as={Fragment}
+        leave="transition ease-in duration-100"
+        leaveFrom="opacity-100"
+        leaveTo="opacity-0"
+      >
+        <Listbox.Options
+          onMouseOver={() => setOpen(true)}
+          onMouseOut={() => setOpen(false)}
+          className={
+            "absolute z-50 mt-1 max-h-56 w-40 -left-16 overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+          }
+        >
+          {options.map((item) => (
+            <Listbox.Option
+              key={item["key"]}
+              className={
+                "text-gray-900 relative cursor-pointer select-none py-2 pl-3 pr-9 hover:bg-indigo-600 hover:text-white"
+              }
+              value={item}
+            >
+              <div className="flex items-center">
+                {item["icon"]}
+                <span className="ml-3 block truncate">{item["label"]}</span>
+              </div>
+            </Listbox.Option>
+          ))}
+        </Listbox.Options>
+      </Transition>
+    </Listbox>
+  );
+};