caplink-saas-ui-shared-component-library 0.4.8 → 0.5.1

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

@@ -0,0 +1,5 @@
+import { useDag } from './use-dag';
+import { useGetAdjacentNodes, useGetAdjacentNodesProps } from './use-get-adjacent-nodes';
+
+export { useDag, useGetAdjacentNodes };
+export type { useGetAdjacentNodesProps };

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

@@ -0,0 +1,57 @@
+import { Edge, Node } from '@xyflow/react';
+
+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[];
+    };
+};

package/dist/components/dag/hooks/use-get-adjacent-nodes.d.ts

@@ -0,0 +1,7 @@
+import { HandleType, Node } from '@xyflow/react';
+
+export type useGetAdjacentNodesProps = {
+    nodeId?: string;
+    type: HandleType;
+};
+export declare const useGetAdjacentNodes: ({ nodeId, type }: useGetAdjacentNodesProps) => Node[];

package/dist/components/dag/ui/adjacent-nodes/adjacent-nodes.d.ts

@@ -0,0 +1,10 @@
+import { HandleType, Node } from '@xyflow/react';
+
+export type AdjacentNodesProps = {
+    title?: string;
+    nodeId: string;
+    type: HandleType;
+    nodeValueKey: string;
+    onFindAdjacentNodes?: (nodes: Node[]) => void;
+};
+export declare function AdjacentNodes(props: AdjacentNodesProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/dag/ui/adjacent-nodes/index.d.ts

@@ -0,0 +1,4 @@
+import { AdjacentNodes, AdjacentNodesProps } from './adjacent-nodes';
+
+export { AdjacentNodes };
+export type { AdjacentNodesProps };

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

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

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

@@ -1,7 +1,9 @@
-import { NodeProps, Node } from '@xyflow/react';
+import { Node, NodeProps } from '@xyflow/react';
 
-export type NodeDataProps = {
+export type DefaultNodeDataProps = {
     content: React.ReactNode;
     className?: string;
+    targetHandleClassName?: string;
+    sourceHandleClassName?: string;
 } & Record<string, unknown>;
-export declare function DefaultNode({ id, data }: NodeProps<Node<NodeDataProps>>): import("react/jsx-runtime").JSX.Element;
+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,5 +1,6 @@
-import { DefaultNode, NodeDataProps } from './default-node';
 import { DefaultEdge } from './default-edge';
+import { DefaultNode, DefaultNodeDataProps } from './default-node';
+import { SkeletonNode } from './skeleton-node';
 
-export { DefaultNode, DefaultEdge };
-export type { NodeDataProps };
+export { DefaultNode, DefaultEdge, SkeletonNode };
+export type { DefaultNodeDataProps };

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

@@ -0,0 +1 @@
+export declare function SkeletonNode(): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,10 @@
+import { Edge, Node } from '@xyflow/react';
+
+export type ButtonChangeOrientationProps = {
+    orientation: 'vertical' | 'horizontal';
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, props: {
+        nodes: Node[];
+        edges: Edge[];
+    }) => void;
+};
+export declare const ButtonChangeOrientation: ({ onClick, orientation }: ButtonChangeOrientationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/float-menu/default-float-buttons/button-zoom-in.d.ts

@@ -0,0 +1 @@
+export declare const ButtonZoomIn: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/float-menu/default-float-buttons/button-zoom-out.d.ts

@@ -0,0 +1 @@
+export declare const ButtonZoomOut: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/float-menu/default-float-buttons/index.d.ts

@@ -0,0 +1,6 @@
+import { ButtonChangeOrientation, ButtonChangeOrientationProps } from './button-change-orientation';
+import { ButtonZoomIn } from './button-zoom-in';
+import { ButtonZoomOut } from './button-zoom-out';
+
+export { ButtonChangeOrientation, ButtonZoomIn, ButtonZoomOut };
+export type { ButtonChangeOrientationProps };

package/dist/components/dag/ui/float-menu/float-menu-button-group.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function FloatMenuButtonGroup(props: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/float-menu/float-menu-button.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function FloatMenuButton(props: React.HTMLAttributes<HTMLButtonElement>): import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/float-menu/float-menu.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export type FloatMenuProps = {
+    isLoading?: boolean;
+} & React.HTMLAttributes<HTMLDivElement>;
+export declare function FloatMenu(props: FloatMenuProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dag/ui/float-menu/index.d.ts

@@ -0,0 +1,6 @@
+import { FloatMenu, FloatMenuProps } from './float-menu';
+import { FloatMenuButton } from './float-menu-button';
+import { FloatMenuButtonGroup } from './float-menu-button-group';
+
+export { FloatMenu, FloatMenuButton, FloatMenuButtonGroup };
+export type { FloatMenuProps };

package/dist/components/dag/utils/get-layout-elements.d.ts

@@ -0,0 +1,49 @@
+import { Edge, Node, Position } from '@xyflow/react';
+
+interface GetLayoutedElementsProps {
+    nodes: Node[];
+    edges: Edge[];
+    direction?: 'vertical' | 'horizontal';
+}
+export declare const getLayoutedElements: (props: GetLayoutedElementsProps) => {
+    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[];
+};
+export {};

package/dist/components/sidebar/ui/content-split.d.ts

@@ -0,0 +1,4 @@
+export type ContentSplitProps = {
+    className?: string;
+};
+export declare function ContentSplit(props: ContentSplitProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,6 @@
+import { ContentSplit, ContentSplitProps } from './content-split';
+import { Sidebar, SidebarProps } from './sidebar';
+import { SidebarHeader } from './sidebar-header';
+
+export { Sidebar, SidebarHeader, ContentSplit };
+export type { SidebarProps, ContentSplitProps };

package/dist/components/sidebar/ui/sidebar-header.d.ts

@@ -0,0 +1,5 @@
+export type SidebarHeaderProps = {
+    title: string;
+    onClose?: () => void;
+};
+export declare function SidebarHeader(props: SidebarHeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,12 @@
+import { VariantProps } from 'class-variance-authority';
+import { PropsWithChildren } from 'react';
+
+declare const sidebarVariants: (props?: ({
+    direction?: "left" | "right" | "fixed" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type SidebarProps = PropsWithChildren<{
+    isOpen: boolean;
+    className?: string;
+} & VariantProps<typeof sidebarVariants>>;
+export declare function Sidebar(props: SidebarProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

package/dist/index.d.ts

@@ -1,11 +1,19 @@
-import { Spreadsheet } from './components/spreadsheet/ui';
+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 { MatrixTypes, SpreadsheetTypes } from './types';
+import { Spreadsheet } from './components/spreadsheet/ui';
+import { useGetAdjacentNodesProps } from './components/dag/hooks';
 import { Dag, DagContainer, DagProps } from './components/dag/ui';
-import { DagSidebar, DagSidebarHeader, DagSidebarHeaderProps, DagSidebarProps } from './components/dag/ui/dag-sidebar';
-import { DefaultEdge, DefaultNode, NodeDataProps } from './components/dag/ui/defaults';
+import { AdjacentNodes, AdjacentNodesProps } from './components/dag/ui/adjacent-nodes';
+import { DefaultEdge, DefaultNode, DefaultNodeDataProps, 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';
+import { ContentSplit, ContentSplitProps, Sidebar, SidebarHeader, SidebarProps } from './components/sidebar/ui';
+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';
 
 export declare const CapLink: {
     Spreadsheet: typeof Spreadsheet;
@@ -14,10 +22,137 @@ export declare const CapLink: {
     ImageUploader: typeof ImageUploader;
     Dag: typeof Dag;
     DagContainer: typeof DagContainer;
-    DagSidebar: typeof DagSidebar;
-    DagSidebarHeader: typeof DagSidebarHeader;
     DefaultNode: typeof DefaultNode;
     DefaultEdge: typeof DefaultEdge;
+    SkeletonNode: typeof SkeletonNode;
     SearchNode: typeof SearchNode;
+    IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+    iconButtonVariants: (props?: ({
+        variant?: "primary" | "success" | "info" | "warning" | "danger" | null | undefined;
+        backgroundVariant?: "transparent" | "primary" | null | undefined;
+        size?: "md" | "lg" | null | undefined;
+    } & import('class-variance-authority/types').ClassProp) | undefined) => string;
+    FloatButton: typeof FloatButton;
+    ContentSplit: typeof ContentSplit;
+    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[];
+    AdjacentNodes: typeof AdjacentNodes;
+    ButtonChangeOrientation: ({ onClick, orientation }: ButtonChangeOrientationProps) => import("react/jsx-runtime").JSX.Element;
+    ButtonZoomIn: () => import("react/jsx-runtime").JSX.Element;
+    ButtonZoomOut: () => import("react/jsx-runtime").JSX.Element;
+    FloatMenu: typeof FloatMenu;
+    FloatMenuButton: typeof FloatMenuButton;
+    FloatMenuButtonGroup: typeof FloatMenuButtonGroup;
+    EmptySearchIcon: typeof EmptySearchIcon;
+    SaaSBusiness: {
+        getFormattedId: typeof import('./shared/business/get-formatted-id').getFormattedId;
+        parseProductFeaturedData: typeof import('./shared/business/parse-product-featured-data').parseProductFeaturedData;
+        validateProductFeaturedData: typeof import('./shared/business/validate-product-featured-data').validateProductFeaturedData;
+        productFeaturedDataSchema: import('zod').ZodObject<{
+            groups: import('zod').ZodArray<import('zod').ZodObject<{
+                title: import('zod').ZodString;
+                svgIcon: import('zod').ZodString;
+                items: import('zod').ZodArray<import('zod').ZodObject<{
+                    title: import('zod').ZodString;
+                    rawData: import('zod').ZodString;
+                }, "strip", import('zod').ZodTypeAny, {
+                    title: string;
+                    rawData: string;
+                }, {
+                    title: string;
+                    rawData: string;
+                }>, "many">;
+            }, "strip", import('zod').ZodTypeAny, {
+                title: string;
+                items: {
+                    title: string;
+                    rawData: string;
+                }[];
+                svgIcon: string;
+            }, {
+                title: string;
+                items: {
+                    title: string;
+                    rawData: string;
+                }[];
+                svgIcon: string;
+            }>, "many">;
+        }, "strip", import('zod').ZodTypeAny, {
+            groups: {
+                title: string;
+                items: {
+                    title: string;
+                    rawData: string;
+                }[];
+                svgIcon: string;
+            }[];
+        }, {
+            groups: {
+                title: string;
+                items: {
+                    title: string;
+                    rawData: string;
+                }[];
+                svgIcon: string;
+            }[];
+        }>;
+    };
 };
-export type { FileUploaderProps, ImageUploaderProps, MatrixTypes, SpreadsheetTypes, DagProps, DagSidebarHeaderProps, DagSidebarProps, NodeDataProps, SearchNodeProps };
+export type { FileUploaderProps, ImageUploaderProps, MatrixTypes, SpreadsheetTypes, DagProps, DefaultNodeDataProps, SearchNodeProps, IconButtonProps, FloatButtonProps, ContentSplitProps, SidebarProps, Node, Edge, Connection, useGetAdjacentNodesProps, AdjacentNodesProps, ButtonChangeOrientationProps, FloatMenuProps, };