Upgrade storybook to version 7 and add pages workflow for GH publishing (#51168)
* Updated storybook and renamed stories to use the *.story.js/tsx format * Renamed stories within product editor and wc admin package * Include *story files in product editor package * Add storybook pages workflow * Remove the 'on' param in storybook-pages * Add changelogs * Fix failing tests * Add dirname for any other webpack configs that rely on the woocommerce-admin one * Fix React 18 warnings * Remove unneeded storybook packages from components package * Remove storybook workflow, to be added as a follow up instead * Revert @storybook/react back to fix unit tests
This commit is contained in:
parent
7f89cd5090
commit
0e8d19d43b
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Update storybook file format in support with Storybook 7 story indexer.
|
|
@ -132,18 +132,10 @@
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.23.5",
|
"@babel/core": "^7.23.5",
|
||||||
"@babel/runtime": "^7.23.5",
|
"@babel/runtime": "^7.23.5",
|
||||||
"@storybook/addon-actions": "6.5.17-alpha.0",
|
|
||||||
"@storybook/addon-console": "^1.2.3",
|
"@storybook/addon-console": "^1.2.3",
|
||||||
"@storybook/addon-controls": "6.5.17-alpha.0",
|
"@storybook/addon-docs": "7.6.19",
|
||||||
"@storybook/addon-docs": "6.5.17-alpha.0",
|
"@storybook/addon-links": "7.6.19",
|
||||||
"@storybook/addon-knobs": "^6.4.0",
|
|
||||||
"@storybook/addon-links": "6.5.17-alpha.0",
|
|
||||||
"@storybook/addons": "6.5.17-alpha.0",
|
|
||||||
"@storybook/api": "6.5.17-alpha.0",
|
|
||||||
"@storybook/components": "6.5.17-alpha.0",
|
|
||||||
"@storybook/core-events": "6.5.17-alpha.0",
|
|
||||||
"@storybook/react": "6.5.17-alpha.0",
|
"@storybook/react": "6.5.17-alpha.0",
|
||||||
"@storybook/theming": "6.5.17-alpha.0",
|
|
||||||
"@testing-library/dom": "8.11.3",
|
"@testing-library/dom": "8.11.3",
|
||||||
"@testing-library/jest-dom": "5.16.2",
|
"@testing-library/jest-dom": "5.16.2",
|
||||||
"@testing-library/react": "12.1.3",
|
"@testing-library/react": "12.1.3",
|
||||||
|
|
|
@ -7,7 +7,7 @@ import { createElement } from '@wordpress/element';
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { Basic } from '../stories/index';
|
import { Basic } from '../stories/compare-filter.story';
|
||||||
import { CompareFilter } from '../index';
|
import { CompareFilter } from '../index';
|
||||||
import Search from '../../search';
|
import Search from '../../search';
|
||||||
import productAutocompleter from '../../search/autocompleters/product';
|
import productAutocompleter from '../../search/autocompleters/product';
|
||||||
|
|
|
@ -8,7 +8,7 @@ import { createElement } from '@wordpress/element';
|
||||||
/**
|
/**
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { Basic } from '../stories/index';
|
import { Basic } from '../stories/filter-picker.story';
|
||||||
import FilterPicker from '../index';
|
import FilterPicker from '../index';
|
||||||
import Search from '../../search';
|
import Search from '../../search';
|
||||||
import productAutocompleter from '../../search/autocompleters/product';
|
import productAutocompleter from '../../search/autocompleters/product';
|
||||||
|
|
|
@ -8,7 +8,7 @@ import React from 'react';
|
||||||
* Internal dependencies
|
* Internal dependencies
|
||||||
*/
|
*/
|
||||||
import { ImageGallery, ImageGalleryItem } from '../';
|
import { ImageGallery, ImageGalleryItem } from '../';
|
||||||
import { MockMediaUpload } from '../../media-uploader/stories/index.tsx';
|
import { MockMediaUpload } from '../../media-uploader/stories/mock-media-uploader';
|
||||||
|
|
||||||
export const Basic: React.FC = () => {
|
export const Basic: React.FC = () => {
|
||||||
return (
|
return (
|
|
@ -2,7 +2,7 @@
|
||||||
* External dependencies
|
* External dependencies
|
||||||
*/
|
*/
|
||||||
import React, { createElement } from 'react';
|
import React, { createElement } from 'react';
|
||||||
import { Modal, Notice } from '@wordpress/components';
|
import { Notice } from '@wordpress/components';
|
||||||
import { MediaItem } from '@wordpress/media-utils';
|
import { MediaItem } from '@wordpress/media-utils';
|
||||||
import { useState } from '@wordpress/element';
|
import { useState } from '@wordpress/element';
|
||||||
import { cloudUpload } from '@wordpress/icons';
|
import { cloudUpload } from '@wordpress/icons';
|
||||||
|
@ -12,59 +12,7 @@ import { cloudUpload } from '@wordpress/icons';
|
||||||
*/
|
*/
|
||||||
import { MediaUploader } from '../';
|
import { MediaUploader } from '../';
|
||||||
import { File } from '../types';
|
import { File } from '../types';
|
||||||
|
import { MockMediaUpload } from './mock-media-uploader';
|
||||||
const MockMediaUpload = ( { onSelect, render } ) => {
|
|
||||||
const [ isOpen, setOpen ] = useState( false );
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{ render( {
|
|
||||||
open: () => setOpen( true ),
|
|
||||||
} ) }
|
|
||||||
{ isOpen && (
|
|
||||||
<Modal
|
|
||||||
title="Media Modal"
|
|
||||||
onRequestClose={ ( event ) => {
|
|
||||||
setOpen( false );
|
|
||||||
event.stopPropagation();
|
|
||||||
} }
|
|
||||||
>
|
|
||||||
<p>
|
|
||||||
Use the default built-in{ ' ' }
|
|
||||||
<code>MediaUploadComponent</code> prop to render the WP
|
|
||||||
Media Modal.
|
|
||||||
</p>
|
|
||||||
{ Array( ...Array( 3 ) ).map( ( n, i ) => {
|
|
||||||
return (
|
|
||||||
<button
|
|
||||||
key={ i }
|
|
||||||
onClick={ ( event ) => {
|
|
||||||
onSelect( {
|
|
||||||
alt: 'Random',
|
|
||||||
url: `https://picsum.photos/200?i=${ i }`,
|
|
||||||
} );
|
|
||||||
setOpen( false );
|
|
||||||
event.stopPropagation();
|
|
||||||
} }
|
|
||||||
style={ {
|
|
||||||
marginRight: '16px',
|
|
||||||
} }
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
src={ `https://picsum.photos/200?i=${ i }` }
|
|
||||||
alt="Random"
|
|
||||||
style={ {
|
|
||||||
maxWidth: '100px',
|
|
||||||
} }
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
);
|
|
||||||
} ) }
|
|
||||||
</Modal>
|
|
||||||
) }
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ImageGallery = ( { images }: { images: File[] } ) => {
|
const ImageGallery = ( { images }: { images: File[] } ) => {
|
||||||
return (
|
return (
|
|
@ -0,0 +1,59 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import React, { createElement } from 'react';
|
||||||
|
import { Modal } from '@wordpress/components';
|
||||||
|
import { useState } from '@wordpress/element';
|
||||||
|
|
||||||
|
export const MockMediaUpload = ( { onSelect, render } ) => {
|
||||||
|
const [ isOpen, setOpen ] = useState( false );
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
{ render( {
|
||||||
|
open: () => setOpen( true ),
|
||||||
|
} ) }
|
||||||
|
{ isOpen && (
|
||||||
|
<Modal
|
||||||
|
title="Media Modal"
|
||||||
|
onRequestClose={ ( event ) => {
|
||||||
|
setOpen( false );
|
||||||
|
event.stopPropagation();
|
||||||
|
} }
|
||||||
|
>
|
||||||
|
<p>
|
||||||
|
Use the default built-in{ ' ' }
|
||||||
|
<code>MediaUploadComponent</code> prop to render the WP
|
||||||
|
Media Modal.
|
||||||
|
</p>
|
||||||
|
{ Array( ...Array( 3 ) ).map( ( n, i ) => {
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
key={ i }
|
||||||
|
onClick={ ( event ) => {
|
||||||
|
onSelect( {
|
||||||
|
alt: 'Random',
|
||||||
|
url: `https://picsum.photos/200?i=${ i }`,
|
||||||
|
} );
|
||||||
|
setOpen( false );
|
||||||
|
event.stopPropagation();
|
||||||
|
} }
|
||||||
|
style={ {
|
||||||
|
marginRight: '16px',
|
||||||
|
} }
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
src={ `https://picsum.photos/200?i=${ i }` }
|
||||||
|
alt="Random"
|
||||||
|
style={ {
|
||||||
|
maxWidth: '100px',
|
||||||
|
} }
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
);
|
||||||
|
} ) }
|
||||||
|
</Modal>
|
||||||
|
) }
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
|
@ -11,7 +11,12 @@ import {
|
||||||
} from '@wordpress/element';
|
} from '@wordpress/element';
|
||||||
import { SyntheticEvent, useCallback } from 'react';
|
import { SyntheticEvent, useCallback } from 'react';
|
||||||
import { useDispatch, useSelect } from '@wordpress/data';
|
import { useDispatch, useSelect } from '@wordpress/data';
|
||||||
import { PLUGINS_STORE_NAME, InstallPluginsResponse } from '@woocommerce/data';
|
import { PLUGINS_STORE_NAME } from '@woocommerce/data';
|
||||||
|
import type {
|
||||||
|
InstallPluginsResponse,
|
||||||
|
PluginSelectors,
|
||||||
|
PluginActions,
|
||||||
|
} from '@woocommerce/data';
|
||||||
|
|
||||||
type PluginsProps = {
|
type PluginsProps = {
|
||||||
onComplete: (
|
onComplete: (
|
||||||
|
@ -52,10 +57,14 @@ export const Plugins = ( {
|
||||||
const [ hasErrors, setHasErrors ] = useState( false );
|
const [ hasErrors, setHasErrors ] = useState( false );
|
||||||
// Tracks action so that multiple instances of this button don't all light up when one is clicked
|
// Tracks action so that multiple instances of this button don't all light up when one is clicked
|
||||||
const [ hasBeenClicked, setHasBeenClicked ] = useState( false );
|
const [ hasBeenClicked, setHasBeenClicked ] = useState( false );
|
||||||
const { installAndActivatePlugins } = useDispatch( PLUGINS_STORE_NAME );
|
const { installAndActivatePlugins }: PluginActions =
|
||||||
|
useDispatch( PLUGINS_STORE_NAME );
|
||||||
const { isRequesting } = useSelect( ( select ) => {
|
const { isRequesting } = useSelect( ( select ) => {
|
||||||
const { getActivePlugins, getInstalledPlugins, isPluginsRequesting } =
|
const {
|
||||||
select( PLUGINS_STORE_NAME );
|
getActivePlugins,
|
||||||
|
getInstalledPlugins,
|
||||||
|
isPluginsRequesting,
|
||||||
|
}: PluginSelectors = select( PLUGINS_STORE_NAME );
|
||||||
|
|
||||||
return {
|
return {
|
||||||
isRequesting:
|
isRequesting:
|
||||||
|
@ -64,7 +73,7 @@ export const Plugins = ( {
|
||||||
activePlugins: getActivePlugins(),
|
activePlugins: getActivePlugins(),
|
||||||
installedPlugins: getInstalledPlugins(),
|
installedPlugins: getInstalledPlugins(),
|
||||||
};
|
};
|
||||||
} );
|
}, [] );
|
||||||
|
|
||||||
const handleErrors = useCallback(
|
const handleErrors = useCallback(
|
||||||
( errors: unknown, response: InstallPluginsResponse ) => {
|
( errors: unknown, response: InstallPluginsResponse ) => {
|
||||||
|
|
|
@ -13,7 +13,7 @@ import { useDispatch } from '@wordpress/data';
|
||||||
import { Plugins } from '../index';
|
import { Plugins } from '../index';
|
||||||
|
|
||||||
jest.mock( '@wordpress/data', () => ( {
|
jest.mock( '@wordpress/data', () => ( {
|
||||||
...jest.requireActual( '@wordpress/data' ),
|
__esModule: true,
|
||||||
useDispatch: jest
|
useDispatch: jest
|
||||||
.fn()
|
.fn()
|
||||||
.mockReturnValue( { installAndActivatePlugins: jest.fn() } ),
|
.mockReturnValue( { installAndActivatePlugins: jest.fn() } ),
|
||||||
|
|
|
@ -12,7 +12,6 @@ import * as actions from './actions';
|
||||||
import { STORE_NAME } from './constants';
|
import { STORE_NAME } from './constants';
|
||||||
|
|
||||||
export const store = createReduxStore( STORE_NAME, {
|
export const store = createReduxStore( STORE_NAME, {
|
||||||
// @ts-expect-error reducer has correct format.
|
|
||||||
reducer,
|
reducer,
|
||||||
selectors,
|
selectors,
|
||||||
actions,
|
actions,
|
||||||
|
|
|
@ -8,6 +8,7 @@ export type ProductFieldDefinition = {
|
||||||
type?: HTMLInputTypeAttribute;
|
type?: HTMLInputTypeAttribute;
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
render?: ComponentType;
|
render?: ComponentType;
|
||||||
|
attributes?: Record< string, string >;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type ProductFieldState = {
|
export type ProductFieldState = {
|
||||||
|
|
|
@ -43,7 +43,7 @@ export const EditorWritingFlow = ( {
|
||||||
editorMode: __unstableGetEditorMode(),
|
editorMode: __unstableGetEditorMode(),
|
||||||
selectedBlockClientIds: getSelectedBlockClientIds(),
|
selectedBlockClientIds: getSelectedBlockClientIds(),
|
||||||
};
|
};
|
||||||
} );
|
}, [] );
|
||||||
|
|
||||||
// This is a workaround to prevent focusing the block on initialization.
|
// This is a workaround to prevent focusing the block on initialization.
|
||||||
// Changing to a mode other than "edit" ensures that no initial position
|
// Changing to a mode other than "edit" ensures that no initial position
|
||||||
|
|
|
@ -1,107 +0,0 @@
|
||||||
/**
|
|
||||||
* External dependencies
|
|
||||||
*/
|
|
||||||
import { date, text } from '@storybook/addon-knobs';
|
|
||||||
import GridIcon from 'gridicons';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Internal dependencies
|
|
||||||
*/
|
|
||||||
import Timeline, { orderByOptions } from '../';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
title: 'WooCommerce Admin/components/Timeline',
|
|
||||||
component: Timeline,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Empty = () => <Timeline />;
|
|
||||||
|
|
||||||
const itemDate = ( label, value ) => {
|
|
||||||
const d = date( label, value );
|
|
||||||
return new Date( d );
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Filled = () => (
|
|
||||||
<Timeline
|
|
||||||
orderBy={ orderByOptions.DESC }
|
|
||||||
items={ [
|
|
||||||
{
|
|
||||||
date: itemDate(
|
|
||||||
'event 1 date',
|
|
||||||
new Date( 2020, 0, 20, 1, 30 )
|
|
||||||
),
|
|
||||||
body: [
|
|
||||||
<p key={ '1' }>
|
|
||||||
{ text( 'event 1, first event', 'p element in body' ) }
|
|
||||||
</p>,
|
|
||||||
text( 'event 1, second event', 'string in body' ),
|
|
||||||
],
|
|
||||||
headline: (
|
|
||||||
<p>{ text( 'event 1, headline', 'p tag in headline' ) }</p>
|
|
||||||
),
|
|
||||||
icon: (
|
|
||||||
<GridIcon
|
|
||||||
className={ 'is-success' }
|
|
||||||
icon={ text( 'event 1 gridicon', 'checkmark' ) }
|
|
||||||
size={ 16 }
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
hideTimestamp: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: itemDate(
|
|
||||||
'event 2 date',
|
|
||||||
new Date( 2020, 0, 20, 23, 45 )
|
|
||||||
),
|
|
||||||
body: [],
|
|
||||||
headline: (
|
|
||||||
<span>
|
|
||||||
{ text( 'event 2, headline', 'span in headline' ) }
|
|
||||||
</span>
|
|
||||||
),
|
|
||||||
icon: (
|
|
||||||
<GridIcon
|
|
||||||
className={ 'is-warning' }
|
|
||||||
icon={ text( 'event 2 gridicon', 'refresh' ) }
|
|
||||||
size={ 16 }
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: itemDate(
|
|
||||||
'event 3 date',
|
|
||||||
new Date( 2020, 0, 22, 15, 13 )
|
|
||||||
),
|
|
||||||
body: [
|
|
||||||
<span key={ '1' }>
|
|
||||||
{ text( 'event 3, second event', 'span in body' ) }
|
|
||||||
</span>,
|
|
||||||
],
|
|
||||||
headline: text( 'event 3, headline', 'string in headline' ),
|
|
||||||
icon: (
|
|
||||||
<GridIcon
|
|
||||||
className={ 'is-error' }
|
|
||||||
icon={ text( 'event 3 gridicon', 'cross' ) }
|
|
||||||
size={ 16 }
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
date: itemDate(
|
|
||||||
'event 4 date',
|
|
||||||
new Date( 2020, 0, 17, 1, 45 )
|
|
||||||
),
|
|
||||||
headline: text(
|
|
||||||
'event 4, headline',
|
|
||||||
'undefined body and string headline'
|
|
||||||
),
|
|
||||||
icon: (
|
|
||||||
<GridIcon
|
|
||||||
icon={ text( 'event 4 gridicon', 'cross' ) }
|
|
||||||
size={ 16 }
|
|
||||||
/>
|
|
||||||
),
|
|
||||||
},
|
|
||||||
] }
|
|
||||||
/>
|
|
||||||
);
|
|
|
@ -0,0 +1,71 @@
|
||||||
|
/**
|
||||||
|
* External dependencies
|
||||||
|
*/
|
||||||
|
import GridIcon from 'gridicons';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Internal dependencies
|
||||||
|
*/
|
||||||
|
import Timeline, { orderByOptions } from '../';
|
||||||
|
|
||||||
|
export const Filled = () => {
|
||||||
|
return (
|
||||||
|
<Timeline
|
||||||
|
orderBy={ orderByOptions.DESC }
|
||||||
|
items={ [
|
||||||
|
{
|
||||||
|
date: new Date( 2020, 0, 20, 1, 30 ),
|
||||||
|
body: [
|
||||||
|
<p key="1">p element in body</p>,
|
||||||
|
'string in body',
|
||||||
|
],
|
||||||
|
headline: <p>p tag in headline</p>,
|
||||||
|
icon: (
|
||||||
|
<GridIcon
|
||||||
|
className="is-success"
|
||||||
|
icon="checkmark"
|
||||||
|
size={ 16 }
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
hideTimestamp: true,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: new Date( 2020, 0, 20, 23, 45 ),
|
||||||
|
body: [],
|
||||||
|
headline: <span>span in headline</span>,
|
||||||
|
icon: (
|
||||||
|
<GridIcon
|
||||||
|
className={ 'is-warning' }
|
||||||
|
icon="refresh"
|
||||||
|
size={ 16 }
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: new Date( 2020, 0, 22, 15, 13 ),
|
||||||
|
body: [ <span key="1">span in body</span> ],
|
||||||
|
headline: 'string in headline',
|
||||||
|
icon: (
|
||||||
|
<GridIcon
|
||||||
|
className={ 'is-error' }
|
||||||
|
icon="cross"
|
||||||
|
size={ 16 }
|
||||||
|
/>
|
||||||
|
),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
date: new Date( 2020, 0, 17, 1, 45 ),
|
||||||
|
headline: 'undefined body and string headline',
|
||||||
|
icon: <GridIcon icon="cross" size={ 16 } />,
|
||||||
|
},
|
||||||
|
] }
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default {
|
||||||
|
title: 'WooCommerce Admin/components/Timeline',
|
||||||
|
component: Filled,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Empty = () => <Timeline />;
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Export plugin related data store types for selectors and actions.
|
|
@ -85,6 +85,8 @@ export {
|
||||||
} from './product-form/types';
|
} from './product-form/types';
|
||||||
export * from './onboarding/types';
|
export * from './onboarding/types';
|
||||||
export * from './plugins/types';
|
export * from './plugins/types';
|
||||||
|
export { PluginSelectors } from './plugins/selectors';
|
||||||
|
export { ActionDispatchers as PluginActions } from './plugins/actions';
|
||||||
export * from './products/types';
|
export * from './products/types';
|
||||||
export type {
|
export type {
|
||||||
PartialProductVariation,
|
PartialProductVariation,
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Update storybook file format in support with Storybook 7 story indexer.
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Update storybook file format in support with Storybook 7 story indexer.
|
|
@ -71,7 +71,6 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "^7.23.5",
|
"@babel/core": "^7.23.5",
|
||||||
"@storybook/addon-knobs": "^7.0.2",
|
|
||||||
"@testing-library/react": "12.1.3",
|
"@testing-library/react": "12.1.3",
|
||||||
"@types/jest": "^27.5.2",
|
"@types/jest": "^27.5.2",
|
||||||
"@types/react": "^17.0.71",
|
"@types/react": "^17.0.71",
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
Significance: minor
|
||||||
|
Type: update
|
||||||
|
|
||||||
|
Update storybook file format in support with Storybook 7 story indexer.
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue