js-style-kit 0.8.1 → 0.8.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-style-kit",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "description": "A zero configuration style guide for ESLint and Prettier",
   "keywords": [
     "eslint",
@@ -50,21 +50,21 @@
     "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.5",
+    "eslint-plugin-jsdoc": "61.1.8",
     "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-hooks": "7.0.1",
     "eslint-plugin-react-refresh": "0.4.24",
-    "eslint-plugin-storybook": "9.1.13",
+    "eslint-plugin-storybook": "9.1.15",
     "eslint-plugin-turbo": "2.5.8",
     "eslint-plugin-unicorn": "61.0.2",
     "eslint-plugin-vitest": "0.5.4",
     "globals": "16.4.0",
     "prettier": "3.6.2",
     "prettier-plugin-css-order": "2.1.2",
-    "prettier-plugin-curly": "0.3.2",
+    "prettier-plugin-curly": "0.4.0",
     "prettier-plugin-packagejson": "2.5.19",
     "prettier-plugin-sort-json": "4.1.1",
     "prettier-plugin-tailwindcss": "0.7.1",
@@ -72,9 +72,9 @@
   },
   "devDependencies": {
     "@repo/typescript-config": "workspace:*",
-    "@types/bun": "1.3.0",
-    "@types/node": "22.18.10",
-    "commander": "14.0.1",
+    "@types/bun": "1.3.1",
+    "@types/node": "22.18.12",
+    "commander": "14.0.2",
     "glob": "11.0.3",
     "tsup": "8.5.0",
     "typescript": "5.9.3"

package/src/eslint/convex/README.md

@@ -24,8 +24,56 @@ export default eslintConfig({
 
 Convex rules apply only to files in your `convex` directory: `**/convex/**/*.{ts,js}`
 
+## Filename Convention
+
+When both Convex and Unicorn configurations are enabled, **Convex files are automatically enforced to use camelCase** naming, regardless of the global Unicorn filename case setting.
+
+This is because Convex follows JavaScript/TypeScript conventions where files export functions that become API endpoints, and camelCase is the standard for function names.
+
+### Example
+
+```js
+import { eslintConfig } from "js-style-kit";
+
+export default eslintConfig({
+  convex: true,
+  unicorn: { filenameCase: "kebabCase" }, // Global setting
+});
+```
+
+With this configuration:
+
+- **Convex files** (`convex/**/*.{ts,js}`) must use **camelCase**: ✅ `getUserData.ts`, `sendMessage.ts`
+- **All other files** must use **kebabCase**: ✅ `user-service.ts`, `api-client.ts`
+
+### Why camelCase for Convex?
+
+Convex files export functions that become your backend API. Using camelCase keeps your filenames consistent with the function names they export:
+
+```typescript
+// convex/getUserData.ts
+export default query(async (ctx) => {
+  // Function is called as api.getUserData
+});
+```
+
+### Disabling Filename Enforcement
+
+If you want to disable filename case enforcement for Convex files, you can override it:
+
+```js
+export default eslintConfig({
+  convex: true,
+  unicorn: true,
+  rules: {
+    "unicorn/filename-case": "off", // Disables for all files including Convex
+  },
+});
+```
+
 ## Learn More
 
 - [Convex ESLint Plugin](https://docs.convex.dev/eslint) - Official documentation
 - [Convex Validators](https://docs.convex.dev/functions/validation) - Argument validation guide
+- [Unicorn Configuration](../unicorn/README.md) - Filename case options
 - [Main README](../../../README.md)

package/src/eslint/convex/config.ts

@@ -8,7 +8,7 @@ import { configNames } from "../constants.js";
 import { convexRules } from "./rules.js";
 
 // TODO: Replace with ESM import once @convex-dev/eslint-plugin stabilizes
-// The alpha version (0.0.1-alpha.4) doesn't have proper ESM exports yet
+// The plugin doesn't have proper ESM exports yet
 const require = createRequire(import.meta.url);
 
 const convexPlugin = require("@convex-dev/eslint-plugin");
@@ -17,10 +17,12 @@ const convexPlugin = require("@convex-dev/eslint-plugin");
  * Creates an ESLint configuration for Convex.
  *
  * @param customRules - Optional object containing custom rules to override or add to the Convex configuration.
+ * @param unicorn - Whether the config uses unicorn rules.
  * @returns ESLint configuration object for Convex
  */
 export const convexConfig = (
   customRules?: Record<string, EslintRuleConfig>,
+  unicorn?: boolean,
 ): EslintConfigObject => ({
   files: ["**/convex/**/*.{ts,js}"],
   name: configNames.convex,
@@ -30,5 +32,16 @@ export const convexConfig = (
   rules: {
     ...convexRules,
     ...(customRules ?? {}),
+    // Convex files must be camelCase
+    ...(unicorn ?
+      {
+        "unicorn/filename-case": [
+          "warn",
+          {
+            case: "camelCase",
+          },
+        ],
+      }
+    : {}),
   },
 });

package/src/eslint/ignores.ts

@@ -25,6 +25,7 @@ export const ignoresConfig = ({
 }): Linter.Config => ({
   ignores: [
     "**/dist/",
+    "**/build/",
     ...(reactFramework === "next" ? [".next"] : []),
     ...(reactFramework === "react-router" ? [".react-router"] : []),
     ...(storybook ? ["!.storybook"] : []),

package/src/eslint/index.ts

@@ -64,7 +64,7 @@ export interface EslintConfigOptions {
  * @param options - The optional configuration object.
  * @param options.convex - Whether to include Convex rules.
  * @param options.functionStyle - The function style to enforce. Defaults to "arrow".
- * @param options.ignores - Additional paths to ignore. Already excludes `node_modules` and `dist`.
+ * @param options.ignores - Additional paths to ignore. Already excludes `node_modules`, `dist`, and `build`.
  * @param options.importPlugin - Whether to include the import plugin. Defaults to true.
  * @param options.jsdoc - Whether to include JSDoc rules. Set to false to disable, or provide an object to configure.
  * @param options.query - Whether to include TanStack Query rules.
@@ -126,11 +126,10 @@ export const eslintConfig = (
     ),
   ];
 
-  if (jsdoc !== false) {
+  if (functionStyle === "arrow") {
     configs.push(
-      jsdocConfig(
-        jsdoc.requireJsdoc ?? false,
-        categorizedRules[configNames.jsdoc],
+      preferArrowFunctionConfig(
+        categorizedRules[configNames.preferArrowFunction],
       ),
     );
   }
@@ -150,44 +149,29 @@ export const eslintConfig = (
     );
   }
 
-  if (react) {
-    const reactOptions = isObject(react) ? react : {};
-
-    // Apply reactRefresh based on framework setting or explicit override
-    const shouldUseReactRefresh =
-      // Explicit setting takes precedence
-      reactOptions.reactRefresh === true ||
-      // Framework-based default (vite/none use reactRefresh by default)
-      ((reactOptions.framework === "vite" ||
-        reactOptions.framework === "none") &&
-        reactOptions.reactRefresh !== false);
-
-    if (shouldUseReactRefresh) {
-      configs.push(
-        reactRefreshEslintConfig(categorizedRules[configNames.reactRefresh]),
-      );
-    }
-
+  if (unicorn) {
+    const filenameCase = isObject(unicorn) ? unicorn.filenameCase : undefined;
     configs.push(
-      reactEslintConfig({
-        customRules: categorizedRules[configNames.react],
-        functionStyle,
-        reactCompiler: reactOptions.reactCompiler ?? true,
-        typescript: Boolean(typescript),
+      unicornConfig({
+        customRules: categorizedRules[configNames.unicorn],
+        filenameCase,
       }),
     );
-
-    if (isObject(react) && react.framework === "next") {
-      configs.push(nextjsConfig(categorizedRules[configNames.nextjs]));
-    }
   }
 
-  if (query) {
-    configs.push(queryConfig(categorizedRules[configNames.query]));
+  if (sorting) {
+    configs.push(
+      perfectionistConfig(categorizedRules[configNames.perfectionist]),
+    );
   }
 
-  if (convex) {
-    configs.push(convexConfig(categorizedRules[configNames.convex]));
+  if (jsdoc !== false) {
+    configs.push(
+      jsdocConfig(
+        jsdoc.requireJsdoc ?? false,
+        categorizedRules[configNames.jsdoc],
+      ),
+    );
   }
 
   if (testing !== false) {
@@ -232,27 +216,45 @@ export const eslintConfig = (
     );
   }
 
-  if (sorting) {
-    configs.push(
-      perfectionistConfig(categorizedRules[configNames.perfectionist]),
-    );
-  }
+  if (react) {
+    const reactOptions = isObject(react) ? react : {};
+
+    // Apply reactRefresh based on framework setting or explicit override
+    const shouldUseReactRefresh =
+      // Explicit setting takes precedence
+      reactOptions.reactRefresh === true ||
+      // Framework-based default (vite/none use reactRefresh by default)
+      ((reactOptions.framework === "vite" ||
+        reactOptions.framework === "none") &&
+        reactOptions.reactRefresh !== false);
+
+    if (shouldUseReactRefresh) {
+      configs.push(
+        reactRefreshEslintConfig(categorizedRules[configNames.reactRefresh]),
+      );
+    }
 
-  if (unicorn) {
-    const filenameCase = isObject(unicorn) ? unicorn.filenameCase : undefined;
     configs.push(
-      unicornConfig({
-        customRules: categorizedRules[configNames.unicorn],
-        filenameCase,
+      reactEslintConfig({
+        customRules: categorizedRules[configNames.react],
+        functionStyle,
+        reactCompiler: reactOptions.reactCompiler ?? true,
+        typescript: Boolean(typescript),
       }),
     );
+
+    if (isObject(react) && react.framework === "next") {
+      configs.push(nextjsConfig(categorizedRules[configNames.nextjs]));
+    }
   }
 
-  if (functionStyle === "arrow") {
+  if (query) {
+    configs.push(queryConfig(categorizedRules[configNames.query]));
+  }
+
+  if (convex) {
     configs.push(
-      preferArrowFunctionConfig(
-        categorizedRules[configNames.preferArrowFunction],
-      ),
+      convexConfig(categorizedRules[configNames.convex], Boolean(unicorn)),
     );
   }
 

package/src/eslint/unicorn/README.md

@@ -110,6 +110,23 @@ export default eslintConfig({
 });
 ```
 
+### Special Case: Convex Integration
+
+When both Unicorn and Convex configurations are enabled, Convex files automatically use **camelCase** regardless of your global filename case setting. This is because Convex files export functions that become API endpoints, and camelCase is the standard for function names.
+
+```js
+export default eslintConfig({
+  convex: true,
+  unicorn: { filenameCase: "kebabCase" }, // Global setting
+});
+
+// Result:
+// - Convex files (convex/**/*.{ts,js}): camelCase ✅ getUserData.ts
+// - All other files: kebabCase ✅ user-service.ts
+```
+
+[→ Learn more about Convex filename conventions](../convex/README.md#filename-convention)
+
 ### Node.js Protocol
 
 Requires using the `node:` protocol when importing Node.js built-in modules: