impaktapps-ui-builder 1.0.0 → 1.0.1

package/widgetLibrary/InputWidget/PhoneInput.tsx

@@ -1,29 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,5 +0,0 @@
-
-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

@@ -1,267 +0,0 @@
-/* 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

@@ -1,45 +0,0 @@
-/* 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

@@ -1,325 +0,0 @@
-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

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