Release 12.0.0 (#114)

## What's Changed * feat: add ESLint playwright plugin by @oltionchampari in #106 * update release.yaml for automated release workflow by @datavisyn-bot in #102 * feat: Added useTriggerFrame, useDeepEffect and useDeepMemo to exhaustive deps by @dvmoritzschoefl in #113 * deps: rspack v1.1, TypeScript v5.7, ESLint v8, ... by @puehringer in #112 * feat: rspack in storybook 8 by @puehringer in #108 ## New Contributors * @datavisyn-bot made their first contribution in #102 * @dvmoritzschoefl made their first contribution in #113 **Full Changelog**: v11.2.0...v12.0.0
datavisyn · Jan 21, 2025 · ba3c0d0 · ba3c0d0
2 parents 6e8d147 + c070dfe
commit ba3c0d0
Show file tree

Hide file tree

Showing 15 changed files with 5,922 additions and 7,759 deletions.
diff --git a/.yarn/releases/yarn-4.1.0.cjs b/.yarn/releases/yarn-4.1.0.cjs
diff --git a/.yarn/releases/yarn-4.6.0.cjs b/.yarn/releases/yarn-4.6.0.cjs
diff --git a/.yarnrc.yml b/.yarnrc.yml
@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.1.0.cjs
+yarnPath: .yarn/releases/yarn-4.6.0.cjs
diff --git a/bin/commands/lint.js b/bin/commands/lint.js
@@ -8,6 +8,6 @@ module.exports = {
     type: 'boolean',
   }),
   handler: (args) => {
-    call('eslint', `${args.cache ? '--cache' : ''} --no-error-on-unmatched-pattern ${(args.strings || []).join(' ')} "src/**/*.ts{,x}" "tests/**/*.ts{,x}" "cypress/**/*.ts{,x}"`);
+    call('eslint', `${args.cache ? '--cache' : ''} --no-error-on-unmatched-pattern ${(args.strings || []).join(' ')} "src/**/*.ts{,x}" "tests/**/*.ts{,x}" "cypress/**/*.ts{,x}" "playwright/**/*.ts{,x}"`);
   },
 };
diff --git a/config/eslintrc.template.js b/config/eslintrc.template.js
@@ -1,8 +1,8 @@
-module.exports = ({ tsconfigRootDir, optimizeImports }) => ({
+module.exports = ({ tsconfigRootDir, optimizeImports = true }) => ({
   root: true,
   extends: [
     'airbnb',
-    'airbnb-typescript',
+    '@kesills/airbnb-typescript',
     'airbnb/hooks',
     'eslint:recommended',
     'plugin:import/recommended',
@@ -17,7 +17,6 @@ module.exports = ({ tsconfigRootDir, optimizeImports }) => ({
     browser: true,
     es6: true,
     jest: true,
-    'cypress/globals': true,
   },
   globals: {
     Atomics: 'readonly',
@@ -63,14 +62,13 @@ module.exports = ({ tsconfigRootDir, optimizeImports }) => ({
     '@typescript-eslint/no-unused-vars': 'warn',
     'max-classes-per-file': 'off',
     'no-param-reassign': ['warn', { props: true, ignorePropertyModificationsFor: ['state'] }], // Exclude state as required by redux-toolkit: https://redux-toolkit.js.org/usage/immer-reducers#linting-state-mutations
-    'cypress/unsafe-to-chain-command': 'off',
     'import/no-extraneous-dependencies': 'off',
     'import/no-webpack-loader-syntax': 'off', // Disable to allow webpack file-loaders syntax
     'import/no-unresolved': 'off', // Disable to allow webpack file-loaders syntax
     'import/prefer-default-export': 'off',
     ...(optimizeImports ? {
       'import/order': [
-        1,
+        'error',
         {
           groups: [['builtin', 'external'], 'internal', ['sibling', 'parent']],
           pathGroups: [
@@ -87,7 +85,7 @@ module.exports = ({ tsconfigRootDir, optimizeImports }) => ({
         },
       ],
       'sort-imports': [
-        1,
+        'error',
         {
           ignoreCase: false,
           ignoreDeclarationSort: true, // don't want to sort import lines, use eslint-plugin-import instead
@@ -130,16 +128,18 @@ module.exports = ({ tsconfigRootDir, optimizeImports }) => ({
       },
     ],
     'react-compiler/react-compiler': 'warn',
+    'react-hooks/exhaustive-deps': ['warn', {
+      additionalHooks: '(useTriggerFrame|useDeepEffect|useDeepMemo|useDeepCallback|useDeepCompareEffect)',
+    }],
+    /*
+    The fork of the eslint-config-airbnb-typescript package has added ESLint Stylistic plugin
+    to the config. see:https://github.com/Kenneth-Sills/eslint-config-airbnb-typescript/pull/3
+    Some of the stylistic rules are not compatible with our current prettier config so we disable them.
+    */
+    '@stylistic/indent': 'off',
+    '@stylistic/comma-dangle': 'off',
   },
   overrides: [
-    {
-      files: ['cypress/**/*'],
-      extends: ['plugin:cypress/recommended', 'plugin:chai-friendly/recommended'],
-      rules: {
-        'cypress/unsafe-to-chain-command': 'warn',
-      },
-      plugins: ['cypress', 'chai-friendly'],
-    },
     {
       files: ['{src|tests}/**/*.{test|spec}.ts'],
       extends: ['plugin:jest/recommended'],

diff --git a/config/rspack.config.js b/config/rspack.config.js
@@ -5,7 +5,7 @@ const fs = require('fs');
 const { defineConfig } = require('@rspack/cli');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const dotenv = require('dotenv');
-const { DotenvPlugin } = require('rspack-plugin-dotenv');
+const DotenvPlugin = require('dotenv-webpack');
 const dotenvExpand = require('dotenv-expand');
 const {
   CopyRspackPlugin, DefinePlugin, SwcJsMinimizerRspackPlugin,

diff --git a/config/storybook.main.template.js b/config/storybook.main.template.js
@@ -1,87 +1,44 @@
+const { resolve } = require('path');
+
 /**
- * @type {import('@storybook/react-webpack5').StorybookConfig}
+ * @type {import('storybook-react-rsbuild').StorybookConfig}
  */
 module.exports = {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  core: {
+    disableTelemetry: true,
+  },
+  docs: {
+    autodocs: true,
+  },
   addons: [
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    {
-      name: '@storybook/addon-styling',
-      options: {
-        // This is our best guess to replicate the style config we are using in the rspack.config.js
-        scssBuildRule: {
-          test: /\.scss$/,
-          use: [
-            'style-loader',
-            {
-              loader: 'css-loader',
-              options: { importLoaders: 1 },
-            },
-            'resolve-url-loader',
-            {
-              loader: 'sass-loader',
-              options: {
-                sourceMap: true,
-              },
-            },
-          ],
-        },
-      },
-    },
-    'storybook-addon-swc',
   ],
   framework: {
-    // TODO: as soon as rspack storybook integration is ready, use that: https://www.rspack.dev/guide/migrate-storybook
-    name: '@storybook/react-webpack5',
+    name: 'storybook-react-rsbuild',
     options: {
       builder: {
-        useSWC: true,
+        rsbuildConfigPath: resolve(__dirname, './storybook.rsbuild.config.ts'),
       },
     },
   },
-  webpackFinal: async (config) => {
+  rsbuildFinal: async (config) => {
+    const reactDocgenLoaderRule = config.tools.rspack[1].module.rules[0];
+
     // eslint-disable-next-line no-param-reassign
-    config.module.rules = config.module.rules.flatMap((rule) => (rule.loader?.includes('swc-loader')
-      ? [
-        {
-          ...rule,
-          options: {
-            ...(rule?.options || {}),
-            jsc: {
-              ...(rule?.options?.jsc || {}),
-              parser: {
-                ...(rule?.options?.jsc?.parser || {}),
-                // Sync rules with our rspack config
-                decorators: true,
-              },
-            },
-          },
-        },
-        {
-          // In addition to the swc-loader rule from storybook, add a rule which allows transforming ts and tsx files (i.e. to transform node_modules/visyn_core)
-          ...rule,
-          options: {
-            ...(rule?.options || {}),
-            jsc: {
-              ...(rule?.options?.jsc || {}),
-              parser: {
-                ...(rule?.options?.jsc?.parser || {}),
-                // Sync rules with our rspack config
-                decorators: true,
-              },
-            },
-          },
-          test: /\.(ts|tsx)$/,
-          exclude: [],
-        },
-      ]
-      : [rule]));
+    config.tools.rspack[1].module.rules = [
+      reactDocgenLoaderRule,
+      {
+        // Copy the rule (found here: https://github.com/rspack-contrib/storybook-rsbuild/blob/c6b92bd1d40b63cebdf78b8bf75594ec0568b972/packages/framework-react/src/react-docs.ts#L27)
+        // And modify it to not exclude node_modules
+        ...reactDocgenLoaderRule,
+        test: /\.(tsx?)$/,
+        exclude: /(\.(stories|story)\.(js|jsx|ts|tsx))/,
+      },
+    ];
 
     return config;
   },
-  docs: {
-    autodocs: true,
-  },
 };
diff --git a/config/storybook.rsbuild.config.ts b/config/storybook.rsbuild.config.ts
@@ -0,0 +1,8 @@
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+import { pluginSass } from '@rsbuild/plugin-sass';
+
+// This is the rsbuild configuration used by storybook, it is not the same as the rspack config!
+export default defineConfig({
+  plugins: [pluginReact(), pluginSass()],
+});
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "visyn_scripts",
   "description": "",
-  "version": "11.3.0",
+  "version": "12.0.0",
   "author": {
     "name": "datavisyn GmbH",
     "email": "[email protected]",
@@ -33,76 +33,81 @@
     "dist": "npm run lint && npm run test"
   },
   "dependencies": {
-    "@rsdoctor/cli": "^0.4.1",
-    "@rsdoctor/rspack-plugin": "^0.4.1",
-    "@rspack/cli": "~1.0.2",
-    "@rspack/core": "~1.0.2",
+    "@kesills/eslint-config-airbnb-typescript": "^20.0.0",
+    "@rsbuild/core": "^1.2.0",
+    "@rsbuild/plugin-react": "^1.1.0",
+    "@rsbuild/plugin-sass": "^1.2.0",
+    "@rsdoctor/cli": "^0.4.13",
+    "@rsdoctor/rspack-plugin": "^0.4.13",
+    "@rspack/cli": "~1.2.0",
+    "@rspack/core": "~1.2.0",
     "@rspack/plugin-minify": "~0.7.5",
-    "@rspack/plugin-react-refresh": "~1.0.0",
-    "@swc/core": "~1.7.23",
-    "@swc/helpers": "~0.5.13",
-    "@swc/jest": "~0.2.36",
+    "@rspack/plugin-react-refresh": "~1.0.1",
+    "@stylistic/eslint-plugin": "^2.13.0",
+    "@swc/core": "~1.10.9",
+    "@swc/helpers": "~0.5.15",
+    "@swc/jest": "~0.2.37",
     "@types/jest": "~27.4.1",
-    "@types/node": "^20.16.4",
-    "@typescript-eslint/eslint-plugin": "~7.18.0",
-    "@typescript-eslint/parser": "~7.18.0",
-    "dotenv": "^16.4.5",
-    "dotenv-expand": "^11.0.6",
-    "eslint": "^8.57.0",
+    "@types/node": "^20.17.14",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "~8.21.0",
+    "dotenv": "^16.4.7",
+    "dotenv-expand": "^12.0.1",
+    "dotenv-webpack": "^8.1.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
-    "eslint-config-airbnb-typescript": "^18.0.0",
-    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-chai-friendly": "^1.0.1",
-    "eslint-plugin-cypress": "^3.5.0",
-    "eslint-plugin-import": "^2.30.0",
-    "eslint-plugin-jest": "^27.9.0",
-    "eslint-plugin-jsx-a11y": "^6.10.0",
-    "eslint-plugin-prettier": "^5.2.1",
-    "eslint-plugin-react": "^7.35.2",
-    "eslint-plugin-react-compiler": "0.0.0-experimental-b8a7b48-20240830",
-    "eslint-plugin-react-hooks": "^4.6.2",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-jest": "^28.11.0",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-playwright": "^2.1.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-compiler": "0.0.0-experimental-decd7b8-20250118",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-unused-imports": "^4.1.4",
-    "eslint-plugin-playwright": "^2.0.1",
     "fork-ts-checker-webpack-plugin": "^9.0.2",
-    "fs-extra": "^11.2.0",
-    "glob": "^11.0.0",
+    "fs-extra": "^11.3.0",
+    "glob": "^11.0.1",
     "html-loader": "~5.1.0",
-    "html-webpack-plugin": "^5.6.0",
+    "html-webpack-plugin": "^5.6.3",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^27.5.1",
     "jest-raw-loader": "~1.0.1",
-    "jest-resolve": "^27.4.2",
-    "postcss": "^8.4.41",
+    "jest-resolve": "^27.5.1",
+    "postcss": "^8.5.1",
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-loader": "^8.1.1",
-    "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^10.0.2",
-    "prettier": "^3.3.3",
+    "postcss-normalize": "^13.0.1",
+    "postcss-preset-env": "^10.1.3",
+    "prettier": "^3.4.2",
     "react-dev-utils": "^12.0.1",
-    "react-refresh": "^0.14.2",
+    "react-refresh": "^0.16.0",
     "resolve-url-loader": "^5.0.0",
     "rimraf": "~6.0.1",
-    "rspack-plugin-dotenv": "^0.0.3",
-    "sass-embedded": "~1.78.0",
-    "sass-loader": "^16.0.1",
+    "sass-embedded": "~1.83.4",
+    "sass-loader": "^16.0.4",
     "shx": "~0.3.4",
-    "tailwindcss": "^3.4.10",
+    "tailwindcss": "^3.4.17",
     "ts-node": "^10.9.2",
-    "tslib": "~2.7.0",
-    "typescript": "~5.5.4",
+    "tslib": "~2.8.1",
+    "typescript": "~5.7.3",
     "util": "^0.12.5",
-    "webpack": "^5.94.0",
+    "webpack": "^5.97.1",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
     "@types/yargs": "^17.0.33",
     "http-server": "^14.1.1",
-    "jest-dev-server": "^6.2.0"
+    "jest-dev-server": "^6.2.0",
+    "storybook": "^8.5.0",
+    "storybook-react-rsbuild": "^0.1.8"
   },
   "peerDependencies": {
-    "@types/react": "^18.3.5",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
@@ -111,5 +116,5 @@
       "/node_modules/|/bin/|/tests_fixtures/"
     ]
   },
-  "packageManager": "yarn@4.1.0"
+  "packageManager": "yarn@4.6.0"
 }
diff --git a/tests_fixtures/standalone_template/.storybook/preview.jsx b/tests_fixtures/standalone_template/.storybook/preview.jsx
@@ -4,7 +4,6 @@ import '../workspace.scss';
  * @type {import('@storybook/react').Parameters}
  */
 export const parameters = {
-  actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'fullscreen',
   controls: {
     matchers: {