feat: code editor (#34)

* feat: code editor

* fix: lint

* fix workspace, update lerna config

* add commands

* update workflows

* update lint ignore

* add run-install

* fix run install

* add recursive install

* chore(release): publish

 - @gorules/[email protected]
 - @gorules/[email protected]
 - @gorules/[email protected]

* update package

* fix: editor

* improve performance

* refactor maxRows

* fix styles

* fix

* chore(release): publish

 - @gorules/[email protected]
 - @gorules/[email protected]
 - @gorules/[email protected]

* improve styles

---------

Co-authored-by: Ivan Miletic <[email protected]>

.eslintignore

@@ -0,0 +1,5 @@
+dist/
+node_modules/
+docs/
+
+packages/jdm-editor/src/components/function/helpers/default-function.js

.eslintrc → .eslintrc.json

@@ -1,19 +1,15 @@
 {
+  "root": true,
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "ecmaVersion": 2020,
     "sourceType": "module",
-    "project": "./tsconfig.json",
     "ecmaFeatures": {
       "jsx": true
     }
   },
   "plugins": ["react", "@typescript-eslint", "react-hooks", "file-progress"],
-  "extends": [
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier"
-  ],
+  "extends": ["plugin:react/recommended", "plugin:@typescript-eslint/recommended", "prettier"],
   "settings": {
     "react": {
       "version": "detect"
@@ -27,10 +23,7 @@
     "@typescript-eslint/no-empty-interface": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off",
-    "@typescript-eslint/no-unused-vars": [
-      "error",
-      { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }
-    ],
+    "@typescript-eslint/no-unused-vars": ["error", { "varsIgnorePattern": "^_", "argsIgnorePattern": "^_" }],
     "@typescript-eslint/no-use-before-define": "off",
     "file-progress/activate": "warn",
     "react-hooks/exhaustive-deps": "off",

.github/workflows/lint.yaml

@@ -12,9 +12,9 @@ jobs:
     name: Lint code
     steps:
       - uses: actions/checkout@v3
-      - name: Install pnpm
-        run: npm i pnpm -g
-      - name: Install dependencies
-        run: pnpm install
+      - uses: pnpm/action-setup@v3
+        with:
+          run_install: true
+          version: 9
       - name: Run lint and prettier
-        run: pnpm format
+        run: pnpm format

.github/workflows/pages.yaml

@@ -11,21 +11,22 @@ jobs:
     name: Build Storybook
     steps:
       - uses: actions/checkout@v3
-      - name: Install pnpm
-        run: npm i pnpm -g
-      - name: Install dependencies
-        run: pnpm install
-      - name: Run lint and prettier
-        run: pnpm format
+      - uses: pnpm/action-setup@v3
+        with:
+          run_install: |
+            - recursive: true
+          version: 9
+
       - name: Run build-storybook
-        run: pnpm build-storybook
-      - name: Bypass jekyll
-        run: touch docs/.nojekyll
+        run: |
+          pnpm lerna run --scope @gorules/jdm-editor build:storybook
+          touch packages/jdm-editor/docs/.nojekyll
+
       - name: Deploy
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
           BRANCH: gh-pages
-          FOLDER: docs
+          FOLDER: packages/jdm-editor/docs
           CLEAN: true
-          FORCE: true
+          FORCE: true

.github/workflows/publish.yaml

@@ -40,4 +40,4 @@ jobs:
         run: npm publish --access public
         if: ${{ github.event.inputs.version == 'release' }}
         env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.nvmrc

@@ -0,0 +1 @@
+v20.12.2

.prettierignore

@@ -0,0 +1,10 @@
+# Build artifacts
+dist/
+node_modules/
+docs/
+
+pnpm-lock.yaml
+
+# Lezer auto generated packages
+packages/lezer-zen/src
+packages/lezer-zen-template/src

.prettierrc.cjs

@@ -11,4 +11,4 @@ module.exports = {
   ],
   importOrderSeparation: true,
   importOrderSortSpecifiers: true,
-}
+};

README.md

@@ -9,12 +9,13 @@ Whether you’re a developer, data analyst, or decision model expert, JDM Editor
 > Live demo and usage at https://gorules.github.io/jdm-editor/
 
 ## Installation
+
 ```bash
 npm i @gorules/jdm-editor
 ```
 
-
 ## Usage
+
 ```typescript
 ...
 import '@gorules/jdm-editor/dist/style.css';
@@ -48,7 +49,7 @@ export type DecisionGraphProps = {
   defaultOpenMenu?: boolean;
   onReactFlowInit?: () => void;
   onSimulatorOpen?: (opened: boolean) => void;
-  onSimulationRun?: ({ context: any, decisionGraph: DecisionGraphType}) => Promise<Trace>;
+  onSimulationRun?: ({ context: any, decisionGraph: DecisionGraphType }) => Promise<Trace>;
 };
 ```
 
@@ -76,19 +77,19 @@ export type DecisionTableProps = {
 };
 ```
 
-
 ## Self-hosting Monaco Editor
+
 To self-host monaco editor in Vite.
 
 ```ts
+import type { Monaco } from '@monaco-editor/react';
+import { loader } from '@monaco-editor/react';
 import * as monaco from 'monaco-editor';
 import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
 import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
 import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-import type { Monaco } from '@monaco-editor/react';
-import { loader } from '@monaco-editor/react';
 
 declare global {
   interface Window {

lerna.json

@@ -0,0 +1,10 @@
+{
+  "version": "independent",
+  "npmClient": "pnpm",
+  "command": {
+    "publish": {
+      "conventionalCommits": true,
+      "message": "chore(release): publish"
+    }
+  }
+}

package.json

@@ -1,120 +1,33 @@
 {
-  "name": "@gorules/jdm-editor",
-  "version": "1.2.1",
-  "description": "",
-  "author": "GoRules <[email protected]> (https://gorules.io)",
-  "homepage": "https://github.com/gorules/jdm-editor",
-  "license": "MIT",
-  "keywords": [],
-  "type": "module",
-  "main": "dist/jdm-editor.umd.cjs",
-  "module": "dist/jdm-editor.js",
-  "types": "dist/index.d.ts",
-  "files": [
-    "dist/",
-    "package.json",
-    "README.md",
-    "LICENSE"
-  ],
-  "packageManager": "[email protected]",
+  "name": "@gorules/jdm-monorepo",
+  "private": true,
+  "packageManager": "[email protected]",
   "scripts": {
-    "build": "vite build",
-    "build:watch": "vite build --watch",
-    "storybook": "storybook dev -p 9009",
-    "build-storybook": "storybook build -o docs",
-    "lint": "eslint 'src/**/*.ts?(x)'",
+    "lerna": "lerna",
+    "build": "lerna run build",
+    "test": "lerna run test",
+    "lint": "eslint --ext js,ts,jsx,tsx .",
     "lint:fix": "pnpm lint --fix",
-    "prettier": "prettier --check 'src/**/*.{ts?(x),css}'",
+    "prettier": "prettier --check .",
     "prettier:fix": "pnpm prettier --write",
     "format": "run-s lint prettier",
-    "format:fix": "run-s lint:fix prettier:fix",
-    "vite": "vite build"
-  },
-  "resolutions": {
-    "enhanced-resolve": "5.10.0"
-  },
-  "dependencies": {
-    "@ant-design/icons": "5.2.6",
-    "@monaco-editor/react": "^4.6.0",
-    "@tanstack/react-table": "8.11.7",
-    "@tanstack/react-virtual": "3.2.0",
-    "ace-builds": "^1.32.5",
-    "antd": "5.13.3",
-    "clsx": "2.1.0",
-    "dnd-core": "^16.0.1",
-    "exceljs": "^4.4.0",
-    "fast-deep-equal": "^3.1.3",
-    "immer": "10.0.3",
-    "json5": "^2.2.3",
-    "monaco-editor": "^0.45.0",
-    "react-ace": "^10.1.0",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "16.0.1",
-    "react-json-tree": "^0.18.0",
-    "reactflow": "11.10.3",
-    "slugify": "1.6.6",
-    "ts-pattern": "^5.0.6",
-    "use-debounce": "^10.0.0",
-    "uuid": "9.0.1",
-    "zustand": "^4.5.0"
+    "format:fix": "run-s lint:fix prettier:fix"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.6.10",
-    "@storybook/addon-docs": "7.6.10",
-    "@storybook/addon-essentials": "7.6.10",
-    "@storybook/addon-interactions": "7.6.10",
-    "@storybook/addon-links": "7.6.10",
-    "@storybook/addon-storysource": "^7.6.10",
-    "@storybook/addons": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-vite": "^7.6.10",
-    "@storybook/testing-library": "0.2.2",
-    "@testing-library/jest-dom": "6.3.0",
-    "@testing-library/react": "14.1.2",
-    "@testing-library/react-hooks": "8.0.1",
-    "@testing-library/user-event": "14.5.2",
-    "@trivago/prettier-plugin-sort-imports": "4.3.0",
-    "@types/big.js": "^6.2.2",
-    "@types/lodash.debounce": "4.0.9",
-    "@types/node": "20.11.10",
-    "@types/papaparse": "5.3.14",
-    "@types/react": "18.2.48",
-    "@types/react-dom": "18.2.18",
-    "@types/uuid": "9.0.8",
-    "@typescript-eslint/eslint-plugin": "6.19.1",
-    "@typescript-eslint/parser": "6.19.1",
-    "cz-conventional-changelog": "3.3.0",
-    "dayjs": "^1.11.10",
+    "@swc/core": "^1.4.16",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@typescript-eslint/eslint-plugin": "^7.7.0",
+    "@typescript-eslint/parser": "^7.7.0",
     "eslint": "8.56.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-plugin-file-progress": "1.3.0",
-    "eslint-plugin-react": "7.33.2",
-    "eslint-plugin-react-hooks": "4.6.0",
-    "npm-run-all": "4.1.5",
-    "prettier": "3.2.4",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
-    "sass": "^1.70.0",
-    "storybook": "7.6.10",
-    "storybook-dark-mode": "^3.0.3",
-    "typescript": "5.3.3",
-    "vite": "5.0.12",
-    "vite-plugin-dts": "^3.7.2"
-  },
-  "jest": {
-    "collectCoverageFrom": [
-      "src/**",
-      "!src/types.ts",
-      "!src/index.ts",
-      "!src/stories/**"
-    ],
-    "coverageReporters": [
-      "lcov",
-      "json-summary"
-    ]
-  },
-  "peerDependencies": {
-    "react": ">= 18",
-    "react-dom": ">= 18"
+    "eslint-plugin-file-progress": "^1.3.0",
+    "eslint-plugin-react": "^7.34.1",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "lerna": "^8.1.2",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^3.2.5",
+    "typescript": "^5.4.5"
   }
 }

.storybook/main.js → packages/jdm-editor/.storybook/main.ts

@@ -1,13 +1,18 @@
-module.exports = {
+import { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
   stories: ['../src/**/*.stories.tsx'],
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
     'storybook-dark-mode',
-    '@storybook/addon-storysource'
+    '@storybook/addon-storysource',
   ],
   framework: {
     name: '@storybook/react-vite',
+    options: {},
   },
-}
+};
+
+export default config;

.storybook/manager-head.html → packages/jdm-editor/.storybook/manager-head.html

@@ -1,4 +1,4 @@
 <script>
-  document.title = 'JDM Editor'
+  document.title = 'JDM Editor';
 </script>
 <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />

packages/jdm-editor/.storybook/manager.ts

@@ -0,0 +1,8 @@
+import { STORY_RENDERED } from '@storybook/core-events';
+import { addons } from '@storybook/manager-api';
+
+addons.register('TitleAddon', (api) => {
+  api.on(STORY_RENDERED, () => {
+    document.title = 'JDM Editor';
+  });
+});

.storybook/preview-head.html → packages/jdm-editor/.storybook/preview-head.html

@@ -2,4 +2,4 @@
   #root {
     padding: 20px;
   }
-</style>
+</style>