owm-hubspot-form v0.0.7

Form Config

A lightweight and customizable form configuration library designed for seamless integration into your hubspot project. This package simplifies form creation by using a config-driven approach, making it easy to manage and validate forms in your React-based UI Extension projects.

To get start, first install the package

npm install @owm-hubspot-form

Usage:

1 - Create a collect-user-info-fields.ts file with the following code:

import { createFormFields } from "owm-hubspot-form";

export type UserInfoFields = ReturnType<typeof collectUserInfoFields>["fields"];

export const collectUserInfoFields = (root?: any) => {
  const fields = createFormFields({
    fields: [
      {
        name: "name",
        label: "User Name",
        type: "text",
        value: user?.name,
        required: true,
      },
       {
        name: "gender",
        label: "User Gnder",
        type: "text",
        value: user?.gender,
        options: [
          { label: 'M', value; 'M' },
          { label: 'F', value; 'F' }
        ]
        required: true,
      },
      {
        name: "date_of_birth",
        label: "Date of Birth",
        type: "date-picker",
        value: user?.date_of_birth,
        required: true,
      },
      addresses: [
        name: "address"
        isArray: true,
        fields: [
          {
            name: "street",
            label: "Street",
            type: "text"
          }
           {
            name: "country",
            label: "Country",
            type: "text"
          }
        ]
      ]
    ],
  });
  return fields;
};

import React, { useEffect, useState } from "react";
import { FormProvider } from '@owm-hubspot-form';
import { colectUserInfoFields, UserInfoFields } from './collect-user-info-fields';
import { UserProfileForm } from "./forms/user-profile-form"

interface FormConfig {
  user_info: FormFieldAssociation<UserInfoFields>[];
}

const MyPanel = () => {
  const [formState, setFormState] = useState<FormState<FormConfig>>();

   const initialFormConfig = async () => {
    const fetchedUser = await fetchUser();
    const formState: FormState<FormConfig> = {
      user_info: [colectUserInfoFields(fetchedUser.data)],
    };
    setFormState(mappedResponse);
  };

  const handleSubmit(formData) => {
    // get your formData here from your form
  }

  return(
     <FormProvider<FormConfig> initialConfig={formState}>
        <UserProfileForm submit={handleSubmit}  />
     </FormProvider>
  );
};

export default MyForm;

import { Button } from "@hubspot/ui-extensions";
import { FormProvider, useFormActions, Scope } from "owm-hubspot-form";
import { 
  CustomInput, 
  CustomSelect, 
  CustomDatePicker 
  } from "owm-hubspot-form/components";

const UserProfileForm= (submit) => {
  const { formState, handleSubmit } = useFormActions();

  const { user_info } = formState;
  
  return (
    <PanelSection>
      <Scope name="user_info" index={0}>
        <CustomInput name="name" />
        <CustomSelect name="gender" />
        <CustomDatePicker name="date_of_birth" />

        <Scope name="fields.address" index={0}>
          <CustomInput name="street" />
          <CustomSelect name="country" />
        </Scope>
      </Scope>
      
      <Button type="button" onClick={async () => {
          const formData = handleSubmit();
          await submit(formData)
        }}
      >
      </Button>
    </PanelSection>
  )
}