flow-lib-creomnia 1.0.0

package/README.md

@@ -0,0 +1,12 @@
+# Nodes flow
+
+## Components
+
+`<NodesFlow />`
+
+Props:
+
+- `nodes` - `NodeType[]`
+- `menuTabs` - `MenuTabType[]`
+- `addNewNodeCallback` - `AddNewNodeCallbackType`
+- `addButtonColor`(optional) - `string`

package/lib/assets/icons/ChoiceNodeIcon.svg

@@ -0,0 +1,16 @@
+<svg width="376" height="132" viewBox="0 0 376 132" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4646_869)">
+<path d="M63.5925 96C61.3074 96 59.1314 95.0228 57.6133 93.3149L32.7244 65.3149C30.0301 62.2838 30.0301 57.7162 32.7244 54.6851L57.6133 26.6851C59.1314 24.9772 61.3074 24 63.5925 24H312.407C314.693 24 316.869 24.9772 318.387 26.6851L343.276 54.6851C345.97 57.7162 345.97 62.2838 343.276 65.3149L318.387 93.3149C316.869 95.0228 314.693 96 312.407 96H63.5925Z"/>
+</g>
+<defs>
+<filter id="filter0_d_4646_869" x="0.703125" y="0" width="374.594" height="132" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="6"/>
+<feGaussianBlur stdDeviation="15"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.08 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4646_869"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4646_869" result="shape"/>
+</filter>
+</defs>
+</svg>

package/lib/assets/icons/LeftArrowIcon.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="triangle 40x80" d="M1.82843 13.8284L8.17157 20.1716C10.6914 22.6914 15 20.9068 15 17.3431L15 4.65686C15 1.09324 10.6914 -0.691433 8.17158 1.82843L1.82843 8.17157C0.266331 9.73367 0.266329 12.2663 1.82843 13.8284Z" fill="#16B364"/>
+</svg>

package/lib/assets/icons/ParallelIcon.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="addons/parallel">
+<path id="Union" fill-rule="evenodd" clip-rule="evenodd" d="M12.0007 2.66683C12.3688 2.66683 12.6673 2.36835 12.6673 2.00016C12.6673 1.63197 12.3688 1.3335 12.0007 1.3335C11.6325 1.3335 11.334 1.63197 11.334 2.00016C11.334 2.36835 11.6325 2.66683 12.0007 2.66683ZM12.6673 4.00016C12.6673 4.36835 12.3688 4.66683 12.0007 4.66683C11.6325 4.66683 11.334 4.36835 11.334 4.00016C11.334 3.63197 11.6325 3.3335 12.0007 3.3335C12.3688 3.3335 12.6673 3.63197 12.6673 4.00016ZM5.33398 6.00016C5.33398 5.63197 5.03551 5.3335 4.66732 5.3335C4.29913 5.3335 4.00065 5.63197 4.00065 6.00016V12.3907L2.47211 10.8621L1.5293 11.805L4.66737 14.943L7.80544 11.805L6.86263 10.8621L5.33398 12.3908V6.00016ZM12.6673 6.00016C12.6673 5.63197 12.3688 5.3335 12.0007 5.3335C11.6325 5.3335 11.334 5.63197 11.334 6.00016V12.3907L9.80544 10.8621L8.86263 11.805L12.0007 14.943L15.1388 11.805L14.196 10.8621L12.6673 12.3908V6.00016ZM5.33398 2.00016C5.33398 2.36835 5.03551 2.66683 4.66732 2.66683C4.29913 2.66683 4.00065 2.36835 4.00065 2.00016C4.00065 1.63197 4.29913 1.3335 4.66732 1.3335C5.03551 1.3335 5.33398 1.63197 5.33398 2.00016ZM4.66732 4.66683C5.03551 4.66683 5.33398 4.36835 5.33398 4.00016C5.33398 3.63197 5.03551 3.3335 4.66732 3.3335C4.29913 3.3335 4.00065 3.63197 4.00065 4.00016C4.00065 4.36835 4.29913 4.66683 4.66732 4.66683Z" fill="white"/>
+</g>
+</svg>

package/lib/assets/icons/RightArrowIcon.svg

@@ -0,0 +1,3 @@
+<svg width="15" height="22" viewBox="0 0 15 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path id="triangle 16x32" d="M13.1716 13.8284L6.82843 20.1716C4.30857 22.6914 -5.32687e-07 20.9068 -8.44229e-07 17.3431L-1.9533e-06 4.65686C-2.26484e-06 1.09324 4.30856 -0.691433 6.82842 1.82843L13.1716 8.17157C14.7337 9.73367 14.7337 12.2663 13.1716 13.8284Z" fill="#F04438"/>
+</svg>

package/lib/assets/icons/flowIcon.svg

@@ -0,0 +1,7 @@
+<svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5 2C5 0.895431 5.89543 0 7 0C8.10457 0 9 0.895431 9 2C9 3.10457 8.10457 4 7 4C5.89543 4 5 3.10457 5 2Z" fill="#6C737F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 7.34315 1.34315 6 3 6H11C12.6569 6 14 7.34315 14 9V11C14 12.6569 12.6569 14 11 14H3C1.34315 14 0 12.6569 0 11V9ZM3 8C2.44772 8 2 8.44772 2 9V11C2 11.5523 2.44772 12 3 12H11C11.5523 12 12 11.5523 12 11V9C12 8.44772 11.5523 8 11 8H3Z" fill="#6C737F"/>
+<path d="M5 18C5 16.8954 5.89543 16 7 16C8.10457 16 9 16.8954 9 18C9 19.1046 8.10457 20 7 20C5.89543 20 5 19.1046 5 18Z" fill="#6C737F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7V3H8V7H6Z" fill="#6C737F"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 18V13H8V18H6Z" fill="#6C737F"/>
+</svg>

package/lib/config/colors.d.ts

@@ -0,0 +1,13 @@
+export declare const Colors: {
+    NAVY_BLUE: string;
+    WHITE: string;
+    BLACK: string;
+    GRAY: string;
+    DIRTY_WHITE: string;
+    BLUE: string;
+    DEEP_BLUE: string;
+    DARK_BLUE: string;
+    GREEN: string;
+    NEUTRAL: string;
+    RED: string;
+};

package/lib/config/colors.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Colors = void 0;
+exports.Colors = {
+    NAVY_BLUE: '#6366f1',
+    WHITE: '#ffffff',
+    BLACK: '#000000',
+    GRAY: '#a0a0a0',
+    DIRTY_WHITE: '#f3f3f3',
+    BLUE: '#2970ff',
+    DEEP_BLUE: '#2970ff56',
+    DARK_BLUE: '#1C2536',
+    GREEN: '#16b364',
+    NEUTRAL: '#e4e7e7',
+    RED: '#F04438'
+};

package/lib/config/index.d.ts

@@ -0,0 +1,20 @@
+import { NodeTypeEnum } from '../modules/node/enums';
+export declare const Config: {
+    VERTICAL_SHIFT: number;
+    HORIZONTAL_SHIFT: number;
+    NODE_HEIGHT: number;
+    NODE_WIDTH: number;
+    SETTINGS_WINDOW_MIN_WIDTH: number;
+    ADD_BUTTON_WIDTH: number;
+    CONNECTION_WIDTH: number;
+    NODES_WITH_DOUBLE_CONNECTION: NodeTypeEnum[];
+    NODES_WITHOUT_SAVE_BUTTON: NodeTypeEnum[];
+    HUB_NODE_HEIGHT: number;
+    EDGE_NODE_HEIGHT: number;
+    PARALLEL_NODE_HEIGHT: number;
+    ADD_BUTTON_SHIFT: number;
+    MAX_SCALE: number;
+    MIN_SCALE: number;
+    SET_NODE_DELAY: number;
+    CLEAR_NODE_DELAY: number;
+};

package/lib/config/index.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Config = void 0;
+const enums_1 = require("../modules/node/enums");
+exports.Config = {
+    VERTICAL_SHIFT: 152,
+    HORIZONTAL_SHIFT: 400,
+    NODE_HEIGHT: 72,
+    NODE_WIDTH: 320,
+    SETTINGS_WINDOW_MIN_WIDTH: 600,
+    ADD_BUTTON_WIDTH: 18,
+    CONNECTION_WIDTH: 2,
+    NODES_WITH_DOUBLE_CONNECTION: [
+        enums_1.NodeTypeEnum.ChoiceNode,
+        enums_1.NodeTypeEnum.ParallelNode,
+    ],
+    NODES_WITHOUT_SAVE_BUTTON: [
+        enums_1.NodeTypeEnum.ParallelNode
+    ],
+    HUB_NODE_HEIGHT: 10,
+    EDGE_NODE_HEIGHT: 48,
+    PARALLEL_NODE_HEIGHT: 32,
+    ADD_BUTTON_SHIFT: 30,
+    MAX_SCALE: 1,
+    MIN_SCALE: 0.3,
+    SET_NODE_DELAY: 250,
+    CLEAR_NODE_DELAY: 200
+};

package/lib/index.d.ts

@@ -0,0 +1,4 @@
+import NodesFlow from "./modules/flow/components/NodesFlow";
+export * from "./modules/node/enums";
+export * from "./modules/node/types";
+export { NodesFlow };

package/lib/index.js

@@ -0,0 +1,24 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodesFlow = void 0;
+const NodesFlow_1 = __importDefault(require("./modules/flow/components/NodesFlow"));
+exports.NodesFlow = NodesFlow_1.default;
+__exportStar(require("./modules/node/enums"), exports);
+__exportStar(require("./modules/node/types"), exports);

package/lib/modules/common/components/HorizontalDrawer/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface IProps {
+    Content?: JSX.Element;
+    HeaderContent?: JSX.Element;
+    open: boolean;
+    onClose: () => void;
+}
+export declare const HorizontalDrawer: ({ Content, HeaderContent, open, onClose }: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/common/components/HorizontalDrawer/index.js

@@ -0,0 +1,86 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalDrawer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+const DragHandle_1 = __importDefault(require("@mui/icons-material/DragHandle"));
+const HorizontalDrawer = ({ Content, HeaderContent, open, onClose }) => {
+    const [drawerWidth, setDrawerWidth] = (0, react_1.useState)("");
+    const isWidthLessThan1300 = (0, material_1.useMediaQuery)("(max-width:1300px)");
+    const isWidthLessThan1000 = (0, material_1.useMediaQuery)("(max-width:1000px)");
+    const isWidthLessThan700 = (0, material_1.useMediaQuery)("(max-width:700px)");
+    const isWidthLessThan400 = (0, material_1.useMediaQuery)("(max-width:400px)");
+    const getDefaultWidth = () => {
+        if (isWidthLessThan400)
+            return "80%";
+        if (isWidthLessThan700)
+            return "70%";
+        if (isWidthLessThan1000)
+            return "50%";
+        if (isWidthLessThan1300)
+            return "40%";
+        return "35%";
+    };
+    const handleDrag = (event) => {
+        const maxWidthPercent = 90;
+        const minWidthPercent = 30;
+        const newWidthPercent = ((window.innerWidth - event.clientX) * 100) / window.innerWidth;
+        if (newWidthPercent < minWidthPercent || newWidthPercent > maxWidthPercent) {
+            return;
+        }
+        setDrawerWidth(`${newWidthPercent}%`);
+    };
+    const DraggerElement = () => {
+        return ((0, jsx_runtime_1.jsx)(material_1.Box, { onMouseDown: (e) => {
+                e.preventDefault();
+                window.addEventListener("mousemove", handleDrag);
+                window.addEventListener("mouseup", () => {
+                    window.removeEventListener("mousemove", handleDrag);
+                });
+            }, sx: {
+                display: "flex",
+                alignItems: "center",
+                width: "24px",
+                height: "24px",
+                cursor: "ew-resize",
+            }, children: (0, jsx_runtime_1.jsx)(DragHandle_1.default, { sx: {
+                    transform: "rotate(90deg)",
+                    color: "#a0a0a0",
+                } }) }));
+    };
+    return ((0, jsx_runtime_1.jsx)(material_1.Drawer, { variant: "persistent", open: open, anchor: "right", sx: {
+            flexShrink: 0,
+            "& .MuiDrawer-paper": {
+                width: drawerWidth || getDefaultWidth(),
+                height: "calc(100% - 66px)",
+                marginTop: "66px",
+                borderTopLeftRadius: "16px",
+                boxShadow: "0px 9px 46px 0px #00000014",
+                border: "none",
+            },
+        }, children: open && ((0, jsx_runtime_1.jsx)(material_1.ClickAwayListener, { onClickAway: onClose, mouseEvent: "onPointerDown", children: (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                    overflow: "hidden",
+                    height: "100%",
+                    display: "flex",
+                    flexDirection: "row",
+                }, children: [(0, jsx_runtime_1.jsx)(material_1.Box, { sx: {
+                            display: "flex",
+                            justifyContent: "center",
+                            alignItems: "center",
+                            padding: "6px",
+                        }, children: (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { display: "flex", alignItems: "center" }, children: (0, jsx_runtime_1.jsx)(DraggerElement, {}) }) }), (0, jsx_runtime_1.jsxs)(material_1.Box, { sx: {
+                            display: "grid",
+                            flexGrow: 1,
+                            overflow: "auto",
+                            paddingTop: "40px",
+                            paddingBottom: "24px",
+                            paddingRight: "40px",
+                            gridTemplateRows: 'min-content'
+                        }, children: [(0, jsx_runtime_1.jsxs)(material_1.Box, { display: "flex", flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginBottom: "10px", children: [HeaderContent && HeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, { "aria-label": "close", onClick: onClose, children: (0, jsx_runtime_1.jsx)(Close_1.default, {}) })] }), (0, jsx_runtime_1.jsx)(material_1.Box, { sx: { flex: 1 }, children: Content })] })] }) })) }));
+};
+exports.HorizontalDrawer = HorizontalDrawer;

package/lib/modules/common/components/ZoomToolbar/index.d.ts

@@ -0,0 +1,8 @@
+import { FC } from "react";
+type PropsType = {
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetTransform: () => void;
+};
+declare const ZoomToolbar: FC<PropsType>;
+export default ZoomToolbar;

package/lib/modules/common/components/ZoomToolbar/index.js

@@ -0,0 +1,15 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ZoomOut_1 = __importDefault(require("@mui/icons-material/ZoomOut"));
+const ZoomIn_1 = __importDefault(require("@mui/icons-material/ZoomIn"));
+const RestartAlt_1 = __importDefault(require("@mui/icons-material/RestartAlt"));
+const styled_1 = require("./styled");
+const ZoomToolbar = ({ zoomIn, zoomOut, resetTransform }) => {
+    return ((0, jsx_runtime_1.jsx)(styled_1.Container, { children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { spacing: 2, direction: 'row', alignItems: 'center', width: '100%', children: [(0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => zoomIn(), children: (0, jsx_runtime_1.jsx)(ZoomIn_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => zoomOut(), children: (0, jsx_runtime_1.jsx)(ZoomOut_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => resetTransform(), children: (0, jsx_runtime_1.jsx)(RestartAlt_1.default, {}) })] }) }));
+};
+exports.default = ZoomToolbar;

package/lib/modules/common/components/ZoomToolbar/styled.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "ref" | ("flex" | "height" | "width" | "left" | "top" | "alignContent" | "alignItems" | "alignSelf" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridRow" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflow" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;

package/lib/modules/common/components/ZoomToolbar/styled.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
+exports.Container = (0, system_1.styled)(material_1.Box) `
+  width: 100%;
+  border-radius: 8px;
+  box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1);
+  border: 2px solid;
+  border-color: ${props => `${props.theme.palette?.background?.paper}`};
+  background: ${props => `${props.theme.palette?.background?.paper}`};
+`;

package/lib/modules/common/components/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ZoomToolbar } from './ZoomToolbar';
+export { HorizontalDrawer } from "./HorizontalDrawer";

package/lib/modules/common/components/index.js

@@ -0,0 +1,10 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.HorizontalDrawer = exports.ZoomToolbar = void 0;
+var ZoomToolbar_1 = require("./ZoomToolbar");
+Object.defineProperty(exports, "ZoomToolbar", { enumerable: true, get: function () { return __importDefault(ZoomToolbar_1).default; } });
+var HorizontalDrawer_1 = require("./HorizontalDrawer");
+Object.defineProperty(exports, "HorizontalDrawer", { enumerable: true, get: function () { return HorizontalDrawer_1.HorizontalDrawer; } });

package/lib/modules/common/contexts/ThemeContext/index.d.ts

@@ -0,0 +1,24 @@
+import React, { FC, PropsWithChildren } from "react";
+import { Theme } from "../../types";
+import { PaletteColorOptions } from "@mui/material";
+declare module '@mui/material/styles' {
+    interface Palette {
+        myAwesomeColor: PaletteColorOptions;
+        neutral50: PaletteColorOptions;
+    }
+    interface PaletteOptions {
+        myAwesomeColor: PaletteColorOptions;
+        neutral50: PaletteColorOptions;
+    }
+    interface TypographyVariants {
+        buttonLarge: React.CSSProperties;
+    }
+    interface TypographyVariantsOptions {
+        buttonLarge?: React.CSSProperties;
+    }
+}
+type PropTypes = {
+    themContextValue: Theme;
+} & PropsWithChildren;
+declare const ThemeContextProvider: FC<PropTypes>;
+export { ThemeContextProvider };

package/lib/modules/common/contexts/ThemeContext/index.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
+const ThemeContextProvider = ({ children, themContextValue }) => {
+    return (0, jsx_runtime_1.jsx)(material_1.ThemeProvider, { theme: themContextValue, children: children });
+};
+exports.ThemeContextProvider = ThemeContextProvider;

package/lib/modules/common/hooks/useDragNode.d.ts

@@ -0,0 +1,10 @@
+import { UpdateNodePosition } from "../types";
+interface IProps {
+    id: string;
+    onUpdate?: UpdateNodePosition;
+}
+export declare const useDragNode: ({ id, onUpdate }: IProps) => {
+    isDragging: boolean;
+    drag: import("react-dnd").ConnectDragSource;
+};
+export {};

package/lib/modules/common/hooks/useDragNode.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDragNode = void 0;
+const react_dnd_1 = require("react-dnd");
+const useDragNode = ({ id, onUpdate }) => {
+    const [{ isDragging }, drag] = (0, react_dnd_1.useDrag)(() => ({
+        type: 'Node',
+        item: { id },
+        end: (item, monitor) => {
+            const dropPosition = monitor.getDropResult();
+            const isSamePosition = dropPosition?.parentId === id;
+            if (item && dropPosition && !isSamePosition && onUpdate) {
+                onUpdate({
+                    nodeId: id,
+                    branch: dropPosition.branch,
+                    parentId: dropPosition.parentId
+                });
+            }
+        },
+        collect: (monitor) => ({
+            isDragging: monitor.isDragging(),
+            handlerId: monitor.getHandlerId(),
+        }),
+    }));
+    return { isDragging, drag };
+};
+exports.useDragNode = useDragNode;

package/lib/modules/common/hooks/useDropNode.d.ts

@@ -0,0 +1,11 @@
+interface IProps {
+    parentId?: string;
+    branch: number;
+    childId: string;
+}
+export declare const useDropNode: ({ parentId, branch, childId }: IProps) => {
+    canDrop: boolean;
+    isOver: boolean;
+    drop: import("react-dnd").ConnectDropTarget;
+};
+export {};

package/lib/modules/common/hooks/useDropNode.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDropNode = void 0;
+const react_dnd_1 = require("react-dnd");
+const useDropNode = ({ parentId, branch, childId }) => {
+    const [{ canDrop, isOver }, drop] = (0, react_dnd_1.useDrop)(() => ({
+        accept: 'Node',
+        drop: () => ({ childId, parentId, branch }),
+        collect: (monitor) => ({
+            isOver: monitor.isOver(),
+            canDrop: monitor.canDrop(),
+        }),
+    }));
+    return { canDrop, isOver, drop };
+};
+exports.useDropNode = useDropNode;

package/lib/modules/common/types/index.d.ts

@@ -0,0 +1,69 @@
+/// <reference types="react" />
+export type MenuItemType = {
+    name: string;
+    value: string;
+    icon: JSX.Element;
+};
+export type MenuTabType = {
+    name: string;
+    menuItems: MenuItemType[];
+};
+export type PointType = {
+    name?: string;
+    x: number;
+    y: number;
+};
+interface Color {
+    main: string;
+    contrastText?: string;
+    light?: string;
+    dark?: string;
+}
+interface Palette {
+    mode: 'light' | 'dark';
+    primary: Color;
+    secondary: Color;
+    info: Color;
+    error: Color;
+    success: Color;
+    background: {
+        default: string;
+        paper: string;
+    };
+    text: {
+        primary: string;
+        secondary: string;
+        disabled: string;
+    };
+    myAwesomeColor: Color;
+    divider: string;
+    neutral50: Color;
+}
+interface TypographyVariant {
+    fontSize: string;
+    fontWeight: string;
+    fontFamily?: string;
+    textTransform?: string;
+}
+interface Typography {
+    fontFamily: string;
+    button: TypographyVariant;
+    h3: TypographyVariant;
+    h4: TypographyVariant;
+    h6: TypographyVariant;
+    body2: TypographyVariant;
+    buttonLarge: TypographyVariant;
+}
+export interface Theme {
+    palette: Palette;
+    typography: Typography;
+}
+export interface ThemeContextValueType extends Theme {
+    addButtonColor?: string;
+}
+export type UpdateNodePosition = (props: {
+    nodeId: string;
+    branch: number;
+    parentId: string;
+}) => any;
+export {};

package/lib/modules/common/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/lib/modules/connection/components/AddButton/index.d.ts

@@ -0,0 +1,16 @@
+import React, { Ref } from "react";
+import { PointType } from "../../../common/types";
+import { NodeType } from "../../../node/types";
+import { ConnectionCurveEnum } from "../../enums";
+interface IProps {
+    startPoint: PointType;
+    endPoint: PointType;
+    parentId: string | undefined;
+    childNodeId: string;
+    node: NodeType;
+    curveType?: ConnectionCurveEnum;
+    onClick?: (event: React.MouseEvent<SVGSVGElement>) => void;
+    innerRef: Ref<any>;
+}
+export declare const AddButton: ({ endPoint, startPoint, node, curveType, parentId, childNodeId, onClick, innerRef }: IProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/modules/connection/components/AddButton/index.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AddButton = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const useDropNode_1 = require("../../../common/hooks/useDropNode");
+const connectionParametersServices_1 = require("../../services/connectionParametersServices");
+const config_1 = require("../../../../config");
+const styled_1 = require("./styled");
+const ConnectionWithButton_1 = require("../ConnectionWithButton");
+const enums_1 = require("../../enums");
+const colors_1 = require("../../../../config/colors");
+const material_1 = require("@mui/material");
+const AddButton = ({ endPoint, startPoint, node, curveType, parentId, childNodeId, onClick, innerRef }) => {
+    const theme = (0, material_1.useTheme)();
+    const background = theme.palette?.background?.default || colors_1.Colors.DIRTY_WHITE;
+    const positionIntoEmptyChoiceNode = !curveType ? 0 : curveType === enums_1.ConnectionCurveEnum.RIGHT ? 2 : 1;
+    const branch = positionIntoEmptyChoiceNode || (node?.rightChildrenId === childNodeId ? 2 : 1);
+    const { drop, canDrop, isOver } = (0, useDropNode_1.useDropNode)({
+        parentId,
+        branch,
+        childId: childNodeId
+    });
+    const { width, y, top, } = connectionParametersServices_1.connectionParametersServices.calculateConnectionParameters({
+        endPoint,
+        startPoint,
+        node,
+        curveType,
+    });
+    const widthDiff = (config_1.Config.ADD_BUTTON_WIDTH - config_1.Config.CONNECTION_WIDTH) / 2;
+    const xPosition = top ? startPoint.x - widthDiff + width : startPoint.x - widthDiff;
+    const yPosition = y + ConnectionWithButton_1.nodeHeightByType[node.type] / 2 + config_1.Config.ADD_BUTTON_SHIFT;
+    const PlusButton = (0, styled_1.createAddButton)({
+        background,
+        x: xPosition,
+        y: yPosition,
+    });
+    const Placeholder = (0, styled_1.createPlaceholder)(isOver, canDrop);
+    const xDropZone = xPosition - (config_1.Config.NODE_WIDTH / 2 - 5);
+    const yDropZone = yPosition - (config_1.Config.NODE_HEIGHT / 2 - config_1.Config.ADD_BUTTON_WIDTH / 2);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Placeholder, { ref: drop, sx: {
+                    top: yDropZone,
+                    left: xDropZone,
+                } }), (0, jsx_runtime_1.jsx)(PlusButton, { onClick: onClick, ref: innerRef })] }));
+};
+exports.AddButton = AddButton;

package/lib/modules/connection/components/AddButton/styled.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="react" />
+type AddButtonPropsType = {
+    background?: string;
+    x: number;
+    y: number;
+};
+export declare const createAddButton: ({ background, x, y, }: AddButtonPropsType) => import("@emotion/styled").StyledComponent<{
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").SvgIconClasses> | undefined;
+    color?: import("@mui/types").OverridableStringUnion<"error" | "inherit" | "action" | "disabled" | "success" | "info" | "warning" | "primary" | "secondary", import("@mui/material").SvgIconPropsColorOverrides> | undefined;
+    fontSize?: import("@mui/types").OverridableStringUnion<"small" | "medium" | "inherit" | "large", import("@mui/material").SvgIconPropsSizeOverrides> | undefined;
+    htmlColor?: string | undefined;
+    inheritViewBox?: boolean | undefined;
+    shapeRendering?: string | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    titleAccess?: string | undefined;
+    viewBox?: string | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
+    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
+}, "color" | "fontSize" | "shapeRendering" | "children" | "viewBox" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const createPlaceholder: (isOver: boolean, canDrop: boolean) => import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "children" | "ref" | ("flex" | "height" | "width" | "left" | "top" | "alignContent" | "alignItems" | "alignSelf" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "bottom" | "boxShadow" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gap" | "gridArea" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridColumn" | "gridRow" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "overflow" | "padding" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "zIndex" | "p" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export {};