Merge pull request #1295 from valadas/eslint-rules-v0.24

Created eslint rules to handle deprecations in 0.24 breaking changes

Author: valadas

README.md

@@ -35,3 +35,37 @@ Stay tuned - coming soon.
 
 ## Usage (Individual Components)
 Usage of each component is documented within the component folder right here on GitHub, along with some code samples too.
+
+## Usage (ESLint Plugin)
+
+The `dnn-elements` package includes an ESLint plugin with custom rules, such as `noLabelSlotInCheckbox`. Here's how to configure it:
+
+### For Older ESLint Configurations (e.g., `.eslintrc`)
+
+Update your ESLint configuration file (e.g., `.eslintrc.json`):
+```json
+{
+  "plugins": ["@dnncommunity/dnn-elements"],
+  "rules": {
+    "@dnncommunity/dnn-elements/no-label-slot-in-checkbox": "error"
+  }
+}
+```
+
+### For Newer ESLint Flat Configurations
+
+Update your ESLint configuration file (e.g., `eslint.config.js`):
+```javascript
+import dnnElementsPlugin from "@dnncommunity/dnn-elements/src/eslint-plugin/dist";
+
+export default [
+  {
+    plugins: {
+      "@dnncommunity/dnn-elements": dnnElementsPlugin
+    },
+    rules: {
+      "@dnncommunity/dnn-elements/no-label-slot-in-checkbox": "error"
+    }
+  }
+];
+```

packages/stencil-library/jest.eslint.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    preset: "ts-jest",
+    testEnvironment: "node",
+    testMatch: ["<rootDir>/src/eslint-plugin/__tests__/**/*.tests.ts"],
+}

packages/stencil-library/package.json

@@ -15,22 +15,25 @@
   "unpkg": "dist/dnn/dnn.js",
   "files": [
     "dist/",
-    "loader/"
+    "loader/",
+    "src/eslint-plugin/"
   ],
   "scripts": {
-    "build": "npm run eslint && stencil build --docs",
+    "build": "npm run build:eslint-plugin && npm run eslint && stencil build --docs",
     "postbuild": "license-checker-rseidelsohn --out licenses.json --json --direct --relativeLicensePath --relativeModulePath",
     "watch": "stencil build --dev --watch",
     "start": "stencil build --dev --watch --serve",
     "start.edge": "stencil build --dev --watch --serve --es5",
     "poststart": "license-checker-rseidelsohn --out licenses.json --json --direct --relativeLicensePath --relativeModulePath",
     "test": "stencil test --spec --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
+    "test.eslint": "jest --config jest.eslint.config.js",
     "generate": "stencil generate",
     "eslint": "eslint",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "deploy-storybook": "gh-pages -d storybook-static --branch site"
+    "deploy-storybook": "gh-pages -d storybook-static --branch site",
+    "build:eslint-plugin": "tsc -p src/eslint-plugin/tsconfig.json"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^3.1.0",
@@ -48,6 +51,7 @@
     "@storybook/web-components": "^8.3.2",
     "@storybook/web-components-webpack5": "^8.3.2",
     "@timkendrick/monaco-editor": "^0.0.9",
+    "@types/estree-jsx": "^1.0.5",
     "@types/jest": "^29.5.10",
     "@typescript-eslint/eslint-plugin": "^8.0.1",
     "@typescript-eslint/parser": "^8.0.1",
@@ -67,8 +71,8 @@
     "react-dom": "^18.2.0",
     "rollup-plugin-node-polyfills": "^0.2.1",
     "storybook": "^8.3.2",
-    "typescript": "5.6.3",
-    "typescript-debounce-decorator": "^0.0.18"
+    "ts-jest": "^29.3.2",
+    "typescript": "5.6.3"
   },
   "dependencies": {
     "jodit": "^4.2.27"

packages/stencil-library/src/eslint-plugin/__tests__/no-label-slot-in-checkbox.tests.ts

@@ -0,0 +1,27 @@
+import { RuleTester } from "eslint";
+import { noLabelSlotInCheckbox } from "../src/rules/no-label-slot-in-checkbox";
+const tsParser = require.resolve("@typescript-eslint/parser");
+
+const ruleTester = new RuleTester({
+    parser: tsParser,
+    parserOptions: {
+        ecmaVersion: 2022,
+        ecmaFeatures: {
+            jsx: true,
+        },
+        sourceType: "module",
+    },
+});
+
+ruleTester.run("no-label-slot-in-checkbox", noLabelSlotInCheckbox, {
+    valid: [
+        { code: "<dnn-checkbox></dnn-checkbox>" },
+    ],
+    invalid: [
+        {
+            code: "<dnn-checkbox onClick={e => console.log(e)}><label>Label Text</label></dnn-checkbox>",
+            errors: [{ messageId: "noLabelSlotInCheckbox" }],
+            output: "<label>\nLabel Text\n<dnn-checkbox onClick={e => console.log(e)}></dnn-checkbox>\n</label>",
+        },
+    ],
+});

packages/stencil-library/src/eslint-plugin/index.ts

@@ -0,0 +1,5 @@
+import { noLabelSlotInCheckbox } from "./src/rules/no-label-slot-in-checkbox";
+
+export const rules = {
+    "no-label-slot-in-checkbox": noLabelSlotInCheckbox
+};

packages/stencil-library/src/eslint-plugin/src/rules/no-label-slot-in-checkbox.ts

@@ -0,0 +1,65 @@
+import type { Rule } from 'eslint';
+import type { JSXOpeningElement } from "estree-jsx";
+
+export const noLabelSlotInCheckbox: Rule.RuleModule = {
+    meta: {
+        type: "problem",
+        docs: {
+            description: "Disallow label slot in checkbox",
+            recommended: true,
+            url: "https://github.com/DNNCommunity/dnn-elements/releases/tag/v0.24.0",
+        },
+        messages: {
+            noLabelSlotInCheckbox: "Label slot is not allowed in dnn-checkbox, wrap dnn-checkbox with a label instead."
+        },
+        fixable: "code",
+    },
+    create(context: Rule.RuleContext): Rule.RuleListener {
+        return {
+            JSXOpeningElement(node: Rule.Node) {
+                if (node.type === "JSXOpeningElement") {
+                    const jsxNode = node as JSXOpeningElement;
+                    if (jsxNode.name.type === "JSXIdentifier" && jsxNode.name.name === "dnn-checkbox") {
+                        const parent = context.getAncestors().find(ancestor => ancestor.type === "JSXElement");
+                        if (parent) {
+                            const hasLabel = parent.children.some(child => {
+                                return child.type === "JSXElement" &&
+                                    child.openingElement.name.type === "JSXIdentifier" &&
+                                    child.openingElement.name.name === "label";
+                            });
+                            if (hasLabel) {
+                                context.report({
+                                    node: node,
+                                    messageId: "noLabelSlotInCheckbox",
+                                    fix: (fixer) => {
+                                        if (parent && parent.type === "JSXElement" && Array.isArray(parent.children)) {
+                                            const label = parent.children.find(child => 
+                                                child &&
+                                                child.type === "JSXElement" &&
+                                                child.openingElement &&
+                                                child.openingElement.name &&
+                                                child.openingElement.name.type === "JSXIdentifier" &&
+                                                child.openingElement.name.name === "label");
+
+                                            if (label && label.type === "JSXElement") {
+                                                const labelText = context.sourceCode.getText(label).replace(/<label>|<\/label>/g, '').trim();
+                                                const checkboxText = context.sourceCode.getText(node);
+
+                                                // Combine the label text and checkbox into a label wrapper with multiline formatting
+                                                const fixedText = `<label>\n${labelText}\n${checkboxText}</dnn-checkbox>\n</label>`;
+
+                                                return fixer.replaceText(parent, fixedText);
+                                            }
+                                        }
+
+                                        return null;
+                                    }
+                                });
+                            }
+                        }
+                    }
+                }
+            }
+        };
+    }
+};

packages/stencil-library/src/eslint-plugin/tsconfig.json

@@ -0,0 +1,16 @@
+{
+    "compilerOptions": {
+      "target": "ES2022",
+      "module": "CommonJS",
+      "moduleResolution": "Node",
+      "outDir": "./dist",
+      "strict": true,
+      "esModuleInterop": true,
+      "declaration": true,
+      "skipLibCheck": true,
+      "types": ["jest", "node", "estree-jsx"],
+      "forceConsistentCasingInFileNames": true,
+      "sourceMap": true
+    },
+    "include": ["src", "jest.config.js"]
+  }