Update stories and types

WordPress · Jan 18, 2024 · 007aba0 · 007aba0
1 parent 14f9009
commit 007aba0
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 28 deletions.
diff --git a/packages/components/src/custom-select-control-v2/legacy-adapter.tsx b/packages/components/src/custom-select-control-v2/legacy-adapter.tsx
@@ -8,7 +8,7 @@ import type { CustomSelectProps, LegacyCustomSelectProps } from './types';
 function isLegacy( props: any ): props is LegacyCustomSelectProps {
 	return (
 		typeof props.options !== 'undefined' ||
-		props.__experimentalShowSelectedHint !== undefined
+		typeof props.__experimentalShowSelectedHint !== 'undefined'
 	);
 }
 

diff --git a/packages/components/src/custom-select-control-v2/stories/default.story.tsx b/packages/components/src/custom-select-control-v2/stories/default.story.tsx
@@ -1,4 +1,3 @@
-//@ts-nocheck
 /**
  * External dependencies
  */
@@ -49,16 +48,16 @@ const meta: Meta< typeof NewCustomSelect > = {
 };
 export default meta;
 
-const Template: StoryFn< typeof CustomSelect > = ( props ) => {
+const Template: StoryFn< typeof NewCustomSelect > = ( props ) => {
 	return <CustomSelect { ...props } />;
 };
 
-const ControlledTemplate: StoryFn< typeof CustomSelect > = ( props ) => {
+const ControlledTemplate: StoryFn< typeof NewCustomSelect > = ( props ) => {
 	const [ value, setValue ] = useState< string | string[] >();
 	return (
 		<CustomSelect
 			{ ...props }
-			onChange={ ( nextValue ) => {
+			onChange={ ( nextValue: string | string[] ) => {
 				setValue( nextValue );
 				props.onChange?.( nextValue );
 			} }

diff --git a/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx b/packages/components/src/custom-select-control-v2/stories/legacy.story.tsx
@@ -1,4 +1,3 @@
-//@ts-nocheck
 /**
  * External dependencies
  */
@@ -13,7 +12,7 @@ import { useState } from '@wordpress/element';
  * Internal dependencies
  */
 import LegacyCustomSelect from '../legacy-component';
-import { CustomSelect, CustomSelectItem } from '..';
+import { CustomSelect } from '..';
 
 const meta: Meta< typeof LegacyCustomSelect > = {
 	title: 'Components (Experimental)/CustomSelectControl v2/Legacy',
@@ -43,8 +42,14 @@ const meta: Meta< typeof LegacyCustomSelect > = {
 };
 export default meta;
 
-export const Default: StoryFn = () => {
-	const options = [
+const Template: StoryFn< typeof LegacyCustomSelect > = ( props ) => {
+	return <CustomSelect { ...props } />;
+};
+
+export const Default = Template.bind( {} );
+Default.args = {
+	label: 'Font Size',
+	options: [
 		{
 			key: 'small',
 			name: 'Small',
@@ -65,13 +70,24 @@ export const Default: StoryFn = () => {
 			name: 'Huge',
 			style: { fontSize: '300%' },
 		},
-	];
-
-	return <CustomSelect label="Font Size" options={ options } />;
+	],
 };
 
-export const Controlled: StoryFn = () => {
-	const options = [
+export const Controlled: StoryFn< typeof LegacyCustomSelect > = ( props ) => {
+	const [ fontSize, setFontSize ] = useState( props.options[ 0 ] );
+
+	const onChange: ( typeof props )[ 'onChange' ] = ( changeObject ) => {
+		setFontSize( changeObject.selectedItem );
+		props.onChange?.( changeObject );
+	};
+
+	return (
+		<CustomSelect { ...props } onChange={ onChange } value={ fontSize } />
+	);
+};
+Controlled.args = {
+	label: 'Font Size',
+	options: [
 		{
 			key: 'small',
 			name: 'Small',
@@ -92,18 +108,5 @@ export const Controlled: StoryFn = () => {
 			name: 'Huge',
 			style: { fontSize: '300%' },
 		},
-	];
-
-	const [ fontSize, setFontSize ] = useState( options[ 0 ] );
-
-	return (
-		<CustomSelect
-			label="Font Size"
-			options={ options }
-			onChange={ ( { selectedItem } ) => {
-				setFontSize( selectedItem );
-			} }
-			value={ options.find( ( option ) => option.key === fontSize.key ) }
-		/>
-	);
+	],
 };