impaktapps-ui-builder 1.0.0 → 1.0.1

package/widgetLibrary/OTPWidget/panelConfig.tsx

@@ -1,140 +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 { OTP_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"
-
-const baseWidgetName = "otp"
-export const OTP_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: "Alphabet",
-            value: "alphabet",
-          },
-          {
-            label: "Number",
-            value: "number",
-          },
-         
-        ],
-      },
-      {
-        id: `${baseWidgetName}-basic-length"`,
-        labelName: "Length",
-        labelDesc: "Length",
-        attrName: "length",
-        expectedType: VALIDATION_TYPES.NUMBER,
-        setterType: "INPUT_SETTER",
-        defaultValue:4
-      },
-      {
-        id: `${baseWidgetName}-basic-separator`,
-        labelName: "separator",
-        labelDesc: "separator",
-        attrName: "separator",
-        expectedType: VALIDATION_TYPES.STRING,
-        setterType: "INPUT_SETTER",
-        defaultValue:"-"
-      },
-    ],
-  },
-
-  {
-    id: `${baseWidgetName}-interaction`,
-    groupName: i18n.t("editor.inspect.setter_group.interaction"),
-    children: [
-      {
-        ...generatorEventHandlerConfig(
-          baseWidgetName,
-          OTP_EVENT_HANDLER_CONFIG.events,
-        ),
-      },
-    ],
-  },
-
-  {
-    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}-style`,
-    groupName: i18n.t("editor.inspect.setter_group.style"),
-    children: [
-      {
-        id: `${baseWidgetName}-style-boxHeight`,
-        labelName: "Box height",
-        labelDesc: "boxHeight",
-        attrName: "boxHeight",
-        expectedType: VALIDATION_TYPES.NUMBER,
-        setterType: "INPUT_SETTER",
-      },
-      {
-        id: `${baseWidgetName}-style-boxWidth`,
-        labelName: "Box Width",
-        labelDesc: "boxWidth",
-        attrName: "boxWidth",
-        expectedType: VALIDATION_TYPES.NUMBER,
-        setterType: "INPUT_SETTER",
-      },
-      {
-        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/OTPWidget/style.ts

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

package/widgetLibrary/OTPWidget/widgetConfig.tsx

@@ -1,20 +0,0 @@
-import  TextInputWidgetIcon  from "@/assets/widgetCover/otp.svg";
-import { RESIZE_DIRECTION, WidgetConfig } from "@/widgetLibrary/interface";
-
-export const OTP_WIDGET_CONFIG: WidgetConfig = {
-  type: "OTP_WIDGET",
-  displayName: "otp",
-  widgetName: "otp",
-  icon: <TextInputWidgetIcon />,
-  keywords: ["Input", "文本输入框"],
-  sessionType: "INPUTS",
-  resizeDirection: RESIZE_DIRECTION.HORIZONTAL,
-  version: 0,
-  defaults: {
-    value: "",
-    label: "OTP",
-
-    length: 4,
-    type: "number",
-  },
-};

package/widgetLibrary/PublicSector/AutoHeightContainer/index.tsx

@@ -1,46 +0,0 @@
-import { FC, ReactNode, useEffect, useRef } from "react"
-import {
-  autoHeightContainerStyle,
-  fixedHeightContainerStyle,
-} from "@/widgetLibrary/PublicSector/AutoHeightContainer/style"
-
-interface AutoHeightContainerProps {
-  updateComponentHeight: (height: number) => void
-  enable?: boolean
-  children: ReactNode
-}
-
-export const AutoHeightContainer: FC<AutoHeightContainerProps> = ({
-  updateComponentHeight,
-  children,
-  enable = true,
-}) => {
-  const containerRef = useRef<HTMLDivElement | null>(null)
-
-  useEffect(() => {
-    const containerDom = containerRef.current
-    const observerRef = new ResizeObserver((entries) => {
-      if (!updateComponentHeight) return
-      const height = entries[0].contentRect.height
-      updateComponentHeight?.(height)
-    })
-    if (observerRef && containerDom && enable) {
-      observerRef.observe(containerDom)
-    }
-
-    return () => {
-      if (containerDom && enable) {
-        observerRef.unobserve(containerDom)
-      }
-    }
-  }, [enable, updateComponentHeight])
-
-  return (
-    <div
-      ref={containerRef}
-      css={enable ? autoHeightContainerStyle : fixedHeightContainerStyle}
-    >
-      {children}
-    </div>
-  )
-}

package/widgetLibrary/PublicSector/AutoHeightContainer/style.ts

@@ -1,11 +0,0 @@
-import { css } from "@emotion/react"
-
-export const autoHeightContainerStyle = css`
-  flex: 1;
-`
-
-export const fixedHeightContainerStyle = css`
-  height: 100%;
-  width: 100%;
-  flex: 1;
-`

package/widgetLibrary/PublicSector/InvalidMessage/index.tsx

@@ -1,18 +0,0 @@
-import { FC } from "react";
-import ErrorIcon from "@mui/icons-material/Error";
-import { ValidateMessageNewProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface";
-import { invalidateMessageCss } from "./style";
-import { css } from "@emotion/react";
-
-export const InvalidMessage: FC<ValidateMessageNewProps> = (props) => {
-  const { validateMessage } = props;
-
-  return (
-    <span css={invalidateMessageCss}>
-      {typeof validateMessage === "string" && validateMessage.length > 0 && (
-        <ErrorIcon fontSize="small" sx={{ fontSize: "15px" }} />
-      )}
-      {validateMessage}
-    </span>
-  );
-};

package/widgetLibrary/PublicSector/InvalidMessage/interface.tsx

@@ -1,34 +0,0 @@
-export interface ValidateMessageNewProps {
-    validateMessage: string
-    hideValidationMessage?:boolean
-  }
-  
-  export interface ValidateMessageOldProps {
-    pattern?: "Email" | "URL" | "Regex"
-    regex?: string
-    minLength?: number
-    maxLength?: number
-    required?: boolean
-    customRule?: string
-    hideValidationMessage?: boolean
-  }
-  
-  export interface ValidateCheckProps {
-    value?: unknown
-    pattern?: "Email" | "URL" | "Regex"
-    regex?: string
-    minLength?: number
-    maxLength?: number
-    required?: boolean
-    customRule?: string
-    maxFiles?: number
-    minFiles?: number
-    maxSize?: number
-    minSize?: number
-    sizeType?: string
-    atLeastNumber?: number
-    upToNumber?: number
-    minDuration?: number
-    maxDuration?: number
-  }
-  

package/widgetLibrary/PublicSector/InvalidMessage/style.tsx

@@ -1,18 +0,0 @@
-import { css } from "@emotion/react";
-
-const col = "#ff7d00";
-
-export const invalidateMessageCss = css`
-  display: flex;
-  width: 100%;
-  fontsize: 8px;
-  padding-top: 1px;
-  padding-left: 3px;
-  min-height: 17px;
-  align-items: center;
-  font-size: 12px;
-  color: ${col};
-  svg {
-    margin-right: 4px;
-  }
-`;

package/widgetLibrary/PublicSector/InvalidMessage/utils.tsx

@@ -1,307 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-
-import i18n from "@/i18n/config"
-import { ValidateCheckProps } from "@/widgetLibrary/PublicSector/InvalidMessage/interface"
-
-import _ from 'lodash';
-
-const validateEmail = (email: string) => {
-  const str =
-    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
-  const emailMatchPattern = new RegExp(str)
-  return emailMatchPattern.test(email)
-}
-
-function isValidURL(str: string) {
-  const matchStr = /^(?:\w+:)?\/\/([^\s.]+\.\S{2}|localhost[:?\d]*)\S*$/
-  const urlMatchPattern = new RegExp(matchStr)
-  return urlMatchPattern.test(str)
-}
-
-export const handleCheckCustomRule = (customRule: unknown) => {
-  if (customRule != undefined && customRule !== "") {
-    return true
-  }
-}
-
-export const handleCheckMinSelectedItems = (
-  value: unknown,
-  minCount?: number,
-) => {
-  if (
-    typeof minCount === "number" &&
-    ((Array.isArray(value) && value.length < minCount) ||
-      typeof value === "undefined")
-  ) {
-    return true
-  }
-}
-
-export const handleCheckMaxSelectedItems = (
-  value: unknown,
-  maxCount?: number,
-) => {
-  if (
-    typeof maxCount === "number" &&
-    ((Array.isArray(value) && value.length > maxCount) ||
-      typeof value === "undefined")
-  ) {
-    return true
-  }
-}
-
-export const handleCheckIsRequired = (value: unknown, required?: boolean) => {
-  if (
-    required &&
-    (typeof value === "undefined" ||value == ""||
-      (Array.isArray(value) && value.length === 0))
-  )
-    return true
-}
-
-export const handleCheckMaxLength = (value: unknown, maxLength?: number) => {
-  if (
-    typeof maxLength === "number" &&
-    ((typeof value === "string" && value.length > maxLength) ||
-      typeof value === "undefined")
-  )
-    return true
-}
-
-export const handleCheckMinLength = (value: unknown, minLength?: number) => {
-  if (
-    typeof minLength === "number" &&
-    ((typeof value === "string" && value.length < minLength) ||
-      typeof value === "undefined")
-  )
-    return true
-}
-
-export const handleCheckMinDuration = (
-  value: unknown,
-  minDuration?: number,
-) => {
-  if (
-    typeof minDuration === "number" &&
-    ((typeof value === "number" && value < minDuration) ||
-      typeof value === "undefined")
-  )
-    return true
-}
-
-export const handleCheckMaxDuration = (
-  value: unknown,
-  maxDuration?: number,
-) => {
-  if (
-    typeof maxDuration === "number" &&
-    ((typeof value === "number" && value > maxDuration) ||
-      typeof value === "undefined")
-  )
-    return true
-}
-
-export const handleCheckPattern = (
-  value: unknown,
-  pattern: ValidateCheckProps["pattern"],
-  reg?: string,
-  displayName?:string
-) => {
-  switch (pattern) {
-    case "Email": {
-      if (
-        (typeof value === "string" && !validateEmail(value)) ||
-        typeof value === "undefined"
-      ) {
-        return i18n.t("editor.validate_message.email")
-      }
-      break
-    }
-    case "URL": {
-      if (
-        (typeof value === "string" && !isValidURL(value)) ||
-        typeof value === "undefined"
-      ) {
-        return i18n.t("editor.validate_message.url")
-      }
-      break
-    }
-    case "Regex":
-      if (!reg || typeof value === "undefined") return
-      try {
-        let finalReg = reg
-        if (reg.startsWith("/") && reg.endsWith("/")) {
-          finalReg = reg.slice(1, reg.length - 1)
-        }
-        const matchPattern = new RegExp(finalReg)
-        if (typeof value !== "string" || !matchPattern.test(value)) {
-          return `Please match the ${displayName} format`
-        }
-      } catch (e) {
-        console.error("regex error", e)
-      }
-  }
-}
-
-export const calculateFileSize = (data: unknown) => {
-  const blobArr = Array.isArray(data) ? data : [data]
-  const byteSize = new Blob(blobArr).size
-  return byteSize
-}
-
-const handleCheckFileSize = (
-  value: unknown,
-  maxSize?: number,
-  minSize?: number,
-  sizeType?: string,
-) => {
-  if (value && (value as []).length) {
-    // default to MB
-    const getFileSizeNumber = (type?: string) =>
-      type !== "mb" ? 1024 : 1024 * 1024
-
-    const maxSizeNumber = maxSize ? maxSize * getFileSizeNumber(sizeType) : 0
-    const minSizeNumber = minSize ? minSize * getFileSizeNumber(sizeType) : 0
-
-    for (let i = 0; i < (value as []).length; i++) {
-      const size =
-        (value as any)[i].originFile?.size ||
-        calculateFileSize((value as any)[i].originFile)
-
-      if (!!maxSizeNumber && size > maxSizeNumber) {
-        return {
-          hasError: true,
-          errorMessage: i18n.t("editor.validate_message.max_size", {
-            maxSize,
-            type: (sizeType || "MB").toUpperCase(),
-          }),
-        }
-      }
-      if (!!minSizeNumber && size < minSizeNumber) {
-        return {
-          hasError: true,
-          errorMessage: i18n.t("editor.validate_message.min_size", {
-            minSize,
-            type: (sizeType || "MB").toUpperCase(),
-          }),
-        }
-      }
-    }
-  }
-  return {
-    hasError: false,
-    errorMessage: "",
-  }
-}
-
-const handleCheckFilesCount = (
-  value: unknown,
-  maxFiles?: number,
-  minFiles?: number,
-) => {
-  if (value) {
-    const length = (value as []).length
-    if (maxFiles && length > maxFiles) {
-      return {
-        fileCountInvalid: true,
-        countErrorMessage: i18n.t("editor.validate_message.max_files", {
-          maxFiles,
-        }),
-      }
-    }
-    if (minFiles && length < minFiles) {
-      return {
-        fileCountInvalid: true,
-        countErrorMessage: i18n.t("editor.validate_message.min_files", {
-          minFiles,
-        }),
-      }
-    }
-  }
-  return {
-    fileCountInvalid: false,
-    countErrorMessage: "",
-  }
-}
-
-export const handleValidateCheck = (
-  options?: ValidateCheckProps,
-  displayName?:string
-): string | undefined => {
-  if (typeof options === "undefined") return
-  if (handleCheckCustomRule(options.customRule)) {
-    try {
-      return typeof options.customRule === "string"
-        ? options.customRule
-        : JSON.stringify(options.customRule)
-    } catch (e) {
-      console.error("custom rule is error")
-    }
-  }
-
-  const { hasError, errorMessage } = handleCheckFileSize(
-    options.value,
-    options.maxSize,
-    options.minSize,
-    options.sizeType,
-  )
-  if (hasError) {
-    return errorMessage
-  }
-
-  const { fileCountInvalid, countErrorMessage } = handleCheckFilesCount(
-    options.value,
-    options.maxFiles,
-    options.minFiles,
-  )
-  if (fileCountInvalid) {
-    return countErrorMessage
-  }
-
-  if (handleCheckMinSelectedItems(options.value, options.atLeastNumber)) {
-    return i18n.t("editor.inspect.setter_message.choose_at_least", {
-      min: options.atLeastNumber,
-    })
-  }
-
-  if (handleCheckMaxSelectedItems(options.value, options.upToNumber)) {
-    return i18n.t("editor.inspect.setter_message.choose_up_to", {
-      max: options.upToNumber,
-    })
-  }
-
-  if (handleCheckIsRequired(options.value, options.required)) {
-    return i18n.t("editor.validate_message.required")
-  }
-
-  if (handleCheckMaxLength(options.value, options.maxLength)) {
-    return i18n.t("editor.validate_message.max_length", {
-      number: options.maxLength,
-    })
-  }
-
-  if (handleCheckMinLength(options.value, options.minLength)) {
-    return i18n.t("editor.validate_message.min_value", {
-      number: options.minLength,
-    })
-  }
-
-  if (handleCheckMaxDuration(options.value, options.maxDuration)) {
-    return i18n.t("editor.inspect.setter_message.recording.max_duration", {
-      maximum: options.maxDuration,
-    })
-  }
-
-  if (handleCheckMinDuration(options.value, options.minDuration)) {
-    return i18n.t("editor.inspect.setter_message.recording.min_duration", {
-      minimum: options.minDuration,
-    })
-  }
-
-  return handleCheckPattern(options.value, options.pattern, options.regex,displayName)
-}
-
-export const getValidateVFromString = (value: unknown) => {
-  return _.isString(value) && !value ? undefined : value
-}

package/widgetLibrary/PublicSector/InvalidMessageNative/index.tsx

@@ -1,23 +0,0 @@
-import React, { FC } from "react"
-import { ValidateMessageNewProps } from "./interface"
-import { Icon, Text } from "react-native-paper"
-import { errorStyles, iconStyles } from './style'
-import { View } from "react-native"
-export const InvalidMessageNative: FC<ValidateMessageNewProps> = (props) => {
-    const { validateMessage } = props;
-    return (
-        <>
-            {typeof validateMessage === "string" && validateMessage.length > 0 && (
-            <View style={errorStyles.container}>
-                <Icon
-                    source="alert-circle"
-                    size={iconStyles.size}
-                    color={iconStyles.color}
-                />
-                <Text style={errorStyles.text}>
-                    {validateMessage}
-                </Text>
-            </View>)}
-        </>
-    )
-}

package/widgetLibrary/PublicSector/InvalidMessageNative/interface.tsx

@@ -1,33 +0,0 @@
-export interface ValidateMessageNewProps {
-    validateMessage: string
-  }
-  
-  export interface ValidateMessageOldProps {
-    pattern?: "Email" | "URL" | "Regex"
-    regex?: string
-    minLength?: number
-    maxLength?: number
-    required?: boolean
-    customRule?: string
-    hideValidationMessage?: boolean
-  }
-  
-  export interface ValidateCheckProps {
-    value?: unknown
-    pattern?: "Email" | "URL" | "Regex"
-    regex?: string
-    minLength?: number
-    maxLength?: number
-    required?: boolean
-    customRule?: string
-    maxFiles?: number
-    minFiles?: number
-    maxSize?: number
-    minSize?: number
-    sizeType?: string
-    atLeastNumber?: number
-    upToNumber?: number
-    minDuration?: number
-    maxDuration?: number
-  }
-  

package/widgetLibrary/PublicSector/InvalidMessageNative/style.tsx

@@ -1,22 +0,0 @@
-import { StyleSheet } from "react-native";
-
-export const errorStyles = StyleSheet.create({
-  container:{
-    flexDirection: "row",
-    width: "100%",
-    alignItems: 'center',
-    paddingTop: 4,
-    paddingLeft: 3
-  },
-  text:{
-    fontSize: 12,
-    color: '#f44336',
-    marginLeft: 2
-  }
-})
-
-export const iconStyles = {
-  size: 15,
-  color: '#f44336',
-  marginRight: 4,
-};