diff --git a/assets/js/editor-components/error-placeholder/error-message.js b/assets/js/editor-components/error-placeholder/error-message.tsx similarity index 66% rename from assets/js/editor-components/error-placeholder/error-message.js rename to assets/js/editor-components/error-placeholder/error-message.tsx index 2b0c5d0ab54..2f0c113a183 100644 --- a/assets/js/editor-components/error-placeholder/error-message.js +++ b/assets/js/editor-components/error-placeholder/error-message.tsx @@ -2,10 +2,21 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import PropTypes from 'prop-types'; import { escapeHTML } from '@wordpress/escape-html'; -const getErrorMessage = ( { message, type } ) => { +/** + * Internal dependencies + */ +import { ErrorObject } from '.'; + +export interface ErrorMessageProps { + /** + * The error object. + */ + error: ErrorObject; +} + +const getErrorMessage = ( { message, type }: ErrorObject ) => { if ( ! message ) { return __( 'An unknown error occurred which prevented the block from being updated.', @@ -42,24 +53,8 @@ const getErrorMessage = ( { message, type } ) => { return message; }; -const ErrorMessage = ( { error } ) => ( +const ErrorMessage = ( { error }: ErrorMessageProps ): JSX.Element => (
{ getErrorMessage( error ) }
); -ErrorMessage.propTypes = { - /** - * The error object. - */ - error: PropTypes.shape( { - /** - * Human-readable error message to display. - */ - message: PropTypes.node, - /** - * Context in which the error was triggered. That will determine how the error is displayed to the user. - */ - type: PropTypes.oneOf( [ 'api', 'general' ] ), - } ), -}; - export default ErrorMessage; diff --git a/assets/js/editor-components/error-placeholder/index.js b/assets/js/editor-components/error-placeholder/index.tsx similarity index 65% rename from assets/js/editor-components/error-placeholder/index.js rename to assets/js/editor-components/error-placeholder/index.tsx index dc630caae7c..ba834e29e66 100644 --- a/assets/js/editor-components/error-placeholder/index.js +++ b/assets/js/editor-components/error-placeholder/index.tsx @@ -2,7 +2,6 @@ * External dependencies */ import { __ } from '@wordpress/i18n'; -import PropTypes from 'prop-types'; import { Icon, notice } from '@woocommerce/icons'; import classNames from 'classnames'; import { Button, Placeholder, Spinner } from '@wordpress/components'; @@ -10,10 +9,46 @@ import { Button, Placeholder, Spinner } from '@wordpress/components'; /** * Internal dependencies */ -import ErrorMessage from './error-message.js'; +import ErrorMessage from './error-message'; import './editor.scss'; -const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => ( +export interface ErrorObject { + /** + * Human-readable error message to display. + */ + message: string; + /** + * Context in which the error was triggered. That will determine how the error is displayed to the user. + */ + type: 'api' | 'general'; +} + +export interface ErrorPlaceholderProps { + /** + * Classname to add to placeholder in addition to the defaults. + */ + className?: string; + /** + * The error object. + */ + error: ErrorObject; + /** + * Whether there is a request running, so the 'Retry' button is hidden and + * a spinner is shown instead. + */ + isLoading: boolean; + /** + * Callback to retry an action. + */ + onRetry?: () => void; +} + +const ErrorPlaceholder = ( { + className, + error, + isLoading = false, + onRetry, +}: ErrorPlaceholderProps ): JSX.Element => ( } label={ __( @@ -37,33 +72,4 @@ const ErrorPlaceholder = ( { className, error, isLoading, onRetry } ) => ( ); -ErrorPlaceholder.propTypes = { - /** - * Classname to add to placeholder in addition to the defaults. - */ - className: PropTypes.string, - /** - * The error object. - */ - error: PropTypes.shape( { - /** - * Human-readable error message to display. - */ - message: PropTypes.node, - /** - * Context in which the error was triggered. That will determine how the error is displayed to the user. - */ - type: PropTypes.oneOf( [ 'api', 'general' ] ), - } ), - /** - * Whether there is a request running, so the 'Retry' button is hidden and - * a spinner is shown instead. - */ - isLoading: PropTypes.bool, - /** - * Callback to retry an action. - */ - onRetry: PropTypes.func, -}; - export default ErrorPlaceholder; 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/assets/js/editor-components/product-attribute-term-control/index.js b/assets/js/editor-components/product-attribute-term-control/index.js index 04440ae8458..9a50f310e85 100644 --- a/assets/js/editor-components/product-attribute-term-control/index.js +++ b/assets/js/editor-components/product-attribute-term-control/index.js @@ -7,7 +7,7 @@ import { SearchListControl, SearchListItem } from '@woocommerce/components'; import { SelectControl } from '@wordpress/components'; import { withInstanceId } from '@wordpress/compose'; import { withAttributes } from '@woocommerce/block-hocs'; -import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message.js'; +import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message'; import classNames from 'classnames'; import ExpandableSearchListItem from '@woocommerce/editor-components/expandable-search-list-item/expandable-search-list-item.tsx'; diff --git a/assets/js/editor-components/product-category-control/index.js b/assets/js/editor-components/product-category-control/index.js index 9842d3bb437..35c453c262e 100644 --- a/assets/js/editor-components/product-category-control/index.js +++ b/assets/js/editor-components/product-category-control/index.js @@ -6,7 +6,7 @@ import PropTypes from 'prop-types'; import { SearchListControl, SearchListItem } from '@woocommerce/components'; import { SelectControl } from '@wordpress/components'; import { withCategories } from '@woocommerce/block-hocs'; -import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message.js'; +import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message'; import classNames from 'classnames'; /** diff --git a/assets/js/editor-components/product-control/index.js b/assets/js/editor-components/product-control/index.js index cd8269cc23b..e86c4520ea4 100644 --- a/assets/js/editor-components/product-control/index.js +++ b/assets/js/editor-components/product-control/index.js @@ -11,7 +11,7 @@ import { withSearchedProducts, withTransformSingleSelectToMultipleSelect, } from '@woocommerce/block-hocs'; -import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message.js'; +import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message'; import classNames from 'classnames'; import ExpandableSearchListItem from '@woocommerce/editor-components/expandable-search-list-item/expandable-search-list-item.tsx'; diff --git a/assets/js/editor-components/products-control/index.js b/assets/js/editor-components/products-control/index.js index 3c4d09ed955..ff5c8d657bb 100644 --- a/assets/js/editor-components/products-control/index.js +++ b/assets/js/editor-components/products-control/index.js @@ -5,7 +5,7 @@ import { __, _n, sprintf } from '@wordpress/i18n'; import { SearchListControl } from '@woocommerce/components'; import PropTypes from 'prop-types'; import { withSearchedProducts } from '@woocommerce/block-hocs'; -import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message.js'; +import ErrorMessage from '@woocommerce/editor-components/error-placeholder/error-message'; /** * The products control exposes a custom selector for searching and selecting 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",