@canmingir/link 1.2.4 → 1.2.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.4",
+  "version": "1.2.6",
   "type": "module",
   "exports": {
     ".": "./index.js",

package/src/context/reducer.js

@@ -1,13 +1,10 @@
-import config from "../config/config";
 import { jwtDecode } from "jwt-decode";
 import { storage } from "@nucleoidjs/webstorage";
 
-const { name } = config();
-
 let login = true;
 const itemId = storage.get("itemId");
 try {
-  const token = storage.get(name, "accessToken");
+  const token = storage.get("link", "accessToken");
   const decodedToken = jwtDecode(token);
 
   if (decodedToken.exp * 1000 < Date.now()) {

package/src/http/index.js

@@ -15,8 +15,8 @@ const instance = axios.create({
 });
 
 instance.interceptors.request.use((request) => {
-  const { name, base } = config();
-  const accessToken = storage.get(name, "accessToken");
+  const { base } = config();
+  const accessToken = storage.get("link", "accessToken");
 
   if (!accessToken) {
     window.location.href = base === "/" ? "/login" : `${base}/login`;
@@ -85,14 +85,17 @@ export const fetcher = (url) => instance.get(url).then((res) => res.data);
 
 const refreshAuthLogic = async (failedRequest) => {
   try {
-    const { name, appId } = config();
+    const { appId } = config();
 
     const projectId = storage.get("projectId");
 
+    const identityProvider = storage.get("link", "identityProvider");
+
     const { data } = await oauth.post("/oauth", {
-      refreshToken: storage.get(name, "refreshToken"),
+      refreshToken: storage.get("link", "refreshToken"),
       appId,
       projectId,
+      identityProvider,
     });
 
     const accessToken = data.accessToken;
@@ -100,13 +103,13 @@ const refreshAuthLogic = async (failedRequest) => {
     failedRequest.response.config.headers["Authorization"] =
       "Bearer " + accessToken;
 
-    storage.set(name, "accessToken", accessToken);
+    storage.set("link", "accessToken", accessToken);
     return Promise.resolve();
   } catch (error) {
     const { name, base } = config();
 
-    storage.remove(name, "accessToken");
-    storage.remove(name, "refreshToken");
+    storage.remove("link", "accessToken");
+    storage.remove("link", "refreshToken");
 
     window.location.href = `${window.location.origin}${base}/login`;
     return Promise.reject(error);
@@ -122,7 +125,7 @@ refreshInterceptor(instance, refreshAuthLogic, {
   statusCodes: [401, 403],
   shouldRefresh: () => {
     const { name, base } = config();
-    const token = storage.get(name, "accessToken");
+    const token = storage.get("link", "accessToken");
 
     if (!token) {
       window.location.href = `${window.location.origin}${base}/login`;

package/src/http/user.js

@@ -1,6 +1,8 @@
 import axios from "axios";
 import config from "../config/config.js";
 import http from "./index";
+import { jwtDecode } from "jwt-decode";
+import oauth from "./oauth";
 import { storage } from "@nucleoidjs/webstorage";
 
 const instance = axios.create({
@@ -11,15 +13,8 @@ const instance = axios.create({
   },
 });
 
-function getProjectName() {
-  const { name } = config();
-  if (name) {
-    return name;
-  }
-}
-
 instance.interceptors.request.use(async (request) => {
-  const refreshToken = await storage.get(getProjectName(), "refreshToken");
+  const refreshToken = await storage.get("link", "refreshToken");
   if (refreshToken) {
     request.headers["Authorization"] = `Bearer ${refreshToken}`;
   }
@@ -28,25 +23,62 @@ instance.interceptors.request.use(async (request) => {
 
 instance.getUserDetails = async () => {
   try {
-    const refreshToken = await storage.get(getProjectName(), "refreshToken");
+    const refreshToken = await storage.get("link", "refreshToken");
+
     if (!refreshToken) {
       console.log("No refresh token found");
       return null;
     }
 
+    let accessToken = await storage.get("link", "accessToken");
+
+    if (!accessToken) {
+      console.log("No access token found");
+      return null;
+    }
+
+    try {
+      const decodedToken = jwtDecode(accessToken);
+      const isExpired = decodedToken.exp * 1000 < Date.now();
+
+      if (isExpired) {
+        console.log(
+          "Access token expired, refreshing before fetching user details..."
+        );
+        const { appId } = config();
+        const projectId = storage.get("projectId");
+        const identityProvider = storage.get("link", "identityProvider");
+
+        const { data } = await oauth.post("/oauth", {
+          refreshToken,
+          appId,
+          projectId,
+          identityProvider,
+        });
+
+        accessToken = data.accessToken;
+        storage.set("link", "accessToken", accessToken);
+        console.log(
+          "Access token refreshed successfully, now fetching user details"
+        );
+      }
+    } catch (error) {
+      console.error("Error checking or refreshing token:", error);
+      return null;
+    }
+
     const response = await http.get("/oauth/user", {
       headers: {
-        'X-Refresh-Token': refreshToken
-      }
+        "X-Refresh-Token": refreshToken,
+      },
     });
-    
+
     if (response.data && response.data.user) {
       return response.data.user;
     }
-    
+
     console.log("No user data received from server");
     return null;
-    
   } catch (error) {
     console.error("Error fetching user details from server:", error);
     return null;
@@ -55,7 +87,7 @@ instance.getUserDetails = async () => {
 
 instance.getPermittedUsers = async () => {
   const userIds = [];
-  const refreshToken = await storage.get(getProjectName(), "refreshToken");
+  const refreshToken = await storage.get("link", "refreshToken");
   const response = await http.get("/permissions");
 
   response.data.forEach((permission) => {
@@ -75,4 +107,4 @@ instance.getPermittedUsers = async () => {
   return users;
 };
 
-export default instance;
+export default instance;

package/src/layouts/DashboardLayout/nav-mini.jsx

@@ -9,15 +9,16 @@ import SettingsDialog from "../../widgets/SettingsDialog";
 import Stack from "@mui/material/Stack";
 import config from "../../config/config";
 import { hideScroll } from "../../theme/css";
+import { useResponsive } from "../../hooks/use-responsive";
 import { useUser } from "../../hooks/use-user";
 
 import React, { useState } from "react";
 
 export default function NavMini({ only }) {
   const { user } = useUser();
-  const { sideMenu } = config().menu;
+  const { sideMenu, actionButtons } = config().menu;
   const [openSettings, setOpenSettings] = useState(false);
-
+  const lgUp = useResponsive("up", "lg");
   const handleCloseSettings = () => {
     setOpenSettings(false);
   };
@@ -57,21 +58,40 @@ export default function NavMini({ only }) {
           }}
         />
         <Box sx={{ flexGrow: 1 }} />
-        <Button
-          data-cy="end-item"
-          fullWidth={true}
-          onClick={() => setOpenSettings(true)}
+        <Stack
+          direction={"column"}
+          alignItems={"center"}
+          justifyItems={"center"}
+          sx={{
+            marginBottom: lgUp ? 3 : 0,
+            position: lgUp ? "static" : "fixed",
+            bottom: lgUp ? "auto" : 66,
+            width: "100%",
+          }}
+          gap={2}
         >
-          <Iconify
-            icon={"ic:baseline-settings"}
+          {actionButtons &&
+            actionButtons.map((Action, index) => (
+              <Box key={index} component={Action}></Box>
+            ))}
+          <Button
+            onClick={() => setOpenSettings(true)}
             sx={{
-              width: 32,
-              height: 32,
-              color: "text.secondary",
-              mx: "auto",
+              position: lgUp ? "static" : "fixed",
+              bottom: lgUp ? "auto" : 16,
+              width: "100%",
             }}
-          />
-        </Button>
+          >
+            <Iconify
+              icon={"ic:baseline-settings"}
+              sx={{
+                width: 32,
+                height: 32,
+                color: "text.secondary",
+              }}
+            />
+          </Button>
+        </Stack>
         <SettingsDialog open={openSettings} handleClose={handleCloseSettings} />
       </Stack>
     </Box>

package/src/layouts/FullScreenLayout/nav-horizontal.jsx

@@ -16,7 +16,7 @@ function NavHorizontal() {
 
   const { user } = useUser();
 
-  const { sideMenu } = config().menu;
+  const { sideMenu, actionButtons } = config().menu;
   return (
     <AppBar component="div" data-cy="nav-horizontal">
       <Toolbar
@@ -35,6 +35,11 @@ function NavHorizontal() {
             ...theme.mixins.toolbar,
           }}
         />
+
+        {actionButtons &&
+          actionButtons.map((Action, index) => (
+            <Box key={index} component={Action}></Box>
+          ))}
       </Toolbar>
 
       <HeaderShadow />

package/src/layouts/common/ProjectBar/index.jsx

@@ -1,10 +1,3 @@
-import { Button, DialogActions } from "@mui/material";
-import Dialog, { dialogClasses } from "@mui/material/Dialog";
-import React, { useCallback, useState } from "react";
-import { publish, useEvent } from "@nucleoidai/react-event";
-import { storage, useStorage } from "@nucleoidjs/webstorage";
-import { useMediaQuery, useTheme } from "@mui/material";
-
 import Box from "@mui/material/Box";
 import IconButton from "@mui/material/IconButton";
 import Iconify from "../../../components/Iconify";
@@ -29,9 +22,16 @@ import { useEventListener } from "../../../hooks/use-event-listener";
 import { useNavigate } from "react-router-dom";
 import useProjects from "../../../hooks/useProjects";
 
+import { Button, DialogActions } from "@mui/material";
+import Dialog, { dialogClasses } from "@mui/material/Dialog";
+import React, { useCallback, useState } from "react";
+import { publish, useEvent } from "@nucleoidai/react-event";
+import { storage, useStorage } from "@nucleoidjs/webstorage";
+import { useMediaQuery, useTheme } from "@mui/material";
+
 function ProjectBar() {
   const label = config().template?.projectBar?.label;
-  const { appId, name } = config();
+  const { appId } = config();
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down(435));
   const { loading, projects, getProjects } = useProjects();
@@ -91,15 +91,15 @@ function ProjectBar() {
   const handleSelect = (project) => {
     const { id: projectId } = project;
 
-    const refreshToken = storage.get(name, "refreshToken");
-    const provider = storage.get(name, "provider");
+    const refreshToken = storage.get("link", "refreshToken");
+    const identityProvider = storage.get("link", "identityProvider");
 
     oauth
-      .post("/oauth", { appId, refreshToken, projectId, provider })
+      .post("/oauth", { appId, refreshToken, projectId, identityProvider })
       .then(({ data }) => {
         const { refreshToken, accessToken } = data;
-        storage.set(name, "accessToken", accessToken);
-        storage.set(name, "refreshToken", refreshToken);
+        storage.set("link", "accessToken", accessToken);
+        storage.set("link", "refreshToken", refreshToken);
         storage.set("projectId", projectId);
       })
       .finally(() => {

package/src/layouts/common/account-popover.jsx

@@ -19,7 +19,6 @@ import CustomPopover, { usePopover } from "../../components/custom-popover";
 // ----------------------------------------------------------------------
 
 export default function AccountPopover() {
-  const { name } = config();
   const { options } = config().menu;
   const router = useRouter();
   const { user } = useUser();
@@ -28,8 +27,8 @@ export default function AccountPopover() {
 
   const handleLogout = async () => {
     try {
-      storage.remove(name, "accessToken");
-      storage.remove(name, "refreshToken");
+      storage.remove("link", "accessToken");
+      storage.remove("link", "refreshToken");
       popover.onClose();
       router.replace("/login");
     } catch (error) {

package/src/lib/Flow/DraggableNode.jsx

@@ -0,0 +1,62 @@
+import { Box } from "@mui/material";
+
+import React, { useRef, useState } from "react";
+
+const DraggableNode = ({ children, registerRef, onDrag }) => {
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const localRef = useRef(null);
+
+  const setRef = (el) => {
+    localRef.current = el;
+    if (registerRef) registerRef(el);
+  };
+
+  const handleMouseDown = (e) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+    const startOffset = { ...offset };
+
+    const onMove = (ev) => {
+      const dx = ev.clientX - startX;
+      const dy = ev.clientY - startY;
+      setOffset({
+        x: startOffset.x + dx,
+        y: startOffset.y + dy,
+      });
+      if (onDrag) onDrag();
+    };
+
+    const onUp = () => {
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  return (
+    <Box
+      ref={setRef}
+      onMouseDown={handleMouseDown}
+      sx={{
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "center",
+        position: "relative",
+        transform: `translate(${offset.x}px, ${offset.y}px)`,
+        cursor: "grab",
+        "&:active": {
+          cursor: "grabbing",
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default DraggableNode;

package/src/lib/Flow/DynamicConnector.jsx

@@ -0,0 +1,172 @@
+import React, { useLayoutEffect, useState } from "react";
+
+const DynamicConnector = ({
+  containerEl,
+  parentEl,
+  childEls,
+  stroke,
+  strokeWidth,
+  lineStyle,
+  connectorType = "default",
+  tick = 0,
+}) => {
+  const [dims, setDims] = useState(null);
+  const [points, setPoints] = useState({
+    parent: null,
+    children: [],
+    yMid: null,
+  });
+
+  useLayoutEffect(() => {
+    if (!containerEl || !parentEl || !childEls?.length) return;
+
+    const update = () => {
+      const cRect = containerEl.getBoundingClientRect();
+      const pRect = parentEl.getBoundingClientRect();
+
+      const parent = {
+        x: pRect.left + pRect.width / 2 - cRect.left,
+        y: pRect.bottom - cRect.top,
+      };
+
+      const children = childEls.map((el) => {
+        const r = el.getBoundingClientRect();
+        return {
+          x: r.left + r.width / 2 - cRect.left,
+          y: r.top - cRect.top,
+        };
+      });
+
+      const firstTop = Math.min(...children.map((c) => c.y));
+      const yMid =
+        parent.y + Math.max(12, Math.min(24, (firstTop - parent.y) * 0.4));
+
+      setPoints({ parent, children, yMid });
+      setDims({ w: cRect.width, h: cRect.height });
+    };
+
+    const ro = new ResizeObserver(update);
+    ro.observe(containerEl);
+    ro.observe(parentEl);
+    childEls.forEach((el) => el && ro.observe(el));
+
+    update();
+    return () => ro.disconnect();
+  }, [containerEl, parentEl, childEls, tick]);
+
+  if (!dims || !points.parent || !points.children.length) return null;
+
+  const dash =
+    lineStyle === "dashed"
+      ? `${strokeWidth * 3},${strokeWidth * 2}`
+      : lineStyle === "dotted"
+      ? `${strokeWidth},${strokeWidth * 1.5}`
+      : undefined;
+
+  const onlyOne = points.children.length === 1;
+
+  if (connectorType === "curved" || connectorType === "n8n") {
+    const createN8nPath = (from, to) => {
+      const v = Math.max(32, Math.abs(to.y - from.y) * 0.35);
+      const h = Math.max(24, Math.abs(to.x - from.x) * 0.35);
+
+      const c1 = {
+        x: to.x > from.x ? from.x + h : from.x - h,
+        y: from.y + v,
+      };
+      const c2 = {
+        x: to.x > from.x ? to.x - h : to.x + h,
+        y: to.y - v,
+      };
+
+      return `M ${from.x} ${from.y} C ${c1.x} ${c1.y} ${c2.x} ${c2.y} ${to.x} ${to.y}`;
+    };
+
+    return (
+      <svg
+        style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${dims.w} ${dims.h}`}
+      >
+        {points.children.map((child, i) => (
+          <path
+            key={i}
+            d={createN8nPath(points.parent, child)}
+            fill="none"
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeDasharray={dash}
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        ))}
+      </svg>
+    );
+  }
+
+  return (
+    <svg
+      style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
+      width="100%"
+      height="100%"
+      viewBox={`0 0 ${dims.w} ${dims.h}`}
+    >
+      {onlyOne ? (
+        <line
+          x1={points.parent.x}
+          y1={points.parent.y}
+          x2={points.children[0].x}
+          y2={points.children[0].y}
+          stroke={stroke}
+          strokeWidth={strokeWidth}
+          strokeDasharray={dash}
+        />
+      ) : (
+        <>
+          <line
+            x1={points.parent.x}
+            y1={points.parent.y}
+            x2={points.parent.x}
+            y2={points.yMid}
+            stroke={stroke}
+            strokeWidth={strokeWidth}
+            strokeDasharray={dash}
+          />
+
+          {(() => {
+            const xs = points.children.map((c) => c.x);
+            const xMin = Math.min(...xs);
+            const xMax = Math.max(...xs);
+            return (
+              <line
+                x1={xMin}
+                y1={points.yMid}
+                x2={xMax}
+                y2={points.yMid}
+                stroke={stroke}
+                strokeWidth={strokeWidth}
+                strokeDasharray={dash}
+              />
+            );
+          })()}
+
+          {points.children.map((c, i) => (
+            <line
+              key={i}
+              x1={c.x}
+              y1={points.yMid}
+              x2={c.x}
+              y2={c.y}
+              stroke={stroke}
+              strokeWidth={strokeWidth}
+              strokeDasharray={dash}
+            />
+          ))}
+        </>
+      )}
+    </svg>
+  );
+};
+
+export default DynamicConnector;

package/src/lib/Flow/Flow.jsx

@@ -0,0 +1,34 @@
+import FlowNode from "./FlowNode";
+
+import React, { useMemo } from "react";
+import { assertLinkedGraph, buildTreeFromLinked } from "./flowUtils";
+
+export const Flow = ({ data, variant = "simple", style, plugin }) => {
+  const { nodesById, roots } = useMemo(() => assertLinkedGraph(data), [data]);
+
+  const treeData = useMemo(() => {
+    if (!roots?.length)
+      return { id: "__empty__", label: "(empty)", children: [] };
+
+    if (roots.length === 1) {
+      return (
+        buildTreeFromLinked(roots[0], nodesById) || {
+          id: roots[0],
+          children: [],
+        }
+      );
+    }
+
+    const children = roots
+      .map((r) => buildTreeFromLinked(r, nodesById))
+      .filter(Boolean);
+
+    return { id: "__root__", label: "Root", children };
+  }, [nodesById, roots]);
+
+  return (
+    <FlowNode node={treeData} variant={variant} style={style} plugin={plugin} />
+  );
+};
+
+export default Flow;