dev: core profiler pages storybook (#39046)
* dev: core profiler pages storybook * changed css path to pre-build zip path
This commit is contained in:
parent
e5b26f0b7d
commit
615393be39
|
@ -76,12 +76,23 @@ export const selectIndustryMapping = {
|
||||||
'woocommerce'
|
'woocommerce'
|
||||||
),
|
),
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type BusinessInfoContextProps = Pick<
|
||||||
|
CoreProfilerStateMachineContext,
|
||||||
|
'geolocatedLocation' | 'userProfile' | 'businessInfo' | 'countries'
|
||||||
|
> & {
|
||||||
|
onboardingProfile: Pick<
|
||||||
|
CoreProfilerStateMachineContext[ 'onboardingProfile' ],
|
||||||
|
'industry' | 'business_choice' | 'is_store_country_set'
|
||||||
|
>;
|
||||||
|
};
|
||||||
|
|
||||||
export const BusinessInfo = ( {
|
export const BusinessInfo = ( {
|
||||||
context,
|
context,
|
||||||
navigationProgress,
|
navigationProgress,
|
||||||
sendEvent,
|
sendEvent,
|
||||||
}: {
|
}: {
|
||||||
context: CoreProfilerStateMachineContext;
|
context: BusinessInfoContextProps;
|
||||||
navigationProgress: number;
|
navigationProgress: number;
|
||||||
sendEvent: ( event: BusinessInfoEvent ) => void;
|
sendEvent: ( event: BusinessInfoEvent ) => void;
|
||||||
} ) => {
|
} ) => {
|
||||||
|
|
|
@ -24,7 +24,7 @@ export const BusinessLocation = ( {
|
||||||
}: {
|
}: {
|
||||||
sendEvent: ( event: BusinessLocationEvent ) => void;
|
sendEvent: ( event: BusinessLocationEvent ) => void;
|
||||||
navigationProgress: number;
|
navigationProgress: number;
|
||||||
context: CoreProfilerStateMachineContext;
|
context: Pick< CoreProfilerStateMachineContext, 'countries' >;
|
||||||
} ) => {
|
} ) => {
|
||||||
const [ storeCountry, setStoreCountry ] = useState< CountryStateOption >( {
|
const [ storeCountry, setStoreCountry ] = useState< CountryStateOption >( {
|
||||||
key: '',
|
key: '',
|
||||||
|
|
|
@ -10,7 +10,7 @@ import { Link } from '@woocommerce/components';
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { IntroOptInEvent, CoreProfilerStateMachineContext } from '../index';
|
import { IntroOptInEvent } from '../index';
|
||||||
import { Heading } from '../components/heading/heading';
|
import { Heading } from '../components/heading/heading';
|
||||||
import { Navigation } from '../components/navigation/navigation';
|
import { Navigation } from '../components/navigation/navigation';
|
||||||
|
|
||||||
|
@ -20,7 +20,6 @@ export const IntroOptIn = ( {
|
||||||
}: {
|
}: {
|
||||||
sendEvent: ( event: IntroOptInEvent ) => void;
|
sendEvent: ( event: IntroOptInEvent ) => void;
|
||||||
navigationProgress: number;
|
navigationProgress: number;
|
||||||
context: CoreProfilerStateMachineContext;
|
|
||||||
} ) => {
|
} ) => {
|
||||||
const [ iOptInDataSharing, setIsOptInDataSharing ] =
|
const [ iOptInDataSharing, setIsOptInDataSharing ] =
|
||||||
useState< boolean >( true );
|
useState< boolean >( true );
|
||||||
|
|
|
@ -22,12 +22,12 @@ export type Stage = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Stages = Array< Stage >;
|
export type Stages = Array< Stage >;
|
||||||
|
export type LoaderContextProps = Pick<
|
||||||
|
CoreProfilerStateMachineContext,
|
||||||
|
'loader'
|
||||||
|
>;
|
||||||
|
|
||||||
export const Loader = ( {
|
export const Loader = ( { context }: { context: LoaderContextProps } ) => {
|
||||||
context,
|
|
||||||
}: {
|
|
||||||
context: CoreProfilerStateMachineContext;
|
|
||||||
} ) => {
|
|
||||||
const stages = getLoaderStageMeta( context.loader.useStages ?? 'default' );
|
const stages = getLoaderStageMeta( context.loader.useStages ?? 'default' );
|
||||||
const currentStage = stages[ context.loader.stageIndex ?? 0 ];
|
const currentStage = stages[ context.loader.stageIndex ?? 0 ];
|
||||||
const [ currentParagraph, setCurrentParagraph ] = useState( 0 );
|
const [ currentParagraph, setCurrentParagraph ] = useState( 0 );
|
||||||
|
|
|
@ -37,7 +37,10 @@ export const Plugins = ( {
|
||||||
navigationProgress,
|
navigationProgress,
|
||||||
sendEvent,
|
sendEvent,
|
||||||
}: {
|
}: {
|
||||||
context: CoreProfilerStateMachineContext;
|
context: Pick<
|
||||||
|
CoreProfilerStateMachineContext,
|
||||||
|
'pluginsAvailable' | 'pluginsInstallationErrors' | 'pluginsSelected'
|
||||||
|
>;
|
||||||
sendEvent: (
|
sendEvent: (
|
||||||
payload:
|
payload:
|
||||||
| PluginsInstallationRequestedEvent
|
| PluginsInstallationRequestedEvent
|
||||||
|
|
|
@ -125,7 +125,7 @@ export const UserProfile = ( {
|
||||||
}: {
|
}: {
|
||||||
sendEvent: ( event: UserProfileEvent ) => void;
|
sendEvent: ( event: UserProfileEvent ) => void;
|
||||||
navigationProgress: number;
|
navigationProgress: number;
|
||||||
context: CoreProfilerStateMachineContext;
|
context: Pick< CoreProfilerStateMachineContext, 'userProfile' >;
|
||||||
} ) => {
|
} ) => {
|
||||||
const [ businessChoice, setBusinessChoice ] = useState< BusinessChoice >(
|
const [ businessChoice, setBusinessChoice ] = useState< BusinessChoice >(
|
||||||
context.userProfile.businessChoice || 'im_just_starting_my_business'
|
context.userProfile.businessChoice || 'im_just_starting_my_business'
|
||||||
|
|
|
@ -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 ],
|
||||||
|
};
|
|
@ -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 ],
|
||||||
|
};
|
|
@ -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 ],
|
||||||
|
};
|
|
@ -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 ],
|
||||||
|
};
|
|
@ -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 ],
|
||||||
|
};
|
|
@ -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 ],
|
||||||
|
};
|
|
@ -0,0 +1,7 @@
|
||||||
|
export const WithSetupWizardLayout = ( Story: React.ComponentType ) => {
|
||||||
|
return (
|
||||||
|
<div className="woocommerce-profile-wizard__body woocommerce-admin-full-screen">
|
||||||
|
<Story />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
|
@ -275,13 +275,11 @@
|
||||||
|
|
||||||
// Loader page
|
// Loader page
|
||||||
.woocommerce-profiler-loader {
|
.woocommerce-profiler-loader {
|
||||||
width: 100%;
|
min-height: 100vh;
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
position: absolute;
|
|
||||||
@include breakpoint( '<782px' ) {
|
@include breakpoint( '<782px' ) {
|
||||||
padding: 0 20px;
|
padding: 0 20px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: patch
|
||||||
|
Type: dev
|
||||||
|
|
||||||
|
Added storybook for core profiler pages
|
|
@ -9,7 +9,7 @@ module.exports = {
|
||||||
'../../../packages/js/components/src/**/stories/*.@(js|tsx)',
|
'../../../packages/js/components/src/**/stories/*.@(js|tsx)',
|
||||||
// WooCommerce Admin / @woocommerce/experimental components
|
// WooCommerce Admin / @woocommerce/experimental components
|
||||||
'../../../packages/js/experimental/src/**/stories/*.@(js|tsx)',
|
'../../../packages/js/experimental/src/**/stories/*.@(js|tsx)',
|
||||||
'../../../plugins/woocommerce-admin/client/**/stories/*.js',
|
'../../../plugins/woocommerce-admin/client/**/stories/*.@(js|tsx)',
|
||||||
],
|
],
|
||||||
addons: [
|
addons: [
|
||||||
'@storybook/addon-docs',
|
'@storybook/addon-docs',
|
||||||
|
@ -27,6 +27,13 @@ module.exports = {
|
||||||
reactDocgen: 'react-docgen-typescript',
|
reactDocgen: 'react-docgen-typescript',
|
||||||
},
|
},
|
||||||
|
|
||||||
|
staticDirs: [
|
||||||
|
{
|
||||||
|
from: '../../../plugins/woocommerce-admin/client',
|
||||||
|
to: 'main/plugins/woocommerce-admin/client',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
|
||||||
webpackFinal: webpackOverride,
|
webpackFinal: webpackOverride,
|
||||||
|
|
||||||
previewHead: ( head ) => `
|
previewHead: ( head ) => `
|
||||||
|
@ -37,10 +44,12 @@ module.exports = {
|
||||||
? `
|
? `
|
||||||
<link href="experimental-css/style-rtl.css" rel="stylesheet" />
|
<link href="experimental-css/style-rtl.css" rel="stylesheet" />
|
||||||
<link href="component-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="component-css/style.css" rel="stylesheet" />
|
||||||
<link href="experimental-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>
|
</style>
|
||||||
`,
|
`,
|
||||||
|
previewBody: ( body ) => `
|
||||||
|
<div id="wpwrap">
|
||||||
|
<div class="woocommerce-layout woocommerce-page">
|
||||||
|
${ body }
|
||||||
|
|
||||||
|
`,
|
||||||
};
|
};
|
||||||
|
|
|
@ -20,7 +20,8 @@
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build-storybook": "build-storybook -c ./.storybook",
|
"build-storybook": "build-storybook -c ./.storybook",
|
||||||
"preinstall": "npx only-allow pnpm",
|
"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"
|
"storybook-rtl": "USE_RTL_STYLE=true pnpm run storybook"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -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>
|
|
||||||
),
|
|
||||||
];
|
|
|
@ -1,4 +1,6 @@
|
||||||
// @woocommerce/settings mocked module for storybook webpack resolve.alias config
|
// @woocommerce/settings mocked module for storybook webpack resolve.alias config
|
||||||
// see ./webpack.config.js
|
// see ./webpack.config.js
|
||||||
|
|
||||||
export function getSetting() {}
|
export function getSetting() {
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
|
@ -72,6 +72,13 @@ module.exports = ( storybookConfig ) => {
|
||||||
),
|
),
|
||||||
to: `./experimental-css/[name][ext]`,
|
to: `./experimental-css/[name][ext]`,
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
from: path.resolve(
|
||||||
|
__dirname,
|
||||||
|
`../../plugins/woocommerce/assets/client/admin/app/*.css`
|
||||||
|
),
|
||||||
|
to: `./app-css/[name][ext]`,
|
||||||
|
},
|
||||||
],
|
],
|
||||||
} )
|
} )
|
||||||
);
|
);
|
||||||
|
|
Loading…
Reference in New Issue