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

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

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

@@ -0,0 +1,137 @@
+import * as Yup from "yup";
+
+import { ArrayField, GroupField } from "../../../../types";
+import {
+  ButtonComponent,
+  TextboxElement,
+  TextboxField,
+} from "../../components";
+import { INvsDynamicForm, NvsDynamicForm } from "../../..";
+
+import { ChangeEvent } from "react";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Array Field",
+};
+
+export const NestedGroupExample: { args: INvsDynamicForm; name: string } = {
+  name: "Nested Arraf Field",
+  args: {
+    onSubmit: (values) => {
+      console.log(values);
+      alert(JSON.stringify(values, null, 2));
+    },
+    submitButtonIsFullWidth: false,
+    submitButtonLabel: "Submit",
+    submitButtonVisible: true,
+    submitButtonPosition: "right",
+    submitButtonDefaultOptions: {
+      label: "Submit",
+      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(),
+        screenSize: {
+          desktop: 6,
+          mobile: 12,
+        },
+      }),
+      new TextboxField({
+        id: "lastName",
+        label: "Last Name",
+        placeholder: "Enter your last name",
+        validate: Yup.string().required(),
+        screenSize: {
+          desktop: 6,
+          mobile: 12,
+        },
+      }),
+      new GroupField({
+        id: "contactDetails",
+        fields: [
+          new TextboxField({
+            id: "email",
+            label: "Email Address",
+            placeholder: "Enter your email",
+            validate: Yup.string().required(),
+            screenSize: {
+              desktop: 6,
+              mobile: 12,
+            },
+          }),
+          new TextboxField({
+            id: "phone",
+            label: "Phone Number",
+            placeholder: "Enter your phone number",
+            validate: Yup.string().required(),
+            screenSize: {
+              desktop: 6,
+              mobile: 12,
+            },
+          }),
+        ],
+      }),
+      new ArrayField({
+        id: "sources",
+        label: "Sources",
+        addButtonOptions: {
+          label: "Add Source",
+        },
+        defaultValues: [
+          {
+            sourceName: "Source 1",
+            addresses: [{ cityName: "İzmir", districtName: "Göztepe" }],
+          },
+        ],
+        validate: Yup.array().min(1),
+        fields: [
+          new TextboxField({
+            id: "sourceName",
+            label: "Source Name",
+            placeholder: "Enter source name",
+            screenSize: 12,
+            validate: Yup.string().required(),
+          }),
+          new ArrayField({
+            id: "addresses",
+            label: "Addresses",
+            addButtonOptions: {
+              label: "Add Address",
+            },
+            validate: Yup.array().min(1),
+            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,
+                validate: Yup.string().required(),
+              }),
+            ],
+          }),
+        ],
+      }),
+    ],
+  },
+};

package/lib/nvs-dynamic-form/stories/fields/basicExample.stories.tsx

@@ -0,0 +1,66 @@
+import * as Yup from "yup";
+
+import { ButtonComponent, TextboxElement, TextboxField } from "../components";
+import { INvsDynamicForm, NvsDynamicForm } from "../../";
+
+import { ChangeEvent } from "react";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Basic Example",
+};
+
+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(),
+        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",
+      }),
+    ],
+  },
+};

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

@@ -0,0 +1,113 @@
+import * as Yup from "yup";
+
+import { ArrayField, GroupField } from "../../../../types";
+import {
+  ButtonComponent,
+  TextboxElement,
+  TextboxField,
+} from "../../components";
+import { INvsDynamicForm, NvsDynamicForm } from "../../..";
+
+import { ChangeEvent } from "react";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Group Field",
+};
+
+export const ArrayFieldsInGroup: { args: INvsDynamicForm; name: string } = {
+  name: "Array Fields In Group",
+  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: "contactInfo",
+        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 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/groupField/basicExample.stories.tsx

@@ -0,0 +1,86 @@
+import * as Yup from "yup";
+
+import {
+  ButtonComponent,
+  TextboxElement,
+  TextboxField,
+} from "../../components";
+import { INvsDynamicForm, NvsDynamicForm } from "../../..";
+
+import { ChangeEvent } from "react";
+import { GroupField } from "../../../../types";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Group 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",
+        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,
+          }),
+        ],
+      }),
+    ],
+  },
+};

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

@@ -0,0 +1,112 @@
+import * as Yup from "yup";
+
+import {
+  ButtonComponent,
+  Container,
+  TextboxElement,
+  TextboxField,
+} from "../../components";
+import { INvsDynamicForm, NvsDynamicForm } from "../../..";
+
+import { ChangeEvent } from "react";
+import { GroupField } from "../../../../types";
+
+export default {
+  component: NvsDynamicForm,
+  title: "Group Field",
+};
+
+export const GroupAndContainer: { args: INvsDynamicForm; name: string } = {
+  name: "Container",
+  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,
+          }),
+        ],
+      }),
+    ],
+  },
+};