/**
* External dependencies
*/
import { Story, Meta } from '@storybook/react';
import {
useValidationContext,
ValidationContextProvider,
} from '@woocommerce/base-context';
import { useState, useEffect } from '@wordpress/element';
/**
* Internal dependencies
*/
import { CountryInput, CountryInputWithCountriesProps } from '..';
import { countries } from './countries-filler';
type CountryCode = keyof typeof countries;
export default {
title: 'WooCommerce Blocks/@base-components/CountryInput',
component: CountryInput,
args: {
countries,
autoComplete: 'off',
id: 'country',
label: 'Countries: ',
required: false,
},
argTypes: {
countries: { control: false },
options: { table: { disable: true } },
value: { control: false },
},
decorators: [
( StoryComponent ) => (
<ValidationContextProvider>
<StoryComponent />
</ValidationContextProvider>
),
],
} as Meta< CountryInputWithCountriesProps >;
const Template: Story< CountryInputWithCountriesProps > = ( args ) => {
const [ selectedCountry, selectCountry ] = useState< CountryCode | '' >(
''
);
const { clearValidationError, showValidationError } =
useValidationContext();
useEffect( () => {
showValidationError( 'country' );
}, [ showValidationError ] );
function updateCountry( country: CountryCode ) {
clearValidationError( 'country' );
selectCountry( country );
}
return (
<CountryInput
{ ...args }
onChange={ ( value ) => updateCountry( value as CountryCode ) }
value={ selectedCountry }
/>
);
};
export const Default = Template.bind( {} );
export const WithError = Template.bind( {} );
WithError.args = {
errorId: 'country',
errorMessage: 'Please select a country',
required: true,
};