@nvs-dynamic-form/react-core 1.4.1 → 2.0.0

package/dist/esm/types/array-field.type.js

@@ -0,0 +1,12 @@
+import { ArrayFieldAddButton, ArrayFieldRemoveButton, } from "./array-field-action-button.type";
+export class ArrayField {
+    constructor(options) {
+        this.fieldType = "fieldArray";
+        this.id = options.id;
+        this.fields = options.fields ?? [];
+        this.addButtonOptions = new ArrayFieldAddButton(options.addButtonOptions ?? {});
+        this.removeButtonOptions = new ArrayFieldRemoveButton(options.removeButtonOptions ?? {});
+        this.defaultValues = options.defaultValues ?? [];
+    }
+}
+//# sourceMappingURL=array-field.type.js.map

package/dist/esm/types/array-field.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"array-field.type.js","sourceRoot":"","sources":["../../../lib/types/array-field.type.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,mBAAmB,EACnB,sBAAsB,GACvB,MAAM,kCAAkC,CAAC;AAI1C,MAAM,OAAO,UAAU;IAQrB,YAAY,OAA8B;QAP1C,cAAS,GAAY,YAAY,CAAC;QAQhC,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,IAAI,mBAAmB,CAC7C,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAC/B,CAAC;QACF,IAAI,CAAC,mBAAmB,GAAG,IAAI,sBAAsB,CACnD,OAAO,CAAC,mBAAmB,IAAI,EAAE,CAClC,CAAC;QACF,IAAI,CAAC,aAAa,GAAG,OAAO,CAAC,aAAa,IAAI,EAAE,CAAC;IACnD,CAAC;CACF"}

package/dist/esm/types/{form-field.type.d.ts → field-base.type.d.ts}

@@ -9,7 +9,7 @@ export declare abstract class FieldBase<ValueType, HtmlElement = any> {
     screenSize?: ScreenSizeType | IScreenSize;
     validate?: Yup.AnySchema;
     error?: string;
-    onChange?: (event: ChangeEvent<HtmlElement>) => void;
+    onChange?: (event: ChangeEvent<HtmlElement> | Array<unknown>) => void;
     onBlur?: (event: FocusEvent<HtmlElement>) => void;
     constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType);
 }

package/dist/esm/types/{form-field.type.js → field-base.type.js}

@@ -10,4 +10,4 @@ export class FieldBase {
         this.onBlur = options.onBlur;
     }
 }
-//# sourceMappingURL=form-field.type.js.map
+//# sourceMappingURL=field-base.type.js.map

package/dist/esm/types/{form-field.type.js.map → field-base.type.js.map}

@@ -1 +1 @@
-{"version":3,"file":"form-field.type.js","sourceRoot":"","sources":["../../../lib/types/form-field.type.tsx"],"names":[],"mappings":"AAKA,MAAM,OAAgB,SAAS;IAW7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;CACF"}
+{"version":3,"file":"field-base.type.js","sourceRoot":"","sources":["../../../lib/types/field-base.type.tsx"],"names":[],"mappings":"AAKA,MAAM,OAAgB,SAAS;IAW7B,YAAY,OAA6B,EAAE,iBAA6B;QACtE,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,YAAY,IAAI,iBAAiB,CAAC;QAC9D,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC;QAC3B,IAAI,CAAC,SAAS,GAAG,OAAO,CAAC,SAAS,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,IAAI,EAAE,CAAC;QAC3C,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,QAAQ,GAAG,OAAO,CAAC,QAAQ,CAAC;QACjC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAC/B,CAAC;CACF"}

package/dist/esm/types/group-field.type.d.ts

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

package/dist/esm/types/group-field.type.js

@@ -0,0 +1,9 @@
+export class GroupField {
+    constructor(options) {
+        this.id = options.id;
+        this.fields = options.fields ?? [];
+        this.containerVisible = options.containerVisible ?? false;
+        this.containerOptions = options.containerOptions ?? {};
+    }
+}
+//# sourceMappingURL=group-field.type.js.map

package/dist/esm/types/group-field.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"group-field.type.js","sourceRoot":"","sources":["../../../lib/types/group-field.type.tsx"],"names":[],"mappings":"AAEA,MAAM,OAAO,UAAU;IAMrB,YAAY,OAAmB;QAC7B,IAAI,CAAC,EAAE,GAAG,OAAO,CAAC,EAAE,CAAC;QACrB,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,MAAM,IAAI,EAAE,CAAC;QACnC,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,KAAK,CAAC;QAC1D,IAAI,CAAC,gBAAgB,GAAG,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC;IACzD,CAAC;CACF"}

package/dist/esm/types/index.d.ts

@@ -1,4 +1,6 @@
-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";

package/dist/esm/types/index.js

@@ -1,5 +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";
 //# sourceMappingURL=index.js.map

package/dist/esm/types/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/types/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/types/index.tsx"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,uBAAuB,CAAC;AACtC,cAAc,sCAAsC,CAAC;AACrD,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC"}

package/dist/esm/types/{submit-button-options.type.d.ts → submit-button-default-options.type.d.ts}

@@ -1,4 +1,4 @@
-export declare class SubmitButtonOptions {
+export interface ISubmitButtonDefaultOptions {
     label: string;
     isFullWidth: boolean;
     position: "left" | "right" | "center";

package/dist/esm/types/submit-button-default-options.type.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=submit-button-default-options.type.js.map

package/dist/esm/types/submit-button-default-options.type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"submit-button-default-options.type.js","sourceRoot":"","sources":["../../../lib/types/submit-button-default-options.type.tsx"],"names":[],"mappings":""}

package/lib/nvs-dynamic-form/_stories.tsx

@@ -2,16 +2,24 @@ import { INvsDynamicForm, NvsDynamicForm } from ".";
 import * as Yup from "yup";
 
 import React, { ChangeEvent } from "react";
-import { FieldBase } from "../types";
+import { ArrayField, FieldBase, GroupField } from "../types";
 
 export default {
   component: NvsDynamicForm,
   title: "Nvs Dynamic Form",
 };
 
-const ButtonComponent = ({ children }: { children: string }) => {
+const ButtonComponent = ({
+  children,
+  type = "submit",
+  onClick = () => {},
+}: {
+  children: string;
+  type: "submit" | "reset" | "button";
+  onClick?: () => void;
+}) => {
   return (
-    <button style={{ width: "100%" }} type="submit">
+    <button onClick={onClick} style={{ width: "100%" }} type={type}>
       {children}
     </button>
   );
@@ -23,6 +31,19 @@ const TextboxElement = ({ defaultValue, ...props }: TextboxField) => {
   );
 };
 
+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>
+  );
+};
+
 class TextboxField extends FieldBase<string> {
   override readonly fieldType? = "textbox";
   type?: "email" | "number" | "password" | "tel" | "text" | "url";
@@ -35,7 +56,8 @@ class TextboxField extends FieldBase<string> {
   }
 }
 
-export const Default: { args: INvsDynamicForm } = {
+export const Default: { args: INvsDynamicForm; name: string } = {
+  name: "Simple Example",
   args: {
     onSubmit: (values) => {
       alert(JSON.stringify(values));
@@ -44,14 +66,12 @@ export const Default: { args: INvsDynamicForm } = {
     submitButtonLabel: "Save",
     submitButtonVisible: true,
     submitButtonPosition: "right",
-    submitButton: {
-      component: ButtonComponent,
-      defaultOptions: {
-        label: "Save",
-        isFullWidth: true,
-        position: "right",
-      },
+    submitButtonDefaultOptions: {
+      label: "Save",
+      isFullWidth: true,
+      position: "right",
     },
+    buttonComponent: ButtonComponent,
     formElements: {
       textbox: {
         component: TextboxElement,
@@ -61,12 +81,11 @@ export const Default: { args: INvsDynamicForm } = {
     fields: [
       new TextboxField({
         id: "firstName",
-        label: "First Name",
         placeholder: "Enter your first name",
         defaultValue: "ismet",
         validate: Yup.string().required(),
-        onChange: (event: ChangeEvent<HTMLInputElement>) => {
-          console.log(event.target.value);
+        onChange: (event) => {
+          console.log((event as ChangeEvent<HTMLInputElement>).target.value);
         },
         screenSize: {
           desktop: 6,
@@ -75,7 +94,6 @@ export const Default: { args: INvsDynamicForm } = {
       }),
       new TextboxField({
         id: "lastName",
-        label: "Last Name",
         placeholder: "Enter your last name",
         validate: Yup.string().required(),
         screenSize: {
@@ -85,7 +103,6 @@ export const Default: { args: INvsDynamicForm } = {
       }),
       new TextboxField({
         id: "emailAddress",
-        label: "E-mail Address",
         placeholder: "Enter your e-mail address",
         screenSize: 12,
         type: "email",
@@ -93,3 +110,246 @@ export const Default: { args: INvsDynamicForm } = {
     ],
   },
 };
+
+export const Group: { args: INvsDynamicForm; name: string } = {
+  name: "Group Example",
+  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",
+        label: "First Name",
+        placeholder: "Enter your first name",
+        defaultValue: "ismet",
+        validate: Yup.string().required(),
+        onChange: (event) => {
+          console.log((event as ChangeEvent<HTMLInputElement>).target.value);
+        },
+        screenSize: {
+          desktop: 6,
+          mobile: 6,
+        },
+      }),
+      new TextboxField({
+        id: "lastName",
+        label: "Last Name",
+        placeholder: "Enter your last name",
+        validate: Yup.string().required(),
+        screenSize: {
+          desktop: 6,
+          mobile: 6,
+        },
+      }),
+      new GroupField({
+        id: "contact",
+        fields: [
+          new TextboxField({
+            id: "emailAddress",
+            label: "E-mail Address",
+            placeholder: "Enter your e-mail address",
+            screenSize: 6,
+            type: "email",
+            defaultValue: "info@ismetkizgin.com",
+          }),
+          new TextboxField({
+            id: "phoneNumber",
+            label: "Phone Number",
+            placeholder: "Enter your phone number",
+            screenSize: 6,
+          }),
+        ],
+      }),
+    ],
+  },
+};
+
+export const GroupAndContainer: { args: INvsDynamicForm; name: string } = {
+  name: "Container Example",
+  args: {
+    onSubmit: (values) => {
+      alert(JSON.stringify(values));
+    },
+    container: Container,
+    containerVisible: true,
+    useGroupContainer: true,
+    useContainersOutsideGroup: true,
+    containerOptions: {
+      title: "Personal Information",
+    },
+    submitButtonDefaultOptions: {
+      label: "Save",
+      isFullWidth: true,
+      position: "right",
+    },
+    buttonComponent: ButtonComponent,
+    formElements: {
+      textbox: {
+        component: TextboxElement,
+        class: TextboxField,
+      },
+    },
+    fields: [
+      new TextboxField({
+        id: "firstName",
+        label: "First Name",
+        placeholder: "Enter your first name",
+        defaultValue: "ismet",
+        validate: Yup.string().required(),
+        onChange: (event) => {
+          console.log((event as ChangeEvent<HTMLInputElement>).target.value);
+        },
+        screenSize: {
+          desktop: 6,
+          mobile: 6,
+        },
+      }),
+      new TextboxField({
+        id: "lastName",
+        label: "Last Name",
+        placeholder: "Enter your last name",
+        validate: Yup.string().required(),
+        screenSize: {
+          desktop: 6,
+          mobile: 6,
+        },
+      }),
+      new GroupField({
+        id: "contact",
+        containerVisible: true,
+        containerOptions: {
+          title: "Contact Information",
+        },
+        fields: [
+          new TextboxField({
+            id: "emailAddress",
+            label: "E-mail Address",
+            placeholder: "Enter your e-mail address",
+            screenSize: 6,
+            type: "email",
+            defaultValue: "info@ismetkizgin.com",
+          }),
+          new TextboxField({
+            id: "phoneNumber",
+            label: "Phone Number",
+            placeholder: "Enter your phone number",
+            screenSize: 6,
+          }),
+        ],
+      }),
+      new GroupField({
+        id: "location",
+        containerVisible: false,
+        fields: [
+          new TextboxField({
+            id: "cityName",
+            label: "City Name",
+            placeholder: "Enter your city name",
+            screenSize: 6,
+          }),
+          new TextboxField({
+            id: "districtName",
+            label: "district Name",
+            placeholder: "Enter your district name",
+            screenSize: 6,
+          }),
+        ],
+      }),
+    ],
+  },
+};
+
+export const FieldArray: { args: INvsDynamicForm; name: string } = {
+  name: "Field Array Example",
+  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(),
+        onChange: (event) => {
+          console.log((event as ChangeEvent<HTMLInputElement>).target.value);
+        },
+        screenSize: {
+          desktop: 6,
+          mobile: 6,
+        },
+      }),
+      new TextboxField({
+        id: "lastName",
+        placeholder: "Enter your last name",
+        validate: Yup.string().required(),
+        screenSize: {
+          desktop: 6,
+          mobile: 6,
+        },
+      }),
+      new ArrayField({
+        id: "addresses",
+        removeButtonOptions: {
+          label: "-",
+          position: "right",
+        },
+        addButtonOptions: {
+          label: "+",
+        },
+        defaultValues: [
+          { cityName: "İzmir", districtName: "Göztepe" },
+          { cityName: "İstanbul", districtName: "Kadıköy" },
+        ],
+        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/_style.css

@@ -3,3 +3,43 @@
   margin-top: 8px;
   padding: 0 4px;
 }
+
+.df-form-group {
+  gap: 8px;
+  display: flex;
+  flex-direction: column;
+}
+
+.df-array-field {
+  display: flex;
+  width: 100%;
+  box-sizing: border-box;
+  align-items: center;
+}
+
+.df-array-field-content {
+  flex-grow: 1;
+}
+
+.df-array-field-remove-button {
+  flex-shrink: 0;
+}
+
+.df-array-field.remove-button-bottom {
+  flex-direction: column;
+}
+
+.df-array-field.remove-button-bottom .df-array-field-content {
+  width: 100%;
+  margin-right: 0;
+  margin-bottom: 8px;
+}
+
+.df-array-field.remove-button-bottom .df-array-field-remove-button {
+  width: 100%;
+}
+
+.df-array-field-add-button {
+  width: 100%;
+  padding: 0 4px;
+}

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

@@ -1,81 +1,56 @@
 import "nvs-flexgrid";
 import "./_style.css";
 
-import * as Yup from "yup";
-
-import { DynamicObject, FieldBase } from "../types";
-import { Form, FormikProvider, useFormik } from "formik";
-import React, { useEffect, useState } from "react";
-
-import { Field } from "./elements/field";
+import { Button } from "./elements/button";
+import { FormikForm } from "./formikForm";
+import { GenerateFormContentUtils } from "./services/generateFormContentUtils";
 import { INvsDynamicForm } from "./_type";
-import { SubmitButton } from "./elements/submit-button";
+import React from "react";
 
 export const NvsDynamicForm = ({
   onSubmit,
   formElements = {},
   fields = [],
   formClass,
-  submitButton,
-  submitButtonVisible,
-  submitButtonLabel,
-  submitButtonIsFullWidth,
-  submitButtonPosition,
+  buttonComponent,
+  submitButtonDefaultOptions,
+  submitButtonVisible = true,
+  submitButtonLabel = submitButtonDefaultOptions.label,
+  submitButtonIsFullWidth = submitButtonDefaultOptions.isFullWidth,
+  submitButtonPosition = submitButtonDefaultOptions.position,
+  submitButtonContainerClass,
+  container = ({ children }) => <>{children}</>,
+  containerVisible = false,
+  containerOptions = {},
+  useContainersOutsideGroup = false,
+  useGroupContainer = false,
 }: INvsDynamicForm) => {
-  const getDefaultValues = (): DynamicObject => {
-    return fields.reduce((acc: DynamicObject, field: FieldBase<any>) => {
-      acc[field.id] = field.defaultValue;
-      return acc;
-    }, {});
-  };
-
-  const getValidateSchema = () => {
-    const validationSchema = fields.reduce(
-      (acc: { [key: string]: Yup.AnySchema }, field) => {
-        if (field?.validate) {
-          acc[field.id] = field.validate;
-        }
-        return acc;
-      },
-      {},
-    );
-    return Yup.object(validationSchema);
-  };
-
-  const [defaultValues, setDefaultValues] = useState(getDefaultValues());
-  const [validateSchema, setValidateSchema] = useState(getValidateSchema());
-
-  useEffect(() => {
-    setDefaultValues(getDefaultValues());
-    setValidateSchema(getValidateSchema());
-  }, [fields]);
-
-  const createFormElements = () => {
-    return fields.map((field: FieldBase<any>) => (
-      <Field key={field.id} formElements={formElements} field={field} />
-    ));
-  };
+  const generateFormContentUtils = new GenerateFormContentUtils({
+    containerComponent: container,
+    formElements,
+    useContainersOutsideGroup,
+    useGroupContainer,
+    containerVisible,
+    fields,
+    containerOptions,
+    buttonComponent,
+  });
 
-  const createForm = () => (
-    <Form className={`nvs-container-fluid${formClass ? ` ${formClass}` : ""}`}>
-      <div className="nvs-row">{createFormElements()}</div>
-      <SubmitButton
-        submitButton={submitButton}
-        submitButtonVisible={submitButtonVisible}
-        submitButtonLabel={submitButtonLabel}
-        submitButtonIsFullWidth={submitButtonIsFullWidth}
-        submitButtonPosition={submitButtonPosition}
+  const formikForm = (
+    <FormikForm onSubmit={onSubmit} fields={fields} formClass={formClass}>
+      {generateFormContentUtils.createFormContent()}
+      <Button
+        buttonComponent={buttonComponent}
+        visible={submitButtonVisible}
+        label={submitButtonLabel}
+        isFullWidth={submitButtonIsFullWidth}
+        position={submitButtonPosition}
+        containerClass={submitButtonContainerClass}
       />
-    </Form>
+    </FormikForm>
   );
 
-  const formik = useFormik({
-    initialValues: defaultValues,
-    validationSchema: validateSchema,
-    onSubmit: async (values) => {
-      onSubmit && (await onSubmit(values));
-    },
-  });
-
-  return <FormikProvider value={formik}>{createForm()}</FormikProvider>;
+  return containerVisible && !useContainersOutsideGroup
+    ? generateFormContentUtils.createContainer(formikForm, containerOptions)
+    : formikForm;
 };

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

@@ -1,9 +1,28 @@
-import { FieldBase } from "../types";
+import {
+  ArrayField,
+  FieldBase,
+  GroupField,
+  ISubmitButtonDefaultOptions,
+} from "../types";
+
+import { IButton } from "./elements/button/_type";
 import { IField } from "./elements/field";
-import { ISubmitButton } from "./elements/submit-button/_type";
 
-export interface INvsDynamicForm extends ISubmitButton, Omit<IField, "field"> {
+export type FieldType = FieldBase<any> | GroupField | ArrayField<any>;
+
+export interface INvsDynamicForm extends IButton, Omit<IField, "field"> {
   onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
-  fields: Array<FieldBase<unknown>>;
+  fields: Array<FieldType>;
   formClass?: string;
+  container?: React.FC<any>;
+  containerOptions?: { [key: string]: any };
+  containerVisible?: boolean;
+  useContainersOutsideGroup?: boolean;
+  useGroupContainer?: boolean;
+  submitButtonDefaultOptions: ISubmitButtonDefaultOptions;
+  submitButtonVisible?: boolean;
+  submitButtonLabel?: string;
+  submitButtonPosition?: "left" | "center" | "right";
+  submitButtonIsFullWidth?: boolean;
+  submitButtonContainerClass?: string;
 }