@nvs-dynamic-form/react-core 1.5.0 → 2.1.0

package/lib/nvs-dynamic-form/elements/arrayField/_template.tsx

@@ -0,0 +1,149 @@
+import * as lodash from "lodash";
+
+import { ArrayFieldAddButton, ArrayFieldRemoveButton } from "../../../types";
+import React, { useState } from "react";
+
+import { FieldArray } from "formik";
+import { GenerateFormContentUtils } from "../../services/generateFormContentUtils";
+import { IArrayField } from "./_type";
+
+export const ArrayField: React.FC<IArrayField> = ({
+  field: arrayField,
+  formElements,
+  containerComponent,
+  containerVisible,
+  useContainersOutsideGroup,
+  useGroupContainer,
+  buttonComponent: ButtonComponent,
+  addButtonDefaultOptions,
+  removeButtonDefaultOptions,
+}: IArrayField) => {
+  const [addButtonOptions] = useState(
+    new ArrayFieldAddButton(
+      lodash.merge(
+        addButtonDefaultOptions ?? {},
+        arrayField.addButtonOptions ?? {},
+      ),
+    ),
+  );
+  const [removeButtonOptions] = useState(
+    new ArrayFieldRemoveButton(
+      lodash.merge(
+        removeButtonDefaultOptions ?? {},
+        arrayField.removeButtonOptions ?? {},
+      ),
+    ),
+  );
+  const generateFormContentUtils = new GenerateFormContentUtils({
+    containerComponent,
+    formElements,
+    useContainersOutsideGroup,
+    useGroupContainer,
+    containerVisible: containerVisible,
+    fields: arrayField.fields,
+    fieldArrayAddButtonDefaultOptions: addButtonDefaultOptions,
+    fieldArrayRemoveButtonDefaultOptions: removeButtonDefaultOptions,
+  });
+
+  const createArrayItem = (name: string, index: number) => {
+    return arrayField.fields.map((field) => ({
+      ...field,
+      id: `${name}[${index}].${field.id}`,
+    }));
+  };
+
+  const getDefaultItem = () => {
+    return arrayField.fields.reduce((acc: { [key: string]: any }, field) => {
+      acc[field.id] = field.defaultValue;
+      return acc;
+    }, {});
+  };
+
+  const createArrayFields = (index: number) => {
+    return (
+      <div className="df-array-field-content">
+        <div className="nvs-container-fluid">
+          <div className="nvs-row">
+            {generateFormContentUtils.createFormElements(
+              createArrayItem(arrayField.id, index),
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  };
+
+  const createRemoveButton = (onRemoveItem: Function) => {
+    return (
+      <div className="nvs-col-12">
+        <ButtonComponent
+          onClick={() => {
+            onRemoveItem();
+          }}
+          type="button"
+          {...removeButtonOptions.options}
+        >
+          {removeButtonOptions.label}
+        </ButtonComponent>
+      </div>
+    );
+  };
+
+  const createArrayItemRemoveButton = (onRemoveItem: Function) => {
+    return (
+      <div className="df-array-field-remove-button">
+        {generateFormContentUtils.createContentContainer(
+          createRemoveButton(onRemoveItem),
+        )}
+      </div>
+    );
+  };
+
+  const createFieldArrayContent = (
+    onRemoveItem: (index: number) => void,
+    index: number,
+  ) => {
+    return (
+      <div
+        className={`df-array-field remove-button-${removeButtonOptions.position}`}
+        key={index}
+      >
+        {createArrayFields(index)}
+        {createArrayItemRemoveButton(() => onRemoveItem(index))}
+      </div>
+    );
+  };
+
+  const createAddButton = (onAddItem: Function) => {
+    return (
+      <div className="df-array-field-add-button">
+        <ButtonComponent
+          onClick={() => onAddItem(getDefaultItem())}
+          type="button"
+          {...addButtonOptions.options}
+        >
+          {addButtonOptions.label}
+        </ButtonComponent>
+      </div>
+    );
+  };
+
+  const createArrayItemAddButton = (onAddItem: Function) => {
+    return generateFormContentUtils.createContentContainer(
+      createAddButton(onAddItem),
+    );
+  };
+
+  return (
+    <FieldArray name={arrayField.id}>
+      {({ push, remove, form }) => (
+        <>
+          {form.values[arrayField.id]?.map((_: any, index: number) =>
+            createFieldArrayContent(remove, index),
+          )}
+          {createArrayItemAddButton(push)}
+        </>
+      )}
+    </FieldArray>
+  );
+};

package/lib/nvs-dynamic-form/elements/arrayField/_type.tsx

@@ -0,0 +1,18 @@
+import {
+  ArrayField,
+  ArrayFieldAddButton,
+  ArrayFieldRemoveButton,
+} from "../../../types";
+
+import { IField } from "../field";
+
+export interface IArrayField extends IField {
+  field: ArrayField;
+  buttonComponent: React.FC<any>;
+  containerComponent: React.FC<any>;
+  containerVisible: boolean;
+  useContainersOutsideGroup: boolean;
+  useGroupContainer: boolean;
+  addButtonDefaultOptions?: ArrayFieldAddButton;
+  removeButtonDefaultOptions?: ArrayFieldRemoveButton;
+}

package/lib/nvs-dynamic-form/elements/arrayField/index.tsx

@@ -0,0 +1,2 @@
+export * from "./_template";
+export * from "./_type";

package/lib/nvs-dynamic-form/elements/button/_template.tsx

@@ -0,0 +1,42 @@
+import { IButton } from "./_type";
+import React from "react";
+
+export const Button = ({
+  buttonComponent: ButtonComponent,
+  visible,
+  label,
+  position = "right",
+  isFullWidth,
+  containerClass,
+}: IButton) => {
+  const getButtonPositionClass = (position: "left" | "right" | "center") => {
+    const classes = {
+      left: "nvs-jc-start",
+      right: "nvs-jc-end",
+      center: "nvs-jc-center",
+    };
+    return classes[position];
+  };
+
+  const getSubmitButtonClasses = () => {
+    const buttonClasses = ["df-button"];
+
+    isFullWidth && buttonClasses.push("nvs-col-12");
+
+    return buttonClasses.join(" ");
+  };
+
+  return visible ? (
+    <div
+      className={`nvs-container-fluid${containerClass ? ` ${containerClass}` : ""}`}
+    >
+      <div className={`nvs-row ${getButtonPositionClass(position)}`}>
+        <div className={getSubmitButtonClasses()}>
+          <ButtonComponent>{label}</ButtonComponent>
+        </div>
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+};

package/lib/nvs-dynamic-form/elements/button/_type.tsx

@@ -0,0 +1,8 @@
+export interface IButton {
+  buttonComponent: React.FC<any>;
+  visible?: boolean;
+  label?: string;
+  position?: "left" | "center" | "right";
+  isFullWidth?: boolean;
+  containerClass?: string;
+}

package/lib/nvs-dynamic-form/elements/button/index.tsx

@@ -0,0 +1,2 @@
+export * from "./_template";
+export * from "./_type";

package/lib/nvs-dynamic-form/elements/container/_template.tsx

@@ -0,0 +1,10 @@
+import { IContainer } from "./_type";
+import React from "react";
+
+export const Container = ({
+  containerComponent: CustomContainer,
+  options = {},
+  children,
+}: IContainer) => {
+  return <CustomContainer {...options}>{children}</CustomContainer>;
+};

package/lib/nvs-dynamic-form/elements/container/_type.tsx

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+
+export interface IContainer {
+  containerComponent: React.FC<any>;
+  options?: { [key: string]: any };
+  children?: ReactNode;
+}

package/lib/nvs-dynamic-form/elements/container/index.tsx

@@ -0,0 +1,2 @@
+export * from "./_type";
+export * from "./_template";

package/lib/nvs-dynamic-form/elements/field/_type.tsx

@@ -1,11 +1,13 @@
 import { FieldBase } from "../../../types";
 
+export interface IFormElement {
+  [key: string]: {
+    component: React.FC<any>;
+    class: typeof FieldBase<any>;
+  };
+}
+
 export interface IField {
   field: FieldBase<unknown>;
-  formElements: {
-    [key: string]: {
-      component: React.FC<any>;
-      class: typeof FieldBase<any>;
-    };
-  };
+  formElements: IFormElement;
 }

package/lib/nvs-dynamic-form/elements/groupField/_template.tsx

@@ -0,0 +1,32 @@
+import { GenerateFormContentUtils } from "../../services/generateFormContentUtils";
+import { IGroupField } from "./_type";
+
+export const GroupField = ({
+  field: groupField,
+  formElements,
+  containerComponent,
+  containerVisible,
+  useContainersOutsideGroup,
+  useGroupContainer,
+}: IGroupField) => {
+  const generateFormContentUtils = new GenerateFormContentUtils({
+    containerComponent,
+    formElements,
+    useContainersOutsideGroup,
+    useGroupContainer,
+    containerOptions: groupField.containerOptions,
+    containerVisible: containerVisible && groupField.containerVisible!,
+    fields: groupField.fields.map((field) => {
+      field.id = `${groupField.id}.${field.id}`;
+      return field;
+    }),
+  });
+
+  const isContainerVisible = () => {
+    return groupField.containerVisible && useGroupContainer && containerVisible;
+  };
+
+  return isContainerVisible()
+    ? generateFormContentUtils.createFormContent()
+    : generateFormContentUtils.createFormElements(groupField.fields);
+};

package/lib/nvs-dynamic-form/elements/groupField/_type.tsx

@@ -0,0 +1,10 @@
+import { GroupField } from "../../../types";
+import { IField } from "../field";
+
+export interface IGroupField extends IField {
+  field: GroupField;
+  containerComponent: React.FC<any>;
+  containerVisible: boolean;
+  useContainersOutsideGroup: boolean;
+  useGroupContainer: boolean;
+}

package/lib/nvs-dynamic-form/elements/groupField/index.tsx

@@ -0,0 +1,2 @@
+export * from "./_type";
+export * from "./_template";

package/lib/nvs-dynamic-form/formikForm/_template.tsx

@@ -0,0 +1,85 @@
+import * as Yup from "yup";
+
+import { ArrayField, DynamicObject, FieldBase, GroupField } from "../../types";
+import { Form, FormikProvider, useFormik } from "formik";
+import React, { useEffect, useState } from "react";
+
+import { FieldType } from "../_type";
+import { IFormikForm } from "./_type";
+
+export const FormikForm = ({
+  children,
+  fields,
+  onSubmit,
+  formClass,
+}: IFormikForm) => {
+  const getFieldDefaultValue = (field: FieldType) => {
+    let defaultValue;
+    if (field instanceof ArrayField) defaultValue = field.defaultValues ?? [];
+    else if (field instanceof GroupField)
+      defaultValue = getFieldsDefaultValues(field.fields!);
+    else defaultValue = field.defaultValue;
+
+    return defaultValue;
+  };
+
+  const getFieldsDefaultValues = (fields: Array<FieldType>): DynamicObject => {
+    return fields.reduce((acc: DynamicObject, field: FieldType) => {
+      acc[field.id] = getFieldDefaultValue(field);
+      return acc;
+    }, {});
+  };
+
+  const getFieldValidate = (field: FieldType) => {
+    let validate;
+    if (field instanceof GroupField)
+      validate = createValidateSchema(field.fields!);
+    else if (field instanceof ArrayField)
+      validate = createArrayValidateSchema(field.fields!);
+    else if (field?.validate) validate = field.validate;
+
+    return validate;
+  };
+
+  const createValidateSchema = (fields: Array<FieldType>) => {
+    const validationSchema = fields.reduce(
+      (acc: { [key: string]: Yup.AnySchema }, field) => {
+        const validate = getFieldValidate(field);
+        if (validate) acc[field.id] = validate;
+        return acc;
+      },
+      {},
+    );
+    return Yup.object(validationSchema);
+  };
+
+  const createArrayValidateSchema = (fields: Array<FieldBase<any>>) => {
+    return Yup.array().of(createValidateSchema(fields));
+  };
+
+  const [defaultValues, setDefaultValues] = useState(
+    getFieldsDefaultValues(fields),
+  );
+  const [validateSchema, setValidateSchema] = useState(
+    createValidateSchema(fields),
+  );
+
+  useEffect(() => {
+    setDefaultValues(getFieldsDefaultValues(fields));
+    setValidateSchema(createValidateSchema(fields));
+  }, [fields]);
+
+  const formik = useFormik({
+    initialValues: defaultValues,
+    validationSchema: validateSchema,
+    onSubmit: async (values) => {
+      onSubmit && (await onSubmit(values));
+    },
+  });
+
+  return (
+    <FormikProvider value={formik}>
+      <Form className={formClass ? ` ${formClass}` : ""}>{children}</Form>
+    </FormikProvider>
+  );
+};

package/lib/nvs-dynamic-form/formikForm/_type.tsx

@@ -0,0 +1,9 @@
+import { FieldType } from "../_type";
+import { ReactNode } from "react";
+
+export interface IFormikForm {
+  onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
+  fields: Array<FieldType>;
+  children: ReactNode;
+  formClass?: string;
+}

package/lib/nvs-dynamic-form/formikForm/index.tsx

@@ -0,0 +1 @@
+export * from "./_template";

package/lib/nvs-dynamic-form/services/generateFormContentUtils.tsx

@@ -0,0 +1,190 @@
+import {
+  ArrayField,
+  ArrayFieldAddButton,
+  FieldBase,
+  GroupField,
+} from "../../types";
+
+import { ArrayField as ArrayFieldElement } from "../elements/arrayField";
+import { Container } from "../elements/container";
+import { Field } from "../elements/field";
+import { FieldType } from "../_type";
+import { GroupField as GroupFieldElement } from "../elements/groupField";
+import { IFormElement } from "../elements/field";
+import React from "react";
+import { ReactNode } from "react";
+
+export class GenerateFormContentUtils {
+  private readonly containerComponent: React.FC<any>;
+  private readonly formElements: IFormElement;
+  private readonly useContainersOutsideGroup: boolean;
+  private readonly useGroupContainer: boolean;
+  private readonly containerVisible: boolean;
+  private readonly fields: Array<FieldType>;
+  private readonly containerOptions: { [key: string]: any };
+  private readonly buttonComponent?: React.FC<any>;
+  private readonly fieldArrayAddButtonDefaultOptions: ArrayFieldAddButton;
+  private readonly fieldArrayRemoveButtonDefaultOptions: ArrayFieldAddButton;
+
+  constructor({
+    containerComponent,
+    formElements,
+    useContainersOutsideGroup,
+    useGroupContainer,
+    containerVisible,
+    fields,
+    containerOptions,
+    buttonComponent,
+    fieldArrayAddButtonDefaultOptions,
+    fieldArrayRemoveButtonDefaultOptions,
+  }: {
+    containerComponent: React.FC<any>;
+    formElements: IFormElement;
+    useContainersOutsideGroup: boolean;
+    useGroupContainer: boolean;
+    containerVisible: boolean;
+    fields: Array<FieldType>;
+    buttonComponent?: React.FC<any>;
+    containerOptions?: { [key: string]: any };
+    fieldArrayAddButtonDefaultOptions?: ArrayFieldAddButton;
+    fieldArrayRemoveButtonDefaultOptions?: ArrayFieldAddButton;
+  }) {
+    this.containerComponent = containerComponent;
+    this.formElements = formElements;
+    this.useContainersOutsideGroup = useContainersOutsideGroup;
+    this.useGroupContainer = useGroupContainer;
+    this.containerVisible = containerVisible;
+    this.fields = fields;
+    this.containerOptions = containerOptions ?? {};
+    this.buttonComponent = buttonComponent;
+    this.fieldArrayAddButtonDefaultOptions =
+      fieldArrayAddButtonDefaultOptions ?? {};
+    this.fieldArrayRemoveButtonDefaultOptions =
+      fieldArrayRemoveButtonDefaultOptions ?? {};
+  }
+
+  createContainer(content: ReactNode, containerProps: object) {
+    return (
+      <Container
+        containerComponent={this.containerComponent}
+        options={containerProps}
+      >
+        {content}
+      </Container>
+    );
+  }
+
+  createFormContent() {
+    const singleFields = this.createSingleFieldsElements();
+    const groupFields = this.createGroupFieldsElements();
+
+    let formContent;
+    if (this.containerVisible && this.useContainersOutsideGroup && singleFields)
+      formContent = (
+        <>
+          {this.createContainer(singleFields, this.containerOptions)}
+          {groupFields}
+        </>
+      );
+    else
+      formContent = this.createFormGroup(
+        <>
+          {singleFields}
+          {groupFields}
+        </>,
+      );
+
+    return formContent;
+  }
+
+  createFormElements(fields: Array<FieldType>): JSX.Element[] {
+    const fieldsElements = [];
+    for (const field of fields) {
+      if (field instanceof GroupField)
+        fieldsElements.push(this.createGroupFieldElement(field));
+      else if (field instanceof ArrayField)
+        fieldsElements.push(this.createArrayFieldElement(field));
+      else fieldsElements.push(this.createSingleFieldElement(field));
+    }
+    return fieldsElements;
+  }
+
+  createContentContainer(formElements: ReactNode) {
+    return (
+      <div className="nvs-container-fluid">
+        <div className="nvs-row">{formElements}</div>
+      </div>
+    );
+  }
+
+  private getSingleFields() {
+    return this.fields.filter((field) => this.isSingleField(field));
+  }
+
+  private getGroupFields() {
+    return this.fields.filter((field) => !this.isSingleField(field));
+  }
+
+  private createSingleFieldsElements() {
+    const singleFields = this.getSingleFields();
+    return (
+      singleFields.length > 0 &&
+      this.createContentContainer(this.createFormElements(singleFields))
+    );
+  }
+
+  private createGroupFieldsElements() {
+    const groupFields = this.getGroupFields();
+    return groupFields.length > 0 && this.createFormElements(groupFields);
+  }
+
+  private createSingleFieldElement(field: FieldBase<unknown>) {
+    return (
+      <Field key={field.id} formElements={this.formElements} field={field} />
+    );
+  }
+
+  private createGroupFieldElement(field: GroupField) {
+    return (
+      <GroupFieldElement
+        key={field.id}
+        formElements={this.formElements}
+        field={field}
+        containerComponent={this.containerComponent}
+        useContainersOutsideGroup={this.useContainersOutsideGroup}
+        useGroupContainer={this.useGroupContainer}
+        containerVisible={this.containerVisible}
+      />
+    );
+  }
+
+  private createArrayFieldElement(field: ArrayField) {
+    return (
+      <ArrayFieldElement
+        key={field.id}
+        formElements={this.formElements}
+        field={field}
+        containerComponent={this.containerComponent}
+        useContainersOutsideGroup={this.useContainersOutsideGroup}
+        useGroupContainer={this.useGroupContainer}
+        containerVisible={this.containerVisible}
+        buttonComponent={this.buttonComponent!}
+        addButtonDefaultOptions={this.fieldArrayAddButtonDefaultOptions}
+        removeButtonDefaultOptions={this.fieldArrayRemoveButtonDefaultOptions}
+      />
+    );
+  }
+
+  private isSingleField(field: FieldType) {
+    return !(
+      field instanceof GroupField &&
+      field.containerVisible &&
+      this.useGroupContainer &&
+      this.containerVisible
+    );
+  }
+
+  private createFormGroup(formContent: ReactNode) {
+    return <div className="df-form-group">{formContent}</div>;
+  }
+}

package/lib/types/array-field-action-button.type.tsx

@@ -0,0 +1,26 @@
+export class ArrayFieldButton {
+  label?: string;
+  options?: { [key: string]: any };
+
+  constructor(options: ArrayFieldButton) {
+    this.label = options.label;
+    this.options = options.options ?? {};
+  }
+}
+
+export class ArrayFieldRemoveButton extends ArrayFieldButton {
+  position?: "bottom" | "right";
+
+  constructor(options: ArrayFieldRemoveButton) {
+    options.label = options.label ?? "-";
+    super(options);
+    this.position = options.position ?? "right";
+  }
+}
+
+export class ArrayFieldAddButton extends ArrayFieldButton {
+  constructor(options: ArrayFieldRemoveButton) {
+    options.label = options.label ?? "+";
+    super(options);
+  }
+}

package/lib/types/array-field.type.tsx

@@ -0,0 +1,23 @@
+import {
+  ArrayFieldAddButton,
+  ArrayFieldRemoveButton,
+} from "./array-field-action-button.type";
+
+import { FieldBase } from "./field-base.type";
+
+export class ArrayField<ValueType = { [key: string]: any }> {
+  fieldType?: string = "fieldArray";
+  id!: string;
+  fields: Array<FieldBase<any>>;
+  addButtonOptions?: ArrayFieldAddButton;
+  removeButtonOptions?: ArrayFieldRemoveButton;
+  defaultValues?: Array<ValueType>;
+
+  constructor(options: ArrayField<ValueType>) {
+    this.id = options.id;
+    this.fields = options.fields ?? [];
+    this.addButtonOptions = options.addButtonOptions ?? {};
+    this.removeButtonOptions = options.removeButtonOptions ?? {};
+    this.defaultValues = options.defaultValues ?? [];
+  }
+}

package/lib/types/group-field.type.tsx

@@ -0,0 +1,15 @@
+import { FieldBase } from "./field-base.type";
+
+export class GroupField {
+  id!: string;
+  fields: Array<FieldBase<unknown>>;
+  containerVisible?: boolean;
+  containerOptions?: { [key: string]: any };
+
+  constructor(options: GroupField) {
+    this.id = options.id;
+    this.fields = options.fields ?? [];
+    this.containerVisible = options.containerVisible ?? false;
+    this.containerOptions = options.containerOptions ?? {};
+  }
+}

package/lib/types/index.tsx

@@ -1,4 +1,7 @@
-export * from "./form-field.type";
+export * from "./field-base.type";
 export * from "./screen-size.type";
 export * from "./dynamic-object.type";
-export * from "./submit-button-options.type";
+export * from "./submit-button-default-options.type";
+export * from "./group-field.type";
+export * from "./array-field.type";
+export * from "./array-field-action-button.type";