test-nucleoid 1.0.0

package/src/lib/CustomPopover/styles.js

@@ -0,0 +1,82 @@
+import { alpha, styled } from "@mui/material/styles";
+
+import { bgBlur } from "../../theme/css";
+
+export const StyledArrow = styled("span")(({ arrow, theme }) => {
+  const SIZE = 14;
+
+  const POSITION = -(SIZE / 2) + 0.5;
+
+  const topStyle = {
+    top: POSITION,
+    transform: "rotate(135deg)",
+  };
+
+  const bottomStyle = {
+    bottom: POSITION,
+    transform: "rotate(-45deg)",
+  };
+
+  const leftStyle = {
+    left: POSITION,
+    transform: "rotate(45deg)",
+  };
+
+  const rightStyle = {
+    right: POSITION,
+    transform: "rotate(-135deg)",
+  };
+
+  return {
+    width: SIZE,
+    height: SIZE,
+    position: "absolute",
+    borderBottomLeftRadius: SIZE / 4,
+    clipPath: "polygon(0% 0%, 100% 100%, 0% 100%)",
+    border: `solid 1px ${alpha(
+      theme.palette.mode === "light"
+        ? theme.palette.grey[500]
+        : theme.palette.common.black,
+      0.12
+    )}`,
+    ...bgBlur({
+      color: theme.palette.background.paper,
+    }),
+    // Top
+    ...(arrow === "top-left" && { ...topStyle, left: 20 }),
+    ...(arrow === "top-center" && {
+      ...topStyle,
+      left: 0,
+      right: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "top-right" && { ...topStyle, right: 20 }),
+    // Bottom
+    ...(arrow === "bottom-left" && { ...bottomStyle, left: 20 }),
+    ...(arrow === "bottom-center" && {
+      ...bottomStyle,
+      left: 0,
+      right: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "bottom-right" && { ...bottomStyle, right: 20 }),
+    // Left
+    ...(arrow === "left-top" && { ...leftStyle, top: 20 }),
+    ...(arrow === "left-center" && {
+      ...leftStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "left-bottom" && { ...leftStyle, bottom: 20 }),
+    // Right
+    ...(arrow === "right-top" && { ...rightStyle, top: 20 }),
+    ...(arrow === "right-center" && {
+      ...rightStyle,
+      top: 0,
+      bottom: 0,
+      margin: "auto",
+    }),
+    ...(arrow === "right-bottom" && { ...rightStyle, bottom: 20 }),
+  };
+});

package/src/lib/CustomPopover/usePopover.js

@@ -0,0 +1,20 @@
+import React, { useCallback, useState } from "react";
+
+export default function usePopover() {
+  const [open, setOpen] = useState(null);
+
+  const onOpen = useCallback((event) => {
+    setOpen(event.currentTarget);
+  }, []);
+
+  const onClose = useCallback(() => {
+    setOpen(null);
+  }, []);
+
+  return {
+    open,
+    onOpen,
+    onClose,
+    setOpen,
+  };
+}

package/src/lib/CustomPopover/utils.js

@@ -0,0 +1,100 @@
+export function getPosition(arrow) {
+  let props;
+
+  switch (arrow) {
+    case "top-left":
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+      };
+      break;
+    case "top-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "bottom", horizontal: "center" },
+        transformOrigin: { vertical: "top", horizontal: "center" },
+      };
+      break;
+    case "top-right":
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+      break;
+    case "bottom-left":
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+      };
+      break;
+    case "bottom-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "top", horizontal: "center" },
+        transformOrigin: { vertical: "bottom", horizontal: "center" },
+      };
+      break;
+    case "bottom-right":
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "bottom", horizontal: "right" },
+      };
+      break;
+    case "left-top":
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "left" },
+      };
+      break;
+    case "left-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "center", horizontal: "right" },
+        transformOrigin: { vertical: "center", horizontal: "left" },
+      };
+      break;
+    case "left-bottom":
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "bottom", horizontal: "left" },
+      };
+      break;
+    case "right-top":
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: "top", horizontal: "left" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+      break;
+    case "right-center":
+      props = {
+        style: {},
+        anchorOrigin: { vertical: "center", horizontal: "left" },
+        transformOrigin: { vertical: "center", horizontal: "right" },
+      };
+      break;
+    case "right-bottom":
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "left" },
+        transformOrigin: { vertical: "bottom", horizontal: "right" },
+      };
+      break;
+
+    // top-right
+    default:
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: "bottom", horizontal: "right" },
+        transformOrigin: { vertical: "top", horizontal: "right" },
+      };
+  }
+
+  return props;
+}

package/src/lib/DialogTootip/DialogTooltip.jsx

@@ -0,0 +1,67 @@
+import CloseIcon from "@mui/icons-material/Close";
+import IconButton from "@mui/material/IconButton";
+import { styled } from "@mui/material/styles";
+
+import { Grid, Tooltip, Typography, tooltipClasses } from "@mui/material";
+
+const DialogTooltip = styled(
+  ({
+    className,
+    open,
+    handleTooltipClose,
+    title,
+    message,
+    footer,
+    ...props
+  }) => (
+    <Tooltip
+      open={open}
+      onClose={handleTooltipClose}
+      disableFocusListener
+      disableHoverListener
+      disableTouchListener
+      title={
+        <>
+          <Grid
+            container
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+              alignItems: "center",
+              backgroundColor: (theme) => theme.palette.background.paper,
+            }}
+          >
+            <Typography variant="subtitle1" sx={{ flexGrow: 1, marginLeft: 2 }}>
+              {title}
+            </Typography>
+            <IconButton onClick={handleTooltipClose} size="small">
+              <CloseIcon />
+            </IconButton>
+          </Grid>
+          <Grid sx={{ padding: 2 }}>
+            <Typography
+              variant="body2"
+              sx={{ color: (theme) => theme.palette.text.primary }}
+            >
+              {message}
+            </Typography>
+            {footer}
+          </Grid>
+        </>
+      }
+      {...props}
+      classes={{ popper: className }}
+    />
+  )
+)(({ theme }) => ({
+  [`& .${tooltipClasses.tooltip}`]: {
+    backgroundColor: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    width: 600,
+    fontSize: theme.typography.pxToRem(12),
+    border: `1px solid ${theme.palette.divider}`,
+    boxShadow: theme.shadows[1],
+  },
+}));
+
+export default DialogTooltip;

package/src/lib/DialogTootip/index.js

@@ -0,0 +1 @@
+export { default } from "./DialogTooltip";

package/src/lib/DialogTootip/styles.js

@@ -0,0 +1,9 @@
+const styles = {
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+};
+
+export default styles;

package/src/lib/Flow/connectors/DynamicConnector.jsx

@@ -0,0 +1,319 @@
+import { Box } from "@mui/material";
+
+import React, { useId, useLayoutEffect, useMemo, useState } from "react";
+
+const DynamicConnector = ({
+  containerEl,
+  parentEl,
+  childEls,
+  stroke = "#b1b1b7",
+  strokeWidth = 2,
+  lineStyle = "solid",
+  tick = 0,
+  orientation = "vertical",
+  showDots = false,
+  dotRadius = 4,
+  dotColor,
+  showArrow = true,
+  arrowSize = 6,
+  animated = false,
+  animationSpeed = 1,
+  gradient = null,
+  curvature = 0.5,
+  connectorType = "curved",
+  label = null,
+  labelStyle = {},
+  labelPosition = 0.5,
+  labelOffsetX = 0,
+  labelOffsetY = -10,
+}) => {
+  const uniqueId = useId();
+  const [dims, setDims] = useState(null);
+  const [points, setPoints] = useState({
+    parent: null,
+    children: [],
+  });
+
+  const isHorizontal = orientation === "horizontal";
+
+  useLayoutEffect(() => {
+    if (!containerEl || !parentEl || !childEls?.length) return;
+
+    const update = () => {
+      const cRect = containerEl.getBoundingClientRect();
+      const pRect = parentEl.getBoundingClientRect();
+
+      let parentPoint;
+      let childPoints = [];
+
+      if (isHorizontal) {
+        parentPoint = {
+          x: pRect.right - cRect.left,
+          y: pRect.top + pRect.height / 2 - cRect.top,
+        };
+
+        childPoints = childEls.map((el) => {
+          if (!el) return { x: parentPoint.x + 100, y: parentPoint.y };
+          const r = el.getBoundingClientRect();
+          return {
+            x: r.left - cRect.left,
+            y: r.top + r.height / 2 - cRect.top,
+          };
+        });
+      } else {
+        parentPoint = {
+          x: pRect.left + pRect.width / 2 - cRect.left,
+          y: pRect.bottom - cRect.top,
+        };
+
+        childPoints = childEls.map((el) => {
+          if (!el) return { x: parentPoint.x, y: parentPoint.y + 100 };
+          const r = el.getBoundingClientRect();
+          return {
+            x: r.left + r.width / 2 - cRect.left,
+            y: r.top - cRect.top,
+          };
+        });
+      }
+
+      setPoints({ parent: parentPoint, children: childPoints });
+      setDims({ w: cRect.width, h: cRect.height });
+    };
+
+    update();
+
+    const ro = new ResizeObserver(update);
+    ro.observe(containerEl);
+    ro.observe(parentEl);
+    childEls.forEach((el) => el && ro.observe(el));
+
+    return () => ro.disconnect();
+  }, [containerEl, parentEl, childEls, tick, isHorizontal]);
+
+  const ids = useMemo(
+    () => ({
+      gradient: `gradient-${uniqueId}`,
+      arrow: `arrow-${uniqueId}`,
+    }),
+    [uniqueId]
+  );
+
+  const getPath = (from, to) => {
+    const isCornered =
+      connectorType === "cornered" || connectorType === "normal";
+
+    if (isCornered) {
+      if (isHorizontal) {
+        const midX = from.x + (to.x - from.x) / 2;
+        return `M ${from.x} ${from.y} L ${midX} ${from.y} L ${midX} ${to.y} L ${to.x} ${to.y}`;
+      }
+
+      const midY = from.y + (to.y - from.y) / 2;
+      return `M ${from.x} ${from.y} L ${from.x} ${midY} L ${to.x} ${midY} L ${to.x} ${to.y}`;
+    }
+
+    const dx = Math.abs(to.x - from.x);
+    const dy = Math.abs(to.y - from.y);
+    const distance = Math.sqrt(dx * dx + dy * dy);
+
+    const baseCurvature = Math.max(40, Math.min(distance * curvature, 150));
+
+    if (isHorizontal) {
+      const cp1x = from.x + baseCurvature;
+      const cp2x = to.x - baseCurvature;
+      return `M ${from.x} ${from.y} C ${cp1x} ${from.y}, ${cp2x} ${to.y}, ${to.x} ${to.y}`;
+    } else {
+      const cp1y = from.y + baseCurvature;
+      const cp2y = to.y - baseCurvature;
+      return `M ${from.x} ${from.y} C ${from.x} ${cp1y}, ${to.x} ${cp2y}, ${to.x} ${to.y}`;
+    }
+  };
+
+  const getDashArray = () => {
+    if (lineStyle === "dashed") return `${strokeWidth * 4},${strokeWidth * 3}`;
+    if (lineStyle === "dotted") return `${strokeWidth},${strokeWidth * 2}`;
+    return undefined;
+  };
+
+  const animationStyle = animated
+    ? `
+    @keyframes flowAnimation {
+      from { stroke-dashoffset: 24; }
+      to { stroke-dashoffset: 0; }
+    }
+  `
+    : "";
+
+  if (!dims || !points.parent || !points.children.length) return null;
+
+  const effectiveDotColor = dotColor || stroke;
+  const dashArray = getDashArray();
+
+  return (
+    <>
+      <svg
+        style={{
+          position: "absolute",
+          inset: 0,
+          pointerEvents: "none",
+          overflow: "visible",
+          zIndex: 0,
+        }}
+        width="100%"
+        height="100%"
+        viewBox={`0 0 ${dims.w} ${dims.h}`}
+      >
+        <defs>
+          {gradient && (
+            <linearGradient
+              id={ids.gradient}
+              gradientUnits="userSpaceOnUse"
+              x1={points.parent.x}
+              y1={points.parent.y}
+              x2={points.children[0]?.x || points.parent.x}
+              y2={points.children[0]?.y || points.parent.y}
+            >
+              <stop offset="0%" stopColor={gradient.from} />
+              <stop offset="100%" stopColor={gradient.to} />
+            </linearGradient>
+          )}
+
+          {showArrow && (
+            <marker
+              id={ids.arrow}
+              viewBox="0 0 10 10"
+              refX="9"
+              refY="5"
+              markerWidth={arrowSize}
+              markerHeight={arrowSize}
+              orient="auto-start-reverse"
+            >
+              <path
+                d="M 0 0 L 10 5 L 0 10 z"
+                fill={gradient ? `url(#${ids.gradient})` : stroke}
+              />
+            </marker>
+          )}
+
+          {animated && <style>{animationStyle}</style>}
+        </defs>
+
+        {points.children.map((child, i) => {
+          const pathD = getPath(points.parent, child);
+          const pathStroke = gradient ? `url(#${ids.gradient})` : stroke;
+
+          const labelX =
+            points.parent.x +
+            (child.x - points.parent.x) * labelPosition +
+            labelOffsetX;
+          const labelY =
+            points.parent.y +
+            (child.y - points.parent.y) * labelPosition +
+            labelOffsetY;
+
+          return (
+            <g key={i}>
+              <path
+                d={pathD}
+                fill="none"
+                stroke={pathStroke}
+                strokeWidth={strokeWidth}
+                strokeDasharray={animated ? "8,4" : dashArray}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                markerEnd={showArrow ? `url(#${ids.arrow})` : undefined}
+                style={{
+                  transition: "stroke 0.2s ease, stroke-width 0.2s ease",
+                  ...(animated
+                    ? {
+                        animation: `flowAnimation ${
+                          0.5 / animationSpeed
+                        }s linear infinite`,
+                      }
+                    : {}),
+                }}
+              />
+            </g>
+          );
+        })}
+
+        {showDots && (
+          <>
+            <circle
+              cx={points.parent.x}
+              cy={points.parent.y}
+              r={dotRadius}
+              fill={gradient ? gradient.from : effectiveDotColor}
+              stroke="#fff"
+              strokeWidth={1.5}
+              style={{
+                filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.15))",
+              }}
+            />
+
+            {points.children.map((child, i) => {
+              const dotFill = gradient ? gradient.to : effectiveDotColor;
+
+              return (
+                <circle
+                  key={i}
+                  cx={child.x}
+                  cy={child.y}
+                  r={dotRadius}
+                  fill={dotFill}
+                  stroke="#fff"
+                  strokeWidth={1.5}
+                  style={{
+                    filter: "drop-shadow(0 1px 2px rgba(0,0,0,0.15))",
+                  }}
+                />
+              );
+            })}
+          </>
+        )}
+      </svg>
+
+      {label &&
+        points.children.map((child, i) => {
+          const labelX =
+            points.parent.x +
+            (child.x - points.parent.x) * labelPosition +
+            labelOffsetX;
+          const labelY =
+            points.parent.y +
+            (child.y - points.parent.y) * labelPosition +
+            labelOffsetY;
+
+          return (
+            <Box
+              key={`label-${i}`}
+              sx={{
+                position: "absolute",
+                left: labelX,
+                top: labelY,
+                transform: "translate(-50%, -50%)",
+                px: 1,
+                py: 0.5,
+                borderRadius: 1,
+                backgroundColor: "background.paper",
+                border: 1,
+                borderColor: labelStyle.color || stroke,
+                fontSize: labelStyle.fontSize || "12px",
+                fontWeight: labelStyle.fontWeight || 600,
+                color: labelStyle.textColor || stroke,
+                pointerEvents: "none",
+                userSelect: "none",
+                zIndex: 10,
+                boxShadow: 1,
+                whiteSpace: "nowrap",
+              }}
+            >
+              {label}
+            </Box>
+          );
+        })}
+    </>
+  );
+};
+
+export default DynamicConnector;

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;