From 2dc40412286fc29a2855ff427064df5249feb661 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Fri, 4 Apr 2025 23:41:05 +0100
Subject: [PATCH] Add editor
---
editor/.gitignore | 38 ++++++++++
editor/package.json | 81 ++++++++++++++++++++++
editor/postcss.config.mjs | 12 ++++
editor/src/components/readonly-editor.tsx | 22 ++++++
editor/src/components/render-flow-json.ts | 6 ++
editor/src/components/renderer.tsx | 20 ++++++
editor/src/components/roadmap-generator.ts | 27 ++++++++
editor/src/components/types.ts | 3 +
editor/src/global.css | 1 +
editor/src/index.tsx | 7 ++
editor/tsconfig.json | 29 ++++++++
editor/tsup.config.ts | 22 ++++++
scripts/generate-renderer-dummy.sh | 15 ++++
13 files changed, 283 insertions(+)
create mode 100644 editor/.gitignore
create mode 100644 editor/package.json
create mode 100644 editor/postcss.config.mjs
create mode 100644 editor/src/components/readonly-editor.tsx
create mode 100644 editor/src/components/render-flow-json.ts
create mode 100644 editor/src/components/renderer.tsx
create mode 100644 editor/src/components/roadmap-generator.ts
create mode 100644 editor/src/components/types.ts
create mode 100644 editor/src/global.css
create mode 100644 editor/src/index.tsx
create mode 100644 editor/tsconfig.json
create mode 100644 editor/tsup.config.ts
create mode 100644 scripts/generate-renderer-dummy.sh
diff --git a/editor/.gitignore b/editor/.gitignore
new file mode 100644
index 000000000..e3e8f7008
--- /dev/null
+++ b/editor/.gitignore
@@ -0,0 +1,38 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+.pnp
+.pnp.js
+
+# testing
+coverage
+
+# next.js
+.next/
+out/
+dist
+build
+.vercel
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# turbo
+.turbo
+
+# vercel
+.vercel
diff --git a/editor/package.json b/editor/package.json
new file mode 100644
index 000000000..c4d3db0d7
--- /dev/null
+++ b/editor/package.json
@@ -0,0 +1,81 @@
+{
+ "name": "@roadmapsh/dummy-editor",
+ "version": "0.0.5",
+ "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"
+ }
+}
diff --git a/editor/postcss.config.mjs b/editor/postcss.config.mjs
new file mode 100644
index 000000000..2de525e09
--- /dev/null
+++ b/editor/postcss.config.mjs
@@ -0,0 +1,12 @@
+export default {
+ plugins: {
+ '@tailwindcss/postcss': {},
+ 'postcss-replace': {
+ pattern: /(--tw|\*, ::before, ::after)/g,
+ data: {
+ '--tw': '--rdm-tw',
+ '*, ::before, ::after': ':root',
+ },
+ },
+ },
+};
diff --git a/editor/src/components/readonly-editor.tsx b/editor/src/components/readonly-editor.tsx
new file mode 100644
index 000000000..9b577f113
--- /dev/null
+++ b/editor/src/components/readonly-editor.tsx
@@ -0,0 +1,22 @@
+import { forwardRef, memo } from 'react';
+
+export const ReadonlyEditor = memo(
+ forwardRef<HTMLDivElement, any>((props, ref) => {
+ return (
+ <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">
+ <h2 className="rdm:mb-2 rdm:text-xl rdm:font-semibold">
+ Private Component
+ </h2>
+ <p className="rdm:mb-4">
+ Renderer is a private component. If you are a collaborator and have
+ access to it. Run the following command:
+ </p>
+ <code className="rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white">
+ npm run generate-renderer
+ </code>
+ </div>
+ );
+ })
+);
+
+ReadonlyEditor.displayName = 'ReadonlyEditor';
diff --git a/editor/src/components/render-flow-json.ts b/editor/src/components/render-flow-json.ts
new file mode 100644
index 000000000..a802f0ecc
--- /dev/null
+++ b/editor/src/components/render-flow-json.ts
@@ -0,0 +1,6 @@
+export function renderFlowJSON(data: any, options?: any): Promise<any> {
+ console.warn('renderFlowJSON is not implemented');
+ console.warn('run the following command to generate the renderer:');
+ console.warn('> npm run generate-renderer');
+ return Promise.resolve(null);
+}
diff --git a/editor/src/components/renderer.tsx b/editor/src/components/renderer.tsx
new file mode 100644
index 000000000..4559fa526
--- /dev/null
+++ b/editor/src/components/renderer.tsx
@@ -0,0 +1,20 @@
+import { forwardRef } from 'react';
+
+export const Renderer = forwardRef<HTMLDivElement, any>((props, ref) => {
+ return (
+ <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">
+ <h2 className="rdm:mb-2 rdm:text-xl rdm:font-semibold">
+ Private Component
+ </h2>
+ <p className="rdm:mb-4">
+ Renderer is a private component. If you are a collaborator and have
+ access to it. Run the following command:
+ </p>
+ <code className="rdm:mt-5 rdm:rounded-md rdm:bg-gray-800 rdm:p-2 rdm:text-white">
+ npm run generate-renderer
+ </code>
+ </div>
+ );
+});
+
+Renderer.displayName = 'Renderer';
diff --git a/editor/src/components/roadmap-generator.ts b/editor/src/components/roadmap-generator.ts
new file mode 100644
index 000000000..b9c9b47f8
--- /dev/null
+++ b/editor/src/components/roadmap-generator.ts
@@ -0,0 +1,27 @@
+import type { Edge, Node } from './types';
+
+export function generateRoadmapFromText(markdown: string | any[]): {
+ nodes: Node[];
+ edges: Edge[];
+} {
+ console.warn('generateRoadmapFromText is not implemented');
+ console.warn('run the following command to generate the renderer:');
+ console.warn('> npm run generate-renderer');
+ return {
+ nodes: [],
+ edges: [],
+ };
+}
+
+export function generateAIRoadmapFromText(markdown: string | any[]): {
+ nodes: Node[];
+ edges: Edge[];
+} {
+ console.warn('generateAIRoadmapFromText is not implemented');
+ console.warn('run the following command to generate the renderer:');
+ console.warn('> npm run generate-renderer');
+ return {
+ nodes: [],
+ edges: [],
+ };
+}
diff --git a/editor/src/components/types.ts b/editor/src/components/types.ts
new file mode 100644
index 000000000..5f1433c01
--- /dev/null
+++ b/editor/src/components/types.ts
@@ -0,0 +1,3 @@
+export type Edge = any;
+export type Node = any;
+export type XYPosition = any;
diff --git a/editor/src/global.css b/editor/src/global.css
new file mode 100644
index 000000000..cfc321dfe
--- /dev/null
+++ b/editor/src/global.css
@@ -0,0 +1 @@
+@import 'tailwindcss' prefix(rdm);
diff --git a/editor/src/index.tsx b/editor/src/index.tsx
new file mode 100644
index 000000000..1151990ee
--- /dev/null
+++ b/editor/src/index.tsx
@@ -0,0 +1,7 @@
+import './global.css';
+
+export * from './components/readonly-editor';
+export * from './components/renderer';
+export * from './components/render-flow-json';
+export * from './components/roadmap-generator';
+export * from './components/types';
diff --git a/editor/tsconfig.json b/editor/tsconfig.json
new file mode 100644
index 000000000..da875d1cd
--- /dev/null
+++ b/editor/tsconfig.json
@@ -0,0 +1,29 @@
+{
+ "compilerOptions": {
+ "composite": false,
+ "declaration": true,
+ "declarationMap": true,
+ "esModuleInterop": true,
+ "forceConsistentCasingInFileNames": true,
+ "inlineSources": false,
+ "isolatedModules": true,
+ "moduleResolution": "node",
+ "noUnusedLocals": false,
+ "noUnusedParameters": false,
+ "preserveWatchOutput": true,
+ "skipLibCheck": true,
+ "strict": true,
+ "strictNullChecks": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "lib": ["DOM", "DOM.Iterable", "ESNext"],
+ "module": "ESNext",
+ "target": "es6",
+ "baseUrl": ".",
+ "paths": {
+ "~/*": ["src/*"]
+ }
+ },
+ "include": [".", "src/types"],
+ "exclude": ["dist", "build", "node_modules"]
+}
diff --git a/editor/tsup.config.ts b/editor/tsup.config.ts
new file mode 100644
index 000000000..e86205dae
--- /dev/null
+++ b/editor/tsup.config.ts
@@ -0,0 +1,22 @@
+import { defineConfig, Options } from 'tsup';
+
+const packageOptions: Options = {
+ clean: true,
+ dts: true,
+ format: ['cjs', 'esm'],
+ platform: 'neutral',
+ sourcemap: true,
+};
+
+export default defineConfig([
+ {
+ ...packageOptions,
+ entry: {
+ index: 'src/index.tsx',
+ },
+ external: ['react'],
+ outExtension(ctx) {
+ return ctx.format === 'esm' ? { js: '.mjs' } : { js: '.js' };
+ },
+ },
+]);
diff --git a/scripts/generate-renderer-dummy.sh b/scripts/generate-renderer-dummy.sh
new file mode 100644
index 000000000..776152e36
--- /dev/null
+++ b/scripts/generate-renderer-dummy.sh
@@ -0,0 +1,15 @@
+rm -rf .temp
+rm -rf editor
+
+git clone ssh://git@github.com/roadmapsh/web-draw.git .temp/web-draw --depth 1
+
+cd .temp/web-draw
+pnpm install
+npm run build -- --filter=@roadmapsh/dummy-editor
+
+
+# Copy new editor
+cp -rf packages/dummy-editor ../../editor
+
+# Remove temp directory
+rm -rf .temp
\ No newline at end of file