@wordpress/components 39.0.0 → 40.0.0

package/src/validated-form-controls/components/stories/combobox-control.story.tsx

@@ -1,56 +0,0 @@
-import { useState } from '@wordpress/element';
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import { ValidatedComboboxControl } from '../combobox-control';
-import { formDecorator } from './story-utils';
-
-const meta: Meta< typeof ValidatedComboboxControl > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedComboboxControl',
-	id: 'components-validatedcomboboxcontrol',
-	component: ValidatedComboboxControl,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		value: { control: false },
-	},
-};
-export default meta;
-
-export const Default: StoryObj< typeof ValidatedComboboxControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] =
-			useState<
-				React.ComponentProps<
-					typeof ValidatedComboboxControl
-				>[ 'value' ]
-			>();
-
-		return (
-			<ValidatedComboboxControl
-				{ ...args }
-				value={ value }
-				onChange={ ( newValue ) => {
-					setValue( newValue );
-					onChange?.( newValue );
-				} }
-				customValidity={
-					value === 'a'
-						? {
-								type: 'invalid',
-								message: 'Option A is not allowed.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-Default.args = {
-	required: true,
-	label: 'Combobox',
-	help: 'Option A is not allowed.',
-	options: [
-		{ value: 'a', label: 'Option A (not allowed)' },
-		{ value: 'b', label: 'Option B' },
-	],
-};

package/src/validated-form-controls/components/stories/form-token-field.story.tsx

@@ -1,60 +0,0 @@
-import { useState } from '@wordpress/element';
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import { ValidatedFormTokenField } from '../form-token-field';
-import { formDecorator } from './story-utils';
-import type { TokenItem } from '../../../form-token-field/types';
-
-const meta: Meta< typeof ValidatedFormTokenField > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedFormTokenField',
-	id: 'components-validatedformtokenfield',
-	component: ValidatedFormTokenField,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		onChange: { control: false },
-		value: { control: false },
-		customValidity: { control: false },
-	},
-};
-export default meta;
-
-/**
- * This demonstrates how array validation would work with the ValidatedFormTokenField component.
- */
-export const Default: StoryObj< typeof ValidatedFormTokenField > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState< ( string | TokenItem )[] >( [] );
-
-		return (
-			<ValidatedFormTokenField
-				{ ...args }
-				value={ value }
-				onChange={ ( newValue ) => {
-					setValue( newValue );
-					onChange?.( newValue );
-				} }
-				customValidity={
-					value?.some( ( token ) => {
-						const tokenValue =
-							typeof token === 'string' ? token : token.value;
-						return tokenValue.toLowerCase() === 'error';
-					} )
-						? {
-								type: 'invalid',
-								message: 'The tag "error" is not allowed.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-
-Default.args = {
-	required: true,
-	label: 'Tags',
-	placeholder: 'Add tags...',
-	suggestions: [ 'Posts', 'Pages', 'Media', 'Error' ],
-	__experimentalExpandOnFocus: true,
-};

package/src/validated-form-controls/components/stories/input-control.story.tsx

@@ -1,126 +0,0 @@
-import { useState } from '@wordpress/element';
-import type { StoryObj, Meta } from '@storybook/react-vite';
-import { seen, unseen } from '@wordpress/icons';
-import { ValidatedInputControl } from '../input-control';
-import { formDecorator } from './story-utils';
-import InputControlSuffixWrapper from '../../../input-control/input-suffix-wrapper';
-import { Button } from '../../../button';
-
-const meta: Meta< typeof ValidatedInputControl > = {
-	title: 'Components/Selection & Input/Validated Form Controls/ValidatedInputControl',
-	id: 'components-validatedinputcontrol',
-	component: ValidatedInputControl,
-	tags: [ 'status-private' ],
-	decorators: formDecorator,
-	args: { onChange: () => {} },
-	argTypes: {
-		__unstableInputWidth: { control: { type: 'text' } },
-		__unstableStateReducer: { control: false },
-		onChange: { control: false },
-		prefix: { control: false },
-		suffix: { control: false },
-		type: { control: { type: 'text' } },
-		value: { control: false },
-	},
-};
-export default meta;
-
-export const Default: StoryObj< typeof ValidatedInputControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState< string | undefined >( '' );
-
-		return (
-			<ValidatedInputControl
-				{ ...args }
-				value={ value }
-				onChange={ ( newValue, ...rest ) => {
-					setValue( newValue );
-					onChange?.( newValue, ...rest );
-				} }
-				customValidity={
-					value?.toLowerCase() === 'error'
-						? {
-								type: 'invalid',
-								message: 'The word "error" is not allowed.',
-						  }
-						: undefined
-				}
-			/>
-		);
-	},
-};
-Default.args = {
-	required: true,
-	label: 'Input',
-	help: 'The word "error" will trigger an error.',
-};
-
-/**
- * This demonstrates how password validation would work with the standard implementation.
- *
- * We are planning to move to a custom implementation more tailored to the password use case.
- */
-export const Password: StoryObj< typeof ValidatedInputControl > = {
-	render: function Template( { onChange, ...args } ) {
-		const [ value, setValue ] = useState< string | undefined >( '' );
-		const [ visible, setVisible ] = useState( false );
-
-		return (
-			<ValidatedInputControl
-				{ ...args }
-				type={ visible ? 'text' : 'password' }
-				suffix={
-					<InputControlSuffixWrapper variant="control">
-						<Button
-							size="small"
-							icon={ visible ? unseen : seen }
-							onClick={ () => setVisible( ( v ) => ! v ) }
-							label={
-								visible ? 'Hide password' : 'Show password'
-							}
-						/>
-					</InputControlSuffixWrapper>
-				}
-				value={ value }
-				onChange={ ( newValue, ...rest ) => {
-					setValue( newValue );
-					onChange?.( newValue, ...rest );
-				} }
-				customValidity={ ( () => {
-					if ( ! /\d/.test( value ?? '' ) ) {
-						return {
-							type: 'invalid' as const,
-							message:
-								'Password must include at least one number.',
-						};
-					}
-					if ( ! /[A-Z]/.test( value ?? '' ) ) {
-						return {
-							type: 'invalid' as const,
-							message:
-								'Password must include at least one capital letter.',
-						};
-					}
-					if ( ! /[!@£$%^&*#]/.test( value ?? '' ) ) {
-						return {
-							type: 'invalid' as const,
-							message:
-								'Password must include at least one symbol.',
-						};
-					}
-					return undefined;
-				} )() }
-			/>
-		);
-	},
-};
-Password.args = {
-	required: true,
-	label: 'Password',
-	help: 'Minimum 8 characters, include a number, capital letter, and symbol (!@£$%^&*#).',
-	minLength: 8,
-};
-Password.argTypes = {
-	suffix: { control: false },
-	type: { control: false },
-};