From fbcc931c757a2bb5adbd4f4bffbf662b2c14cd9f Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 22 Nov 2023 16:14:52 -0800 Subject: [PATCH 1/4] BoxControl: Update story and refactor to Typescript --- .../src/box-control/stories/index.story.js | 75 ------------------ .../src/box-control/stories/index.story.tsx | 76 +++++++++++++++++++ 2 files changed, 76 insertions(+), 75 deletions(-) delete mode 100644 packages/components/src/box-control/stories/index.story.js create mode 100644 packages/components/src/box-control/stories/index.story.tsx diff --git a/packages/components/src/box-control/stories/index.story.js b/packages/components/src/box-control/stories/index.story.js deleted file mode 100644 index adbd0e15f7c441..00000000000000 --- a/packages/components/src/box-control/stories/index.story.js +++ /dev/null @@ -1,75 +0,0 @@ -/** - * WordPress dependencies - */ -import { useState } from '@wordpress/element'; - -/** - * Internal dependencies - */ -import BoxControl from '../'; - -export default { - title: 'Components (Experimental)/BoxControl', - component: BoxControl, -}; - -export const _default = () => { - return ; -}; - -const defaultSideValues = { - top: '10px', - right: '10px', - bottom: '10px', - left: '10px', -}; - -function DemoExample( { - sides, - defaultValues = defaultSideValues, - splitOnAxis = false, -} ) { - const [ values, setValues ] = useState( defaultValues ); - - return ( - - ); -} - -export const ArbitrarySides = () => { - return ( - - ); -}; - -export const SingleSide = () => { - return ( - - ); -}; - -export const AxialControls = () => { - return ; -}; - -export const AxialControlsWithSingleSide = () => { - return ( - - ); -}; diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx new file mode 100644 index 00000000000000..3186ba23c5776f --- /dev/null +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -0,0 +1,76 @@ +/** + * External dependencies + */ +import type { Meta, StoryFn } from '@storybook/react'; + +/** + * WordPress dependencies + */ +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies + */ +import BoxControl from '../'; +import type { BoxControlValue } from '../types'; + +const meta: Meta< typeof BoxControl > = { + title: 'Components (Experimental)/BoxControl', + component: BoxControl, + argTypes: { + onChange: { action: 'onChange' }, + }, + parameters: { + controls: { expanded: true }, + docs: { canvas: { sourceState: 'shown' } }, + }, +}; +export default meta; + +const defaultSideValues = { + top: '10px', + right: '10px', + bottom: '10px', + left: '10px', +}; + +const Template: StoryFn< typeof BoxControl > = ( props ) => { + const [ values, setValues ] = + useState< BoxControlValue >( defaultSideValues ); + + return ( + setValues( nextValue ) } + /> + ); +}; + +export const Default = Template.bind( {} ); +Default.args = { + label: 'Box Control', + values: undefined, +}; + +export const ArbitrarySides = Template.bind( {} ); +ArbitrarySides.args = { + sides: [ 'top', 'bottom' ], +}; + +export const SingleSide = Template.bind( {} ); +SingleSide.args = { + sides: [ 'bottom' ], +}; + +export const AxialControls = Template.bind( {} ); +AxialControls.args = { + splitOnAxis: true, +}; + +export const AxialControlsWithSingleSide = Template.bind( {} ); +AxialControlsWithSingleSide.args = { + sides: [ 'horizontal' ], + splitOnAxis: true, +}; From 881e973ddc71d652b2f98fb9f4764e4e27e6da6f Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 23 Nov 2023 12:05:53 -0800 Subject: [PATCH 2/4] Cleanup and refine story based on feedback --- .../src/box-control/stories/index.story.tsx | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index 3186ba23c5776f..7bbc9e84b6418e 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -12,15 +12,15 @@ import { useState } from '@wordpress/element'; * Internal dependencies */ import BoxControl from '../'; -import type { BoxControlValue } from '../types'; const meta: Meta< typeof BoxControl > = { title: 'Components (Experimental)/BoxControl', component: BoxControl, argTypes: { - onChange: { action: 'onChange' }, + values: { control: null }, }, parameters: { + actions: { argTypesRegex: '^on.*' }, controls: { expanded: true }, docs: { canvas: { sourceState: 'shown' } }, }, @@ -36,41 +36,47 @@ const defaultSideValues = { const Template: StoryFn< typeof BoxControl > = ( props ) => { const [ values, setValues ] = - useState< BoxControlValue >( defaultSideValues ); + useState< ( typeof props )[ 'values' ] >( defaultSideValues ); return ( setValues( nextValue ) } + onChange={ ( nextValue ) => { + setValues( nextValue ); + props.onChange?.( nextValue ); + } } /> ); }; export const Default = Template.bind( {} ); Default.args = { - label: 'Box Control', values: undefined, + label: 'Label', }; export const ArbitrarySides = Template.bind( {} ); ArbitrarySides.args = { + ...Default.args, sides: [ 'top', 'bottom' ], }; export const SingleSide = Template.bind( {} ); SingleSide.args = { + ...Default.args, sides: [ 'bottom' ], }; export const AxialControls = Template.bind( {} ); AxialControls.args = { + ...Default.args, splitOnAxis: true, }; export const AxialControlsWithSingleSide = Template.bind( {} ); AxialControlsWithSingleSide.args = { + ...Default.args, sides: [ 'horizontal' ], splitOnAxis: true, }; From 219c1f50d4bb54eaaa1a15b6133c50bc08727631 Mon Sep 17 00:00:00 2001 From: brookewp Date: Thu, 23 Nov 2023 12:11:56 -0800 Subject: [PATCH 3/4] Add Uncontrolled and Controlled templates and Controlled example --- .../src/box-control/stories/index.story.tsx | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index 7bbc9e84b6418e..3b293dc933fc25 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -34,7 +34,11 @@ const defaultSideValues = { left: '10px', }; -const Template: StoryFn< typeof BoxControl > = ( props ) => { +const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => { + return ; +}; + +const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => { const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >( defaultSideValues ); @@ -50,31 +54,35 @@ const Template: StoryFn< typeof BoxControl > = ( props ) => { ); }; -export const Default = Template.bind( {} ); +export const Default = TemplateUncontrolled.bind( {} ); Default.args = { - values: undefined, label: 'Label', }; -export const ArbitrarySides = Template.bind( {} ); +export const Controlled = TemplateControlled.bind( {} ); +Controlled.args = { + ...Default.args, +}; + +export const ArbitrarySides = TemplateControlled.bind( {} ); ArbitrarySides.args = { ...Default.args, sides: [ 'top', 'bottom' ], }; -export const SingleSide = Template.bind( {} ); +export const SingleSide = TemplateControlled.bind( {} ); SingleSide.args = { ...Default.args, sides: [ 'bottom' ], }; -export const AxialControls = Template.bind( {} ); +export const AxialControls = TemplateControlled.bind( {} ); AxialControls.args = { ...Default.args, splitOnAxis: true, }; -export const AxialControlsWithSingleSide = Template.bind( {} ); +export const AxialControlsWithSingleSide = TemplateControlled.bind( {} ); AxialControlsWithSingleSide.args = { ...Default.args, sides: [ 'horizontal' ], From 8b6ba7a7940bd63b98b01607c4a3d485e9e900bb Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 24 Nov 2023 17:44:37 -0800 Subject: [PATCH 4/4] Remove default values and fix values control --- .../src/box-control/stories/index.story.tsx | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/packages/components/src/box-control/stories/index.story.tsx b/packages/components/src/box-control/stories/index.story.tsx index 3b293dc933fc25..1b6604048f6d52 100644 --- a/packages/components/src/box-control/stories/index.story.tsx +++ b/packages/components/src/box-control/stories/index.story.tsx @@ -17,7 +17,7 @@ const meta: Meta< typeof BoxControl > = { title: 'Components (Experimental)/BoxControl', component: BoxControl, argTypes: { - values: { control: null }, + values: { control: { type: null } }, }, parameters: { actions: { argTypesRegex: '^on.*' }, @@ -27,20 +27,12 @@ const meta: Meta< typeof BoxControl > = { }; export default meta; -const defaultSideValues = { - top: '10px', - right: '10px', - bottom: '10px', - left: '10px', -}; - const TemplateUncontrolled: StoryFn< typeof BoxControl > = ( props ) => { return ; }; const TemplateControlled: StoryFn< typeof BoxControl > = ( props ) => { - const [ values, setValues ] = - useState< ( typeof props )[ 'values' ] >( defaultSideValues ); + const [ values, setValues ] = useState< ( typeof props )[ 'values' ] >(); return (