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:
louwie17
GitHub
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": {
|
||||
"@babel/core": "^7.23.5",
|
||||
"@babel/runtime": "^7.23.5",
|
||||
"@storybook/addon-actions": "6.5.17-alpha.0",
|
||||
"@storybook/addon-console": "^1.2.3",
|
||||
"@storybook/addon-controls": "6.5.17-alpha.0",
|
||||
"@storybook/addon-docs": "6.5.17-alpha.0",
|
||||
"@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/addon-docs": "7.6.19",
|
||||
"@storybook/addon-links": "7.6.19",
|
||||
"@storybook/react": "6.5.17-alpha.0",
|
||||
"@storybook/theming": "6.5.17-alpha.0",
|
||||
"@testing-library/dom": "8.11.3",
|
||||
"@testing-library/jest-dom": "5.16.2",
|
||||
"@testing-library/react": "12.1.3",
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ import { createElement } from '@wordpress/element';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Basic } from '../stories/index';
|
||||
import { Basic } from '../stories/compare-filter.story';
|
||||
import { CompareFilter } from '../index';
|
||||
import Search from '../../search';
|
||||
import productAutocompleter from '../../search/autocompleters/product';
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import { createElement } from '@wordpress/element';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import { Basic } from '../stories/index';
|
||||
import { Basic } from '../stories/filter-picker.story';
|
||||
import FilterPicker from '../index';
|
||||
import Search from '../../search';
|
||||
import productAutocompleter from '../../search/autocompleters/product';
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ import React from 'react';
|
|||
* Internal dependencies
|
||||
*/
|
||||
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 = () => {
|
||||
return (
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
* External dependencies
|
||||
*/
|
||||
import React, { createElement } from 'react';
|
||||
import { Modal, Notice } from '@wordpress/components';
|
||||
import { Notice } from '@wordpress/components';
|
||||
import { MediaItem } from '@wordpress/media-utils';
|
||||
import { useState } from '@wordpress/element';
|
||||
import { cloudUpload } from '@wordpress/icons';
|
||||
|
|
@ -12,59 +12,7 @@ import { cloudUpload } from '@wordpress/icons';
|
|||
*/
|
||||
import { MediaUploader } from '../';
|
||||
import { File } from '../types';
|
||||
|
||||
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>
|
||||
) }
|
||||
</>
|
||||
);
|
||||
};
|
||||
import { MockMediaUpload } from './mock-media-uploader';
|
||||
|
||||
const ImageGallery = ( { images }: { images: File[] } ) => {
|
||||
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';
|
||||
import { SyntheticEvent, useCallback } from 'react';
|
||||
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 = {
|
||||
onComplete: (
|
||||
|
|
@ -52,10 +57,14 @@ export const Plugins = ( {
|
|||
const [ hasErrors, setHasErrors ] = useState( false );
|
||||
// Tracks action so that multiple instances of this button don't all light up when one is clicked
|
||||
const [ hasBeenClicked, setHasBeenClicked ] = useState( false );
|
||||
const { installAndActivatePlugins } = useDispatch( PLUGINS_STORE_NAME );
|
||||
const { installAndActivatePlugins }: PluginActions =
|
||||
useDispatch( PLUGINS_STORE_NAME );
|
||||
const { isRequesting } = useSelect( ( select ) => {
|
||||
const { getActivePlugins, getInstalledPlugins, isPluginsRequesting } =
|
||||
select( PLUGINS_STORE_NAME );
|
||||
const {
|
||||
getActivePlugins,
|
||||
getInstalledPlugins,
|
||||
isPluginsRequesting,
|
||||
}: PluginSelectors = select( PLUGINS_STORE_NAME );
|
||||
|
||||
return {
|
||||
isRequesting:
|
||||
|
|
@ -64,7 +73,7 @@ export const Plugins = ( {
|
|||
activePlugins: getActivePlugins(),
|
||||
installedPlugins: getInstalledPlugins(),
|
||||
};
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
const handleErrors = useCallback(
|
||||
( errors: unknown, response: InstallPluginsResponse ) => {
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@ import { useDispatch } from '@wordpress/data';
|
|||
import { Plugins } from '../index';
|
||||
|
||||
jest.mock( '@wordpress/data', () => ( {
|
||||
...jest.requireActual( '@wordpress/data' ),
|
||||
__esModule: true,
|
||||
useDispatch: jest
|
||||
.fn()
|
||||
.mockReturnValue( { installAndActivatePlugins: jest.fn() } ),
|
||||
|
|
|
|||
|
|
@ -12,7 +12,6 @@ import * as actions from './actions';
|
|||
import { STORE_NAME } from './constants';
|
||||
|
||||
export const store = createReduxStore( STORE_NAME, {
|
||||
// @ts-expect-error reducer has correct format.
|
||||
reducer,
|
||||
selectors,
|
||||
actions,
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ export type ProductFieldDefinition = {
|
|||
type?: HTMLInputTypeAttribute;
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
render?: ComponentType;
|
||||
attributes?: Record< string, string >;
|
||||
};
|
||||
|
||||
export type ProductFieldState = {
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@ export const EditorWritingFlow = ( {
|
|||
editorMode: __unstableGetEditorMode(),
|
||||
selectedBlockClientIds: getSelectedBlockClientIds(),
|
||||
};
|
||||
} );
|
||||
}, [] );
|
||||
|
||||
// This is a workaround to prevent focusing the block on initialization.
|
||||
// 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';
|
||||
export * from './onboarding/types';
|
||||
export * from './plugins/types';
|
||||
export { PluginSelectors } from './plugins/selectors';
|
||||
export { ActionDispatchers as PluginActions } from './plugins/actions';
|
||||
export * from './products/types';
|
||||
export type {
|
||||
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": {
|
||||
"@babel/core": "^7.23.5",
|
||||
"@storybook/addon-knobs": "^7.0.2",
|
||||
"@testing-library/react": "12.1.3",
|
||||
"@types/jest": "^27.5.2",
|
||||
"@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