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