@nvs-dynamic-form/react-core 2.3.1 → 2.4.1

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

@@ -6,9 +6,9 @@ import {
   LabelOptions,
 } from "../../../types";
 import { FieldArray, FormikProps } from "formik";
-import React, { useState } from "react";
+import React, { ReactNode, useCallback, useState } from "react";
 
-import { GenerateFormContentUtils } from "../../services/generateFormContentUtils";
+import { Elements } from "../elements";
 import { IArrayField } from "./_type";
 import { List } from "../list/_template";
 
@@ -24,6 +24,16 @@ export const ArrayField: React.FC<IArrayField> = ({
   removeButtonDefaultOptions,
   labelDefaultOptions,
 }: IArrayField) => {
+  const createArrayItem = useCallback(
+    (index: number) => {
+      return lodash.cloneDeep(arrayField.fields).map((field) => {
+        field.id = `${arrayField.id}[${index}].${field.id}`;
+        return field;
+      });
+    },
+    [arrayField.fields],
+  );
+
   const [addButtonOptions] = useState(
     new ArrayFieldAddButton(
       lodash.merge(
@@ -45,27 +55,18 @@ export const ArrayField: React.FC<IArrayField> = ({
       lodash.merge(labelDefaultOptions ?? {}, arrayField.labelOptions ?? {}),
     ),
   );
-  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 ContentContainer = ({ children }: { children: ReactNode }) => {
+    return (
+      <div className="nvs-container-fluid">
+        <div className="nvs-row">{children}</div>
+      </div>
+    );
   };
 
   const getDefaultItem = () => {
     return arrayField.fields.reduce((acc: { [key: string]: any }, field) => {
-      acc[field.id] = field.defaultValue;
+      if ("defaultValue" in field) acc[field.id] = field.defaultValue;
       return acc;
     }, {});
   };
@@ -75,9 +76,18 @@ export const ArrayField: React.FC<IArrayField> = ({
       <div className="df-array-field-content">
         <div className="nvs-container-fluid">
           <div className="nvs-row">
-            {generateFormContentUtils.createFormElements(
-              createArrayItem(arrayField.id, index),
-            )}
+            <Elements
+              fields={createArrayItem(index)}
+              formElements={formElements}
+              containerComponent={containerComponent}
+              useContainersOutsideGroup={useContainersOutsideGroup}
+              useGroupContainer={useGroupContainer}
+              containerVisible={containerVisible}
+              buttonComponent={ButtonComponent}
+              fieldArrayAddButtonDefaultOptions={addButtonDefaultOptions}
+              fieldArrayRemoveButtonDefaultOptions={removeButtonDefaultOptions}
+              labelDefaultOptions={labelDefaultOptions}
+            />
           </div>
         </div>
       </div>
@@ -103,9 +113,7 @@ export const ArrayField: React.FC<IArrayField> = ({
   const createArrayItemRemoveButton = (onRemoveItem: Function) => {
     return (
       <div className="df-array-field-remove-button">
-        {generateFormContentUtils.createContentContainer(
-          createRemoveButton(onRemoveItem),
-        )}
+        <ContentContainer>{createRemoveButton(onRemoveItem)}</ContentContainer>
       </div>
     );
   };
@@ -138,18 +146,18 @@ export const ArrayField: React.FC<IArrayField> = ({
   };
 
   const createArrayItemAddButton = (onAddItem: Function) => {
-    return generateFormContentUtils.createContentContainer(
-      createAddButton(onAddItem),
-    );
+    return <ContentContainer>{createAddButton(onAddItem)}</ContentContainer>;
   };
 
   const createArrayFieldLabel = () => {
-    return generateFormContentUtils.createContentContainer(
-      <div className="nvs-col-12">
-        <label className={`df-array-field-label ${labelOptions.class}`}>
-          {arrayField.label}
-        </label>
-      </div>,
+    return (
+      <ContentContainer>
+        <div className="nvs-col-12">
+          <label className={`df-array-field-label ${labelOptions.class}`}>
+            {arrayField.label}
+          </label>
+        </div>
+      </ContentContainer>
     );
   };
 
@@ -180,11 +188,14 @@ export const ArrayField: React.FC<IArrayField> = ({
       {({ push, remove, form }) => (
         <>
           {arrayField.label && createArrayFieldLabel()}
-          {form.values[arrayField.id]?.map((_: any, index: number) =>
-            createFieldArrayContent(remove, index),
-          )}
-          {checkFieldArrayMaxSize(form.values[arrayField.id].length) &&
-            createArrayItemAddButton(push)}
+          {lodash
+            .get(form.values, arrayField.id)
+            ?.map((_: any, index: number) =>
+              createFieldArrayContent(remove, index),
+            )}
+          {checkFieldArrayMaxSize(
+            lodash.get(form.values, arrayField.id)?.length,
+          ) && createArrayItemAddButton(push)}
           {createErrorList(form)}
         </>
       )}

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

@@ -0,0 +1,94 @@
+import {
+  ArrayField,
+  ArrayFieldAddButton,
+  GroupField,
+  LabelOptions,
+} from "../../../types";
+import { Field, IFormElement } from "../field";
+import React, { useEffect, useState } from "react";
+
+import { ArrayField as ArrayFieldElement } from "../arrayField";
+import { FieldBase } from "../../../types";
+import { FieldType } from "../../_type";
+import { GroupField as GroupFieldElement } from "../groupField";
+
+export const Elements = ({
+  fields,
+  formElements,
+  containerComponent,
+  useContainersOutsideGroup,
+  useGroupContainer,
+  containerVisible,
+  buttonComponent,
+  fieldArrayAddButtonDefaultOptions = {},
+  fieldArrayRemoveButtonDefaultOptions = {},
+  labelDefaultOptions = {},
+}: {
+  fields: Array<FieldType>;
+  formElements: IFormElement;
+  containerComponent: React.FC<any>;
+  useContainersOutsideGroup: boolean;
+  useGroupContainer: boolean;
+  containerVisible: boolean;
+  buttonComponent?: React.FC<any>;
+  fieldArrayAddButtonDefaultOptions?: ArrayFieldAddButton;
+  fieldArrayRemoveButtonDefaultOptions?: ArrayFieldAddButton;
+  labelDefaultOptions?: LabelOptions;
+}) => {
+  const [fieldsElements, setFieldsElements] = useState<JSX.Element[]>([]);
+
+  const createFormElements = (): JSX.Element[] => {
+    const fieldsElements = [];
+    for (const field of fields) {
+      if (field instanceof GroupField)
+        fieldsElements.push(createGroupFieldElement(field));
+      else if (field instanceof ArrayField)
+        fieldsElements.push(createArrayFieldElement(field));
+      else fieldsElements.push(createSingleFieldElement(field));
+    }
+    return fieldsElements;
+  };
+
+  const createSingleFieldElement = (field: FieldBase<unknown>) => {
+    return <Field key={field.id} formElements={formElements} field={field} />;
+  };
+
+  const createGroupFieldElement = (field: GroupField) => {
+    return (
+      <GroupFieldElement
+        key={field.id}
+        formElements={formElements}
+        field={field}
+        containerComponent={containerComponent}
+        useContainersOutsideGroup={useContainersOutsideGroup}
+        useGroupContainer={useGroupContainer}
+        containerVisible={containerVisible}
+        buttonComponent={buttonComponent!}
+      />
+    );
+  };
+
+  const createArrayFieldElement = (field: ArrayField) => {
+    return (
+      <ArrayFieldElement
+        key={field.id}
+        formElements={formElements}
+        field={field}
+        containerComponent={containerComponent}
+        useContainersOutsideGroup={useContainersOutsideGroup}
+        useGroupContainer={useGroupContainer}
+        containerVisible={containerVisible}
+        buttonComponent={buttonComponent!}
+        addButtonDefaultOptions={fieldArrayAddButtonDefaultOptions}
+        removeButtonDefaultOptions={fieldArrayRemoveButtonDefaultOptions}
+        labelDefaultOptions={labelDefaultOptions}
+      />
+    );
+  };
+
+  useEffect(() => {
+    if (fields.length > 0) setFieldsElements(createFormElements());
+  }, [fields]);
+
+  return fieldsElements.length > 0 ? fieldsElements : <></>;
+};

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

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

package/lib/nvs-dynamic-form/components/formBuilder/_template.tsx

@@ -0,0 +1,149 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import { ArrayField, GroupField, LabelOptions } from "../../../types";
+import { IFormElement } from "../field";
+import { FieldType } from "../../_type";
+import { ArrayFieldAddButton } from "../../../types";
+import { Container } from "../container";
+import { Elements } from "../elements";
+
+export const FormBuilder = ({
+  containerComponent,
+  formElements,
+  useContainersOutsideGroup,
+  useGroupContainer,
+  containerVisible,
+  fields,
+  containerOptions = {},
+  buttonComponent,
+  fieldArrayAddButtonDefaultOptions,
+  fieldArrayRemoveButtonDefaultOptions,
+  labelDefaultOptions,
+}: {
+  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;
+  labelDefaultOptions?: LabelOptions;
+}) => {
+  const [formContent, setFormContent] = useState<ReactNode>();
+
+  const createFormContent = () => {
+    const singleFields = createSingleFieldsElements();
+    const groupFields = createGroupFieldsElements();
+
+    let formContent;
+    if (containerVisible && useContainersOutsideGroup && singleFields)
+      formContent = (
+        <>
+          {createContainer(singleFields, containerOptions)}
+          {groupFields}
+        </>
+      );
+    else
+      formContent = createFormGroup(
+        <>
+          {singleFields}
+          {groupFields}
+        </>,
+      );
+
+    return formContent;
+  };
+
+  const createContentContainer = (formElements: ReactNode) => {
+    return (
+      <div className="nvs-container-fluid">
+        <div className="nvs-row">{formElements}</div>
+      </div>
+    );
+  };
+
+  const createSingleFieldsElements = () => {
+    const singleFields = getSingleFields();
+    return (
+      singleFields.length > 0 &&
+      createContentContainer(
+        <Elements
+          fields={singleFields}
+          formElements={formElements}
+          containerComponent={containerComponent}
+          useContainersOutsideGroup={useContainersOutsideGroup}
+          useGroupContainer={useGroupContainer}
+          containerVisible={containerVisible}
+          buttonComponent={buttonComponent}
+          fieldArrayAddButtonDefaultOptions={fieldArrayAddButtonDefaultOptions}
+          fieldArrayRemoveButtonDefaultOptions={
+            fieldArrayRemoveButtonDefaultOptions
+          }
+          labelDefaultOptions={labelDefaultOptions}
+        />,
+      )
+    );
+  };
+
+  const createGroupFieldsElements = () => {
+    const groupFields = getGroupFields();
+    return (
+      groupFields.length > 0 && (
+        <Elements
+          fields={groupFields}
+          formElements={formElements}
+          containerComponent={containerComponent}
+          useContainersOutsideGroup={useContainersOutsideGroup}
+          useGroupContainer={useGroupContainer}
+          containerVisible={containerVisible}
+          buttonComponent={buttonComponent}
+          fieldArrayAddButtonDefaultOptions={fieldArrayAddButtonDefaultOptions}
+          fieldArrayRemoveButtonDefaultOptions={
+            fieldArrayRemoveButtonDefaultOptions
+          }
+          labelDefaultOptions={labelDefaultOptions}
+        />
+      )
+    );
+  };
+
+  const isSingleField = (field: FieldType) => {
+    return !(
+      (field instanceof GroupField || field instanceof ArrayField) &&
+      field.containerVisible &&
+      useGroupContainer &&
+      containerVisible
+    );
+  };
+
+  const getSingleFields = () => {
+    return fields.filter((field) => isSingleField(field));
+  };
+
+  const getGroupFields = () => {
+    return fields.filter((field) => !isSingleField(field));
+  };
+
+  const createContainer = (content: ReactNode, containerProps: object) => {
+    return (
+      <Container
+        containerComponent={containerComponent}
+        options={containerProps}
+      >
+        {content}
+      </Container>
+    );
+  };
+
+  const createFormGroup = (formContent: ReactNode) => {
+    return <div className="df-form-group">{formContent}</div>;
+  };
+
+  useEffect(() => {
+    setFormContent(createFormContent());
+  }, [fields]);
+
+  return <>{formContent}</>;
+};

package/lib/nvs-dynamic-form/components/formBuilder/index.tsx

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

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

@@ -1,4 +1,7 @@
-import { GenerateFormContentUtils } from "../../services/generateFormContentUtils";
+import React, { useState } from "react";
+
+import { Elements } from "../elements";
+import { FormBuilder } from "../formBuilder";
 import { IGroupField } from "./_type";
 
 export const GroupField = ({
@@ -8,25 +11,42 @@ export const GroupField = ({
   containerVisible,
   useContainersOutsideGroup,
   useGroupContainer,
+  buttonComponent,
 }: IGroupField) => {
-  const generateFormContentUtils = new GenerateFormContentUtils({
-    containerComponent,
-    formElements,
-    useContainersOutsideGroup,
-    useGroupContainer,
-    containerOptions: groupField.containerOptions,
-    containerVisible: containerVisible && groupField.containerVisible!,
-    fields: groupField.fields.map((field) => {
+  const [fields, _] = useState(
+    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);
+  return (
+    fields &&
+    (isContainerVisible() ? (
+      <FormBuilder
+        containerComponent={containerComponent}
+        formElements={formElements}
+        useContainersOutsideGroup={useContainersOutsideGroup}
+        useGroupContainer={useGroupContainer}
+        containerOptions={groupField.containerOptions}
+        containerVisible={containerVisible}
+        fields={fields}
+        buttonComponent={buttonComponent}
+      />
+    ) : (
+      <Elements
+        fields={fields}
+        containerComponent={containerComponent}
+        formElements={formElements}
+        useContainersOutsideGroup={useContainersOutsideGroup}
+        useGroupContainer={useGroupContainer}
+        containerVisible={containerVisible}
+        buttonComponent={buttonComponent}
+      />
+    ))
+  );
 };

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

@@ -7,4 +7,5 @@ export interface IGroupField extends IField {
   containerVisible: boolean;
   useContainersOutsideGroup: boolean;
   useGroupContainer: boolean;
+  buttonComponent?: React.FC<any>;
 }

package/lib/nvs-dynamic-form/stories/components/button.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+export const ButtonComponent = ({
+  children,
+  type = "submit",
+  onClick = () => {},
+}: {
+  children: string;
+  type: "submit" | "reset" | "button";
+  onClick?: () => void;
+}) => {
+  return (
+    <button onClick={onClick} style={{ width: "100%" }} type={type}>
+      {children}
+    </button>
+  );
+};

package/lib/nvs-dynamic-form/stories/components/container.tsx

@@ -0,0 +1,14 @@
+import React from "react";
+
+export const Container = ({ children, ...props }) => {
+  return (
+    <div id="custom-container" className="nvs-container-fluid">
+      <div className="nvs-row">
+        <div className="nvs-col-12">
+          <h1>{props.title}</h1>
+        </div>
+        <div className="nvs-col-12">{children}</div>
+      </div>
+    </div>
+  );
+};

package/lib/nvs-dynamic-form/stories/components/index.tsx

@@ -0,0 +1,3 @@
+export * from "./button";
+export * from "./container";
+export * from "./textboxElement";

package/lib/nvs-dynamic-form/stories/components/textboxElement.tsx

@@ -0,0 +1,20 @@
+import { FieldBase } from "../../../types";
+import React from "react";
+
+export class TextboxField extends FieldBase<string> {
+  override readonly fieldType? = "textbox";
+  type?: "email" | "number" | "password" | "tel" | "text" | "url";
+  placeholder?: string;
+
+  constructor(options: TextboxField) {
+    super(options, "");
+    this.type = options.type ?? "text";
+    this.placeholder = options.placeholder ?? "";
+  }
+}
+
+export const TextboxElement = ({ defaultValue, ...props }: TextboxField) => {
+  return (
+    <input style={{ width: "100%", boxSizing: "border-box" }} {...props} />
+  );
+};

package/lib/nvs-dynamic-form/stories/fields/arrayField/basicExample.stories.tsx

@@ -0,0 +1,87 @@
+import * as Yup from "yup";
+
+import {
+  ButtonComponent,
+  TextboxElement,
+  TextboxField,
+} from "../../components";
+import { INvsDynamicForm, NvsDynamicForm } from "../../..";
+
+import { ArrayField } from "../../../../types";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Array Field",
+};
+
+export const Default: { args: INvsDynamicForm; name: string } = {
+  name: "Default",
+  args: {
+    onSubmit: (values) => {
+      alert(JSON.stringify(values));
+    },
+    submitButtonIsFullWidth: false,
+    submitButtonLabel: "Save",
+    submitButtonVisible: true,
+    submitButtonPosition: "right",
+    submitButtonDefaultOptions: {
+      label: "Save",
+      isFullWidth: true,
+      position: "right",
+    },
+    buttonComponent: ButtonComponent,
+    formElements: {
+      textbox: {
+        component: TextboxElement,
+        class: TextboxField,
+      },
+    },
+    fields: [
+      new TextboxField({
+        id: "firstName",
+        placeholder: "Enter your first name",
+        defaultValue: "ismet",
+        validate: Yup.string().required(),
+        screenSize: {
+          desktop: 6,
+          mobile: 6,
+        },
+      }),
+      new TextboxField({
+        id: "lastName",
+        placeholder: "Enter your last name",
+        screenSize: {
+          desktop: 6,
+          mobile: 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(2).max(3),
+        fields: [
+          new TextboxField({
+            id: "cityName",
+            label: "City Name",
+            placeholder: "Enter your city name",
+            screenSize: 6,
+            validate: Yup.string().required(),
+          }),
+          new TextboxField({
+            id: "districtName",
+            label: "district Name",
+            placeholder: "Enter your district name",
+            screenSize: 6,
+          }),
+        ],
+      }),
+    ],
+  },
+};