Migrate some stories to use @storybook/addon-controls

Add a comment for @storybook/addon-knobs
woocommerce · Mar 17, 2022 · 2528aed · 2528aed
1 parent 8db1f58
commit 2528aed
Show file tree

Hide file tree

Showing 8 changed files with 117 additions and 48 deletions.
diff --git 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
@@ -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
@@ -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 = () => (
-	<Chart
-		data={ data }
-		legendPosition={ select(
-			'Legend Position',
-			[ undefined, 'bottom', 'side', 'top', 'hidden' ],
-			undefined
-		) }
-	/>
+export const Default = ( { legendPosition } ) => (
+	<Chart data={ data } legendPosition={ legendPosition } />
 );
diff --git 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,22 +12,25 @@ 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 );
 
 	return (
 		<Pagination
 			page={ statePage }
 			perPage={ statePerPage }
-			total={ number( 'Total', 500 ) }
-			showPagePicker={ boolean( 'Page Picker', true ) }
-			showPerPagePicker={ boolean( 'Per Page Picker', true ) }
-			showPageArrowsLabel={ boolean( 'Page Arrows Label', true ) }
 			onPageChange={ ( newPage ) => 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
@@ -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 = () => (
-	<Rating
-		rating={ number( 'Rating', 4.5 ) }
-		totalStars={ number( 'Total Stars', Rating.defaultProps.totalStars ) }
-		size={ number( 'Size', Rating.defaultProps.size ) }
-	/>
-);
+export const Default = ( args ) => <Rating { ...args } />;
diff --git 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 = () => <SearchListControlExample />;
+export const Basic = ( args ) => <SearchListControlExample { ...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',
+			},
+		},
+	},
 };