houdini/app/javascript/components/formik/MoneyTextField.stories.tsx

// License: LGPL-3.0-or-later
import * as React from 'react';

import { Money } from '../../common/money';
import { useEffect } from 'react';
import { Formik, Field, useFormikContext } from 'formik';
import { MoneyTextField } from './index';
import { action } from '@storybook/addon-actions';

function FormikInner(props: { onChange:(args:{value:Money})=> void}) {
	const context = useFormikContext<{value:Money}>();
	const {value} = context.values;
	const {onChange} = props;
	useEffect(() => {
		onChange({value});
	}, [value, onChange]);

	return <><div><span aria-label="cents">{value.cents}</span><span aria-label="currency">{value.currency}</span></div>
		<Field component={MoneyTextField} name="value" aria-label="field" /></>;
}

function FormikHandler(props: { onChange:(args:{value:Money})=> void, value: Money}) {

	const {value, ...innerFormikProps} = props;
	return (<Formik initialValues={{ value }} onSubmit={() => { console.log("submitted");}} enableReinitialize={true}>
		<FormikInner {...innerFormikProps} />
	</Formik>);
}

FormikHandler.defaultProps = {
	// eslint-disable-next-line @typescript-eslint/no-empty-function
	onChange: () => {},
	locale: 'en',
};
export default { title: 'MoneyTextField' };

export function usd100() {
	const usd100 = Money.fromCents(100, 'usd');
	return <FormikHandler onChange={action('on-change')} value={usd100}/>;
}

export function jpy100() {
	const jpy100 = Money.fromCents(100, 'jpy');
	return <FormikHandler onChange={action('on-change')} value={jpy100}/>;
}