@juspay/blend-design-system 0.0.21 → 0.0.22

package/dist/components/WorkflowCanvas/types.d.ts

@@ -0,0 +1,76 @@
+import { Node, Edge, NodeProps, EdgeProps, Connection } from 'reactflow';
+import { ReactNode } from 'react';
+export type { Node, Edge, NodeProps, EdgeProps, Connection };
+export declare enum NodeType {
+    DEFAULT = "default",
+    INPUT = "input",
+    OUTPUT = "output",
+    CUSTOM = "custom"
+}
+export declare enum EdgeType {
+    DEFAULT = "default",
+    STRAIGHT = "straight",
+    STEP = "step",
+    SMOOTHSTEP = "smoothstep",
+    SIMPLEBEZIER = "simplebezier"
+}
+export type BaseNodeData = {
+    label?: string;
+    description?: string;
+    icon?: ReactNode;
+    status?: 'default' | 'success' | 'error' | 'warning';
+    [key: string]: unknown;
+};
+export type BaseEdgeData = {
+    label?: string;
+    animated?: boolean;
+    [key: string]: unknown;
+};
+export type BlendNode = Node<BaseNodeData>;
+export type BlendEdge = Edge<BaseEdgeData>;
+export type WorkflowCanvasProps = {
+    nodes: BlendNode[];
+    edges: BlendEdge[];
+    onNodesChange?: (nodes: BlendNode[]) => void;
+    onEdgesChange?: (edges: BlendEdge[]) => void;
+    onConnect?: (connection: Connection) => void;
+    onNodeClick?: (event: React.MouseEvent, node: BlendNode) => void;
+    onEdgeClick?: (event: React.MouseEvent, edge: BlendEdge) => void;
+    onNodeDoubleClick?: (event: React.MouseEvent, node: BlendNode) => void;
+    onPaneClick?: (event: React.MouseEvent) => void;
+    height?: string | number;
+    width?: string | number;
+    fitView?: boolean;
+    showControls?: boolean;
+    controlsPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    showMinimap?: boolean;
+    showBackground?: boolean;
+    panOnScroll?: boolean;
+    zoomOnScroll?: boolean;
+    nodesDraggable?: boolean;
+    nodesConnectable?: boolean;
+    elementsSelectable?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    defaultZoom?: number;
+    children?: ReactNode;
+};
+export type CustomNodeProps = NodeProps<BaseNodeData> & {
+    selected: boolean;
+};
+export type CustomEdgeProps = EdgeProps<BaseEdgeData> & {
+    selected?: boolean;
+};
+export declare enum ControlButton {
+    ZOOM_IN = "zoom-in",
+    ZOOM_OUT = "zoom-out",
+    FIT_VIEW = "fit-view",
+    INTERACTIVE = "interactive",
+    LOCK = "lock"
+}
+export type WorkflowControlsProps = {
+    showZoom?: boolean;
+    showFitView?: boolean;
+    showInteractive?: boolean;
+    position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+};

package/dist/components/WorkflowCanvas/utils.d.ts

@@ -0,0 +1,13 @@
+import { WorkflowTokensType } from './workflow.tokens';
+export declare const createStyledHandle: (backgroundColor: string | undefined, borderColor: string | undefined, hoverBackgroundColor: string | undefined, hoverBorderColor: string | undefined) => import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>, {
+    $tokens: WorkflowTokensType;
+}>> & string & Omit<import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>>>, keyof import('react').Component<any, {}, any>>;
+export declare const createTokenStyledHandle: () => import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>, {
+    $tokens: WorkflowTokensType;
+}>> & string & Omit<import('react').MemoExoticComponent<import('react').ForwardRefExoticComponent<import('reactflow').HandleProps & Omit<import('react').HTMLAttributes<HTMLDivElement>, "id"> & import('react').RefAttributes<HTMLDivElement>>>, keyof import('react').Component<any, {}, any>>;
+export declare const createGradientWrapper: (gradientStart: string | undefined, gradientEnd: string | undefined, borderColor: string | undefined) => import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $boxShadow: string | undefined;
+}>> & string;
+export declare const getBoxShadow: (selected: boolean, selectedShadow: string | undefined, defaultShadow: string | undefined) => string | undefined;
+export declare const getEdgeStroke: (selected: boolean | undefined, animated: boolean | undefined, selectedStroke: string | undefined, animatedStroke: string | undefined, defaultStroke: string | undefined) => string | undefined;
+export declare const getEdgeStrokeWidth: (selected: boolean | undefined, selectedWidth: number | string | undefined, defaultWidth: number | string | undefined) => number | string | undefined;

package/dist/components/WorkflowCanvas/workflow.tokens.d.ts

@@ -0,0 +1,100 @@
+import { CSSObject } from 'styled-components';
+import { FoundationTokenType } from '../../tokens/theme.token';
+import { BreakpointType } from '../../breakpoints/breakPoints';
+export type NodeState = 'default' | 'hover' | 'selected';
+export type WorkflowTokensType = {
+    canvas: {
+        backgroundColor: CSSObject['backgroundColor'];
+        dotColor: CSSObject['color'];
+        dotGap: CSSObject['gap'];
+        dotSize: number;
+    };
+    node: {
+        default: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            borderRadius: CSSObject['borderRadius'];
+            color: CSSObject['color'];
+            padding: CSSObject['padding'];
+            boxShadow: CSSObject['boxShadow'];
+            fontSize: CSSObject['fontSize'];
+            fontWeight: CSSObject['fontWeight'];
+            minWidth: CSSObject['minWidth'];
+            minHeight: CSSObject['minHeight'];
+        };
+        hover: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        selected: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+            boxShadow: CSSObject['boxShadow'];
+        };
+        content: {
+            gap: CSSObject['gap'];
+            padding: CSSObject['padding'];
+        };
+        icon: {
+            paddingSm: CSSObject['padding'];
+            paddingMd: CSSObject['padding'];
+            borderRadiusSm: CSSObject['borderRadius'];
+            borderRadiusMd: CSSObject['borderRadius'];
+            size: {
+                small: number;
+                medium: number;
+                large: number;
+            };
+        };
+    };
+    handle: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        width: CSSObject['width'];
+        height: CSSObject['height'];
+        hover: {
+            backgroundColor: CSSObject['backgroundColor'];
+            border: CSSObject['border'];
+        };
+    };
+    edge: {
+        stroke: CSSObject['stroke'];
+        strokeWidth: CSSObject['strokeWidth'];
+        selected: {
+            stroke: CSSObject['stroke'];
+            strokeWidth: CSSObject['strokeWidth'];
+        };
+        animated: {
+            stroke: CSSObject['stroke'];
+        };
+    };
+    controls: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        boxShadow: CSSObject['boxShadow'];
+        padding: CSSObject['padding'];
+        gap: CSSObject['gap'];
+        offset: CSSObject['top'] | CSSObject['right'] | CSSObject['bottom'] | CSSObject['left'];
+        button: {
+            color: CSSObject['color'];
+            hover: {
+                backgroundColor: CSSObject['backgroundColor'];
+            };
+        };
+    };
+    minimap: {
+        backgroundColor: CSSObject['backgroundColor'];
+        border: CSSObject['border'];
+        borderRadius: CSSObject['borderRadius'];
+        maskColor: CSSObject['backgroundColor'];
+        nodeColor: CSSObject['color'];
+        nodeStrokeColor: CSSObject['color'];
+        nodeBorderRadius: CSSObject['borderRadius'];
+    };
+};
+export type ResponsiveWorkflowTokens = {
+    [key in keyof BreakpointType]: WorkflowTokensType;
+};
+export declare const getWorkflowTokens: (foundationToken: FoundationTokenType) => ResponsiveWorkflowTokens;

package/dist/context/ThemeContext.d.ts

@@ -40,6 +40,7 @@ import { ThemeType } from '../tokens';
 import { ResponsiveSkeletonTokens } from '../components/Skeleton/skeleton.tokens';
 import { BREAKPOINTS } from '../breakpoints/breakPoints';
 import { ResponsiveStepperTokens } from '../components/Stepper/stepper.tokens';
+import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
 export type ComponentTokenType = {
     TAGS?: ResponsiveTagTokens;
     SEARCH_INPUT?: ResponsiveSearchInputTokens;
@@ -81,6 +82,7 @@ export type ComponentTokenType = {
     SIDEBAR?: ResponsiveSidebarTokens;
     UPLOAD?: ResponsiveUploadTokens;
     CODE_BLOCK?: ResponsiveCodeBlockTokens;
+    WORKFLOW_CANVAS?: ResponsiveWorkflowTokens;
 };
 type ThemeContextType = {
     foundationTokens: ThemeType;

package/dist/context/useComponentToken.d.ts

@@ -39,4 +39,5 @@ import { ResponsiveStatCardTokens } from '../components/StatCard/statcard.tokens
 import { ResponsiveSidebarTokens } from '../components/Sidebar/sidebar.tokens';
 import { ResponsiveUploadTokens } from '../components/Upload/upload.tokens';
 import { ResponsiveCodeBlockTokens } from '../components/CodeBlock/codeBlock.token';
-export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens;
+import { ResponsiveWorkflowTokens } from '../components/WorkflowCanvas/workflow.tokens';
+export declare const useComponentToken: (component: keyof ComponentTokenType) => ResponsiveSearchInputTokens | ResponsiveTagTokens | ResponsiveTextAreaTokens | ResponsiveTextInputTokens | ResponsiveNumberInputTokens | ResponsiveAlertTokens | ResponsiveRadioTokens | ResponsiveOTPInputTokens | ResponsiveUnitInputTokens | ResponsiveMultiValueInputTokens | ResponsiveSwitchTokens | ResponsiveCheckboxTokens | ResponsiveTabsTokens | ResponsiveTooltipTokens | ResponsiveDropdownInputTokens | ResponsiveButtonTokens | ResponsiveModalTokens | ResponsiveBreadcrumbTokens | ResponsivePopoverTokens | ResponsiveMenuTokensType | ResponsiveMultiSelectTokens | ResponsiveSingleSelectTokens | ResponsiveTableTokens | ResponsiveCalendarTokens | ResponsiveAccordionTokens | ResponsiveStatCardTokens | ResponsiveProgressBarTokens | ResponsiveDrawerTokens | ResponsiveChartTokens | ResponsiveSnackbarTokens | ResponsiveStepperTokens | ResponsiveKeyValuePairTokens | ResponsiveCardTokens | ResponsiveSkeletonTokens | ResponsiveTopbarTokens | ResponsiveAvatarTokens | ResponsiveAvatarGroupTokens | ResponsiveSidebarTokens | ResponsiveUploadTokens | ResponsiveCodeBlockTokens | ResponsiveWorkflowTokens;

package/dist/main.d.ts

@@ -34,6 +34,7 @@ export * from './components/Skeleton';
 export * from './components/KeyValuePair';
 export * from './components/VirtualList';
 export * from './components/Upload';
+export * from './components/WorkflowCanvas';
 export * from './components/ButtonGroup';
 export * from './components/Button';
 export * from './context';