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

package/lib/index.tsx

@@ -0,0 +1,2 @@
+export * from "./nvsDynamicForm";
+export * from "./types";

package/lib/nvsDynamicForm/_stories.tsx

@@ -0,0 +1,93 @@
+import { INvsDynamicForm, NvsDynamicForm } from "./";
+import * as Yup from "yup";
+
+import { Field } from "formik";
+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 (
+    <Field
+      style={{ width: "100%", boxSizing: "border-box" }}
+      id={opt.id}
+      name={opt.id}
+      placeholder={opt.label}
+    />
+  );
+};
+
+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",
+        defaultValue: "ismet",
+        screenSize: {
+          desktop: 6,
+        },
+        validate: Yup.string().required(),
+      }),
+      new TextboxField({
+        id: "lastName",
+        label: "Last Name",
+        screenSize: {
+          desktop: 6,
+        },
+        validate: Yup.string().required(),
+      }),
+      new TextboxField({
+        id: "emailAddress",
+        label: "E-mail Address",
+        screenSize: 12,
+        type: "email",
+      }),
+    ],
+  },
+};

package/lib/nvsDynamicForm/_style.css

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

package/lib/nvsDynamicForm/_template.tsx

@@ -0,0 +1,143 @@
+import "nvs-flexgrid";
+import "./_style.css";
+
+import * as Yup from "yup";
+
+import {
+  DynamicObject,
+  FieldBase,
+  IScreenSize,
+  ScreenSizeType,
+} from "../types";
+import { Form, Formik, FormikErrors, FormikTouched } from "formik";
+import React, { useEffect, useState } from "react";
+
+import { INvsDynamicForm } from "./_type";
+
+export const NvsDynamicForm = ({
+  onSubmit,
+  formElements = {},
+  fields = [],
+  formClass,
+  submitButton,
+  submitButtonVisible = true,
+  submitButtonLabel = submitButton.defaultOptions.label,
+  submitButtonIsFullWidth = submitButton.defaultOptions.isFullWidth,
+  submitButtonPosition = submitButton.defaultOptions.position,
+}: 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 createFieldItemClass = (
+    screenSize: ScreenSizeType | IScreenSize,
+  ): Array<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;
+  };
+
+  const createFormElement = (field: FieldBase<any>) => {
+    const Field = formElements[field.fieldType!]?.component;
+    return Field ? <Field {...field} /> : <></>;
+  };
+
+  const createFormElements = (
+    errors: FormikErrors<DynamicObject>,
+    touched: FormikTouched<DynamicObject>,
+  ) => {
+    return fields.map((field: FieldBase<any>) => (
+      <div
+        key={field.id}
+        className={createFieldItemClass(field.screenSize ?? 12).join(" ")}
+      >
+        {createFormElement({
+          ...field,
+          error: errors[field.id],
+          touched: touched[field.id],
+        })}
+      </div>
+    ));
+  };
+
+  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 createSubmitButton = () => {
+    const buttonClasses = ["df-button"];
+
+    submitButtonIsFullWidth && buttonClasses.push("nvs-col-12");
+
+    return (
+      <div
+        className={`nvs-row ${getButtonPositionClass(submitButtonPosition)}`}
+      >
+        <div className={buttonClasses.join(" ")}>
+          {getSubmitButtonComponent()}
+        </div>
+      </div>
+    );
+  };
+
+  const createForm = (
+    errors: FormikErrors<DynamicObject>,
+    touched: FormikTouched<DynamicObject>,
+  ) => (
+    <Form className={`nvs-container-fluid${formClass ? ` ${formClass}` : ""}`}>
+      <div className="nvs-row">{createFormElements(errors, touched)}</div>
+      {submitButtonVisible && createSubmitButton()}
+    </Form>
+  );
+
+  return (
+    <Formik
+      initialValues={defaultValues}
+      validationSchema={validateSchema}
+      onSubmit={async (values) => {
+        onSubmit && (await onSubmit(values));
+      }}
+    >
+      {({ errors, touched }) => createForm(errors, touched)}
+    </Formik>
+  );
+};

package/lib/nvsDynamicForm/_type.tsx

@@ -0,0 +1,21 @@
+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/lib/nvsDynamicForm/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,23 @@
+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;
+  touched?: boolean;
+
+  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,11 +1,12 @@
 {
   "name": "@nvs-dynamic-form/react-core",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "types": "dist/cjs/index.d.ts",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "files": [
     "dist",
+    "lib",
     "packages.json"
   ],
   "scripts": {