js-style-kit 0.7.0 → 0.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-style-kit",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A zero configuration style guide for ESLint and Prettier",
   "keywords": [
     "eslint",
@@ -42,22 +42,22 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@convex-dev/eslint-plugin": "0.0.1-alpha.4",
+    "@convex-dev/eslint-plugin": "1.0.0",
     "@prettier/plugin-oxc": "0.0.4",
     "@tanstack/eslint-plugin-query": "5.91.2",
     "@typescript-eslint/parser": "8.46.0",
-    "eslint": "9.37.0",
+    "eslint": "9.38.0",
     "eslint-import-resolver-typescript": "4.4.4",
     "eslint-plugin-import-x": "4.16.1",
     "eslint-plugin-jest": "29.0.1",
     "eslint-plugin-jsdoc": "61.1.4",
-    "eslint-plugin-nextjs": "1.1.0",
+    "eslint-plugin-nextjs": "1.1.1",
     "eslint-plugin-perfectionist": "4.15.1",
     "eslint-plugin-prefer-arrow-functions": "3.9.1",
     "eslint-plugin-react": "7.37.5",
     "eslint-plugin-react-hooks": "7.0.0",
     "eslint-plugin-react-refresh": "0.4.24",
-    "eslint-plugin-storybook": "9.1.12",
+    "eslint-plugin-storybook": "9.1.13",
     "eslint-plugin-turbo": "2.5.8",
     "eslint-plugin-unicorn": "61.0.2",
     "eslint-plugin-vitest": "0.5.4",
@@ -67,7 +67,7 @@
     "prettier-plugin-curly": "0.3.2",
     "prettier-plugin-packagejson": "2.5.19",
     "prettier-plugin-sort-json": "4.1.1",
-    "prettier-plugin-tailwindcss": "0.7.0",
+    "prettier-plugin-tailwindcss": "0.7.1",
     "typescript-eslint": "8.46.0"
   },
   "devDependencies": {

package/src/eslint/ignores.ts

@@ -1,5 +1,7 @@
 import type { Linter } from "eslint";
 
+import type { ReactFramework } from "./types.js";
+
 import { configNames } from "./constants.js";
 
 /**
@@ -7,23 +9,24 @@ import { configNames } from "./constants.js";
  * By default, ignores node_modules, dist directories, and .git directories.
  *
  * @param options - Object with options to control the ignores configuration
- * @param options.userIgnores - Additional glob patterns to ignore in ESLint checks
- * @param options.next - Whether to include .next directory in ignores
+ * @param options.reactFramework - The React framework being used
  * @param options.storybook - Whether to include .storybook directory in ignores
+ * @param options.userIgnores - Additional glob patterns to ignore in ESLint checks
  * @returns ESLint configuration object with ignore patterns
  */
 export const ignoresConfig = ({
-  next = false,
-  storybook = false,
-  userIgnores = [],
+  reactFramework,
+  storybook,
+  userIgnores,
 }: {
-  next?: boolean;
-  storybook?: boolean;
-  userIgnores?: string[];
-} = {}): Linter.Config => ({
+  reactFramework: ReactFramework;
+  storybook: boolean;
+  userIgnores: string[];
+}): Linter.Config => ({
   ignores: [
     "**/dist/",
-    ...(next ? [".next"] : []),
+    ...(reactFramework === "next" ? [".next"] : []),
+    ...(reactFramework === "react-router" ? [".react-router"] : []),
     ...(storybook ? ["!.storybook"] : []),
     ...userIgnores,
   ],

package/src/eslint/index.ts

@@ -1,6 +1,11 @@
 import type { Linter } from "eslint";
 
-import type { EslintRuleConfig, FilenameCase, FunctionStyle } from "./types.js";
+import type {
+  EslintRuleConfig,
+  FilenameCase,
+  FunctionStyle,
+  ReactFramework,
+} from "./types.js";
 
 import { isObject, isString } from "../utils/is-type.js";
 import { baseEslintConfig } from "./base/config.js";
@@ -22,14 +27,6 @@ import { turboConfig } from "./turbo/config.js";
 import { tseslintConfig } from "./typescript/config.js";
 import { unicornConfig } from "./unicorn/config.js";
 
-const defaultTestingConfig: TestingConfig = {
-  filenamePattern: "test",
-  files: ["**/*.{test,spec}.{ts,tsx,js,jsx}"],
-  formattingRules: true,
-  framework: "vitest",
-  itOrTest: "it",
-};
-
 export interface EslintConfigOptions {
   convex?: boolean;
   functionStyle?: "off" | FunctionStyle;
@@ -44,7 +41,7 @@ export interface EslintConfigOptions {
   react?:
     | boolean
     | {
-        framework?: "next" | "none" | "react-router" | "remix" | "vite";
+        framework?: ReactFramework;
         reactCompiler?: boolean;
         reactRefresh?: boolean;
       };
@@ -82,8 +79,9 @@ export interface EslintConfigOptions {
  * @param options.testing - An object with the following properties:
  *                          - `filenamePattern`: One of "spec" or "test" to determine which filename pattern to use.
  *                          - `files`: Array of file patterns to include in the configuration.
- *                          - `framework`: One of "vitest" or "jest" to determine which testing library to use.
+ *                          - `framework`: One of "vitest" or "jest" or "bun" or "node" to determine which testing library to use.
  *                          - `formattingRules`: Whether to include formatting rules like padding around blocks.
+ *                          - `importRestrictions`: Whether to enforce imports from the correct testing framework.
  *                          - `itOrTest`: One of "it" or "test" to determine which test function to use.
  * @param options.typescript - Whether to include TypeScript rules. Can be a boolean or a string with path to tsconfig.
  * @param options.turbo - Whether to include Turborepo rules. Defaults to false.
@@ -104,7 +102,7 @@ export const eslintConfig = (
     rules,
     sorting = true,
     storybook = false,
-    testing = defaultTestingConfig,
+    testing,
     turbo = false,
     typescript = true,
     unicorn = { filenameCase: "kebabCase" },
@@ -114,11 +112,10 @@ export const eslintConfig = (
   // Categorize user's custom rules first
   const categorizedRules = rules === undefined ? {} : processCustomRules(rules);
 
-  const usingNextjs = isObject(react) && react.framework === "next";
-
   const configs: Linter.Config[] = [
     ignoresConfig({
-      next: usingNextjs,
+      reactFramework:
+        isObject(react) && react.framework ? react.framework : "none",
       storybook,
       userIgnores: ignores,
     }),
@@ -180,7 +177,7 @@ export const eslintConfig = (
       }),
     );
 
-    if (usingNextjs) {
+    if (isObject(react) && react.framework === "next") {
       configs.push(nextjsConfig(categorizedRules[configNames.nextjs]));
     }
   }
@@ -194,6 +191,15 @@ export const eslintConfig = (
   }
 
   if (testing !== false) {
+    const defaultTestingConfig: TestingConfig = {
+      filenamePattern: "test",
+      files: ["**/*.{test,spec}.{ts,tsx,js,jsx}"],
+      formattingRules: true,
+      framework: "vitest",
+      importRestrictions: true,
+      itOrTest: "it",
+    };
+
     // Use the provided testing config or the default if testing is true
     const mergedTestingConfig: TestingConfig =
       isObject(testing) ?
@@ -201,8 +207,14 @@ export const eslintConfig = (
       : defaultTestingConfig;
 
     // Destructure from the merged config
-    const { filenamePattern, files, formattingRules, framework, itOrTest } =
-      mergedTestingConfig;
+    const {
+      filenamePattern,
+      files,
+      formattingRules,
+      framework,
+      importRestrictions,
+      itOrTest,
+    } = mergedTestingConfig;
 
     configs.push(
       testingConfig(
@@ -211,7 +223,9 @@ export const eslintConfig = (
           files,
           formattingRules,
           framework,
+          importRestrictions,
           itOrTest,
+          typescript: Boolean(typescript),
         },
         categorizedRules[configNames.testing],
       ),

package/src/eslint/testing/config.ts

@@ -4,6 +4,7 @@ import vitest from "eslint-plugin-vitest";
 import type { EslintConfigObject, EslintRuleConfig } from "../types.js";
 
 import { configNames } from "../constants.js";
+import { getImportRestrictions } from "./get-import-restrictions.js";
 import { jestRules } from "./jest-rules.js";
 import { vitestRules } from "./vitest-rules.js";
 
@@ -12,7 +13,15 @@ export interface TestingConfig {
   files?: string[];
   formattingRules?: boolean;
   framework?: "bun" | "jest" | "node" | "vitest";
+  /**
+   * Whether to enforce imports from the correct testing framework.
+   * Uses the built-in ESLint `no-restricted-imports` rule.
+   *
+   * @default true
+   */
+  importRestrictions?: boolean;
   itOrTest?: "it" | "test";
+  typescript?: boolean;
 }
 
 /**
@@ -22,24 +31,23 @@ export interface TestingConfig {
  * @param options.files - Files to include in the configuration
  * @param options.filenamePattern - ".test" or ".spec" filename pattern
  * @param options.itOrTest - "it" or "test"
- * @param options.framework - "jest" or "vitest"
+ * @param options.framework - "jest" or "vitest" or "bun" or "node"
  * @param options.formattingRules - Whether to include formatting rules like padding around blocks
+ * @param options.importRestrictions - Whether to enforce imports from the correct testing framework
+ * @param options.typescript - Whether the user is using TypeScript
  * @param customRules - Optional object containing custom rules to override or add to the testing configuration.
  * @returns ESLint configuration object
  */
 export const testingConfig = (
   {
-    filenamePattern,
+    filenamePattern = "test",
     files,
-    formattingRules,
-    framework,
-    itOrTest,
-  }: TestingConfig = {
-    filenamePattern: "test",
-    formattingRules: true,
-    framework: "vitest",
-    itOrTest: "test",
-  },
+    formattingRules = true,
+    framework = "vitest",
+    importRestrictions = true,
+    itOrTest = "test",
+    typescript = true,
+  }: TestingConfig = {},
   customRules?: Record<string, EslintRuleConfig>,
 ): EslintConfigObject => ({
   files: files ?? ["**/*.{test,spec}.{ts,tsx,js,jsx}"],
@@ -55,8 +63,8 @@ export const testingConfig = (
     vitest,
   },
   rules: {
+    ...(typescript ? { "@typescript-eslint/unbound-method": "off" } : {}),
     // jest doesn't have a file name rule, so we'll use this one for both
-    "@typescript-eslint/unbound-method": "off",
     "vitest/consistent-test-filename": [
       "warn",
       {
@@ -76,6 +84,7 @@ export const testingConfig = (
         "jest/padding-around-test-blocks": "warn",
       }
     : {}),
+    ...(importRestrictions ? getImportRestrictions(framework) : {}),
     ...(customRules ?? {}),
   },
   ...(framework !== "jest" && framework !== "vitest" ?

package/src/eslint/testing/get-import-restrictions.ts

@@ -0,0 +1,70 @@
+import type { EslintRuleConfig } from "../types.js";
+
+const commonTestImports = [
+  "describe",
+  "it",
+  "test",
+  "expect",
+  "beforeAll",
+  "beforeEach",
+  "afterAll",
+  "afterEach",
+  "vi",
+  "mock",
+  "spyOn",
+];
+
+const frameworkConfig = {
+  bun: {
+    allowed: "'bun:test'",
+    restricted: ["vitest", "jest", "@jest/globals", "node:test"],
+  },
+  jest: {
+    allowed: "'jest' or '@jest/globals'",
+    restricted: ["vitest", "bun:test", "node:test"],
+  },
+  node: {
+    allowed: "'node:test'",
+    restricted: ["vitest", "jest", "@jest/globals", "bun:test"],
+  },
+  vitest: {
+    allowed: "'vitest'",
+    restricted: ["jest", "@jest/globals", "bun:test", "node:test"],
+  },
+} as const;
+
+/**
+ * Generates the error message for restricted imports.
+ *
+ * @param allowedFramework - The allowed framework(s) for imports
+ * @returns The formatted error message
+ */
+const getRestrictionMessage = (allowedFramework: string): string =>
+  `This project is setup to use ${allowedFramework} for testing. Importing from other testing frameworks is not allowed. Change this setting in eslint.config.js under testing.framework`;
+
+/**
+ * Returns import restriction rules based on the testing framework.
+ * Prevents importing from the wrong testing framework.
+ *
+ * @param framework - The testing framework being used
+ * @returns ESLint rules object with import restrictions
+ */
+export const getImportRestrictions = (
+  framework: "bun" | "jest" | "node" | "vitest",
+): Record<string, EslintRuleConfig> => {
+  const config = frameworkConfig[framework];
+  const message = getRestrictionMessage(config.allowed);
+
+  return {
+    "no-restricted-imports": [
+      "warn",
+      {
+        paths: config.restricted.map((name) => ({
+          importNames: commonTestImports,
+          message,
+          name,
+        })),
+      },
+    ],
+  };
+};

package/src/eslint/types.ts

@@ -27,3 +27,10 @@ export type FilenameCase =
   | "snakeCase";
 
 export type FunctionStyle = "arrow" | "declaration" | "expression";
+
+export type ReactFramework =
+  | "next"
+  | "none"
+  | "react-router"
+  | "remix"
+  | "vite";