idesigncode · idesigncode · Jul 28, 2023 · Jul 28, 2023 · Jul 27, 2023 · Jul 28, 2023
diff --git a/.storybook/main.mjs b/.storybook/main.mjs
@@ -1,5 +1,5 @@
 import packageJson from '../package.json';
-import { webpackFinal } from '@idesigncode/storybook-tools/storybookConfig.mjs';
+import webpackFinal from '@idesigncode/storybook-tools/webpackFinal.cjs';
 
 export default {
   addons: [
@@ -32,17 +32,5 @@ export default {
     options: {},
   },
   stories: ['../**/RequiredProps.mdx', '../**/*.mdx', '../**/*.stories.*'],
-  storyIndexers: (indexers) => {
-    // Extend js story indexer for mjs
-    return indexers.map((indexer) => {
-      if (`${indexer.test}`.includes(`[tj]sx?$`)) {
-        return {
-          ...indexer,
-          test: /(stories|story)\.m?[tj]sx?$/,
-        };
-      }
-      return indexer;
-    });
-  },
   webpackFinal,
 };
diff --git a/__snapshots__/props-as.test.js.snap b/__snapshots__/props-as.test.js.snap
@@ -635,8 +635,6 @@ exports[`Props/as As Component Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>
@@ -1070,8 +1068,6 @@ exports[`Props/as As Tag Name Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-children.test.js.snap b/__snapshots__/props-children.test.js.snap
@@ -835,8 +835,6 @@ exports[`Props/children Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-classname.test.js.snap b/__snapshots__/props-classname.test.js.snap
@@ -863,8 +863,6 @@ exports[`Props/className Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-disabled.test.js.snap b/__snapshots__/props-disabled.test.js.snap
@@ -363,8 +363,6 @@ exports[`Props/disabled Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-displayformat.test.js.snap b/__snapshots__/props-displayformat.test.js.snap
@@ -375,8 +375,6 @@ exports[`Props/displayFormat Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-format.test.js.snap b/__snapshots__/props-format.test.js.snap
@@ -410,8 +410,6 @@ exports[`Props/format Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-html-attributes.test.js.snap b/__snapshots__/props-html-attributes.test.js.snap
@@ -411,8 +411,6 @@ exports[`Props/HTML attributes Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-initialview.test.js.snap b/__snapshots__/props-initialview.test.js.snap
@@ -375,8 +375,6 @@ exports[`Props/initialView Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>
@@ -447,12 +445,12 @@ exports[`Props/initialView Month test 1`] = `
           day
         </span>
       </button>
-      <button data-testid="field_name-Tab-Month"
+      <button aria-selected="true"
+              data-testid="field_name-Tab-Month"
+              disabled
               id="field_name-Tab-Month"
               role="tab"
               type="button"
-              aria-selected="true"
-              disabled
       >
         <span>
           month
@@ -538,11 +536,11 @@ exports[`Props/initialView Month test 1`] = `
         >
           May
         </button>
-        <button aria-label="June 2023"
+        <button aria-current="date"
+                aria-label="June 2023"
                 class="dateOption Month"
                 data-testid="field_name-Calendar-Month-06"
                 type="button"
-                aria-current="date"
         >
           Jun
         </button>

diff --git a/__snapshots__/props-locale.test.js.snap b/__snapshots__/props-locale.test.js.snap
@@ -396,8 +396,6 @@ exports[`Props/locale Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-max.test.js.snap b/__snapshots__/props-max.test.js.snap
@@ -424,8 +424,6 @@ exports[`Props/max Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-min.test.js.snap b/__snapshots__/props-min.test.js.snap
@@ -424,8 +424,6 @@ exports[`Props/min Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-onvalidationmessage.test.js.snap b/__snapshots__/props-onvalidationmessage.test.js.snap
@@ -418,6 +418,9 @@ exports[`Props/onValidationMessage Implementation test 1`] = `
       <span class="token string">
         ""
       </span>
+      <span class="token punctuation">
+        ,
+      </span>
       <span class>
       </span>
       <span class>
@@ -654,8 +657,6 @@ exports[`Props/onValidationMessage Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-open.test.js.snap b/__snapshots__/props-open.test.js.snap
@@ -375,8 +375,6 @@ exports[`Props/open Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-ref.test.js.snap b/__snapshots__/props-ref.test.js.snap
@@ -477,8 +477,6 @@ exports[`Props/ref Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/props-required.test.js.snap b/__snapshots__/props-required.test.js.snap
@@ -399,8 +399,6 @@ exports[`Props/required Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/required-props.test.js.snap b/__snapshots__/required-props.test.js.snap
@@ -348,8 +348,6 @@ exports[`Required Props Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/styling-css-themes--combined-import-theme-toggling.png b/__snapshots__/styling-css-themes--combined-import-theme-toggling.png
diff --git a/__snapshots__/styling-css-themes.test.js.snap b/__snapshots__/styling-css-themes.test.js.snap
@@ -6,10 +6,6 @@ exports[`Styling/CSS (themes) Combined Import Theme Toggling test 1`] = `
     <code class="language-jsx"
           style="white-space: pre;"
     >
-      <span class>
-      </span>
-      <span class>
-      </span>
       <span class="token comment">
         /*** Automatic theme ***/
       </span>
@@ -314,8 +310,6 @@ exports[`Styling/CSS (themes) Combined Import Theme Toggling test 1`] = `
       <span class="token punctuation">
         }
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>
@@ -355,8 +349,6 @@ exports[`Styling/CSS (themes) Separate Import Vars test 1`] = `
     <code class="language-jsx"
           style="white-space: pre;"
     >
-      <span class>
-      </span>
       <span class>
         body
       </span>
@@ -934,8 +926,6 @@ exports[`Styling/CSS (themes) Separate Import Vars test 1`] = `
       <span class="token punctuation">
         }
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/__snapshots__/validation.test.js.snap b/__snapshots__/validation.test.js.snap
@@ -688,8 +688,6 @@ exports[`Validation Implementation test 1`] = `
       <span class="token punctuation">
         ;
       </span>
-      <span class>
-      </span>
     </code>
   </pre>
   <button>

diff --git a/package.json b/package.json
@@ -107,16 +107,16 @@
     "@babel/core": "^7.22.5",
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
-    "@idesigncode/storybook-tools": "^2.1.3",
-    "@storybook/addon-coverage": "^0.0.8",
-    "@storybook/addon-docs": "^7.0.20",
-    "@storybook/addon-interactions": "^7.0.20",
-    "@storybook/addons": "^7.0.20",
+    "@idesigncode/storybook-tools": "^3.0.0",
+    "@storybook/addon-coverage": "^0.0.9",
+    "@storybook/addon-docs": "^7.1.1",
+    "@storybook/addon-interactions": "^7.1.1",
+    "@storybook/addons": "^7.1.1",
     "@storybook/jest": "^0.1.0",
-    "@storybook/react": "^7.0.20",
-    "@storybook/react-webpack5": "^7.0.20",
-    "@storybook/test-runner": "^0.10.0",
-    "@storybook/testing-library": "^0.1.0",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/test-runner": "^0.12.0",
+    "@storybook/testing-library": "^0.2.0",
     "autoprefixer": "^10.4.14",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "cssnano": "^6.0.1",
@@ -132,8 +132,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "sass": "^1.63.3",
-    "storybook": "^7.0.20",
-    "storybook-dark-mode": "^3.0.0",
+    "storybook": "^7.1.1",
+    "storybook-dark-mode": "^3.0.1",
     "timeshift": "^0.0.2"
   },
   "peerDependencies": {

diff --git a/stories/Props/As.stories.mjs b/stories/Props/As.stories.mjs
@@ -24,7 +24,7 @@ export const AsComponentImplementation = {
   args: {
     code: AsComponentExampleRaw,
   },
-  render: Source,
+  render: (args) => <Source {...args} />,
 };
 
 export const AsComponentDateInput = {
@@ -57,7 +57,7 @@ export const AsTagNameImplementation = {
   args: {
     code: AsTagNameExampleRaw,
   },
-  render: Source,
+  render: (args) => <Source {...args} />,
 };
 
 export const AsTagNameDateInput = {

diff --git a/stories/Props/Children.stories.mjs b/stories/Props/Children.stories.mjs
@@ -30,7 +30,7 @@ export const Implementation = {
   args: {
     code: ChildrenExampleRaw.replace(/^\/\* eslint-disable.*\n/, ''),
   },
-  render: Source,
+  render: (args) => <Source {...args} />,
 };
 
 export const AllChildren = {

diff --git a/stories/Props/ClassName.stories.mjs b/stories/Props/ClassName.stories.mjs
@@ -30,7 +30,7 @@ export const Implementation = {
   args: {
     code: ClassNameExampleRaw,
   },
-  render: Source,
+  render: (args) => <Source {...args} />,
 };
 
 export const OuterDiv = {

diff --git a/stories/Props/Disabled.stories.mjs b/stories/Props/Disabled.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
 import Source from '@idesigncode/storybook-tools/Source.mjs';
 import DateInputWithArgs, {
   defaultArgs,
@@ -21,7 +22,7 @@ export const Implementation = {
   args: {
     code: DisabledExampleRaw,
   },
-  render: Source,
+  render: (args) => <Source {...args} />,
 };
 
 export const UserInteraction = {

diff --git a/stories/Props/DisplayFormat.stories.mjs b/stories/Props/DisplayFormat.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
 import Source from '@idesigncode/storybook-tools/Source.mjs';
 import DateInputWithArgs, {
   defaultArgs,
@@ -21,7 +22,7 @@ export const Implementation = {
   args: {
     code: DisplayFormatExampleRaw,
   },
-  render: Source,
+  render: (args) => <Source {...args} />,
 };
 
 export const MonthYearDay = {

diff --git a/stories/Props/Format.stories.mjs b/stories/Props/Format.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
 import Source from '@idesigncode/storybook-tools/Source.mjs';
 import DateInputWithArgs, {
   defaultArgs,
@@ -21,7 +22,7 @@ export const Implementation = {
   args: {
     code: FormatExampleRaw,
   },
-  render: Source,
+  render: (args) => <Source {...args} />,
 };
 
 export const FormatValue = {
@@ -33,10 +34,8 @@ export const FormatValue = {
     await step(
       'The [onChange] function receives the `formatValue` in the given [format]',
       async () => {
-        await userEvent.paste(
-          within(canvasElement).getByTestId('field_name'),
-          '30/12/2000'
-        );
+        await within(canvasElement).getByTestId('field_name').focus();
+        await userEvent.paste('30/12/2000');
         expect(args.onChange).toHaveBeenLastCalledWith(
           expect.objectContaining({ _reactName: 'onChange' }),
           '12-2000-30'
-Original file line number
+Diff line change
@@ Expand Up / @@ -835,8 +835,6 @@ exports[`Props/children Implementation test 1`] = ` @@
           <span class="token punctuation">
             ;
           </span>
-          <span class>
-          </span>
         </code>
       </pre>
       <button>
@@ Expand Down @@