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

package/README.md

@@ -1,78 +1,78 @@
-# caplink-saas-ui-shared-component-library
-
-This project is a shared component library for the Caplink SaaS UI. It is built using React and Storybook.
-
-## Installation
-
-1. Clone the repository
-2. Run `npm install` to install the dependencies
-3. Run `npm run storybook` to start the Storybook server
-
-## Usage
-
-To use the components in your project, you can install the package from npm:
-
-```bash
-npm install @caplink/saas-ui-shared-component-library
-```
-
-Then import the components you need:
-
-```javascript
-import { Button } from '@caplink/saas-ui-shared-component-library';
-```
-
-## Development
-
-### Components
-
-All the components are located in the 'component-library' folder. Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
-
-An expected component development workflow would be:
-
-1. Create a new folder for the component
-2. Create the component file (e.g. MyComponent.js)
-3. Create a story file (e.g. MyComponent.stories.js)
-4. Create a test file (e.g. MyComponent.spec.js)
-5. Create a style file (e.g. MyComponent.css) (if needed, we use tailwindcss for styles)
-6. If it's a complex component, create a Cypress test file (e.g. MyComponent.spec.js in the 'cypress' folder)
-
-### Folder structure
-
-- All the components are located in the '/component-library' folder.
-- Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
-- Cypress tests are located in the 'cypress' folder and should follow the same folder structure as the components.
-
-### Storybook
-
-We use Storybook to develop and test the components. To start the Storybook server, run:
-
-```bash
-npm run sb:dev
-```
-
-```bash
-npm run sb:build
-```
-
-This will start the Storybook server and open a browser window with the Storybook UI. You can use this to develop and test the components.
-
-This is the gallery of components that we use to develop and test the components. It's also used to generate the documentation for the components, so it's important to keep it up to date and encompassing relevant states and use cases within the stories.
-
-## Testing
-
-We use multiple testing libraries to test our components. We use Jest for unit tests and Cypress for more complex integration tests that require a browser.
-
-- All unit tests are located in the same folder as the component they are testing. The file name should be the same as the component file name, but with a '.spec.xxx' suffix.
-- All Cypress tests are located in the 'cypress' folder.
-
-## Contributing
-
-This is a project for the Caplink SaaS UI team. If you are a member of the team, you can contribute to this project by following the standard Git workflow:
-
-1. Create a new branch for your feature or bug fix
-2. Make your changes
-3. Push your branch to the remote repository
-4. Create a pull request
-
-Developing components with tests is a requirement for contributing to this project.
+# caplink-saas-ui-shared-component-library
+
+This project is a shared component library for the Caplink SaaS UI. It is built using React and Storybook.
+
+## Installation
+
+1. Clone the repository
+2. Run `npm install` to install the dependencies
+3. Run `npm run storybook` to start the Storybook server
+
+## Usage
+
+To use the components in your project, you can install the package from npm:
+
+```bash
+npm install @caplink/saas-ui-shared-component-library
+```
+
+Then import the components you need:
+
+```javascript
+import { Button } from '@caplink/saas-ui-shared-component-library';
+```
+
+## Development
+
+### Components
+
+All the components are located in the 'component-library' folder. Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
+
+An expected component development workflow would be:
+
+1. Create a new folder for the component
+2. Create the component file (e.g. MyComponent.js)
+3. Create a story file (e.g. MyComponent.stories.js)
+4. Create a test file (e.g. MyComponent.spec.js)
+5. Create a style file (e.g. MyComponent.css) (if needed, we use tailwindcss for styles)
+6. If it's a complex component, create a Cypress test file (e.g. MyComponent.spec.js in the 'cypress' folder)
+
+### Folder structure
+
+- All the components are located in the '/component-library' folder.
+- Each component should be in its own folder, with the component file and any other files it needs (like styles, tests, etc).
+- Cypress tests are located in the 'cypress' folder and should follow the same folder structure as the components.
+
+### Storybook
+
+We use Storybook to develop and test the components. To start the Storybook server, run:
+
+```bash
+npm run sb:dev
+```
+
+```bash
+npm run sb:build
+```
+
+This will start the Storybook server and open a browser window with the Storybook UI. You can use this to develop and test the components.
+
+This is the gallery of components that we use to develop and test the components. It's also used to generate the documentation for the components, so it's important to keep it up to date and encompassing relevant states and use cases within the stories.
+
+## Testing
+
+We use multiple testing libraries to test our components. We use Jest for unit tests and Cypress for more complex integration tests that require a browser.
+
+- All unit tests are located in the same folder as the component they are testing. The file name should be the same as the component file name, but with a '.spec.xxx' suffix.
+- All Cypress tests are located in the 'cypress' folder.
+
+## Contributing
+
+This is a project for the Caplink SaaS UI team. If you are a member of the team, you can contribute to this project by following the standard Git workflow:
+
+1. Create a new branch for your feature or bug fix
+2. Make your changes
+3. Push your branch to the remote repository
+4. Create a pull request
+
+Developing components with tests is a requirement for contributing to this project.

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,116 @@
+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;
+    hideHandles?: boolean;
+    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 type DefaultEdgeProps = {
+    edgePath?: 'simpleBezier' | 'smoothStep';
+} & Record<string, unknown>;
+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: (props: {
+        direction: 'vertical' | 'horizontal';
+        nodeHeight?: number;
+        nodeWidth?: number;
+    }) => {
+        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 { DefaultEdgeProps, Edge, EdgeProps } from '../../model/dag-types';
 
-export declare function DefaultEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, source, target, }: EdgeProps): import("react/jsx-runtime").JSX.Element;
+export declare function DefaultEdge({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, style, markerEnd, source, target, data, }: EdgeProps<Edge<DefaultEdgeProps>>): 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';
@@ -7,5 +7,7 @@ export type ButtonChangeOrientationProps = {
         edges: Edge[];
     }) => void;
     shouldFitView?: boolean;
+    nodeHeight?: number;
+    nodeWidth?: number;
 };
-export declare const ButtonChangeOrientation: ({ onClick, orientation, shouldFitView, }: ButtonChangeOrientationProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ButtonChangeOrientation: ({ onClick, orientation, shouldFitView, nodeHeight, nodeWidth, }: ButtonChangeOrientationProps) => import("react/jsx-runtime").JSX.Element;

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/components/dag/utils/get-layout-elements.d.ts

@@ -1,9 +1,11 @@
 import { Edge, Node, Position } from '@xyflow/react';
 
-interface GetLayoutedElementsProps {
+export interface GetLayoutedElementsProps {
     nodes: Node[];
     edges: Edge[];
     direction?: 'vertical' | 'horizontal';
+    nodeWidth?: number;
+    nodeHeight?: number;
 }
 export declare const getLayoutedElements: (props: GetLayoutedElementsProps) => {
     nodes: {
@@ -46,4 +48,3 @@ export declare const getLayoutedElements: (props: GetLayoutedElementsProps) => {
     }[];
     edges: Edge[];
 };
-export {};

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,8 @@ 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';
+import { GetLayoutedElementsProps } from './components/dag/utils/get-layout-elements';
 
 export declare const CapLink: {
     Spreadsheet: typeof Spreadsheet;
@@ -37,64 +38,10 @@ 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;
+    ButtonChangeOrientation: ({ onClick, orientation, shouldFitView, nodeHeight, nodeWidth, }: ButtonChangeOrientationProps) => import("react/jsx-runtime").JSX.Element;
     ButtonZoomIn: () => import("react/jsx-runtime").JSX.Element;
     ButtonZoomOut: () => import("react/jsx-runtime").JSX.Element;
     FloatMenu: typeof FloatMenu;
@@ -154,5 +101,46 @@ export declare const CapLink: {
             }[];
         }>;
     };
+    getLayoutedElements: (props: GetLayoutedElementsProps) => {
+        nodes: {
+            targetPosition: import('@xyflow/system').Position;
+            sourcePosition: import('@xyflow/system').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/system').CoordinateExtent | undefined;
+            expandParent?: boolean | undefined;
+            ariaLabel?: string | undefined;
+            origin?: import('@xyflow/system').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: import('@xyflow/react').Edge[];
+    };
 };
-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, GetLayoutedElementsProps };