dev: core profiler pages storybook (#39046)

* dev: core profiler pages storybook

* changed css path to pre-build zip path

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;
 } ) => {

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: '',

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 );

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 );

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

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'

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 = () => (
+	<BusinessInfo
+		sendEvent={ () => {} }
+		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 ],
+};

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 = () => (
+	<BusinessLocation
+		sendEvent={ () => {} }
+		navigationProgress={ 80 }
+		context={ {
+			countries: [
+				{
+					key: 'US',
+					label: 'United States',
+				},
+			],
+		} }
+	/>
+);
+
+export default {
+	title: 'WooCommerce Admin/Application/Core Profiler/Business Location',
+	component: BusinessLocation,
+	decorators: [ WithSetupWizardLayout ],
+};

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 = () => (
+	<IntroOptIn sendEvent={ () => {} } navigationProgress={ 20 } />
+);
+
+export default {
+	title: 'WooCommerce Admin/Application/Core Profiler/IntroOptIn',
+	component: IntroOptIn,
+	decorators: [ WithSetupWizardLayout ],
+};

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 = () => (
+	<Loader
+		context={ { loader: { progress: 10, useStages: 'skipGuidedSetup' } } }
+	/>
+);
+
+export const Plugins = () => (
+	<Loader context={ { loader: { progress: 10, useStages: 'plugins' } } } />
+);
+
+export default {
+	title: 'WooCommerce Admin/Application/Core Profiler/Loader',
+	component: Loader,
+	decorators: [ WithSetupWizardLayout ],
+};

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 = () => (
+	<Plugins
+		sendEvent={ () => {} }
+		navigationProgress={ 80 }
+		context={ {
+			pluginsAvailable: plugins,
+			pluginsSelected: [],
+			pluginsInstallationErrors: [],
+		} }
+	/>
+);
+
+export default {
+	title: 'WooCommerce Admin/Application/Core Profiler/Plugins',
+	component: Plugins,
+	decorators: [ WithSetupWizardLayout ],
+};

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 = () => (
+	<UserProfile
+		sendEvent={ () => {} }
+		navigationProgress={ 40 }
+		context={ {
+			userProfile: {},
+		} }
+	/>
+);
+
+export default {
+	title: 'WooCommerce Admin/Application/Core Profiler/User Profile',
+	component: UserProfile,
+	decorators: [ WithSetupWizardLayout ],
+};

plugins/woocommerce-admin/client/core-profiler/stories/WithSetupWizardLayout.tsx

@@ -0,0 +1,7 @@
+export const WithSetupWizardLayout = ( Story: React.ComponentType ) => {
+	return (
+		<div className="woocommerce-profile-wizard__body woocommerce-admin-full-screen">
+			<Story />
+		</div>
+	);
+};

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;
 	}

plugins/woocommerce/changelog/dev-core-profiler-storybook

@@ -0,0 +1,4 @@
+Significance: patch
+Type: dev
+
+Added storybook for core profiler pages

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 = {
 				? `
 			<link href="experimental-css/style-rtl.css" rel="stylesheet" />
 			<link href="component-css/style-rtl.css" rel="stylesheet" />
+			<link href="app-css/style-rtl.css" rel="stylesheet" />
 			`
 				: `
 			<link href="component-css/style.css" rel="stylesheet" />
 			<link href="experimental-css/style.css" rel="stylesheet" />
+			<link href="app-css/style.css" rel="stylesheet" />
 			`
 		}
 
@@ -52,4 +61,10 @@ module.exports = {
 			}
 		</style>
 	`,
+	previewBody: ( body ) => `
+	<div id="wpwrap">
+		<div class="woocommerce-layout woocommerce-page">
+			${ body }
+
+	`,
 };

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": {

tools/storybook/preview.js

@@ -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 ) => (
-		<div id="wpwrap">
-			<div className="woocommerce-layout woocommerce-page">
-				<Story />
-			</div>
-		</div>
-	),
-];

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 {};
+}

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]`,
+				},
 			],
 		} )
 	);