@flowuent-org/diagramming-core 1.0.5 → 1.0.7

package/package.json

@@ -1,116 +1,116 @@
-{
-  "name": "@flowuent-org/diagramming-core",
-  "version": "1.0.5",
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "dev-diagramming": "nx serve diagramming",
-    "build-diagrams": "nx build diagrams"
-  },
-  "dependencies": {
-    "@dnd-kit/core": "^6.2.0",
-    "@dnd-kit/modifiers": "^8.0.0",
-    "@dnd-kit/sortable": "^9.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@emotion/react": "^11.13.5",
-    "@emotion/styled": "^11.13.5",
-    "@fontsource/roboto": "^5.1.0",
-    "@hookform/resolvers": "^3.9.1",
-    "@mui/base": "5.0.0-beta.62",
-    "@mui/icons-material": "^6.1.8",
-    "@mui/material": "^6.1.8",
-    "@mui/types": "^7.2.19",
-    "@mui/x-data-grid": "^7.22.3",
-    "@tabler/icons-react": "^3.22.0",
-    "@welldone-software/why-did-you-render": "^8.0.3",
-    "@xyflow/react": "^12.3.5",
-    "axios": "^1.7.8",
-    "elkjs": "^0.9.3",
-    "file-saver": "^2.0.5",
-    "formik": "^2.4.6",
-    "framer-motion": "^11.11.17",
-    "gapi-script": "^1.2.0",
-    "html-to-image": "^1.11.11",
-    "i18next": "^24.0.2",
-    "immer": "^10.1.1",
-    "jotai": "^2.10.3",
-    "js-beautify": "^1.15.1",
-    "lodash": "^4.17.21",
-    "nanoid": "^5.0.9",
-    "react": "19.0.0",
-    "react-color": "^2.19.3",
-    "react-dnd": "^16.0.1",
-    "react-dom": "19.0.0",
-    "react-from-json": "^0.8.0",
-    "react-hook-form": "^7.53.2",
-    "react-i18next": "^15.1.2",
-    "react-icons": "^5.3.0",
-    "react-json-view": "^1.21.3",
-    "react-rnd": "^10.4.13",
-    "react-router-dom": "^7.0.1",
-    "react-syntax-highlighter": "^15.6.1",
-    "reactflow": "^11.11.4",
-    "tslib": "^2.8.1",
-    "use-undo": "^1.1.1",
-    "uuid": "^11.1.0",
-    "xlsx": "^0.18.5",
-    "yup": "^1.4.0",
-    "zustand": "^5.0.1"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.26.0",
-    "@babel/preset-react": "^7.25.9",
-    "@nx/cypress": "20.6.4",
-    "@nx/eslint": "20.6.4",
-    "@nx/eslint-plugin": "20.6.4",
-    "@nx/js": "20.6.4",
-    "@nx/react": "20.6.4",
-    "@nx/rollup": "20.6.4",
-    "@nx/vite": "20.6.4",
-    "@nx/web": "20.6.4",
-    "@nx/webpack": "20.6.4",
-    "@nx/workspace": "20.6.4",
-    "@rollup/plugin-typescript": "^12.1.1",
-    "@rollup/plugin-url": "^8.0.2",
-    "@svgr/rollup": "^8.1.0",
-    "@svgr/webpack": "^8.1.0",
-    "@swc-node/register": "~1.10.9",
-    "@swc/cli": "~0.5.1",
-    "@swc/core": "~1.9.3",
-    "@swc/helpers": "~0.5.15",
-    "@testing-library/react": "16.1.0",
-    "@types/file-saver": "^2.0.7",
-    "@types/jest": "^29.5.14",
-    "@types/js-beautify": "^1.14.3",
-    "@types/lodash": "^4.17.13",
-    "@types/node": "22.10.0",
-    "@types/react": "18.3.12",
-    "@types/react-color": "^3.0.12",
-    "@types/react-dom": "18.3.1",
-    "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^8.16.0",
-    "@typescript-eslint/parser": "^8.16.0",
-    "@vitejs/plugin-react": "^4.3.4",
-    "@vitest/coverage-v8": "^2.1.6",
-    "@vitest/ui": "^2.1.6",
-    "eslint": "~9.15.0",
-    "eslint-config-prettier": "^9.1.0",
-    "eslint-plugin-cypress": "^4.1.0",
-    "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.0.0",
-    "eslint-plugin-react-refresh": "^0.4.14",
-    "jsdom": "~25.0.1",
-    "nx": "20.6.4",
-    "prettier": "^3.4.1",
-    "rollup-preserve-directives": "^1.1.3",
-    "swc-loader": "0.1.15",
-    "typescript": "~5.7.2",
-    "vite": "^6.3.6",
-    "vitest": "^2.1.6",
-    "webpack-cli": "^5.1.4"
-  }
-}
+{
+  "name": "@flowuent-org/diagramming-core",
+  "version": "1.0.7",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev-diagramming": "nx serve diagramming",
+    "build-diagrams": "nx build diagrams"
+  },
+  "dependencies": {
+    "@dnd-kit/core": "^6.2.0",
+    "@dnd-kit/modifiers": "^8.0.0",
+    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@emotion/react": "^11.13.5",
+    "@emotion/styled": "^11.13.5",
+    "@fontsource/roboto": "^5.1.0",
+    "@hookform/resolvers": "^3.9.1",
+    "@mui/base": "5.0.0-beta.62",
+    "@mui/icons-material": "^6.1.8",
+    "@mui/material": "^6.1.8",
+    "@mui/types": "^7.2.19",
+    "@mui/x-data-grid": "^7.22.3",
+    "@tabler/icons-react": "^3.22.0",
+    "@welldone-software/why-did-you-render": "^8.0.3",
+    "@xyflow/react": "^12.3.5",
+    "axios": "^1.7.8",
+    "elkjs": "^0.9.3",
+    "file-saver": "^2.0.5",
+    "formik": "^2.4.6",
+    "framer-motion": "^11.11.17",
+    "gapi-script": "^1.2.0",
+    "html-to-image": "^1.11.11",
+    "i18next": "^24.0.2",
+    "immer": "^10.1.1",
+    "jotai": "^2.10.3",
+    "js-beautify": "^1.15.1",
+    "lodash": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "react": "19.0.0",
+    "react-color": "^2.19.3",
+    "react-dnd": "^16.0.1",
+    "react-dom": "19.0.0",
+    "react-from-json": "^0.8.0",
+    "react-hook-form": "^7.53.2",
+    "react-i18next": "^15.1.2",
+    "react-icons": "^5.3.0",
+    "react-json-view": "^1.21.3",
+    "react-rnd": "^10.4.13",
+    "react-router-dom": "^7.0.1",
+    "react-syntax-highlighter": "^15.6.1",
+    "reactflow": "^11.11.4",
+    "tslib": "^2.8.1",
+    "use-undo": "^1.1.1",
+    "uuid": "^11.1.0",
+    "xlsx": "^0.18.5",
+    "yup": "^1.4.0",
+    "zustand": "^5.0.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.0",
+    "@babel/preset-react": "^7.25.9",
+    "@nx/cypress": "20.6.4",
+    "@nx/eslint": "20.6.4",
+    "@nx/eslint-plugin": "20.6.4",
+    "@nx/js": "20.6.4",
+    "@nx/react": "20.6.4",
+    "@nx/rollup": "20.6.4",
+    "@nx/vite": "20.6.4",
+    "@nx/web": "20.6.4",
+    "@nx/webpack": "20.6.4",
+    "@nx/workspace": "20.6.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@rollup/plugin-url": "^8.0.2",
+    "@svgr/rollup": "^8.1.0",
+    "@svgr/webpack": "^8.1.0",
+    "@swc-node/register": "~1.10.9",
+    "@swc/cli": "~0.5.1",
+    "@swc/core": "~1.9.3",
+    "@swc/helpers": "~0.5.15",
+    "@testing-library/react": "16.1.0",
+    "@types/file-saver": "^2.0.7",
+    "@types/jest": "^29.5.14",
+    "@types/js-beautify": "^1.14.3",
+    "@types/lodash": "^4.17.13",
+    "@types/node": "22.10.0",
+    "@types/react": "18.3.12",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "18.3.1",
+    "@types/uuid": "^10.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.16.0",
+    "@typescript-eslint/parser": "^8.16.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^2.1.6",
+    "@vitest/ui": "^2.1.6",
+    "eslint": "~9.15.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-cypress": "^4.1.0",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.14",
+    "jsdom": "~25.0.1",
+    "nx": "20.6.4",
+    "prettier": "^3.4.1",
+    "rollup-preserve-directives": "^1.1.3",
+    "swc-loader": "0.1.15",
+    "typescript": "~5.7.2",
+    "vite": "^6.3.6",
+    "vitest": "^2.1.6",
+    "webpack-cli": "^5.1.4"
+  }
+}

package/packages/diagrams/I18N_SETUP.md

@@ -0,0 +1,126 @@
+# Internationalization (i18n) Setup
+
+The `@flowuent-labs/diagrams` library includes built-in translation support using i18next. To ensure translations work correctly in your application, you need to initialize i18n before using the library components.
+
+## Quick Start
+
+### Option 1: Use Built-in Initialization (Recommended)
+
+Import and call the `initDiagramsI18n` function before rendering any diagram components:
+
+```typescript
+import { initDiagramsI18n } from '@flowuent-labs/diagrams';
+
+// Initialize i18n with default translations
+initDiagramsI18n();
+
+// Now you can use any diagram components
+function App() {
+  return <YourDiagramComponent />;
+}
+```
+
+### Option 2: Manual Initialization with Custom Translations
+
+If you want to customize or extend the translations:
+
+```typescript
+import { initDiagramsI18n, translationEN } from '@flowuent-labs/diagrams';
+
+// Initialize with custom translations
+initDiagramsI18n({
+  en: {
+    translation: {
+      ...translationEN,
+      // Add your custom translations or overrides here
+      customKey: 'Custom value',
+    },
+  },
+  // Add other languages
+  es: {
+    translation: {
+      // Spanish translations
+    },
+  },
+});
+```
+
+### Option 3: Use Existing i18next Instance
+
+If your app already uses i18next, you can add the library's translations to your existing configuration:
+
+```typescript
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { translationEN } from '@flowuent-labs/diagrams';
+
+i18n
+  .use(initReactI18next)
+  .init({
+    resources: {
+      en: {
+        translation: {
+          // Your app translations
+          ...yourAppTranslations,
+          // Library translations
+          ...translationEN,
+        },
+      },
+    },
+    fallbackLng: 'en',
+    interpolation: {
+      escapeValue: false,
+    },
+  });
+```
+
+## Available Translations
+
+The library currently includes:
+- English (en) - `translationEN`
+
+## Common Issues
+
+### Translation Keys Showing Instead of Text
+
+If you see translation keys (e.g., `tooltip.clear`, `button.save`) instead of actual text, it means i18n is not initialized. Make sure to call `initDiagramsI18n()` before rendering any components.
+
+### Translations Not Working in Production
+
+Ensure your build process includes the `locales` folder from the library. The translation files are automatically included in the npm package.
+
+## API Reference
+
+### `initDiagramsI18n(customResources?: any): i18n`
+
+Initializes or updates the i18next instance with diagram translations.
+
+**Parameters:**
+- `customResources` (optional): Custom translation resources object
+
+**Returns:**
+- The i18next instance
+
+### `translationEN`
+
+The default English translation resource object. Can be imported for customization or extension.
+
+## Example: Complete Setup
+
+```typescript
+// main.tsx or index.tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { initDiagramsI18n } from '@flowuent-labs/diagrams';
+import App from './App';
+
+// Initialize i18n before rendering
+initDiagramsI18n();
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);
+```
+