@dvukovic/style-guide 0.3.92 → 0.3.94

package/README.md

@@ -1,167 +1,153 @@
 # Style Guide
 
-## Getting Started
+Linting and formatting configuration for TypeScript/JavaScript projects.
 
-To get the kitchen sink install the required dependencies:
+## Installation
 
+```bash
+yarn add -D @dvukovic/style-guide eslint prettier cspell stylelint npm-package-json-lint
 ```
-yarn add -D eslint@8.57.0 prettier cspell stylelint npm-package-json-lint @dvukovic/style-guide
-```
 
-add the following scripts
+## Setup
+
+Add these scripts to your `package.json`:
 
 ```json
 {
     "scripts": {
-        "lint": "yarn lint:prettier && yarn lint:eslint && yarn lint:stylelint && yarn lint:spell && yarn lint:package-json",
-        "lint:eslint": "eslint . --cache",
-        "lint:fix": "yarn lint:eslint --fix && yarn lint:prettier --write && yarn lint:stylelint --fix && yarn lint:spell && yarn lint:package-json",
+        "lint": "yarn lint:eslint && yarn lint:prettier && yarn lint:stylelint && yarn lint:spell && yarn lint:package-json",
+        "lint:eslint": "eslint . --cache --concurrency=auto",
+        "lint:fix": "yarn lint:eslint --fix && yarn lint:prettier --write && yarn lint:stylelint --fix",
         "lint:package-json": "npmPkgJsonLint --configFile ./.packagerc.js .",
-        "lint:prettier": "prettier --log-level=warn --check --cache .",
+        "lint:prettier": "prettier --check --cache '**/*.{json,yaml,yml,md,css,html}'",
         "lint:spell": "cspell --config ./.cspellrc.js --no-progress --no-summary --unique '**'",
         "lint:stylelint": "stylelint ./**/*.css --cache"
     }
 }
 ```
 
-add the following to `.gitignore`
+Add to `.gitignore`:
 
 ```
 .eslintcache
 .stylelintcache
 ```
 
-### ESLint
+---
 
-Create a `.eslintrc.js` in root with the following:
+## ESLint
 
-```javascript
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-    root: true,
-    extends: [
-        // JS/TS
-        require.resolve("@dvukovic/style-guide/src/eslint/configs/core"),
-        require.resolve("@dvukovic/style-guide/src/eslint/configs/node"),
-
-        // Libraries
-        require.resolve("@dvukovic/style-guide/src/eslint/configs/next"),
-        require.resolve("@dvukovic/style-guide/src/eslint/configs/mobx"),
-        require.resolve("@dvukovic/style-guide/src/eslint/configs/react"),
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaVersion: 2024,
-        project: "./tsconfig.json",
-    },
-    overrides: [
-        {
-            files: ["*.ts", "*.tsx"],
-            extends: [require.resolve("@dvukovic/style-guide/src/eslint/configs/typescript")],
-        },
-        {
-            files: ["*.test.ts"],
-            extends: [
-                require.resolve(
-                    "@dvukovic/style-guide/src/eslint/configs/jest",
-                    // OR
-                    "@dvukovic/style-guide/src/eslint/configs/vitest",
-                ),
-            ],
-        },
-        {
-            files: ["*.ui.test.ts"],
-            extends: [require.resolve("@dvukovic/style-guide/src/eslint/configs/playwright")],
-        },
-        {
-            extends: [require.resolve("@dvukovic/style-guide/src/eslint/configs/storybook")],
-            files: ["./**/*.stories.@(ts|tsx)"],
-        },
-    ],
-}
-```
+Prettier is integrated into ESLint via `eslint-plugin-prettier` for JS/TS files. The separate
+`lint:prettier` script handles JSON, YAML, MD, and other files.
 
-If you need graphql config, everything has to be configured trough `overrides`
+Create `eslint.config.js`:
 
 ```javascript
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-    ignorePatterns: ["node_modules"],
-    overrides: [
-        {
-            extends: [
-                require.resolve("@dvukovic/style-guide/src/eslint/configs/core"),
-                require.resolve("@dvukovic/style-guide/src/eslint/configs/node"),
-                require.resolve("@dvukovic/style-guide/src/eslint/configs/mobx"),
-                require.resolve("@dvukovic/style-guide/src/eslint/configs/react"),
-                require.resolve("@dvukovic/style-guide/src/eslint/configs/next"),
-            ],
-            files: ["*.js", ".ts", ".*.cjs", "*.tsx"],
-        },
-        {
-            extends: [require.resolve("@dvukovic/style-guide/src/eslint/configs/typescript")],
-            files: ["*.ts", "*.tsx"],
-        },
-        {
-            extends: [
-                require.resolve("@dvukovic/style-guide/src/eslint/configs/jest"),
-                // OR
-                require.resolve("@dvukovic/style-guide/src/eslint/configs/vitest"),
-            ],
-            files: ["*.test.ts", "*.test.js"],
-        },
-        {
-            files: ["*.ui.test.ts"],
-            extends: [require.resolve("@dvukovic/style-guide/src/eslint/configs/playwright")],
-        },
-        {
-            extends: [require.resolve("@dvukovic/style-guide/src/graphql/configs/core")],
-            files: ["*.graphql"],
-            parser: "@graphql-eslint/eslint-plugin",
+import tseslint from "typescript-eslint"
+
+import core from "@dvukovic/style-guide/src/eslint/configs/core.js"
+import jest from "@dvukovic/style-guide/src/eslint/configs/jest.js"
+import mobx from "@dvukovic/style-guide/src/eslint/configs/mobx.js"
+import next from "@dvukovic/style-guide/src/eslint/configs/next.js"
+import node from "@dvukovic/style-guide/src/eslint/configs/node.js"
+import playwright from "@dvukovic/style-guide/src/eslint/configs/playwright.js"
+import react from "@dvukovic/style-guide/src/eslint/configs/react.js"
+import storybook from "@dvukovic/style-guide/src/eslint/configs/storybook.js"
+import typescript from "@dvukovic/style-guide/src/eslint/configs/typescript.js"
+import typescriptStrict from "@dvukovic/style-guide/src/eslint/configs/typescript-strict.js"
+import vitest from "@dvukovic/style-guide/src/eslint/configs/vitest.js"
+
+export default tseslint.config(
+    { ignores: ["node_modules", ".next", "dist", "build"] },
+    ...core,
+    ...node,
+    ...next,
+    ...mobx,
+    ...react,
+    {
+        languageOptions: {
+            parser: tseslint.parser,
             parserOptions: {
                 project: "./tsconfig.json",
-                schema: "./**/*.graphql",
             },
         },
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaVersion: 2024,
-        project: "./tsconfig.json",
     },
-    root: true,
-}
+    {
+        files: ["**/*.ts", "**/*.tsx"],
+        extends: [...typescript, ...typescriptStrict],
+    },
+    {
+        files: ["**/*.test.ts"],
+        extends: [...jest],
+    },
+    {
+        files: ["**/*.test.ts"],
+        extends: [...vitest],
+    },
+    {
+        files: ["**/*.ui.test.ts"],
+        extends: [...playwright],
+    },
+    {
+        files: ["**/*.stories.ts", "**/*.stories.tsx"],
+        extends: [...storybook],
+    },
+)
 ```
 
-### Prettier
+### Available Configs
 
-Create a `.prettierrc.js` in root with the following:
+| Config              | Description                      |
+| ------------------- | -------------------------------- |
+| `core`              | Base JavaScript rules + Prettier |
+| `node`              | Node.js specific rules           |
+| `react`             | React and JSX rules              |
+| `next`              | Next.js specific rules           |
+| `mobx`              | MobX state management rules      |
+| `typescript`        | TypeScript rules                 |
+| `typescript-strict` | Strict TypeScript rules          |
+| `jest`              | Jest testing rules               |
+| `vitest`            | Vitest testing rules             |
+| `playwright`        | Playwright E2E testing rules     |
+| `storybook`         | Storybook rules                  |
+
+---
+
+## Prettier
+
+Create `prettier.config.js`:
 
 ```javascript
+import prettierConfig from "@dvukovic/style-guide/src/prettier/configs/core.js"
+
 /** @type {import("prettier").Config} */
-module.exports = {
-    ...require("@dvukovic/style-guide/src/prettier/configs/core"),
+export default {
+    ...prettierConfig,
 }
 ```
 
-### Stylelint
+---
+
+## Stylelint
 
-Create a `.stylelintrc.js` in root with the following:
+Create `.stylelintrc.js`:
 
 ```javascript
 /** @type {import("stylelint").Config} */
-module.exports = {
-    extends: "@dvukovic/style-guide/src/stylelint/configs/core",
+export default {
+    extends: "@dvukovic/style-guide/src/stylelint/configs/core.js",
 }
 ```
 
-### CSpell
+---
 
-Create a `.cspellrc.js` in root with the following:
+## CSpell
+
+Create `.cspellrc.js`:
 
 ```javascript
 /** @type {import("cspell").FileSettings} */
-module.exports = {
+export default {
     cache: {
         cacheLocation: "./node_modules/.cache/cspell",
         useCache: true,
@@ -178,13 +164,24 @@ module.exports = {
 }
 ```
 
-### Package Json Lint
+---
+
+## Package JSON Lint
 
-Create a `.packagerc.js` in root with the following:
+Create `.packagerc.js`:
 
 ```javascript
 /** @type {import("npm-package-json-lint").NpmPackageJsonLint} */
-module.exports = {
-    extends: "@dvukovic/style-guide/src/package-json/configs/core",
+export default {
+    extends: "@dvukovic/style-guide/src/package-json/configs/core.js",
 }
 ```
+
+---
+
+## Requirements
+
+- Node.js >= 20.0.0
+- ESLint 9+
+- Prettier 3+
+- Stylelint 16+

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dvukovic/style-guide",
-    "version": "0.3.92",
+    "version": "0.3.94",
     "description": "My own style guide",
     "repository": {
         "type": "git",
@@ -10,85 +10,87 @@
     "author": {
         "name": "Domagoj Vukovic"
     },
-    "type": "commonjs",
+    "type": "module",
     "files": [
         "src/eslint",
         "src/cspell",
-        "src/graphql",
         "src/prettier",
         "src/stylelint",
         "src/package-json"
     ],
     "scripts": {
-        "lint": "yarn lint:prettier && yarn lint:eslint && yarn lint:stylelint && yarn lint:spell && yarn lint:package-json",
-        "lint:eslint": "eslint . --cache",
-        "lint:fix": "yarn lint:eslint --fix && yarn lint:prettier --write  && yarn lint:stylelint --fix && yarn lint:spell && yarn lint:package-json",
-        "lint:package-json": "npmPkgJsonLint --configFile ./.packagerc.js .",
-        "lint:prettier": "prettier --log-level=warn --check --cache .",
+        "lint": "yarn lint:eslint && yarn lint:prettier && yarn lint:stylelint && yarn lint:spell",
+        "lint:eslint": "eslint . --cache --concurrency=auto",
+        "lint:fix": "yarn lint:eslint --fix && yarn lint:prettier --write && yarn lint:stylelint --fix",
+        "lint:prettier": "prettier --check --cache '**/*.{json,yaml,yml,md,css,html}'",
         "lint:spell": "cspell --config ./.cspellrc.js --no-progress --no-summary --unique '**'",
         "lint:stylelint": "stylelint ./**/*.css --cache",
-        "release": "release-it"
+        "release": "release-it",
+        "test": "vitest run"
     },
     "dependencies": {
-        "@eslint-community/eslint-plugin-eslint-comments": "4.4.1",
-        "@graphql-eslint/eslint-plugin": "3.20.1",
-        "@next/eslint-plugin-next": "15.1.6",
-        "@prettier/plugin-xml": "3.4.1",
+        "@eslint-community/eslint-plugin-eslint-comments": "4.5.0",
+        "@next/eslint-plugin-next": "16.0.6",
+        "@prettier/plugin-xml": "3.4.2",
         "@rimac-technology/eslint-plugin": "1.5.0",
-        "@stylistic/eslint-plugin": "3.0.1",
-        "@typescript-eslint/parser": "8.23.0",
-        "@vitest/eslint-plugin": "1.1.25",
-        "eslint-plugin-es-x": "8.5.0",
+        "@stylistic/eslint-plugin": "5.6.1",
+        "@typescript-eslint/parser": "8.48.0",
+        "@vitest/eslint-plugin": "1.5.1",
+        "eslint-plugin-es-x": "9.2.0",
         "eslint-plugin-etc": "2.0.3",
-        "eslint-plugin-import-x": "4.6.1",
-        "eslint-plugin-jest": "28.11.0",
+        "eslint-plugin-import-x": "4.16.1",
+        "eslint-plugin-jest": "29.2.1",
         "eslint-plugin-mobx": "0.0.13",
-        "eslint-plugin-n": "17.15.1",
-        "eslint-plugin-playwright": "2.2.0",
+        "eslint-plugin-n": "17.23.1",
+        "eslint-plugin-playwright": "2.4.0",
+        "eslint-plugin-prettier": "5.5.4",
         "eslint-plugin-promise": "7.2.1",
-        "eslint-plugin-react": "7.37.4",
-        "eslint-plugin-react-hooks": "5.1.0",
+        "eslint-plugin-react": "7.37.5",
+        "eslint-plugin-react-hooks": "7.0.1",
         "eslint-plugin-security-node": "1.1.4",
         "eslint-plugin-simple-import-sort": "12.1.1",
-        "eslint-plugin-sonarjs": "1.0.4",
+        "eslint-plugin-sonarjs": "3.0.5",
         "eslint-plugin-sort-destructure-keys": "2.0.0",
         "eslint-plugin-sort-keys-fix": "1.1.2",
-        "eslint-plugin-storybook": "0.11.6",
+        "eslint-plugin-storybook": "10.1.2",
         "eslint-plugin-typescript-sort-keys": "3.3.0",
-        "eslint-plugin-unicorn": "56.0.1",
-        "eslint-plugin-unused-imports": "4.1.4",
+        "eslint-plugin-unicorn": "62.0.0",
+        "eslint-plugin-unused-imports": "4.3.0",
+        "globals": "16.5.0",
         "prettier-plugin-embed": "0.5.0",
-        "prettier-plugin-jsdoc": "1.3.3",
-        "prettier-plugin-packagejson": "2.5.17",
+        "prettier-plugin-jsdoc": "1.7.0",
+        "prettier-plugin-packagejson": "2.5.20",
         "prettier-plugin-prisma": "5.0.0",
         "prettier-plugin-sh": "0.18.0",
-        "prettier-plugin-sql": "0.19.1",
-        "prettier-plugin-tailwindcss": "0.6.13",
-        "prettier-plugin-toml": "2.0.5",
-        "stylelint-order": "6.0.4",
-        "typescript-eslint": "8.23.0"
+        "prettier-plugin-sql": "0.19.2",
+        "prettier-plugin-tailwindcss": "0.7.2",
+        "prettier-plugin-toml": "2.0.6",
+        "stylelint-no-unused-selectors": "1.0.40",
+        "stylelint-order": "7.0.0",
+        "typescript-eslint": "8.48.0"
     },
     "devDependencies": {
-        "@storybook/react": "8.6.7",
-        "@types/eslint": "8.56.12",
-        "@types/jest": "29.5.14",
-        "@types/node": "22.13.1",
-        "@types/react": "19.0.8",
-        "cspell": "8.17.3",
-        "eslint": "8.57.1",
-        "graphql": "16.10.0",
-        "jest": "29.7.0",
-        "npm-package-json-lint": "8.0.0",
-        "prettier": "3.6.2",
-        "react": "19.0.0",
-        "release-it": "18.1.2",
-        "stylelint": "16.14.1",
-        "typescript": "5.7.3"
+        "@storybook/react": "10.1.2",
+        "@types/eslint": "9.6.1",
+        "@types/jest": "30.0.0",
+        "@types/node": "24.10.1",
+        "@types/react": "19.2.7",
+        "cspell": "9.3.2",
+        "eslint": "9.39.1",
+        "jest": "30.2.0",
+        "npm-package-json-lint": "9.0.0",
+        "prettier": "3.7.3",
+        "react": "19.2.0",
+        "release-it": "19.0.6",
+        "storybook": "^10.1.2",
+        "stylelint": "16.26.1",
+        "typescript": "5.9.3",
+        "vitest": "^4.0.14"
     },
     "peerDependencies": {
-        "cspell": "8 || 9",
-        "eslint": "8.57.1",
-        "npm-package-json-lint": "8",
+        "cspell": "9",
+        "eslint": "^9",
+        "npm-package-json-lint": "9",
         "prettier": "3",
         "stylelint": "16"
     },
@@ -109,7 +111,7 @@
             "optional": true
         }
     },
-    "packageManager": "yarn@4.9.2",
+    "packageManager": "yarn@4.12.0",
     "engines": {
         "node": ">=20.0.0"
     },

package/src/cspell/base.txt

@@ -111,3 +111,5 @@ kniprc
 webrtc
 speculationrules
 hrefs
+supabase
+tslog

package/src/eslint/configs/core.js

@@ -1,19 +1,35 @@
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-    extends: [
-        "../plugins/eslint.js",
-        "../plugins/es-x.js",
-        "../plugins/eslint-comments.js",
-        "../plugins/promise.js",
-        "../plugins/unicorn.js",
-        "../plugins/unused-imports.js",
-        "../plugins/import-x.js",
-        "../plugins/sonarjs.js",
-        "../plugins/etc.js",
-        "../plugins/sort-keys-fix.js",
-        "../plugins/sort-destructure-keys.js",
-        "../plugins/stylistic.js",
-        "../plugins/simple-import-sort.js",
-        "../plugins/rimac.js",
-    ],
-}
+import esXPlugin from "../plugins/es-x.js"
+import eslintPlugin from "../plugins/eslint.js"
+import eslintCommentsPlugin from "../plugins/eslint-comments.js"
+import etcPlugin from "../plugins/etc.js"
+import importXPlugin from "../plugins/import-x.js"
+import prettierPlugin from "../plugins/prettier.js"
+import promisePlugin from "../plugins/promise.js"
+import rimacPlugin from "../plugins/rimac.js"
+import simpleImportSortPlugin from "../plugins/simple-import-sort.js"
+import sonarjsPlugin from "../plugins/sonarjs.js"
+import sortDestructureKeysPlugin from "../plugins/sort-destructure-keys.js"
+import sortKeysFixPlugin from "../plugins/sort-keys-fix.js"
+import stylisticPlugin from "../plugins/stylistic.js"
+import unicornPlugin from "../plugins/unicorn.js"
+import unusedImportsPlugin from "../plugins/unused-imports.js"
+
+const coreConfig = [
+    eslintPlugin,
+    esXPlugin,
+    eslintCommentsPlugin,
+    promisePlugin,
+    unicornPlugin,
+    unusedImportsPlugin,
+    importXPlugin,
+    sonarjsPlugin,
+    etcPlugin,
+    sortKeysFixPlugin,
+    sortDestructureKeysPlugin,
+    stylisticPlugin,
+    simpleImportSortPlugin,
+    rimacPlugin,
+    prettierPlugin,
+]
+
+export default coreConfig

package/src/eslint/configs/core.test.js

@@ -0,0 +1,23 @@
+import { ESLint } from "eslint"
+
+import config from "./core.js"
+
+const eslint = new ESLint({
+    overrideConfig: config,
+    overrideConfigFile: true,
+})
+
+describe("core", () => {
+    test("loads without errors", async () => {
+        const results = await eslint.lintText("const x = 1\n", { filePath: "test.js" })
+
+        expect(results).toBeDefined()
+        expect(results[0].fatalErrorCount).toBe(0)
+    })
+
+    test("detects violations", async () => {
+        const results = await eslint.lintText("var x = 1\n", { filePath: "test.js" })
+
+        expect(results[0].errorCount).toBeGreaterThan(0)
+    })
+})

package/src/eslint/configs/jest.js

@@ -1,4 +1,5 @@
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-    extends: ["../plugins/jest.js"],
-}
+import jestPlugin from "../plugins/jest.js"
+
+const jestConfig = [jestPlugin]
+
+export default jestConfig

package/src/eslint/configs/jest.test.js

@@ -0,0 +1,17 @@
+import { ESLint } from "eslint"
+
+import config from "./jest.js"
+
+const eslint = new ESLint({
+    overrideConfig: config,
+    overrideConfigFile: true,
+})
+
+describe("jest", () => {
+    test("loads without errors", async () => {
+        const results = await eslint.lintText("const x = 1\n", { filePath: "test.test.js" })
+
+        expect(results).toBeDefined()
+        expect(results[0].fatalErrorCount).toBe(0)
+    })
+})

package/src/eslint/configs/mobx.js

@@ -1,4 +1,5 @@
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-    extends: ["../plugins/mobx.js"],
-}
+import mobxPlugin from "../plugins/mobx.js"
+
+const mobxConfig = [mobxPlugin]
+
+export default mobxConfig

package/src/eslint/configs/mobx.test.js

@@ -0,0 +1,17 @@
+import { ESLint } from "eslint"
+
+import config from "./mobx.js"
+
+const eslint = new ESLint({
+    overrideConfig: config,
+    overrideConfigFile: true,
+})
+
+describe("mobx", () => {
+    test("loads without errors", async () => {
+        const results = await eslint.lintText("const x = 1\n", { filePath: "test.js" })
+
+        expect(results).toBeDefined()
+        expect(results[0].fatalErrorCount).toBe(0)
+    })
+})

package/src/eslint/configs/next.js

@@ -1,4 +1,5 @@
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-    extends: ["../plugins/next.js"],
-}
+import nextPlugin from "../plugins/next.js"
+
+const nextConfig = [nextPlugin]
+
+export default nextConfig

package/src/eslint/configs/next.test.js

@@ -0,0 +1,17 @@
+import { ESLint } from "eslint"
+
+import config from "./next.js"
+
+const eslint = new ESLint({
+    overrideConfig: config,
+    overrideConfigFile: true,
+})
+
+describe("next", () => {
+    test("loads without errors", async () => {
+        const results = await eslint.lintText("const x = 1\n", { filePath: "test.tsx" })
+
+        expect(results).toBeDefined()
+        expect(results[0].fatalErrorCount).toBe(0)
+    })
+})

package/src/eslint/configs/node.js

@@ -1,4 +1,6 @@
-/** @type {import("eslint").ESLint.ConfigData} */
-module.exports = {
-    extends: ["../plugins/n.js", "../plugins/security-node.js"],
-}
+import nPlugin from "../plugins/n.js"
+import securityNodePlugin from "../plugins/security-node.js"
+
+const nodeConfig = [nPlugin, securityNodePlugin]
+
+export default nodeConfig

package/src/eslint/configs/node.test.js

@@ -0,0 +1,17 @@
+import { ESLint } from "eslint"
+
+import config from "./node.js"
+
+const eslint = new ESLint({
+    overrideConfig: config,
+    overrideConfigFile: true,
+})
+
+describe("node", () => {
+    test("loads without errors", async () => {
+        const results = await eslint.lintText("const x = 1\n", { filePath: "test.js" })
+
+        expect(results).toBeDefined()
+        expect(results[0].fatalErrorCount).toBe(0)
+    })
+})