flow-lib-creomnia 1.0.0

package/lib/modules/node/components/EndNode/styled.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Icon: 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>, {}, {}>;

package/lib/modules/node/components/EndNode/styled.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = exports.IconContainer = void 0;
+const system_1 = require("@mui/system");
+const Stop_1 = __importDefault(require("@mui/icons-material/Stop"));
+const config_1 = require("../../../../config");
+const colors_1 = require("../../../../config/colors");
+exports.IconContainer = (0, system_1.styled)('div') `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${colors_1.Colors.NAVY_BLUE};
+  height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  border-radius: 100%;
+`;
+exports.Icon = (0, system_1.styled)(Stop_1.default) `
+  color: ${colors_1.Colors.WHITE};
+`;

package/lib/modules/node/components/HubNode/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from 'react';
+declare const HubNode: FC;
+export default HubNode;

package/lib/modules/node/components/HubNode/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = require("./styled");
+const HubNode = () => {
+    return (0, jsx_runtime_1.jsx)(styled_1.NodeHubStyledComponent, {});
+};
+exports.default = HubNode;

package/lib/modules/node/components/HubNode/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const NodeHubStyledComponent: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/modules/node/components/HubNode/styled.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeHubStyledComponent = void 0;
+const system_1 = require("@mui/system");
+const config_1 = require("../../../../config");
+const colors_1 = require("../../../../config/colors");
+exports.NodeHubStyledComponent = (0, system_1.styled)('div') `
+  min-width: 50px;
+  min-height: ${config_1.Config.HUB_NODE_HEIGHT}px;
+  background: ${colors_1.Colors.NAVY_BLUE};
+  border-radius: 5px;
+`;

package/lib/modules/node/components/NodesMenu/index.d.ts

@@ -0,0 +1,14 @@
+import { FC } from 'react';
+import { AddNewNodeCallbackType } from '../../../flow/types';
+import { MenuTabType } from '../../../common/types';
+type PropsType = {
+    menuTabs: MenuTabType[];
+    onCloseMenu: () => void;
+    data: {
+        parentId: string | undefined;
+        connectionIndex: number;
+    };
+    addNewNodeCallback?: AddNewNodeCallbackType;
+};
+declare const NodesMenu: FC<PropsType>;
+export default NodesMenu;

package/lib/modules/node/components/NodesMenu/index.js

@@ -0,0 +1,28 @@
+"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 react_1 = require("react");
+const styled_1 = require("./styled");
+const Grid_1 = __importDefault(require("@mui/material/Grid"));
+const NodesMenu = ({ addNewNodeCallback, menuTabs, data, onCloseMenu, }) => {
+    const [value, setValue] = (0, react_1.useState)(menuTabs?.[0].name);
+    const handleChange = (_, newValue) => {
+        setValue(newValue);
+    };
+    const tab = (0, react_1.useMemo)(() => menuTabs.reduce((tabContentByTabName, tab) => ({
+        ...tabContentByTabName,
+        [tab.name]: tab.menuItems,
+    }), {}), [menuTabs]);
+    const onMenuItemClick = (nodeId) => {
+        addNewNodeCallback?.({
+            ...data,
+            menuItemId: nodeId,
+        });
+        onCloseMenu();
+    };
+    return ((0, jsx_runtime_1.jsxs)(styled_1.MenuContainer, { children: [(0, jsx_runtime_1.jsxs)(Grid_1.default, { alignItems: 'center', container: true, p: '8px 8px 0 0', children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { flexGrow: 1, item: true, children: (0, jsx_runtime_1.jsx)(styled_1.StyledTabs, { value: value, onChange: handleChange, textColor: 'primary', indicatorColor: 'primary', children: menuTabs.map((tab) => ((0, jsx_runtime_1.jsx)(styled_1.StyledTab, { value: tab.name, label: tab.name }, tab.name))) }) }), (0, jsx_runtime_1.jsx)(Grid_1.default, { item: true, children: (0, jsx_runtime_1.jsx)(styled_1.Close, { onClick: onCloseMenu }) })] }), (0, jsx_runtime_1.jsx)(styled_1.ContentContainer, { children: tab[value].map((menuItem) => ((0, jsx_runtime_1.jsxs)(styled_1.MenuItem, { onClick: () => onMenuItemClick(menuItem.value), children: [(0, jsx_runtime_1.jsx)(styled_1.IconWrapper, { children: menuItem.icon }), menuItem.name] }, menuItem.value))) })] }));
+};
+exports.default = NodesMenu;

package/lib/modules/node/components/NodesMenu/styled.d.ts

@@ -0,0 +1,127 @@
+/// <reference types="react" />
+export declare const MenuContainer: 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 declare const TabContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledTabs: import("@emotion/styled").StyledComponent<{
+    action?: import("react").Ref<import("@mui/material").TabsActions> | undefined;
+    allowScrollButtonsMobile?: boolean | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    centered?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").TabsClasses> | undefined;
+    slots?: {
+        StartScrollButtonIcon?: import("react").ElementType<any> | undefined;
+        EndScrollButtonIcon?: import("react").ElementType<any> | undefined;
+    } | undefined;
+    slotProps?: {
+        startScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsStartScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+        endScrollButtonIcon?: import("@mui/base").SlotComponentProps<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material").SvgIconTypeMap<{}, "svg">> & {
+            muiName: string;
+        }, import("@mui/material").TabsEndScrollButtonIconSlotPropsOverrides, import("@mui/material").TabsOwnerState> | undefined;
+    } | undefined;
+    indicatorColor?: import("@mui/types").OverridableStringUnion<"primary" | "secondary", import("@mui/material").TabsPropsIndicatorColorOverrides> | undefined;
+    onChange?: ((event: import("react").SyntheticEvent<Element, Event>, value: any) => void) | undefined;
+    orientation?: "horizontal" | "vertical" | undefined;
+    ScrollButtonComponent?: import("react").ElementType<any> | undefined;
+    scrollButtons?: boolean | "auto" | undefined;
+    selectionFollowsFocus?: boolean | undefined;
+    TabIndicatorProps?: (import("react").HTMLAttributes<HTMLDivElement> & {
+        sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    }) | undefined;
+    TabScrollButtonProps?: Partial<import("@mui/material").TabScrollButtonProps> | undefined;
+    textColor?: "inherit" | "primary" | "secondary" | undefined;
+    value?: any;
+    variant?: "standard" | "fullWidth" | "scrollable" | undefined;
+    visibleScrollbar?: boolean | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+} & import("@mui/material/OverridableComponent").CommonProps & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "action" | "children" | "tabIndex" | "disabled" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef">, "variant" | "value" | "action" | "children" | "orientation" | "aria-label" | "aria-labelledby" | "onChange" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "slotProps" | "slots" | "selectionFollowsFocus" | "allowScrollButtonsMobile" | "centered" | "indicatorColor" | "ScrollButtonComponent" | "scrollButtons" | "TabIndicatorProps" | "TabScrollButtonProps" | "textColor" | "visibleScrollbar"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const StyledTab: import("@emotion/styled").StyledComponent<{
+    children?: null | undefined;
+    classes?: Partial<import("@mui/material").TabClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableFocusRipple?: boolean | undefined;
+    icon?: string | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    iconPosition?: "end" | "start" | "top" | "bottom" | undefined;
+    label?: import("react").ReactNode;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    value?: any;
+    wrapped?: boolean | undefined;
+} & Omit<{
+    action?: import("react").Ref<import("@mui/material").ButtonBaseActions> | undefined;
+    centerRipple?: boolean | undefined;
+    children?: import("react").ReactNode;
+    classes?: Partial<import("@mui/material").ButtonBaseClasses> | undefined;
+    disabled?: boolean | undefined;
+    disableRipple?: boolean | undefined;
+    disableTouchRipple?: boolean | undefined;
+    focusRipple?: boolean | undefined;
+    focusVisibleClassName?: string | undefined;
+    LinkComponent?: import("react").ElementType<any> | undefined;
+    onFocusVisible?: import("react").FocusEventHandler<any> | undefined;
+    sx?: import("@mui/system").SxProps<import("@mui/material").Theme> | undefined;
+    tabIndex?: number | undefined;
+    TouchRippleProps?: Partial<import("@mui/material/ButtonBase/TouchRipple").TouchRippleProps> | undefined;
+    touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
+}, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, "value" | "label" | "action" | "children" | "tabIndex" | "disabled" | "icon" | "sx" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "iconPosition" | "wrapped"> & import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, {}, {}>;
+export declare const ContentContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Close: 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 MenuItem: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/modules/node/components/NodesMenu/styled.js

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconWrapper = exports.MenuItem = exports.Close = exports.ContentContainer = exports.StyledTab = exports.StyledTabs = exports.TabContainer = exports.MenuContainer = void 0;
+const system_1 = require("@mui/system");
+const material_1 = require("@mui/material");
+const Close_1 = __importDefault(require("@mui/icons-material/Close"));
+exports.MenuContainer = (0, system_1.styled)(material_1.Box)(({ theme }) => ({
+    width: '292px',
+    height: '256px',
+    borderRadius: '16px',
+    background: theme.palette.background.paper,
+    color: theme.palette.text.primary,
+    paddingBottom: '6px',
+    boxShadow: '0px 9px 46px rgba(0, 0, 0, 0.08)',
+    overflow: 'hidden',
+    colorScheme: theme.palette.mode
+}));
+exports.TabContainer = (0, system_1.styled)("div") `
+  margin-top: 4px;
+  overflow-x: scroll;
+`;
+exports.StyledTabs = (0, system_1.styled)(material_1.Tabs) `
+  display: flex;
+  align-items: flex-start;
+  width: max-content;
+  min-height: 40px;
+`;
+exports.StyledTab = (0, system_1.styled)(material_1.Tab) `
+  min-height: 40px;
+`;
+exports.ContentContainer = (0, system_1.styled)("div") `
+  height: 206px;
+  overflow-y: scroll;
+`;
+exports.Close = (0, system_1.styled)(Close_1.default) `
+  cursor: pointer;
+  font-size: 24px;
+  display: flex;
+  margin: 8px;
+`;
+exports.MenuItem = (0, system_1.styled)("div") `
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  margin: 4px;
+  border-radius: 12px;
+  cursor: pointer;
+  font-family: Inter;
+  font-size: 0.875rem;
+  font-weight: 600;
+  line-height: 24px;
+  :hover {
+    background: ${props => `${props.theme.palette?.background?.default}`};;
+  }
+`;
+exports.IconWrapper = (0, system_1.styled)("div") `
+  width: 24px;
+  height: 24px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  object-fit: contain;
+  overflow: hidden;
+`;

package/lib/modules/node/components/ParallelNode/index.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { BaseDrawableNodeType } from "../../types";
+declare const ParallelNode: FC<BaseDrawableNodeType>;
+export default ParallelNode;

package/lib/modules/node/components/ParallelNode/index.js

@@ -0,0 +1,22 @@
+"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 react_1 = require("react");
+const ParallelIcon_svg_1 = __importDefault(require("../../../../assets/icons/ParallelIcon.svg"));
+const styled_1 = require("./styled");
+const react_svg_1 = require("react-svg");
+const SettingsContext_1 = require("../../contexts/SettingsContext");
+const ParallelNode = ({ nodeData }) => {
+    const { setNode } = (0, react_1.useContext)(SettingsContext_1.SettingsContext);
+    const nodeDataWithoutSettings = nodeData
+        ? { ...nodeData, settings: { ...nodeData.settings, settingsForm: undefined } }
+        : null;
+    const onNodeClick = () => {
+        setNode(nodeDataWithoutSettings);
+    };
+    return ((0, jsx_runtime_1.jsx)(styled_1.Container, { onClick: onNodeClick, children: (0, jsx_runtime_1.jsx)(react_svg_1.ReactSVG, { src: ParallelIcon_svg_1.default }) }));
+};
+exports.default = ParallelNode;

package/lib/modules/node/components/ParallelNode/styled.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Container: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/modules/node/components/ParallelNode/styled.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Container = void 0;
+const system_1 = require("@mui/system");
+const config_1 = require("../../../../config");
+const colors_1 = require("../../../../config/colors");
+exports.Container = (0, system_1.styled)('div') `
+  height: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
+  min-width: ${config_1.Config.PARALLEL_NODE_HEIGHT}px;
+  border-radius: 32px;
+  background-color: ${colors_1.Colors.NAVY_BLUE};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+`;

package/lib/modules/node/components/StartNode/index.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+declare const StartNode: FC;
+export default StartNode;

package/lib/modules/node/components/StartNode/index.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_1 = require("./styled");
+const StartNode = () => {
+    return ((0, jsx_runtime_1.jsx)(styled_1.IconContainer, { children: (0, jsx_runtime_1.jsx)(styled_1.Icon, {}) }));
+};
+exports.default = StartNode;

package/lib/modules/node/components/StartNode/styled.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export declare const IconContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const Icon: 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>, {}, {}>;

package/lib/modules/node/components/StartNode/styled.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = exports.IconContainer = void 0;
+const system_1 = require("@mui/system");
+const PlayArrow_1 = __importDefault(require("@mui/icons-material/PlayArrow"));
+const config_1 = require("../../../../config");
+const colors_1 = require("../../../../config/colors");
+exports.IconContainer = (0, system_1.styled)('div') `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: ${colors_1.Colors.GREEN};
+  height: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  min-width: ${config_1.Config.EDGE_NODE_HEIGHT}px;
+  border-radius: 100%;
+`;
+exports.Icon = (0, system_1.styled)(PlayArrow_1.default) `
+  color: ${colors_1.Colors.WHITE};
+`;

package/lib/modules/node/contexts/SettingsContext/index.d.ts

@@ -0,0 +1,10 @@
+import { FC, PropsWithChildren } from "react";
+import { SettingsContextValueType } from "../../types";
+import { IDrawerProps, Permissions } from "../../../flow/types";
+type IProps = PropsWithChildren & {
+    permissions: Permissions;
+    drawerProps: IDrawerProps;
+};
+declare const SettingsContext: import("react").Context<SettingsContextValueType>;
+declare const NodeSettingsProvider: FC<IProps>;
+export { NodeSettingsProvider, SettingsContext };

package/lib/modules/node/contexts/SettingsContext/index.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SettingsContext = exports.NodeSettingsProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const material_1 = require("@mui/material");
+const styled_1 = require("./styled");
+const material_2 = require("@mui/material");
+const config_1 = require("../../../../config");
+const components_1 = require("../../../common/components");
+const settingsContextValue = {
+    node: null,
+    setNode: () => ({}),
+};
+const SettingsContext = (0, react_1.createContext)(settingsContextValue);
+exports.SettingsContext = SettingsContext;
+const NodeSettingsProvider = ({ children, permissions: { canUpdate, canDelete }, drawerProps: { isOpen, onClose, onOpen }, }) => {
+    const [node, setNodeBase] = (0, react_1.useState)(null);
+    const setNode = (nodeData) => {
+        const delay = node ? config_1.Config.SET_NODE_DELAY : 0;
+        setTimeout(() => {
+            setNodeBase(nodeData || null);
+            onOpen();
+        }, delay);
+    };
+    const isNodeWithoutSave = node?.type && config_1.Config.NODES_WITHOUT_SAVE_BUTTON.includes(node?.type);
+    const handleClose = () => {
+        onClose();
+        setTimeout(() => {
+            setNodeBase(null);
+        }, config_1.Config.CLEAR_NODE_DELAY);
+    };
+    const onSaveNode = () => {
+        node?.settings?.footer?.onSave?.(node?.id);
+        handleClose();
+    };
+    const onCancel = () => {
+        node?.settings?.footer?.onCancel?.(node?.id);
+        handleClose();
+    };
+    const onDeleteNode = () => {
+        node?.settings?.footer?.onDelete?.(node?.id);
+        handleClose();
+    };
+    return ((0, jsx_runtime_1.jsxs)(SettingsContext.Provider, { value: { node, setNode }, children: [children, canUpdate && ((0, jsx_runtime_1.jsx)(components_1.HorizontalDrawer, { open: isOpen, onClose: handleClose, HeaderContent: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styled_1.IconWrapper, { children: [(0, jsx_runtime_1.jsx)(styled_1.IconBorder, {}), node?.icon] }), (0, jsx_runtime_1.jsx)(styled_1.NameContainer, { children: node?.extensionName })] }), Content: (0, jsx_runtime_1.jsxs)(styled_1.SettingsContent, { children: [(0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', flexDirection: 'column', flexGrow: 1, children: node?.settings?.settingsForm }), node?.settings?.customFooter ?? ((0, jsx_runtime_1.jsxs)(styled_1.DefaultFooterContainer, { children: [!isNodeWithoutSave && ((0, jsx_runtime_1.jsx)(material_2.Button, { onClick: onSaveNode, variant: "contained", children: node?.settings?.footer?.saveText || "Save" })), (0, jsx_runtime_1.jsx)(material_1.Box, { flexGrow: 1, children: (0, jsx_runtime_1.jsx)(material_2.Button, { variant: "outlined", onClick: onCancel, children: node?.settings?.footer?.cancelText || "Cancel " }) }), canDelete && ((0, jsx_runtime_1.jsx)(material_2.Button, { onClick: onDeleteNode, color: "error", variant: "text", children: node?.settings?.footer?.deleteText || "Delete node" }))] }))] }) }))] }));
+};
+exports.NodeSettingsProvider = NodeSettingsProvider;

package/lib/modules/node/contexts/SettingsContext/styled.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export declare const SettingsContent: 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/material").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 declare const DefaultFooterContainer: 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/material").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 declare const IconBorder: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const IconWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const NameContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/system").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/lib/modules/node/contexts/SettingsContext/styled.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NameContainer = exports.IconWrapper = exports.IconBorder = exports.DefaultFooterContainer = exports.SettingsContent = void 0;
+const material_1 = require("@mui/material");
+const system_1 = require("@mui/system");
+exports.SettingsContent = (0, system_1.styled)(material_1.Box) `
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+exports.DefaultFooterContainer = (0, system_1.styled)(material_1.Box) `
+  display: flex;
+  align-items: center;
+  gap: 24px;
+  margin-top: 20px;
+`;
+exports.IconBorder = (0, system_1.styled)('div') `
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 6px;
+  border: 1px solid rgba(17, 25, 39, 0.12);
+`;
+exports.IconWrapper = (0, system_1.styled)("div") `
+  width: 56px;
+  height: 56px;
+  background: #f3f3f3;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 6px;
+  object-fit: contain;
+  position: relative;
+  overflow: hidden;
+`;
+exports.NameContainer = (0, system_1.styled)("div") `
+  font-size: 18px;
+  font-weight: 700;
+  text-align: left;
+`;

package/lib/modules/node/enums/index.d.ts

@@ -0,0 +1,8 @@
+export declare enum NodeTypeEnum {
+    BaseNode = "baseNode",
+    StartNode = "startNode",
+    EndNode = "endNode",
+    HubNode = "hubNode",
+    ChoiceNode = "choiceNode",
+    ParallelNode = "parallelNode"
+}

package/lib/modules/node/enums/index.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NodeTypeEnum = void 0;
+var NodeTypeEnum;
+(function (NodeTypeEnum) {
+    NodeTypeEnum["BaseNode"] = "baseNode";
+    NodeTypeEnum["StartNode"] = "startNode";
+    NodeTypeEnum["EndNode"] = "endNode";
+    NodeTypeEnum["HubNode"] = "hubNode";
+    NodeTypeEnum["ChoiceNode"] = "choiceNode";
+    NodeTypeEnum["ParallelNode"] = "parallelNode";
+})(NodeTypeEnum || (exports.NodeTypeEnum = NodeTypeEnum = {}));

package/lib/modules/node/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { NodeTypeEnum } from './enums';
+import { BaseDrawableNodeType } from './types';
+type ModuleType = {
+    nodes: {
+        [key in NodeTypeEnum]: React.FC<BaseDrawableNodeType>;
+    };
+};
+export declare const nodeModule: ModuleType;
+export {};

package/lib/modules/node/index.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.nodeModule = void 0;
+const BaseNode_1 = __importDefault(require("./components/BaseNode"));
+const ChoiseNode_1 = __importDefault(require("./components/ChoiseNode"));
+const EndNode_1 = __importDefault(require("./components/EndNode"));
+const HubNode_1 = __importDefault(require("./components/HubNode"));
+const ParallelNode_1 = __importDefault(require("./components/ParallelNode"));
+const StartNode_1 = __importDefault(require("./components/StartNode"));
+exports.nodeModule = {
+    nodes: {
+        baseNode: BaseNode_1.default,
+        startNode: StartNode_1.default,
+        endNode: EndNode_1.default,
+        hubNode: HubNode_1.default,
+        choiceNode: ChoiseNode_1.default,
+        parallelNode: ParallelNode_1.default
+    },
+};