From 2528aedbbeded5310637a3df29f0ffb5d52af16f Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Thu, 17 Mar 2022 16:31:09 +0800 Subject: [PATCH] Migrate some stories to use @storybook/addon-controls Add a comment for @storybook/addon-knobs --- package.json | 1 + packages/components/package.json | 3 +- .../components/src/chart/stories/index.js | 25 +++---- .../src/pagination/stories/index.js | 15 ++-- .../components/src/rating/stories/index.js | 18 ++--- .../src/search-list-control/stories/index.js | 32 ++++++--- pnpm-lock.yaml | 68 +++++++++++++++++-- storybook/.storybook/main.js | 3 + 8 files changed, 117 insertions(+), 48 deletions(-) diff --git a/package.json b/package.json index 16f1f24ab7f..0a04c3f5f1f 100644 --- a/package.json +++ b/package.json @@ -156,6 +156,7 @@ "@storybook/addon-a11y": "^6.4.19", "@storybook/addon-actions": "^6.4.19", "@storybook/addon-console": "^1.2.3", + "@storybook/addon-controls": "^6.4.19", "@storybook/addon-docs": "^6.4.19", "@storybook/addon-knobs": "^6.4.0", "@storybook/addon-links": "^6.4.19", diff --git a/packages/components/package.json b/packages/components/package.json index 0c51994e70f..044392495c2 100644 --- a/packages/components/package.json +++ b/packages/components/package.json @@ -27,7 +27,6 @@ "types": "build-types", "dependencies": { "@automattic/interpolate-components": "^1.2.0", - "@storybook/addon-knobs": "^6.4.0", "@woocommerce/csv-export": "workspace:*", "@woocommerce/currency": "workspace:*", "@woocommerce/data": "workspace:*", @@ -80,7 +79,9 @@ "@babel/core": "^7.17.5", "@storybook/addon-actions": "^6.4.0", "@storybook/addon-console": "^1.2.3", + "@storybook/addon-controls": "^6.4.19", "@storybook/addon-docs": "^6.4.19", + "@storybook/addon-knobs": "^6.4.0", "@storybook/addon-links": "^6.4.19", "@storybook/addons": "^6.4.0", "@storybook/api": "^6.4.0", diff --git a/packages/components/src/chart/stories/index.js b/packages/components/src/chart/stories/index.js index 4ff9136ff78..369058198b9 100644 --- a/packages/components/src/chart/stories/index.js +++ b/packages/components/src/chart/stories/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { select } from '@storybook/addon-knobs'; - /** * Internal dependencies */ @@ -186,15 +181,17 @@ const data = [ export default { title: 'WooCommerce Admin/components/Chart', component: Chart, + args: { + legendPosition: undefined, + }, + argTypes: { + legendPosition: { + control: { type: 'select' }, + options: [ undefined, 'bottom', 'side', 'top', 'hidden' ], + }, + }, }; -export const Default = () => ( - +export const Default = ( { legendPosition } ) => ( + ); diff --git a/packages/components/src/pagination/stories/index.js b/packages/components/src/pagination/stories/index.js index 920d6792407..094a74e0be2 100644 --- a/packages/components/src/pagination/stories/index.js +++ b/packages/components/src/pagination/stories/index.js @@ -1,7 +1,7 @@ /** * External dependencies */ -import { number, boolean } from '@storybook/addon-knobs'; + import { createElement, useState } from '@wordpress/element'; /** @@ -12,9 +12,15 @@ import Pagination from '../'; export default { title: 'WooCommerce Admin/components/Pagination', component: Pagination, + args: { + total: 500, + showPagePicker: true, + showPerPagePicker: true, + showPageArrowsLabel: true, + }, }; -export const Default = () => { +export const Default = ( args ) => { const [ statePage, setPage ] = useState( 2 ); const [ statePerPage, setPerPage ] = useState( 50 ); @@ -22,12 +28,9 @@ export const Default = () => { setPage( newPage ) } onPerPageChange={ ( newPerPage ) => setPerPage( newPerPage ) } + { ...args } /> ); }; diff --git a/packages/components/src/rating/stories/index.js b/packages/components/src/rating/stories/index.js index 041f1f1586d..c3d57d32e0e 100644 --- a/packages/components/src/rating/stories/index.js +++ b/packages/components/src/rating/stories/index.js @@ -1,8 +1,3 @@ -/** - * External dependencies - */ -import { number } from '@storybook/addon-knobs'; - /** * Internal dependencies */ @@ -11,12 +6,11 @@ import Rating from '../'; export default { title: 'WooCommerce Admin/components/Rating', component: Rating, + args: { + rating: 4.5, + totalStars: Rating.defaultProps.totalStars, + size: Rating.defaultProps.size, + }, }; -export const Default = () => ( - -); +export const Default = ( args ) => ; diff --git a/packages/components/src/search-list-control/stories/index.js b/packages/components/src/search-list-control/stories/index.js index 96dc25b8c81..3b12300a605 100644 --- a/packages/components/src/search-list-control/stories/index.js +++ b/packages/components/src/search-list-control/stories/index.js @@ -1,18 +1,12 @@ /** * External dependencies */ -import { boolean } from '@storybook/addon-knobs'; import { SearchListControl } from '@woocommerce/components'; import { useState } from '@wordpress/element'; -const SearchListControlExample = () => { +const SearchListControlExample = ( { showCount, isCompact, isSingle } ) => { const [ selected, setSelected ] = useState( [] ); const [ loading, setLoading ] = useState( false ); - - const showCount = boolean( 'Show count', false ); - const isCompact = boolean( 'Compact', false ); - const isSingle = boolean( 'Single', false ); - let list = [ { id: 1, name: 'Apricots' }, { id: 2, name: 'Clementine' }, @@ -44,9 +38,31 @@ const SearchListControlExample = () => { ); }; -export const Basic = () => ; +export const Basic = ( args ) => ; export default { title: 'WooCommerce Admin/components/SearchListControl', component: SearchListControl, + args: { + showCount: false, + isCompact: false, + isSingle: false, + }, + argTypes: { + showCount: { + control: { + type: 'boolean', + }, + }, + isCompact: { + control: { + type: 'boolean', + }, + }, + isSingle: { + control: { + type: 'boolean', + }, + }, + }, }; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fb192fef7cd..21dce089bc6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -24,6 +24,7 @@ importers: '@storybook/addon-a11y': ^6.4.19 '@storybook/addon-actions': ^6.4.19 '@storybook/addon-console': ^1.2.3 + '@storybook/addon-controls': ^6.4.19 '@storybook/addon-docs': ^6.4.19 '@storybook/addon-knobs': ^6.4.0 '@storybook/addon-links': ^6.4.19 @@ -255,6 +256,7 @@ importers: '@storybook/addon-a11y': 6.4.19_react-dom@17.0.2+react@17.0.2 '@storybook/addon-actions': 6.4.19_react-dom@17.0.2+react@17.0.2 '@storybook/addon-console': 1.2.3_@storybook+addon-actions@6.4.19 + '@storybook/addon-controls': 6.4.19_3b387560b7c326e86205eb7f90518914 '@storybook/addon-docs': 6.4.19_fdfbd369b4f79989aa0b233f3ca8a37e '@storybook/addon-knobs': 6.4.0_6d3fd42cc2dc28673127a5aba3ab9a43 '@storybook/addon-links': 6.4.19_react-dom@17.0.2+react@17.0.2 @@ -414,6 +416,7 @@ importers: '@babel/core': ^7.17.5 '@storybook/addon-actions': ^6.4.0 '@storybook/addon-console': ^1.2.3 + '@storybook/addon-controls': ^6.4.19 '@storybook/addon-docs': ^6.4.19 '@storybook/addon-knobs': ^6.4.0 '@storybook/addon-links': ^6.4.19 @@ -481,7 +484,6 @@ importers: webpack-cli: ^3.3.12 dependencies: '@automattic/interpolate-components': 1.2.0_react@17.0.2 - '@storybook/addon-knobs': 6.4.0_6d3fd42cc2dc28673127a5aba3ab9a43 '@woocommerce/csv-export': link:../csv-export '@woocommerce/currency': link:../currency '@woocommerce/data': link:../data @@ -524,7 +526,9 @@ importers: '@babel/core': 7.17.5 '@storybook/addon-actions': 6.4.19_react-dom@17.0.2+react@17.0.2 '@storybook/addon-console': 1.2.3_@storybook+addon-actions@6.4.19 + '@storybook/addon-controls': 6.4.19_3b387560b7c326e86205eb7f90518914 '@storybook/addon-docs': 6.4.19_fdfbd369b4f79989aa0b233f3ca8a37e + '@storybook/addon-knobs': 6.4.0_6d3fd42cc2dc28673127a5aba3ab9a43 '@storybook/addon-links': 6.4.19_react-dom@17.0.2+react@17.0.2 '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 @@ -2611,6 +2615,7 @@ packages: '@emotion/stylis': 0.8.5 '@emotion/utils': 0.11.3 '@emotion/weak-memoize': 0.2.5 + dev: true /@emotion/cache/11.7.1: resolution: {integrity: sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==} @@ -2634,6 +2639,7 @@ packages: '@emotion/sheet': 0.9.4 '@emotion/utils': 0.11.3 react: 17.0.2 + dev: true /@emotion/css/10.0.27: resolution: {integrity: sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==} @@ -2641,6 +2647,7 @@ packages: '@emotion/serialize': 0.11.16 '@emotion/utils': 0.11.3 babel-plugin-emotion: 10.2.2 + dev: true /@emotion/css/11.7.1_@babel+core@7.17.5: resolution: {integrity: sha512-RUUgPlMZunlc7SE5A6Hg+VWRzb2cU6O9xlV78KCFgcnl25s7Qz/20oQg71iKudpLqk7xj0vhbJlwcJJMT0BOZg==} @@ -2711,6 +2718,7 @@ packages: '@emotion/unitless': 0.7.5 '@emotion/utils': 0.11.3 csstype: 2.6.19 + dev: true /@emotion/serialize/1.0.2: resolution: {integrity: sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==} @@ -2724,6 +2732,7 @@ packages: /@emotion/sheet/0.9.4: resolution: {integrity: sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA==} + dev: true /@emotion/sheet/1.1.0: resolution: {integrity: sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==} @@ -2780,12 +2789,14 @@ packages: /@emotion/stylis/0.8.5: resolution: {integrity: sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==} + dev: true /@emotion/unitless/0.7.5: resolution: {integrity: sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==} /@emotion/utils/0.11.3: resolution: {integrity: sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==} + dev: true /@emotion/utils/1.0.0: resolution: {integrity: sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==} @@ -3944,6 +3955,41 @@ packages: global: 4.4.0 dev: true + /@storybook/addon-controls/6.4.19_3b387560b7c326e86205eb7f90518914: + resolution: {integrity: sha512-JHi5z9i6NsgQLfG5WOeQE1AyOrM+QJLrjT+uOYx40bq+OC1yWHH7qHiphPP8kjJJhCZlaQk1qqXYkkQXgaeHSw==} + peerDependencies: + react: ^16.8.0 || ^17.0.0 + react-dom: ^16.8.0 || ^17.0.0 + peerDependenciesMeta: + react: + optional: true + react-dom: + optional: true + dependencies: + '@storybook/addons': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/api': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/client-logger': 6.4.19 + '@storybook/components': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/core-common': 6.4.19_3b387560b7c326e86205eb7f90518914 + '@storybook/csf': 0.0.2--canary.87bc651.0 + '@storybook/node-logger': 6.4.19 + '@storybook/store': 6.4.19_react-dom@17.0.2+react@17.0.2 + '@storybook/theming': 6.4.19_react-dom@17.0.2+react@17.0.2 + core-js: 3.21.1 + lodash: 4.17.21 + react: 17.0.2 + react-dom: 17.0.2_react@17.0.2 + ts-dedent: 2.2.0 + transitivePeerDependencies: + - '@types/react' + - eslint + - supports-color + - typescript + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + /@storybook/addon-docs/6.4.19_fdfbd369b4f79989aa0b233f3ca8a37e: resolution: {integrity: sha512-OEPyx/5ZXmZOPqIAWoPjlIP8Q/YfNjAmBosA8tmA8t5KCSiq/vpLcAvQhxqK6n0wk/B8Xp67Z8RpLfXjU8R3tw==} peerDependencies: @@ -4091,6 +4137,7 @@ packages: react-dom: 17.0.2_react@17.0.2 react-lifecycles-compat: 3.0.4 react-select: 3.2.0_react-dom@17.0.2+react@17.0.2 + dev: true /@storybook/addon-links/6.4.19_react-dom@17.0.2+react@17.0.2: resolution: {integrity: sha512-ebFHYlGDQkHSmI5QEJb1NxGNToVOLgjKkxXUe+JXX7AfHvrWiXVrN/57aOtBPZzj4h2jRPRTZgwR5glhPIlfEQ==} @@ -7894,6 +7941,7 @@ packages: escape-string-regexp: 1.0.5 find-root: 1.1.0 source-map: 0.5.7 + dev: true /babel-plugin-extract-import-names/1.6.22: resolution: {integrity: sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ==} @@ -8045,6 +8093,7 @@ packages: /babel-plugin-syntax-jsx/6.18.0: resolution: {integrity: sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=} + dev: true /babel-plugin-transform-class-properties/6.24.1: resolution: {integrity: sha1-anl2PqYdM9NvN7YRqp3vgagbRqw=} @@ -9437,6 +9486,7 @@ packages: resolution: {integrity: sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==} dependencies: toggle-selection: 1.0.6 + dev: true /copy-webpack-plugin/5.1.2_webpack@4.46.0: resolution: {integrity: sha512-Uh7crJAco3AjBvgAy9Z75CjK8IG+gxaErro71THQ+vv/bl4HaQcpkexAY8KVW/T6D2W2IRr+couF/knIRkZMIQ==} @@ -9812,6 +9862,7 @@ packages: /csstype/2.6.19: resolution: {integrity: sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ==} + dev: true /csstype/3.0.10: resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==} @@ -10295,6 +10346,7 @@ packages: /dom-walk/0.1.2: resolution: {integrity: sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w==} + dev: true /domain-browser/1.2.0: resolution: {integrity: sha512-jnjyiM6eRyZl2H+W8Q/zLMA481hzi0eszAaBUzIVnmYVDBbnLxVNnfu1HgEBvCbL+71FrxMl3E6lpKH7Ge3OXA==} @@ -10732,6 +10784,7 @@ packages: /escape-html/1.0.3: resolution: {integrity: sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=} + dev: true /escape-string-regexp/1.0.5: resolution: {integrity: sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=} @@ -11862,12 +11915,6 @@ packages: path-exists: 4.0.0 dev: true - /find-yarn-workspace-root/2.0.0: - resolution: {integrity: sha512-1IMnbjt4KzsQfnhnzNd8wUEgXZ44IzZaZmnLYx7D5FZlaHt2gW20Cri8Q+E/t5tIj4+epTBub+2Zxu/vNILzqQ==} - dependencies: - micromatch: 4.0.4 - dev: true - /findup-sync/0.3.0: resolution: {integrity: sha1-N5MKpdgWt3fANEXhlmzGeQpMCxY=} engines: {node: '>= 0.6.0'} @@ -12503,6 +12550,7 @@ packages: dependencies: min-document: 2.19.0 process: 0.11.10 + dev: true /globals/11.12.0: resolution: {integrity: sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==} @@ -16625,6 +16673,7 @@ packages: resolution: {integrity: sha1-e9KC4/WELtKVu3SM3Z8f+iyCRoU=} dependencies: dom-walk: 0.1.2 + dev: true /min-indent/1.0.1: resolution: {integrity: sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==} @@ -18420,6 +18469,7 @@ packages: /process/0.11.10: resolution: {integrity: sha1-czIwDoQBYb2j5podHZGn1LwW8YI=} engines: {node: '>= 0.6.0'} + dev: true /progress/2.0.3: resolution: {integrity: sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==} @@ -18905,6 +18955,7 @@ packages: dependencies: prop-types: 15.8.1 react: 17.0.2 + dev: true /react-inspector/5.1.1_react@17.0.2: resolution: {integrity: sha512-GURDaYzoLbW8pMGXwYPDBIv6nqei4kK7LPRZ9q9HCZF54wqXz/dnylBp/kfE9XmekBhHvLDdcYeyIwSrvtOiWg==} @@ -18925,6 +18976,7 @@ packages: /react-lifecycles-compat/3.0.4: resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} + dev: true /react-moment-proptypes/1.8.1: resolution: {integrity: sha512-Er940DxWoObfIqPrZNfwXKugjxMIuk1LAuEzn23gytzV6hKS/sw108wibi9QubfMN4h+nrlje8eUCSbQRJo2fQ==} @@ -19072,6 +19124,7 @@ packages: react-dom: 17.0.2_react@17.0.2 react-input-autosize: 3.0.0_react@17.0.2 react-transition-group: 4.4.2_react-dom@17.0.2+react@17.0.2 + dev: true /react-shallow-renderer/16.14.1_react@17.0.2: resolution: {integrity: sha512-rkIMcQi01/+kxiTE9D3fdS959U1g7gs+/rborw++42m1O9FAQiNI/UNRZExVUoAOprn4umcXf+pFRou8i4zuBg==} @@ -21504,6 +21557,7 @@ packages: /toggle-selection/1.0.6: resolution: {integrity: sha1-bkWxJj8gF/oKzH2J14sVuL932jI=} + dev: true /toidentifier/1.0.1: resolution: {integrity: sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==} diff --git a/storybook/.storybook/main.js b/storybook/.storybook/main.js index 02e7d1e6e3c..740273a414d 100644 --- a/storybook/.storybook/main.js +++ b/storybook/.storybook/main.js @@ -10,6 +10,9 @@ module.exports = { ], addons: [ '@storybook/addon-docs', + '@storybook/addon-controls', + // This package has been deprecated, in favor of @storybook/addon-controls + // However, it is still needed for the story because changing the values with @storybook/addon-controls makes it crash. It seems that we cannot have jsx elements in props. '@storybook/addon-knobs', '@storybook/addon-viewport', '@storybook/addon-a11y',