feat: upstream FormikField

[huwshimi]

Done

• upstream the FormikField component to make react-component's fields and Formik easier to work with. This component is already in use in maas-ui and react-components and we want to use it in another project.

QA

Storybook

To see rendered examples of all react-components, run:

yarn start

QA in your project

from react-components run:

yarn build
npm pack

Install the resulting tarball in your project with:

yarn add <path-to-tarball>

QA steps

• Go to the FormikField docs page in Storybook.
• Check that the docs make sense.

Fixes

https://warthogs.atlassian.net/browse/WD-9813
Fixes: #957.

[webteam-app]

Demo starting at https://react-components-1054.demos.haus

[vladimir-cucu]

I think the docs doesn't render as expected. For instance:

• when pressing Show code, the entire code is presented, but I assume we only want the bit from render to be displayed.
• the default value of component prop in props table is not listed in DEFAULT column.

The first issue also appears in Card stories, which is one of the few other .stories.tsx docs. There are also some slight inconsistencies in presentation between .stories.tsx and .stories.mdx docs e.g. the Props header missing in .stories.tsx docs.

[huwshimi]

I think the docs doesn't render as expected. For instance:

• when pressing Show code, the entire code is presented, but I assume we only want the bit from render to be displayed.

There's an open issue here, with a workaround that I've applied to both files: storybookjs/storybook#22281.

• the default value of component prop in props table is not listed in DEFAULT column.

It looks like the table couldn't handle the Input component as a default but this can be set via a jsdoc string so I've done that.

The first issue also appears in Card stories, which is one of the few other .stories.tsx docs. There are also some slight inconsistencies in presentation between .stories.tsx and .stories.mdx docs e.g. the Props header missing in .stories.tsx docs.

It looks like it was decided not to customise the page too much and stick with the CSF defaults: #1010 (comment).

[vladimir-cucu]

Thanks for the explanation and links, and for also fixing the inconsistency in Card stories!

[vladimir-cucu]

LGTM 👍

[github-actions]

🎉 This PR is included in version 0.51.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀