refactor: migrate nx, remove storybook, add batiq-editor as submodule

.eslintrc.json

@@ -1,12 +1,12 @@
 {
   "root": true,
   "ignorePatterns": ["**/*"],
-  "plugins": ["@nrwl/nx"],
+  "plugins": ["@nx"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
       "rules": {
-        "@nrwl/nx/enforce-module-boundaries": [
+        "@nx/enforce-module-boundaries": [
           "error",
           {
             "enforceBuildableLibDependency": true,
@@ -23,15 +23,15 @@
     },
     {
       "files": ["*.ts", "*.tsx"],
-      "extends": ["plugin:@nrwl/nx/typescript"],
+      "extends": ["plugin:@nx/typescript"],
       "rules": {
         "@typescript-eslint/ban-ts-comment": "off",
         "@typescript-eslint/no-explicit-any": "off"
       }
     },
     {
       "files": ["*.js", "*.jsx"],
-      "extends": ["plugin:@nrwl/nx/javascript"],
+      "extends": ["plugin:@nx/javascript"],
       "rules": {}
     },
     {
@@ -41,5 +41,14 @@
       },
       "rules": {}
     }
-  ]
+  ],
+  "extends": [null, "plugin:storybook/recommended"],
+  "rules": {
+    "storybook/no-uninstalled-addons": [
+      "error",
+      {
+        "ignore": ["@nx/react/plugins/storybook"]
+      }
+    ]
+  }
 }

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "apps/batiq-editor"]
+	path = apps/batiq-editor
+	url = git@github.com:feedloop/batiq-editor

jest.config.ts

@@ -1,4 +1,4 @@
-import { getJestProjects } from "@nrwl/jest";
+import { getJestProjects } from "@nx/jest";
 
 export default {
   projects: getJestProjects(),

jest.preset.js

@@ -1,3 +1,3 @@
-const nxPreset = require("@nrwl/jest/preset").default;
+const nxPreset = require("@nx/jest/preset").default;
 
 module.exports = { ...nxPreset };

migration-storybook.log

@@ -0,0 +1,60 @@
+🔎 checking possible migrations..
+
+🔎 found a 'new-frameworks' migration:
+╭ Automigration detected ─────────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                         │
+│   We've detected your project is not fully setup with Storybook's 7 new framework format.               │
+│                                                                                                         │
+│   Storybook 7 introduced the concept of frameworks, which abstracts configuration for renderers (e.g.   │
+│   React, Vue), builders (e.g. Webpack, Vite) and defaults to make integrations easier.                  │
+│                                                                                                         │
+│   Your project should be updated to use Storybook's framework: @storybook/react-webpack5. We can        │
+│   attempt to do this for you automatically.                                                             │
+│                                                                                                         │
+│   Here are the steps this migration will do to migrate your project:                                    │
+│   - Add the following dependencies:                                                                     │
+│   - * @storybook/react-webpack5                                                                         │
+│   - Update or specify the framework field in packages/runtime/.storybook/main.ts with the value of      │
+│   "@storybook/react-webpack5".                                                                          │
+│   - Remove the core.builder field in packages/runtime/.storybook/main.ts.                               │
+│                                                                                                         │
+│                                                                                                         │
+│   To learn more about the new framework format, see:                                                    │
+│   https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#new-framework-api                     │
+│                                                                                                         │
+╰─────────────────────────────────────────────────────────────────────────────────────────────────────────╯
+✅ Installing new dependencies: @storybook/react-webpack5
+✅ Updating main.js
+✅ Updating "framework" field
+✅ Removing "core.builder" field
+❌ The migration failed to update your packages/runtime/.storybook/main.ts on your behalf because of the following error:
+        ReferenceError: rootMain is not defined
+
+⚠️ Storybook automigrations are based on AST parsing and it's possible that your packages/runtime/.storybook/main.ts file contains a non-standard format (e.g. your export is not an object) or that there was an error when parsing dynamic values (e.g. "require" calls, or usage of environment variables). When your main config is non-standard, automigrations are unfortunately not possible. Please follow the instructions given previously and follow the documentation to make the updates manually.
+✅ ran new-frameworks migration
+
+🔎 found a 'autodocsTrue' migration:
+╭ Automigration detected ────────────────────────────────────────────────────────────────────────────╮
+│                                                                                                    │
+│   We've changed the configuration of autodocs (previous docsPage), so now the value:               │
+│     - docs.autodocs: true -- means automatically create docs for every CSF file                    │
+│     - docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag     │
+│     - docs.autodocs: false -- means never create autodocs                                          │
+│                                                                                                    │
+│   Based on your prior configuration,  we can set the `docs.autodocs` to keep your old behaviour:   │
+│                                                                                                    │
+│   docs: { autodocs: true }                                                                         │
+│                                                                                                    │
+│   More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes      │
+│                                                                                                    │
+╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
+✅ Setting 'docs.autodocs' to true in main.js
+✅ ran autodocsTrue migration
+
+⚠️  failed to check fix missing-babelrc
+
+TypeError: Cannot read properties of undefined (reading 'name')
+    at Object.check (/home/arrizalamin/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:292:763)
+    at async runFixes (/home/arrizalamin/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:352:1154)
+    at async automigrate (/home/arrizalamin/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:349:676)
+    at async Command.<anonymous> (/home/arrizalamin/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:422:2814)

nx.json

@@ -5,13 +5,7 @@
     "default": {
       "runner": "nx/tasks-runners/default",
       "options": {
-        "cacheableOperations": [
-          "build",
-          "lint",
-          "test",
-          "e2e",
-          "build-storybook"
-        ]
+        "cacheableOperations": ["build", "lint", "test", "e2e"]
       }
     }
   },
@@ -26,13 +20,8 @@
     "lint": {
       "inputs": ["default", "{workspaceRoot}/.eslintrc.json"]
     },
-    "build-storybook": {
-      "inputs": [
-        "default",
-        "^production",
-        "{workspaceRoot}/.storybook/**/*",
-        "{workspaceRoot}/.storybook/**/*"
-      ]
+    "e2e": {
+      "inputs": ["default", "^production"]
     }
   },
   "namedInputs": {
@@ -42,14 +31,30 @@
       "!{projectRoot}/**/?(*.)+(spec|test).[jt]s?(x)?(.snap)",
       "!{projectRoot}/tsconfig.spec.json",
       "!{projectRoot}/jest.config.[jt]s",
-      "!{projectRoot}/.eslintrc.json",
-      "!{projectRoot}/.storybook/**/*",
-      "!{projectRoot}/**/*.stories.@(js|jsx|ts|tsx|mdx)"
+      "!{projectRoot}/.eslintrc.json"
     ],
-    "sharedGlobals": []
+    "sharedGlobals": ["{workspaceRoot}/babel.config.json"]
   },
   "workspaceLayout": {
-    "appsDir": "packages",
+    "appsDir": "apps",
     "libsDir": "packages"
+  },
+  "generators": {
+    "@nx/react": {
+      "application": {
+        "style": "css",
+        "linter": "eslint",
+        "bundler": "vite",
+        "babel": true
+      },
+      "component": {
+        "style": "css"
+      },
+      "library": {
+        "style": "css",
+        "linter": "eslint",
+        "unitTestRunner": "none"
+      }
+    }
   }
 }

package.json

@@ -5,62 +5,74 @@
   "scripts": {},
   "private": true,
   "workspaces": [
+    "apps/*",
     "packages/*"
   ],
   "dependencies": {
-    "@swc/helpers": "~0.5.0",
+    "@swc/helpers": "0.5.1",
     "tslib": "^2.3.0"
   },
   "devDependencies": {
     "@babel/core": "7.12.13",
     "@babel/preset-env": "^7.21.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "7.12.13",
-    "@nrwl/esbuild": "^15.9.2",
-    "@nrwl/eslint-plugin-nx": "^15.9.2",
-    "@nrwl/jest": "^15.9.2",
-    "@nrwl/js": "^15.9.2",
-    "@nrwl/linter": "^15.9.2",
-    "@nrwl/react": "^15.9.2",
-    "@nrwl/rollup": "^15.9.2",
-    "@nrwl/storybook": "^15.9.2",
-    "@nrwl/vite": "^15.9.2",
-    "@nrwl/webpack": "^15.9.2",
-    "@nrwl/workspace": "^15.9.2",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-react-native-web": "^0.0.20",
-    "@storybook/builder-vite": "^0.2.6",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/core-common": "^6.5.15",
-    "@storybook/core-server": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.16",
-    "@storybook/test-runner": "^0.7.2",
+    "@nx/cypress": "16.2.1",
+    "@nx/esbuild": "16.2.1",
+    "@nx/eslint-plugin": "16.2.1",
+    "@nx/jest": "16.2.1",
+    "@nx/js": "16.2.1",
+    "@nx/linter": "16.2.1",
+    "@nx/react": "16.2.1",
+    "@nx/rollup": "16.2.1",
+    "@nx/vite": "16.2.1",
+    "@nx/webpack": "16.2.1",
+    "@nx/workspace": "16.2.1",
+    "@rollup/plugin-url": "^7.0.0",
+    "@svgr/rollup": "^6.1.2",
     "@svgr/webpack": "^5.4.0",
-    "@swc/cli": "^0.1.62",
-    "@swc/core": "^1.3.41",
+    "@swc/cli": "0.1.62",
+    "@swc/core": "~1.3.51",
     "@swc/jest": "^0.2.24",
+    "@testing-library/react": "14.0.0",
     "@types/jest": "^29.4.0",
-    "@types/node": "18.7.1",
-    "@types/react": "^18.0.26",
-    "@typescript-eslint/eslint-plugin": "^5.36.1",
-    "@typescript-eslint/parser": "^5.36.1",
+    "@types/node": "18.14.2",
+    "@types/react": "18.0.28",
+    "@types/react-dom": "18.0.11",
+    "@typescript-eslint/eslint-plugin": "5.59.6",
+    "@typescript-eslint/parser": "5.59.6",
+    "@vitejs/plugin-react": "^3.0.0",
+    "@vitest/coverage-c8": "^0.31.0",
+    "@vitest/ui": "^0.31.0",
     "babel-loader": "8.1.0",
+    "cypress": "^12.11.0",
     "eslint": "~8.15.0",
     "eslint-config-prettier": "8.1.0",
+    "eslint-plugin-cypress": "^2.10.3",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-react": "7.32.2",
+    "eslint-plugin-react-hooks": "4.6.0",
+    "eslint-plugin-storybook": "^0.6.12",
     "fast-glob": "^3.2.12",
     "html-webpack-plugin": "^5.5.0",
     "jest": "^29.4.1",
     "jest-environment-jsdom": "^29.4.1",
     "jest-file-snapshot": "^0.5.0",
-    "nx": "^15.9.2",
+    "jsdom": "~20.0.3",
+    "nx": "16.2.1",
     "prettier": "^2.6.2",
-    "ts-jest": "^29.0.5",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swc-loader": "0.1.15",
+    "ts-jest": "29.1.0",
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.2",
-    "typescript": "~4.9.5",
+    "typescript": "5.0.4",
     "url-loader": "^3.0.0",
-    "vite": "^4.1.1",
-    "vite-tsconfig-paths": "^4.0.5"
+    "vite": "4.3.8",
+    "vite-plugin-eslint": "^1.8.1",
+    "vite-tsconfig-paths": "4.2.0",
+    "vitest": "^0.31.0"
   }
 }

packages/actions/package.json

@@ -14,7 +14,7 @@
     }
   },
   "devDependencies": {
-    "react-native": "0.70.5"
+    "react-native": "0.71.8"
   },
   "peerDependencies": {
     "@react-navigation/native": "^6.1.3",

packages/actions/project.json

@@ -5,7 +5,7 @@
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/actions",
@@ -26,14 +26,14 @@
       "dependsOn": ["build"]
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["packages/actions/**/*.ts"]
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "packages/actions/jest.config.ts",

packages/actions/rollup.config.js

@@ -1,5 +1,5 @@
 const { join } = require("path");
-const nrwlConfig = require("@nrwl/react/plugins/bundle-rollup");
+const nrwlConfig = require("@nx/react/plugins/bundle-rollup");
 
 module.exports = (config) => {
   const nxConfig = nrwlConfig(config);

packages/cli/project.json

@@ -5,7 +5,7 @@
   "projectType": "library",
   "targets": {
     "build": {
-      "executor": "@nrwl/rollup:rollup",
+      "executor": "@nx/rollup:rollup",
       "outputs": ["{options.outputPath}"],
       "options": {
         "outputPath": "dist/packages/cli",
@@ -25,14 +25,14 @@
       "dependsOn": ["build"]
     },
     "lint": {
-      "executor": "@nrwl/linter:eslint",
+      "executor": "@nx/linter:eslint",
       "outputs": ["{options.outputFile}"],
       "options": {
         "lintFilePatterns": ["packages/cli/**/*.ts"]
       }
     },
     "test": {
-      "executor": "@nrwl/jest:jest",
+      "executor": "@nx/jest:jest",
       "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
       "options": {
         "jestConfig": "packages/cli/jest.config.ts",

packages/components/package.json

@@ -28,7 +28,7 @@
   },
   "devDependencies": {
     "@react-navigation/native": "^6.1.3",
-    "expo": "~47.0.13",
+    "expo": "~48.0.17",
     "react-native-safe-area-context": "4.4.1",
     "react-native-svg": "13.4.0"
   }