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

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

@@ -1,349 +0,0 @@
-import { INvsDynamicForm, NvsDynamicForm } from ".";
-import * as Yup from "yup";
-
-import React, { ChangeEvent } from "react";
-import { ArrayField, FieldBase, GroupField } from "../types";
-
-export default {
-  component: NvsDynamicForm,
-  title: "Nvs Dynamic Form",
-};
-
-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>
-  );
-};
-
-const TextboxElement = ({ defaultValue, ...props }: TextboxField) => {
-  return (
-    <input style={{ width: "100%", boxSizing: "border-box" }} {...props} />
-  );
-};
-
-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";
-  placeholder?: string;
-
-  constructor(options: TextboxField) {
-    super(options, "");
-    this.type = options.type ?? "text";
-    this.placeholder = options.placeholder ?? "";
-  }
-}
-
-export const Default: { args: INvsDynamicForm; name: string } = {
-  name: "Simple 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 TextboxField({
-        id: "emailAddress",
-        placeholder: "Enter your e-mail address",
-        screenSize: 12,
-        type: "email",
-      }),
-    ],
-  },
-};
-
-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(),
-        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/services/generateFormContentUtils.tsx

@@ -1,196 +0,0 @@
-import {
-  ArrayField,
-  ArrayFieldAddButton,
-  FieldBase,
-  GroupField,
-  LabelOptions,
-} from "../../types";
-
-import { ArrayField as ArrayFieldElement } from "../components/arrayField";
-import { Container } from "../components/container";
-import { Field } from "../components/field";
-import { FieldType } from "../_type";
-import { GroupField as GroupFieldElement } from "../components/groupField";
-import { IFormElement } from "../components/field";
-import React from "react";
-import { ReactNode } from "react";
-
-export class GenerateFormContentUtils {
-  private readonly containerComponent: React.FC<any>;
-  private readonly formElements: IFormElement;
-  private readonly useContainersOutsideGroup: boolean;
-  private readonly useGroupContainer: boolean;
-  private readonly containerVisible: boolean;
-  private readonly fields: Array<FieldType>;
-  private readonly containerOptions: { [key: string]: any };
-  private readonly buttonComponent?: React.FC<any>;
-  private readonly fieldArrayAddButtonDefaultOptions: ArrayFieldAddButton;
-  private readonly fieldArrayRemoveButtonDefaultOptions: ArrayFieldAddButton;
-  private readonly labelDefaultOptions: LabelOptions;
-
-  constructor({
-    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;
-  }) {
-    this.containerComponent = containerComponent;
-    this.formElements = formElements;
-    this.useContainersOutsideGroup = useContainersOutsideGroup;
-    this.useGroupContainer = useGroupContainer;
-    this.containerVisible = containerVisible;
-    this.fields = fields;
-    this.containerOptions = containerOptions ?? {};
-    this.buttonComponent = buttonComponent;
-    this.fieldArrayAddButtonDefaultOptions =
-      fieldArrayAddButtonDefaultOptions ?? {};
-    this.fieldArrayRemoveButtonDefaultOptions =
-      fieldArrayRemoveButtonDefaultOptions ?? {};
-    this.labelDefaultOptions = labelDefaultOptions ?? {};
-  }
-
-  createContainer(content: ReactNode, containerProps: object) {
-    return (
-      <Container
-        containerComponent={this.containerComponent}
-        options={containerProps}
-      >
-        {content}
-      </Container>
-    );
-  }
-
-  createFormContent() {
-    const singleFields = this.createSingleFieldsElements();
-    const groupFields = this.createGroupFieldsElements();
-
-    let formContent;
-    if (this.containerVisible && this.useContainersOutsideGroup && singleFields)
-      formContent = (
-        <>
-          {this.createContainer(singleFields, this.containerOptions)}
-          {groupFields}
-        </>
-      );
-    else
-      formContent = this.createFormGroup(
-        <>
-          {singleFields}
-          {groupFields}
-        </>,
-      );
-
-    return formContent;
-  }
-
-  createFormElements(fields: Array<FieldType>): JSX.Element[] {
-    const fieldsElements = [];
-    for (const field of fields) {
-      if (field instanceof GroupField)
-        fieldsElements.push(this.createGroupFieldElement(field));
-      else if (field instanceof ArrayField)
-        fieldsElements.push(this.createArrayFieldElement(field));
-      else fieldsElements.push(this.createSingleFieldElement(field));
-    }
-    return fieldsElements;
-  }
-
-  createContentContainer(formElements: ReactNode) {
-    return (
-      <div className="nvs-container-fluid">
-        <div className="nvs-row">{formElements}</div>
-      </div>
-    );
-  }
-
-  private getSingleFields() {
-    return this.fields.filter((field) => this.isSingleField(field));
-  }
-
-  private getGroupFields() {
-    return this.fields.filter((field) => !this.isSingleField(field));
-  }
-
-  private createSingleFieldsElements() {
-    const singleFields = this.getSingleFields();
-    return (
-      singleFields.length > 0 &&
-      this.createContentContainer(this.createFormElements(singleFields))
-    );
-  }
-
-  private createGroupFieldsElements() {
-    const groupFields = this.getGroupFields();
-    return groupFields.length > 0 && this.createFormElements(groupFields);
-  }
-
-  private createSingleFieldElement(field: FieldBase<unknown>) {
-    return (
-      <Field key={field.id} formElements={this.formElements} field={field} />
-    );
-  }
-
-  private createGroupFieldElement(field: GroupField) {
-    return (
-      <GroupFieldElement
-        key={field.id}
-        formElements={this.formElements}
-        field={field}
-        containerComponent={this.containerComponent}
-        useContainersOutsideGroup={this.useContainersOutsideGroup}
-        useGroupContainer={this.useGroupContainer}
-        containerVisible={this.containerVisible}
-      />
-    );
-  }
-
-  private createArrayFieldElement(field: ArrayField) {
-    return (
-      <ArrayFieldElement
-        key={field.id}
-        formElements={this.formElements}
-        field={field}
-        containerComponent={this.containerComponent}
-        useContainersOutsideGroup={this.useContainersOutsideGroup}
-        useGroupContainer={this.useGroupContainer}
-        containerVisible={this.containerVisible}
-        buttonComponent={this.buttonComponent!}
-        addButtonDefaultOptions={this.fieldArrayAddButtonDefaultOptions}
-        removeButtonDefaultOptions={this.fieldArrayRemoveButtonDefaultOptions}
-        labelDefaultOptions={this.labelDefaultOptions}
-      />
-    );
-  }
-
-  private isSingleField(field: FieldType) {
-    return !(
-      field instanceof GroupField &&
-      field.containerVisible &&
-      this.useGroupContainer &&
-      this.containerVisible
-    );
-  }
-
-  private createFormGroup(formContent: ReactNode) {
-    return <div className="df-form-group">{formContent}</div>;
-  }
-}