@mosip/json-form-builder 0.1.0-beta.0

package/dist/components/SimpleTypeComponent.d.ts

@@ -0,0 +1,9 @@
+import { FormState, FormField } from "../types";
+/**
+ * This function creates a simple textbox form element that supports multilingual labels and validation.
+ * It handles multiple languages, required validation, and regex validation.
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ * @param {FormField} field Form field object containing type, id, label, required, and other properties.
+ * @returns {HTMLDivElement} A div element containing the form field with its label and input.
+ */
+export declare const createSimpleTextbox: (state: FormState, field: FormField) => HTMLDivElement;

package/dist/components/TextInputComponent.d.ts

@@ -0,0 +1,8 @@
+import { FormState, FormField } from "../types";
+/**
+ * Creates a string input form element.
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ * @param {FormField} field Form field object containing type, id, label, required, and other properties.
+ * @returns {HTMLDivElement} A div element containing the form field with its label and input.
+ */
+export declare const createStringField: (state: FormState, field: FormField) => HTMLDivElement;

package/dist/components/index.d.ts

@@ -0,0 +1,9 @@
+import { createCheckboxField } from "./CheckboxComponent";
+import { createDateField } from "./DateComponent";
+import { createDropdownField } from "./DropdownComponent";
+import { createSimpleTextbox } from "./SimpleTypeComponent";
+import { createPasswordField } from "./PasswordComponent";
+import { createStringField } from "./TextInputComponent";
+import { createPhoneField } from "./PhoneInputComponent";
+import { createPhotoField } from "./PhotoComponent";
+export { createCheckboxField, createDateField, createDropdownField, createSimpleTextbox, createPasswordField, createStringField, createPhoneField, createPhotoField, };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { JsonFormBuilder } from './JsonFormBuilder';
+export type { FormConfig, AdditionalConfig } from './types';

package/dist/stories/JsonFormBuilder.stories.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { JsonFormBuilder } from "../JsonFormBuilder";
+declare const JsonFormBuilderWrapper: React.FC<any>;
+declare const _default: Meta<typeof JsonFormBuilderWrapper>;
+export default _default;
+type Story = StoryObj<typeof JsonFormBuilder>;
+export declare const JsonFormBuilderExample: Story;

package/dist/types.d.ts

@@ -0,0 +1,130 @@
+export interface KeyValuePair {
+    [key: string]: string;
+}
+export interface Label extends KeyValuePair {
+}
+export interface FormField {
+    id: string;
+    controlType: "textbox" | "password" | "date" | "dropdown" | "checkbox" | "phone" | "photo";
+    type?: "string" | "simpleType";
+    labelName: Label;
+    required?: boolean;
+    validators?: Validator[];
+    alignmentGroup?: string;
+    cssClasses?: string[];
+    placeholder?: Label;
+    disabled?: boolean;
+    info?: Label;
+    capsLockCheck?: boolean;
+    prefix?: string[];
+    acceptedFileTypes?: string[];
+    format?: string;
+}
+export interface AllowedValues {
+    [key: string]: {
+        [key: string]: Label;
+    } | string;
+}
+export interface SubmitButtonConfig {
+    label: string;
+    action: (data: FormData) => void;
+}
+export interface LanguageConfig {
+    currentLanguage?: string;
+    defaultLanguage?: string;
+    showLanguageSwitcher?: boolean;
+    languageSwitcherPosition?: "top" | "bottom";
+    availableLanguages?: string[];
+    rtlLanguages?: string[];
+}
+export interface ReCaptchaConfig {
+    siteKey: string;
+    enabled?: boolean;
+    language?: string;
+}
+export interface AdditionalSchema {
+    [id: string]: {
+        label: Label;
+        placeholder: Label;
+    };
+}
+export interface AdditionalConfig {
+    submitButton: SubmitButtonConfig;
+    language?: LanguageConfig;
+    recaptcha?: ReCaptchaConfig;
+    additionalSchema?: AdditionalSchema;
+}
+export interface Errors {
+    [key: string]: KeyValuePair;
+}
+export interface FormConfig {
+    schema: FormField[];
+    language: LanguageSettings;
+    allowedValues?: AllowedValues;
+    errors?: Errors;
+    maxUploadFileSize?: number;
+    i18nValues?: {
+        errors?: Errors;
+        labels?: {
+            [id: string]: Label;
+        };
+        placeholders?: {
+            [id: string]: Label;
+        };
+    };
+}
+export interface FileUploadData {
+    value: string | Blob;
+    docType: string;
+    format: string;
+    refId: string;
+}
+export type FormValue = string | boolean | KeyValuePair | KeyValuePair[] | File | FileUploadData | undefined;
+export interface FormData {
+    [key: string]: FormValue;
+}
+export interface LanguageSettings {
+    mandatory: string[];
+    langCodeMap: KeyValuePair;
+    optional?: string[];
+}
+export interface Validator {
+    regex?: RegExp | string;
+    error?: KeyValuePair;
+    langCode?: string;
+}
+export interface FormState {
+    schema: FormField[];
+    allowedValues: AllowedValues;
+    mandatoryLanguages: string[];
+    optionalLanguages: string[];
+    container: HTMLElement;
+    formData: FormData;
+    formElements: {
+        [key: string]: HTMLElement | {
+            [key: string]: HTMLElement;
+        };
+    };
+    submitLabel: string;
+    submitAction: (data: FormData) => void;
+    currentLanguage: string;
+    defaultLanguage: string;
+    showLanguageSwitcher: boolean;
+    languageSwitcherPosition: "top" | "bottom";
+    availableLanguages: string[];
+    rtlLanguages: string[];
+    isRTL: boolean;
+    recaptcha?: ReCaptchaConfig;
+    fallbackErrors: Errors;
+    lastErrors?: Record<string, "required" | "mismatch" | number | null>;
+    languageMap: KeyValuePair;
+    additionalSchema?: AdditionalSchema;
+    isSubmitting: boolean;
+    maxUploadFileSize: number;
+    labels: {
+        [id: string]: Label;
+    };
+    placeholders: {
+        [id: string]: Label;
+    };
+}

package/dist/utils/constants.d.ts

@@ -0,0 +1,21 @@
+declare const ControlType: {
+    TEXTBOX: string;
+    PASSWORD: string;
+    DATE: string;
+    DROPDOWN: string;
+    CHECKBOX: string;
+    PHONE: string;
+    PHOTO: string;
+    FILE: string;
+};
+declare const InputType: {
+    STRING: string;
+    SIMPLE_TYPE: string;
+};
+declare const CameraErrorCodes: {
+    PERMISSION_DENIED: string;
+    NOT_ACCESSIBLE: string;
+    CAMERA_NOT_FOUND: string;
+    NOT_READABLE: string;
+};
+export { ControlType, InputType, CameraErrorCodes };

package/dist/utils/recaptcha.d.ts

@@ -0,0 +1,15 @@
+import { FormState } from "../types";
+/**
+ * Loads the reCAPTCHA script asynchronously and checks if it is already loaded.
+ * @returns {Promise<boolean>} A promise that resolves to true if reCAPTCHA script is loaded successfully, false otherwise.
+ */
+declare const loadRecaptcha: (state: FormState) => Promise<boolean>;
+/**
+ * Adds the reCAPTCHA script to the document if reCAPTCHA is enabled and site key is provided.
+ */
+declare const addRecaptchaScript: (state: FormState) => Promise<void>;
+declare const enableRecaptcha: (state: FormState, form: HTMLElement) => void;
+declare const initializeRecaptcha: (state: FormState) => void;
+declare const reInitializeRecaptcha: (state: FormState) => void;
+declare const validateRecaptcha: (state: FormState) => boolean;
+export { enableRecaptcha, addRecaptchaScript, initializeRecaptcha, loadRecaptcha, reInitializeRecaptcha, validateRecaptcha, };

package/dist/utils/responsive-style.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Adds responsive styles to the form elements to ensure they are displayed correctly on different screen sizes.
+ */
+declare const addResponsiveStyles: () => void;
+/**
+ * Adds styles for right-to-left (RTL) languages to ensure proper layout and alignment.
+ */
+declare const addRTLStyles: () => void;
+export { addRTLStyles, addResponsiveStyles };

package/dist/utils/utils.d.ts

@@ -0,0 +1,122 @@
+import { FormField, FormState, Label } from "../types";
+type LabelObject = Record<string, string>;
+/**
+ * Helps to get the label text for a form field, including a required indicator if the field is marked as required.
+ * @param {FormState} state form state containing current language and default language
+ * @param {FormField | null} field form field object containing label and required properties
+ * @param {LabelObject} additionalLabel Optional additional label object to use instead of the field's label.
+ * @returns {string} The label text for the field, including a required indicator if applicable.
+ */
+declare const getLabelText: (state: FormState, field: FormField | null, additionalLabel?: LabelObject) => string;
+/**
+ * Gets the label text for a form field, including a required indicator if the field is marked as required.
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ * @param {LabelObject | undefined} labels Labels object containing multilingual labels for the field.
+ * @param {boolean} strictOnly Boolean flag to determine if strict fallback is required.
+ * @param {string} currLang Current language code to use for fetching the label.
+ * @param {string} defaultLang Default language code to use if no label is found in the current language.
+ * @returns {string} The label text for the field, including a required indicator if applicable.
+ */
+declare const getMultiLangText: (state: FormState, labels: LabelObject | undefined, strictOnly?: boolean, currLang?: string, defaultLang?: string) => string;
+/**
+ * Appends an error message to the specified container.
+ * It creates an error icon and a text node, and appends them to the container.
+ * @param {HTMLDivElement} container Container element where the error message will be appended.
+ * @param {Label|string} message Message to display in the error container, can be a string or a multilingual label object.
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ */
+declare const appendError: (container: HTMLDivElement, message: string | Label, // Label = { [langCode: string]: string }
+state?: FormState) => void;
+/**
+ * Handles the required validation for a form field.
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ * @param {string} normalizedLang Current language code normalized to a 3-letter code.
+ * @param {string} normalizedDefault Default language code normalized to a 3-letter code.
+ * @param {HTMLDivElement} errorContainer Error container element where error messages will be appended.
+ * @returns { lastError: 'required'; isValid: false }
+ */
+declare const handleRequiredValidation: (state: FormState, errorContainer: HTMLDivElement, normalizedLang?: string, normalizedDefault?: string) => {
+    lastError: "required";
+    isValid: false;
+};
+/**
+ * Handles regex validation for a form field.
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ * @param {HTMLDivElement} errorContainer Error container element where error messages will be appended.
+ * @param {any[]} validators Validators array containing regex or validator functions.
+ * @param {string} value Value to validate against the regex.
+ * @param {boolean} useLangCode Language code usage flag to filter validators based on language.
+ * @param {string} currentLang Current language code normalized to a 3-letter code.
+ * @param {string} defaultLang Default language code normalized to a 3-letter code.
+ * @returns { lastError: number | null; isValid: boolean }
+ */
+declare const handleRegexValidation: (state: FormState, errorContainer: HTMLDivElement, validators: any[], value: string, useLangCode: boolean, currentLang?: string, defaultLang?: string) => {
+    lastError: number;
+    isValid: boolean;
+} | {
+    lastError: null;
+    isValid: boolean;
+};
+/**
+ * Creates an SVG element representing an info icon.
+ * @param {number | string} size size of the info icon in px
+ * @returns {SVGSVGElement} returns an SVG element with the info icon.
+ */
+declare const createInfoIconSvg: (size?: number | string) => SVGSVGElement;
+/**
+ * Create Info icon for a form field
+ * @param {string} infoMessage The message to display in the info icon tooltip.
+ * @returns {HTMLSpanElement} Returns a span element containing the info icon and tooltip.
+ */
+declare const createInfoIcon: (infoMessage: string) => HTMLSpanElement;
+/**
+ * Get caps lock span
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ * @param {FormField} field form field object containing label and required properties
+ * @returns {HTMLSpanElement} returns a span element for caps lock info
+ */
+declare const getCapsLockSpan: (state: FormState, field: FormField) => HTMLSpanElement;
+/**
+ * Toggle caps lock info on click of caps lock button
+ * @param {KeyboardEvent | MouseEvent} event event from click or keyup
+ * @param {HTMLSpanElement} capsLockSpan span element of the caps lock span
+ */
+declare const checkCapsLock: (event: KeyboardEvent | MouseEvent, capsLockSpan: HTMLSpanElement) => void;
+/**
+ * Enables caps lock check for a form field.
+ * @param {FormField} field Form field object containing type, id, label, required, and other properties.
+ * @param {HTMLDivElement} wrapper Wrapper HTMLDivElement that contains the form field.
+ * @param {HTMLInputElement} input Input HTMLInputElement that will have the caps lock check enabled.
+ */
+declare const enableCapsLockCheck: (field: FormField, wrapper: HTMLDivElement, input: HTMLInputElement) => void;
+/**
+ * Prevents the default action of an event.
+ * @param {Event} e Event to prevent default action for.
+ */
+declare const preventDefaultFn: (e: Event) => void;
+/**
+ * Disables a form field by preventing user input and interaction.
+ * @param {HTMLInputElement | HTMLSelectElement} field HTMLInputElement or HTMLSelectElement to disable.
+ */
+declare const disableField: (field: HTMLInputElement | HTMLSelectElement) => void;
+/**
+ * Creates a new div element to be used as an error container.
+ * @returns {HTMLDivElement} A new div element to be used as an error container.
+ */
+declare const createErrorContainer: () => HTMLDivElement;
+/**
+ * Converts a one-way language map into a two-way map.
+ * This allows for bidirectional lookup where both keys and values are language codes.
+ * @param {Record<string, string>}oneWayMap A map where keys are language codes and values are their corresponding labels.
+ * @returns Two-way map where both keys and values are language codes, allowing for bidirectional lookup.
+ */
+declare function buildBidirectionalLanguageMap(oneWayMap: Record<string, string>): Record<string, string>;
+declare const dataUrlToBlob: (dataUrl: string) => Blob;
+/**
+ * Validate Form
+ * @param {FormState} state Current form state containing schema, container, and other properties.
+ * @returns {boolean}  Returns true if the form is valid, false otherwise.
+ */
+declare const validateForm: (state: FormState) => boolean;
+declare const emptyInvalidFn: (input: HTMLInputElement | HTMLSelectElement) => (() => void);
+export { getLabelText, getMultiLangText, appendError, handleRequiredValidation, handleRegexValidation, createInfoIconSvg, createInfoIcon, getCapsLockSpan, checkCapsLock, disableField, preventDefaultFn, createErrorContainer, buildBidirectionalLanguageMap, enableCapsLockCheck, dataUrlToBlob, validateForm, emptyInvalidFn, };

package/package.json

@@ -0,0 +1,78 @@
+{
+  "name": "@mosip/json-form-builder",
+  "version": "0.1.0-beta.0",
+  "description": "A dynamic JSON form builder with multi-language support, validation, and responsive design",
+  "main": "dist/JsonFormBuilder.umd.js",
+  "module": "dist/JsonFormBuilder.esm.js",
+  "types": "dist/JsonFormBuilder.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "build-storybook",
+    "build": "rimraf dist && rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "lint": "eslint src/**/*.ts",
+    "format": "prettier --write \"src/**/*.ts\"",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run lint",
+    "watch": "npm-watch",
+    "verify": "npm run build"
+  },
+  "watch": {
+    "build": {
+      "patterns": [
+        "src"
+      ],
+      "extensions": "ts"
+    }
+  },
+  "keywords": [
+    "form",
+    "builder",
+    "json",
+    "multilingual",
+    "validation",
+    "responsive"
+  ],
+  "author": "MOSIP",
+  "license": "MPL-2.0",
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^11.1.6",
+    "@storybook/addon-essentials": "^8.6.14",
+    "@storybook/addon-interactions": "^8.6.14",
+    "@storybook/cli": "^8.6.14",
+    "@storybook/react-vite": "^8.6.14",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
+    "eslint": "^8.56.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "npm-watch": "^0.13.0",
+    "prettier": "^3.2.5",
+    "rimraf": "^5.0.5",
+    "rollup": "^4.9.6",
+    "ts-jest": "^29.1.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.3.3",
+    "vite": "^6.3.6"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0"
+  }
+}