feat: xyflow upgrade (#7803)

* wip

* fix: reset the sizes

* fix: update zustand

* fix: update

* fix: add additional width

* wip

* fix: remove hacky code

* wip

* wip

* wip

* wip

* wip

* fix: try pre-commit

* fix: add check pre-commit

* fix: remove xyflow

* fix: remove unnecessary files

* fix: update packages

* Update scripts/generate-renderer.sh

---------

Co-authored-by: Kamran Ahmed <kamranahmed.se@gmail.com>

scripts/editor-roadmap-content-json.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Node } from 'reactflow';
+import type { Node } from '@roadmapsh/editor';
 import matter from 'gray-matter';
 import type { RoadmapFrontmatter } from '../src/lib/roadmap';
 import { slugify } from '../src/lib/slugger';

scripts/editor-roadmap-content.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Edge, Node } from 'reactflow';
+import type { Edge, Node } from '@roadmapsh/editor';
 import matter from 'gray-matter';
 import type { RoadmapFrontmatter } from '../src/lib/roadmap';
 import { slugify } from '../src/lib/slugger';

scripts/editor-roadmap-dirs.ts

@@ -1,7 +1,7 @@
 import fs from 'node:fs/promises';
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
-import type { Node } from 'reactflow';
+import type { Node } from '@roadmapsh/editor';
 import matter from 'gray-matter';
 import type { RoadmapFrontmatter } from '../src/lib/roadmap';
 import { slugify } from '../src/lib/slugger';

scripts/generate-renderer.sh

@@ -2,33 +2,10 @@
 
 set -e
 
-# ignore cloning if .temp/web-draw already exists
-if [ ! -d ".temp/web-draw" ]; then
-  mkdir -p .temp
-  git clone git@github.com:roadmapsh/web-draw.git .temp/web-draw
-fi
+# Fetch the latest commit hash from the GitHub repo
+LATEST_COMMIT_HASH=$(git ls-remote https://github.com/roadmapsh/web-draw-v2.git refs/heads/main | awk '{print $1}')
 
-rm -rf editor
-mkdir editor
+echo "Latest commit hash: $LATEST_COMMIT_HASH"
 
-# copy the files at /src/editor/* to /editor
-# while replacing any existing files
-cp -rf .temp/web-draw/src/editor/* editor
-
-# Add @ts-nocheck to the top of each ts and tsx file
-# so that the typescript compiler doesn't complain
-# about the missing types
-find editor -type f \( -name "*.ts" -o -name "*.tsx" \) -print0 | while IFS= read -r -d '' file; do
-  if [ -f "$file" ]; then
-    echo "// @ts-nocheck" > temp
-    cat "$file" >> temp
-    mv temp "$file"
-    echo "Added @ts-nocheck to $file"
-  fi
-done
-
-
-# ignore the worktree changes for the editor directory
-git update-index --assume-unchanged editor/readonly-editor.tsx || true
-git update-index --assume-unchanged editor/renderer/index.tsx || true
-git update-index --assume-unchanged editor/renderer/renderer.ts || true
+# Install the package using the latest commit hash
+pnpm add github:roadmapsh/web-draw#"$LATEST_COMMIT_HASH"\&path:packages/editor

scripts/migrate-editor-roadmap.ts

@@ -0,0 +1,76 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import type { Node } from '@roadmapsh/editor';
+import matter from 'gray-matter';
+import type { RoadmapFrontmatter } from '../src/lib/roadmap';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Directory containing the roadmaps
+const ROADMAP_CONTENT_DIR = path.join(__dirname, '../src/data/roadmaps');
+const allRoadmaps = await fs.readdir(ROADMAP_CONTENT_DIR);
+
+const editorRoadmapIds = new Set<string>();
+for (const roadmapId of allRoadmaps) {
+  const roadmapFrontmatterDir = path.join(
+    ROADMAP_CONTENT_DIR,
+    roadmapId,
+    `${roadmapId}.md`,
+  );
+  const roadmapFrontmatterRaw = await fs.readFile(
+    roadmapFrontmatterDir,
+    'utf-8',
+  );
+  const { data } = matter(roadmapFrontmatterRaw);
+
+  const roadmapFrontmatter = data as RoadmapFrontmatter;
+  if (roadmapFrontmatter.renderer === 'editor') {
+    editorRoadmapIds.add(roadmapId);
+  }
+}
+
+for (const roadmapId of editorRoadmapIds) {
+  const roadmapJSONDir = path.join(
+    ROADMAP_CONTENT_DIR,
+    roadmapId,
+    `${roadmapId}.json`,
+  );
+
+  const roadmapJSONRaw = await fs.readFile(roadmapJSONDir, 'utf-8');
+  const roadmapJSON = JSON.parse(roadmapJSONRaw);
+
+  const roadmapNodes = roadmapJSON.nodes as Node[];
+  const updatedNodes = roadmapNodes.map((node) => {
+    const width = +(node?.width || node?.style?.width || 0);
+    const height = +(node?.height || node?.style?.height || 0);
+
+    const ADDITIONAL_WIDTH = 1;
+    // adding one `1px` in width to avoid the node to be cut in half
+    // this is a quick fix to avoid the issue
+    if (node?.style?.width) {
+      node.style.width = width + ADDITIONAL_WIDTH;
+    }
+
+    if (node?.width) {
+      node.width = width + ADDITIONAL_WIDTH;
+    }
+
+    return {
+      ...node,
+      measured: {
+        width: width + ADDITIONAL_WIDTH,
+        height,
+      },
+    };
+  });
+
+  const updatedRoadmapJSON = {
+    ...roadmapJSON,
+    nodes: updatedNodes,
+  };
+
+  const updatedRoadmapJSONString = JSON.stringify(updatedRoadmapJSON, null, 2);
+  await fs.writeFile(roadmapJSONDir, updatedRoadmapJSONString, 'utf-8');
+}