@canmingir/link 1.2.10 → 1.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canmingir/link",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "type": "module",
   "exports": {
     ".": "./index.js",
@@ -21,6 +21,7 @@
     "cypress": "cypress open --browser chrome"
   },
   "dependencies": {
+    "@aws-sdk/client-cognito-identity-provider": "^3.968.0",
     "@chatscope/chat-ui-kit-react": "^1.10.1",
     "@emoji-mart/data": "^1.1.2",
     "@emoji-mart/react": "^1.1.1",
@@ -101,7 +102,7 @@
     "playwright": "^1.55.1",
     "prettier": "^2.8.8",
     "storybook": "^9.1.8",
-    "vite": "^7.1.8",
+    "vite": "^7.3.1",
     "vite-plugin-checker": "^0.9.0",
     "vite-plugin-svgr": "^4.2.0",
     "vitest": "^3.2.4"

package/src/config/schemas.js

@@ -10,6 +10,12 @@ export const ConfigSchema = Joi.object({
     host: Joi.string().uri().required(),
     path: Joi.string().required(),
   }).optional(),
+  credentials: Joi.object({
+    provider: Joi.string().valid("DEMO", "COGNITO").required(),
+    region: Joi.string().optional(),
+    userPoolId: Joi.string().optional(),
+    clientId: Joi.string().optional(),
+  }).optional(),
   project: Joi.object({
     nucleoid: Joi.object().optional(),
     github: Joi.object({

package/src/http/index.js

@@ -86,27 +86,38 @@ export const fetcher = (url) => instance.get(url).then((res) => res.data);
 const refreshAuthLogic = async (failedRequest) => {
   try {
     const { appId } = config();
-
     const projectId = storage.get("projectId");
-
     const identityProvider = storage.get("link", "identityProvider");
 
-    const { data } = await oauth.post("/oauth", {
-      refreshToken: storage.get("link", "refreshToken"),
-      appId,
-      projectId,
-      identityProvider,
-    });
+    const isDemo = identityProvider?.toUpperCase() === "DEMO";
+
+    const { data } = isDemo
+      ? await oauth.post("/oauth/demo", {
+          appId,
+          projectId,
+          username: "admin",
+          password: "admin",
+        })
+      : await oauth.post("/oauth", {
+          refreshToken: storage.get("link", "refreshToken"),
+          appId,
+          projectId,
+          identityProvider,
+        });
 
-    const accessToken = data.accessToken;
+    const { accessToken, refreshToken } = data;
 
     failedRequest.response.config.headers["Authorization"] =
       "Bearer " + accessToken;
 
     storage.set("link", "accessToken", accessToken);
+    if (refreshToken) {
+      storage.set("link", "refreshToken", refreshToken);
+    }
+
     return Promise.resolve();
   } catch (error) {
-    const { name, base } = config();
+    const { base } = config();
 
     storage.remove("link", "accessToken");
     storage.remove("link", "refreshToken");

package/src/layouts/auth/modern.jsx

@@ -4,6 +4,7 @@ import Logo from "../../components/logo";
 import { Outlet } from "react-router";
 import React from "react";
 import Stack from "@mui/material/Stack";
+import { alpha } from "@mui/material/styles";
 import { useResponsive } from "../../hooks/use-responsive";
 
 // ----------------------------------------------------------------------
@@ -16,28 +17,37 @@ export default function AuthModernLayout({ image }) {
       sx={{
         width: 1,
         mx: "auto",
-        maxWidth: 480,
-        px: { xs: 2, md: 8 },
+        maxWidth: 600,
+        px: { xs: 3, md: 10 },
+        py: { xs: 4, md: 0 },
         height: "100vh",
         justifyContent: "center",
         alignItems: "center",
       }}
     >
       <Logo
-        maxSize={200}
+        maxSize={140}
         sx={{
-          mt: { xs: 2, md: 8 },
-          mb: { xs: 10, md: 8 },
+          mb: { xs: 1, md: 2 },
         }}
       />
 
       <Card
         sx={{
-          py: { xs: 5, md: 0 },
-          px: { xs: 3, md: 0 },
-          boxShadow: { md: "none" },
+          width: 1,
+          py: { xs: 6, md: 8 },
+          px: { xs: 4, md: 6 },
+          boxShadow: {
+            xs: (theme) =>
+              `0 0 2px ${alpha(
+                theme.palette.grey[500],
+                0.16
+              )}, 0 12px 24px -4px ${alpha(theme.palette.grey[500], 0.12)}`,
+            md: "none",
+          },
           overflow: { md: "unset" },
-          bgcolor: { md: "background.default" },
+          bgcolor: { md: "transparent" },
+          borderRadius: 2,
         }}
       >
         <Outlet />
@@ -46,7 +56,12 @@ export default function AuthModernLayout({ image }) {
   );
 
   const renderSection = (
-    <Stack flexGrow={1} sx={{ position: "relative" }}>
+    <Stack
+      flexGrow={1}
+      sx={{
+        position: "relative",
+      }}
+    >
       <Box
         component="img"
         alt="auth"
@@ -59,6 +74,7 @@ export default function AuthModernLayout({ image }) {
           position: "absolute",
           width: "calc(60% - 32px)",
           height: "calc(60% - 32px)",
+          borderRadius: 3,
         }}
       />
     </Stack>

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

@@ -94,8 +94,23 @@ function ProjectBar() {
     const refreshToken = storage.get("link", "refreshToken");
     const identityProvider = storage.get("link", "identityProvider");
 
-    oauth
-      .post("/oauth", { appId, refreshToken, projectId, identityProvider })
+    const isDemo = identityProvider?.toUpperCase() === "DEMO";
+
+    const request = isDemo
+      ? oauth.post("/oauth/demo", {
+          appId,
+          projectId,
+          username: "admin",
+          password: "admin",
+        })
+      : oauth.post("/oauth", {
+          appId,
+          refreshToken,
+          projectId,
+          identityProvider,
+        });
+
+    request
       .then(({ data }) => {
         const { refreshToken, accessToken } = data;
         storage.set("link", "accessToken", accessToken);
@@ -104,9 +119,7 @@ function ProjectBar() {
       })
       .finally(() => {
         setSelectedProject(project);
-
         publish("PROJECT_SELECTED", { projectId });
-
         search.onFalse();
         setSearchQuery("");
       });

package/src/lib/Flow/core/Flow.jsx

@@ -0,0 +1,79 @@
+import FlowNode from "./FlowNode";
+import { useGraphOperations } from "../hooks/useGraphOperations";
+
+import React, { useMemo, useState } from "react";
+import { assertLinkedGraph, buildTreeFromLinked } from "../utils/flowUtils";
+
+export const Flow = ({
+  data,
+  variant = "simple",
+  style,
+  plugin,
+  editable = false,
+  onChange,
+}) => {
+  const [floatingNodes, setFloatingNodes] = useState([]);
+
+  const { nodesById, roots } = useMemo(() => assertLinkedGraph(data), [data]);
+
+  const { handleCut, handlePaste, handleConnect } = useGraphOperations({
+    nodesById,
+    roots,
+    onChange,
+    floatingNodes,
+    setFloatingNodes,
+    editable,
+  });
+
+  const allNodesById = useMemo(() => {
+    if (!floatingNodes.length) return nodesById;
+
+    const merged = { ...nodesById };
+
+    for (const structure of floatingNodes) {
+      if (structure?.nodes) {
+        Object.assign(merged, structure.nodes);
+      }
+    }
+
+    return merged;
+  }, [nodesById, floatingNodes]);
+
+  const treeData = useMemo(() => {
+    if (!roots?.length) return null;
+
+    if (roots.length === 1) {
+      return (
+        buildTreeFromLinked(roots[0], nodesById) || {
+          id: roots[0],
+          children: [],
+        }
+      );
+    }
+
+    const children = roots
+      .map((r) => buildTreeFromLinked(r, nodesById))
+      .filter(Boolean);
+
+    return children.length > 0
+      ? { id: "__root__", label: "Start", children }
+      : null;
+  }, [nodesById, roots]);
+
+  return (
+    <FlowNode
+      node={treeData}
+      variant={variant}
+      style={style}
+      plugin={plugin}
+      isRoot={true}
+      nodesById={allNodesById}
+      onPaste={editable ? handlePaste : undefined}
+      onCut={editable ? handleCut : undefined}
+      onConnect={editable ? handleConnect : undefined}
+      floatingNodes={floatingNodes}
+    />
+  );
+};
+
+export default Flow;

package/src/lib/Flow/core/FlowNode.jsx

@@ -0,0 +1,68 @@
+import FlowNodeView from "../nodes/FlowNodeView";
+import FlowViewport from "./FlowViewport";
+import React from "react";
+import { SelectionProvider } from "../selection/SelectionContext";
+import { getBaseStyleForVariant } from "../styles";
+
+const FlowNode = ({
+  isRoot = false,
+  onAddNode,
+  variant,
+  nodesById,
+  onPaste,
+  onCut,
+  onConnect,
+  floatingNodes,
+  style,
+  plugin,
+  node,
+  ...props
+}) => {
+  if (!isRoot) {
+    if (!node) return null;
+    return (
+      <FlowNodeView
+        node={node}
+        onAddNode={onAddNode}
+        variant={variant}
+        style={style}
+        plugin={plugin}
+        onConnect={onConnect}
+        {...props}
+      />
+    );
+  }
+
+  const baseStyle = getBaseStyleForVariant(variant);
+  const selectionColor = baseStyle.selectionColor ?? "#64748b";
+
+  return (
+    <SelectionProvider>
+      <FlowViewport
+        selectionColor={selectionColor}
+        nodesById={nodesById}
+        onPaste={onPaste}
+        onCut={onCut}
+        onConnect={onConnect}
+        floatingNodes={floatingNodes}
+        variant={variant}
+        style={style}
+        plugin={plugin}
+      >
+        {node && (
+          <FlowNodeView
+            node={node}
+            onAddNode={onAddNode}
+            variant={variant}
+            style={style}
+            plugin={plugin}
+            onConnect={onConnect}
+            {...props}
+          />
+        )}
+      </FlowViewport>
+    </SelectionProvider>
+  );
+};
+
+export default FlowNode;

package/src/lib/Flow/core/FlowViewport.jsx

@@ -0,0 +1,259 @@
+import { Box } from "@mui/material";
+import FloatingGraph from "../graph/FloatingGraph";
+import SelectionOverlay from "../selection/SelectionOverlay";
+import { useSelection } from "../selection/SelectionContext";
+
+import React, { useEffect, useRef, useState } from "react";
+
+const FlowViewport = ({
+  children,
+  selectionColor = "#64748b",
+  nodesById,
+  onPaste,
+  onCut,
+  onConnect,
+  floatingNodes = [],
+  variant,
+  style,
+  plugin,
+}) => {
+  const clampZoom = (zoom) => Math.min(2.5, Math.max(0.25, zoom));
+
+  const [offset, setOffset] = useState({ x: 0, y: 0 });
+  const [zoom, setZoom] = useState(1);
+  const [isDragging, setIsDragging] = useState(false);
+  const [selectionBox, setSelectionBox] = useState(null);
+
+  const containerRef = useRef(null);
+  const selectionBoxRef = useRef(null);
+  const mousePositionRef = useRef({ x: 0, y: 0 });
+
+  const {
+    clearSelection,
+    selectMultiple,
+    addToSelection,
+    cutSelectedNodes,
+    pasteNodes,
+    selectedIds,
+  } = useSelection();
+
+  useEffect(() => {
+    const handleMouseMove = (e) => {
+      mousePositionRef.current = { x: e.clientX, y: e.clientY };
+    };
+
+    window.addEventListener("mousemove", handleMouseMove);
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove);
+    };
+  }, []);
+
+  useEffect(() => {
+    const onWheel = (e) => {
+      const wantsZoom = e.ctrlKey || e.metaKey;
+      if (!wantsZoom) return;
+      e.preventDefault();
+      const direction = e.deltaY > 0 ? -1 : 1;
+      const factor = direction > 0 ? 1.1 : 1 / 1.1;
+      setZoom((z) => clampZoom(z * factor));
+    };
+    window.addEventListener("wheel", onWheel, { passive: false });
+    return () => window.removeEventListener("wheel", onWheel);
+  }, []);
+
+  useEffect(() => {
+    const handleKeyDown = (e) => {
+      const isMod = e.ctrlKey || e.metaKey;
+      if (!isMod) return;
+
+      if (e.key === "x" && selectedIds.size > 0 && nodesById) {
+        e.preventDefault();
+        cutSelectedNodes(nodesById, onCut);
+      }
+
+      if (e.key === "v" && onPaste) {
+        e.preventDefault();
+        const containerRect = containerRef.current?.getBoundingClientRect();
+        const mousePos = mousePositionRef.current;
+
+        const canvasX = containerRect
+          ? (mousePos.x -
+              containerRect.left -
+              containerRect.width / 2 -
+              offset.x) /
+            zoom
+          : 0;
+        const canvasY = containerRect
+          ? (mousePos.y -
+              containerRect.top -
+              containerRect.height / 2 -
+              offset.y) /
+            zoom
+          : 0;
+
+        pasteNodes(onPaste, canvasX, canvasY);
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [
+    cutSelectedNodes,
+    pasteNodes,
+    selectedIds,
+    nodesById,
+    onPaste,
+    onCut,
+    offset,
+    zoom,
+  ]);
+
+  const handleViewportMouseDown = (e) => {
+    if (e.target?.closest?.(".MuiCard-root") || e.target?.closest?.("button"))
+      return;
+
+    if (e.button !== 0) return;
+
+    const startX = e.clientX;
+    const startY = e.clientY;
+
+    if (e.shiftKey || e.ctrlKey || e.metaKey) {
+      setSelectionBox({ startX, startY, currentX: startX, currentY: startY });
+      selectionBoxRef.current = {
+        startX,
+        startY,
+        currentX: startX,
+        currentY: startY,
+      };
+
+      const onMove = (ev) => {
+        const newBox = {
+          startX,
+          startY,
+          currentX: ev.clientX,
+          currentY: ev.clientY,
+        };
+        setSelectionBox(newBox);
+        selectionBoxRef.current = newBox;
+      };
+
+      const onUp = () => {
+        if (containerRef.current && selectionBoxRef.current) {
+          const box = selectionBoxRef.current;
+          const nodes = containerRef.current.querySelectorAll("[data-node-id]");
+          const selectedNodeIds = [];
+
+          const boxLeft = Math.min(box.startX, box.currentX);
+          const boxRight = Math.max(box.startX, box.currentX);
+          const boxTop = Math.min(box.startY, box.currentY);
+          const boxBottom = Math.max(box.startY, box.currentY);
+
+          nodes.forEach((node) => {
+            const rect = node.getBoundingClientRect();
+
+            if (
+              rect.left < boxRight &&
+              rect.right > boxLeft &&
+              rect.top < boxBottom &&
+              rect.bottom > boxTop
+            ) {
+              const nodeId = node.getAttribute("data-node-id");
+              if (nodeId) selectedNodeIds.push(nodeId);
+            }
+          });
+
+          if (selectedNodeIds.length > 0) {
+            if (e.shiftKey) {
+              addToSelection(selectedNodeIds);
+            } else {
+              selectMultiple(selectedNodeIds);
+            }
+          }
+        }
+
+        setSelectionBox(null);
+        selectionBoxRef.current = null;
+        window.removeEventListener("mousemove", onMove);
+        window.removeEventListener("mouseup", onUp);
+      };
+
+      window.addEventListener("mousemove", onMove);
+      window.addEventListener("mouseup", onUp);
+      return;
+    }
+
+    clearSelection();
+
+    setIsDragging(true);
+    const startOffset = { ...offset };
+
+    const onMove = (ev) => {
+      setOffset({
+        x: startOffset.x + (ev.clientX - startX),
+        y: startOffset.y + (ev.clientY - startY),
+      });
+    };
+
+    const onUp = () => {
+      setIsDragging(false);
+      window.removeEventListener("mousemove", onMove);
+      window.removeEventListener("mouseup", onUp);
+    };
+
+    window.addEventListener("mousemove", onMove);
+    window.addEventListener("mouseup", onUp);
+  };
+
+  return (
+    <Box
+      ref={containerRef}
+      onMouseDown={handleViewportMouseDown}
+      sx={{
+        width: "100vw",
+        height: "100vh",
+        overflow: "hidden",
+        bgcolor: "none",
+        cursor: isDragging ? "grabbing" : "default",
+        userSelect: "none",
+        position: "relative",
+      }}
+    >
+      <SelectionOverlay box={selectionBox} selectionColor={selectionColor} />
+      <Box
+        sx={{
+          transform: `translate(${offset.x}px, ${offset.y}px) scale(${zoom})`,
+          transformOrigin: "center center",
+          width: "100%",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          transition: isDragging ? "none" : "transform 0.1s ease-out",
+          pointerEvents: "auto",
+          position: "relative",
+        }}
+      >
+        {children}
+        {floatingNodes.map((structure, index) => {
+          const structureKey =
+            (structure && (structure.id || structure.key)) ??
+            `floating-${index}`;
+          return (
+            <FloatingGraph
+              key={structureKey}
+              structure={structure}
+              variant={variant}
+              style={style}
+              plugin={plugin}
+              selectionColor={selectionColor}
+              onConnect={onConnect}
+            />
+          );
+        })}
+      </Box>
+    </Box>
+  );
+};
+
+export default FlowViewport;

package/src/lib/Flow/graph/FloatingGraph.jsx

@@ -0,0 +1,44 @@
+import { Box } from "@mui/material";
+import FlowNodeView from "../nodes/FlowNodeView";
+import { buildDetachedTree } from "../utils/flowUtils";
+
+import React, { useMemo } from "react";
+
+const FloatingGraph = ({ structure, variant, style, plugin, onConnect }) => {
+  const position = structure?._pastePosition || { x: 0, y: 0 };
+
+  const treesData = useMemo(() => {
+    if (!structure?.roots?.length || !structure?.nodes) return [];
+    return structure.roots
+      .map((rootId) => buildDetachedTree(rootId, structure.nodes))
+      .filter(Boolean);
+  }, [structure]);
+
+  if (!treesData.length) return null;
+
+  return (
+    <Box
+      sx={{
+        position: "absolute",
+        left: "50%",
+        top: "50%",
+        transform: `translate(${position.x}px, ${position.y}px)`,
+        display: "flex",
+        gap: 2,
+      }}
+    >
+      {treesData.map((tree, idx) => (
+        <FlowNodeView
+          key={tree.id || `floating-${idx}`}
+          node={tree}
+          variant={variant}
+          style={style}
+          plugin={plugin}
+          onConnect={onConnect}
+        />
+      ))}
+    </Box>
+  );
+};
+
+export default FloatingGraph;