@nvs-dynamic-form/react-core 2.3.0 → 2.4.0

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,
+          }),
+        ],
+      }),
+    ],
+  },
+};

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

@@ -0,0 +1,102 @@
+import * as Yup from "yup";
+
+import { ArrayField, GroupField } from "../../../../types";
+import {
+  ButtonComponent,
+  TextboxElement,
+  TextboxField,
+} from "../../components";
+import { INvsDynamicForm, NvsDynamicForm } from "../../..";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Array Field",
+};
+
+export const GroupFieldInArray: { args: INvsDynamicForm; name: string } = {
+  name: "Group Field In Array",
+  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: [
+          {
+            address: {
+              cityName: "Istanbul",
+              districtName: "Kadıköy",
+            },
+          },
+        ],
+        validate: Yup.array().min(2).max(3),
+        fields: [
+          new TextboxField({
+            id: "addressName",
+            label: "Address Name",
+            placeholder: "Enter your address name",
+            screenSize: 12,
+            validate: Yup.string().required(),
+          }),
+          new GroupField({
+            id: "address",
+            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,
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  },
+};