From dba384e09a92b2fbdeaa69a34df29b73103371b7 Mon Sep 17 00:00:00 2001 From: Lucio Giannotta Date: Wed, 1 Dec 2021 02:57:34 +0100 Subject: [PATCH] Add stories for `ErrorPlaceholder` and `ErrorMessage` (#5249) Stories include: * Default generic error * API error * Unknown error * Error without possibility to retry * Base Error atom Where applicable, the **Retry** button will not only trigger the appropriate action, but also simulate the loading state of the error component. --- .../stories/error-message.tsx | 27 ++ .../stories/error-placeholder.tsx | 70 ++++ .../error-placeholder/stories/index.js | 19 - package-lock.json | 340 +++++++++++++++++- package.json | 1 + 5 files changed, 429 insertions(+), 28 deletions(-) create mode 100644 assets/js/editor-components/error-placeholder/stories/error-message.tsx create mode 100644 assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx delete mode 100644 assets/js/editor-components/error-placeholder/stories/index.js diff --git a/assets/js/editor-components/error-placeholder/stories/error-message.tsx b/assets/js/editor-components/error-placeholder/stories/error-message.tsx new file mode 100644 index 00000000000..987413f7887 --- /dev/null +++ b/assets/js/editor-components/error-placeholder/stories/error-message.tsx @@ -0,0 +1,27 @@ +/** + * External dependencies + */ +import { Story, Meta } from '@storybook/react'; + +/** + * Internal dependencies + */ +import ErrorMessage, { ErrorMessageProps } from '../error-message'; + +export default { + title: 'WooCommerce Blocks/editor-components/Errors/Base Error Atom', + component: ErrorMessage, +} as Meta< ErrorMessageProps >; + +const Template: Story< ErrorMessageProps > = ( args ) => ( + +); + +export const BaseErrorAtom = Template.bind( {} ); +BaseErrorAtom.args = { + error: { + message: + 'A very generic and unhelpful error. Please try again later. Or contact support. Or not.', + type: 'general', + }, +}; diff --git a/assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx b/assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx new file mode 100644 index 00000000000..fb5483eb88a --- /dev/null +++ b/assets/js/editor-components/error-placeholder/stories/error-placeholder.tsx @@ -0,0 +1,70 @@ +/** + * External dependencies + */ +import { Story, Meta } from '@storybook/react'; +import { useArgs } from '@storybook/client-api'; + +/** + * Internal dependencies + */ +import ErrorPlaceholder, { ErrorPlaceholderProps } from '..'; + +export default { + title: 'WooCommerce Blocks/editor-components/Errors', + component: ErrorPlaceholder, +} as Meta< ErrorPlaceholderProps >; + +const Template: Story< ErrorPlaceholderProps > = ( args ) => { + const [ { isLoading }, setArgs ] = useArgs(); + + const onRetry = args.onRetry + ? () => { + setArgs( { isLoading: true } ); + + setTimeout( () => setArgs( { isLoading: false } ), 3500 ); + } + : undefined; + + return ( + + ); +}; + +export const Default = Template.bind( {} ); +Default.args = { + error: { + message: + 'A very generic and unhelpful error. Please try again later. Or contact support. Or not.', + type: 'general', + }, +}; + +export const APIError = Template.bind( {} ); +APIError.args = { + error: { + message: 'Server refuses to comply. It is a teapot.', + type: 'api', + }, +}; + +export const UnknownError = Template.bind( {} ); +UnknownError.args = { + error: { + message: '', + type: 'general', + }, +}; + +export const NoRetry: Story< ErrorPlaceholderProps > = ( args ) => { + return ; +}; +NoRetry.args = { + error: { + message: '', + type: 'general', + }, +}; diff --git a/assets/js/editor-components/error-placeholder/stories/index.js b/assets/js/editor-components/error-placeholder/stories/index.js deleted file mode 100644 index a0e578470e0..00000000000 --- a/assets/js/editor-components/error-placeholder/stories/index.js +++ /dev/null @@ -1,19 +0,0 @@ -/** - * Internal dependencies - */ -import ErrorPlaceholder from '../'; - -export default { - title: 'WooCommerce Blocks/editor-components/ErrorPlaceholder', - component: ErrorPlaceholder, -}; - -export const Default = () => ( - -); diff --git a/package-lock.json b/package-lock.json index 55116013c4d..b6a041482e0 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6824,6 +6824,34 @@ } } }, + "@storybook/client-api": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.4.0.tgz", + "integrity": "sha512-Z0vzJAJpHhkDBA+gSO6ZlFNim/UJnVSC8Wjtogin20NSy8ZsSrilxjrCG1vVpONNqXZXNYgptoGZU3Hr51/JUA==", + "dev": true, + "requires": { + "@storybook/addons": "6.4.0", + "@storybook/channel-postmessage": "6.4.0", + "@storybook/channels": "6.4.0", + "@storybook/client-logger": "6.4.0", + "@storybook/core-events": "6.4.0", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/store": "6.4.0", + "@types/qs": "^6.9.5", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, "@storybook/semver": { "version": "7.3.2", "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", @@ -7016,6 +7044,15 @@ "integrity": "sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==", "dev": true }, + "qs": { + "version": "6.10.1", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz", + "integrity": "sha512-M528Hph6wsSVOBiYUnGf+K/7w0hNshs/duGsNXPUCLH5XAqjEtiPGwNONLV0tBH8NoGb0mvD5JubnUTrujKDTg==", + "dev": true, + "requires": { + "side-channel": "^1.0.4" + } + }, "randombytes": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz", @@ -7161,18 +7198,18 @@ } }, "@storybook/client-api": { - "version": "6.4.0", - "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.4.0.tgz", - "integrity": "sha512-Z0vzJAJpHhkDBA+gSO6ZlFNim/UJnVSC8Wjtogin20NSy8ZsSrilxjrCG1vVpONNqXZXNYgptoGZU3Hr51/JUA==", + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.4.1.tgz", + "integrity": "sha512-qpvTB5hQgx2S4F8GjBTPlB2PHwZvdyzZfF+7LxPLgM4jlK4oBUAMGhJQGQO8UOlun5QUHcZUoe4dVaMVDnq6Kw==", "dev": true, "requires": { - "@storybook/addons": "6.4.0", - "@storybook/channel-postmessage": "6.4.0", - "@storybook/channels": "6.4.0", - "@storybook/client-logger": "6.4.0", - "@storybook/core-events": "6.4.0", + "@storybook/addons": "6.4.1", + "@storybook/channel-postmessage": "6.4.1", + "@storybook/channels": "6.4.1", + "@storybook/client-logger": "6.4.1", + "@storybook/core-events": "6.4.1", "@storybook/csf": "0.0.2--canary.87bc651.0", - "@storybook/store": "6.4.0", + "@storybook/store": "6.4.1", "@types/qs": "^6.9.5", "@types/webpack-env": "^1.16.0", "core-js": "^3.8.2", @@ -7188,6 +7225,210 @@ "util-deprecate": "^1.0.2" }, "dependencies": { + "@storybook/addons": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/addons/-/addons-6.4.1.tgz", + "integrity": "sha512-gTCOuQnkqh0Wr39G4jZ79lqDc/U6cQX2wNKOfOsQN4hMKKn0lzn14GQ03jwie1+3Y1Fe/Q2P348Y9o0zms/z+w==", + "dev": true, + "requires": { + "@storybook/api": "6.4.1", + "@storybook/channels": "6.4.1", + "@storybook/client-logger": "6.4.1", + "@storybook/core-events": "6.4.1", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/router": "6.4.1", + "@storybook/theming": "6.4.1", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "global": "^4.4.0", + "regenerator-runtime": "^0.13.7" + } + }, + "@storybook/api": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/api/-/api-6.4.1.tgz", + "integrity": "sha512-P0upcA1s8GyVh+XhrzJPcHQqKd6/9+AcD/4WlIaxqbssh3/1mBD/yk+zjGgYhI+hYuS7ATW8XnSzp1IO0nQ34Q==", + "dev": true, + "requires": { + "@storybook/channels": "6.4.1", + "@storybook/client-logger": "6.4.1", + "@storybook/core-events": "6.4.1", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/router": "6.4.1", + "@storybook/semver": "^7.3.2", + "@storybook/theming": "6.4.1", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "telejson": "^5.3.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/channel-postmessage": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.4.1.tgz", + "integrity": "sha512-4wRCBh7qRoVkFeVaN0eXy6qfE/6S5FYHGj49j1Lm58n+4HSDXVQcqEnSBAQ+d9z9bzJgRm4awG33tVo8YKXUiA==", + "dev": true, + "requires": { + "@storybook/channels": "6.4.1", + "@storybook/client-logger": "6.4.1", + "@storybook/core-events": "6.4.1", + "core-js": "^3.8.2", + "global": "^4.4.0", + "qs": "^6.10.0", + "telejson": "^5.3.2" + } + }, + "@storybook/channels": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-6.4.1.tgz", + "integrity": "sha512-yqfHnOzdFUnuV174h1kszsN3FFT1C+GVwjsQOrvt6xjURJoKezYkWZ7DOwfdeFUpKxjBHiE4GRpXZVWkjiTjxA==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/client-logger": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.4.1.tgz", + "integrity": "sha512-gh3piwPdLE//M5VAGMnrVnA1nBwyyesXvpM21yVC1oSwKgO1yJ/4sedxujtpwqiTHtSWO2VnpHooD/vqhijrGQ==", + "dev": true, + "requires": { + "core-js": "^3.8.2", + "global": "^4.4.0" + } + }, + "@storybook/core-events": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.4.1.tgz", + "integrity": "sha512-Wanog3bSXiQSaPecw69sdUy5C4Fid0U8LTf8eGCxNjPxUTfMwD2wfhDdbtiWFFVCfjsGlRTSpR6+hK9nOLy8vg==", + "dev": true, + "requires": { + "core-js": "^3.8.2" + } + }, + "@storybook/router": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-6.4.1.tgz", + "integrity": "sha512-T2WqbSFyrfd7VUnCLEqXsJ4jZA7HJmDAxdtNORYmHlibP9dIpe0Hk2/RhvA3U5rFrHKYa/EXcMuuxUhLj+3Iyw==", + "dev": true, + "requires": { + "@storybook/client-logger": "6.4.1", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "history": "5.0.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "react-router": "^6.0.0", + "react-router-dom": "^6.0.0", + "ts-dedent": "^2.0.0" + } + }, + "@storybook/semver": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/semver/-/semver-7.3.2.tgz", + "integrity": "sha512-SWeszlsiPsMI0Ps0jVNtH64cI5c0UF3f7KgjVKJoNP30crQ6wUSddY2hsdeczZXEKVJGEn50Q60flcGsQGIcrg==", + "dev": true, + "requires": { + "core-js": "^3.6.5", + "find-up": "^4.1.0" + } + }, + "@storybook/store": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/store/-/store-6.4.1.tgz", + "integrity": "sha512-Dv3By8zwqeHlhI10tNBxRwJKbYnCCULllarKEjZAuA7hap+tPzMDK4v6X+24IkvC63M2aaeqgZFXxHyEhBFzdw==", + "dev": true, + "requires": { + "@storybook/addons": "6.4.1", + "@storybook/client-logger": "6.4.1", + "@storybook/core-events": "6.4.1", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "regenerator-runtime": "^0.13.7", + "slash": "^3.0.0", + "stable": "^0.1.8", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, + "@storybook/theming": { + "version": "6.4.1", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.4.1.tgz", + "integrity": "sha512-950JtDwBB9MjdBVwoapdoY00jaLrrpdI5eXBy2XvQFMJQpsbSoS1cSpuqTH8mPoA4ZEXt5d8fqd+AZEFe2fAOw==", + "dev": true, + "requires": { + "@emotion/core": "^10.1.1", + "@emotion/is-prop-valid": "^0.8.6", + "@emotion/styled": "^10.0.27", + "@storybook/client-logger": "6.4.1", + "core-js": "^3.8.2", + "deep-object-diff": "^1.1.0", + "emotion-theming": "^10.0.27", + "global": "^4.4.0", + "memoizerific": "^1.11.3", + "polished": "^4.0.5", + "resolve-from": "^5.0.0", + "ts-dedent": "^2.0.0" + } + }, + "find-up": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz", + "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==", + "dev": true, + "requires": { + "locate-path": "^5.0.0", + "path-exists": "^4.0.0" + } + }, + "history": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.0.0.tgz", + "integrity": "sha512-3NyRMKIiFSJmIPdq7FxkNMJkQ7ZEtVblOQ38VtKaA0zZMW1Eo6Q6W8oDKEflr1kNNTItSnk4JMCO1deeSgbLLg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.7.6" + } + }, + "locate-path": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz", + "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==", + "dev": true, + "requires": { + "p-locate": "^4.1.0" + } + }, + "p-locate": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz", + "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==", + "dev": true, + "requires": { + "p-limit": "^2.2.0" + } + }, + "path-exists": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz", + "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==", + "dev": true + }, "qs": { "version": "6.10.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz", @@ -7196,6 +7437,59 @@ "requires": { "side-channel": "^1.0.4" } + }, + "react-router": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.0.2.tgz", + "integrity": "sha512-8/Wm3Ed8t7TuedXjAvV39+c8j0vwrI5qVsYqjFr5WkJjsJpEvNSoLRUbtqSEYzqaTUj1IV+sbPJxvO+accvU0Q==", + "dev": true, + "requires": { + "history": "^5.1.0" + }, + "dependencies": { + "history": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz", + "integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.7.6" + } + } + } + }, + "react-router-dom": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.0.2.tgz", + "integrity": "sha512-cOpJ4B6raFutr0EG8O/M2fEoyQmwvZWomf1c6W2YXBZuFBx8oTk/zqjXghwScyhfrtnt0lANXV2182NQblRxFA==", + "dev": true, + "requires": { + "history": "^5.1.0", + "react-router": "6.0.2" + }, + "dependencies": { + "history": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/history/-/history-5.1.0.tgz", + "integrity": "sha512-zPuQgPacm2vH2xdORvGGz1wQMuHSIB56yNAy5FnLuwOwgSYyPKptJtcMm6Ev+hRGeS+GzhbmRacHzvlESbFwDg==", + "dev": true, + "requires": { + "@babel/runtime": "^7.7.6" + } + } + } + }, + "resolve-from": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", + "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", + "dev": true + }, + "slash": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz", + "integrity": "sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==", + "dev": true } } }, @@ -7296,6 +7590,34 @@ "util-deprecate": "^1.0.2" }, "dependencies": { + "@storybook/client-api": { + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.4.0.tgz", + "integrity": "sha512-Z0vzJAJpHhkDBA+gSO6ZlFNim/UJnVSC8Wjtogin20NSy8ZsSrilxjrCG1vVpONNqXZXNYgptoGZU3Hr51/JUA==", + "dev": true, + "requires": { + "@storybook/addons": "6.4.0", + "@storybook/channel-postmessage": "6.4.0", + "@storybook/channels": "6.4.0", + "@storybook/client-logger": "6.4.0", + "@storybook/core-events": "6.4.0", + "@storybook/csf": "0.0.2--canary.87bc651.0", + "@storybook/store": "6.4.0", + "@types/qs": "^6.9.5", + "@types/webpack-env": "^1.16.0", + "core-js": "^3.8.2", + "fast-deep-equal": "^3.1.3", + "global": "^4.4.0", + "lodash": "^4.17.20", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "regenerator-runtime": "^0.13.7", + "store2": "^2.12.0", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + } + }, "qs": { "version": "6.10.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.10.1.tgz", diff --git a/package.json b/package.json index 50abdec022f..d66c2c9fe34 100644 --- a/package.json +++ b/package.json @@ -90,6 +90,7 @@ "@storybook/addon-links": "^6.4.0", "@storybook/addon-storysource": "^6.4.0", "@storybook/addons": "^6.4.0", + "@storybook/client-api": "^6.4.1", "@storybook/react": "^6.4.0", "@testing-library/jest-dom": "5.14.1", "@testing-library/react": "11.2.7",