@procore/labs-form-components

Form Components Introduction

A package to co-locate forms built using CORE Form..

Installation

yarn add @procore/labs-form-components

Dependencies

@procore/core-react and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.

Usage

Use the base component of FormRendered to build your own views. It is rendered using a two dimentional array. Top level represents a row, second level is a cell in that row. You can call the generateType function and pass it to the array like below to generate a type (or cell if you prefer in the two dimentional array).

import * as FormRenderer from '@procore/labs-form-components';

const Component = () => {
  const [view, setView] = React.useState('read');

  const whereAreYouLocated = generateType({
    required: true,
    name: 'whereAreYouLocated',
    label: 'Where are you located?',
    type: CoreForm.Text,
    colStart: 1,
    colWidth: 6,
  });

  const whatIsYourName = generateType({
    required: true,
    name: 'whatIsYourName',
    label: 'What is your name?',
    type: CoreForm.Text,
    colStart: 1,
    colWidth: 3,
  });

  const CUSTOM_FIELD_SETS = [[whereAreYouLocated], [whatIsYourName]];
  return (
    <>
      <FormRenderer.Form
        view="read"
        initialValues={{ whereAreYouLocated: '', whatIsYourName: '' }}
      >
        <FormRenderer.Read
          title="Canvas 23 Studios"
          secondaryTitle="Overview"
          avatar={IMAGE_FILE}
          sections={[
            {
              label: 'view.global.general_information',
              value: CUSTOM_FIELD_SETS,
            },
          ]}
          onEdit={() => setView('update')}
        />
      </FormRenderer.Form>
      <FormRenderer.Form
        view="update"
        initialValues={{ whereAreYouLocated: '', whatIsYourName: '' }}
        validationSchema={generateValidationSchema(CUSTOM_FIELD_SETS)}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        <FormRenderer.Update
          open={view === 'update'}
          title='view.global.general_information',
          sections={[
            {
              value: CUSTOM_FIELD_SETS_FOR_FORM,
            },
          ]}
          onCancel={() => setView('read')}
        />
      </FormRenderer.Form>
    </>
  );
};

Helper Functions

There are a few helper functions that can help to create objects so you don't have to manually create them.

generateType()

Used to generate a field type to be fed to the FormRenderer

generateInitialValues()

Used to generate initial values initially to allow for validation on empty fields. (Core Form and by extension Formik requires a value [empty string, empty array] to validate upon). This function can create an empty values set for your form to validate against.

generateValidationSchema()

Used to generate a validation schema using yup package. Feed it a fieldSet two dimentional array.

example usage:

  const whereAreYouLocated = generateType({
  required: true,
  name: 'whereAreYouLocated',
  label: 'Where are you located?',
  type: CoreForm.Text,
  colStart: 1,
  colWidth: 6,
});

  const whatIsYourName = generateType({
  required: true,
  name: 'whatIsYourName',
  label: 'What is your name?',
  type: CoreForm.Text,
  colStart: 1,
  colWidth: 3,
});

const CUSTOM_FIELD_SETS = [[whereAreYouLocated], [whatIsYourName]];
generateValidationSchema(CUSTOM_FIELD_SETS)