@socprime/react-ui 0.0.5

package/ui/Accordion/index.js

@@ -0,0 +1,16 @@
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "./Accordion.js";
+import { AccordionSection } from "./AccordionSection.js";
+import { FolderTreeExpandTrigger } from "./FolderTreeExpandTrigger.js";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionSection,
+  AccordionTrigger,
+  FolderTreeExpandTrigger
+};

package/ui/AnimatedDots/AnimatedDots.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cn } from "../../lib/cn.js";
+const AnimatedDots = ({ className }) => /* @__PURE__ */ jsxs("span", { className: cn("inline-flex", className), "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx("span", { className: "animate-dot-loading-1", children: "." }),
+  /* @__PURE__ */ jsx("span", { className: "animate-dot-loading-2", children: "." }),
+  /* @__PURE__ */ jsx("span", { className: "animate-dot-loading-3", children: "." })
+] });
+export {
+  AnimatedDots
+};

package/ui/AnimatedDots/index.js

@@ -0,0 +1,4 @@
+import { AnimatedDots } from "./AnimatedDots.js";
+export {
+  AnimatedDots
+};

package/ui/Aside/Aside.js

@@ -0,0 +1,34 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Button } from "../Button/Button.js";
+import { cn } from "../../lib/cn.js";
+import {
+  NavigationMenu,
+  NavigationMenuItem,
+  NavigationMenuList
+} from "@radix-ui/react-navigation-menu";
+import { useLocation } from "react-router-dom";
+const isPathActive = (pathname, linkTo) => pathname === linkTo || pathname.startsWith(`${linkTo}/`);
+const Aside = ({ tabs = [], activeId, className }) => {
+  const { pathname } = useLocation();
+  return /* @__PURE__ */ jsx("aside", { className: cn("w-full", className), children: /* @__PURE__ */ jsx(NavigationMenu, { children: /* @__PURE__ */ jsx(NavigationMenuList, { className: "flex w-full flex-col gap-2", children: tabs.map(({ id, label, title, icon, to, onClick }) => {
+    const Icon = icon || void 0;
+    const linkTo = to ?? id;
+    const isActive = activeId ? activeId === id : isPathActive(pathname, linkTo);
+    return /* @__PURE__ */ jsx(NavigationMenuItem, { children: title ? /* @__PURE__ */ jsx("div", { className: "text-gray-chateau text-2xs font-medium tracking-wider uppercase", children: title }) : /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: `w-full justify-start bg-transparent text-xs ${isActive ? "is-active" : ""}`,
+        variant: "ghost",
+        size: "l",
+        ...onClick ? { onClick } : { to: linkTo },
+        children: [
+          Icon && /* @__PURE__ */ jsx(Icon, { className: "size-6" }),
+          label && /* @__PURE__ */ jsx("span", { children: label })
+        ]
+      }
+    ) }, id);
+  }) }) }) });
+};
+export {
+  Aside
+};

package/ui/Aside/index.js

@@ -0,0 +1,4 @@
+import { Aside } from "./Aside.js";
+export {
+  Aside
+};

package/ui/AttackFlow/AttackFlow.js

@@ -0,0 +1,9 @@
+import { jsx } from "react/jsx-runtime";
+import { ReactFlowProvider } from "@xyflow/react";
+import { AttackFlowLayout } from "./AttackFlowLayout.js";
+const AttackFlow = ({ content, className }) => {
+  return /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsx(AttackFlowLayout, { content, className }) });
+};
+export {
+  AttackFlow
+};

package/ui/AttackFlow/AttackFlowLayout.js

@@ -0,0 +1,63 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ReactFlow } from "@xyflow/react";
+import { useMemo } from "react";
+import { Controls } from "./Controls.js";
+import { Node } from "./Node.js";
+import { OtherNode } from "./OtherNode.js";
+import { useAttackFlow } from "./useAttackFlow.js";
+import "@xyflow/react/dist/style.css";
+const nodeTypes = {
+  attack: ({ data }) => /* @__PURE__ */ jsx(Node, { ...data }),
+  and: ({ data }) => /* @__PURE__ */ jsx(OtherNode, { ...data })
+};
+const edgeTypes = {};
+const AttackFlowLayout = ({ content, className }) => {
+  const {
+    nodes,
+    edges,
+    reactFlowWrapper,
+    onNodesChange,
+    handleCenterFocus,
+    handleZoomIn,
+    handleZoomOut
+  } = useAttackFlow(content);
+  const reactFlowProps = useMemo(
+    () => ({
+      nodes,
+      edges,
+      nodeTypes,
+      edgeTypes,
+      onNodesChange,
+      nodesDraggable: true,
+      nodesConnectable: false,
+      minZoom: 0,
+      maxZoom: 2,
+      defaultViewport: {
+        x: 0,
+        y: 0,
+        zoom: 0.8
+      },
+      zoomOnScroll: true,
+      zoomOnPinch: true,
+      panOnScroll: true,
+      selectNodesOnDrag: false,
+      multiSelectionKeyCode: null,
+      proOptions: { hideAttribution: true }
+    }),
+    [nodes, edges, onNodesChange]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: `relative ${className}`, ref: reactFlowWrapper, children: [
+    /* @__PURE__ */ jsx(ReactFlow, { ...reactFlowProps }),
+    /* @__PURE__ */ jsx("div", { className: "absolute bottom-3 left-3 z-10 flex flex-col gap-1", children: /* @__PURE__ */ jsx(
+      Controls,
+      {
+        handleCenterFocus,
+        handleZoomIn,
+        handleZoomOut
+      }
+    ) })
+  ] });
+};
+export {
+  AttackFlowLayout
+};

package/ui/AttackFlow/Controls.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ScanIcon, ZoomInIcon, ZoomOutIcon } from "lucide-react";
+import { Fragment } from "react";
+import { Button } from "../Button/Button.js";
+import { Tooltip } from "../Tooltip/Tooltip.js";
+const Controls = ({ handleCenterFocus, handleZoomIn, handleZoomOut }) => {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: "Return to starting point", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "bg-primary border-border",
+        variant: "icon",
+        size: "xs",
+        onClick: handleCenterFocus,
+        children: /* @__PURE__ */ jsx(ScanIcon, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: "Zoom in", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "bg-primary border-border",
+        variant: "icon",
+        size: "xs",
+        onClick: handleZoomIn,
+        children: /* @__PURE__ */ jsx(ZoomInIcon, { className: "size-4" })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Tooltip, { content: "Zoom out", children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "bg-primary border-border",
+        variant: "icon",
+        size: "xs",
+        onClick: handleZoomOut,
+        children: /* @__PURE__ */ jsx(ZoomOutIcon, { className: "size-4" })
+      }
+    ) })
+  ] });
+};
+export {
+  Controls
+};

package/ui/AttackFlow/Node.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useThemeColors } from "../../lib/useThemeColors.js";
+import { cn } from "../../lib/cn.js";
+import { Handle, Position } from "@xyflow/react";
+const Node = ({ content, color, nodeId }) => {
+  const { default: textDefault, primary } = useThemeColors();
+  if (!content) {
+    return null;
+  }
+  const nodeClass = nodeId ? `node-${nodeId}` : "node-draggable";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "border-border w-auto max-w-[312px] min-w-[250px] overflow-hidden rounded-sm border",
+        nodeClass
+      ),
+      style: { backgroundColor: primary, color: textDefault, borderColor: color },
+      children: /* @__PURE__ */ jsxs("div", { className: "rounded-sm px-2 py-3", style: { backgroundColor: `${color}20` }, children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            className: "h-1 w-1",
+            type: "target",
+            isConnectable: false,
+            position: Position.Top,
+            style: { backgroundColor: color, borderColor: color }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "rounded-3 px-2 py-3 break-words", children: /* @__PURE__ */ jsx("p", { className: "text-xs", dangerouslySetInnerHTML: { __html: content } }) }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            className: "h-1 w-1",
+            type: "source",
+            isConnectable: false,
+            position: Position.Bottom,
+            style: { backgroundColor: color, borderColor: color }
+          }
+        )
+      ] })
+    }
+  );
+};
+export {
+  Node
+};

package/ui/AttackFlow/OtherNode.js

@@ -0,0 +1,44 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useThemeColors } from "../../lib/useThemeColors.js";
+import { cn } from "../../lib/cn.js";
+import { Handle, Position } from "@xyflow/react";
+const OtherNode = ({ content, color, nodeId }) => {
+  const { warning } = useThemeColors();
+  if (!content) {
+    return null;
+  }
+  const nodeClass = nodeId ? `node-${nodeId}` : "node-draggable";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative flex h-10 w-10 items-center justify-center rounded-full", nodeClass),
+      style: { backgroundColor: warning },
+      children: [
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            className: "h-1 w-1",
+            type: "target",
+            isConnectable: false,
+            position: Position.Top,
+            style: { backgroundColor: color, borderColor: color, opacity: 0.5 }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex h-full w-full items-center justify-center", children: /* @__PURE__ */ jsx("p", { className: "text-sm font-bold", children: content }) }),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            className: "h-1 w-1",
+            type: "source",
+            isConnectable: false,
+            position: Position.Bottom,
+            style: { backgroundColor: color, borderColor: color, opacity: 0.5 }
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  OtherNode
+};

package/ui/AttackFlow/index.js

@@ -0,0 +1,4 @@
+import { AttackFlow } from "./AttackFlow.js";
+export {
+  AttackFlow
+};

package/ui/AttackFlow/prependData.js

@@ -0,0 +1,153 @@
+const COLORS = {
+  labelBg: "rgba(41, 44, 61, 0.70)",
+  background: "#fafafa",
+  border: "#e0e0e0",
+  text: "#F9F9F9",
+  headerText: "#ffffff",
+  connector: "#6280A3",
+  and: "rgba(238, 157, 35, 0.5)",
+  default: "#5c5c5c"
+};
+const AND_REGEX = /\b(AND|and)\b|\bop_and\d*/;
+const determineNodeClass = (id, lines = []) => {
+  if (id === "AND" || id.toLowerCase() === "and" || id.match(/^op_and\d*$/)) {
+    return "operator";
+  }
+  for (const line of lines) {
+    const nodeWithLabelMatch = line.match(/(\w+)\(\("([^"]+)"\)\)/);
+    if (nodeWithLabelMatch && nodeWithLabelMatch[1] === id && nodeWithLabelMatch[2].toUpperCase() === "AND") {
+      return "operator";
+    }
+    const classMatch = line.match(new RegExp(`class\\s+${id}\\s+(\\w+)`));
+    if (classMatch) {
+      return classMatch[1];
+    }
+  }
+  return "other";
+};
+const createNode = (id, content, classDefinitions, lines, isAndOperator = false) => {
+  const nodeClass = determineNodeClass(id, lines);
+  const isAnd = isAndOperator || nodeClass === "operator" || id.match(/^op_and\d*$/) || content.toUpperCase() === "AND";
+  const color = classDefinitions.get(nodeClass) || COLORS.default;
+  if (isAnd) {
+    return {
+      id,
+      type: "and",
+      position: { x: 0, y: 0 },
+      data: {
+        content: "AND",
+        nodeClass: "operator",
+        color: classDefinitions.get("operator") || COLORS.and
+      }
+    };
+  }
+  return {
+    id,
+    type: "attack",
+    position: { x: 0, y: 0 },
+    data: {
+      content,
+      nodeClass,
+      color
+    }
+  };
+};
+const createPlaceholderNode = (id, classDefinitions, lines) => {
+  const nodeClass = determineNodeClass(id, lines);
+  const isAndOperator = nodeClass === "operator" || id.match(/^op_and\d*$/) || id.toUpperCase() === "AND";
+  if (isAndOperator) {
+    return {
+      id,
+      type: "and",
+      position: { x: 0, y: 0 },
+      data: {
+        content: "AND",
+        nodeClass: "operator",
+        color: classDefinitions.get("operator") || COLORS.and
+      }
+    };
+  }
+  return {
+    id,
+    type: "attack",
+    position: { x: 0, y: 0 },
+    data: {
+      content: id,
+      nodeClass,
+      color: classDefinitions.get(nodeClass) || COLORS.default
+    }
+  };
+};
+const parseAttackFlow = (mmdText) => {
+  const nodes = [];
+  const edges = [];
+  const nodeMap = /* @__PURE__ */ new Map();
+  const lines = mmdText.split("\n");
+  const diagramTypeMatch = lines[0].match(/graph\s+(\w+)/);
+  const direction = diagramTypeMatch ? diagramTypeMatch[1] : "TB";
+  const classDefinitions = /* @__PURE__ */ new Map();
+  lines.forEach((line) => {
+    const classDefMatch = line.match(
+      /classDef\s+(\w+)\s+fill:(#[0-9a-fA-F]{3,6}|rgb\([^)]+\)|rgba\([^)]+\)|[a-zA-Z]+)/
+    );
+    if (classDefMatch) {
+      classDefinitions.set(classDefMatch[1], classDefMatch[2].trim());
+    }
+  });
+  if (!classDefinitions.has("operator")) {
+    classDefinitions.set("operator", COLORS.and);
+  }
+  lines.forEach((line) => {
+    if (line.startsWith(direction) || line.startsWith("classDef")) {
+      return;
+    }
+    const nodeMatch = line.match(/(\w+)\["([^"]+)"\]/);
+    const nodeWithParenMatch = line.match(/(\w+)\(\("([^"]+)"\)\)/);
+    if (nodeMatch) {
+      const id = nodeMatch[1];
+      const content = nodeMatch[2];
+      const isAndOperator = id === "op_and" || id === "AND" || AND_REGEX.test(id);
+      const node = createNode(id, content, classDefinitions, lines, isAndOperator);
+      nodeMap.set(id, node);
+    } else if (nodeWithParenMatch) {
+      const id = nodeWithParenMatch[1];
+      const content = nodeWithParenMatch[2];
+      const isAndOperator = /^op_and\d*$/.test(id) || id === "AND" || AND_REGEX.test(id) || content.toUpperCase() === "AND";
+      const node = createNode(id, content, classDefinitions, lines, isAndOperator);
+      nodeMap.set(id, node);
+    }
+  });
+  lines.forEach((line) => {
+    if (line.startsWith(direction) || line.startsWith("classDef")) {
+      return;
+    }
+    const edgeMatch = line.match(/(\w+)\s*-->\s*(?:\|([^|]+)\|)?\s*(\w+)/);
+    if (edgeMatch) {
+      const source = edgeMatch[1];
+      const target = edgeMatch[3];
+      if (!nodeMap.has(source)) {
+        const sourceNode = createPlaceholderNode(source, classDefinitions, lines);
+        nodeMap.set(source, sourceNode);
+      }
+      if (!nodeMap.has(target)) {
+        const targetNode = createPlaceholderNode(target, classDefinitions, lines);
+        nodeMap.set(target, targetNode);
+      }
+      const newEdge = {
+        id: `edge-${source}-${target}`,
+        source,
+        target
+      };
+      edges.push(newEdge);
+    }
+  });
+  nodeMap.forEach((node) => {
+    nodes.push(node);
+  });
+  return { nodes, edges, direction };
+};
+export {
+  AND_REGEX,
+  COLORS,
+  parseAttackFlow
+};

package/ui/AttackFlow/useAttackFlow.js

@@ -0,0 +1,193 @@
+import { useFullscreen } from "../../lib/useFullscreen.js";
+import { useListenOnResizeDebounce } from "../../lib/useListenOnResizeDebounce.js";
+import { applyNodeChanges, MarkerType, useReactFlow } from "@xyflow/react";
+import dagre from "dagre";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { COLORS, parseAttackFlow } from "./prependData.js";
+const useAttackFlow = (mmdContent) => {
+  const [nodes, setNodes] = useState([]);
+  const [edges, setEdges] = useState([]);
+  const [initialScrollPerformed, setInitialScrollPerformed] = useState(false);
+  const { zoomIn, zoomOut, setViewport, getViewport, fitView } = useReactFlow();
+  const reactFlowWrapper = useRef(null);
+  const { isFullscreen, enterFullscreen, exitFullscreen } = useFullscreen(
+    reactFlowWrapper,
+    (isFull) => {
+      if (!isFull) {
+        fitView({ minZoom: 0.2, duration: 500 });
+      }
+    }
+  );
+  const layoutWithDagre = useCallback(
+    (localNodes, localEdges, direction) => {
+      const dagreGraph = new dagre.graphlib.Graph();
+      dagreGraph.setDefaultEdgeLabel(() => ({}));
+      const nodeWidth = 310;
+      const nodeHeights = {};
+      const getNodeHeight = (node) => {
+        const nodeType = node.type || "attack";
+        if (nodeHeights[nodeType]) {
+          return nodeHeights[nodeType];
+        }
+        if (nodeType === "and") {
+          nodeHeights[nodeType] = 100;
+        } else {
+          const contentLength = node.data.content?.length || 0;
+          const estimatedHeight = 150 + Math.min(contentLength / 3, 150);
+          nodeHeights[nodeType] = estimatedHeight;
+        }
+        return nodeHeights[nodeType];
+      };
+      dagreGraph.setGraph({
+        rankdir: direction,
+        nodesep: 20,
+        ranksep: 0,
+        edgesep: 20
+      });
+      localNodes.forEach((node) => {
+        const nodeHeight = getNodeHeight(node);
+        dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
+      });
+      localEdges.forEach((edge) => {
+        dagreGraph.setEdge(edge.source, edge.target);
+      });
+      dagre.layout(dagreGraph);
+      return localNodes.map((node) => {
+        const nodeWithPosition = dagreGraph.node(node.id);
+        const nodeHeight = getNodeHeight(node);
+        return {
+          ...node,
+          dragHandle: `.node-${node.id}`,
+          draggable: true,
+          data: {
+            ...node.data,
+            nodeId: node.id
+          },
+          position: {
+            x: nodeWithPosition.x - nodeWidth / 2,
+            y: nodeWithPosition.y - nodeHeight / 2
+          }
+        };
+      });
+    },
+    []
+  );
+  const scrollToTopNodes = useCallback(() => {
+    if (nodes.length === 0) {
+      return;
+    }
+    const topY = Math.min(...nodes.map((node) => node.position.y));
+    const topLevelYThreshold = topY + 50;
+    const topLevelNodes = nodes.filter((node) => node.position.y <= topLevelYThreshold);
+    if (topLevelNodes.length > 0) {
+      const totalX = topLevelNodes.reduce((sum, node) => sum + node.position.x, 0);
+      const avgX = totalX / topLevelNodes.length;
+      const width = reactFlowWrapper.current?.clientWidth ?? window.innerWidth;
+      setViewport(
+        {
+          x: width / 2 - avgX - 155,
+          y: -topY + 100,
+          zoom: 1
+        },
+        { duration: 500 }
+      );
+    }
+  }, [nodes, setViewport]);
+  const handleCenterFocus = useCallback(() => {
+    if (isFullscreen) {
+      fitView({ minZoom: 0.8, duration: 500 });
+    } else {
+      scrollToTopNodes();
+    }
+  }, [fitView, isFullscreen, scrollToTopNodes]);
+  const toggleFullscreen = useCallback(() => {
+    if (!isFullscreen) {
+      enterFullscreen().then(() => {
+        setTimeout(() => {
+          fitView({ minZoom: 0.2, duration: 500 });
+        }, 600);
+      });
+    } else {
+      exitFullscreen().then(() => {
+        setTimeout(() => {
+          fitView({ minZoom: 0.8, duration: 500 });
+        }, 600);
+      });
+    }
+  }, [fitView, enterFullscreen, exitFullscreen, isFullscreen]);
+  const handleZoomIn = useCallback(() => {
+    zoomIn();
+  }, [zoomIn]);
+  const handleZoomOut = useCallback(() => {
+    zoomOut();
+  }, [zoomOut]);
+  const onNodesChange = useCallback((changes) => {
+    setNodes((nds) => applyNodeChanges(changes, nds));
+  }, []);
+  useEffect(() => {
+    if (nodes.length > 0 && !initialScrollPerformed) {
+      setTimeout(() => {
+        scrollToTopNodes();
+        setInitialScrollPerformed(true);
+      }, 300);
+    }
+  }, [nodes.length, scrollToTopNodes, initialScrollPerformed]);
+  const handleResize = () => {
+    if (nodes.length > 0 && initialScrollPerformed) {
+      const { x, y, zoom } = getViewport();
+      setViewport({ x, y, zoom }, { duration: 0 });
+    }
+  };
+  useListenOnResizeDebounce(handleResize);
+  useEffect(() => {
+    const loadAttackFlowFile = async () => {
+      try {
+        if (!mmdContent) {
+          return;
+        }
+        const { nodes: parsedNodes, edges: parsedEdges, direction } = parseAttackFlow(mmdContent);
+        if (parsedNodes.length > 0) {
+          const layoutedNodes = layoutWithDagre(parsedNodes, parsedEdges, direction);
+          setNodes(layoutedNodes);
+          const formattedEdges = parsedEdges.map((edge) => ({
+            ...edge,
+            type: "smoothstep",
+            animated: false,
+            style: {
+              stroke: edge.style?.stroke || COLORS.connector,
+              strokeWidth: 2
+            },
+            markerEnd: {
+              type: MarkerType.ArrowClosed,
+              color: COLORS.connector,
+              width: 16,
+              height: 16
+            },
+            pathOptions: {
+              offset: 15,
+              curvature: 0.3
+            }
+          }));
+          setEdges(formattedEdges);
+        }
+      } catch (err) {
+        console.error(err);
+      }
+    };
+    loadAttackFlowFile();
+  }, [mmdContent, layoutWithDagre]);
+  return {
+    isFullscreen,
+    nodes,
+    edges,
+    reactFlowWrapper,
+    onNodesChange,
+    handleCenterFocus,
+    handleZoomIn,
+    handleZoomOut,
+    toggleFullscreen
+  };
+};
+export {
+  useAttackFlow
+};