added linter rule for dnn-buttont type deprecation

Author: valadas

packages/stencil-library/eslint-plugin/docs/button-type-to-appearance.md

@@ -0,0 +1,12 @@
+# dnn-button type obsolete
+
+**dnn-button** `type` property will be reused in the future to indicate the form type of button such as `submit` or `reset` or `button`. It has been marked as deprecated but will still work **in only this minor version**.  Replace your current usage with the `appearance` prop. For this version only `formButtonType` will be used to indicate the type of form button this is. In the next minor release, `formButtonType` will be dreprecated in favor of the new meaning of `type`.
+
+Example before:
+```html
+<dnn-button type="primary">Submit</dnn-button>
+```
+Example after:
+```html
+<dnn-button appearance="primary" formButtonType="submit">Submit</dnn-button>
+```

packages/stencil-library/eslint-plugin/src/rules/button-type-to-appearance.test.ts

@@ -0,0 +1,40 @@
+import { RuleTester } from "@typescript-eslint/rule-tester";
+import * as vitest from "vitest";
+import { rule } from "./button-type-to-appearance.js";
+
+RuleTester.afterAll = vitest.afterAll;
+RuleTester.it = vitest.it;
+RuleTester.itOnly = vitest.it.only;
+RuleTester.describe = vitest.describe;
+
+const ruleTester = new RuleTester();
+
+// Define a reusable configuration for JSX parser options
+const jsxParserOptions = {
+    parserOptions: {
+        ecmaFeatures: {
+            jsx: true,
+        },
+    },
+};
+
+ruleTester.run("button-type-to-appearance", rule, {
+    valid: [
+        {
+            code: "<dnn-button></dnn-button>",
+            languageOptions: jsxParserOptions,
+        },
+        {
+            code: "<dnn-button appearance=\"secondary\"></dnn-button>",
+            languageOptions: jsxParserOptions,
+        },
+    ],
+    invalid: [
+        {
+            code: "<dnn-button type=\"primary\"></dnn-button>",
+            languageOptions: jsxParserOptions,
+            errors: [{ messageId: "buttonTypeToAppearance" }],
+            output: "<dnn-button appearance=\"primary\"></dnn-button>",
+        },
+    ],
+});

packages/stencil-library/eslint-plugin/src/rules/button-type-to-appearance.ts

@@ -0,0 +1,42 @@
+import { createRule } from "../utils.js";
+
+export const rule = createRule({
+    name: "button-type-to-appearance",
+    defaultOptions: [],
+    meta: {
+        docs: {
+            description: "type property deprecated in favor of appearance",
+            recommended: true,
+            url: "https://github.com/DNNCommunity/dnn-elements/releases/tag/v0.24.0",
+        },
+        type: "problem",
+        fixable: "code",
+        messages: {
+            buttonTypeToAppearance: "type property should be replaced with appearance."
+        },
+        schema: [],
+    },
+    create(context) {
+        return {
+            JSXElement(node) {
+                if (
+                    node.openingElement.name.type === "JSXIdentifier" &&
+                    node.openingElement.name.name === "dnn-button"
+                ) {
+                    for (const attr of node.openingElement.attributes) {
+                        if (
+                            attr.type === "JSXAttribute" &&
+                            attr.name.name === "type"
+                        ) {
+                            context.report({
+                                node: attr,
+                                messageId: "buttonTypeToAppearance",
+                                fix: (fixer) => fixer.replaceText(attr.name, "appearance"),
+                            });
+                        }
+                    }
+                }
+            }
+        };
+    },
+});

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

@@ -1,5 +1,7 @@
 import { rule as noLabelSlotInCheckbox } from "./no-label-slot-in-checkbox.js";
+import { rule as buttonTypeToAppearance } from "./button-type-to-appearance.js";
 
 export const rules = {
     "no-label-slot-in-checkbox": noLabelSlotInCheckbox,
+    "button-type-to-appearance": buttonTypeToAppearance,
 }

packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx

@@ -495,7 +495,7 @@ export class DnnPermissionsGrid {
                 </select>
               </div>,
               <dnn-button
-              type="primary"
+              appearance="primary"
               onClick={() => this.addRole()}
               >
                 {this.localResx.Add}

packages/stencil-library/src/components/examples/dnn-example-form/dnn-example-form.tsx

@@ -155,7 +155,7 @@ export class DnnExampleForm {
               console.log(key, value);
             });
             console.groupEnd();
-            /* eslint-enable no-console */
+             
           }}
         >
           <dnn-fieldset label="User Information">