npm - @flowuent-org/diagramming-core - Versions diffs - 1.3.7 → 1.3.9 - Mend

@flowuent-org/diagramming-core 1.3.7 → 1.3.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/packages/diagrams/src/lib/components/automation/AutomationNavigationNode.tsx CHANGED Viewed

@@ -4,15 +4,10 @@ import { Handle, Position, useNodeId } from '@xyflow/react';
 import { Box, Typography, Chip, IconButton, Card, CardContent, Tooltip } from '@mui/material';
 import {
     AccessTime as AccessTimeIcon,
-    Navigation as MuiNavigationIcon,
-    OpenInBrowser as OpenInBrowserIcon,
-    TouchApp as TouchAppIcon,
-    Search as SearchIcon,
     ContentCopy as ContentCopyIcon,
 } from '@mui/icons-material';
 import { RiCloseLine } from 'react-icons/ri';
 import ReactJson from 'react-json-view';
-import { getIconByName } from '../../utils/iconMapper';
 import { useTranslation } from 'react-i18next';
 import { useDiagram } from '../../contexts/DiagramProvider';
 import { NodeActionButtons } from './NodeActionButtons';
@@ -69,9 +64,6 @@ export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> =
     const nodes = useDiagram((state) => state.nodes);
     const setNodes = useDiagram((state) => state.setNodes);
-    // Get the icon component based on the iconName
-    const IconComponent = getIconByName(data.iconName) || NavigationIcon;
     const handleJsonClick = () => {
         if (nodeId) setSelectedNode(nodeId);
         if (!enableJson) return;
@@ -205,23 +197,7 @@ export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> =
         }
     }, [isJsonOpen, data]);
-    const getNavigationIcon = () => {
-        const navType = data.formData?.navigationType || data.navigationType || 'navigate';
-        switch (navType) {
-            case 'navigate':
-                return <OpenInBrowserIcon sx={{ fontSize: '18px' }} />;
-            case 'click':
-                return <TouchAppIcon sx={{ fontSize: '18px' }} />;
-            case 'scroll':
-                return <NavigationIcon size={18} color="#93C5FD" />;
-            case 'wait':
-                return <AccessTimeIcon sx={{ fontSize: '18px' }} />;
-            case 'extract':
-                return <SearchIcon sx={{ fontSize: '18px' }} />;
-            default:
-                return <NavigationIcon size={18} color="#93C5FD" />;
-        }
-    };
     const getNavigationTypeLabel = () => {
         const navType = data.formData?.navigationType || data.navigationType || 'navigate';
@@ -323,14 +299,16 @@ export const AutomationNavigationNode: React.FC<AutomationNavigationNodeProps> =
                                 sx={{
                                     width: '32px',
                                     height: '32px',
+                                    minWidth: '32px',
                                     backgroundColor: '#8b5cf6',
                                     borderRadius: '50%',
                                     display: 'flex',
                                     alignItems: 'center',
                                     justifyContent: 'center',
+                                    flexShrink: 0,
                                 }}
                             >
-                                {getNavigationIcon()}
+                                <NavigationIcon />
                             </Box>
                             <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
                                 {highlightText(data.label)}

package/packages/diagrams/src/lib/components/automation/AutomationSheetsNode.tsx CHANGED Viewed

@@ -746,6 +746,21 @@ Data: ${JSON.stringify(data, null, 2)}
                 }}
                 onClick={handleJsonClick}
             >
+            {/* Top Header Section */}
+            <Box sx={{
+                backgroundColor: "rgba(67, 93, 132, 0.1)",
+                padding: '8px 16px',
+                borderRadius: '12px 12px 0 0'
+            }}>
+                <Typography variant="body2" sx={{
+                    color: '#ffffff',
+                    fontSize: '12px',
+                    fontWeight: 500
+                }}>
+                    {data.description || 'Export data to Google Sheets'}
+                </Typography>
+            </Box>
             {/* Header */}
             <Box sx={{
                 display: 'flex',
@@ -759,11 +774,13 @@ Data: ${JSON.stringify(data, null, 2)}
                         sx={{
                             width: '32px',
                             height: '32px',
-                            backgroundColor: '#3b82f6', // Blue color like in image
-                            borderRadius: '6px',
+                            minWidth: '32px',
+                            backgroundColor: '#1E3A8A',
+                            borderRadius: '50%',
                             display: 'flex',
                             alignItems: 'center',
                             justifyContent: 'center',
+                            flexShrink: 0,
                         }}
                     >
                         <IconComponent sx={{ color: 'white', fontSize: '18px' }} />

package/packages/diagrams/src/lib/components/automation/AutomationSlackNode.tsx CHANGED Viewed

@@ -457,11 +457,26 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
         }}
       />
+      {/* Top Header Section */}
+      <Box sx={{
+        backgroundColor: "rgba(67, 93, 132, 0.1)",
+        padding: '8px 16px',
+        borderRadius: '12px 12px 0 0'
+      }}>
+        <Typography variant="body2" sx={{
+          color: '#ffffff',
+          fontSize: '12px',
+          fontWeight: 500
+        }}>
+          {data.description || operationConfig.description}
+        </Typography>
+      </Box>
       {/* Header */}
       <Box
         sx={{
-          bgcolor: `${operationConfig.color}15`,
-          borderBottom: `1px solid ${operationConfig.color}30`,
+          bgcolor: "rgba(67, 93, 132, 0.1)",
+          borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
           px: 2,
           py: 1.5,
           display: 'flex',
@@ -472,12 +487,15 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
           <Box
             sx={{
-              bgcolor: operationConfig.color,
-              borderRadius: 1,
-              p: 0.75,
+              width: '32px',
+              height: '32px',
+              minWidth: '32px',
+              backgroundColor: '#1E3A8A',
+              borderRadius: '50%',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
+              flexShrink: 0,
             }}
           >
             <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
@@ -489,12 +507,6 @@ export const AutomationSlackNode: React.FC<AutomationSlackNodeProps> = ({
             >
               {highlightText(data.label || operationConfig.label)}
             </Typography>
-            <Typography
-              variant="caption"
-              sx={{ color: '#9CA3AF', fontSize: 10 }}
-            >
-              {data.description || operationConfig.description}
-            </Typography>
           </Box>
         </Box>
         {renderStatusBadge()}

package/packages/diagrams/src/lib/components/automation/AutomationStartNode.tsx CHANGED Viewed

@@ -5,13 +5,13 @@ import { Box, Typography, Chip, IconButton, Card, CardContent } from '@mui/mater
 import { AccessTime as AccessTimeIcon } from '@mui/icons-material';
 import { RiCloseLine, RiUser2Line } from 'react-icons/ri';
 import ReactJson from 'react-json-view';
-import { getIconByName } from '../../utils/iconMapper';
 import { useTranslation } from 'react-i18next';
 import { useDiagram } from '../../contexts/DiagramProvider';
 import { NodeActionButtons } from './NodeActionButtons';
 import { showNodeAIAssistantPopup } from './NodeAIAssistantPopup';
 import { useSearch } from '../../contexts/SearchContext';
 import { getStatusColor } from './statusColors';
+import { StartNodeIcon } from '../../../../../molecules/src/lib/SvgIcons/icons';
 interface AutomationStartNodeProps {
     data: {
@@ -48,11 +48,6 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
     const nodes = useDiagram((state) => state.nodes);
     const setNodes = useDiagram((state) => state.setNodes);
-    // Get the icon component based on the iconName
-    const IconComponent = getIconByName(data.iconName);
     const handleJsonClick = () => {
         if (nodeId) setSelectedNode(nodeId);
         if (!enableJson) return;
@@ -259,19 +254,9 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                 {/* Title Section */}
                 <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', mb: 2 }}>
                     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
-                        <Box
-                            sx={{
-                                width: '32px',
-                                height: '32px',
-                                backgroundColor: '#0ea5e9',
-                                borderRadius: '50%',
-                                display: 'flex',
-                                alignItems: 'center',
-                                justifyContent: 'center',
-                            }}
-                        >
-                            <IconComponent sx={{ color: 'white', fontSize: '18px' }} />
-                        </Box>
+                            <StartNodeIcon />
                         <Typography variant="h6" sx={{ fontWeight: 600, fontSize: '16px' }}>
                             {highlightText(data.label)}
                         </Typography>

package/packages/diagrams/src/lib/components/automation/AutomationTelegramNode.tsx CHANGED Viewed

@@ -450,11 +450,26 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
         }}
       />
+      {/* Top Header Section */}
+      <Box sx={{
+        backgroundColor: "rgba(67, 93, 132, 0.1)",
+        padding: '8px 16px',
+        borderRadius: '12px 12px 0 0'
+      }}>
+        <Typography variant="body2" sx={{
+          color: '#ffffff',
+          fontSize: '12px',
+          fontWeight: 500
+        }}>
+          {data.description || operationConfig.description}
+        </Typography>
+      </Box>
       {/* Header */}
       <Box
         sx={{
-          bgcolor: `${operationConfig.color}15`,
-          borderBottom: `1px solid ${operationConfig.color}30`,
+          bgcolor: "rgba(67, 93, 132, 0.1)",
+          borderBottom: `1px solid rgba(67, 93, 132, 0.2)`,
           px: 2,
           py: 1.5,
           display: 'flex',
@@ -465,12 +480,15 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5 }}>
           <Box
             sx={{
-              bgcolor: operationConfig.color,
-              borderRadius: 1,
-              p: 0.75,
+              width: '32px',
+              height: '32px',
+              minWidth: '32px',
+              backgroundColor: '#1E3A8A',
+              borderRadius: '50%',
               display: 'flex',
               alignItems: 'center',
               justifyContent: 'center',
+              flexShrink: 0,
             }}
           >
             <OperationIcon sx={{ fontSize: 18, color: '#fff' }} />
@@ -482,12 +500,6 @@ export const AutomationTelegramNode: React.FC<AutomationTelegramNodeProps> = ({
             >
               {highlightText(data.label || operationConfig.label)}
             </Typography>
-            <Typography
-              variant="caption"
-              sx={{ color: '#9CA3AF', fontSize: 10 }}
-            >
-              {data.description || operationConfig.description}
-            </Typography>
           </Box>
         </Box>
         {renderStatusBadge()}

package/packages/diagrams/src/lib/templates/DiagramContent.tsx CHANGED Viewed

@@ -566,50 +566,9 @@ export const DiagramContent: React.FC<DiagramContentProps> = ({
               ref={setNodeRef}
               sx={{ height: '100svh', width: '100svw', position: 'relative' }}
             >
-              {/* Undo/Redo Toolbar */}
-              <Box
-                sx={{
-                  position: 'absolute',
-                  top: 16,
-                  left: 16,
-                  zIndex: 10,
-                  display: 'flex',
-                  gap: 0.5,
-                  backgroundColor: 'background.paper',
-                  borderRadius: 2,
-                  boxShadow: 2,
-                  padding: 0.5,
-                }}
-              >
-                <Tooltip title="Undo (Ctrl+Z)" placement="bottom">
-                  <span>
-                    <IconButton
-                      onClick={undo}
-                      disabled={!canUndo}
-                      size="small"
-                      sx={{
-                        color: canUndo ? 'primary.main' : 'action.disabled',
-                      }}
-                    >
-                      <UndoIcon fontSize="small" />
-                    </IconButton>
-                  </span>
-                </Tooltip>
-                <Tooltip title="Redo (Ctrl+Y)" placement="bottom">
-                  <span>
-                    <IconButton
-                      onClick={redo}
-                      disabled={!canRedo}
-                      size="small"
-                      sx={{
-                        color: canRedo ? 'primary.main' : 'action.disabled',
-                      }}
-                    >
-                      <RedoIcon fontSize="small" />
-                    </IconButton>
-                  </span>
-                </Tooltip>
-              </Box>
+              {/* Redo Toolbar */}
               <ReactFlow
                 panOnDrag={isPannable}
                 nodesDraggable={isPannable}

package/packages/molecules/src/lib/SvgIcons/icons.tsx CHANGED Viewed

@@ -64,46 +64,40 @@ export const ArticleAnalyzerIcon: React.FC<SvgIconProps> = ({ size = 15, color =
 );
 // Start Node Icon
-export const StartNodeIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
-  <BaseIcon size={size} color={color} style={style}>
-    <path
-      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z"
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M5.83203 4.5L9.83203 7.16667L5.83203 9.83333V4.5Z"
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </BaseIcon>
+export const StartNodeIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+<g clipPath="url(#clip0_8650_35616)">
+<path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+<path d="M12.666 11.333L16.666 13.9997L12.666 16.6663V11.333Z" stroke="#86EFAC" strokeLinecap="round" strokeLinejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_8650_35616">
+<rect width="16" height="16" fill="white" transform="translate(6 6)"/>
+</clipPath>
+</defs>
+</svg>
 );
 // Navigation Icon
-export const NavigationIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#93C5FD', style }) => (
-  <BaseIcon size={size} color={color} style={style}>
-    <path
-      d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z"
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M7.16667 0.5C5.45482 2.29744 4.5 4.68449 4.5 7.16667C4.5 9.64884 5.45482 12.0359 7.16667 13.8333C8.87851 12.0359 9.83333 9.64884 9.83333 7.16667C9.83333 4.68449 8.87851 2.29744 7.16667 0.5Z"
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M0.5 7.16699H13.8333"
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </BaseIcon>
-);
+  export const NavigationIcon: React.FC<SvgIconProps> = ({ size, color, style }) => (
+    <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+  <g clipPath="url(#clip0_8650_35642)">
+  <path d="M14.0007 20.6663C17.6825 20.6663 20.6673 17.6816 20.6673 13.9997C20.6673 10.3178 17.6825 7.33301 14.0007 7.33301C10.3188 7.33301 7.33398 10.3178 7.33398 13.9997C7.33398 17.6816 10.3188 20.6663 14.0007 20.6663Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M14.0007 7.33301C12.2888 9.13044 11.334 11.5175 11.334 13.9997C11.334 16.4818 12.2888 18.8689 14.0007 20.6663C15.7125 18.8689 16.6673 16.4818 16.6673 13.9997C16.6673 11.5175 15.7125 9.13044 14.0007 7.33301Z" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M7.33398 14H20.6673" stroke="#93C5FD" strokeLinecap="round" strokeLinejoin="round"/>
+  </g>
+  <defs>
+  <clipPath id="clip0_8650_35642">
+  <rect width="16" height="16" fill="white" transform="translate(6 6)"/>
+  </clipPath>
+  </defs>
+  </svg>
+  );
 // Workflow node type icons
 export const ParallelIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
@@ -260,7 +254,7 @@ export const EmptyNodeIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86E
   </BaseIcon>
 );
-export const EntityIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC', style }) => (
+export const EntityIcon: React.FC<SvgIconProps> = ({ size, color = '#86EFAC', style }) => (
   <BaseIcon size={size} color={color} style={style}>
     <path
       d="M7.16667 13.8333C10.8486 13.8333 13.8333 10.8486 13.8333 7.16667C13.8333 3.48477 10.8486 0.5 7.16667 0.5C3.48477 0.5 0.5 3.48477 0.5 7.16667C0.5 10.8486 3.48477 13.8333 7.16667 13.8333Z"
@@ -272,20 +266,27 @@ export const EntityIcon: React.FC<SvgIconProps> = ({ size = 15, color = '#86EFAC
 );
 // End Node Icon
-export const EndNodeIcon: React.FC<SvgIconProps> = ({ size = 13, color = '#FCA5A5', style }) => (
-  <svg
-    width={size}
-    height={size}
-    viewBox="0 0 13 13"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-    style={style}
-  >
-    <path
-      d="M11.1667 0.5H1.83333C1.09695 0.5 0.5 1.09695 0.5 1.83333V11.1667C0.5 11.903 1.09695 12.5 1.83333 12.5H11.1667C11.903 12.5 12.5 11.903 12.5 11.1667V1.83333C12.5 1.09695 11.903 0.5 11.1667 0.5Z"
-      stroke={color}
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-  </svg>
+export const EndNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
+  <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+<path d="M18.6667 8H9.33333C8.59695 8 8 8.59695 8 9.33333V18.6667C8 19.403 8.59695 20 9.33333 20H18.6667C19.403 20 20 19.403 20 18.6667V9.33333C20 8.59695 19.403 8 18.6667 8Z" stroke="#FCA5A5" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
 );
+  export const FormattingNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
+    <svg width="35" height="35" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M0 14C0 6.26801 6.26801 0 14 0C21.732 0 28 6.26801 28 14C28 21.732 21.732 28 14 28C6.26801 28 0 21.732 0 14Z" fill="#1E3A8A"/>
+  <path d="M15.9993 7.33301H9.99935C9.64573 7.33301 9.30659 7.47348 9.05654 7.72353C8.80649 7.97358 8.66602 8.31272 8.66602 8.66634V19.333C8.66602 19.6866 8.80649 20.0258 9.05654 20.2758C9.30659 20.5259 9.64573 20.6663 9.99935 20.6663H17.9993C18.353 20.6663 18.6921 20.5259 18.9422 20.2758C19.1922 20.0258 19.3327 19.6866 19.3327 19.333V10.6663L15.9993 7.33301Z" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M15.334 7.33301V9.99967C15.334 10.3533 15.4745 10.6924 15.7245 10.9425C15.9746 11.1925 16.3137 11.333 16.6673 11.333H19.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M12.6673 12H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M16.6673 14.667H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  <path d="M16.6673 17.333H11.334" stroke="#D8B4FE" strokeLinecap="round" strokeLinejoin="round"/>
+  </svg>
+  );
+  export const ApiNodeIcon: React.FC<SvgIconProps> = ({ size,  color , style }) => (
+    <svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.89167 3.92167L2.66667 2.68583M10.4242 3.92167L11.6492 2.68583M2.66583 11.7525L3.89083 10.5158M7.1575 2.27417V0.625M2.2575 7.21917H0.625M12.1875 12.155L15.3658 10.9C15.4425 10.8693 15.5083 10.8164 15.5546 10.748C15.6009 10.6796 15.6256 10.5988 15.6256 10.5162C15.6256 10.4337 15.6009 10.3529 15.5546 10.2845C15.5083 10.2161 15.4425 10.1632 15.3658 10.1325L7.72833 7.12C7.65398 7.09123 7.57285 7.08475 7.49488 7.10138C7.4169 7.118 7.34547 7.157 7.28931 7.21359C7.23316 7.27019 7.19472 7.34193 7.17871 7.42003C7.1627 7.49813 7.16981 7.57921 7.19917 7.65333L10.1842 15.3625C10.3192 15.7125 10.8092 15.7125 10.9442 15.3625L12.1875 12.155Z" stroke="#FCFAFF" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round"/>
+</svg>
+);