Storybook with RHF

[oskar-gmerek]

Hello,

I trying to make React-Hook-Form work with Storybook.

I was followed the Smart Form Component approach (https://react-hook-form.com/advanced-usage#SmartFormComponent)

Currently, my situation looks like that:

1. if in my field component I have {...register('password') then form works correctly in React app but generating error "register is not a function" in Storybook.
2. When I change {...register('password') to ref={methods.register('password)} from userFormContext then is working in Storybook, but React app is crashed

Source Code:

input.js
export const Password = (props) => {
    const { register, error, ...rest } = props;
    return (
        <>
            <label htmlFor="input">

                <input
                    {...rest}
                    {...register('input')}
                />
            </label>
        </>
    );
};

input.stores.js
/* eslint-disable import/no-anonymous-default-export */
import React from 'react';
import { FormProvider, useForm } from 'react-hook-form';
import { useFormContext } from "react-hook-form";
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { Input } from './input';

// eslint-disable-next-line import/no-anonymous-default-export
export default {
    title: 'Example/Input',
    component: Input,
    argTypes: {
        onLogin: { action: 'onLogin' }
    }
};

function Template(args) {
    const schema = yup.object().shape({
        input: yup.string().required()
    });

    const methods = useForm({
        defaultValues: { input: '' },
        mode: 'onBlur',
        resolver: yupResolver(schema)
    });
    const { handleSubmit } = methods;

    const onSubmit = (data) => {
        console.log(data);
        args.onLogin(data);
    };

    return (
        <FormProvider {...methods}>
            <form onSubmit={handleSubmit(onSubmit)}>
                <Input />
            </form>
        </FormProvider>
    );
}

export const Default = Template.bind({});
Default.args = {};

Would there be someone nice enough to show me how to handle it?

[bluebill1049]

maybe worth creating an issue with reproducible codesandbox at the storybook repo.

[Maximilon]

Did you try to import register in the component level itself? Something seems weird with how you are passing props to the component. Does it not need the useForm hook to access register itself?

On the documentation I can see something like:
const { register } = useFormContext(); // retrieve all hook methods

see here: https://react-hook-form.com/api/useformcontext

[Moshyfawn]

Consider creating a codesanbox with the above example

[ritikbanger]

Approach 1:

1. Create a base component for storybook stories that do not use register/control method.
2. Create a wrapper having your base component as child, use Controller, register, control with this.
3. In the parent component, call the wrapper with register to have RHF work with storybook.

BaseComponent (call this in storybook) -> parent (WrapperComponent) -> parent (Component where you wish to use baseComponent)

Approach 2: If you wish to use register with storybook.

On code level:
BaseComponent

import React from 'react'
import { TextField } from '@material-ui/core'
import { makeStyles } from '@material-ui/core/styles'
import constants from '../../constants/storyBookConstants'
import colors from '../../util/colors'
import useLang from 'components/hooks/useLang'
import { ITextField } from './utility.type'

export const useStyles = makeStyles((theme) => ({
  commonTextBox: {
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: colors.grey.main,
      },
      '&.Mui-focused fieldset': {
        borderColor: colors.primary.dark,
      },
    },
    '& .Mui-focused': {
      color: theme.palette.common.black,
    },
    '& input': {
      color: theme.palette.common.black,
    },
  },
  textDisabled: {
    opacity: '0.5',
  },
}))

/**
 * Primary UI TextField component for user interaction.
 */
export const CommonTextField: React.FC<ITextField> = ({
  placeholder = '',
  variant = constants.variants['outlined'],
  type,
  label,
  name,
  disabled = false,
  storyBookDemo = false,
  register,
  ...props
}) => {
  const styleClasses = useStyles()
  const { f } = useLang()

  return (
    <TextField
      placeholder={placeholder}
      className={`${styleClasses.commonTextBox} ${disabled && styleClasses?.textDisabled}`}
      type={type}
      variant={variant}
      label={storyBookDemo ? label : f(label)}
      disabled={disabled}
      {...register(name)}
      {...props}
    />
  )
}

WrapperComponent

import React from 'react'
import { useFormContext, Controller } from 'react-hook-form'
import FormHelperText from '@material-ui/core/FormHelperText'
import { CommonTextField } from './CommonTextField'
import { ITextField } from './utility.type'
import { useYupError } from 'components/hooks/useYupError'

function InputWrapper(props: ITextField): JSX.Element {
  const { control } = useFormContext()
  const {
    name = '',
    label = '',
    required,
    errorobj,
    type,
    value,
    readOnly = false,
    maxLength = 25,
    register,
    minRows = 1,
    multiline = false,
    variant = 'outlined',
  } = props
  const { errorMessage, isError } = useYupError(name, errorobj)

  return (
    <>
      <Controller
        control={control}
        defaultValue={value}
        fullWidth={true}
        render={({ field: { onChange, onBlur } }) => (
          <CommonTextField
            variant={variant}
            fullWidth
            multiline={multiline}
            minRows={minRows}
            maxLength={maxLength}
            name={name}
            label={label}
            autoComplete='none'
            required={required}
            type={type}
            disabled={readOnly}
            defaultValue={value}
            onBlur={onBlur}
            onChange={(e) => {
              onChange(e, name)
            }}
            inputProps={{ maxLength, readOnly }}
            register={register}
          />
        )}
        error={isError}
        helperText={errorMessage}
        {...props}
      />
      {isError && <FormHelperText error={isError}>{errorMessage}</FormHelperText>}
    </>
  )
}
export default InputWrapper

Parent Component

<--some code -->
     <InputWrapper
                  errorobj={errors}
                  name='old_password'
                  label={f('app.change_password.old_password')}
                  required={true}
                  type='password'
                  className={commonStyleClasses.widthInput}
                  register={register}
                />

Storybook

import React from 'react'
import { Story, Meta } from '@storybook/react'
import locale from '../components/locale'
import { CommonTextField } from '../components/utilities/CommonTextField'
import { ITextField } from '../components/utilities/utility.type'
import constants from '../constants/storyBookConstants'
import { IntlProvider } from 'react-intl'
import { useForm } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'
export default {
  title: 'Ui Docs/TextField',
  component: CommonTextField,
} as Meta<typeof CommonTextField>

const Template: Story<ITextField> = (args) => {
  const schema = yup.object().shape({
    user: yup.string().required(),
  })
  const methods = useForm({
    defaultValues: { user: '' },
    resolver: yupResolver(schema),
  })
  const { register } = methods

  return (
    <IntlProvider messages={locale.messages[locale.lang]} locale={locale.lang} defaultLocale='en'>
      {' '}
      <CommonTextField {...args} register={register} />
    </IntlProvider>
  )
}

// TextField With Value:
export const TextFieldWithValue = Template.bind({})
TextFieldWithValue.args = {
  placeholder: constants.placeholder['name'],
  label: constants.label['name'],
  name: constants.label['name'],
  type: constants.type['text'],
  value: constants.value['demo_user'],
  variant: constants.variants['outlined'],
  storyBookDemo: true,
}

// Disabled TextField:
export const TextFieldDisabled = Template.bind({})
TextFieldDisabled.args = {
  placeholder: constants.placeholder['name'],
  label: constants.label['name'],
  name: constants.label['name'],
  type: constants.type['text'],
  value: constants.value['demo_user'],
  variant: constants.variants['outlined'],
  disabled: true,
  storyBookDemo: true,
}

[luiseduardovb]

can you share the repo or codesandbox with this full example?

[TrejGun]

We have crashed into this bug too.

[TheHanna]

My use case was slightly simpler, but I ended up using a decorator:

const meta = {
  title: 'Title',
  component: Component,
  decorators: [
    (Story) => (
      <FormProvider {...useForm()}>
        <Story />
      </FormProvider>
    )
  ],
  args: {
    name: 'name'
  },
} satisfies Meta<typeof Component>

[drewkiimon]

My (wo)man.

[christhorp]

I just wanted to share what worked for me after trying lots of things:

import type { Meta, StoryFn, StoryObj } from '@storybook/react';
import TextInput from './TextInput';
import { useForm } from 'react-hook-form';

const meta: Meta<typeof TextInput> = {
  title: 'Design System/Molecules/Form/Text',
  component: TextInput,
  tags: ['autodocs'],
};

const Template: StoryFn = (args) => {
  const methods = useForm();
  return <TextInput methods={methods} {...args} />;
};

export default meta;

export const Text = Template.bind({});

Text.args = {
  name: 'first_name',
  label: 'First Name',
};