@nvs-dynamic-form/react-core 1.2.3 → 1.3.1

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

@@ -0,0 +1,88 @@
+import { INvsDynamicForm, NvsDynamicForm } from ".";
+import * as Yup from "yup";
+
+import React from "react";
+import { FieldBase } from "../types";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Nvs Dynamic Form",
+};
+
+const ButtonComponent = ({ children }: { children: string }) => {
+  return (
+    <button style={{ width: "100%" }} type="submit">
+      {children}
+    </button>
+  );
+};
+
+const TextboxElement = (opt: TextboxField) => {
+  return <input style={{ width: "100%", boxSizing: "border-box" }} {...opt} />;
+};
+
+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 Default: { args: INvsDynamicForm } = {
+  args: {
+    onSubmit: (values) => {
+      alert(JSON.stringify(values));
+    },
+    submitButtonIsFullWidth: false,
+    submitButtonLabel: "Save",
+    submitButtonVisible: true,
+    submitButtonPosition: "right",
+    submitButton: {
+      component: ButtonComponent,
+      defaultOptions: {
+        label: "Save",
+        isFullWidth: true,
+        position: "right",
+      },
+    },
+    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(),
+        screenSize: {
+          desktop: 6,
+        },
+      }),
+      new TextboxField({
+        id: "lastName",
+        label: "Last Name",
+        placeholder: "Enter your last name",
+        validate: Yup.string().required(),
+        screenSize: {
+          desktop: 6,
+        },
+      }),
+      new TextboxField({
+        id: "emailAddress",
+        label: "E-mail Address",
+        placeholder: "Enter your e-mail address",
+        screenSize: 12,
+        type: "email",
+      }),
+    ],
+  },
+};

package/lib/nvs-dynamic-form/_style.css

@@ -0,0 +1,5 @@
+.df-button {
+  display: inline-flex;
+  margin-top: 8px;
+  padding: 0 4px;
+}

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

@@ -0,0 +1,81 @@
+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 { INvsDynamicForm } from "./_type";
+import { SubmitButton } from "./elements/submit-button";
+
+export const NvsDynamicForm = ({
+  onSubmit,
+  formElements = {},
+  fields = [],
+  formClass,
+  submitButton,
+  submitButtonVisible,
+  submitButtonLabel,
+  submitButtonIsFullWidth,
+  submitButtonPosition,
+}: 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 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}
+      />
+    </Form>
+  );
+
+  const formik = useFormik({
+    initialValues: defaultValues,
+    validationSchema: validateSchema,
+    onSubmit: async (values) => {
+      onSubmit && (await onSubmit(values));
+    },
+  });
+
+  return <FormikProvider value={formik}>{createForm()}</FormikProvider>;
+};

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

@@ -0,0 +1,9 @@
+import { FieldBase } from "../types";
+import { IField } from "./elements/field";
+import { ISubmitButton } from "./elements/submit-button/_type";
+
+export interface INvsDynamicForm extends ISubmitButton, Omit<IField, "field"> {
+  onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
+  fields: Array<FieldBase<unknown>>;
+  formClass?: string;
+}

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

@@ -0,0 +1,37 @@
+import { IField } from "./_type";
+import React from "react";
+import { useField } from "formik";
+
+export const Field = ({
+  formElements,
+  field: { fieldType, screenSize = 12, defaultValue, ...fieldProps },
+}: IField) => {
+  const [formikField, meta] = useField({
+    id: fieldProps.id,
+    name: fieldProps.id,
+  });
+
+  const createFieldItemClass = (): string => {
+    const className: Array<string> = [];
+    if (typeof screenSize == "number") className.push("nvs-col-" + screenSize);
+    else {
+      className.push("nvs-col-md-" + screenSize?.desktop);
+      if (screenSize?.tablet) className.push("nvs-col-sm-" + screenSize.tablet);
+      if (screenSize?.mobile) className.push("nvs-col-xs-" + screenSize.mobile);
+    }
+    return className.join(" ");
+  };
+
+  const Field = formElements[fieldType!]?.component;
+  return Field ? (
+    <div key={fieldProps.id} className={createFieldItemClass()}>
+      <Field
+        {...fieldProps}
+        {...formikField}
+        error={meta.error && meta.touched ? meta.error : undefined}
+      />
+    </div>
+  ) : (
+    <></>
+  );
+};

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

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

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

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

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

@@ -0,0 +1,42 @@
+import { ISubmitButton } from "./_type";
+import React from "react";
+
+export const SubmitButton = ({
+  submitButton,
+  submitButtonVisible = true,
+  submitButtonLabel = submitButton.defaultOptions.label,
+  submitButtonIsFullWidth = submitButton.defaultOptions.isFullWidth,
+  submitButtonPosition = submitButton.defaultOptions.position,
+}: ISubmitButton) => {
+  const getSubmitButtonComponent = () => {
+    const SubmitButton = submitButton.component;
+    return <SubmitButton>{submitButtonLabel}</SubmitButton>;
+  };
+
+  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"];
+
+    submitButtonIsFullWidth && buttonClasses.push("nvs-col-12");
+
+    return buttonClasses.join(" ");
+  };
+
+  return submitButtonVisible ? (
+    <div className={`nvs-row ${getButtonPositionClass(submitButtonPosition)}`}>
+      <div className={getSubmitButtonClasses()}>
+        {getSubmitButtonComponent()}
+      </div>
+    </div>
+  ) : (
+    <></>
+  );
+};

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

@@ -0,0 +1,12 @@
+import { SubmitButtonOptions } from "../../../types";
+
+export interface ISubmitButton {
+  submitButton: {
+    component: React.FC<any>;
+    defaultOptions: SubmitButtonOptions;
+  };
+  submitButtonVisible?: boolean;
+  submitButtonLabel?: string;
+  submitButtonPosition?: "left" | "center" | "right";
+  submitButtonIsFullWidth?: boolean;
+}

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

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

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

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

package/lib/types/dynamic-object.type.tsx

@@ -0,0 +1,3 @@
+export class DynamicObject {
+  [key: string]: number | string | boolean | null;
+}

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

@@ -0,0 +1,22 @@
+import * as Yup from "yup";
+
+import { IScreenSize, ScreenSizeType } from "./screen-size.type";
+
+export abstract class FieldBase<ValueType> {
+  id!: string;
+  label!: string;
+  fieldType?: string;
+  defaultValue?: ValueType;
+  screenSize?: ScreenSizeType | IScreenSize;
+  validate?: Yup.AnySchema;
+  error?: string;
+
+  constructor(options: FieldBase<ValueType>, fieldDefaultValue?: ValueType) {
+    this.defaultValue = options.defaultValue ?? fieldDefaultValue;
+    this.id = options.id;
+    this.label = options.label;
+    this.fieldType = options.fieldType;
+    this.screenSize = options.screenSize ?? 12;
+    this.validate = options.validate;
+  }
+}

package/lib/types/index.tsx

@@ -0,0 +1,4 @@
+export * from "./form-field.type";
+export * from "./screen-size.type";
+export * from "./dynamic-object.type";
+export * from "./submit-button-options.type";

package/lib/types/screen-size.type.tsx

@@ -0,0 +1,7 @@
+export type ScreenSizeType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+
+export interface IScreenSize {
+  desktop: ScreenSizeType;
+  mobile?: ScreenSizeType;
+  tablet?: ScreenSizeType;
+}

package/lib/types/submit-button-options.type.tsx

@@ -0,0 +1,5 @@
+export class SubmitButtonOptions {
+  label!: string;
+  isFullWidth!: boolean;
+  position!: "left" | "right" | "center";
+}

package/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@nvs-dynamic-form/react-core",
-  "version": "1.2.3",
+  "version": "1.3.1",
   "types": "dist/cjs/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
     "dist",
+    "lib",
     "packages.json"
   ],
   "scripts": {
-    "copy-css": "cp ./lib/nvsDynamicForm/_style.css ./dist/cjs/nvsDynamicForm && cp ./lib/nvsDynamicForm/_style.css ./dist/esm/nvsDynamicForm",
+    "copy-css": "cp ./lib/nvs-dynamic-form/_style.css ./dist/cjs/nvs-dynamic-form && cp ./lib/nvs-dynamic-form/_style.css ./dist/esm/nvs-dynamic-form",
     "build": "rm -rf dist/ && prettier --write lib/** && npm run build:esm && npm run build:cjs && npm run copy-css",
     "build:esm": "tsc",
     "build:cjs": "tsc --module CommonJS --outDir dist/cjs",

package/dist/cjs/nvsDynamicForm/_template.js

@@ -1,104 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.NvsDynamicForm = void 0;
-require("nvs-flexgrid");
-require("./_style.css");
-const Yup = __importStar(require("yup"));
-const formik_1 = require("formik");
-const react_1 = __importStar(require("react"));
-const NvsDynamicForm = ({ onSubmit, formElements = {}, fields = [], formClass, submitButton, submitButtonVisible = true, submitButtonLabel = submitButton.defaultOptions.label, submitButtonIsFullWidth = submitButton.defaultOptions.isFullWidth, submitButtonPosition = submitButton.defaultOptions.position, }) => {
-    const getDefaultValues = () => {
-        return fields.reduce((acc, field) => {
-            acc[field.id] = field.defaultValue;
-            return acc;
-        }, {});
-    };
-    const getValidateSchema = () => {
-        const validationSchema = fields.reduce((acc, field) => {
-            if (field?.validate) {
-                acc[field.id] = field.validate;
-            }
-            return acc;
-        }, {});
-        return Yup.object(validationSchema);
-    };
-    const [defaultValues, setDefaultValues] = (0, react_1.useState)(getDefaultValues());
-    const [validateSchema, setValidateSchema] = (0, react_1.useState)(getValidateSchema());
-    (0, react_1.useEffect)(() => {
-        setDefaultValues(getDefaultValues());
-        setValidateSchema(getValidateSchema());
-    }, [fields]);
-    const createFieldItemClass = (screenSize) => {
-        const className = [];
-        if (typeof screenSize == "number")
-            className.push("nvs-col-" + screenSize);
-        else {
-            className.push("nvs-col-md-" + screenSize?.desktop);
-            if (screenSize?.tablet)
-                className.push("nvs-col-sm-" + screenSize.tablet);
-            if (screenSize?.mobile)
-                className.push("nvs-col-xs-" + screenSize.mobile);
-        }
-        return className;
-    };
-    const createFormElement = (field) => {
-        const Field = formElements[field.fieldType]?.component;
-        return Field ? react_1.default.createElement(Field, { ...field }) : react_1.default.createElement(react_1.default.Fragment, null);
-    };
-    const createFormElements = (errors, touched) => {
-        return fields.map((field) => (react_1.default.createElement("div", { key: field.id, className: createFieldItemClass(field.screenSize ?? 12).join(" ") }, createFormElement({
-            ...field,
-            error: errors[field.id],
-            touched: touched[field.id],
-        }))));
-    };
-    const getSubmitButtonComponent = () => {
-        const SubmitButton = submitButton.component;
-        return react_1.default.createElement(SubmitButton, null, submitButtonLabel);
-    };
-    const getButtonPositionClass = (position) => {
-        const classes = {
-            left: "nvs-jc-start",
-            right: "nvs-jc-end",
-            center: "nvs-jc-center",
-        };
-        return classes[position];
-    };
-    const createSubmitButton = () => {
-        const buttonClasses = ["df-button"];
-        submitButtonIsFullWidth && buttonClasses.push("nvs-col-12");
-        return (react_1.default.createElement("div", { className: `nvs-row ${getButtonPositionClass(submitButtonPosition)}` },
-            react_1.default.createElement("div", { className: buttonClasses.join(" ") }, getSubmitButtonComponent())));
-    };
-    const createForm = (errors, touched) => (react_1.default.createElement(formik_1.Form, { className: `nvs-container-fluid${formClass ? ` ${formClass}` : ""}` },
-        react_1.default.createElement("div", { className: "nvs-row" }, createFormElements(errors, touched)),
-        submitButtonVisible && createSubmitButton()));
-    return (react_1.default.createElement(formik_1.Formik, { initialValues: defaultValues, validationSchema: validateSchema, onSubmit: async (values) => {
-            onSubmit && (await onSubmit(values));
-        } }, ({ errors, touched }) => createForm(errors, touched)));
-};
-exports.NvsDynamicForm = NvsDynamicForm;
-//# sourceMappingURL=_template.js.map

package/dist/cjs/nvsDynamicForm/_template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../lib/nvsDynamicForm/_template.tsx"],"names":[],"mappings":"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"}

package/dist/cjs/nvsDynamicForm/_type.d.ts

@@ -1,20 +0,0 @@
-import { FieldBase, SubmitButtonOptions } from "../types";
-export interface INvsDynamicForm {
-    onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
-    submitButton: {
-        component: React.FC<any>;
-        defaultOptions: SubmitButtonOptions;
-    };
-    formElements: {
-        [key: string]: {
-            component: React.FC<any>;
-            class: typeof FieldBase<any>;
-        };
-    };
-    fields: Array<FieldBase<unknown>>;
-    formClass?: string;
-    submitButtonVisible?: boolean;
-    submitButtonLabel?: string;
-    submitButtonPosition?: "left" | "center" | "right";
-    submitButtonIsFullWidth?: boolean;
-}

package/dist/cjs/nvsDynamicForm/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/nvsDynamicForm/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,8CAA4B;AAC5B,0CAAwB"}

package/dist/esm/nvsDynamicForm/_template.js

@@ -1,77 +0,0 @@
-import "nvs-flexgrid";
-import "./_style.css";
-import * as Yup from "yup";
-import { Form, Formik } from "formik";
-import React, { useEffect, useState } from "react";
-export const NvsDynamicForm = ({ onSubmit, formElements = {}, fields = [], formClass, submitButton, submitButtonVisible = true, submitButtonLabel = submitButton.defaultOptions.label, submitButtonIsFullWidth = submitButton.defaultOptions.isFullWidth, submitButtonPosition = submitButton.defaultOptions.position, }) => {
-    const getDefaultValues = () => {
-        return fields.reduce((acc, field) => {
-            acc[field.id] = field.defaultValue;
-            return acc;
-        }, {});
-    };
-    const getValidateSchema = () => {
-        const validationSchema = fields.reduce((acc, 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 createFieldItemClass = (screenSize) => {
-        const className = [];
-        if (typeof screenSize == "number")
-            className.push("nvs-col-" + screenSize);
-        else {
-            className.push("nvs-col-md-" + screenSize?.desktop);
-            if (screenSize?.tablet)
-                className.push("nvs-col-sm-" + screenSize.tablet);
-            if (screenSize?.mobile)
-                className.push("nvs-col-xs-" + screenSize.mobile);
-        }
-        return className;
-    };
-    const createFormElement = (field) => {
-        const Field = formElements[field.fieldType]?.component;
-        return Field ? React.createElement(Field, { ...field }) : React.createElement(React.Fragment, null);
-    };
-    const createFormElements = (errors, touched) => {
-        return fields.map((field) => (React.createElement("div", { key: field.id, className: createFieldItemClass(field.screenSize ?? 12).join(" ") }, createFormElement({
-            ...field,
-            error: errors[field.id],
-            touched: touched[field.id],
-        }))));
-    };
-    const getSubmitButtonComponent = () => {
-        const SubmitButton = submitButton.component;
-        return React.createElement(SubmitButton, null, submitButtonLabel);
-    };
-    const getButtonPositionClass = (position) => {
-        const classes = {
-            left: "nvs-jc-start",
-            right: "nvs-jc-end",
-            center: "nvs-jc-center",
-        };
-        return classes[position];
-    };
-    const createSubmitButton = () => {
-        const buttonClasses = ["df-button"];
-        submitButtonIsFullWidth && buttonClasses.push("nvs-col-12");
-        return (React.createElement("div", { className: `nvs-row ${getButtonPositionClass(submitButtonPosition)}` },
-            React.createElement("div", { className: buttonClasses.join(" ") }, getSubmitButtonComponent())));
-    };
-    const createForm = (errors, touched) => (React.createElement(Form, { className: `nvs-container-fluid${formClass ? ` ${formClass}` : ""}` },
-        React.createElement("div", { className: "nvs-row" }, createFormElements(errors, touched)),
-        submitButtonVisible && createSubmitButton()));
-    return (React.createElement(Formik, { initialValues: defaultValues, validationSchema: validateSchema, onSubmit: async (values) => {
-            onSubmit && (await onSubmit(values));
-        } }, ({ errors, touched }) => createForm(errors, touched)));
-};
-//# sourceMappingURL=_template.js.map

package/dist/esm/nvsDynamicForm/_template.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_template.js","sourceRoot":"","sources":["../../../lib/nvsDynamicForm/_template.tsx"],"names":[],"mappings":"AAAA,OAAO,cAAc,CAAC;AACtB,OAAO,cAAc,CAAC;AAEtB,OAAO,KAAK,GAAG,MAAM,KAAK,CAAC;AAQ3B,OAAO,EAAE,IAAI,EAAE,MAAM,EAA+B,MAAM,QAAQ,CAAC;AACnE,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAInD,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAC7B,QAAQ,EACR,YAAY,GAAG,EAAE,EACjB,MAAM,GAAG,EAAE,EACX,SAAS,EACT,YAAY,EACZ,mBAAmB,GAAG,IAAI,EAC1B,iBAAiB,GAAG,YAAY,CAAC,cAAc,CAAC,KAAK,EACrD,uBAAuB,GAAG,YAAY,CAAC,cAAc,CAAC,WAAW,EACjE,oBAAoB,GAAG,YAAY,CAAC,cAAc,CAAC,QAAQ,GAC3C,EAAE,EAAE;IACpB,MAAM,gBAAgB,GAAG,GAAkB,EAAE;QAC3C,OAAO,MAAM,CAAC,MAAM,CAAC,CAAC,GAAkB,EAAE,KAAqB,EAAE,EAAE;YACjE,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,YAAY,CAAC;YACnC,OAAO,GAAG,CAAC;QACb,CAAC,EAAE,EAAE,CAAC,CAAC;IACT,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,GAAG,EAAE;QAC7B,MAAM,gBAAgB,GAAG,MAAM,CAAC,MAAM,CACpC,CAAC,GAAqC,EAAE,KAAK,EAAE,EAAE;YAC/C,IAAI,KAAK,EAAE,QAAQ,EAAE,CAAC;gBACpB,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC;YACjC,CAAC;YACD,OAAO,GAAG,CAAC;QACb,CAAC,EACD,EAAE,CACH,CAAC;QACF,OAAO,GAAG,CAAC,MAAM,CAAC,gBAAgB,CAAC,CAAC;IACtC,CAAC,CAAC;IAEF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,gBAAgB,EAAE,CAAC,CAAC;IACvE,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;IAE1E,SAAS,CAAC,GAAG,EAAE;QACb,gBAAgB,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACrC,iBAAiB,CAAC,iBAAiB,EAAE,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,oBAAoB,GAAG,CAC3B,UAAwC,EACzB,EAAE;QACjB,MAAM,SAAS,GAAkB,EAAE,CAAC;QACpC,IAAI,OAAO,UAAU,IAAI,QAAQ;YAAE,SAAS,CAAC,IAAI,CAAC,UAAU,GAAG,UAAU,CAAC,CAAC;aACtE,CAAC;YACJ,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,EAAE,OAAO,CAAC,CAAC;YACpD,IAAI,UAAU,EAAE,MAAM;gBAAE,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;YAC1E,IAAI,UAAU,EAAE,MAAM;gBAAE,SAAS,CAAC,IAAI,CAAC,aAAa,GAAG,UAAU,CAAC,MAAM,CAAC,CAAC;QAC5E,CAAC;QACD,OAAO,SAAS,CAAC;IACnB,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAqB,EAAE,EAAE;QAClD,MAAM,KAAK,GAAG,YAAY,CAAC,KAAK,CAAC,SAAU,CAAC,EAAE,SAAS,CAAC;QACxD,OAAO,KAAK,CAAC,CAAC,CAAC,oBAAC,KAAK,OAAK,KAAK,GAAI,CAAC,CAAC,CAAC,yCAAK,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,CACzB,MAAmC,EACnC,OAAqC,EACrC,EAAE;QACF,OAAO,MAAM,CAAC,GAAG,CAAC,CAAC,KAAqB,EAAE,EAAE,CAAC,CAC3C,6BACE,GAAG,EAAE,KAAK,CAAC,EAAE,EACb,SAAS,EAAE,oBAAoB,CAAC,KAAK,CAAC,UAAU,IAAI,EAAE,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAEhE,iBAAiB,CAAC;YACjB,GAAG,KAAK;YACR,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EAAE,CAAC;YACvB,OAAO,EAAE,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC;SAC3B,CAAC,CACE,CACP,CAAC,CAAC;IACL,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,GAAG,EAAE;QACpC,MAAM,YAAY,GAAG,YAAY,CAAC,SAAS,CAAC;QAC5C,OAAO,oBAAC,YAAY,QAAE,iBAAiB,CAAgB,CAAC;IAC1D,CAAC,CAAC;IAEF,MAAM,sBAAsB,GAAG,CAAC,QAAqC,EAAE,EAAE;QACvE,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,cAAc;YACpB,KAAK,EAAE,YAAY;YACnB,MAAM,EAAE,eAAe;SACxB,CAAC;QACF,OAAO,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC3B,CAAC,CAAC;IAEF,MAAM,kBAAkB,GAAG,GAAG,EAAE;QAC9B,MAAM,aAAa,GAAG,CAAC,WAAW,CAAC,CAAC;QAEpC,uBAAuB,IAAI,aAAa,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAE5D,OAAO,CACL,6BACE,SAAS,EAAE,WAAW,sBAAsB,CAAC,oBAAoB,CAAC,EAAE;YAEpE,6BAAK,SAAS,EAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,IACpC,wBAAwB,EAAE,CACvB,CACF,CACP,CAAC;IACJ,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,CACjB,MAAmC,EACnC,OAAqC,EACrC,EAAE,CAAC,CACH,oBAAC,IAAI,IAAC,SAAS,EAAE,sBAAsB,SAAS,CAAC,CAAC,CAAC,IAAI,SAAS,EAAE,CAAC,CAAC,CAAC,EAAE,EAAE;QACvE,6BAAK,SAAS,EAAC,SAAS,IAAE,kBAAkB,CAAC,MAAM,EAAE,OAAO,CAAC,CAAO;QACnE,mBAAmB,IAAI,kBAAkB,EAAE,CACvC,CACR,CAAC;IAEF,OAAO,CACL,oBAAC,MAAM,IACL,aAAa,EAAE,aAAa,EAC5B,gBAAgB,EAAE,cAAc,EAChC,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,EAAE;YACzB,QAAQ,IAAI,CAAC,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC;QACvC,CAAC,IAEA,CAAC,EAAE,MAAM,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,UAAU,CAAC,MAAM,EAAE,OAAO,CAAC,CAC9C,CACV,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/nvsDynamicForm/_type.d.ts

@@ -1,20 +0,0 @@
-import { FieldBase, SubmitButtonOptions } from "../types";
-export interface INvsDynamicForm {
-    onSubmit?: ((values: unknown) => void) | ((values: unknown) => Promise<void>);
-    submitButton: {
-        component: React.FC<any>;
-        defaultOptions: SubmitButtonOptions;
-    };
-    formElements: {
-        [key: string]: {
-            component: React.FC<any>;
-            class: typeof FieldBase<any>;
-        };
-    };
-    fields: Array<FieldBase<unknown>>;
-    formClass?: string;
-    submitButtonVisible?: boolean;
-    submitButtonLabel?: string;
-    submitButtonPosition?: "left" | "center" | "right";
-    submitButtonIsFullWidth?: boolean;
-}

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

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../lib/nvsDynamicForm/index.tsx"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC"}