From cd4f9d0b9ebf98bd8d7b71c84f48e3811af68f62 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <git@robbertbroersma.nl>
Date: Thu, 14 Nov 2024 23:14:58 +0100
Subject: [PATCH] chore: improve TypeScript compat of Mendix stories

---
 ...mendix-breadcrumb-nav.stories-disabled.tsx |  4 ++--
 packages/storybook/src/mendix-dom.d.ts        | 10 ++++++++
 ...orm-field-radio-group.stories-disabled.tsx | 24 +++++++++----------
 .../mendix-form-field-textarea.stories.tsx    |  8 +++----
 .../src/mendix-text-input.stories.tsx         |  4 ++--
 5 files changed, 30 insertions(+), 20 deletions(-)
 create mode 100644 packages/storybook/src/mendix-dom.d.ts

diff --git a/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx b/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx
index 830db7d4..04f54c28 100644
--- a/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx
+++ b/packages/storybook/src/mendix-breadcrumb-nav.stories-disabled.tsx
@@ -49,7 +49,7 @@ export const Breadcrumbs: Story = {
         Item 1
       </a>
       <a
-        class="mx-link mx-name-actionButton12 breadcrumb-item"
+        className="mx-link mx-name-actionButton12 breadcrumb-item"
         href="#"
         role="button"
         title=""
@@ -60,7 +60,7 @@ export const Breadcrumbs: Story = {
         Item 2
       </a>
       <a
-        class="mx-link mx-name-actionButton14 breadcrumb-item"
+        className="mx-link mx-name-actionButton14 breadcrumb-item"
         href="#"
         role="button"
         title=""
diff --git a/packages/storybook/src/mendix-dom.d.ts b/packages/storybook/src/mendix-dom.d.ts
new file mode 100644
index 00000000..cf59b426
--- /dev/null
+++ b/packages/storybook/src/mendix-dom.d.ts
@@ -0,0 +1,10 @@
+/* eslint-disable no-unused-vars */
+import { AriaAttributes, DOMAttributes, HTMLAttributes } from 'react';
+
+declare module 'react' {
+  interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    // extends React's HTMLAttributes
+    mask?: string;
+    widgetid?: string;
+  }
+}
diff --git a/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx b/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx
index af562c32..4592132d 100644
--- a/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx
+++ b/packages/storybook/src/mendix-form-field-radio-group.stories-disabled.tsx
@@ -49,7 +49,7 @@ export const TextInput: Story = {
           <div className="mx-name-radioButtons5 mx-radiobuttons form-group no-columns">
             <label
               className="control-label"
-              for="31.Forms.Page1_TextInput.radioButtons5_rai_37"
+              htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37"
               id="31.Forms.Page1_TextInput.radioButtons5_rai_37-label"
             >
               Answer as single choice
@@ -67,7 +67,7 @@ export const TextInput: Story = {
                   name="31.Forms.Page1_TextInput.radioButtons5_rai_37"
                   value="Choice1"
                 />
-                <label for="31.Forms.Page1_TextInput.radioButtons5_rai_37_0">Choice 1</label>
+                <label htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37_0">Choice 1</label>
               </div>
               <div className="radio">
                 <input
@@ -75,9 +75,9 @@ export const TextInput: Story = {
                   id="31.Forms.Page1_TextInput.radioButtons5_rai_37_1"
                   name="31.Forms.Page1_TextInput.radioButtons5_rai_37"
                   value="Choice2"
-                  tabindex="-1"
+                  tabIndex={-1}
                 />
-                <label for="31.Forms.Page1_TextInput.radioButtons5_rai_37_1">Choice 2</label>
+                <label htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37_1">Choice 2</label>
               </div>
               <div className="radio">
                 <input
@@ -85,9 +85,9 @@ export const TextInput: Story = {
                   id="31.Forms.Page1_TextInput.radioButtons5_rai_37_2"
                   name="31.Forms.Page1_TextInput.radioButtons5_rai_37"
                   value="Choice3"
-                  tabindex="-1"
+                  tabIndex={-1}
                 />
-                <label for="31.Forms.Page1_TextInput.radioButtons5_rai_37_2">Choice 3</label>
+                <label htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37_2">Choice 3</label>
               </div>
             </div>
           </div>
@@ -116,7 +116,7 @@ export const DisabledTextarea: Story = {
           <div className="mx-name-radioButtons5 mx-radiobuttons form-group no-columns">
             <label
               className="control-label"
-              for="31.Forms.Page1_TextInput.radioButtons5_rai_37"
+              htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37"
               id="31.Forms.Page1_TextInput.radioButtons5_rai_37-label"
             >
               Answer as single choice
@@ -135,7 +135,7 @@ export const DisabledTextarea: Story = {
                   value="Choice1"
                   disabled
                 />
-                <label for="31.Forms.Page1_TextInput.radioButtons5_rai_37_0">Choice 1</label>
+                <label htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37_0">Choice 1</label>
               </div>
               <div className="radio">
                 <input
@@ -143,10 +143,10 @@ export const DisabledTextarea: Story = {
                   id="31.Forms.Page1_TextInput.radioButtons5_rai_37_1"
                   name="31.Forms.Page1_TextInput.radioButtons5_rai_37"
                   value="Choice2"
-                  tabindex="-1"
+                  tabIndex={-1}
                   disabled
                 />
-                <label for="31.Forms.Page1_TextInput.radioButtons5_rai_37_1">Choice 2</label>
+                <label htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37_1">Choice 2</label>
               </div>
               <div className="radio">
                 <input
@@ -154,10 +154,10 @@ export const DisabledTextarea: Story = {
                   id="31.Forms.Page1_TextInput.radioButtons5_rai_37_2"
                   name="31.Forms.Page1_TextInput.radioButtons5_rai_37"
                   value="Choice3"
-                  tabindex="-1"
+                  tabIndex={-1}
                   disabled
                 />
-                <label for="31.Forms.Page1_TextInput.radioButtons5_rai_37_2">Choice 3</label>
+                <label htmlFor="31.Forms.Page1_TextInput.radioButtons5_rai_37_2">Choice 3</label>
               </div>
             </div>
           </div>
diff --git a/packages/storybook/src/mendix-form-field-textarea.stories.tsx b/packages/storybook/src/mendix-form-field-textarea.stories.tsx
index 111f2b71..67582c02 100644
--- a/packages/storybook/src/mendix-form-field-textarea.stories.tsx
+++ b/packages/storybook/src/mendix-form-field-textarea.stories.tsx
@@ -47,7 +47,7 @@ export const TextInput: Story = {
       <div className="mx-name-textArea1 mx-textarea form-group no-columns">
         <label
           className="control-label"
-          for="31.Forms.Page1_TextInput.textArea1_rai_34"
+          htmlFor="31.Forms.Page1_TextInput.textArea1_rai_34"
           id="31.Forms.Page1_TextInput.textArea1_rai_34-label"
         >
           Inputs come in various shapes and sizes
@@ -55,7 +55,7 @@ export const TextInput: Story = {
         <textarea
           id="31.Forms.Page1_TextInput.textArea1_rai_34"
           className="form-control mx-textarea-input mx-textarea-noresize"
-          maxlength="200"
+          maxLength={200}
           style={{ height: '144px !important' }}
         ></textarea>
       </div>
@@ -80,7 +80,7 @@ export const DisabledTextarea: Story = {
       <div className="mx-name-textArea1 mx-textarea form-group no-columns">
         <label
           className="control-label"
-          for="31.Forms.Page1_TextInput.textArea1_rai_34"
+          htmlFor="31.Forms.Page1_TextInput.textArea1_rai_34"
           id="31.Forms.Page1_TextInput.textArea1_rai_34-label"
         >
           Inputs come in various shapes and sizes
@@ -88,7 +88,7 @@ export const DisabledTextarea: Story = {
         <textarea
           id="31.Forms.Page1_TextInput.textArea1_rai_34"
           className="form-control mx-textarea-input mx-textarea-noresize"
-          maxlength="200"
+          maxLength={200}
           style={{ height: '144px !important' }}
           disabled
         ></textarea>
diff --git a/packages/storybook/src/mendix-text-input.stories.tsx b/packages/storybook/src/mendix-text-input.stories.tsx
index c116a0d9..4004db3c 100644
--- a/packages/storybook/src/mendix-text-input.stories.tsx
+++ b/packages/storybook/src/mendix-text-input.stories.tsx
@@ -58,7 +58,7 @@ export const TextInput: Story = {
           type="text"
           maxLength={200}
           mask=""
-          autocomplete="on"
+          autoComplete="on"
           value=""
         />
       </div>
@@ -94,7 +94,7 @@ export const DisabledTextInput: Story = {
           type="text"
           maxLength={200}
           mask=""
-          autocomplete="on"
+          autoComplete="on"
           value=""
           disabled
         />