diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx index 1480df5736d..a4b558417d1 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx @@ -76,12 +76,23 @@ export const selectIndustryMapping = { 'woocommerce' ), }; + +export type BusinessInfoContextProps = Pick< + CoreProfilerStateMachineContext, + 'geolocatedLocation' | 'userProfile' | 'businessInfo' | 'countries' +> & { + onboardingProfile: Pick< + CoreProfilerStateMachineContext[ 'onboardingProfile' ], + 'industry' | 'business_choice' | 'is_store_country_set' + >; +}; + export const BusinessInfo = ( { context, navigationProgress, sendEvent, }: { - context: CoreProfilerStateMachineContext; + context: BusinessInfoContextProps; navigationProgress: number; sendEvent: ( event: BusinessInfoEvent ) => void; } ) => { diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessLocation.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessLocation.tsx index 229f28be3f2..57c03dec43f 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/BusinessLocation.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/BusinessLocation.tsx @@ -24,7 +24,7 @@ export const BusinessLocation = ( { }: { sendEvent: ( event: BusinessLocationEvent ) => void; navigationProgress: number; - context: CoreProfilerStateMachineContext; + context: Pick< CoreProfilerStateMachineContext, 'countries' >; } ) => { const [ storeCountry, setStoreCountry ] = useState< CountryStateOption >( { key: '', diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/IntroOptIn.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/IntroOptIn.tsx index b70540ad706..bb9a4a9202f 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/IntroOptIn.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/IntroOptIn.tsx @@ -10,7 +10,7 @@ import { Link } from '@woocommerce/components'; /** * Internal dependencies */ -import { IntroOptInEvent, CoreProfilerStateMachineContext } from '../index'; +import { IntroOptInEvent } from '../index'; import { Heading } from '../components/heading/heading'; import { Navigation } from '../components/navigation/navigation'; @@ -20,7 +20,6 @@ export const IntroOptIn = ( { }: { sendEvent: ( event: IntroOptInEvent ) => void; navigationProgress: number; - context: CoreProfilerStateMachineContext; } ) => { const [ iOptInDataSharing, setIsOptInDataSharing ] = useState< boolean >( true ); diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/Loader.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/Loader.tsx index 27f67042e41..312869fd3fd 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/Loader.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/Loader.tsx @@ -22,12 +22,12 @@ export type Stage = { }; export type Stages = Array< Stage >; +export type LoaderContextProps = Pick< + CoreProfilerStateMachineContext, + 'loader' +>; -export const Loader = ( { - context, -}: { - context: CoreProfilerStateMachineContext; -} ) => { +export const Loader = ( { context }: { context: LoaderContextProps } ) => { const stages = getLoaderStageMeta( context.loader.useStages ?? 'default' ); const currentStage = stages[ context.loader.stageIndex ?? 0 ]; const [ currentParagraph, setCurrentParagraph ] = useState( 0 ); diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx index fee3ca8df2c..375beafae8d 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx @@ -37,7 +37,10 @@ export const Plugins = ( { navigationProgress, sendEvent, }: { - context: CoreProfilerStateMachineContext; + context: Pick< + CoreProfilerStateMachineContext, + 'pluginsAvailable' | 'pluginsInstallationErrors' | 'pluginsSelected' + >; sendEvent: ( payload: | PluginsInstallationRequestedEvent diff --git a/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx b/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx index 74c3131a758..b1a161e049d 100644 --- a/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx +++ b/plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx @@ -125,7 +125,7 @@ export const UserProfile = ( { }: { sendEvent: ( event: UserProfileEvent ) => void; navigationProgress: number; - context: CoreProfilerStateMachineContext; + context: Pick< CoreProfilerStateMachineContext, 'userProfile' >; } ) => { const [ businessChoice, setBusinessChoice ] = useState< BusinessChoice >( context.userProfile.businessChoice || 'im_just_starting_my_business' diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.tsx new file mode 100644 index 00000000000..47a0ef24ade --- /dev/null +++ b/plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.tsx @@ -0,0 +1,43 @@ +/** + * Internal dependencies + */ +import { BusinessInfo } from '../pages/BusinessInfo'; + +import '../style.scss'; +import { WithSetupWizardLayout } from './WithSetupWizardLayout'; + +export const Basic = () => ( + {} } + navigationProgress={ 60 } + context={ { + geolocatedLocation: { + latitude: '-37.83961', + longitude: '144.94228', + country_short: 'AU', + country_long: 'Australia', + region: 'Victoria', + city: 'Port Melbourne', + }, + userProfile: {}, + businessInfo: {}, + countries: [ + { + key: 'US', + label: 'United States', + }, + ], + onboardingProfile: { + is_store_country_set: false, + industry: [ 'clothing_and_accessories' ], + business_choice: 'im_just_starting_my_business', + }, + } } + /> +); + +export default { + title: 'WooCommerce Admin/Application/Core Profiler/Business Info', + component: BusinessInfo, + decorators: [ WithSetupWizardLayout ], +}; diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.tsx new file mode 100644 index 00000000000..13ba3ab3287 --- /dev/null +++ b/plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.tsx @@ -0,0 +1,28 @@ +/** + * Internal dependencies + */ +import { BusinessLocation } from '../pages/BusinessLocation'; + +import '../style.scss'; +import { WithSetupWizardLayout } from './WithSetupWizardLayout'; + +export const Basic = () => ( + {} } + navigationProgress={ 80 } + context={ { + countries: [ + { + key: 'US', + label: 'United States', + }, + ], + } } + /> +); + +export default { + title: 'WooCommerce Admin/Application/Core Profiler/Business Location', + component: BusinessLocation, + decorators: [ WithSetupWizardLayout ], +}; diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.tsx new file mode 100644 index 00000000000..058617e7599 --- /dev/null +++ b/plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.tsx @@ -0,0 +1,17 @@ +/** + * Internal dependencies + */ +import { IntroOptIn } from '../pages/IntroOptIn'; + +import '../style.scss'; +import { WithSetupWizardLayout } from './WithSetupWizardLayout'; + +export const Basic = () => ( + {} } navigationProgress={ 20 } /> +); + +export default { + title: 'WooCommerce Admin/Application/Core Profiler/IntroOptIn', + component: IntroOptIn, + decorators: [ WithSetupWizardLayout ], +}; diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/Loader.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/Loader.tsx new file mode 100644 index 00000000000..d12fb02adec --- /dev/null +++ b/plugins/woocommerce-admin/client/core-profiler/stories/Loader.tsx @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import { Loader } from '../pages/Loader'; +import { WithSetupWizardLayout } from './WithSetupWizardLayout'; + +import '../style.scss'; + +export const Short = () => ( + +); + +export const Plugins = () => ( + +); + +export default { + title: 'WooCommerce Admin/Application/Core Profiler/Loader', + component: Loader, + decorators: [ WithSetupWizardLayout ], +}; diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/Plugins.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/Plugins.tsx new file mode 100644 index 00000000000..af2b773f85f --- /dev/null +++ b/plugins/woocommerce-admin/client/core-profiler/stories/Plugins.tsx @@ -0,0 +1,67 @@ +/** + * Internal dependencies + */ +import { Plugins } from '../pages/Plugins'; + +import '../style.scss'; +import { WithSetupWizardLayout } from './WithSetupWizardLayout'; + +/*** + * This story isn't working because of some issue when importing @automattic/interpolate-components + * Should probably figure it out. + */ + +const plugins = [ + { + name: 'Jetpack', + description: + 'Get auto real-time backups, malware scans, and spam protection.', + is_visible: true, + is_built_by_wc: false, + min_wp_version: '6.0', + key: 'jetpack', + label: 'Enhance security with Jetpack', + image_url: + 'https://woocommerce.com/wp-content/plugins/wccom-plugins/obw-free-extensions/images/core-profiler/logo-jetpack.svg', + learn_more_link: 'https://woocommerce.com/products/jetpack', + install_priority: 8, + is_installed: true, + is_activated: true, + manage_url: '', + }, + { + name: 'Pinterest for WooCommerce', + description: 'Get your products in front of a highly engaged audience.', + image_url: + 'https://woocommerce.com/wp-content/plugins/wccom-plugins/obw-free-extensions/images/core-profiler/logo-pinterest.svg', + manage_url: 'admin.php?page=wc-admin&path=%2Fpinterest%2Flanding', + is_built_by_wc: true, + min_php_version: '7.3', + key: 'pinterest-for-woocommerce', + label: 'Showcase your products with Pinterest', + learn_more_link: + 'https://woocommerce.com/products/pinterest-for-woocommerce', + install_priority: 2, + is_visible: true, + is_installed: false, + is_activated: false, + }, +]; + +export const Basic = () => ( + {} } + navigationProgress={ 80 } + context={ { + pluginsAvailable: plugins, + pluginsSelected: [], + pluginsInstallationErrors: [], + } } + /> +); + +export default { + title: 'WooCommerce Admin/Application/Core Profiler/Plugins', + component: Plugins, + decorators: [ WithSetupWizardLayout ], +}; diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.tsx new file mode 100644 index 00000000000..a1e79d9b778 --- /dev/null +++ b/plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.tsx @@ -0,0 +1,23 @@ +/** + * Internal dependencies + */ +import { UserProfile } from '../pages/UserProfile'; + +import '../style.scss'; +import { WithSetupWizardLayout } from './WithSetupWizardLayout'; + +export const Basic = () => ( + {} } + navigationProgress={ 40 } + context={ { + userProfile: {}, + } } + /> +); + +export default { + title: 'WooCommerce Admin/Application/Core Profiler/User Profile', + component: UserProfile, + decorators: [ WithSetupWizardLayout ], +}; diff --git a/plugins/woocommerce-admin/client/core-profiler/stories/WithSetupWizardLayout.tsx b/plugins/woocommerce-admin/client/core-profiler/stories/WithSetupWizardLayout.tsx new file mode 100644 index 00000000000..cf8c13d7aa1 --- /dev/null +++ b/plugins/woocommerce-admin/client/core-profiler/stories/WithSetupWizardLayout.tsx @@ -0,0 +1,7 @@ +export const WithSetupWizardLayout = ( Story: React.ComponentType ) => { + return ( +
+ +
+ ); +}; diff --git a/plugins/woocommerce-admin/client/core-profiler/style.scss b/plugins/woocommerce-admin/client/core-profiler/style.scss index 43250a5e1bc..85de10bc0f8 100644 --- a/plugins/woocommerce-admin/client/core-profiler/style.scss +++ b/plugins/woocommerce-admin/client/core-profiler/style.scss @@ -275,13 +275,11 @@ // Loader page .woocommerce-profiler-loader { - width: 100%; - height: 100%; + min-height: 100vh; display: flex; justify-content: center; align-items: center; flex-direction: column; - position: absolute; @include breakpoint( '<782px' ) { padding: 0 20px; } diff --git a/plugins/woocommerce/changelog/dev-core-profiler-storybook b/plugins/woocommerce/changelog/dev-core-profiler-storybook new file mode 100644 index 00000000000..696c481d4f2 --- /dev/null +++ b/plugins/woocommerce/changelog/dev-core-profiler-storybook @@ -0,0 +1,4 @@ +Significance: patch +Type: dev + +Added storybook for core profiler pages diff --git a/tools/storybook/.storybook/main.js b/tools/storybook/.storybook/main.js index fa574a5461d..a71adf9ea84 100644 --- a/tools/storybook/.storybook/main.js +++ b/tools/storybook/.storybook/main.js @@ -9,7 +9,7 @@ module.exports = { '../../../packages/js/components/src/**/stories/*.@(js|tsx)', // WooCommerce Admin / @woocommerce/experimental components '../../../packages/js/experimental/src/**/stories/*.@(js|tsx)', - '../../../plugins/woocommerce-admin/client/**/stories/*.js', + '../../../plugins/woocommerce-admin/client/**/stories/*.@(js|tsx)', ], addons: [ '@storybook/addon-docs', @@ -27,6 +27,13 @@ module.exports = { reactDocgen: 'react-docgen-typescript', }, + staticDirs: [ + { + from: '../../../plugins/woocommerce-admin/client', + to: 'main/plugins/woocommerce-admin/client', + }, + ], + webpackFinal: webpackOverride, previewHead: ( head ) => ` @@ -37,10 +44,12 @@ module.exports = { ? ` + ` : ` + ` } @@ -52,4 +61,10 @@ module.exports = { } `, + previewBody: ( body ) => ` +
+
+ ${ body } + + `, }; diff --git a/tools/storybook/package.json b/tools/storybook/package.json index c60e4f48c34..c42507c3e56 100644 --- a/tools/storybook/package.json +++ b/tools/storybook/package.json @@ -20,7 +20,8 @@ "scripts": { "build-storybook": "build-storybook -c ./.storybook", "preinstall": "npx only-allow pnpm", - "storybook": "./import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./.storybook -p 6007 --ci", + "build-woocommerce": "pnpm --filter=woocommerce run build", + "storybook": "pnpm run build-woocommerce && ./import-wp-css-storybook.sh && BABEL_ENV=storybook STORYBOOK=true start-storybook -c ./.storybook -p 6007 --ci", "storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook" }, "devDependencies": { diff --git a/tools/storybook/preview.js b/tools/storybook/preview.js deleted file mode 100644 index 46287e47628..00000000000 --- a/tools/storybook/preview.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * External dependencies - */ -import { createElement } from '@wordpress/element'; - -/** - * Internal dependencies - */ - -import './wordpress/css/common.min.css'; -import './wordpress/css/forms.min.css'; -import './wordpress/css/admin-menu.min.css'; -import './wordpress/css/dashboard.min.css'; -import './wordpress/css/list-tables.min.css'; -import './wordpress/css/edit.min.css'; -import './wordpress/css/revisions.min.css'; -import './wordpress/css/media.min.css'; -import './wordpress/css/themes.min.css'; -import './wordpress/css/about.min.css'; -import './wordpress/css/nav-menus.min.css'; -import './wordpress/css/widgets.min.css'; -import './wordpress/css/site-icon.min.css'; -import './wordpress/css/l10n.min.css'; -import './wordpress/css/site-health.min.css'; - -export const decorators = [ - ( Story ) => ( -
-
- -
-
- ), -]; diff --git a/tools/storybook/setting.mock.js b/tools/storybook/setting.mock.js index 3633f69ae1c..e5560ac5133 100644 --- a/tools/storybook/setting.mock.js +++ b/tools/storybook/setting.mock.js @@ -1,4 +1,6 @@ // @woocommerce/settings mocked module for storybook webpack resolve.alias config // see ./webpack.config.js -export function getSetting() {} +export function getSetting() { + return {}; +} diff --git a/tools/storybook/webpack.config.js b/tools/storybook/webpack.config.js index 2aa48ca231d..4a378bb03c0 100644 --- a/tools/storybook/webpack.config.js +++ b/tools/storybook/webpack.config.js @@ -72,6 +72,13 @@ module.exports = ( storybookConfig ) => { ), to: `./experimental-css/[name][ext]`, }, + { + from: path.resolve( + __dirname, + `../../plugins/woocommerce/assets/client/admin/app/*.css` + ), + to: `./app-css/[name][ext]`, + }, ], } ) );