@gostack-framework/ui 0.0.0-stage → 0.1.0

package/src/components/react-flow/GlowEdge.tsx

@@ -0,0 +1,238 @@
+import {
+    Button,
+    Dialog,
+    DialogContent,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+} from "../../index";
+import { useLanguage } from "@gostack-framework/react";
+import {
+    EdgeLabelRenderer,
+    getBezierPath,
+    useReactFlow,
+    type EdgeProps,
+} from "@xyflow/react";
+import { Unlink } from "lucide-react";
+import React, { useContext, useState } from "react";
+import { FlowEventsContext } from "./ReactFlowCanvas";
+
+export function GlowEdge({
+    id,
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    style = {},
+    markerEnd,
+    data,
+}: EdgeProps) {
+    const [isHovered, setIsHovered] = useState(false);
+    const [isConfirmOpen, setIsConfirmOpen] = useState(false);
+    const [buttonPos, setButtonPos] = useState<{ x: number; y: number } | null>(
+        null,
+    );
+
+    const { screenToFlowPosition } = useReactFlow();
+    const events = useContext(FlowEventsContext);
+    const edgeData = data as any;
+
+    const { t } = useLanguage("shared");
+
+    const defaultTooltip = edgeData?.isClassificationLink
+        ? t("deleteClassification", "Delete Classification")
+        : edgeData?.isTeamLink
+          ? t("unlinkTeam", "Unlink Team")
+          : t("unlinkConnection", "Unlink Connection");
+    const tooltipText = edgeData?.tooltip || defaultTooltip;
+
+    const defaultConfirmTitle = edgeData?.isClassificationLink
+        ? t("deleteClassification", "Delete Classification")
+        : t("unlinkTeamAssignment", "Unlink Team Assignment");
+    const confirmTitle = edgeData?.confirmTitle || defaultConfirmTitle;
+
+    const defaultConfirmDescription = edgeData?.isClassificationLink
+        ? t(
+              "deleteClassificationConfirm",
+              "Are you sure you want to delete this classification? This will permanently delete the classification and all its children. This action cannot be undone.",
+          )
+        : t(
+              "unlinkTeamConfirm",
+              "Are you sure you want to remove this team assignment?",
+          );
+    const confirmDescription =
+        edgeData?.confirmDescription || defaultConfirmDescription;
+
+    const defaultConfirmText = edgeData?.isClassificationLink
+        ? t("delete", "Delete")
+        : t("unlink", "Unlink");
+    const confirmText = edgeData?.confirmText || defaultConfirmText;
+
+    const defaultCancelText = t("cancel", "Cancel");
+    const cancelText = edgeData?.cancelText || defaultCancelText;
+
+    const [edgePath, labelX, labelY] = getBezierPath({
+        sourceX,
+        sourceY,
+        sourcePosition,
+        targetX,
+        targetY,
+        targetPosition,
+    });
+
+    const handleMouseEnter = (event: React.MouseEvent) => {
+        if (isConfirmOpen) return;
+        const flowPos = screenToFlowPosition({
+            x: event.clientX,
+            y: event.clientY,
+        });
+        setButtonPos(flowPos);
+        setIsHovered(true);
+    };
+
+    const handleMouseLeave = () => {
+        if (isConfirmOpen) return;
+        setIsHovered(false);
+    };
+
+    const onUnlink = (event: React.MouseEvent) => {
+        event.stopPropagation();
+        if (edgeData?.isTeamLink || edgeData?.isClassificationLink) {
+            setIsConfirmOpen(true);
+        } else {
+            if (events?.onEdgesChange) {
+                events.onEdgesChange([{ id, type: "remove" }]);
+            }
+        }
+    };
+
+    const posX = buttonPos?.x ?? labelX;
+    const posY = buttonPos?.y ?? labelY;
+
+    return (
+        <>
+            {/* Glowing trace background under the main path on hover */}
+            {isHovered && (
+                <path
+                    d={edgePath}
+                    fill="none"
+                    stroke={style.stroke || "var(--color-dashboard-primary)"}
+                    strokeWidth={(Number(style.strokeWidth) || 2) + 6}
+                    className="transition-opacity duration-300 opacity-40 animate-pulse"
+                    style={{
+                        filter: `drop-shadow(0 0 6px ${style.stroke || "var(--color-dashboard-primary)"})`,
+                    }}
+                />
+            )}
+
+            {/* Main visible path */}
+            <path
+                id={id}
+                d={edgePath}
+                fill="none"
+                stroke={style.stroke || "var(--color-dashboard-primary)"}
+                strokeWidth={
+                    isHovered
+                        ? (Number(style.strokeWidth) || 2) + 1
+                        : style.strokeWidth || 2
+                }
+                className="transition-opacity duration-300"
+                style={{
+                    ...style,
+                    opacity: isHovered ? 1 : 0.7,
+                    strokeDasharray: isHovered ? "5" : "none",
+                    animation: isHovered
+                        ? "react-flow__dashdelay 0.6s linear infinite"
+                        : "none",
+                }}
+                markerEnd={markerEnd}
+            />
+
+            {/* Invisible thick path to capture hover/mouse events easily */}
+            <path
+                d={edgePath}
+                fill="none"
+                stroke="transparent"
+                strokeWidth={16}
+                className="cursor-pointer"
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            />
+
+            {/* Hover-spawned Unlink Button positioned at entry point */}
+            {isHovered && (
+                <EdgeLabelRenderer>
+                    <div
+                        style={{
+                            position: "absolute",
+                            transform: `translate(-50%, -50%) translate(${posX}px, ${posY}px)`,
+                            pointerEvents: "all",
+                        }}
+                        className="nodrag nopan flex flex-col items-center gap-1.5 z-50 animate-in fade-in zoom-in-95 duration-150"
+                        onMouseEnter={() => setIsHovered(true)}
+                        onMouseLeave={handleMouseLeave}
+                    >
+                        <div className="bg-dashboard-card text-dashboard-foreground text-[11px] font-semibold px-2.5 py-1 rounded-xl border border-dashboard-border shadow-xl whitespace-nowrap leading-tight text-center pointer-events-none">
+                            {tooltipText}
+                        </div>
+                        <button
+                            type="button"
+                            onClick={onUnlink}
+                            className="w-5 h-5 rounded-full bg-dashboard-destructive hover:bg-dashboard-destructive/90 text-white flex items-center justify-center shadow-lg border border-dashboard-border transition-all duration-200 hover:scale-110 active:scale-95 cursor-pointer"
+                            title={tooltipText}
+                            aria-label={tooltipText}
+                        >
+                            <Unlink className="size-2.5 stroke-[2.5]" />
+                        </button>
+                    </div>
+                </EdgeLabelRenderer>
+            )}
+
+            {/* Confirmation Dialog */}
+            {(edgeData?.isTeamLink || edgeData?.isClassificationLink) && (
+                <Dialog open={isConfirmOpen} onOpenChange={setIsConfirmOpen}>
+                    <DialogContent className="sm:max-w-md bg-dashboard-background border-dashboard-border text-dashboard-foreground">
+                        <DialogHeader className="pb-4 border-b border-dashboard-border">
+                            <DialogTitle className="text-dashboard-foreground">
+                                {confirmTitle}
+                            </DialogTitle>
+                        </DialogHeader>
+                        <div className="py-4 text-sm text-dashboard-muted-foreground">
+                            {confirmDescription}
+                        </div>
+                        <DialogFooter className="pt-4 border-t border-dashboard-border gap-2">
+                            <Button
+                                variant="outline"
+                                onClick={() => setIsConfirmOpen(false)}
+                            >
+                                {cancelText}
+                            </Button>
+                            <Button
+                                onClick={() => {
+                                    setIsConfirmOpen(false);
+                                    setIsHovered(false); // Reset hover state
+                                    if (
+                                        edgeData.isTeamLink &&
+                                        edgeData.onUnlink
+                                    ) {
+                                        edgeData.onUnlink();
+                                    } else if (
+                                        edgeData.isClassificationLink &&
+                                        edgeData.onDelete
+                                    ) {
+                                        edgeData.onDelete();
+                                    }
+                                }}
+                                className="bg-dashboard-destructive hover:bg-dashboard-destructive/90 text-white border-0"
+                            >
+                                {confirmText}
+                            </Button>
+                        </DialogFooter>
+                    </DialogContent>
+                </Dialog>
+            )}
+        </>
+    );
+}

package/src/components/react-flow/ReactFlowCanvas.tsx

@@ -0,0 +1,112 @@
+import { cn } from "../../support/utils";
+import {
+    Background,
+    Controls,
+    MiniMap,
+    ReactFlow,
+    ReactFlowProvider,
+    useReactFlow,
+    type OnEdgesChange,
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { createContext, useEffect } from "react";
+import { GlowEdge } from "./GlowEdge";
+import type { RelationshipFlowProps } from "./types";
+
+export const FlowEventsContext = createContext<{
+    onEdgesChange?: OnEdgesChange;
+} | null>(null);
+
+const edgeTypes = {
+    glow: GlowEdge,
+};
+
+const DEFAULT_UI = {
+    showBackground: true,
+    showControls: true,
+    showMiniMap: true,
+    fitView: true,
+    background: {
+        color: "var(--color-dashboard-border)",
+        gap: 24,
+        size: 2,
+    },
+    controlsClassName:
+        "bg-dashboard-card border border-dashboard-border rounded-lg overflow-hidden",
+    miniMapClassName:
+        "bg-dashboard-card border border-dashboard-border rounded-lg overflow-hidden",
+    nodeColor: "var(--color-dashboard-primary)",
+    maskColor: "var(--color-dashboard-background)",
+} as const;
+
+function ReactFlowCanvasInner({
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    nodeTypes,
+    ui,
+    canvasClassName,
+    children,
+    renderNodes,
+}: Omit<RelationshipFlowProps, "header" | "className">) {
+    const config = { ...DEFAULT_UI, ...ui };
+    const renderedNodes = renderNodes ? renderNodes(nodes) : nodes;
+    const { fitView } = useReactFlow();
+
+    useEffect(() => {
+        const handleFit = () => {
+            setTimeout(() => {
+                fitView({ duration: 400, padding: 0.2 });
+            }, 100);
+        };
+        window.addEventListener("reactflow-fitview", handleFit);
+        return () => window.removeEventListener("reactflow-fitview", handleFit);
+    }, [fitView]);
+
+    return (
+        <FlowEventsContext.Provider value={{ onEdgesChange }}>
+            <ReactFlow
+                nodes={renderedNodes}
+                edges={edges}
+                onNodesChange={onNodesChange}
+                onEdgesChange={onEdgesChange}
+                onConnect={onConnect}
+                nodeTypes={nodeTypes}
+                edgeTypes={edgeTypes}
+                fitView={config.fitView}
+                className={cn("bg-dashboard-background", canvasClassName)}
+            >
+                {config.showBackground && (
+                    <Background
+                        color={config.background?.color}
+                        gap={config.background?.gap}
+                        size={config.background?.size}
+                    />
+                )}
+                {config.showControls && (
+                    <Controls className={config.controlsClassName} />
+                )}
+                {config.showMiniMap && (
+                    <MiniMap
+                        nodeColor={config.nodeColor}
+                        maskColor={config.maskColor}
+                        className={config.miniMapClassName}
+                    />
+                )}
+                {children}
+            </ReactFlow>
+        </FlowEventsContext.Provider>
+    );
+}
+
+export function ReactFlowCanvas(
+    props: Omit<RelationshipFlowProps, "header" | "className">,
+) {
+    return (
+        <ReactFlowProvider>
+            <ReactFlowCanvasInner {...props} />
+        </ReactFlowProvider>
+    );
+}

package/src/components/react-flow/RelationshipFlow.tsx

@@ -0,0 +1,50 @@
+import { cn } from "../../support/utils";
+import { FlowGraphHeader } from "./FlowGraphHeader";
+import { ReactFlowCanvas } from "./ReactFlowCanvas";
+import { FlowOrientationContext } from "./types";
+import type { RelationshipFlowProps } from "./types";
+
+export function RelationshipFlow({
+    nodes,
+    edges,
+    onNodesChange,
+    onEdgesChange,
+    onConnect,
+    nodeTypes,
+    ui,
+    header,
+    className,
+    canvasClassName,
+    children,
+    renderNodes,
+    orientation = "horizontal",
+}: RelationshipFlowProps) {
+    return (
+        <FlowOrientationContext.Provider value={orientation}>
+            <div
+                className={cn(
+                    "h-full flex flex-col bg-dashboard-background relative overflow-hidden",
+                    className,
+                )}
+            >
+                {header && <FlowGraphHeader {...header} />}
+
+                <div className="flex-1 w-full h-full">
+                    <ReactFlowCanvas
+                        nodes={nodes}
+                        edges={edges}
+                        onNodesChange={onNodesChange}
+                        onEdgesChange={onEdgesChange}
+                        onConnect={onConnect}
+                        nodeTypes={nodeTypes}
+                        ui={ui}
+                        canvasClassName={canvasClassName}
+                        renderNodes={renderNodes}
+                    >
+                        {children}
+                    </ReactFlowCanvas>
+                </div>
+            </div>
+        </FlowOrientationContext.Provider>
+    );
+}

package/src/components/react-flow/TreeFlowLayout.tsx

@@ -0,0 +1,187 @@
+import { Plus, SlidersHorizontal } from "lucide-react";
+import { ReactNode } from "react";
+import { Button } from "../button";
+import { FeatureLayout } from "../layout/FeatureLayout";
+import { ThemedText } from "../ThemedText";
+import { RelationshipFlow } from "./RelationshipFlow";
+import type { RelationshipFlowProps } from "./types";
+
+export interface TreeFlowLayoutProps {
+    title: ReactNode;
+    subtitle?: ReactNode;
+    tabs?: {
+        id: string;
+        label: ReactNode;
+        icon?: ReactNode;
+    }[];
+    activeTab?: string;
+    onTabChange?: (tabId: string) => void;
+    viewMode: "tree" | "flow";
+    onViewModeChange: (viewMode: "tree" | "flow") => void;
+    isDataLoading?: boolean;
+    treePanelTitle?: ReactNode;
+    addBtnLabel?: string;
+    onAddRoot?: () => void;
+
+    searchQuery?: string;
+    onSearchChange?: (val: string) => void;
+    onFilterToggle?: () => void;
+    isFilterActive?: boolean;
+    filterSidebar?: ReactNode;
+
+    // Flow/Diagram Props
+    flowProps: Omit<RelationshipFlowProps, "className">;
+
+    // Custom Tree View Component/Content
+    treeContent: ReactNode;
+
+    // Any extra modals/dialogs
+    children?: ReactNode;
+}
+
+export function TreeFlowLayout({
+    title,
+    subtitle,
+    tabs,
+    activeTab,
+    onTabChange,
+    viewMode,
+    onViewModeChange,
+    isDataLoading = false,
+    treePanelTitle,
+    addBtnLabel = "Add Item",
+    onAddRoot,
+    searchQuery,
+    onSearchChange,
+    onFilterToggle,
+    isFilterActive,
+    filterSidebar,
+    flowProps,
+    treeContent,
+    children,
+}: TreeFlowLayoutProps) {
+    return (
+        <FeatureLayout>
+            <FeatureLayout.Header>
+                <div id="catalog-tabs-container" className="flex-1 min-w-0">
+                    {tabs && tabs.length > 0 && activeTab && onTabChange && (
+                        <FeatureLayout.Tabs
+                            tabs={tabs.map((tab) => ({
+                                id: tab.id,
+                                label: (
+                                    <span className="flex items-center gap-2">
+                                        {tab.icon}
+                                        {tab.label}
+                                    </span>
+                                ),
+                            }))}
+                            activeTab={activeTab}
+                            onChange={onTabChange}
+                        />
+                    )}
+                </div>
+
+                <div
+                    id="catalog-search-filters"
+                    className="flex items-center gap-2 shrink-0"
+                >
+                    <FeatureLayout.Toolbar className="shrink-0 flex items-center gap-2.5">
+                        {onSearchChange && (
+                            <FeatureLayout.Search
+                                value={searchQuery || ""}
+                                onChange={onSearchChange}
+                                placeholder="Search..."
+                            />
+                        )}
+                        {onFilterToggle && (
+                            <FeatureLayout.IconButton
+                                icon={SlidersHorizontal}
+                                onClick={onFilterToggle}
+                                active={isFilterActive}
+                            />
+                        )}
+                        <FeatureLayout.ViewToggle
+                            id="classification-view-toggle"
+                            view={viewMode}
+                            onChange={(mode) =>
+                                onViewModeChange(
+                                    mode === "tree" ? "tree" : "flow",
+                                )
+                            }
+                            options={["tree", "flow"]}
+                        />
+                        {viewMode === "tree" && onAddRoot && (
+                            <FeatureLayout.CreateButton
+                                id="catalog-new-service-btn"
+                                icon={Plus}
+                                onClick={onAddRoot}
+                            >
+                                <ThemedText variant="body">
+                                    {addBtnLabel}
+                                </ThemedText>
+                            </FeatureLayout.CreateButton>
+                        )}
+                    </FeatureLayout.Toolbar>
+                </div>
+            </FeatureLayout.Header>
+
+            <FeatureLayout.Body>
+                <FeatureLayout.Content>
+                    <div className="h-full flex flex-col min-h-0 overflow-hidden">
+                        {viewMode === "tree" ? (
+                            <div
+                                id="catalog-list-table"
+                                className="flex-1 flex flex-col min-h-0 overflow-hidden animate-in fade-in duration-300"
+                            >
+                                <section className="flex flex-col flex-1 min-h-0 bg-dashboard-card border border-dashboard-border rounded-[24px] shadow-sm p-5">
+                                    <div className="flex items-center justify-between mb-4 flex-none border-b border-dashboard-border pb-3">
+                                        <h2 className="text-sm font-bold text-dashboard-foreground flex items-center gap-2">
+                                            {treePanelTitle || "Hierarchy Tree"}
+                                        </h2>
+                                        {onAddRoot && (
+                                            <Button
+                                                onClick={onAddRoot}
+                                                className="bg-transparent hover:bg-dashboard-primary/95 text-dashboard-foreground hover:text-dashboard-background rounded-full px-4 text-xs font-semibold flex items-center gap-1.5 cursor-pointer h-9 shrink-0 shadow-sm"
+                                            >
+                                                <Plus className="w-3.5 h-3.5" />
+                                                {addBtnLabel}
+                                            </Button>
+                                        )}
+                                    </div>
+                                    <div className="flex-1 overflow-y-auto pr-1">
+                                        {isDataLoading ? (
+                                            <div className="p-10 text-sm text-center text-dashboard-muted-foreground flex flex-col items-center justify-center h-full">
+                                                <div className="w-8 h-8 border-4 border-dashboard-primary/30 border-t-dashboard-primary rounded-full animate-spin mb-4" />
+                                                Loading items...
+                                            </div>
+                                        ) : (
+                                            treeContent
+                                        )}
+                                    </div>
+                                </section>
+                            </div>
+                        ) : (
+                            <div className="flex-1 w-full bg-dashboard-card border border-dashboard-border rounded-[24px] overflow-hidden shadow-sm relative min-h-0 animate-in fade-in duration-300">
+                                {isDataLoading ? (
+                                    <div className="w-full h-full flex flex-col items-center justify-center text-sm text-dashboard-muted-foreground">
+                                        <div className="w-8 h-8 border-4 border-dashboard-primary/30 border-t-dashboard-primary rounded-full animate-spin mb-4" />
+                                        Loading diagram...
+                                    </div>
+                                ) : (
+                                    <RelationshipFlow
+                                        {...flowProps}
+                                        className="h-full w-full"
+                                    />
+                                )}
+                            </div>
+                        )}
+                    </div>
+                </FeatureLayout.Content>
+
+                {filterSidebar}
+            </FeatureLayout.Body>
+            {children}
+        </FeatureLayout>
+    );
+}
+export default TreeFlowLayout;

package/src/components/react-flow/edges.ts

@@ -0,0 +1,39 @@
+import { Edge, MarkerType } from "@xyflow/react";
+
+export interface StyledEdgeOptions {
+    animated?: boolean;
+    strokeColor?: string;
+    strokeWidth?: number;
+    data?: any;
+}
+
+export function createStyledEdge(
+    id: string,
+    source: string,
+    target: string,
+    options: StyledEdgeOptions = {},
+): Edge {
+    const {
+        animated = true,
+        strokeColor = "var(--color-dashboard-primary)",
+        strokeWidth = 2,
+        data,
+    } = options;
+
+    return {
+        id,
+        source,
+        target,
+        type: "glow",
+        animated,
+        style: {
+            stroke: strokeColor,
+            strokeWidth,
+        },
+        markerEnd: {
+            type: MarkerType.ArrowClosed,
+            color: strokeColor,
+        },
+        data,
+    };
+}

package/src/components/react-flow/index.ts

@@ -0,0 +1,9 @@
+export * from "./types";
+export * from "./layout";
+export * from "./edges";
+export * from "./useFlowGraph";
+export * from "./useFlowGraphSync";
+export * from "./ReactFlowCanvas";
+export * from "./FlowGraphHeader";
+export * from "./RelationshipFlow";
+export * from "./TreeFlowLayout";

package/src/components/react-flow/layout.ts

@@ -0,0 +1,16 @@
+import type { FlowGraphLayoutConfig } from "./types";
+
+export function computeVerticalPositions(
+    count: number,
+    { anchorX, centerY, spacing }: FlowGraphLayoutConfig,
+): { x: number; y: number }[] {
+    if (count <= 0) return [];
+
+    const totalHeight = (count - 1) * spacing;
+    const startY = centerY - totalHeight / 2;
+
+    return Array.from({ length: count }, (_, index) => ({
+        x: anchorX,
+        y: startY + index * spacing,
+    }));
+}