caplink-saas-ui-shared-component-library 0.5.3 → 0.5.4

package/dist/components/dag/hooks/use-dag.d.ts

@@ -1,57 +1,3 @@
-import { Edge, Node } from '@xyflow/react';
+import { UseDagProps } from '../model';
 
-export declare const useDag: () => {
-    getEdges: () => Edge[];
-    getNodes: () => Node[];
-    getNode: (id: string) => Node | undefined;
-    getEdge: (id: string) => Edge | undefined;
-    zoomIn: import('@xyflow/system').ZoomInOut;
-    zoomOut: import('@xyflow/system').ZoomInOut;
-    fitView: import('@xyflow/react').FitView;
-    addEdges: (payload: Edge | Edge[]) => void;
-    addNodes: (payload: Node | Node[]) => void;
-    deleteNodes: (node: Node | Node[]) => void;
-    deleteEdges: (edge: Edge | Edge[]) => void;
-    getNodeEdges: (nodeId: string) => Edge[];
-    changeOrientation: (direction: 'vertical' | 'horizontal') => {
-        nodes: {
-            targetPosition: import('@xyflow/react').Position;
-            sourcePosition: import('@xyflow/react').Position;
-            position: {
-                x: number;
-                y: number;
-            };
-            id: string;
-            data: Record<string, unknown>;
-            type?: string | undefined;
-            hidden?: boolean | undefined;
-            selected?: boolean | undefined;
-            dragging?: boolean | undefined;
-            draggable?: boolean | undefined;
-            selectable?: boolean | undefined;
-            connectable?: boolean | undefined;
-            deletable?: boolean | undefined;
-            dragHandle?: string | undefined;
-            width?: number | undefined;
-            height?: number | undefined;
-            initialWidth?: number | undefined;
-            initialHeight?: number | undefined;
-            parentId?: string | undefined;
-            zIndex?: number | undefined;
-            extent?: "parent" | import('@xyflow/react').CoordinateExtent | undefined;
-            expandParent?: boolean | undefined;
-            ariaLabel?: string | undefined;
-            origin?: import('@xyflow/react').NodeOrigin | undefined;
-            handles?: import('@xyflow/system').NodeHandle[] | undefined;
-            measured?: {
-                width?: number | undefined;
-                height?: number | undefined;
-            } | undefined;
-            style?: import('react').CSSProperties | undefined;
-            className?: string | undefined;
-            resizing?: boolean | undefined;
-            focusable?: boolean | undefined;
-        }[];
-        edges: Edge[];
-    };
-};
+export declare const useDag: () => UseDagProps;

package/dist/components/dag/model/dag-types.d.ts

@@ -0,0 +1,108 @@
+import { ComponentType, CSSProperties, PropsWithChildren } from 'react';
+
+export type Node<T extends Record<string, unknown> = Record<string, unknown>> = {
+    id: string;
+    data: T;
+    type?: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    targetPosition?: Position;
+    sourcePosition?: Position;
+    dragging?: boolean;
+    zIndex?: number;
+    selected?: boolean;
+    style?: CSSProperties;
+    className?: string;
+};
+export type NodeProps<T extends Node = Node> = Pick<T, 'id' | 'data' | 'sourcePosition' | 'targetPosition' | 'selected'> & Required<Pick<T, 'type' | 'dragging' | 'zIndex'>> & {
+    isConnectable: boolean;
+    positionAbsoluteX: number;
+    positionAbsoluteY: number;
+};
+export type DefaultNodeDataProps = {
+    content: React.ReactNode;
+    className?: string;
+    targetHandleClassName?: string;
+    sourceHandleClassName?: string;
+} & Record<string, unknown>;
+export type Edge<T extends Record<string, unknown> = Record<string, unknown>> = {
+    id: string;
+    animated?: boolean;
+    data?: T;
+    type?: string;
+    style?: React.CSSProperties;
+    selected?: boolean;
+    selectable?: boolean;
+    source: string;
+    target: string;
+    deletable?: boolean;
+};
+export type EdgePosition = {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition: Position;
+    targetPosition: Position;
+};
+export type EdgeProps<T extends Edge = Edge> = Pick<T, 'id' | 'animated' | 'data' | 'style' | 'selected' | 'source' | 'target' | 'selectable' | 'deletable'> & EdgePosition & {
+    markerEnd?: string;
+};
+export declare enum Position {
+    Left = "left",
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom"
+}
+export type Connection = {
+    source: string;
+    sourceHandle: string | null;
+    target: string;
+    targetHandle: string | null;
+};
+type NodeTypes = Record<string, ComponentType<NodeProps & {
+    data: unknown;
+    type: unknown;
+}>>;
+type EdgeTypes = Record<string, ComponentType<EdgeProps & {
+    data: unknown;
+    type: unknown;
+}>>;
+export type DagProps = PropsWithChildren<{
+    isLoading?: boolean;
+    initialNodes?: Node[];
+    initialEdges?: Edge[];
+    nodeTypes?: NodeTypes;
+    edgeTypes?: EdgeTypes;
+    onNodeClick?: (event: React.MouseEvent, node: Node) => void;
+    onNodeDragStop?: (event: React.MouseEvent, node: Node) => void;
+    onNodeDragStart?: (event: React.MouseEvent, node: Node) => void;
+    onConnect?: (connection: Connection) => void;
+}>;
+export type UseDagProps = {
+    getEdges: () => Edge[];
+    getNodes: () => Node[];
+    getNode: (nodeId: string) => Node | undefined;
+    getEdge: (edgeId: string) => Edge | undefined;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    fitView: (props: {
+        duration?: number;
+        maxZoom?: number;
+        minZoom?: number;
+        nodes?: Node[];
+        padding?: number;
+    }) => void;
+    addEdges: (edges: Edge[]) => void;
+    addNodes: (nodes: Node[]) => void;
+    deleteNodes: (node: Node | Node[]) => void;
+    deleteEdges: (edge: Edge | Edge[]) => void;
+    getNodeEdges: (nodeId: string) => Edge[];
+    changeOrientation: (direction: 'vertical' | 'horizontal') => {
+        nodes: Node[];
+        edges: Edge[];
+    };
+};
+export {};

package/dist/components/dag/model/index.d.ts

@@ -0,0 +1,4 @@
+import { Position, Connection, DagProps, DefaultNodeDataProps, Edge, EdgePosition, EdgeProps, Node, NodeProps, UseDagProps } from './dag-types';
+
+export { Position };
+export type { Connection, DagProps, DefaultNodeDataProps, Edge, EdgePosition, EdgeProps, Node, NodeProps, UseDagProps };

package/dist/components/dag/ui/dag.d.ts

@@ -1,8 +1,3 @@
-import { ReactFlowProps } from '@xyflow/react';
+import { DagProps } from '../model';
 
-export type DagProps = {
-    initialNodes: ReactFlowProps['nodes'];
-    initialEdges: ReactFlowProps['edges'];
-    isLoading?: boolean;
-};
-export declare function Dag(props: DagProps & Omit<ReactFlowProps, 'nodes' | 'edges'>): import("react/jsx-runtime").JSX.Element;
+export declare function Dag(props: DagProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/defaults/default-edge.d.ts

@@ -1,3 +1,3 @@
-import { EdgeProps } from '@xyflow/react';
+import { EdgeProps } from '../../model';
 
 export declare function DefaultEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, source, target, }: EdgeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/defaults/default-node.d.ts

@@ -1,9 +1,3 @@
-import { Node, NodeProps } from '@xyflow/react';
+import { DefaultNodeDataProps, Node, NodeProps } from '../../model';
 
-export type DefaultNodeDataProps = {
-    content: React.ReactNode;
-    className?: string;
-    targetHandleClassName?: string;
-    sourceHandleClassName?: string;
-} & Record<string, unknown>;
 export declare function DefaultNode({ id, selected, data, sourcePosition, targetPosition, }: NodeProps<Node<DefaultNodeDataProps>>): import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/defaults/index.d.ts

@@ -1,6 +1,5 @@
 import { DefaultEdge } from './default-edge';
-import { DefaultNode, DefaultNodeDataProps } from './default-node';
+import { DefaultNode } from './default-node';
 import { SkeletonNode } from './skeleton-node';
 
 export { DefaultNode, DefaultEdge, SkeletonNode };
-export type { DefaultNodeDataProps };

package/dist/components/dag/ui/float-menu/default-float-buttons/button-change-orientation.d.ts

@@ -1,4 +1,4 @@
-import { Edge, Node } from '@xyflow/react';
+import { Edge, Node } from '../../../model';
 
 export type ButtonChangeOrientationProps = {
     orientation: 'vertical' | 'horizontal';

package/dist/components/dag/ui/index.d.ts

@@ -1,5 +1,4 @@
-import { Dag, DagProps } from './dag';
+import { Dag } from './dag';
 import { DagContainer } from './dag-container';
 
 export { Dag, DagContainer };
-export type { DagProps };

package/dist/index.d.ts

@@ -1,11 +1,10 @@
-import { Connection, Edge, Node, Position } from '@xyflow/react';
 import { FileUploader, FileUploaderProps } from './components/file-uploader/ui';
 import { ImageUploader, ImageUploaderProps } from './components/image-uploader/ui';
 import { Spreadsheet } from './components/spreadsheet/ui';
 import { useGetAdjacentNodesProps } from './components/dag/hooks';
-import { Dag, DagContainer, DagProps } from './components/dag/ui';
+import { Dag, DagContainer } from './components/dag/ui';
 import { AdjacentNodes, AdjacentNodesProps } from './components/dag/ui/adjacent-nodes';
-import { DefaultEdge, DefaultNode, DefaultNodeDataProps, SkeletonNode } from './components/dag/ui/defaults';
+import { DefaultEdge, DefaultNode, SkeletonNode } from './components/dag/ui/defaults';
 import { FloatMenu, FloatMenuButton, FloatMenuButtonGroup, FloatMenuProps } from './components/dag/ui/float-menu';
 import { ButtonChangeOrientationProps } from './components/dag/ui/float-menu/default-float-buttons';
 import { SearchNode, SearchNodeProps } from './components/dag/ui/search-node';
@@ -14,6 +13,7 @@ import { EmptySearchIcon } from './shared/ui/empty-search-icon';
 import { FloatButton, FloatButtonProps } from './shared/ui/float-button';
 import { IconButtonProps } from './shared/ui/icon-button';
 import { MatrixTypes, SpreadsheetTypes } from './types';
+import { Position, Connection, DagProps, DefaultNodeDataProps, Edge, EdgePosition, EdgeProps, Node, NodeProps, UseDagProps } from './components/dag/model';
 
 export declare const CapLink: {
     Spreadsheet: typeof Spreadsheet;
@@ -37,62 +37,8 @@ export declare const CapLink: {
     Sidebar: typeof Sidebar;
     SidebarHeader: typeof SidebarHeader;
     Position: typeof Position;
-    useDag: () => {
-        getEdges: () => Edge[];
-        getNodes: () => Node[];
-        getNode: (id: string) => Node | undefined;
-        getEdge: (id: string) => Edge | undefined;
-        zoomIn: import('@xyflow/system').ZoomInOut;
-        zoomOut: import('@xyflow/system').ZoomInOut;
-        fitView: import('@xyflow/react').FitView;
-        addEdges: (payload: Edge | Edge[]) => void;
-        addNodes: (payload: Node | Node[]) => void;
-        deleteNodes: (node: Node | Node[]) => void;
-        deleteEdges: (edge: Edge | Edge[]) => void;
-        getNodeEdges: (nodeId: string) => Edge[];
-        changeOrientation: (direction: "horizontal" | "vertical") => {
-            nodes: {
-                targetPosition: Position;
-                sourcePosition: Position;
-                position: {
-                    x: number;
-                    y: number;
-                };
-                id: string;
-                data: Record<string, unknown>;
-                type?: string | undefined;
-                hidden?: boolean | undefined;
-                selected?: boolean | undefined;
-                dragging?: boolean | undefined;
-                draggable?: boolean | undefined;
-                selectable?: boolean | undefined;
-                connectable?: boolean | undefined;
-                deletable?: boolean | undefined;
-                dragHandle?: string | undefined;
-                width?: number | undefined;
-                height?: number | undefined;
-                initialWidth?: number | undefined;
-                initialHeight?: number | undefined;
-                parentId?: string | undefined;
-                zIndex?: number | undefined;
-                extent?: "parent" | import('@xyflow/react').CoordinateExtent | undefined;
-                expandParent?: boolean | undefined;
-                ariaLabel?: string | undefined;
-                origin?: import('@xyflow/react').NodeOrigin | undefined;
-                handles?: import('@xyflow/system').NodeHandle[] | undefined;
-                measured?: {
-                    width?: number | undefined;
-                    height?: number | undefined;
-                } | undefined;
-                style?: import('react').CSSProperties | undefined;
-                className?: string | undefined;
-                resizing?: boolean | undefined;
-                focusable?: boolean | undefined;
-            }[];
-            edges: Edge[];
-        };
-    };
-    useGetAdjacentNodes: ({ nodeId, type }: useGetAdjacentNodesProps) => Node[];
+    useDag: () => UseDagProps;
+    useGetAdjacentNodes: ({ nodeId, type }: useGetAdjacentNodesProps) => import('@xyflow/react').Node[];
     AdjacentNodes: typeof AdjacentNodes;
     ButtonChangeOrientation: ({ onClick, orientation, shouldFitView, }: ButtonChangeOrientationProps) => import("react/jsx-runtime").JSX.Element;
     ButtonZoomIn: () => import("react/jsx-runtime").JSX.Element;
@@ -155,4 +101,4 @@ export declare const CapLink: {
         }>;
     };
 };
-export type { FileUploaderProps, ImageUploaderProps, MatrixTypes, SpreadsheetTypes, DagProps, DefaultNodeDataProps, SearchNodeProps, IconButtonProps, FloatButtonProps, ContentSplitProps, SidebarProps, Node, Edge, Connection, useGetAdjacentNodesProps, AdjacentNodesProps, ButtonChangeOrientationProps, FloatMenuProps, };
+export type { FileUploaderProps, ImageUploaderProps, MatrixTypes, SpreadsheetTypes, SearchNodeProps, IconButtonProps, FloatButtonProps, ContentSplitProps, SidebarProps, useGetAdjacentNodesProps, AdjacentNodesProps, ButtonChangeOrientationProps, FloatMenuProps, Connection, DagProps, DefaultNodeDataProps, Edge, EdgePosition, EdgeProps, Node, NodeProps, UseDagProps, Position, };