@flowuent-org/diagramming-core 1.0.6 → 1.0.7

package/packages/diagrams/package.json

@@ -1,25 +1,27 @@
-{
-  "name": "@flowuent-labs/diagrams",
-  "version": "0.0.1",
-  "scripts": {
-    "build": "nx build diagrams",
-    "generate-barrels": "ctix build"
-  },
-  "dependencies": {
-    "@mui/material": "^6.1.6",
-    "@types/js-beautify": "^1.14.3",
-    "core-js": "^3.38.1",
-    "file-saver": "^2.0.5",
-    "highlight.js": "^11.10.0",
-    "js-beautify": "^1.15.1",
-    "prettier": "^3.3.3",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-syntax-highlighter": "^15.6.1",
-    "xlsx": "^0.18.5"
-  },
-  "devDependencies": {
-    "@types/file-saver": "^2.0.7",
-    "ctix": "^2.6.4",
-    "nx": "^20.3.1"
-  }
-}
+{
+  "name": "@flowuent-labs/diagrams",
+  "version": "0.0.1",
+  "scripts": {
+    "build": "nx build diagrams",
+    "generate-barrels": "ctix build"
+  },
+  "dependencies": {
+    "@mui/material": "^6.1.6",
+    "@types/js-beautify": "^1.14.3",
+    "core-js": "^3.38.1",
+    "file-saver": "^2.0.5",
+    "highlight.js": "^11.10.0",
+    "i18next": "^24.0.2",
+    "js-beautify": "^1.15.1",
+    "prettier": "^3.3.3",
+    "react-copy-to-clipboard": "^5.1.0",
+    "react-i18next": "^15.1.2",
+    "react-syntax-highlighter": "^15.6.1",
+    "xlsx": "^0.18.5"
+  },
+  "devDependencies": {
+    "@types/file-saver": "^2.0.7",
+    "ctix": "^2.6.4",
+    "nx": "^20.3.1"
+  }
+}

package/packages/diagrams/project.json

@@ -1,37 +1,42 @@
-{
-  "name": "diagrams",
-  "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "packages/diagrams/src",
-  "projectType": "library",
-  "tags": [],
-  "targets": {
-    "build": {
-      "executor": "@nx/rollup:rollup",
-      "outputs": ["{options.outputPath}"],
-      "options": {
-        "outputPath": "dist/packages/diagrams",
-        "tsConfig": "packages/diagrams/tsconfig.lib.json",
-        "project": "packages/diagrams/package.json",
-        "entryFile": "packages/diagrams/src/index.ts",
-        "external": ["react", "react-dom", "react/jsx-runtime"],
-        "rollupConfig": "packages/diagrams/rollup.config.js",
-        "compiler": "babel",
-        "assets": [
-          {
-            "glob": "packages/diagrams/README.md",
-            "input": ".",
-            "output": "."
-          }
-        ],
-        "buildableProjectDepsInPackageJsonType": "peerDependencies"
-      },
-      "configurations": {
-        "production": {
-          "optimization": true,
-          "extractLicenses": true,
-          "inspect": false
-        }
-      }
-    }
-  }
-}
+{
+  "name": "diagrams",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/diagrams/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/packages/diagrams",
+        "tsConfig": "packages/diagrams/tsconfig.lib.json",
+        "project": "packages/diagrams/package.json",
+        "entryFile": "packages/diagrams/src/index.ts",
+        "external": ["react", "react-dom", "react/jsx-runtime"],
+        "rollupConfig": "packages/diagrams/rollup.config.js",
+        "compiler": "babel",
+        "assets": [
+          {
+            "glob": "packages/diagrams/README.md",
+            "input": ".",
+            "output": "."
+          },
+          {
+            "glob": "**/*",
+            "input": "packages/diagrams/locales",
+            "output": "locales"
+          }
+        ],
+        "buildableProjectDepsInPackageJsonType": "peerDependencies"
+      },
+      "configurations": {
+        "production": {
+          "optimization": true,
+          "extractLicenses": true,
+          "inspect": false
+        }
+      }
+    }
+  }
+}

package/packages/diagrams/rollup.config.js

@@ -1,26 +1,26 @@
-const getRollupOptions = require('@nx/react/plugins/bundle-rollup');
-const preserveDirectives = require('rollup-preserve-directives').default;
-
-module.exports = (options) => {
-  // Get the default Nx Rollup options
-  const nxRollupOptions = getRollupOptions(options);
-
-  // Enable tree shaking
-  nxRollupOptions.treeshake = true; // Explicitly enable tree shaking
-
-  // Add the preserveDirectives plugin to the existing plugins
-  nxRollupOptions.plugins = [
-    ...(Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : []),
-    preserveDirectives(),
-  ];
-
-  // Externalize MUI packages
-  nxRollupOptions.external = [
-    ...(Array.isArray(nxRollupOptions.external) ? nxRollupOptions.external : []),
-    '@mui/material',
-    '@mui/icons-material',
-    /^@mui\/icons-material\/.*/,
-  ];
-
-  return nxRollupOptions;
-};
+const getRollupOptions = require('@nx/react/plugins/bundle-rollup');
+const preserveDirectives = require('rollup-preserve-directives').default;
+
+module.exports = (options) => {
+  // Get the default Nx Rollup options
+  const nxRollupOptions = getRollupOptions(options);
+
+  // Enable tree shaking
+  nxRollupOptions.treeshake = true; // Explicitly enable tree shaking
+
+  // Add the preserveDirectives plugin to the existing plugins
+  nxRollupOptions.plugins = [
+    ...(Array.isArray(nxRollupOptions.plugins) ? nxRollupOptions.plugins : []),
+    preserveDirectives(),
+  ];
+
+  // Externalize MUI packages
+  nxRollupOptions.external = [
+    ...(Array.isArray(nxRollupOptions.external) ? nxRollupOptions.external : []),
+    '@mui/material',
+    '@mui/icons-material',
+    /^@mui\/icons-material\/.*/,
+  ];
+
+  return nxRollupOptions;
+};

package/packages/diagrams/src/index.ts

@@ -1,113 +1,116 @@
-export * from './lib/externals';
-export * from './lib/templates/systemFlow';
-export * from './lib/theme';
-export * from './lib/atoms/AddNodeAnchor';
-export * from './lib/atoms/AddParallelColButton';
-export * from './lib/atoms/BendpointNode';
-export * from './lib/atoms/CardBlockTypeSelector';
-export * from './lib/atoms/CardMainContent';
-export * from './lib/atoms/FloatingConnectionLine';
-export * from './lib/atoms/MarkerSelector';
-export * from './lib/atoms/PropertyInput';
-export * from './lib/atoms/StyledBox';
-export * from './lib/contexts/CardDataProvider';
-export * from './lib/contexts/DiagramProvider';
-export * from './lib/contexts/diagramStoreTypes';
-export * from './lib/contexts/onConnect';
-export * from './lib/contexts/onDragStart';
-export * from './lib/contexts/onNodeDragEnd';
-export * from './lib/contexts/onNodesChange';
-export * from './lib/contexts/setContentHeight';
-export * from './lib/contexts/setDiagramType';
-export * from './lib/contexts/setEdges';
-export * from './lib/contexts/setEdgeShapeType';
-export * from './lib/contexts/setNodes';
-export * from './lib/contexts/setNodeSetting';
-export * from './lib/contexts/setPannable';
-export * from './lib/contexts/setSelectedEdge';
-export * from './lib/contexts/setSelectedNode';
-export * from './lib/contexts/undo';
-export * from './lib/contexts/updateNodeSetting';
-export * from './lib/hooks/customUseReactFlow';
-export * from './lib/hooks/updateNodes';
-export * from './lib/hooks/useDragCallbacks';
-export * from './lib/hooks/useModalControls';
-export * from './lib/hooks/useWorkflowNodeActiont';
-export * from './lib/hooks/useAutoRegisterFunctions';
-export * from './lib/molecules/AddingBlock';
-export * from './lib/molecules/animated-add-button';
-export * from './lib/molecules/Block';
-export * from './lib/molecules/BlockProvider';
-export * from './lib/molecules/BlockWrapper';
-export * from './lib/molecules/DraggablePane';
-export * from './lib/molecules/EntityNodeBlocks';
-export * from './lib/molecules/json-viewer';
-export * from './lib/molecules/SideHandles';
-export * from './lib/molecules/StencilItem';
-export * from './lib/molecules/WorkflowNodeActionButtons';
-export * from './lib/organisms/AddNodeView';
-export * from './lib/organisms/DownloadPanel';
-export * from './lib/organisms/EdgeModal';
-export * from './lib/organisms/NodeContextMenu';
-export * from './lib/organisms/SmartDynamicForm';
-export * from './lib/organisms/Stencil';
-export * from './lib/organisms/UseDiagramStore';
-export * from './lib/organisms/ConditionRuleGroup';
-export * from './lib/organisms/WorkflowNode';
-export * from './lib/templates/DiagramContainer';
-export * from './lib/templates/DiagramContent';
-export * from './lib/templates/Diagramming';
-export type { DiagrammingPageRef } from './lib/templates/Diagramming';
-export * from './lib/templates/PageLinks';
-export * from './lib/types/card-node';
-export * from './lib/types/collaboration-types';
-export * from './lib/types/colors';
-export * from './lib/types/edge-types';
-export * from './lib/types/hooks.types';
-export * from './lib/types/node-types';
-export * from './lib/types/SmartDynamicFormField';
-export * from './lib/types/stencil-item';
-export * from './lib/types/structures';
-export * from './lib/types/workflow-content-dynamic-form-type';
-export * from './lib/types/FunctionSignature';
-export * from './lib/utils/add-new-block';
-export * from './lib/utils/add-new-node';
-export * from './lib/utils/addToHistory';
-export * from './lib/utils/closestPoint';
-export * from './lib/utils/color-options';
-export * from './lib/utils/compress-img';
-export * from './lib/utils/constant-lengths';
-export * from './lib/utils/create-updated';
-export * from './lib/utils/createHistoryChange';
-export * from './lib/utils/edge-hooks';
-export * from './lib/utils/elkLayout';
-export * from './lib/utils/event-hooks';
-export * from './lib/utils/event-store';
-export * from './lib/utils/flow-node-hooks';
-export * from './lib/utils/flow-to-js';
-export * from './lib/utils/helpers.types';
-export * from './lib/utils/logger';
-export * from './lib/utils/model-hooks';
-export * from './lib/utils/node-hooks';
-export { useHistory, useHistoryIndex } from './lib/contexts/DiagramProvider';
-export * from './lib/utils/object';
-export * from './lib/utils/nodeutils';
-export * from './lib/utils/utilities';
-export * from './lib/utils/vhToPixels';
-export * from './lib/assets/markers/markers.param';
-export * from './lib/assets/markers/markers.type';
-export * from './lib/organisms/Card/card.params';
-export * from './lib/organisms/Card/card.types';
-export * from './lib/organisms/Card/EntityNode';
-export * from './lib/organisms/CustomEdge/custom-edge-generator';
-export * from './lib/organisms/CustomEdge/custom-edge.params';
-export * from './lib/organisms/CustomEdge/custom-edge.type';
-export * from './lib/organisms/PropertiesPane';
-export * from './lib/organisms/HistoryPane';
-//export * from './lib/types/workflow-node-data-types';
-export * from './lib/templates/node-forms/NodeForm';
-export { AutomationExecutionEngine } from './lib/utils/AutomationExecutionEngine';
-export type {
-  AutomationLog,
-  AutomationResult,
-} from './lib/utils/AutomationExecutionEngine';
+export * from './lib/externals';
+export * from './lib/i18n';
+export * from './lib/templates/systemFlow';
+export * from './lib/theme';
+export * from './lib/atoms/AddNodeAnchor';
+export * from './lib/atoms/AddParallelColButton';
+export * from './lib/atoms/BendpointNode';
+export * from './lib/atoms/CardBlockTypeSelector';
+export * from './lib/atoms/CardMainContent';
+export * from './lib/atoms/FloatingConnectionLine';
+export * from './lib/atoms/MarkerSelector';
+export * from './lib/atoms/PropertyInput';
+export * from './lib/atoms/StyledBox';
+export * from './lib/contexts/CardDataProvider';
+export * from './lib/contexts/DiagramProvider';
+export * from './lib/contexts/diagramStoreTypes';
+export * from './lib/contexts/onConnect';
+export * from './lib/contexts/onDragStart';
+export * from './lib/contexts/onNodeDragEnd';
+export * from './lib/contexts/onNodesChange';
+export * from './lib/contexts/setContentHeight';
+export * from './lib/contexts/setDiagramType';
+export * from './lib/contexts/setEdges';
+export * from './lib/contexts/setEdgeShapeType';
+export * from './lib/contexts/setNodes';
+export * from './lib/contexts/setNodeSetting';
+export * from './lib/contexts/setPannable';
+export * from './lib/contexts/setSelectedEdge';
+export * from './lib/contexts/setSelectedNode';
+export * from './lib/contexts/undo';
+export * from './lib/contexts/updateNodeSetting';
+export * from './lib/hooks/customUseReactFlow';
+export * from './lib/hooks/updateNodes';
+export * from './lib/hooks/useDragCallbacks';
+export * from './lib/hooks/useModalControls';
+export * from './lib/hooks/useWorkflowNodeActiont';
+export * from './lib/hooks/useAutoRegisterFunctions';
+export * from './lib/molecules/AddingBlock';
+export * from './lib/molecules/animated-add-button';
+export * from './lib/molecules/Block';
+export * from './lib/molecules/BlockProvider';
+export * from './lib/molecules/BlockWrapper';
+export * from './lib/molecules/DraggablePane';
+export * from './lib/molecules/EntityNodeBlocks';
+export * from './lib/molecules/json-viewer';
+export * from './lib/molecules/SideHandles';
+export * from './lib/molecules/StencilItem';
+export * from './lib/molecules/WorkflowNodeActionButtons';
+export * from './lib/organisms/AddNodeView';
+export * from './lib/organisms/DownloadPanel';
+export * from './lib/organisms/EdgeModal';
+export * from './lib/organisms/NodeContextMenu';
+export * from './lib/organisms/SmartDynamicForm';
+export * from './lib/organisms/Stencil';
+export * from './lib/organisms/UseDiagramStore';
+export * from './lib/organisms/ConditionRuleGroup';
+export * from './lib/organisms/WorkflowNode';
+export * from './lib/templates/DiagramContainer';
+export * from './lib/templates/DiagramContent';
+export * from './lib/templates/Diagramming';
+export type { DiagrammingPageRef } from './lib/templates/Diagramming';
+export * from './lib/templates/PageLinks';
+export * from './lib/types/card-node';
+export * from './lib/types/collaboration-types';
+export * from './lib/types/colors';
+export * from './lib/types/edge-types';
+export * from './lib/types/hooks.types';
+export * from './lib/types/node-types';
+export * from './lib/types/SmartDynamicFormField';
+export * from './lib/types/stencil-item';
+export * from './lib/types/structures';
+export * from './lib/types/workflow-content-dynamic-form-type';
+export * from './lib/types/FunctionSignature';
+export * from './lib/utils/add-new-block';
+export * from './lib/utils/add-new-node';
+export * from './lib/utils/addToHistory';
+export * from './lib/utils/closestPoint';
+export * from './lib/utils/color-options';
+export * from './lib/utils/compress-img';
+export * from './lib/utils/constant-lengths';
+export * from './lib/utils/create-updated';
+export * from './lib/utils/createHistoryChange';
+export * from './lib/utils/edge-hooks';
+export * from './lib/utils/elkLayout';
+export * from './lib/utils/event-hooks';
+export * from './lib/utils/event-store';
+export * from './lib/utils/flow-node-hooks';
+export * from './lib/utils/flow-to-js';
+export * from './lib/utils/helpers.types';
+export * from './lib/utils/logger';
+export * from './lib/utils/model-hooks';
+export * from './lib/utils/node-hooks';
+export { useHistory, useHistoryIndex } from './lib/contexts/DiagramProvider';
+export * from './lib/utils/object';
+export * from './lib/utils/nodeutils';
+export * from './lib/utils/utilities';
+export * from './lib/utils/vhToPixels';
+export * from './lib/assets/markers/markers.param';
+export * from './lib/assets/markers/markers.type';
+export * from './lib/organisms/Card/card.params';
+export * from './lib/organisms/Card/card.types';
+export * from './lib/organisms/Card/EntityNode';
+export * from './lib/organisms/CustomEdge/custom-edge-generator';
+export * from './lib/organisms/CustomEdge/custom-edge.params';
+export * from './lib/organisms/CustomEdge/custom-edge.type';
+export * from './lib/organisms/PropertiesPane';
+export * from './lib/organisms/HistoryPane';
+//export * from './lib/types/workflow-node-data-types';
+export * from './lib/templates/node-forms/NodeForm';
+export { AutomationExecutionEngine } from './lib/utils/AutomationExecutionEngine';
+export type {
+  AutomationLog,
+  AutomationResult,
+} from './lib/utils/AutomationExecutionEngine';
+export * from './lib/components/automation';
+export * from './lib/types/automation-node-data-types';

package/packages/diagrams/src/lib/components/automation/AutomationEndNode.tsx

@@ -264,16 +264,16 @@ export const AutomationEndNode: React.FC<AutomationEndNodeProps> = ({ data, sele
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: data.status === 'Completed' 
-                                ? 'rgba(37, 99, 235, 0.1)' 
+                            backgroundColor: data.status === 'Completed'
+                                ? 'rgba(37, 99, 235, 0.1)'
                                 : data.status === 'Running'
-                                ? 'rgba(251, 191, 36, 0.1)'
-                                : 'rgba(16, 185, 129, 0.1)',
-                            color: data.status === 'Completed' 
-                                ? '#93C5FD' 
+                                    ? 'rgba(251, 191, 36, 0.1)'
+                                    : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed'
+                                ? '#93C5FD'
                                 : data.status === 'Running'
-                                ? '#FCD34D'
-                                : '#86EFAC',
+                                    ? '#FCD34D'
+                                    : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

package/packages/diagrams/src/lib/components/automation/AutomationFormattingNode.tsx

@@ -339,16 +339,16 @@ export const AutomationFormattingNode: React.FC<AutomationFormattingNodeProps> =
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: data.status === 'Completed' 
-                                ? 'rgba(37, 99, 235, 0.1)' 
+                            backgroundColor: data.status === 'Completed'
+                                ? 'rgba(37, 99, 235, 0.1)'
                                 : data.status === 'Running'
-                                ? 'rgba(251, 191, 36, 0.1)'
-                                : 'rgba(16, 185, 129, 0.1)',
-                            color: data.status === 'Completed' 
-                                ? '#93C5FD' 
+                                    ? 'rgba(251, 191, 36, 0.1)'
+                                    : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed'
+                                ? '#93C5FD'
                                 : data.status === 'Running'
-                                ? '#FCD34D'
-                                : '#86EFAC',
+                                    ? '#FCD34D'
+                                    : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

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

@@ -43,7 +43,7 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
     // Get the icon component based on the iconName
     const IconComponent = getIconByName(data.iconName);
 
-    
+
 
     const handleJsonClick = () => {
         if (nodeId) setSelectedNode(nodeId);
@@ -265,16 +265,16 @@ export const AutomationStartNode: React.FC<AutomationStartNodeProps> = ({ data,
                         label={data.status}
                         size="small"
                         sx={{
-                            backgroundColor: data.status === 'Completed' 
-                                ? 'rgba(37, 99, 235, 0.1)' 
+                            backgroundColor: data.status === 'Completed'
+                                ? 'rgba(37, 99, 235, 0.1)'
                                 : data.status === 'Running'
-                                ? 'rgba(251, 191, 36, 0.1)'
-                                : 'rgba(16, 185, 129, 0.1)',
-                            color: data.status === 'Completed' 
-                                ? '#93C5FD' 
+                                    ? 'rgba(251, 191, 36, 0.1)'
+                                    : 'rgba(16, 185, 129, 0.1)',
+                            color: data.status === 'Completed'
+                                ? '#93C5FD'
                                 : data.status === 'Running'
-                                ? '#FCD34D'
-                                : '#86EFAC',
+                                    ? '#FCD34D'
+                                    : '#86EFAC',
                             fontWeight: 500,
                             fontSize: '12px',
                             height: '24px',

package/packages/diagrams/src/lib/i18n.ts

@@ -0,0 +1,42 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// Import translation resources
+import translationEN from '../../locales/en/translation.json';
+
+// Initialize i18next for the diagrams library
+export const initDiagramsI18n = (customResources?: any) => {
+  // Only initialize if not already initialized
+  if (!i18n.isInitialized) {
+    i18n.use(initReactI18next).init({
+      resources: customResources || {
+        en: {
+          translation: translationEN,
+        },
+      },
+      fallbackLng: 'en',
+      debug: false,
+      interpolation: {
+        escapeValue: false,
+      },
+      // Add namespace for the library to avoid conflicts
+      defaultNS: 'translation',
+    });
+  } else if (customResources) {
+    // If already initialized, add resources to existing instance
+    Object.keys(customResources).forEach((lng) => {
+      Object.keys(customResources[lng]).forEach((ns) => {
+        i18n.addResourceBundle(lng, ns, customResources[lng][ns], true, true);
+      });
+    });
+  }
+
+  return i18n;
+};
+
+// Export translation resources for manual initialization
+export { translationEN };
+
+// Export configured i18n instance
+export default i18n;
+