Complete and better ESlint config for volto-add-ons-ish

packages/blocks/.eslintrc.cjs

@@ -1,5 +1,5 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  extends: ['../../.eslintrc.cjs', 'plugin:react/jsx-runtime'],
-  ignorePatterns: ['storybook-static', 'dist'],
+  extends: ['../../.eslintrc.cjs', '../eslintconfig/addons.js'],
+  ignorePatterns: ['vitest.config.ts'],
 };

packages/blocks/index.ts

@@ -4,6 +4,7 @@ import { blocksConfig } from './config';
 
 export default function install(config: ConfigType) {
   config.settings.slate = slate;
+  // @ts-expect-error this is a quick hack for now
   config.blocks.blocksConfig = blocksConfig;
 
   return config;

packages/blocks/package.json

@@ -56,8 +56,13 @@
   "devDependencies": {
     "@plone/registry": "workspace:*",
     "@plone/types": "workspace:*",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@types/jest-axe": "^3.5.7",
+    "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "jest-axe": "^8.0.0",
     "release-it": "17.1.1",
     "tsconfig": "workspace:*",
     "typescript": "^5.6.3",

packages/blocks/setupTesting.ts

@@ -0,0 +1,3 @@
+import '@testing-library/jest-dom';
+import { toHaveNoViolations } from 'jest-axe';
+expect.extend(toHaveNoViolations);

packages/blocks/vitest.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from 'vitest/config';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: './setupTesting.ts',
+    // you might want to disable it, if you don't have tests that rely on CSS
+    // since parsing CSS is slow
+    css: true,
+    exclude: ['**/node_modules/**', '**/lib/**'],
+  },
+});

packages/eslintconfig/README.md

@@ -0,0 +1,34 @@
+# `eslintconfig`
+
+Base configurations for projects.
+
+## Usage
+
+In `package.json`:
+
+```json
+  "devDependencies": {
+    "eslintconfig": "workspace:*",
+  }
+```
+
+```js
+{
+  "extends": "tsconfig/react-library.json",
+  "include": ["src", "src/**/*.js"],
+  "exclude": [
+    "node_modules",
+    "build",
+    "public",
+    "coverage",
+    "src/**/*.test.{js,jsx,ts,tsx}",
+    "src/**/*.spec.{js,jsx,ts,tsx}",
+    "src/**/*.stories.{js,jsx,ts,tsx}"
+  ]
+}
+```
+
+> [!WARNING]
+> This package or app is experimental.
+> The community offers no support whatsoever for it.
+> Breaking changes may occur without notice.

packages/eslintconfig/addons.js

@@ -0,0 +1,17 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  ignorePatterns: ['storybook-static', 'dist'],
+  overrides: [
+    {
+      files: ['**/*.{ts,tsx, js, jsx}'],
+      extends: [
+        'plugin:react/jsx-runtime', // We only want this for non-library code (eg. volto add-ons)
+      ],
+      rules: {
+        'import/no-unresolved': 1,
+        'import/named': 'error',
+        'react/jsx-key': [2, { checkFragmentShorthand: true }],
+      },
+    },
+  ],
+};

packages/eslintconfig/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "eslintconfig",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/slots/.eslintrc.cjs

@@ -1,11 +1,5 @@
 /** @type {import('eslint').Linter.Config} */
 module.exports = {
-  overrides: [
-    {
-      files: ['**/*.ts', '**/*.tsx'],
-      extends: [
-        'plugin:react/jsx-runtime', // We only want this for non-library code (eg. volto add-ons)
-      ],
-    },
-  ],
+  extends: ['../../.eslintrc.cjs', '../eslintconfig/addons.js'],
+  ignorePatterns: ['vitest.config.ts'],
 };

packages/slots/.storybook/preview.ts

@@ -2,7 +2,7 @@ import './storybook-base.css';
 import '@plone/components/dist/basic.css';
 import '../main.css';
 import config from '@plone/registry';
-import installSlots from '../config';
+import installSlots from '../index';
 import installBlocks from '@plone/blocks';
 
 config.set('slots', {});

packages/slots/package.json

@@ -67,6 +67,10 @@
     "@storybook/react": "^8.0.4",
     "@storybook/react-vite": "^8.0.4",
     "@storybook/theming": "^8.0.4",
+    "@testing-library/jest-dom": "6.4.2",
+    "@testing-library/react": "14.2.1",
+    "@types/jest-axe": "^3.5.7",
+    "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint-plugin-storybook": "^0.8.0",

packages/theming/.eslintrc.cjs

@@ -0,0 +1,4 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  extends: ['../../.eslintrc.cjs', '../eslintconfig/addons.js'],
+};