Merge branch 'reorder-variadic-ports' of https://github.com/tokens-st…

…udio/graph-engine into reorder-variadic-ports

.eslintrc.cjs

@@ -1,7 +1,7 @@
 module.exports = {
 	root: true,
-	// This tells ESLint to load the config from the package `eslint-config-custom`
-	extends: ['custom'],
+	// This tells ESLint to load the config from the package `@tokens-studio/eslint-custom-config`
+	extends: ['@tokens-studio/eslint-custom-config'],
 	settings: {
 		next: {
 			rootDir: ['packages/*/']

.github/workflows/deploy-docs.yml

@@ -27,7 +27,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "yarn"
 
       - name: Install dependencies

.github/workflows/pages.yml

@@ -32,7 +32,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "yarn"
 
       - name: Install dependencies

.github/workflows/release.yml

@@ -30,7 +30,7 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "yarn"
 
       - name: Install dependencies

.github/workflows/verify.yml

@@ -1,7 +1,18 @@
-name: Verify changes
+name: CI
 
 on: pull_request
 
+env:
+  HUSKY: 0
+  TURBO_TOKEN: ${{ secrets.TURBO_TOKEN }}
+  TURBO_TEAM: ${{ secrets.TURBO_TEAM }}
+  TURBO_TELEMETRY_DISABLED: 1
+  DO_NOT_TRACK: 1
+
+concurrency:
+  group: ci-${{ github.ref }}
+  cancel-in-progress: true
+
 jobs:
   verify:
     name: Verify changes
@@ -15,14 +26,34 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: 16
+          node-version: 18
           cache: "yarn"
 
+      - name: Install turbo
+        run: yarn global add turbo@1.9.8
+
+      - name: Turbo Cache
+        id: turbo-cache
+        uses: actions/cache@v3
+        with:
+          path: .turbo
+          key: turbo-${{ github.job }}-${{ github.head_ref }}-${{ github.sha }}
+          restore-keys: |
+            turbo-${{ github.job }}-${{ github.head_ref }}-
+      - name: Get yarn cache directory path
+        id: yarn-cache-dir-path
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
+
+      - uses: actions/cache@v3
+        id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
+        with:
+          path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+              
       - name: Install dependencies
-        run: yarn  --frozen-lockfile --prefer-offline
+        run: yarn --frozen-lockfile --immutable
 
-      - name: Lint
-        run: npm run lint
-
       - name: Test
-        run: npm run test:ci
+        run: yarn run test

.npmrc

@@ -0,0 +1,3 @@
+progress=false
+strict-peer-deps=false
+legacy-peer-deps=true

.vscode/settings.json

@@ -3,6 +3,11 @@
     "editor.codeActionsOnSave": {
         "source.fixAll.eslint": "explicit"
     },
+    "eslint.workingDirectories": [
+        {
+            "mode": "auto"
+        }
+    ],
     "eslint.options": {
         "extensions": [
             ".js",

package.json

@@ -21,7 +21,6 @@
     "dev:ui:live": "turbo run dev --filter=@tokens-studio/graph-engine-ui...",
     "docs": "turbo run docs",
     "format": "turbo run format --parallel --continue",
-    "postinstall": "husky install",
     "lint": "turbo run lint",
     "lint-staged": "npx lint-staged",
     "prepare": "husky install",
@@ -44,8 +43,6 @@
   },
   "dependencies": {},
   "devDependencies": {
-    "eslint": "^8.30.0",
-    "eslint-config-custom": "*",
     "husky": "^8.0.3",
     "lint-staged": "^13.2.1",
     "listr2": "5.0.8",

packages/backend/.eslintrc.cjs

@@ -1,4 +1,7 @@
+/* eslint-disable no-undef */
+/** @type {import("eslint").Linter.Config} */
+
 module.exports = {
   root:true,
-  extends: ["custom"],
+  extends: [require.resolve('@tokens-studio/eslint-custom-config/index.js')]
 };

packages/backend/jest.config.ts

@@ -19,10 +19,7 @@ export default {
     // Yes it should be an array to ensure consistency, but jest does not offer this
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$":
       "<rootDir>/tests/__mocks__/file-mock.js",
-    ".+\\.(css|less|scss|sass|styl)$": "identity-obj-proxy",
-    ...pathsToModuleNameMapper(tsconfig.compilerOptions.paths, {
-      prefix: "<rootDir>/",
-    }),
+    ".+\\.(css|less|scss|sass|styl)$": "identity-obj-proxy"
   },
   transform: {
     "^.+\\.(js|jsx)$": "babel-jest",

packages/backend/package.json

@@ -30,7 +30,7 @@
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "release": "npm run build && changeset publish",
-    "test": "jest"
+    "test": "jest --passWithNoTests"
   },
   "sideEffects": true,
   "types": "./dist/esm/index.d.ts",
@@ -63,6 +63,7 @@
     "@types/node": "^20.12.7",
     "@types/swagger-ui-express": "^4.1.6",
     "nodemon": "^3.1.0",
+    "eslint": "8.57.0",
     "prisma": "^5.13.0",
     "supertest": "^6.3.4",
     "tsup": "^8.0.2",
@@ -76,4 +77,4 @@
     "backend"
   ],
   "jsnext:main": "./dist/esm/index.js"
-}
+}

packages/eslint-config-custom/index.js

@@ -1,5 +1,12 @@
+const { resolve } = require("node:path");
+const project = resolve(process.cwd(), "tsconfig.json");
+
+
+
 // Eslint does not support module exports, so we need to use CommonJS syntax
-// eslint-disable-next-line no-undef
+
+
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
   extends: [
     "eslint:recommended",
@@ -9,6 +16,18 @@ module.exports = {
   ],
   parser: "@typescript-eslint/parser",
   plugins: ["sort-imports-es6-autofix", "jest", "@typescript-eslint"],
+  settings: {
+    "import/resolver": {
+      typescript: {
+        project,
+      },
+    },
+  },
+  overrides: [
+    {
+      files: ["*.js?(x)", "*.ts?(x)"],
+    },
+  ],
   rules: {
     "react/jsx-key": "off",
     //If we do this, it must be a good reason

packages/eslint-config-custom/package.json

@@ -1,13 +1,12 @@
 {
   "private": true,
-  "name": "@tokens-studio/eslint-config-custom",
+  "name": "@tokens-studio/eslint-custom-config",
   "version": "0.0.0",
   "license": "MIT",
   "main": "index.js",
   "dependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.59.1",
-    "@typescript-eslint/parser": "^5.59.0",
-    "eslint": "8.30.0",
+    "@typescript-eslint/eslint-plugin": "^7.2.0",
+    "@typescript-eslint/parser": "^7.1.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-turbo": "latest",
     "eslint-import-resolver-typescript": "3.5.5",
@@ -19,9 +18,12 @@
     "eslint-plugin-sort-imports-es6-autofix": "^0.6.0",
     "eslint-plugin-turbo": "^1.9.3"
   },
+  "files": [
+    "index.js"
+  ],
   "devDependencies": {
     "react": "18.2",
     "react-dom": "18.2",
     "typescript": "4.8.4"
   }
-}
+}

packages/graph-editor/.eslintrc.cjs

@@ -1,4 +1,4 @@
 module.exports = {
     root:true,
-    extends: ["custom"],
+    extends: ['@tokens-studio/eslint-custom-config'],
   };

packages/graph-editor/package.json

@@ -112,6 +112,7 @@
     "esbuild-sass-plugin": "^3.2.0",
     "prettier": "2.8.7",
     "resp": "^0.1.1",
+    "eslint": "8.57.0",
     "storybook": "^8.0.9",
     "tsup": "^7.2.0",
     "typescript": "^5.4.5",

packages/graph-editor/src/components/commandPalette/index.tsx

@@ -12,6 +12,7 @@ import { NodeTypes } from '@tokens-studio/graph-engine';
 import { styled } from '@/lib/stitches';
 import { Search } from 'iconoir-react';
 import { observer } from 'mobx-react-lite';
+import { isActiveElementTextEditable } from '@/utils/isActiveElementTextEditable.js';
 
 export interface ICommandMenu {
   reactFlowWrapper: React.MutableRefObject<HTMLDivElement | null>;
@@ -107,10 +108,10 @@ const CommandMenu = ({
     return () => document.removeEventListener('mousemove', move);
   }, [wrapperBounds]);
 
-  // Toggle the menu when ⌘K is pressed
+  // Toggle the menu when shift + K is pressed
   React.useEffect(() => {
-    const down = (e) => {
-      if (e.key === 'K' && e.shiftKey) {
+    const down = (e) => {  
+      if (e.key === 'K' && e.shiftKey && !isActiveElementTextEditable()) {
         e.preventDefault();
 
         dispatch.ui.setNodeInsertPosition(cursorPositionRef.current);
@@ -122,6 +123,15 @@ const CommandMenu = ({
     return () => document.removeEventListener('keydown', down);
   }, [dispatch.ui, showNodesCmdPalette]);
 
+  // Close the menu when Escape key is pressed inside the input
+  const handleKeyDown = (e) => {
+    if (e.key === 'Escape') {
+      e.preventDefault();
+
+      dispatch.ui.setShowNodesCmdPalette(false);
+    }
+  }
+
   return (
     <Command.Dialog
       open={showNodesCmdPalette}
@@ -143,7 +153,7 @@ const CommandMenu = ({
         }}
       >
         <Search />
-        <Command.Input placeholder="Find nodes to add…" />
+        <Command.Input placeholder="Find nodes to add…" onKeyDown={handleKeyDown} />
       </Box>
       <Command.List>
         <Command.Empty>

packages/graph-editor/src/editor/graph.tsx

@@ -67,6 +67,7 @@ import { GraphContextProvider } from '@/context/graph.js';
 import { SelectionContextMenu } from '@/components/contextMenus/selectionContextMenu.js';
 import { ActionProvider } from './actions/provider.js';
 import { HotKeys } from '@/components/hotKeys/index.js';
+import { currentPanelIdSelector } from '@/redux/selectors/graph.js';
 
 const snapGridCoords: SnapGrid = [16, 16];
 const defaultViewport = { x: 0, y: 0, zoom: 1.5 };
@@ -113,6 +114,7 @@ export const EditorApp = React.forwardRef<ImperativeEditorRef, GraphEditorProps>
     const showGridValue = useSelector(showGrid);
     const snapGridValue = useSelector(snapGrid);
     const internalRef = useRef<ImperativeEditorRef>(null);
+    const activeGraphId = useSelector(currentPanelIdSelector);
 
     const refProxy = useCallback((v) => {
       //@ts-ignore
@@ -764,12 +766,13 @@ export const EditorApp = React.forwardRef<ImperativeEditorRef, GraphEditorProps>
                   />
                 )}
                 {nodeCount === 0 && props.emptyContent}
-
-                <CommandMenu
-                  reactFlowWrapper={reactFlowWrapper}
-                  items={panelItems}
-                  handleSelectNewNodeType={handleSelectNewNodeType}
-                />
+                {activeGraphId === id && (
+                  <CommandMenu
+                    reactFlowWrapper={reactFlowWrapper}
+                    items={panelItems}
+                    handleSelectNewNodeType={handleSelectNewNodeType}
+                  />
+                )}
                 {props.children}
               </ReactFlow>
             </HotKeys>

packages/graph-editor/src/redux/models/settings.ts

@@ -49,7 +49,7 @@ export const settingsState = createModel<RootModel>()({
     inlineTypes: false,
     snapGrid: false,
     debugMode: false,
-    showMinimap:true,
+    showMinimap: false,
     delayedUpdate: false
   } as SettingsState,
   reducers: {

packages/graph-editor/src/redux/selectors/graph.ts

@@ -13,3 +13,8 @@ export const graphEditorSelector = createSelector(
     graph,
     (state) => state.currentPanel?.ref
 );
+
+export const currentPanelIdSelector = createSelector(
+    graph,
+    (state) => state.currentPanelId
+);

packages/graph-editor/src/utils/isActiveElementTextEditable.ts

@@ -0,0 +1,12 @@
+export const isActiveElementTextEditable = () => {
+        const activeElement = document.activeElement as HTMLElement;
+
+        if (!activeElement) {
+            return false;
+        }
+
+        const tagName = activeElement.tagName.toLowerCase();
+        const isContentEditable = activeElement.isContentEditable;
+
+        return ['input', 'textarea'].includes(tagName) || isContentEditable;
+}

packages/graph-editor/tsup.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
   bundle: true,
   splitting: true,
   sourcemap: env === 'production', // source map is only available in prod
-  format: env === 'production' ? ['cjs', 'esm'] : ['esm'],
+  format: ['cjs', 'esm'] ,
   skipNodeModulesBundle: true,
   clean: false,
   esbuildPlugins: [sassPlugin()]

packages/graph-engine/.eslintrc.cjs

@@ -1,4 +1,7 @@
+/* eslint-disable no-undef */
+/** @type {import("eslint").Linter.Config} */
+
 module.exports = {
   root:true,
-  extends: ["custom"],
+  extends: [require.resolve('@tokens-studio/eslint-custom-config/index.js')]
 };