feat: UI Flexibility prototype version 2 #769
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
serikjensen
requested review from
dmortal,
jeffredodd,
krisxcrash and
shermango
serikjensen
commented
Nov 10, 2025
Comment on lines
+64
to
+100
| // TODO: This is not super elegant, we need to return the API responses from the onSubmit | ||
| // so that we can use those in the onEvent for the parent component but hook form does not | ||
| // allow doing that through the submit handler. This provides a workaround. | ||
| const onSubmit = async () => { | ||
| return new Promise<{ | ||
| updatedContractorAddressResponse: PutV1ContractorsContractorUuidAddressResponse | undefined | ||
| }>((resolve, reject) => { | ||
| formMethods | ||
| .handleSubmit( | ||
| async (data: ContractorAddressFormValues) => { | ||
| let response: PutV1ContractorsContractorUuidAddressResponse | undefined | ||
|
|
||
| await baseSubmitHandler(data, async payload => { | ||
| response = await updateAddress({ | ||
| request: { | ||
| contractorUuid: contractorId, | ||
| requestBody: { | ||
| version: address?.version as string, | ||
| street1: payload.street1, | ||
| street2: payload.street2, | ||
| city: payload.city, | ||
| state: payload.state, | ||
| zip: payload.zip, | ||
| }, | ||
| }, | ||
| }) | ||
| }) | ||
|
|
||
| resolve({ updatedContractorAddressResponse: response }) | ||
| }, | ||
| () => { | ||
| resolve({ updatedContractorAddressResponse: undefined }) | ||
| }, | ||
| )() | ||
| .catch(reject) | ||
| }) | ||
| } |
Member
Author
There was a problem hiding this comment.
Would love thoughts on a better way to navigate this!
Contributor
There was a problem hiding this comment.
Could a rewrite of our base submit handler here help us make the code more clear and readable?
jeffredodd
reviewed
Nov 10, 2025
| </header> | ||
|
|
||
| <Grid gridTemplateColumns={{ base: '1fr', small: ['1fr', '1fr'] }} gap={20}> | ||
| <Fields.Street1 |
Contributor
There was a problem hiding this comment.
Yeah i'm a fan of this. I think it looks solid.
|
|
||
| export type Street1FieldProps = FieldPropsWithValidations<typeof RequiredValidationKey> | ||
|
|
||
| export function Street1({ |
Contributor
There was a problem hiding this comment.
I wonder if because this looks so boilerplate we might be able to find a way to reduce code here. If not totally fine just thinking out loud
Member
Author
There was a problem hiding this comment.
Yeah i think this is getting at some sort of common Field abstraction intended for this. I think these would also have render props available on them as an alternative for what gets rendered
- you don't necessarily have to use component adapters
- you have the option to one off an input with a different UI component if desired (ex. use a radio instead of a select etc)
Comment on lines
+64
to
+100
| // TODO: This is not super elegant, we need to return the API responses from the onSubmit | ||
| // so that we can use those in the onEvent for the parent component but hook form does not | ||
| // allow doing that through the submit handler. This provides a workaround. | ||
| const onSubmit = async () => { | ||
| return new Promise<{ | ||
| updatedContractorAddressResponse: PutV1ContractorsContractorUuidAddressResponse | undefined | ||
| }>((resolve, reject) => { | ||
| formMethods | ||
| .handleSubmit( | ||
| async (data: ContractorAddressFormValues) => { | ||
| let response: PutV1ContractorsContractorUuidAddressResponse | undefined | ||
|
|
||
| await baseSubmitHandler(data, async payload => { | ||
| response = await updateAddress({ | ||
| request: { | ||
| contractorUuid: contractorId, | ||
| requestBody: { | ||
| version: address?.version as string, | ||
| street1: payload.street1, | ||
| street2: payload.street2, | ||
| city: payload.city, | ||
| state: payload.state, | ||
| zip: payload.zip, | ||
| }, | ||
| }, | ||
| }) | ||
| }) | ||
|
|
||
| resolve({ updatedContractorAddressResponse: response }) | ||
| }, | ||
| () => { | ||
| resolve({ updatedContractorAddressResponse: undefined }) | ||
| }, | ||
| )() | ||
| .catch(reject) | ||
| }) | ||
| } |
Contributor
There was a problem hiding this comment.
Could a rewrite of our base submit handler here help us make the code more clear and readable?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This builds on version 1 but looks to provide an easier way for partners to build forms.
Basically this proposes passing on component instances that can then be used by the partner. Within these components, we can prepopulate them with things like name, required status, etc. according to the API needs. We can then expose props like label and validation messaging for partners to set on their end (in order to avoid needing to manage translations)
In a more complex component with conditional validation, we would provide different field objects depending on the form state. That's why we provide these fields dynamically via the hook instead of simply exporting them. We still need to stress test with an example like that.
Other open questions