@ncksnydr/config-js 0.3.0 → 0.4.1

package/README.md

@@ -145,7 +145,69 @@ To change a setting, merge the preset with your own configuration:
 import preset from "@ncksnydr/config-js/vitest";
 import { defineConfig, mergeConfig } from "vitest/config";
 
-export default mergeConfig(preset, defineConfig({ test: { include: ["tests/**/*.test.ts"] } }));
+export default mergeConfig(preset, defineConfig({ test: { testTimeout: 10_000 } }));
 ```
 
-The preset runs tests in Node and finds `*.test.ts` files next to the code. It restores mocks between tests. If it finds no tests, the run fails.
+The preset runs tests in Node. It restores mocks between tests. If it finds no tests, the run fails.
+
+The preset does not set `include`, so Vitest finds test files with its own pattern, such as `*.test.ts` and `*.test.tsx`. To use your own pattern, merge an `include` into the preset.
+
+## React
+
+A React Consumer uses the React presets in place of the plain ones. Each React preset holds the plain preset and adds to it.
+
+### TypeScript for React
+
+Extend the React base in your `tsconfig.json`:
+
+```json
+{
+  "extends": "@ncksnydr/config-js/tsconfig-react"
+}
+```
+
+The React base adds the DOM types. It compiles JSX with React's automatic runtime, so a component file does not import React to use JSX. Install `react` and `@types/react`.
+
+### ESLint for React
+
+Use the React configuration as your `eslint.config.js`:
+
+```js
+export { default } from "@ncksnydr/config-js/eslint-react";
+```
+
+The React configuration adds these rules to `.ts` and `.tsx` files:
+
+- The recommended rules of `eslint-plugin-react`, `eslint-plugin-react-hooks` and `eslint-plugin-jsx-a11y`.
+- A missing dependency in a hook such as `useEffect` is an error, not a warning.
+- `useContext` is banned. Put shared state in a Zustand store.
+- `fireEvent` from `@testing-library/react` is banned. Use `userEvent`.
+- Text cannot be written inside JSX. Put the text in a variable, and use the variable in the JSX. Text in a prop is allowed.
+
+```text
+Welcome.tsx
+  2:13  error  Strings not allowed in JSX files: "Welcome back"  react/jsx-no-literals
+```
+
+The configuration reads the React version from the `react` package that your code imports. Use `boundaries()` with it the same way as with the plain configuration.
+
+### Vitest for React
+
+Use the React preset as your `vitest.config.ts`:
+
+```ts
+export { default } from "@ncksnydr/config-js/vitest-react";
+```
+
+The React preset holds the plain Vitest preset, and runs the tests in Vitest's browser mode, in Chromium through Playwright. The Storybook Vitest addon uses the same browser.
+
+The React preset sets no `include`, so you can add the Storybook Vitest plugin to it. The plugin sets `include` to your stories. It prints a warning when the configuration already has an `include`.
+
+Install Playwright and the Vitest Playwright provider. Then install Chromium once on each machine and in CI:
+
+```sh
+pnpm add --save-dev playwright @vitest/browser-playwright
+pnpm exec playwright install chromium
+```
+
+In CI on Linux, use `pnpm exec playwright install --with-deps chromium`. This command also installs the system libraries that Chromium needs.

package/dist/eslint-react.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("eslint/config").ConfigObject[];
+export default _default;

package/dist/eslint-react.js

@@ -0,0 +1,42 @@
+import { fixupPluginRules } from "@eslint/compat";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import { defineConfig } from "eslint/config";
+import base from "./eslint.js";
+const reactWithVersionDetection = fixupPluginRules(react);
+function reactPluginConfig(name) {
+    const config = react.configs.flat[name];
+    if (config === undefined) {
+        throw new Error(`eslint-plugin-react has no flat configuration named "${name}".`);
+    }
+    return { ...config, plugins: { react: reactWithVersionDetection } };
+}
+export default defineConfig(base, {
+    extends: [
+        jsxA11y.flatConfigs.recommended,
+        reactPluginConfig("recommended"),
+        reactPluginConfig("jsx-runtime"),
+        reactHooks.configs.flat.recommended,
+    ],
+    files: ["**/*.{ts,tsx}"],
+    rules: {
+        "no-restricted-imports": [
+            "error",
+            {
+                paths: [
+                    { importNames: ["useContext"], message: "Put shared state in a Zustand store.", name: "react" },
+                    { importNames: ["fireEvent"], message: "Use userEvent.", name: "@testing-library/react" },
+                ],
+            },
+        ],
+        "react-hooks/exhaustive-deps": "error",
+        "react/jsx-no-literals": ["error", { ignoreProps: true, noStrings: true }],
+    },
+    settings: {
+        react: {
+            version: "detect",
+        },
+    },
+});
+//# sourceMappingURL=eslint-react.js.map

package/dist/eslint-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"eslint-react.js","sourceRoot":"","sources":["../src/eslint-react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAC;AAElD,OAAO,OAAO,MAAM,wBAAwB,CAAC;AAC7C,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,UAAU,MAAM,2BAA2B,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAC7C,OAAO,IAAI,MAAM,aAAa,CAAC;AAE/B,MAAM,yBAAyB,GAAG,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAE1D,SAAS,iBAAiB,CAAC,IAAY;IACrC,MAAM,MAAM,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACxC,IAAI,MAAM,KAAK,SAAS,EAAE,CAAC;QACzB,MAAM,IAAI,KAAK,CAAC,wDAAwD,IAAI,IAAI,CAAC,CAAC;IACpF,CAAC;IACD,OAAO,EAAE,GAAG,MAAM,EAAE,OAAO,EAAE,EAAE,KAAK,EAAE,yBAAyB,EAAE,EAAE,CAAC;AACtE,CAAC;AAED,eAAe,YAAY,CAAC,IAAI,EAAE;IAChC,OAAO,EAAE;QACP,OAAO,CAAC,WAAW,CAAC,WAAW;QAC/B,iBAAiB,CAAC,aAAa,CAAC;QAChC,iBAAiB,CAAC,aAAa,CAAC;QAChC,UAAU,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW;KACpC;IACD,KAAK,EAAE,CAAC,eAAe,CAAC;IACxB,KAAK,EAAE;QACL,uBAAuB,EAAE;YACvB,OAAO;YACP;gBACE,KAAK,EAAE;oBACL,EAAE,WAAW,EAAE,CAAC,YAAY,CAAC,EAAE,OAAO,EAAE,sCAAsC,EAAE,IAAI,EAAE,OAAO,EAAE;oBAC/F,EAAE,WAAW,EAAE,CAAC,WAAW,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,wBAAwB,EAAE;iBAC1F;aACF;SACF;QACD,6BAA6B,EAAE,OAAO;QACtC,uBAAuB,EAAE,CAAC,OAAO,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;KAC3E;IACD,QAAQ,EAAE;QACR,KAAK,EAAE;YACL,OAAO,EAAE,QAAQ;SAClB;KACF;CACF,CAAC,CAAC"}

package/dist/vitest-react.d.ts

@@ -0,0 +1,3 @@
+import { type ViteUserConfig } from "vitest/config";
+declare const preset: ViteUserConfig;
+export default preset;

package/dist/vitest-react.js

@@ -0,0 +1,15 @@
+import { playwright } from "@vitest/browser-playwright";
+import { defineConfig, mergeConfig } from "vitest/config";
+import plain from "./vitest.js";
+const preset = mergeConfig(plain, defineConfig({
+    test: {
+        browser: {
+            enabled: true,
+            headless: true,
+            instances: [{ browser: "chromium" }],
+            provider: playwright(),
+        },
+    },
+}));
+export default preset;
+//# sourceMappingURL=vitest-react.js.map

package/dist/vitest-react.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"vitest-react.js","sourceRoot":"","sources":["../src/vitest-react.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACxD,OAAO,EAAE,YAAY,EAAE,WAAW,EAAuB,MAAM,eAAe,CAAC;AAC/E,OAAO,KAAK,MAAM,aAAa,CAAC;AAEhC,MAAM,MAAM,GAAmB,WAAW,CACxC,KAAK,EACL,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,OAAO,EAAE;YACP,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,UAAU,EAAE,CAAC;YACpC,QAAQ,EAAE,UAAU,EAAE;SACvB;KACF;CACF,CAAC,CACH,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/vitest.d.ts

@@ -1,2 +1,3 @@
-declare const _default: import("vite").UserConfig;
-export default _default;
+import { type ViteUserConfig } from "vitest/config";
+declare const preset: ViteUserConfig;
+export default preset;

package/dist/vitest.js

@@ -1,10 +1,10 @@
 import { defineConfig } from "vitest/config";
-export default defineConfig({
+const preset = defineConfig({
     test: {
         environment: "node",
-        include: ["**/*.test.ts"],
-        restoreMocks: true,
         passWithNoTests: false,
+        restoreMocks: true,
     },
 });
+export default preset;
 //# sourceMappingURL=vitest.js.map

package/dist/vitest.js.map

@@ -1 +1 @@
-{"version":3,"file":"vitest.js","sourceRoot":"","sources":["../src/vitest.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAE7C,eAAe,YAAY,CAAC;IAC1B,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,OAAO,EAAE,CAAC,cAAc,CAAC;QACzB,YAAY,EAAE,IAAI;QAClB,eAAe,EAAE,KAAK;KACvB;CACF,CAAC,CAAC"}
+{"version":3,"file":"vitest.js","sourceRoot":"","sources":["../src/vitest.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAuB,MAAM,eAAe,CAAC;AAElE,MAAM,MAAM,GAAmB,YAAY,CAAC;IAC1C,IAAI,EAAE;QACJ,WAAW,EAAE,MAAM;QACnB,eAAe,EAAE,KAAK;QACtB,YAAY,EAAE,IAAI;KACnB;CACF,CAAC,CAAC;AAEH,eAAe,MAAM,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ncksnydr/config-js",
-  "version": "0.3.0",
+  "version": "0.4.1",
   "description": "Shared TypeScript, ESLint, Prettier, Stylelint and Vitest configuration for Nick Snyder's codebases",
   "repository": {
     "directory": "packages/config-js",
@@ -13,6 +13,10 @@
       "types": "./dist/eslint.d.ts",
       "default": "./dist/eslint.js"
     },
+    "./eslint-react": {
+      "types": "./dist/eslint-react.d.ts",
+      "default": "./dist/eslint-react.js"
+    },
     "./prettier": {
       "types": "./dist/prettier.d.ts",
       "default": "./dist/prettier.js"
@@ -22,9 +26,14 @@
       "default": "./dist/stylelint.js"
     },
     "./tsconfig": "./tsconfig/base.json",
+    "./tsconfig-react": "./tsconfig/react.json",
     "./vitest": {
       "types": "./dist/vitest.d.ts",
       "default": "./dist/vitest.js"
+    },
+    "./vitest-react": {
+      "types": "./dist/vitest-react.d.ts",
+      "default": "./dist/vitest-react.js"
     }
   },
   "files": [
@@ -36,16 +45,24 @@
     "tsconfig"
   ],
   "peerDependencies": {
+    "@vitest/browser-playwright": "^5.0.0",
     "eslint": "^10.0.0",
+    "playwright": "^1.65.0",
     "prettier": "^3.5.0",
     "stylelint": "^18.0.0",
     "typescript": "^6.0.0",
     "vitest": "^5.0.0"
   },
   "peerDependenciesMeta": {
+    "@vitest/browser-playwright": {
+      "optional": true
+    },
     "eslint": {
       "optional": true
     },
+    "playwright": {
+      "optional": true
+    },
     "prettier": {
       "optional": true
     },
@@ -60,18 +77,27 @@
     }
   },
   "dependencies": {
+    "@eslint/compat": "^2.1.1",
     "@eslint/js": "^10.0.1",
     "@ianvs/prettier-plugin-sort-imports": "^4.7.1",
     "eslint-import-resolver-typescript": "^4.4.5",
     "eslint-plugin-import-x": "^4.18.1",
+    "eslint-plugin-jsx-a11y": "^6.10.2",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
     "stylelint-order": "^8.1.3",
     "typescript-eslint": "^8.72.2"
   },
   "devDependencies": {
+    "@types/eslint-plugin-jsx-a11y": "^6.10.1",
     "@types/node": "^26.6.6",
+    "@types/react": "^19.3.0",
+    "@vitest/browser-playwright": "^5.1.0",
     "eslint": "^10.14.0",
+    "playwright": "^1.65.0",
     "postcss": "^8.5.32",
     "prettier": "^3.10.0",
+    "react": "^19.3.1",
     "stylelint": "^18.0.0",
     "typescript": "~6.0.3",
     "vitest": "^5.1.0"

package/src/eslint-react.ts

@@ -0,0 +1,45 @@
+import { fixupPluginRules } from "@eslint/compat";
+import type { Linter } from "eslint";
+import jsxA11y from "eslint-plugin-jsx-a11y";
+import react from "eslint-plugin-react";
+import reactHooks from "eslint-plugin-react-hooks";
+import { defineConfig } from "eslint/config";
+import base from "./eslint.js";
+
+const reactWithVersionDetection = fixupPluginRules(react);
+
+function reactPluginConfig(name: string): Linter.Config {
+  const config = react.configs.flat[name];
+  if (config === undefined) {
+    throw new Error(`eslint-plugin-react has no flat configuration named "${name}".`);
+  }
+  return { ...config, plugins: { react: reactWithVersionDetection } };
+}
+
+export default defineConfig(base, {
+  extends: [
+    jsxA11y.flatConfigs.recommended,
+    reactPluginConfig("recommended"),
+    reactPluginConfig("jsx-runtime"),
+    reactHooks.configs.flat.recommended,
+  ],
+  files: ["**/*.{ts,tsx}"],
+  rules: {
+    "no-restricted-imports": [
+      "error",
+      {
+        paths: [
+          { importNames: ["useContext"], message: "Put shared state in a Zustand store.", name: "react" },
+          { importNames: ["fireEvent"], message: "Use userEvent.", name: "@testing-library/react" },
+        ],
+      },
+    ],
+    "react-hooks/exhaustive-deps": "error",
+    "react/jsx-no-literals": ["error", { ignoreProps: true, noStrings: true }],
+  },
+  settings: {
+    react: {
+      version: "detect",
+    },
+  },
+});

package/src/vitest-react.ts

@@ -0,0 +1,19 @@
+import { playwright } from "@vitest/browser-playwright";
+import { defineConfig, mergeConfig, type ViteUserConfig } from "vitest/config";
+import plain from "./vitest.js";
+
+const preset: ViteUserConfig = mergeConfig(
+  plain,
+  defineConfig({
+    test: {
+      browser: {
+        enabled: true,
+        headless: true,
+        instances: [{ browser: "chromium" }],
+        provider: playwright(),
+      },
+    },
+  }),
+);
+
+export default preset;

package/src/vitest.ts

@@ -1,10 +1,11 @@
-import { defineConfig } from "vitest/config";
+import { defineConfig, type ViteUserConfig } from "vitest/config";
 
-export default defineConfig({
+const preset: ViteUserConfig = defineConfig({
   test: {
     environment: "node",
-    include: ["**/*.test.ts"],
-    restoreMocks: true,
     passWithNoTests: false,
+    restoreMocks: true,
   },
 });
+
+export default preset;

package/tsconfig/react.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "extends": "./base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "lib": ["DOM", "DOM.Iterable", "ES2024"]
+  }
+}