From 53235717008ba62191cca36a1b4d4ae914af0ff5 Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Fri, 28 Jul 2023 13:45:55 +1000
Subject: [PATCH 1/7] Updated Storybook dependencies
---
package.json | 22 +++++++++++-----------
1 file changed, 11 insertions(+), 11 deletions(-)
diff --git a/package.json b/package.json
index 872292b..358256c 100644
--- 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": {
From e16511e96b544bd71271c081fdbd9fe96a6f2844 Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Thu, 27 Jul 2023 16:27:04 +1000
Subject: [PATCH 2/7] Removed unnecessary .mjs story indexer
---
.storybook/main.mjs | 12 ------------
1 file changed, 12 deletions(-)
diff --git a/.storybook/main.mjs b/.storybook/main.mjs
index f2e44a3..f21b639 100644
--- a/.storybook/main.mjs
+++ b/.storybook/main.mjs
@@ -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,
};
From b08c9302b28d933a76e14108c313961c844b6a3b Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Fri, 28 Jul 2023 12:38:07 +1000
Subject: [PATCH 3/7] Updated import for webpackFinal
---
.storybook/main.mjs | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/.storybook/main.mjs b/.storybook/main.mjs
index f21b639..341ad3f 100644
--- 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: [
From 73b55aa05cee2c6160f3ceb18cec55bcc795396a Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Fri, 28 Jul 2023 13:56:06 +1000
Subject: [PATCH 4/7] Updated userEvent.paste() usage
---
stories/Props/Format.stories.mjs | 6 ++----
stories/Props/InitialView.stories.mjs | 6 ++----
stories/RequiredProps.stories.mjs | 12 ++++++------
3 files changed, 10 insertions(+), 14 deletions(-)
diff --git a/stories/Props/Format.stories.mjs b/stories/Props/Format.stories.mjs
index ad636f7..53bdb72 100644
--- a/stories/Props/Format.stories.mjs
+++ b/stories/Props/Format.stories.mjs
@@ -33,10 +33,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'
diff --git a/stories/Props/InitialView.stories.mjs b/stories/Props/InitialView.stories.mjs
index b26b9d5..b07978b 100644
--- a/stories/Props/InitialView.stories.mjs
+++ b/stories/Props/InitialView.stories.mjs
@@ -145,10 +145,8 @@ export const Month = {
await step(
'Calendar opens to the previously selected view if input has value',
async () => {
- await userEvent.paste(
- within(canvasElement).getByTestId('field_name'),
- '2000-10-25'
- );
+ await within(canvasElement).getByTestId('field_name').focus();
+ await userEvent.paste('2000-10-25');
await userEvent.click(
within(canvasElement).getByTestId('field_name-Icon')
);
diff --git a/stories/RequiredProps.stories.mjs b/stories/RequiredProps.stories.mjs
index eca6481..e02a94a 100644
--- a/stories/RequiredProps.stories.mjs
+++ b/stories/RequiredProps.stories.mjs
@@ -39,7 +39,8 @@ export const Name = {
await step('Input receives the given [name] as [data-testid]', async () => {
const input = within(canvasElement).getByTestId(args.name);
expect(input.tagName).toBe('INPUT');
- await userEvent.paste(input, todayString);
+ await input.focus();
+ await userEvent.paste(todayString);
});
await step(
@@ -140,10 +141,8 @@ export const OnChange = {
formatValue = {};
await expect(eventValue).toEqual({});
await expect(formatValue).toEqual({});
- await userEvent.paste(
- within(canvasElement).getByTestId('field_name'),
- todayString
- );
+ await within(canvasElement).getByTestId('field_name').focus();
+ await userEvent.paste(todayString);
await step(
'Receives the `event.target.value` in the default [displayFormat] format',
@@ -284,7 +283,8 @@ export const Value = {
'Calendar opens with the pasted [value] date option selected',
async () => {
await userEvent.clear(input);
- await userEvent.paste(input, '25/10/2000');
+ await input.focus();
+ await userEvent.paste('25/10/2000');
expect(input.value).toBe('25/10/2000');
await userEvent.click(
within(canvasElement).getByTestId('field_name-OpenCalendarButton')
From 1175fc6a9af1a7f3646a7f22da2a6ed2ee330b17 Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Fri, 28 Jul 2023 12:44:09 +1000
Subject: [PATCH 5/7] Don't format CSS source
---
stories/Styling/CSSLayout.stories.mjs | 2 ++
stories/Styling/CSSThemes.stories.mjs | 4 ++++
2 files changed, 6 insertions(+)
diff --git a/stories/Styling/CSSLayout.stories.mjs b/stories/Styling/CSSLayout.stories.mjs
index 1476263..1313058 100644
--- a/stories/Styling/CSSLayout.stories.mjs
+++ b/stories/Styling/CSSLayout.stories.mjs
@@ -9,6 +9,7 @@ export default {
export const Import = {
args: {
code: `import '../../layout.css';`,
+ format: false,
},
};
@@ -17,5 +18,6 @@ export const ImportSeparate = {
code: ChildrenExampleRaw.split('\n')
.filter((line) => line.includes('.css') && !line.includes('theme.css'))
.join('\n'),
+ format: false,
},
};
diff --git a/stories/Styling/CSSThemes.stories.mjs b/stories/Styling/CSSThemes.stories.mjs
index 29935f3..26453a2 100644
--- a/stories/Styling/CSSThemes.stories.mjs
+++ b/stories/Styling/CSSThemes.stories.mjs
@@ -10,6 +10,7 @@ export default {
export const CombinedImport = {
args: {
code: `import '../../theme.css';`,
+ format: false,
},
};
@@ -28,6 +29,7 @@ export const CombinedImportThemeToggling = {
})
// Rejoin as multiline string
.join('\n'),
+ format: false,
},
};
@@ -37,6 +39,7 @@ export const SeparateImport = {
`import '../../theme.dark.css';`,
`import '../../theme.light.css';`,
].join('\r\n'),
+ format: false,
},
};
@@ -60,5 +63,6 @@ export const SeparateImportVars = {
})
// Rejoin as multiline string
.join('\n'),
+ format: false,
},
};
From a551932f39ad37852e10650eb1169976d92c3c23 Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Fri, 28 Jul 2023 12:48:42 +1000
Subject: [PATCH 6/7] Spread args on render components
---
stories/Props/As.stories.mjs | 4 ++--
stories/Props/Children.stories.mjs | 2 +-
stories/Props/ClassName.stories.mjs | 2 +-
stories/Props/Disabled.stories.mjs | 3 ++-
stories/Props/DisplayFormat.stories.mjs | 3 ++-
stories/Props/Format.stories.mjs | 3 ++-
stories/Props/HTMLAttributes.stories.mjs | 3 ++-
stories/Props/InitialView.stories.mjs | 3 ++-
stories/Props/Locale.stories.mjs | 3 ++-
stories/Props/Max.stories.mjs | 3 ++-
stories/Props/Min.stories.mjs | 3 ++-
stories/Props/OnValidationMessage.stories.mjs | 3 ++-
stories/Props/Open.stories.mjs | 3 ++-
stories/Props/Ref.stories.mjs | 3 ++-
stories/Props/Required.stories.mjs | 3 ++-
stories/RequiredProps.stories.mjs | 3 ++-
stories/Validation.stories.mjs | 3 ++-
17 files changed, 32 insertions(+), 18 deletions(-)
diff --git a/stories/Props/As.stories.mjs b/stories/Props/As.stories.mjs
index d5ccb09..1ef576d 100644
--- 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) => ,
};
export const AsComponentDateInput = {
@@ -57,7 +57,7 @@ export const AsTagNameImplementation = {
args: {
code: AsTagNameExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const AsTagNameDateInput = {
diff --git a/stories/Props/Children.stories.mjs b/stories/Props/Children.stories.mjs
index 88be9c6..8931752 100644
--- 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) => ,
};
export const AllChildren = {
diff --git a/stories/Props/ClassName.stories.mjs b/stories/Props/ClassName.stories.mjs
index 36f819e..d5c1643 100644
--- 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) => ,
};
export const OuterDiv = {
diff --git a/stories/Props/Disabled.stories.mjs b/stories/Props/Disabled.stories.mjs
index c4a12e8..9892f3d 100644
--- 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) => ,
};
export const UserInteraction = {
diff --git a/stories/Props/DisplayFormat.stories.mjs b/stories/Props/DisplayFormat.stories.mjs
index 4a110d1..c5c7ed3 100644
--- 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) => ,
};
export const MonthYearDay = {
diff --git a/stories/Props/Format.stories.mjs b/stories/Props/Format.stories.mjs
index 53bdb72..7ea6ac7 100644
--- 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) => ,
};
export const FormatValue = {
diff --git a/stories/Props/HTMLAttributes.stories.mjs b/stories/Props/HTMLAttributes.stories.mjs
index a95b8af..730cd68 100644
--- a/stories/Props/HTMLAttributes.stories.mjs
+++ b/stories/Props/HTMLAttributes.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import DateInputWithArgs, {
defaultArgs,
@@ -20,7 +21,7 @@ export const Implementation = {
args: {
code: HTMLAttributesExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const Id = {
diff --git a/stories/Props/InitialView.stories.mjs b/stories/Props/InitialView.stories.mjs
index b07978b..0f33581 100644
--- a/stories/Props/InitialView.stories.mjs
+++ b/stories/Props/InitialView.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import DateInputWithArgs, {
defaultArgs,
@@ -22,7 +23,7 @@ export const Implementation = {
args: {
code: InitialViewExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const Month = {
diff --git a/stories/Props/Locale.stories.mjs b/stories/Props/Locale.stories.mjs
index 12b9886..99b803e 100644
--- a/stories/Props/Locale.stories.mjs
+++ b/stories/Props/Locale.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import faIR from 'date-fns/locale/fa-IR';
import DateInputWithArgs, {
@@ -22,7 +23,7 @@ export const Implementation = {
args: {
code: LocaleExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const Text = {
diff --git a/stories/Props/Max.stories.mjs b/stories/Props/Max.stories.mjs
index 50565d2..7221b6a 100644
--- a/stories/Props/Max.stories.mjs
+++ b/stories/Props/Max.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import addDays from 'date-fns/addDays/index.js';
import format from 'date-fns/format/index.js';
@@ -27,7 +28,7 @@ export const Implementation = {
args: {
code: MaxExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
const max = '2000-10-25';
diff --git a/stories/Props/Min.stories.mjs b/stories/Props/Min.stories.mjs
index d054ff5..5bb983a 100644
--- a/stories/Props/Min.stories.mjs
+++ b/stories/Props/Min.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import format from 'date-fns/format/index.js';
import subDays from 'date-fns/subDays/index.js';
@@ -27,7 +28,7 @@ export const Implementation = {
args: {
code: MinExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
const min = '2000-10-25';
diff --git a/stories/Props/OnValidationMessage.stories.mjs b/stories/Props/OnValidationMessage.stories.mjs
index 1da3d60..723ea77 100644
--- a/stories/Props/OnValidationMessage.stories.mjs
+++ b/stories/Props/OnValidationMessage.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import addDays from 'date-fns/addDays/index.js';
import format from 'date-fns/format/index.js';
@@ -28,7 +29,7 @@ export const Implementation = {
args: {
code: OnValidationMessageExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const OnLoad = {
diff --git a/stories/Props/Open.stories.mjs b/stories/Props/Open.stories.mjs
index a544c93..ca4cecf 100644
--- a/stories/Props/Open.stories.mjs
+++ b/stories/Props/Open.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import format from 'date-fns/format/index.js';
import DateInputWithArgs, {
@@ -25,7 +26,7 @@ export const Implementation = {
args: {
code: OpenExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const NoValue = {
diff --git a/stories/Props/Ref.stories.mjs b/stories/Props/Ref.stories.mjs
index e4adcae..35f4c78 100644
--- a/stories/Props/Ref.stories.mjs
+++ b/stories/Props/Ref.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import RefExample from './Ref.example.mjs';
import RefExampleRaw from './Ref.example.mjs?raw';
@@ -14,5 +15,5 @@ export const Implementation = {
args: {
code: RefExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
diff --git a/stories/Props/Required.stories.mjs b/stories/Props/Required.stories.mjs
index cbb1644..724a038 100644
--- a/stories/Props/Required.stories.mjs
+++ b/stories/Props/Required.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import DateInputWithArgs, {
defaultArgs,
@@ -20,7 +21,7 @@ export const Implementation = {
args: {
code: RequiredExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const Attribute = {
diff --git a/stories/RequiredProps.stories.mjs b/stories/RequiredProps.stories.mjs
index e02a94a..d8ced90 100644
--- a/stories/RequiredProps.stories.mjs
+++ b/stories/RequiredProps.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import format from 'date-fns/format/index.js';
import subDays from 'date-fns/subDays/index.js';
@@ -27,7 +28,7 @@ export const Implementation = {
args: {
code: RequiredPropsExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const Name = {
diff --git a/stories/Validation.stories.mjs b/stories/Validation.stories.mjs
index be0c6e2..9c8ea17 100644
--- a/stories/Validation.stories.mjs
+++ b/stories/Validation.stories.mjs
@@ -1,3 +1,4 @@
+import React from 'react';
import Source from '@idesigncode/storybook-tools/Source.mjs';
import addDays from 'date-fns/addDays/index.js';
import format from 'date-fns/format/index.js';
@@ -27,7 +28,7 @@ export const Implementation = {
args: {
code: ValidationExampleRaw,
},
- render: Source,
+ render: (args) => ,
};
export const TypedValueIsOutsideMaxOrMin = {
From 2e0a73edf34e067d7e412d69b41989a9fd105e0f Mon Sep 17 00:00:00 2001
From: Matthew Nuthall <15828266+idesigncode@users.noreply.github.com>
Date: Fri, 28 Jul 2023 14:00:19 +1000
Subject: [PATCH 7/7] Updated storybook snapshots
---
__snapshots__/props-as.test.js.snap | 4 ----
__snapshots__/props-children.test.js.snap | 2 --
__snapshots__/props-classname.test.js.snap | 2 --
__snapshots__/props-disabled.test.js.snap | 2 --
.../props-displayformat.test.js.snap | 2 --
__snapshots__/props-format.test.js.snap | 2 --
.../props-html-attributes.test.js.snap | 2 --
__snapshots__/props-initialview.test.js.snap | 12 +++++-------
__snapshots__/props-locale.test.js.snap | 2 --
__snapshots__/props-max.test.js.snap | 2 --
__snapshots__/props-min.test.js.snap | 2 --
.../props-onvalidationmessage.test.js.snap | 5 +++--
__snapshots__/props-open.test.js.snap | 2 --
__snapshots__/props-ref.test.js.snap | 2 --
__snapshots__/props-required.test.js.snap | 2 --
__snapshots__/required-props.test.js.snap | 2 --
...themes--combined-import-theme-toggling.png | Bin 45732 -> 45658 bytes
__snapshots__/styling-css-themes.test.js.snap | 10 ----------
__snapshots__/validation.test.js.snap | 2 --
19 files changed, 8 insertions(+), 51 deletions(-)
diff --git a/__snapshots__/props-as.test.js.snap b/__snapshots__/props-as.test.js.snap
index d2ceaa1..56780d1 100644
--- 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`] = `
;
-
-