[WIP] Shared Component Library Docs #825
Conversation
☁️ Nx Cloud ReportWe didn't find any information for the current pull request with the commit 2adadbf. Check the Nx Cloud Source Control Integration documentation for more information. Alternatively, you can contact us at [email protected]. Sent with 💌 from NxCloud. |
|
One thing I am running into with this branch, |
How are you defining your component? function TextInputField<
TFormData extends unknown,
TName extends DeepKeyValueName<TFormData, string>,
>Here you can change string to your data type |
|
|
|
Ended up doing this, which is stupid, but works. type ExpirationSelectFieldProps<
Key extends string,
TFormData extends { [K in Key]: ExpirationItem | null },
TName extends DeepKeyValueName<TFormData, ExpirationItem>,
> = Omit<FieldOptions<TFormData, TName>, 'name'> & {
name: Key
form: ReactFormApi<TFormData, any> & {
state: FormState<TFormData>
}
selectProps?: Omit<ComponentProps<typeof Select>, 'onChange' | 'value'> & {
label?: string
placeholder?: string
inputWrapperClassName?: string
}
symbol: string
}
export function ExpirationSelectField<
Key extends string,
TFormData extends { [K in Key]: ExpirationItem | null },
TName extends DeepKeyValueName<TFormData, ExpirationItem>,
>(props: ExpirationSelectFieldProps<Key, TFormData, TName>) { ... } |
|
I was also working on integrating it more smoothly, i.e. abstracting the boiler plate and allowing to make custom components of it. This is my first POC, works for my side project now. Any feedback / suggestions / improvements are always welcome. Usage: // app/SomeForm.tsx
import { FieldInput, Form } from "../lib/form/Form"
export const SomeForm = () => {
const form = useForm({
defaultValues: {
name: '',
id: '',
}
})
return (
<Form onSubmit={form.handleSubmit}>
<div className="flex flex-col space-y-2">
<FieldInput formT={form} name="name" placeholder="Name" />
<FieldInput formT={form} name="id" placeholder="ID" />
<button type="submit">Add</button>
</div>
</Form>
)
}Abstract form components created to reduce boiler plate and allow for custom custom form components with @tanstack/form: // lib/form/Form.tsx
import { DeepKeys, FieldApi, useForm } from '@tanstack/react-form'
export const Form: React.FC<React.FormHTMLAttributes<HTMLFormElement>> = ({
children,
...props
}) => {
return (
<form
{...props}
onSubmit={(e) => {
e.preventDefault()
e.stopPropagation()
if (props.onSubmit) {
props.onSubmit(e)
}
}}
>
{children}
</form>
)
}
export const FieldInfo = ({ field }: { field: FieldApi<any, any, any, any> }) => {
return (
<>
{field.state.meta.isTouched && field.state.meta.errors.length ? (
<em className=" text-red-500 text-xs">{field.state.meta.errors.join(',')}</em>
) : null}
{field.state.meta.isValidating ? 'Validating...' : null}
</>
)
}
export const FieldInput = <TFormData, TNames extends DeepKeys<TFormData>>({
formT,
name,
...props
}: {
formT: ReturnType<typeof useForm<TFormData, any>>
name: TNames
} & React.InputHTMLAttributes<HTMLInputElement>) => (
<formT.Field<TNames, any, any> name={name}>
{(field) => (
<>
<input
value={field.state.value}
onChange={(e) => field.handleChange(e.target.value)}
onBlur={field.handleBlur}
className="w-full rounded-md border border-gray-300 px-4 py-2 transition duration-200 ease-in-out focus:border-transparent focus:outline-none focus:ring-2 focus:ring-blue-500"
{...props}
/>
<FieldInfo field={field} />
</>
)}
</formT.Field>
)This works so far, but I might want to look into your solution @crutchcorn, with DeepKeyValueName, what's still going wrong (as it seems it's not merged)? |
This PR: