@canmingir/link 1.2.10 → 1.2.12

package/src/lib/Flow/utils/flowUtils.js

@@ -0,0 +1,268 @@
+export function assertLinkedGraph(data) {
+  if (!data || typeof data !== "object") {
+    throw new Error(
+      "FlowChart expected a linked graph object: { nodes, roots? }."
+    );
+  }
+  const { nodes, roots } = data;
+  if (!nodes || typeof nodes !== "object") {
+    throw new Error("FlowChart expected data.nodes to be an object.");
+  }
+
+  let useRoots = Array.isArray(roots) ? [...roots] : null;
+  if (!useRoots || useRoots.length === 0) {
+    useRoots = Object.keys(nodes).filter((id) => !nodes[id]?.previous);
+  }
+  if (useRoots.length === 0) {
+    const first = Object.keys(nodes)[0];
+    if (first) useRoots = [first];
+  }
+
+  for (const r of useRoots) {
+    if (!nodes[r]) throw new Error(`Root id "${r}" not found in data.nodes.`);
+  }
+
+  return { nodesById: nodes, roots: useRoots };
+}
+
+export function buildTreeFromLinked(rootId, nodesById) {
+  if (!rootId || !nodesById?.[rootId]) return null;
+  const seen = new Set();
+
+  const cloneNode = (node) => {
+    if (!node) return null;
+    const { next, previous, children, ...rest } = node;
+    return { ...rest, id: node.id, previous, next, children: [] };
+  };
+
+  const dfs = (id) => {
+    if (!id || seen.has(id) || !nodesById[id]) return null;
+    seen.add(id);
+
+    const node = nodesById[id];
+    const out = cloneNode(node);
+
+    const nextArr = Array.isArray(node.next)
+      ? node.next
+      : node.next != null
+      ? [node.next]
+      : [];
+
+    for (const nxt of nextArr) {
+      const nextId = typeof nxt === "string" ? nxt : nxt?.id;
+      if (!nextId || !nodesById[nextId]) continue;
+
+      const target = nodesById[nextId];
+      if (target.previous == null || target.previous === id) {
+        const built = dfs(nextId);
+        if (built) out.children.push(built);
+      }
+    }
+    return out;
+  };
+
+  return dfs(rootId);
+}
+
+export const getContentParts = (n) => {
+  const entries = Object.entries(n).filter(
+    ([key]) =>
+      key !== "children" && key !== "id" && key !== "previous" && key !== "next"
+  );
+
+  if (entries.length === 0) {
+    return {
+      title: "(empty)",
+      subtitle: null,
+      metaEntries: [],
+    };
+  }
+
+  const preferredTitleKeys = ["label", "title", "name"];
+  const titleEntry =
+    entries.find(([key]) => preferredTitleKeys.includes(key)) || entries[0];
+  const [titleKey, rawTitle] = titleEntry;
+  const title = String(rawTitle);
+  let remaining = entries.filter(([key]) => key !== titleKey);
+
+  const preferredSubtitleKeys = ["description", "role", "type", "status"];
+  const subtitleEntry =
+    remaining.find(([key]) => preferredSubtitleKeys.includes(key)) || null;
+
+  let subtitle = null;
+  if (subtitleEntry) {
+    const [subtitleKey, raw] = subtitleEntry;
+    subtitle = String(raw);
+    remaining = remaining.filter(([key]) => key !== subtitleKey);
+  }
+
+  const metaEntries = remaining
+    .filter(([, value]) => {
+      const t = typeof value;
+      return (
+        (t === "string" || t === "number" || t === "boolean") &&
+        value !== "" &&
+        value !== null
+      );
+    })
+    .map(([k, v]) => [k, v]);
+
+  return { title, subtitle, metaEntries };
+};
+
+export const toNextArray = (next) => {
+  if (!next) return [];
+  return Array.isArray(next) ? next : [next];
+};
+
+export const setNextProperty = (node, nextIds) => {
+  if (!nextIds || nextIds.length === 0) {
+    delete node.next;
+  } else if (nextIds.length === 1) {
+    node.next = nextIds[0];
+  } else {
+    node.next = nextIds;
+  }
+};
+
+export const addToNext = (node, childIds) => {
+  const current = toNextArray(node.next);
+  const newIds = childIds.filter((id) => !current.includes(id));
+  setNextProperty(node, [...current, ...newIds]);
+};
+
+export const removeFromNext = (node, childIds) => {
+  const removeSet = new Set(childIds);
+  const filtered = toNextArray(node.next).filter((id) => !removeSet.has(id));
+  setNextProperty(node, filtered);
+};
+
+export const cleanupReferences = (nodes, removedIds) => {
+  const removeSet = new Set(removedIds);
+  Object.values(nodes).forEach((node) => {
+    if (removeSet.has(node.next)) {
+      delete node.next;
+    } else if (Array.isArray(node.next)) {
+      const filtered = node.next.filter((n) => !removeSet.has(n));
+      setNextProperty(node, filtered);
+    }
+    if (removeSet.has(node.previous)) {
+      delete node.previous;
+    }
+  });
+};
+
+export const hexToRgba = (hex, alpha) => {
+  const r = parseInt(hex.slice(1, 3), 16);
+  const g = parseInt(hex.slice(3, 5), 16);
+  const b = parseInt(hex.slice(5, 7), 16);
+  return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+};
+
+export const buildDetachedTree = (rootId, nodesById) => {
+  if (!rootId || !nodesById?.[rootId]) return null;
+  const seen = new Set();
+
+  const buildNode = (id) => {
+    if (!id || seen.has(id) || !nodesById[id]) return null;
+    seen.add(id);
+
+    const node = nodesById[id];
+    const { next, previous, ...rest } = node;
+    const result = { ...rest, id, children: [] };
+
+    const nextIds = Array.isArray(next) ? next : next != null ? [next] : [];
+
+    nextIds.forEach((nxt) => {
+      const nextId = typeof nxt === "string" ? nxt : nxt?.id;
+      if (!nextId || !nodesById[nextId]) return;
+
+      const child = buildNode(nextId);
+      if (child) result.children.push(child);
+    });
+
+    return result;
+  };
+
+  return buildNode(rootId);
+};
+
+export const getSelectedInStructure = (structure, selectedIds) =>
+  selectedIds.filter((id) => structure.nodes?.[id]);
+
+export const getRootsToConnect = (structure, selectedIds) => {
+  const selectedSet = new Set(selectedIds);
+  const roots = [];
+
+  selectedIds.forEach((id) => {
+    let current = structure.nodes[id];
+    if (!current) return;
+
+    let rootId = id;
+
+    while (current.previous && structure.nodes[current.previous]) {
+      if (selectedSet.has(current.previous)) {
+        rootId = current.previous;
+        current = structure.nodes[current.previous];
+      } else break;
+    }
+
+    if (!current.previous && !roots.includes(rootId)) {
+      roots.push(rootId);
+    }
+  });
+
+  if (roots.length > 0) return roots;
+
+  return selectedIds.filter((id) => {
+    const node = structure.nodes[id];
+    return node && (!node.previous || !structure.nodes[node.previous]);
+  });
+};
+
+export const collectSubtree = (structure, roots, selectedIds) => {
+  const selectedSet = new Set(selectedIds);
+  const collected = new Set();
+
+  const dfs = (id) => {
+    if (collected.has(id) || !structure.nodes[id]) return;
+    collected.add(id);
+
+    toNextArray(structure.nodes[id].next).forEach((childId) => {
+      if (structure.nodes[childId] && selectedSet.has(childId)) {
+        dfs(childId);
+      }
+    });
+  };
+
+  roots.forEach(dfs);
+  return collected;
+};
+
+export const splitFloatingStructure = (structure, removedIds) => {
+  const remainingNodes = {};
+
+  Object.entries(structure.nodes).forEach(([id, node]) => {
+    if (!removedIds.has(id)) {
+      remainingNodes[id] = node;
+    }
+  });
+
+  cleanupReferences(remainingNodes, [...removedIds]);
+
+  const remainingRoots =
+    structure.roots?.filter((r) => !removedIds.has(r)) ?? [];
+
+  const roots =
+    remainingRoots.length > 0
+      ? remainingRoots
+      : Object.keys(remainingNodes).filter(
+          (id) => !remainingNodes[id].previous
+        );
+
+  return {
+    ...structure,
+    nodes: remainingNodes,
+    roots: [...new Set(roots)],
+  };
+};

package/src/lib/index.js

@@ -22,7 +22,7 @@ export { default as TableSelectedAction } from "./TableSelectedAction/TableSelec
 export { default as useTable } from "./useTable/useTable";
 export { default as useChart } from "./useChart/useChart";
 
-export { default as Flow } from "./Flow/Flow";
+export { default as Flow } from "./Flow/core/Flow";
 
 export {
   HeaderCard,

package/src/pages/LoginPage.jsx

@@ -1,3 +1,5 @@
+import CognitoLogin from "../widgets/Login/CognitoLogin";
+import DemoLogin from "../widgets/Login/DemoLogin";
 import LoginForm from "../widgets/LoginForm/LoginForm";
 import Page from "../layouts/Page";
 import React from "react";
@@ -6,7 +8,7 @@ import { storage } from "@nucleoidjs/webstorage";
 import { useEffect } from "react";
 import { useNavigate } from "react-router-dom";
 function LoginPage() {
-  const { name, template } = config();
+  const { name, template, credentials } = config();
   const formColor = "#a8a9ad";
   const navigate = useNavigate();
 
@@ -28,6 +30,18 @@ function LoginPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [navigate]);
 
+  if (credentials?.provider === "COGNITO") {
+    return <CognitoLogin />;
+  }
+
+  if (credentials?.provider === "DEMO") {
+    return (
+      <Page title={`Sign in to ${name}`}>
+        <DemoLogin />
+      </Page>
+    );
+  }
+
   return (
     <Page title={`Sign in to ${name}`}>
       <LoginForm icon={template.login.icon} name={name} formColor={formColor} />

package/src/widgets/Login/CognitoLogin.jsx

@@ -0,0 +1,45 @@
+import { loginWithCognito } from "./cognitoAuth";
+import { storage } from "@nucleoidjs/webstorage";
+import { useState } from "react";
+
+import { Button, Stack, TextField, Typography } from "@mui/material";
+
+export default function CognitoLogin() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+
+  const handleLogin = async () => {
+    try {
+      const tokens = await loginWithCognito(username, password);
+      console.log("Login successful, tokens:", tokens);
+      storage.set("link", "accessToken", tokens.AccessToken);
+      storage.set("link", "refreshToken", tokens.RefreshToken);
+      window.location.href = "/";
+    } catch (e) {
+      console.error("Login error:", e);
+      alert(`Login failed: ${e.message || e}`);
+    }
+  };
+
+  return (
+    <>
+      <Typography variant="h4">Login</Typography>
+      <Stack spacing={2}>
+        <TextField
+          label="Username or Email"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+        />
+        <TextField
+          type="password"
+          label="Password"
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+        />
+        <Button variant="contained" onClick={handleLogin}>
+          Login
+        </Button>
+      </Stack>
+    </>
+  );
+}

package/src/widgets/Login/DemoLogin.jsx

@@ -0,0 +1,178 @@
+import {
+  Box,
+  Button,
+  IconButton,
+  InputAdornment,
+  Stack,
+  TextField,
+  Typography,
+  alpha,
+} from "@mui/material";
+import {
+  LockOutlined,
+  PersonOutline,
+  Visibility,
+  VisibilityOff,
+} from "@mui/icons-material";
+import React, { useState } from "react";
+
+import config from "../../config/config";
+import { storage } from "@nucleoidjs/webstorage";
+import { useNavigate } from "react-router-dom";
+
+export default function DemoLogin() {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const navigate = useNavigate();
+
+  const { appId } = config();
+
+  async function handleLogin() {
+    const res = await fetch("/api/oauth/demo", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        appId: appId,
+        projectId: "cb16e069-6214-47f1-9922-1f7fe7629525",
+        username,
+        password,
+      }),
+    });
+
+    if (!res.ok) throw new Error("Demo login failed");
+
+    const data = await res.json();
+
+    storage.set("link", "accessToken", data.accessToken);
+    storage.set("link", "refreshToken", data.refreshToken);
+    storage.set("link", "identityProvider", "Demo");
+
+    navigate("/");
+  }
+
+  return (
+    <Stack spacing={2.5}>
+      <Stack spacing={2}>
+        <TextField
+          label="Username"
+          value={username}
+          onChange={(e) => setUsername(e.target.value)}
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <PersonOutline sx={{ color: "text.secondary", fontSize: 22 }} />
+              </InputAdornment>
+            ),
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              fontSize: "1rem",
+              "& input": {
+                py: 1.5,
+              },
+              "&:hover fieldset": {
+                borderColor: "primary.main",
+              },
+            },
+          }}
+        />
+
+        <TextField
+          label="Password"
+          type={showPassword ? "text" : "password"}
+          value={password}
+          onChange={(e) => setPassword(e.target.value)}
+          fullWidth
+          InputProps={{
+            startAdornment: (
+              <InputAdornment position="start">
+                <LockOutlined sx={{ color: "text.secondary", fontSize: 22 }} />
+              </InputAdornment>
+            ),
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  onClick={() => setShowPassword(!showPassword)}
+                  edge="end"
+                  size="small"
+                  tabIndex={-1}
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          sx={{
+            "& .MuiOutlinedInput-root": {
+              fontSize: "1rem",
+              "& input": {
+                py: 1.5,
+              },
+              "&:hover fieldset": {
+                borderColor: "primary.main",
+              },
+            },
+          }}
+          onKeyPress={(e) => {
+            if (e.key === "Enter") {
+              handleLogin();
+            }
+          }}
+        />
+      </Stack>
+
+      <Button
+        variant="contained"
+        onClick={handleLogin}
+        size="large"
+        fullWidth
+        sx={{
+          mt: 1,
+          py: 1.5,
+          fontSize: "1rem",
+          fontWeight: 600,
+          textTransform: "none",
+          borderRadius: 1.5,
+          boxShadow: (theme) =>
+            `0 8px 16px ${alpha(theme.palette.primary.main, 0.24)}`,
+          transition: "all 0.2s cubic-bezier(0.4, 0, 0.2, 1)",
+          "&:hover": {
+            transform: "translateY(-2px)",
+            boxShadow: (theme) =>
+              `0 12px 24px ${alpha(theme.palette.primary.main, 0.32)}`,
+          },
+          "&:active": {
+            transform: "translateY(0px)",
+          },
+        }}
+      >
+        Sign in
+      </Button>
+
+      <Box
+        sx={{
+          mt: 1,
+          textAlign: "center",
+          p: 2,
+          borderRadius: 1.5,
+          bgcolor: (theme) => alpha(theme.palette.info.main, 0.08),
+          border: (theme) =>
+            `1px dashed ${alpha(theme.palette.info.main, 0.24)}`,
+        }}
+      >
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          sx={{ fontSize: "0.8125rem" }}
+        >
+          Demo credentials:{" "}
+          <Box component="strong" sx={{ color: "text.primary" }}>
+            admin / admin
+          </Box>
+        </Typography>
+      </Box>
+    </Stack>
+  );
+}

package/src/widgets/Login/cognitoAuth.jsx

@@ -0,0 +1,44 @@
+import config from "../../config/config";
+
+import {
+  CognitoIdentityProviderClient,
+  InitiateAuthCommand,
+} from "@aws-sdk/client-cognito-identity-provider";
+
+let client = null;
+
+function getClient() {
+  if (!client) {
+    const { credentials } = config();
+    if (!credentials) {
+      throw new Error("Cognito credentials not initialized yet");
+    }
+
+    client = new CognitoIdentityProviderClient({
+      region: credentials.region,
+    });
+
+    console.log("Initialized Cognito Client with region:", credentials.region);
+  }
+
+  return client;
+}
+
+export async function loginWithCognito(username, password) {
+  const { credentials } = config();
+  if (!credentials) {
+    throw new Error("CONFIG not initialized yet. Wait for CONFIG_INITIALIZED.");
+  }
+
+  const command = new InitiateAuthCommand({
+    AuthFlow: "USER_PASSWORD_AUTH",
+    ClientId: credentials.clientId,
+    AuthParameters: {
+      USERNAME: username,
+      PASSWORD: password,
+    },
+  });
+
+  const response = await getClient().send(command);
+  return response.AuthenticationResult;
+}

package/src/lib/Flow/DraggableNode.jsx

@@ -1,128 +0,0 @@
-import { Box } from "@mui/material";
-import { useSelection } from "./SelectionContext";
-
-import React, { useEffect, useRef, useState } from "react";
-
-const DraggableNode = ({
-  children,
-  registerRef,
-  onDrag,
-  nodeId,
-  selectionColor = "#64748b",
-}) => {
-  const [offset, setOffset] = useState({ x: 0, y: 0 });
-  const localRef = useRef(null);
-  const lastDeltaRef = useRef({ x: 0, y: 0 });
-
-  const {
-    isSelected,
-    selectNode,
-    toggleSelection,
-    clearSelection,
-    registerNodeHandlers,
-    moveSelectedNodes,
-    selectedIds,
-  } = useSelection();
-
-  const selected = isSelected(nodeId);
-  const onDragRef = useRef(onDrag);
-
-  useEffect(() => {
-    onDragRef.current = onDrag;
-  }, [onDrag]);
-
-  useEffect(() => {
-    if (nodeId) {
-      return registerNodeHandlers(nodeId, {
-        setOffset,
-        onDrag: () => onDragRef.current?.(),
-      });
-    }
-  }, [nodeId, registerNodeHandlers]);
-
-  const setRef = (el) => {
-    localRef.current = el;
-    if (registerRef) registerRef(el);
-  };
-
-  const handleMouseDown = (e) => {
-    if (e.button !== 0) return;
-    e.stopPropagation();
-
-    if (e.shiftKey || e.ctrlKey || e.metaKey) {
-      toggleSelection(nodeId);
-      return;
-    }
-    if (!selected) {
-      clearSelection();
-      selectNode(nodeId);
-    }
-
-    const startX = e.clientX;
-    const startY = e.clientY;
-    const startOffset = { ...offset };
-    lastDeltaRef.current = { x: 0, y: 0 };
-
-    const onMove = (ev) => {
-      const dx = ev.clientX - startX;
-      const dy = ev.clientY - startY;
-
-      const deltaDx = dx - lastDeltaRef.current.x;
-      const deltaDy = dy - lastDeltaRef.current.y;
-      lastDeltaRef.current = { x: dx, y: dy };
-
-      setOffset({
-        x: startOffset.x + dx,
-        y: startOffset.y + dy,
-      });
-
-      if (selectedIds.size > 1) {
-        moveSelectedNodes(deltaDx, deltaDy, nodeId);
-      }
-
-      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}
-      data-node-id={nodeId}
-      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",
-        },
-        ...(selected && {
-          "&::after": {
-            content: '""',
-            position: "absolute",
-            inset: -6,
-            border: `2px solid ${selectionColor}`,
-            borderRadius: "12px",
-            pointerEvents: "none",
-            boxShadow: `0 0 8px ${selectionColor}66`,
-          },
-        }),
-      }}
-    >
-      {children}
-    </Box>
-  );
-};
-
-export default DraggableNode;