Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dev: core profiler pages storybook (#39046) 

* dev: core profiler pages storybook

* changed css path to pre-build zip path
This commit is contained in:
RJ 2023-07-24 20:34:38 +08:00 committed by GitHub
parent e5b26f0b7d
commit 615393be39
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
20 changed files with 265 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
plugins/woocommerce-admin/client/core-profiler/pages/BusinessInfo.tsx
View File

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

2
plugins/woocommerce-admin/client/core-profiler/pages/BusinessLocation.tsx
View File

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

3
plugins/woocommerce-admin/client/core-profiler/pages/IntroOptIn.tsx
View File

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

10
plugins/woocommerce-admin/client/core-profiler/pages/Loader.tsx
View File

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

5
plugins/woocommerce-admin/client/core-profiler/pages/Plugins.tsx
View File

@ -37,7 +37,10 @@ export const Plugins = ( {
navigationProgress,
sendEvent,
}: {
context: CoreProfilerStateMachineContext;
context: Pick<
CoreProfilerStateMachineContext,
'pluginsAvailable' | 'pluginsInstallationErrors' | 'pluginsSelected'
>;
sendEvent: (
payload:
| PluginsInstallationRequestedEvent

2
plugins/woocommerce-admin/client/core-profiler/pages/UserProfile.tsx
View File

@ -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'

43
plugins/woocommerce-admin/client/core-profiler/stories/BusinessInfo.tsx Normal file
View File

@ -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 ],
};

28
plugins/woocommerce-admin/client/core-profiler/stories/BusinessLocation.tsx Normal file
View File

@ -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 ],
};

17
plugins/woocommerce-admin/client/core-profiler/stories/IntroOptIn.tsx Normal file
View File

@ -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 ],
};

23
plugins/woocommerce-admin/client/core-profiler/stories/Loader.tsx Normal file
View File

@ -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 ],
};

67
plugins/woocommerce-admin/client/core-profiler/stories/Plugins.tsx Normal file
View File

@ -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 ],
};

23
plugins/woocommerce-admin/client/core-profiler/stories/UserProfile.tsx Normal file
View File

@ -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 ],
};

7
plugins/woocommerce-admin/client/core-profiler/stories/WithSetupWizardLayout.tsx Normal file
View File

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

4
plugins/woocommerce-admin/client/core-profiler/style.scss
View File

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

4
plugins/woocommerce/changelog/dev-core-profiler-storybook Normal file
View File

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

17
tools/storybook/.storybook/main.js
View File

@ -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 }
`,
};

3
tools/storybook/package.json
View File

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

34
tools/storybook/preview.js
View File

@ -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>
),
];

4
tools/storybook/setting.mock.js
View File

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

7
tools/storybook/webpack.config.js
View File

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