From 844f71486ba386d9aaefcdede9710a4dac785a89 Mon Sep 17 00:00:00 2001 From: louwie17 Date: Fri, 14 May 2021 12:23:01 -0300 Subject: [PATCH] Remove `woocommerce/experimental` dependency from `woocommerce/components` (https://github.com/woocommerce/woocommerce-admin/pull/6986) * Removed the experimental dependency from the components package, and moved stories to experimental package * Add changelog * Fix typo --- .../packages/components/CHANGELOG.md | 1 + .../components/src/advanced-filters/index.js | 2 +- .../components/src/compare-filter/index.js | 2 +- .../packages/components/src/experimental.js | 13 +++ .../components/src/list/stories/index.js | 104 ++++++------------ .../packages/components/src/pill/pill.js | 4 +- .../packages/components/src/summary/number.js | 2 +- .../src/experimental-list/stories/index.js | 78 +++++++++++++ .../src/experimental-list/stories/style.scss | 11 ++ plugins/woocommerce-admin/storybook/main.js | 2 + .../storybook/webpack.config.js | 1 + 11 files changed, 146 insertions(+), 74 deletions(-) create mode 100644 plugins/woocommerce-admin/packages/components/src/experimental.js create mode 100644 plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/index.js create mode 100644 plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/style.scss diff --git a/plugins/woocommerce-admin/packages/components/CHANGELOG.md b/plugins/woocommerce-admin/packages/components/CHANGELOG.md index ca0f58a0c16..60e0292dbbc 100644 --- a/plugins/woocommerce-admin/packages/components/CHANGELOG.md +++ b/plugins/woocommerce-admin/packages/components/CHANGELOG.md @@ -10,6 +10,7 @@ - Add `controlId` and `name` props to ``. #6871 - Minor styling tweaks and fixes to ``. #6871 - Fix `autocompleter` for custom Search in `FilterPicker` #6880 +- Remove `woocommerce/experimental` dependency. #6986 # 6.1.2 diff --git a/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js b/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js index 15d56c3a0d9..5cb2669313b 100644 --- a/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js +++ b/plugins/woocommerce-admin/packages/components/src/advanced-filters/index.js @@ -23,13 +23,13 @@ import { getQueryFromActiveFilters, getHistory, } from '@woocommerce/navigation'; -import { Text } from '@woocommerce/experimental'; /** * Internal dependencies */ import Link from '../link'; import AdvancedFilterItem from './item'; +import { Text } from '../experimental'; const matches = [ { value: 'all', label: __( 'All', 'woocommerce-admin' ) }, diff --git a/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js b/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js index 4d63717e615..e87d78e9be3 100644 --- a/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js +++ b/plugins/woocommerce-admin/packages/components/src/compare-filter/index.js @@ -12,7 +12,6 @@ import { } from '@wordpress/components'; import { isEqual, isFunction } from 'lodash'; import PropTypes from 'prop-types'; -import { Text } from '@woocommerce/experimental'; import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation'; /** @@ -20,6 +19,7 @@ import { getIdsFromQuery, updateQueryString } from '@woocommerce/navigation'; */ import CompareButton from './button'; import Search from '../search'; +import { Text } from '../experimental'; export { default as CompareButton } from './button'; diff --git a/plugins/woocommerce-admin/packages/components/src/experimental.js b/plugins/woocommerce-admin/packages/components/src/experimental.js new file mode 100644 index 00000000000..f7d25b4cb34 --- /dev/null +++ b/plugins/woocommerce-admin/packages/components/src/experimental.js @@ -0,0 +1,13 @@ +/** + * External dependencies + */ +import { + __experimentalText, + Text as TextComponent, +} from '@wordpress/components'; + +/** + * Export experimental components within the components package to prevent a circular + * dependency with woocommerce/experimental. Only for internal use. + */ +export const Text = TextComponent || __experimentalText; diff --git a/plugins/woocommerce-admin/packages/components/src/list/stories/index.js b/plugins/woocommerce-admin/packages/components/src/list/stories/index.js index 86ced567b7f..667ab132b68 100644 --- a/plugins/woocommerce-admin/packages/components/src/list/stories/index.js +++ b/plugins/woocommerce-admin/packages/components/src/list/stories/index.js @@ -4,10 +4,15 @@ import Gridicon from 'gridicons'; import { withConsole } from '@storybook/addon-console'; import { - List as ExperimentalList, - ListItem as ExperimentalListItem, - CollapsibleList as ExperimentalCollapsibleList, -} from '@woocommerce/experimental'; + Title, + Subtitle, + Description, + Primary, + ArgsTable, + Stories, + PRIMARY_STORY, +} from '@storybook/addon-docs/blocks'; +import { withLinks } from '@storybook/addon-links'; /** * Internal dependencies @@ -35,7 +40,32 @@ function logItemClick( event ) { export default { title: 'WooCommerce Admin/components/List', component: List, - decorators: [ ( storyFn, context ) => withConsole()( storyFn )( context ) ], + decorators: [ + ( storyFn, context ) => withConsole()( storyFn )( context ), + withLinks, + ], + parameters: { + docs: { + page: () => ( + <> + + <Subtitle /> + <Description + markdown={ `[deprecated] and will be replaced by + <a + data-sb-kind="woocommerce-admin-experimental-list" + data-sb-story="default" + > + ExperimentalList + </a>` } + /> + <Primary /> + <ArgsTable story={ PRIMARY_STORY } /> + <Stories /> + </> + ), + }, + }, }; export const Default = () => { @@ -146,67 +176,3 @@ export const CustomStyleAndTags = () => { }; CustomStyleAndTags.storyName = 'Custom style and tags (deprecated)'; - -export const ExperimentalListExample = () => { - return ( - <ExperimentalList> - <ExperimentalListItem disableGutters onClick={ () => {} }> - <div>Without gutters no padding is added to the list item.</div> - </ExperimentalListItem> - <ExperimentalListItem onClick={ () => {} }> - <div>Any markup can go here.</div> - </ExperimentalListItem> - <ExperimentalListItem onClick={ () => {} }> - <div>Any markup can go here.</div> - </ExperimentalListItem> - <ExperimentalListItem onClick={ () => {} }> - <div>Any markup can go here.</div> - </ExperimentalListItem> - </ExperimentalList> - ); -}; - -ExperimentalListExample.storyName = 'ExperimentalList / ExperimentalListItem.'; - -export const ExperimentalCollapsibleListExample = () => { - return ( - <ExperimentalCollapsibleList - collapseLabel="Show less" - expandLabel="Show more items" - show={ 2 } - onCollapse={ () => { - // eslint-disable-next-line no-console - console.log( 'collapsed' ); - } } - onExpand={ () => { - // eslint-disable-next-line no-console - console.log( 'expanded' ); - } } - > - <ExperimentalListItem onClick={ () => {} }> - <div>Any markup can go here.</div> - </ExperimentalListItem> - <ExperimentalListItem onClick={ () => {} }> - <div>Any markup can go here.</div> - </ExperimentalListItem> - <ExperimentalListItem onClick={ () => {} }> - <div> - Any markup can go here. - <br /> - Bigger task item - <br /> - Another line - </div> - </ExperimentalListItem> - <ExperimentalListItem onClick={ () => {} }> - <div>Any markup can go here.</div> - </ExperimentalListItem> - <ExperimentalListItem onClick={ () => {} }> - <div>Any markup can go here.</div> - </ExperimentalListItem> - </ExperimentalCollapsibleList> - ); -}; - -ExperimentalCollapsibleListExample.storyName = - 'ExperimentalList with ExperimentalCollapsibleListItem.'; diff --git a/plugins/woocommerce-admin/packages/components/src/pill/pill.js b/plugins/woocommerce-admin/packages/components/src/pill/pill.js index 5c49d1a2373..767809324d9 100644 --- a/plugins/woocommerce-admin/packages/components/src/pill/pill.js +++ b/plugins/woocommerce-admin/packages/components/src/pill/pill.js @@ -1,7 +1,7 @@ /** - * External dependencies + * Internal dependencies */ -import { Text } from '@woocommerce/experimental'; +import { Text } from '../experimental'; export function Pill( { children } ) { return ( diff --git a/plugins/woocommerce-admin/packages/components/src/summary/number.js b/plugins/woocommerce-admin/packages/components/src/summary/number.js index 8f279f17831..e142692c5e1 100644 --- a/plugins/woocommerce-admin/packages/components/src/summary/number.js +++ b/plugins/woocommerce-admin/packages/components/src/summary/number.js @@ -7,12 +7,12 @@ import classnames from 'classnames'; import ChevronDownIcon from 'gridicons/dist/chevron-down'; import { isNil, noop } from 'lodash'; import PropTypes from 'prop-types'; -import { Text } from '@woocommerce/experimental'; /** * Internal dependencies */ import Link from '../link'; +import { Text } from '../experimental'; /** * A component to show a value, label, and optionally a change percentage and children node. Can also act as a link to a specific report focus. diff --git a/plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/index.js b/plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/index.js new file mode 100644 index 00000000000..b7dd184d5ec --- /dev/null +++ b/plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/index.js @@ -0,0 +1,78 @@ +/** + * External dependencies + */ +import { withConsole } from '@storybook/addon-console'; +/** + * Internal dependencies + */ +import { List, ListItem, CollapsibleList } from '../../'; +import './style.scss'; + +export default { + title: 'WooCommerce Admin/experimental/List', + component: List, + decorators: [ ( storyFn, context ) => withConsole()( storyFn )( context ) ], +}; + +export const Default = () => { + return ( + <List> + <ListItem disableGutters onClick={ () => {} }> + <div>Without gutters no padding is added to the list item.</div> + </ListItem> + <ListItem onClick={ () => {} }> + <div>Any markup can go here.</div> + </ListItem> + <ListItem onClick={ () => {} }> + <div>Any markup can go here.</div> + </ListItem> + <ListItem onClick={ () => {} }> + <div>Any markup can go here.</div> + </ListItem> + </List> + ); +}; + +Default.storyName = 'List / ListItem.'; + +export const CollapsibleListExample = () => { + return ( + <CollapsibleList + collapseLabel="Show less" + expandLabel="Show more items" + show={ 2 } + onCollapse={ () => { + // eslint-disable-next-line no-console + console.log( 'collapsed' ); + } } + onExpand={ () => { + // eslint-disable-next-line no-console + console.log( 'expanded' ); + } } + > + <ListItem onClick={ () => {} }> + <div>Any markup can go here.</div> + </ListItem> + <ListItem onClick={ () => {} }> + <div>Any markup can go here.</div> + </ListItem> + <ListItem onClick={ () => {} }> + <div> + Any markup can go here. + <br /> + Bigger task item + <br /> + Another line + </div> + </ListItem> + <ListItem onClick={ () => {} }> + <div>Any markup can go here.</div> + </ListItem> + <ListItem onClick={ () => {} }> + <div>Any markup can go here.</div> + </ListItem> + </CollapsibleList> + ); +}; + +CollapsibleListExample.storyName = 'List with CollapsibleListItem.'; diff --git a/plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/style.scss b/plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/style.scss new file mode 100644 index 00000000000..75abea1a79d --- /dev/null +++ b/plugins/woocommerce-admin/packages/experimental/src/experimental-list/stories/style.scss @@ -0,0 +1,11 @@ +.storybook-custom-list { + border: 1px solid $gray-400; + border-radius: 2px; + padding: 0; + + .woocommerce-list__item { + &:not(:first-child) { + border-top: 1px solid $gray-200; + } + } +} diff --git a/plugins/woocommerce-admin/storybook/main.js b/plugins/woocommerce-admin/storybook/main.js index efa943326de..98c359b878b 100644 --- a/plugins/woocommerce-admin/storybook/main.js +++ b/plugins/woocommerce-admin/storybook/main.js @@ -2,6 +2,8 @@ module.exports = { stories: [ // WooCommerce Admin / @woocommerce/components components '../packages/components/src/**/stories/*.js', + // WooCommerce Admin / @woocommerce/experimental components + '../packages/experimental/src/**/stories/*.js', '../client/**/stories/*.js', ], addons: [ diff --git a/plugins/woocommerce-admin/storybook/webpack.config.js b/plugins/woocommerce-admin/storybook/webpack.config.js index ab525b4a4c9..9fb04e955e6 100644 --- a/plugins/woocommerce-admin/storybook/webpack.config.js +++ b/plugins/woocommerce-admin/storybook/webpack.config.js @@ -18,6 +18,7 @@ const wcAdminPackages = [ 'number', 'data', 'tracks', + 'experimental', ]; module.exports = ( { config: storybookConfig } ) => {