Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add form storybook #35

Merged
merged 1 commit into from
Nov 12, 2024
Merged

Add form storybook #35

merged 1 commit into from
Nov 12, 2024

Conversation

gustiando
Copy link
Contributor

@gustiando gustiando commented Nov 12, 2024

This PR integrates formik with antd for enhanced form handling, validation, error handling visuals.

ScreenRecording2024-11-12at1 05 15PM-ezgif com-speed

@gustiando gustiando self-assigned this Nov 12, 2024
@gustiando gustiando force-pushed the form-example branch 3 times, most recently from 78a89ad to 4a6e488 Compare November 12, 2024 19:26
@gustiando gustiando changed the title FORM-EXAMPLE: null Add form storybook Nov 12, 2024
@gustiando gustiando requested a review from a team November 12, 2024 19:27
@gustiando gustiando force-pushed the form-example branch 3 times, most recently from 67a58a7 to 6242b31 Compare November 12, 2024 19:33
Copy link
Contributor

@avegancafe avegancafe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some comments on typing but overall looks great! Seems like formik-antd is a pretty clean integration between ant form controls and formik

package.json Show resolved Hide resolved
src/components/select/Select.tsx Outdated Show resolved Hide resolved
Introduced the `formik-antd` library to enhance form handling and validation within the application. This change streamlines the integration of Ant Design components with Formik, offering a more robust form-building experience. Adjustments to error color definitions improve visual feedback for form errors, aligning with user expectations for clarity during form submissions.

Additionally, updated dependent packages to maintain compatibility and optimize performance.

References: N/A
<Select {...args} />
</Form>
</Formik>
),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why are we wrapping the select component in formik forms?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gnoha that's how formik-antd wrapper components are supposed to be used 🤷.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

So in general, any input anywhere should be used within a form?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@gnoha sort of — If we need an input outside of the context of a form, that'll be a fork in the road we can decide on what the component(s) should look like. Granted, this wouldn't be an issue if AntD was implemented solo.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cool, thanks

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we can also always export a non-formik-antd <Select /> component too! But yeah it depends on the use case. Right now I don't think we're planning on using any form controls outside of the context of a form

Copy link
Contributor

@avegancafe avegancafe left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nicee lookin good!

@gustiando gustiando merged commit 208184a into main Nov 12, 2024
2 checks passed
@gustiando gustiando deleted the form-example branch November 12, 2024 22:53
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants