chore: improve TypeScript compat of Mendix stories

nl-design-system · Nov 15, 2024 · cd4f9d0 · cd4f9d0
1 parent 97126a7
commit cd4f9d0
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 20 deletions.
diff --git 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
@@ -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
@@ -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,27 +67,27 @@ 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
                   type="radio"
                   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
                   type="radio"
                   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,29 +135,29 @@ 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
                   type="radio"
                   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
                   type="radio"
                   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
@@ -47,15 +47,15 @@ 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
         </label>
         <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,15 +80,15 @@ 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
         </label>
         <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
@@ -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
         />