impaktapps-ui-builder 0.0.382457 → 1.0.0

package/widgetLibrary/InputWidget/PhoneInput.tsx

@@ -0,0 +1,29 @@
+import { Interpolation, Theme } from "@emotion/react";
+import { FC } from "react";
+import { PhoneInput } from "react-international-phone";
+// import "react-international-phone/style.css";
+interface mobileProps {
+  onChange: (value: string) => void;
+  value: string | undefined; 
+  style: Interpolation<Theme>;
+  required?: boolean;
+  disabled?: boolean;
+  title?:string
+}
+const MobileInput: FC<mobileProps> = ({ onChange, value , style,disabled }) => {
+  return (
+    <div style={{}}>
+    <PhoneInput
+      defaultCountry="in"
+      disabled={disabled}
+      css={style}
+       style={{border:"1px solid #9CA3AF",borderRadius:"5px",background:"#F4F6F8",backgroundColor:"#F4F6F8"}}
+      inputStyle={{ width: "100%",background:"#F4F6F8",backgroundColor:"#F4F6F8" }}
+      value={value}
+      onChange={(phone: string) => onChange(phone)}
+      hideDropdown
+    />
+    </div>
+  );
+};
+export default MobileInput;

package/widgetLibrary/InputWidget/eventHandlerConfig.ts

@@ -0,0 +1,26 @@
+import i18n from "@/i18n/config"
+import { EventHandlerConfig } from "@/widgetLibrary/interface"
+
+export const INPUT_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
+  events: [
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.change",
+      ),
+      value: "change",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.focus",
+      ),
+      value: "focus",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.blur",
+      ),
+      value: "blur",
+    },
+  ],
+  methods: ["setValue", "clearValue", "focus", "validate"],
+}

package/widgetLibrary/InputWidget/index.ts

@@ -0,0 +1,5 @@
+
+export {INPUT_WIDGET_CONFIG} from './widgetConfig';
+export {InputWidget} from './input';
+export {INPUT_PANEL_CONFIG} from './panelConfig';
+export {INPUT_EVENT_HANDLER_CONFIG} from './eventHandlerConfig';

package/widgetLibrary/InputWidget/input.tsx

@@ -0,0 +1,267 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import { InputWidgetProps } from "./interface";
+import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage";
+import { getValidateMessageFunc } from "./utils";
+import { AutoHeightContainer } from "@/widgetLibrary/PublicSector/AutoHeightContainer";
+import { debounce } from "lodash-es";
+import { ButtonIcon } from "../IconWidget/utils";
+import PhoneInput from "./PhoneInput";
+import { getStyleMap } from "@/utils/getStyleMap";
+import { useTheme } from "@mui/material";
+
+export const InputWidget = (props: InputWidgetProps) => {
+  const {
+    isClassTrue = true,
+    trueClasses = [],
+    falseClasses = [],
+    displayName,
+    label,
+    placeholder,
+    variant,
+    disabled,
+    triggerEventHandler,
+    type,
+    startAdornmentIconName,
+    endAdornmentIconName,
+    required = false,
+    size = "small",
+    multiline = false,
+    helperText = "",
+    defaultValue,
+    value,
+    customRule,
+    tooltipText,
+    minLength,
+    maxLength,
+    pattern,
+    error,
+    regex,
+    context,
+    errorMessage,
+    validateMessage,
+    updateComponentRuntimeProps,
+    deleteComponentRuntimeProps,
+    handleUpdateDsl,
+    hideValidationMessage,
+    handleUpdateMultiExecutionResult,
+  } = props;
+  const theme = useTheme();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [inputValue, setInputValue] = useState(defaultValue);
+  const val = useRef(defaultValue);
+  useEffect(() => {
+    setInputValue(defaultValue);
+    handleUpdateMultiExecutionResult([
+      {
+        displayName,
+        value: {
+          value: defaultValue || "",
+        },
+      },
+    ]);
+  }, [defaultValue, displayName, handleUpdateMultiExecutionResult]);
+  const handleValidate = useCallback(
+    (value?: string) => {
+      const message = getValidateMessageFunc(
+        value,
+        {
+          hideValidationMessage: false,
+          pattern: pattern,
+          regex: regex,
+          minLength: minLength,
+          maxLength: maxLength,
+          required: required,
+        },
+        displayName
+      );
+
+      val.current = value;
+      handleUpdateDsl({
+        validateMessage: message,
+        defaultValue: value,
+      });
+      return message;
+    },
+    [
+      displayName,
+      handleUpdateDsl,
+      maxLength,
+      minLength,
+      pattern,
+      regex,
+      required,
+    ]
+  );
+  const renderAdornment = (position: any) => {
+    const AdornmentComponent =
+      position === "start"
+        ? ButtonIcon(startAdornmentIconName)
+        : ButtonIcon(endAdornmentIconName);
+    return AdornmentComponent ? (
+      <InputAdornment position={position}>{AdornmentComponent}</InputAdornment>
+    ) : null;
+  };
+  const debounceOnChange = useRef(
+    debounce(
+      (
+        value: string,
+        triggerEventHandler: InputWidgetProps["triggerEventHandler"],
+        options?: {
+          hideValidationMessage?: InputWidgetProps["hideValidationMessage"];
+          pattern?: InputWidgetProps["pattern"];
+          regex?: InputWidgetProps["regex"];
+          minLength?: InputWidgetProps["minLength"];
+          maxLength?: InputWidgetProps["maxLength"];
+          required?: InputWidgetProps["required"];
+          customRule?: InputWidgetProps["customRule"];
+        }
+      ) => {
+        new Promise((resolve) => {
+          const message = getValidateMessageFunc(value, options, displayName);
+          handleUpdateMultiExecutionResult([
+            {
+              displayName,
+              value: {
+                value: value || "",
+                validateMessage: message,
+              },
+            },
+          ]);
+          resolve(true);
+        }).then(() => {
+          triggerEventHandler("change");
+        });
+      },
+      180
+    )
+  );
+  const handleOnChange = useCallback(
+    (value: string) => {
+      setInputValue(value);
+      debounceOnChange.current(value, triggerEventHandler, {
+        hideValidationMessage: hideValidationMessage,
+        pattern: pattern,
+        regex: regex,
+        minLength: minLength,
+        maxLength: maxLength,
+        required: required,
+        customRule: customRule,
+      });
+    },
+    [
+      customRule,
+      hideValidationMessage,
+      maxLength,
+      minLength,
+      pattern,
+      regex,
+      required,
+      triggerEventHandler,
+    ]
+  );
+  const clearValue = useCallback(() => {
+    handleOnChange("");
+  }, [handleOnChange]);
+  useEffect(() => {
+    updateComponentRuntimeProps({
+      focus: () => {
+        inputRef.current?.focus();
+      },
+      setValue: (value: boolean | string | number | void) => {
+        if (typeof value === "string") {
+          handleOnChange(value);
+        }
+      },
+      clearValue: () => {
+        clearValue();
+      },
+      validate: () => {
+        return handleValidate(value);
+      },
+      clearValidation: () => {
+        handleUpdateDsl({
+          validateMessage: "",
+        });
+      },
+    });
+
+    return () => {
+      deleteComponentRuntimeProps();
+    };
+  }, [
+    clearValue,
+    deleteComponentRuntimeProps,
+    handleOnChange,
+    handleUpdateDsl,
+    handleValidate,
+    updateComponentRuntimeProps,
+    value,
+  ]);
+  const style = useMemo(() => {
+    return getStyleMap(trueClasses, falseClasses, isClassTrue, context);
+  }, [trueClasses, falseClasses, isClassTrue, context]);
+
+  return (
+    <div
+      key={`${displayName}-wrapper`}
+      style={{
+        width: "100%",
+        height: "100%",
+        paddingTop: variant === "outlined" ? "8px" : "none",
+      }}
+    >
+      {type === "phone_no" && (
+        <PhoneInput
+          value={inputValue}
+          disabled={disabled}
+          onChange={handleOnChange}
+          style={style}
+          required={required}
+          title={tooltipText}
+        />
+      )}
+      {(type === "text" || type === "number") && (
+        <TextField
+          // defaultValue={value}
+          title={tooltipText}
+          multiline={multiline}
+          size={size}
+          css={style}
+          sx={{ color: theme.palette.text.primary }}
+          ref={inputRef}
+          key={displayName}
+          error={error}
+          label={label}
+          value={inputValue}
+          required={required}
+          onChange={(e) => {
+            handleOnChange(e.target.value);
+          }}
+          placeholder={placeholder}
+          fullWidth
+          variant={variant}
+          disabled={disabled}
+          // sx={styles}
+          InputProps={{
+            startAdornment: renderAdornment("start"),
+            endAdornment: renderAdornment("end"),
+          }}
+          type={type}
+          // color={color}
+          helperText={helperText}
+        />
+      )}
+      {!hideValidationMessage && (
+        <InvalidMessage
+          validateMessage={validateMessage && (errorMessage || validateMessage)}
+        />
+      )}
+    </div>
+  );
+};
+
+InputWidget.displayName = "InputWidget";
+export default InputWidget;

package/widgetLibrary/InputWidget/interface.ts

@@ -0,0 +1,45 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React from "react";
+
+export interface InputWidgetProps {
+  displayName:string,
+    label: string;
+    context:any,
+    placeholder?: string;
+    fullWidth?: boolean;
+    margin?: "none" | "dense" | "normal";
+    variant?: "standard" | "outlined" | "filled";
+    type: "text" | "number"|"OTP"|"phone_no";
+    color?: "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    size?: "small" | "medium";
+    disabled?: boolean;
+    value?: string
+    error?: boolean;
+    helperText?: string;
+    tooltipText?:string;
+    defaultValue?:string;
+    required?: boolean;
+    rows?:number|string
+    multiline?: boolean;
+    startAdornmentIconName?: any;
+    endAdornmentIconName?: any;
+    minLength?:number;
+    maxLength?:number;
+    customRule?:any,
+    pattern?: string;
+    regex?: string;
+    hideValidationMessage?:boolean;
+    otherProps?: React.InputHTMLAttributes<HTMLInputElement>;
+    updateComponentHeight?:(height: number) => void,
+    triggerEventHandler?:any,
+    handleUpdateDsl?:any,
+    validateMessage?:string,
+    updateComponentRuntimeProps?:any,
+    deleteComponentRuntimeProps?:any,
+    handleUpdateMultiExecutionResult?:any
+    isClassTrue:boolean
+    trueClasses:[],
+    falseClasses:[],
+    errorMessage?:string
+  }
+  

package/widgetLibrary/InputWidget/panelConfig.tsx

@@ -0,0 +1,325 @@
+import i18n from "@/i18n/config"
+import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
+import { VALIDATION_TYPES } from "@/utils/validationFactory"
+import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig"
+import { INPUT_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"
+import { IconNameOptions } from "../ButtonWidget/panelConfig"
+
+const baseWidgetName = "input"
+export const INPUT_PANEL_CONFIG: PanelConfig[] = [
+  {
+    id: `${baseWidgetName}-basic`,
+    groupName: i18n.t("editor.inspect.setter_group.basic"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-type`,
+        labelName: i18n.t("editor.inspect.setter_label.input.type"),
+        labelDesc: i18n.t("editor.inspect.setter_tips.input.type"),
+        attrName: "type",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "SEARCH_SELECT_SETTER",
+        options: [
+          {
+            label: "Text",
+            value: "text",
+          },
+          {
+            label: "Number",
+            value: "number",
+          },
+          {
+            label: "OTP",
+            value: "OTP",
+          },
+          {
+            label: "Phnone Number",
+            value: "phone_no",
+          },
+        ],
+      },
+      {
+        id: `${baseWidgetName}-basic-defaultValue`,
+        labelName: i18n.t("editor.inspect.setter_label.default_value"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.input_default_value"),
+        attrName: "defaultValue",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "INPUT_SETTER",
+      },
+      {
+        id: `${baseWidgetName}-basic-placeholder`,
+        labelName: i18n.t("editor.inspect.setter_label.placeholder"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.placeholder"),
+        attrName: "placeholder",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "INPUT_SETTER",
+      },
+      {
+        id: `${baseWidgetName}-basic-helperText`,
+        labelName: "HelperText",
+        labelDesc: "HelperText",
+        attrName: "helperText",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "INPUT_SETTER",
+      },
+      {
+        id: `${baseWidgetName}-basic-multiline`,
+        labelName: "Multiline",
+        attrName: "multiline",
+        setterType: "SWITCH_SETTER",
+      },
+      {
+        id: `${baseWidgetName}-basic-rows`,
+        labelName: "Rows",
+        labelDesc: "Rows",
+        attrName: "rows",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "INPUT_SETTER",
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-label`,
+    groupName: i18n.t("editor.inspect.setter_group.label"),
+    children: [
+      {
+        id: `${baseWidgetName}-label-label`,
+        labelName: i18n.t("editor.inspect.setter_label.label"),
+        attrName: "label",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.STRING,
+      },
+      {
+        id: `${baseWidgetName}-label-hidden`,
+        labelName: i18n.t("editor.inspect.setter_label.hidden_label"),
+        attrName: "labelHidden",
+        setterType: "SWITCH_SETTER",
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-interaction`,
+    groupName: i18n.t("editor.inspect.setter_group.interaction"),
+    children: [
+      {
+        ...generatorEventHandlerConfig(
+          baseWidgetName,
+          INPUT_EVENT_HANDLER_CONFIG.events,
+        ),
+      },
+      {
+        id: `${baseWidgetName}-interaction-disabled`,
+        labelName: i18n.t("editor.inspect.setter_label.disabled"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.disabled"),
+        attrName: "disabled",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        placeholder: "{{false}}",
+      },
+      {
+        id: `${baseWidgetName}-interaction-readonly`,
+        labelName: "Multiline",
+        labelDesc: "Multiline",
+        attrName: "multiline",
+        setterType: "INPUT_SETTER",
+        placeholder: "{{false}}",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-Adornments`,
+    groupName: i18n.t("editor.inspect.setter_group.adornments"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-type`,
+        labelName: "StartIcon",
+        labelDesc: "StartIcon",
+        attrName: "startAdornmentIconName",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "SEARCH_SELECT_SETTER",
+        options: IconNameOptions,
+      },
+      {
+        id: `${baseWidgetName}-basic-type`,
+        labelName: "EndIcon",
+        labelDesc: "EndIcon",
+        attrName: "endAdornmentIconName",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "SEARCH_SELECT_SETTER",
+        options:IconNameOptions
+      },
+      {
+        id: `${baseWidgetName}-adornments-tooltip`,
+        labelName: i18n.t("editor.inspect.setter_label.tooltip"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.tooltip"),
+        attrName: "tooltipText",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.STRING,
+      },
+      {
+        id: `${baseWidgetName}-adornments-errorMessage`,
+        labelName: "Warning Message",
+        labelDesc: "Warning Message",
+        attrName: "errorMessage",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.STRING,
+      },
+      
+    ],
+  },
+  {
+    id: `${baseWidgetName}-validation`,
+    groupName: i18n.t("editor.inspect.setter_group.validation"),
+    children: [
+      {
+        id: `${baseWidgetName}-validation-required`,
+        labelName: i18n.t("editor.inspect.setter_label.required_field"),
+        labelDesc: i18n.t("editor.inspect.setter_tooltip.required_field"),
+        setterType: "SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        attrName: "required",
+      },
+      {
+        id: `${baseWidgetName}-validation-hide-message`,
+        labelName: i18n.t(
+          "editor.inspect.setter_label.hide_validation_message",
+        ),
+        labelDesc: i18n.t(
+          "editor.inspect.setter_tooltip.hide_validation_message",
+        ),
+        setterType: "SWITCH_SETTER",
+        expectedType: VALIDATION_TYPES.BOOLEAN,
+        attrName: "hideValidationMessage",
+      },
+      {
+        id: `${baseWidgetName}-validation-pattern`,
+        labelName: i18n.t("editor.inspect.setter_label.pattern"),
+        setterType: "SEARCH_SELECT_SETTER",
+        attrName: "pattern",
+        options: [
+          {
+            label: i18n.t(
+              "editor.inspect.setter_default_value.validation_pattern.email",
+            ),
+            value: "Email",
+          },
+          {
+            label: i18n.t(
+              "editor.inspect.setter_default_value.validation_pattern.url",
+            ),
+            value: "URL",
+          },
+          {
+            label: i18n.t(
+              "editor.inspect.setter_default_value.validation_pattern.regex",
+            ),
+            value: "Regex",
+          },
+        ],
+      },
+      {
+        id: `${baseWidgetName}-validation-regex`,
+        labelName: i18n.t("editor.inspect.setter_label.regex"),
+        setterType: "INPUT_SETTER",
+        attrName: "regex",
+        bindAttrName: ["pattern"],
+        expectedType: VALIDATION_TYPES.STRING,
+        shown: (value) => value === "Regex",
+      },
+      {
+        id: `${baseWidgetName}-validation-max`,
+        labelName: i18n.t("editor.inspect.setter_label.max_length"),
+        setterType: "INPUT_SETTER",
+        attrName: "maxLength",
+        expectedType: VALIDATION_TYPES.NUMBER,
+      },
+      {
+        id: `${baseWidgetName}-validation-min`,
+        labelName: i18n.t("editor.inspect.setter_label.min_length"),
+        setterType: "INPUT_SETTER",
+        attrName: "minLength",
+        expectedType: VALIDATION_TYPES.NUMBER,
+      },
+    ],
+  },
+  {
+    id: `${baseWidgetName}-style`,
+    groupName: i18n.t("editor.inspect.setter_group.style"),
+    children: [
+      {
+        id: `${baseWidgetName}-basic-type`,
+        labelName: "Variant",
+        labelDesc: "Variant",
+        attrName: "variant",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "SEARCH_SELECT_SETTER",
+        options: [
+          {
+            label: "Standard",
+            value: "standard",
+          },
+          {
+            label: "Outlined",
+            value: "outlined",
+          },
+          {
+            label: "Filled",
+            value: "filled",
+          },
+        ],
+      },
+      {
+        id: `${baseWidgetName}-basic-type`,
+        labelName: "Size",
+        labelDesc: "Size",
+        attrName: "size",
+        expectedType: VALIDATION_TYPES.STRING,
+        setterType: "RADIO_GROUP_SETTER",
+        options: [
+          {
+            label: "small",
+            value: "small",
+          },
+          {
+            label: "medium",
+            value: "medium",
+          },
+        ],
+      },
+      {
+        id: `${baseWidgetName}-style-list`,
+        setterType: "STYLE_CONTAINER_SETTER",
+        labelName: i18n.t("editor.inspect.setter_label.colors"),
+        attrName: "styles",
+        useCustomLayout: true, 
+        childrenSetter: [
+          {
+            id: `${baseWidgetName}-validation-classesCondition`,
+            labelName: "Style Class Condition",
+            labelDesc: i18n.t("editor.inspect.setter_tooltip.form_data_key"),
+            setterType: "INPUT_SETTER",
+            expectedType: VALIDATION_TYPES.BOOLEAN,
+            defaultValue: true,
+            attrName: "isClassTrue",
+          },
+          {
+            id: `${baseWidgetName}-style-classes`,
+            labelName: "Select True CSS Classes  :",
+            isSetterSingleRow: true,
+            attrName: "trueClasses",
+            setterType: "BASE_MULTI_SELECT_SETTER",
+            expectedType: VALIDATION_TYPES.ARRAY,
+          },
+          {
+            id: `${baseWidgetName}-style-classes`,
+            labelName: "Select false CSS Classes  :",
+            isSetterSingleRow: true,
+            attrName: "falseClasses",
+            setterType: "BASE_MULTI_SELECT_SETTER",
+            expectedType: VALIDATION_TYPES.ARRAY,
+          },
+        ],
+      },
+    ],
+  },
+]

package/widgetLibrary/InputWidget/style.ts

@@ -0,0 +1,5 @@
+import { css } from "@emotion/react";
+
+export const InputLayoutStyle = css`
+ display:flex;
+`;