Array fields

ArrayField allows repeating a set of fields (Formik FieldArray-style) and produces an array value.

This mirrors the Storybook array-field examples.

import React from 'react';
import * as Yup from 'yup';

import { ArrayField } from '@nvs-dynamic-form/react-core';

import { DynamicForm } from '../DynamicForm';
import { InputField } from '../fields/input';

export function ArrayFieldExample() {
  return (
    <DynamicForm
      fields={[
        new InputField({
          id: 'firstName',
          label: 'First name',
          validate: Yup.string().required(),
          screenSize: 6,
        }),
        new ArrayField({
          id: 'addresses',
          label: 'Addresses',
          addButtonOptions: {
            label: 'Add address',
          },
          defaultValues: [
            { cityName: 'İzmir', districtName: 'Göztepe' },
            { cityName: 'İstanbul', districtName: 'Kadıköy' },
          ],
          validate: Yup.array().min(1).max(3),
          fields: [
            new InputField({
              id: 'cityName',
              label: 'City',
              screenSize: 6,
              validate: Yup.string().required(),
            }),
            new InputField({
              id: 'districtName',
              label: 'District',
              screenSize: 6,
            }),
          ],
        }),
      ]}
      onSubmit={(values) => console.log(values)}
    />
  );
}