wip

.gitignore

@@ -4,6 +4,7 @@
 
 # build output
 dist/
+!packages/editor/dist
 .output/
 
 # dependencies
@@ -28,6 +29,4 @@ pnpm-debug.log*
 /playwright-report/
 /playwright/.cache/
 tests-examples
-*.csveditor/
-
-editor/
+*.csveditor/

.npmrc

@@ -1,4 +1,2 @@
 auto-install-peers=true
-strict-peer-dependencies=false
-@roadmapsh:registry=https://npm.pkg.github.com
-//npm.pkg.github.com/:_authToken=${GITHUB_PACKAGES_TOKEN}
+strict-peer-dependencies=false

package.json

@@ -39,7 +39,7 @@
     "@nanostores/react": "^0.8.0",
     "@napi-rs/image": "^1.9.2",
     "@resvg/resvg-js": "^2.6.2",
-    "@roadmapsh/editor": "0.0.11",
+    "@roadmapsh/editor": "workspace:*",
     "@tailwindcss/vite": "^4.1.3",
     "@tanstack/react-query": "^5.59.16",
     "@types/react": "^18.3.11",

packages/editor/dist/index.d.cts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+
+declare const ReadonlyEditor: react.NamedExoticComponent<Omit<any, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Renderer: react.ForwardRefExoticComponent<Omit<any, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare function renderFlowJSON(data: any, options?: any): Promise<any>;
+
+type Edge = any;
+type Node = any;
+type XYPosition = any;
+
+declare function generateRoadmapFromText(markdown: string | any[]): {
+    nodes: Node[];
+    edges: Edge[];
+};
+declare function generateAIRoadmapFromText(markdown: string | any[]): {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+export { type Edge, type Node, ReadonlyEditor, Renderer, type XYPosition, generateAIRoadmapFromText, generateRoadmapFromText, renderFlowJSON };

packages/editor/dist/index.d.ts

@@ -0,0 +1,22 @@
+import * as react from 'react';
+
+declare const ReadonlyEditor: react.NamedExoticComponent<Omit<any, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Renderer: react.ForwardRefExoticComponent<Omit<any, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare function renderFlowJSON(data: any, options?: any): Promise<any>;
+
+type Edge = any;
+type Node = any;
+type XYPosition = any;
+
+declare function generateRoadmapFromText(markdown: string | any[]): {
+    nodes: Node[];
+    edges: Edge[];
+};
+declare function generateAIRoadmapFromText(markdown: string | any[]): {
+    nodes: Node[];
+    edges: Edge[];
+};
+
+export { type Edge, type Node, ReadonlyEditor, Renderer, type XYPosition, generateAIRoadmapFromText, generateRoadmapFromText, renderFlowJSON };

packages/editor/dist/index.js

@@ -0,0 +1 @@
+"use strict";var t=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var k=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var g=(o,r)=>{for(var m in r)t(o,m,{get:r[m],enumerable:!0})},b=(o,r,m,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let d of k(r))!p.call(o,d)&&d!==m&&t(o,d,{get:()=>r[d],enumerable:!(i=s(r,d))||i.enumerable});return o};var x=o=>b(t({},"__esModule",{value:!0}),o);var y={};g(y,{ReadonlyEditor:()=>n,Renderer:()=>h,generateAIRoadmapFromText:()=>w,generateRoadmapFromText:()=>f,renderFlowJSON:()=>u});module.exports=x(y);var c=require("react"),e=require("react/jsx-runtime"),n=(0,c.memo)((0,c.forwardRef)((o,r)=>(0,e.jsxs)("div",{className:"rdm:fixed rdm:bottom-0 rdm:left-0 rdm:right-0 rdm:top-0 rdm:z-[9999] rdm:border rdm:border-gray-200 rdm:bg-white rdm:p-5 rdm:text-black",children:[(0,e.jsx)("h2",{className:"rdm:mb-2 rdm:text-xl rdm:font-semibold",children:"Private Component"}),(0,e.jsx)("p",{className:"rdm:mb-4",children:"Renderer is a private component. If you are a collaborator and have access to it. Run the following command:"}),(0,e.jsx)("code",{className:"rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white",children:"npm run generate-renderer"})]})));n.displayName="ReadonlyEditor";var a=require("react"),l=require("react/jsx-runtime"),h=(0,a.forwardRef)((o,r)=>(0,l.jsxs)("div",{className:"rdm:fixed rdm:bottom-0 rdm:left-0 rdm:right-0 rdm:top-0 rdm:z-[9999] rdm:border rdm:border-gray-200 rdm:bg-white rdm:p-5 rdm:text-black",children:[(0,l.jsx)("h2",{className:"rdm:mb-2 rdm:text-xl rdm:font-semibold",children:"Private Component"}),(0,l.jsx)("p",{className:"rdm:mb-4",children:"Renderer is a private component. If you are a collaborator and have access to it. Run the following command:"}),(0,l.jsx)("code",{className:"rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white",children:"npm run generate-renderer"})]}));h.displayName="Renderer";function u(o,r){return console.warn("renderFlowJSON is not implemented"),console.warn("run the following command to generate the renderer:"),console.warn("> npm run generate-renderer"),Promise.resolve(null)}function f(o){return console.warn("generateRoadmapFromText is not implemented"),console.warn("run the following command to generate the renderer:"),console.warn("> npm run generate-renderer"),{nodes:[],edges:[]}}function w(o){return console.warn("generateAIRoadmapFromText is not implemented"),console.warn("run the following command to generate the renderer:"),console.warn("> npm run generate-renderer"),{nodes:[],edges:[]}}

packages/editor/dist/index.mjs

@@ -0,0 +1 @@
+import{forwardRef as d,memo as m}from"react";import{jsx as r,jsxs as t}from"react/jsx-runtime";var c=m(d((o,l)=>t("div",{className:"rdm:fixed rdm:bottom-0 rdm:left-0 rdm:right-0 rdm:top-0 rdm:z-[9999] rdm:border rdm:border-gray-200 rdm:bg-white rdm:p-5 rdm:text-black",children:[r("h2",{className:"rdm:mb-2 rdm:text-xl rdm:font-semibold",children:"Private Component"}),r("p",{className:"rdm:mb-4",children:"Renderer is a private component. If you are a collaborator and have access to it. Run the following command:"}),r("code",{className:"rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white",children:"npm run generate-renderer"})]})));c.displayName="ReadonlyEditor";import{forwardRef as i}from"react";import{jsx as e,jsxs as a}from"react/jsx-runtime";var n=i((o,l)=>a("div",{className:"rdm:fixed rdm:bottom-0 rdm:left-0 rdm:right-0 rdm:top-0 rdm:z-[9999] rdm:border rdm:border-gray-200 rdm:bg-white rdm:p-5 rdm:text-black",children:[e("h2",{className:"rdm:mb-2 rdm:text-xl rdm:font-semibold",children:"Private Component"}),e("p",{className:"rdm:mb-4",children:"Renderer is a private component. If you are a collaborator and have access to it. Run the following command:"}),e("code",{className:"rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white",children:"npm run generate-renderer"})]}));n.displayName="Renderer";function f(o,l){return console.warn("renderFlowJSON is not implemented"),console.warn("run the following command to generate the renderer:"),console.warn("> npm run generate-renderer"),Promise.resolve(null)}function y(o){return console.warn("generateRoadmapFromText is not implemented"),console.warn("run the following command to generate the renderer:"),console.warn("> npm run generate-renderer"),{nodes:[],edges:[]}}function v(o){return console.warn("generateAIRoadmapFromText is not implemented"),console.warn("run the following command to generate the renderer:"),console.warn("> npm run generate-renderer"),{nodes:[],edges:[]}}export{c as ReadonlyEditor,n as Renderer,v as generateAIRoadmapFromText,y as generateRoadmapFromText,f as renderFlowJSON};

packages/editor/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@roadmapsh/editor",
+  "version": "0.0.12",
+  "description": "Dummy editor for the Roadmap Editor",
+  "private": false,
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "node": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.js"
+        }
+      },
+      "browser": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.js"
+        }
+      },
+      "default": {
+        "import": {
+          "types": "./dist/index.d.ts",
+          "default": "./dist/index.mjs"
+        },
+        "require": {
+          "types": "./dist/index.d.cts",
+          "default": "./dist/index.js"
+        }
+      }
+    },
+    "./style.css": "./dist/index.css"
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ]
+    }
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "clean": "rm -rf dist && rm -rf node_modules",
+    "build": "tsup"
+  },
+  "keywords": [],
+  "author": "Arik Chakma <arikchangma@gmail.com>",
+  "license": "ISC",
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "react": "^19.0.0",
+    "tailwind-merge": "^3.0.1"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4.0.3",
+    "@types/react": "^19.0.8",
+    "postcss": "^8.5.1",
+    "postcss-replace": "^2.0.1",
+    "tailwindcss": "^4.0.3",
+    "tsup": "^8.3.6",
+    "typescript": "^5.7.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - packages/*

scripts/generate-renderer-dummy.sh

@@ -2,22 +2,27 @@
 
 set -e
 
-rm -rf .temp
+# Remove old editor
 rm -rf editor
 
-git clone ssh://git@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
+if [ ! -d ".temp/web-draw" ]; then
+  git clone ssh://git@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
+fi
 
-cd .temp/web-draw
-pnpm install
-npm run build -- --filter=@roadmapsh/dummy-editor
+# Make dir
+mkdir -p packages/editor
+mkdir -p packages/editor/dist
 
+# Copy the editor dist, package.json
+cp -rf .temp/web-draw/packages/dummy-editor/dist packages/editor
+cp -rf .temp/web-draw/packages/dummy-editor/package.json packages/editor
 
-# Copy new editor
-cp -rf packages/dummy-editor ../../editor
+# replace the @roadmapsh/dummy-editor with @roadmapsh/editor
+sed -i '' 's/@roadmapsh\/dummy-editor/@roadmapsh\/editor/g' packages/editor/package.json
 
 # Remove temp directory
 rm -rf .temp
 
 # Reinstall so that the editor which was setup gets used
 rm -rf node_modules
-pnpm install
+pnpm install

scripts/generate-renderer.sh

@@ -9,30 +9,26 @@ if [ ! -d ".temp/web-draw" ]; then
   git clone ssh://git@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
 fi
 
-cd .temp/web-draw
-pnpm install
-npm run build -- --filter=@roadmapsh/editor
+# Make dir
+mkdir -p packages/editor
+mkdir -p packages/editor/dist
 
-cd ../../
+# Copy the editor dist, package.json
+cp -rf .temp/web-draw/packages/editor/dist packages/editor
+cp -rf .temp/web-draw/packages/editor/package.json packages/editor
 
-# Copy new editor
-cp -rf .temp/web-draw/packages/editor editor
+# Remove temp directory
+rm -rf .temp
 
-editor_changed_files=$(git ls-files -m editor)
+editor_changed_files=$(git ls-files -m packages/editor)
 
-echo $editor_changed_files
+echo "editor_changed_files: $editor_changed_files"
 
-# for each of the changed files, assume they are unchanged
 for file in $editor_changed_files; do
   echo "Assuming $file is unchanged"
   git update-index --assume-unchanged $file
 done
 
-# Remove temp directory
-rm -rf .temp
-
 # Reinstall so that the editor which was setup gets used
 rm -rf node_modules
 pnpm install
-
-git checkout -- pnpm-lock.yaml