Refactored to support ts-eslint

Author: valadas

.gitignore

@@ -4,4 +4,3 @@ node_modules/
 .vscode/
 _build/bin
 _build/obj
-packages/stencil-library/eslint-plugin

package-lock.json

@@ -0,0 +1,26 @@
+# dnn-checkbox should not have any content inside itself
+
+In earlier versions of dnn-elements, whatever content was inside dnn-checkbox would be pulled automatically into a label for the checkbox. This solution was not great as it prevented flexibility of having positioning between the label and the box or custom styling, etc. It couls also have been a accessibility problem.
+
+To match the porper accessibility recommendations, this was obsolete and then removed.
+
+Here is how you can fix old code:
+
+## Old
+```jsx
+<dnn-checkbox
+    onChecked={e => console.log(e.detail)}
+>
+    This is my label
+</dnn-checkbox>
+```
+
+## New
+```jsx
+<label>
+    <dnn-checkbox onClick={e => console.log(e.detail)} />
+    This is my label
+</label>
+```
+
+You can also have the text before the checkbox if you prefer depending on the desired UI.

packages/stencil-library/eslint-plugin/docs/no-label-slot-in-checkbox.md

@@ -0,0 +1,17 @@
+import { rules } from "./rules";
+
+const plugin = {
+    configs: {
+        get recommended() {
+            return recommended;
+        }
+    }
+}
+const recommended = {
+    plugins: {
+        "dnn-elements": plugin,
+    },
+    rules,
+};
+
+export default plugin;

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

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

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

@@ -0,0 +1,30 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+import { rule } from "./no-label-slot-in-checkbox";
+
+const ruleTester = new RuleTester();
+
+// Define a reusable configuration for JSX parser options
+const jsxParserOptions = {
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+};
+
+ruleTester.run("no-label-slot-in-checkbox", rule, {
+    valid: [
+        {
+            code: "<dnn-checkbox></dnn-checkbox>",
+            languageOptions: jsxParserOptions,
+        },
+    ],
+    invalid: [
+        {
+            code: "<dnn-checkbox onClick={e => console.log(e)}>Something</dnn-checkbox>",
+            languageOptions: jsxParserOptions,
+            errors: [{ messageId: "noLabelSlotInCheckbox" }],
+            output: "<label>\n<dnn-checkbox onClick={e => console.log(e)} />\nSomething\n</label>",
+        },
+    ],
+});

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

@@ -0,0 +1,48 @@
+import { createRule } from "../utils";
+
+export const rule = createRule({
+    name: "no-label-slot-in-checkbox",
+    defaultOptions: [],
+    meta: {
+        docs: {
+            description: "Disallow label slot in checkbox",
+            recommended: true,
+            url: "https://github.com/DNNCommunity/dnn-elements/releases/tag/v0.24.0",
+        },
+        type: "problem",
+        messages: {
+            noLabelSlotInCheckbox: "Label slot is not allowed in dnn-checkbox, wrap dnn-checkbox with a label instead."
+        },
+        fixable: "code",
+        schema: [], // Ensure schema is defined as an empty array or with the appropriate schema definition
+    },
+    create(context) {
+        return {
+            JSXElement(node) {
+                if (
+                    node.openingElement.name.type === "JSXIdentifier" &&
+                    node.openingElement.name.name === "dnn-checkbox"
+                ) {
+                    const innerContent = node.children
+                        .map(child => context.sourceCode.getText(child))
+                        .join("")
+                        .trim();
+    
+                    if (innerContent) {
+                        context.report({
+                            node,
+                            messageId: "noLabelSlotInCheckbox",
+                            fix: fixer => {
+                                const checkboxText = context.sourceCode.getText(node.openingElement);
+                                const selfClosing = checkboxText.replace(/>$/, " />");
+    
+                                const replacement = `<label>\n${selfClosing}\n${innerContent}\n</label>`;
+                                return fixer.replaceText(node, replacement);
+                            }
+                        });
+                    }
+                }
+            }
+        };
+    },
+});

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

@@ -0,0 +1,11 @@
+import { ESLintUtils } from "@typescript-eslint/utils";
+
+export interface TypedLintingRuleDocs {
+    description: string;
+    recommended?: boolean;
+    requiresTyepeChecking?: boolean;
+};
+
+export const createRule = ESLintUtils.RuleCreator<TypedLintingRuleDocs>(
+    name => `https://github.com/DNNCommunity/dnn-elements/tree/main/packages/stencil-library/eslint-plugin/docs/${name}.md`
+);

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

@@ -1,16 +1,19 @@
 {
     "compilerOptions": {
       "target": "es2019",
-      "module": "commonjs",
-      "moduleResolution": "Node",
-      "outDir": "../../eslint-plugin",
+      "module": "NodeNext",
+      "moduleResolution": "nodenext",
+      "outDir": "dist",
       "strict": true,
       "esModuleInterop": true,
       "declaration": true,
       "skipLibCheck": true,
       "types": ["jest", "node", "estree-jsx"],
       "forceConsistentCasingInFileNames": true,
-      "sourceMap": true
+      "sourceMap": true,
+      "isolatedModules":true,
+      "jsx": "react",
+      "jsxFactory": "h"
     },
-    "include": ["src/index.ts"]
+    "include": ["src/**/*.ts"]
 }

…-library/src/eslint-plugin/tsconfig.json …ncil-library/eslint-plugin/tsconfig.jsonpackages/stencil-library/src/eslint-plugin/tsconfig.json renamed to packages/stencil-library/eslint-plugin/tsconfig.json packages/stencil-library/src/eslint-plugin/tsconfig.json renamed to packages/stencil-library/eslint-plugin/tsconfig.json

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