@flowuent-org/diagramming-core 1.0.5 → 1.0.7

package/TRANSLATION_FIX_SUMMARY.md

@@ -0,0 +1,118 @@
+# Translation Fix Summary
+
+## Problem
+Translation keys (like `tooltip.clear`, `button.save`) were showing instead of actual text when using the published npm library in another app.
+
+## Root Cause
+The translation files were in the `apps/workflow/locales` folder (not part of the library) and were not being bundled with the published npm package. The library code was using `useTranslation()` hooks but had no way to access the translation resources.
+
+## Solution Implemented
+
+### 1. Moved Translation Files to Library
+- ✅ Created `packages/diagrams/locales/en/translation.json`
+- ✅ Copied translation files from apps to library
+
+### 2. Updated Build Configuration
+- ✅ Modified `packages/diagrams/project.json` to include locales folder in build assets
+- ✅ This ensures translations are bundled with the npm package
+
+### 3. Created i18n Configuration
+- ✅ Created `packages/diagrams/src/lib/i18n.ts` with:
+  - `initDiagramsI18n()` - Function to initialize translations
+  - `translationEN` - Export of translation resources
+  - Auto-initialization if i18n not already configured
+
+### 4. Updated Package Dependencies
+- ✅ Added `i18next` and `react-i18next` to package.json dependencies
+
+### 5. Updated Exports
+- ✅ Modified `packages/diagrams/src/index.ts` to export i18n functionality
+
+### 6. Created Documentation
+- ✅ Created `I18N_SETUP.md` with detailed setup instructions
+- ✅ Updated `README.md` with quick start guide
+
+## How Consumers Should Use the Library
+
+### In their main.tsx or index.tsx (BEFORE rendering components):
+
+```typescript
+import { initDiagramsI18n } from '@flowuent-labs/diagrams';
+
+// Initialize i18n
+initDiagramsI18n();
+
+// Then render your app
+ReactDOM.createRoot(document.getElementById('root')!).render(<App />);
+```
+
+## Next Steps
+
+1. **Fix Build Issue** (Separate from i18n):
+   The build is failing due to TypeScript path configuration issues (mixing Unix `/Users` and Windows `C:` paths). This is a pre-existing issue unrelated to the i18n changes. You may need to:
+   - Check your `tsconfig.json` and `tsconfig.lib.json`
+   - Ensure consistent path separators
+   - Or build on a single platform (all Unix or all Windows paths)
+
+2. **Test the Build**:
+   Once the path issue is resolved, rebuild:
+   ```bash
+   nx build diagrams
+   ```
+
+3. **Verify Translation Files Are Included**:
+   After successful build, check `dist/packages/diagrams/locales/` exists
+
+4. **Publish Updated Package**:
+   ```bash
+   cd packages/diagrams
+   npm version patch  # or minor/major
+   npm publish
+   ```
+
+5. **Update Consumer Apps**:
+   In apps using the library:
+   ```bash
+   npm update @flowuent-labs/diagrams
+   ```
+   
+   Then add initialization:
+   ```typescript
+   import { initDiagramsI18n } from '@flowuent-labs/diagrams';
+   initDiagramsI18n(); // Add this before rendering
+   ```
+
+## Alternative: Quick Fix Without Rebuilding
+
+If you need an immediate fix before resolving the build issues, consumers can manually add translations:
+
+```typescript
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+
+// Manually import/copy the translation.json content
+const translations = { /* paste translation.json content */ };
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      translation: translations
+    }
+  },
+  fallbackLng: 'en',
+  interpolation: {
+    escapeValue: false
+  }
+});
+```
+
+## Files Modified/Created
+
+1. ✅ `packages/diagrams/locales/en/translation.json` (new)
+2. ✅ `packages/diagrams/src/lib/i18n.ts` (new)
+3. ✅ `packages/diagrams/src/index.ts` (modified)
+4. ✅ `packages/diagrams/project.json` (modified - assets config)
+5. ✅ `packages/diagrams/package.json` (modified - added i18n deps)
+6. ✅ `packages/diagrams/README.md` (updated)
+7. ✅ `packages/diagrams/I18N_SETUP.md` (new)
+

package/apps/diagramming/src/DiagramTabs.tsx

@@ -1,205 +1,205 @@
-import React, { useEffect } from 'react';
-import { Button, Card, IconButton, Tab, Tabs } from '@mui/material';
-import CloseIcon from '@mui/icons-material/Close';
-import {
-  DiagrammingPage,
-  DownloadPanel,
-  NodeForm,
-  PropertiesPane,
-  useDiagramEdges,
-  useDiagramId,
-  useDiagramNodes,
-  FunctionSignature,
-  FunctionParameter,
-} from '@flowuent-labs/diagrams';
-import { useTabStore } from './tabsStore'; // Import the Zustand store
-import { AddNodeView } from './components/AddNodeView';
-import { conditionBuilderData } from './node-data';
-import DiagramTypes from '../../../packages/diagrams/src/lib/types/diagram-types';
-import { AppBar, Toolbar, Box } from '@mui/material';
-import HomeIcon from '@mui/icons-material/Home';
-import AccountCircleIcon from '@mui/icons-material/AccountCircle';
-import { ICardNode } from '../../../packages/diagrams/src/lib/types/card-node';
-import { Edge, Node } from '@xyflow/react';
-import { Node as ReactFlowNode } from 'reactflow';
-import { ICardNodeData } from '../../../packages/diagrams/src/lib/types/card-node';
-import {
-  WorkflowNodeContentType,
-  RenderAddNodeViewType,
-  GetDefaultNodeDataType,
-  OnChangeEventHandler,
-  ConditionBuilderState,
-} from '../../../packages/diagrams/src/lib/contexts/diagramStoreTypes';
-import { AvailableVariable } from '../../../packages/diagrams/src/lib/types/available-variables';
-
-// Define the interface for diagram page props
-interface DiagramPageProps {
-  onChange?: OnChangeEventHandler;
-  availableFunctions: FunctionSignature[];
-  availableVariables?: AvailableVariable[];
-  id: number;
-  workflowNodeContent?: WorkflowNodeContentType;
-  renderAddNodeView?: RenderAddNodeViewType;
-  getDefaultNodeData?: GetDefaultNodeDataType;
-  conditionBuilderStates?: ConditionBuilderState;
-}
-
-// Generic type for nodes that can be either ICardNode, Node from @xyflow/react, or Node from reactflow
-type GenericNode = ICardNode | Node | ReactFlowNode;
-
-const NodeGetter = () => {
-  const updateTabData = useTabStore.use.updateTabData();
-  const nodes = useDiagramNodes();
-  const edges = useDiagramEdges();
-  const id = useDiagramId();
-  useEffect(() => {
-    //updateTabData(id, nodes, edges);
-  }, [nodes, edges, id, updateTabData]);
-
-  return <div></div>;
-};
-
-// Transform FunctionObject[] to FunctionSignature[]
-const transformFunctions = (functionObjects: Array<{
-  id: string;
-  name: string;
-  args: string[];
-  code: string;
-}>): FunctionSignature[] => {
-  return functionObjects.map(func => ({
-    id: func.id,
-    name: func.name,
-    code: func.code,
-    args: func.args.map((arg: string): FunctionParameter => ({
-      name: arg,
-      type: 'any'
-    }))
-  }));
-};
-
-const DiagramTabs = ({
-  defaultNodes,
-  defaultEdges,
-  children,
-  diagramType,
-  diagramPageProps = {},
-}: {
-  defaultNodes: GenericNode[];
-  defaultEdges: Edge[];
-  children?: React.ReactNode;
-  diagramType: DiagramTypes;
-  diagramPageProps?: Partial<DiagramPageProps>;
-}) => {
-  const {
-    tabs,
-    currentTab,
-    addTab,
-    removeTab,
-    availableFunctions,
-    setCurrentTab,
-    setTabs,
-  } = useTabStore();
-
-  // Ensure the first tab is initialized with default nodes/edges
-  useEffect(() => {
-    if (
-      tabs.length === 1 &&
-      tabs[0].nodes.length === 0 &&
-      tabs[0].edges.length === 0 &&
-      (defaultNodes.length > 0 || defaultEdges.length > 0)
-    ) {
-      setTabs([
-        {
-          ...tabs[0],
-          nodes: defaultNodes,
-          edges: defaultEdges,
-        },
-      ]);
-    }
-  }, [tabs, defaultNodes, defaultEdges, setTabs]);
-
-  // Reset tabs when diagramType changes
-  useEffect(() => {
-    setTabs([
-      {
-        id: Date.now(),
-        title: diagramType.charAt(0).toUpperCase() + diagramType.slice(1) + ' Diagram',
-        nodes: defaultNodes,
-        edges: defaultEdges,
-      },
-    ]);
-    setCurrentTab(0);
-  }, [diagramType, defaultNodes, defaultEdges, setTabs, setCurrentTab]);
-
-  return (
-    <div>
-      {/* Tab Navigation - now using AppBar */}
-      <AppBar position="fixed" sx={{ bgcolor: '#1C1616', boxShadow: 2, borderBottom: '1px solid #23232a', top: 0, width: '100%', zIndex: 1000 }}>
-        <Toolbar sx={{ minHeight: 56, px: 2, display: 'flex', justifyContent: 'space-between' }}>
-          <Box sx={{ display: 'flex', alignItems: 'center' }}>
-            <IconButton edge="start" color="inherit" aria-label="home" sx={{ mr: 2 }}>
-              <HomeIcon sx={{ color: '#fff' }} />
-            </IconButton>
-            <Tabs
-              value={currentTab}
-              onChange={(_, newValue) => setCurrentTab(newValue)}
-              textColor="inherit"
-              indicatorColor="secondary"
-              sx={{ minHeight: 40, '& .MuiTab-root': { color: '#fff', minWidth: 120, borderRadius: 2, mx: 1, bgcolor: '#23232a', fontWeight: 500 }, '& .Mui-selected': { bgcolor: '#111', color: '#fff' }, }}
-            >
-              {tabs.map((tab, index) => (
-                <Tab
-                  key={tab.id}
-                  label={
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
-                      <span>{tab.title}</span>
-                      <IconButton
-                        size="small"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          removeTab(index);
-                        }}
-                        style={{ marginLeft: '8px', padding: '2px' }}
-                      >
-                        <CloseIcon fontSize="small" />
-                      </IconButton>
-                    </div>
-                  }
-                  sx={{ textTransform: 'none', fontSize: 16 }}
-                />
-              ))}
-            </Tabs>
-            <Button onClick={() => addTab(defaultNodes, defaultEdges)} sx={{ ml: 2, bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 2, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>
-              Add Tab
-            </Button>
-          </Box>
-          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
-            <Button variant="contained" sx={{ bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 3, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>Share</Button>
-            <IconButton color="inherit">
-              <AccountCircleIcon sx={{ color: '#fff' }} />
-            </IconButton>
-          </Box>
-        </Toolbar>
-      </AppBar>
-
-      {/* Render Active Diagram */}
-      {tabs.map((tab, index) =>
-        index === currentTab ? (
-          <DiagrammingPage
-            availableFunctions={transformFunctions(availableFunctions)}
-            id={tab.id}
-            key={tab.id}
-            defaultNodes={tab.nodes as ICardNode[]}
-            defaultEdges={tab.edges}
-            diagramType={diagramType}
-            {...diagramPageProps}
-          >
-            {children}
-          </DiagrammingPage>
-        ) : null,
-      )}
-    </div>
-  );
-};
-
-export default DiagramTabs;
+import React, { useEffect } from 'react';
+import { Button, Card, IconButton, Tab, Tabs } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import {
+  DiagrammingPage,
+  DownloadPanel,
+  NodeForm,
+  PropertiesPane,
+  useDiagramEdges,
+  useDiagramId,
+  useDiagramNodes,
+  FunctionSignature,
+  FunctionParameter,
+} from '@flowuent-labs/diagrams';
+import { useTabStore } from './tabsStore'; // Import the Zustand store
+import { AddNodeView } from './components/AddNodeView';
+import { conditionBuilderData } from './node-data';
+import DiagramTypes from '../../../packages/diagrams/src/lib/types/diagram-types';
+import { AppBar, Toolbar, Box } from '@mui/material';
+import HomeIcon from '@mui/icons-material/Home';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import { ICardNode } from '../../../packages/diagrams/src/lib/types/card-node';
+import { Edge, Node } from '@xyflow/react';
+import { Node as ReactFlowNode } from 'reactflow';
+import { ICardNodeData } from '../../../packages/diagrams/src/lib/types/card-node';
+import {
+  WorkflowNodeContentType,
+  RenderAddNodeViewType,
+  GetDefaultNodeDataType,
+  OnChangeEventHandler,
+  ConditionBuilderState,
+} from '../../../packages/diagrams/src/lib/contexts/diagramStoreTypes';
+import { AvailableVariable } from '../../../packages/diagrams/src/lib/types/available-variables';
+
+// Define the interface for diagram page props
+interface DiagramPageProps {
+  onChange?: OnChangeEventHandler;
+  availableFunctions: FunctionSignature[];
+  availableVariables?: AvailableVariable[];
+  id: number;
+  workflowNodeContent?: WorkflowNodeContentType;
+  renderAddNodeView?: RenderAddNodeViewType;
+  getDefaultNodeData?: GetDefaultNodeDataType;
+  conditionBuilderStates?: ConditionBuilderState;
+}
+
+// Generic type for nodes that can be either ICardNode, Node from @xyflow/react, or Node from reactflow
+type GenericNode = ICardNode | Node | ReactFlowNode;
+
+const NodeGetter = () => {
+  const updateTabData = useTabStore.use.updateTabData();
+  const nodes = useDiagramNodes();
+  const edges = useDiagramEdges();
+  const id = useDiagramId();
+  useEffect(() => {
+    //updateTabData(id, nodes, edges);
+  }, [nodes, edges, id, updateTabData]);
+
+  return <div></div>;
+};
+
+// Transform FunctionObject[] to FunctionSignature[]
+const transformFunctions = (functionObjects: Array<{
+  id: string;
+  name: string;
+  args: string[];
+  code: string;
+}>): FunctionSignature[] => {
+  return functionObjects.map(func => ({
+    id: func.id,
+    name: func.name,
+    code: func.code,
+    args: func.args.map((arg: string): FunctionParameter => ({
+      name: arg,
+      type: 'any'
+    }))
+  }));
+};
+
+const DiagramTabs = ({
+  defaultNodes,
+  defaultEdges,
+  children,
+  diagramType,
+  diagramPageProps = {},
+}: {
+  defaultNodes: GenericNode[];
+  defaultEdges: Edge[];
+  children?: React.ReactNode;
+  diagramType: DiagramTypes;
+  diagramPageProps?: Partial<DiagramPageProps>;
+}) => {
+  const {
+    tabs,
+    currentTab,
+    addTab,
+    removeTab,
+    availableFunctions,
+    setCurrentTab,
+    setTabs,
+  } = useTabStore();
+
+  // Ensure the first tab is initialized with default nodes/edges
+  useEffect(() => {
+    if (
+      tabs.length === 1 &&
+      tabs[0].nodes.length === 0 &&
+      tabs[0].edges.length === 0 &&
+      (defaultNodes.length > 0 || defaultEdges.length > 0)
+    ) {
+      setTabs([
+        {
+          ...tabs[0],
+          nodes: defaultNodes,
+          edges: defaultEdges,
+        },
+      ]);
+    }
+  }, [tabs, defaultNodes, defaultEdges, setTabs]);
+
+  // Reset tabs when diagramType changes
+  useEffect(() => {
+    setTabs([
+      {
+        id: Date.now(),
+        title: diagramType.charAt(0).toUpperCase() + diagramType.slice(1) + ' Diagram',
+        nodes: defaultNodes,
+        edges: defaultEdges,
+      },
+    ]);
+    setCurrentTab(0);
+  }, [diagramType, defaultNodes, defaultEdges, setTabs, setCurrentTab]);
+
+  return (
+    <div>
+      {/* Tab Navigation - now using AppBar */}
+      <AppBar position="fixed" sx={{ bgcolor: '#1C1616', boxShadow: 2, borderBottom: '1px solid #23232a', top: 0, width: '100%', zIndex: 1000 }}>
+        <Toolbar sx={{ minHeight: 56, px: 2, display: 'flex', justifyContent: 'space-between' }}>
+          <Box sx={{ display: 'flex', alignItems: 'center' }}>
+            <IconButton edge="start" color="inherit" aria-label="home" sx={{ mr: 2 }}>
+              <HomeIcon sx={{ color: '#fff' }} />
+            </IconButton>
+            <Tabs
+              value={currentTab}
+              onChange={(_, newValue) => setCurrentTab(newValue)}
+              textColor="inherit"
+              indicatorColor="secondary"
+              sx={{ minHeight: 40, '& .MuiTab-root': { color: '#fff', minWidth: 120, borderRadius: 2, mx: 1, bgcolor: '#23232a', fontWeight: 500 }, '& .Mui-selected': { bgcolor: '#111', color: '#fff' }, }}
+            >
+              {tabs.map((tab, index) => (
+                <Tab
+                  key={tab.id}
+                  label={
+                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                      <span>{tab.title}</span>
+                      <IconButton
+                        size="small"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          removeTab(index);
+                        }}
+                        style={{ marginLeft: '8px', padding: '2px' }}
+                      >
+                        <CloseIcon fontSize="small" />
+                      </IconButton>
+                    </div>
+                  }
+                  sx={{ textTransform: 'none', fontSize: 16 }}
+                />
+              ))}
+            </Tabs>
+            <Button onClick={() => addTab(defaultNodes, defaultEdges)} sx={{ ml: 2, bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 2, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>
+              Add Tab
+            </Button>
+          </Box>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+            <Button variant="contained" sx={{ bgcolor: '#6B04F1', color: '#fff', borderRadius: 2, px: 3, fontWeight: 600, textTransform: 'none', boxShadow: 'none', '&:hover': { bgcolor: '#a084ff' } }}>Share</Button>
+            <IconButton color="inherit">
+              <AccountCircleIcon sx={{ color: '#fff' }} />
+            </IconButton>
+          </Box>
+        </Toolbar>
+      </AppBar>
+
+      {/* Render Active Diagram */}
+      {tabs.map((tab, index) =>
+        index === currentTab ? (
+          <DiagrammingPage
+            availableFunctions={transformFunctions(availableFunctions)}
+            id={tab.id}
+            key={tab.id}
+            defaultNodes={tab.nodes as ICardNode[]}
+            defaultEdges={tab.edges}
+            diagramType={diagramType}
+            {...diagramPageProps}
+          >
+            {children}
+          </DiagrammingPage>
+        ) : null,
+      )}
+    </div>
+  );
+};
+
+export default DiagramTabs;

package/apps/diagramming/src/sample-workflow-content.ts

@@ -1,54 +1,55 @@
-// Define the structure of the form data
-import { FormElementBase } from '@flowuent-labs/diagrams';
-
-export const sampleWorkflowContent: FormElementBase = {
-  type: 'Form',
-  props: {
-    title: 'User Registration', // Title for the form
-    children: [
-      /*{
-        type: "TextField",
-        props: {
-          name: "fullName",
-          label: "Full Name",
-        },
-      },
-      {
-        type: "TextField",
-        props: {
-          name: "email",
-          label: "Email Address",
-          type: "email",
-        },
-      },
-      {
-        type: "TextField",
-        props: {
-          name: "age",
-          label: "Age",
-          type: "number",
-        },
-      },
-      {
-        type: "Switch",
-        props: {
-          name: "notifications",
-          label: "Enable Notifications",
-        },
-      },
-      {
-        type: "Select",
-        props: {
-          name: "country",
-          label: "Country",
-          options: [
-            { value: "us", label: "United States" },
-            { value: "ca", label: "Canada" },
-            { value: "uk", label: "United Kingdom" },
-            { value: "au", label: "Australia" },
-          ],
-        },
-      },*/
-    ],
-  },
-};
+// Define the structure of the form data
+import { FormElementBase } from '@flowuent-labs/diagrams';
+
+export const sampleWorkflowContent: FormElementBase = {
+  type: "Form",
+  props: {
+    title: "User Registration", // Title for the form
+    children: [
+      /*{
+        type: "TextField",
+        props: {
+          name: "fullName",
+          label: "Full Name",
+        },
+      },
+      {
+        type: "TextField",
+        props: {
+          name: "email",
+          label: "Email Address",
+          type: "email",
+        },
+      },
+      {
+        type: "TextField",
+        props: {
+          name: "age",
+          label: "Age",
+          type: "number",
+        },
+      },
+      {
+        type: "Switch",
+        props: {
+          name: "notifications",
+          label: "Enable Notifications",
+        },
+      },
+      {
+        type: "Select",
+        props: {
+          name: "country",
+          label: "Country",
+          options: [
+            { value: "us", label: "United States" },
+            { value: "ca", label: "Canada" },
+            { value: "uk", label: "United Kingdom" },
+            { value: "au", label: "Australia" },
+          ],
+        },
+      },*/
+    ],
+  },
+};
+