Handling Forms

Since there are wide variety of ways to handle forms in the react ecosystem, HelixByte has our own way of handling form. The following are the guidelines and styles that we adopt when handling forms for any web applications.

Schema Definition

Our package that we use for schema definition is zod. It is the de-facto tool we use to define any validation rules, from basic to complex. Making use of the same requirement of creating a legal compliance module, the following would most likely be the schema required;

LegalComplianceForm.tsx

const LegalComplianceFormSchema = z.object({
  name: z.string().min(1, {message: "Name is required"}),
  description: z.string().optional(),
  expiryDate: z.string({required_error: "Expiry date is required"}),
  legalDocuments: z.instanceof(File).array().optional(),
});

export default function LegalComplianceForm(){
    // component code here
}

info

If the form is small, we encourage to have the schema definition to be in the same file as the component, otherwise, separate the file but put inside the same folder, so your colleagues can find it easily.