impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.2

package/widgetLibrary/ContainerWidget/style.ts

@@ -1,38 +0,0 @@
-import { applyDotBackgroundStyle, normalCanvasBackgroundStyle } from "@/page/App/components/dotPanel/components/Canvas/style";
-import {  UNIT_HEIGHT } from "@/page/App/components/dotPanel/constant/canvas";
-import { css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-export const emptyStateStyle = (theme: Theme) => css`
-  font-size: 14px;
-  color: ${theme.palette.text.secondary};
-  text-align: center;
-`
-export const applyEmptyStateWrapperStyle = (
-  _isInner: boolean = false,
-  _paddingTopBottom: number,
-  isEditMode: boolean,
-  rowCount: number,
-  theme: Theme,
-  canShowDot
-) => {
-  return css`
-  height: 100%;
-  width: 100%;
-  // background: ${theme.palette.background.default};
-  display: flex;
-  align-items: center;
-  padding: ${isEditMode ? "20px" : "none"}
-  justify-content: center;
-  min-height:${rowCount * 13 * UNIT_HEIGHT}px;
-  z-index:${_isInner ? 1 : _paddingTopBottom};
-     ${canShowDot
-      ? applyDotBackgroundStyle(8)
-      : normalCanvasBackgroundStyle}
-`
-}
-export const applyContainerWrapperStyle = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-`

package/widgetLibrary/ContainerWidget/widgetConfig.tsx

@@ -1,31 +0,0 @@
-import { v4 } from "uuid"
-import  ContainerWidgetIcon from "@/assets/widgetCover/container.svg"
-import { BasicContainerConfig } from "@/widgetLibrary/BasicContainer/BasicContainer"
-import {  WidgetConfig } from "@/widgetLibrary/interface"
-
-const defaultListView = [
-  { id: v4(), key: "View 1", label: "View 1" },
-  { id: v4(), key: "View 2", label: "View 2" },
-  { id: v4(), key: "View 3", label: "View 3" },
-]
-
-export const CONTAINER_WIDGET_CONFIG: WidgetConfig = {
-  type: "CONTAINER_WIDGET",
-  displayName: "container",
-  widgetName: "Container",
-  keywords: ["container", "容器"],
-  icon: <ContainerWidgetIcon />,
-  sessionType: "CONTAINER",
-  version: 0,
-  childrenNode: [
-    BasicContainerConfig,
-    BasicContainerConfig,
-    BasicContainerConfig,
-  ],
-  defaults: {
-    viewList: defaultListView,
-    currentIndex: 0,
-    currentKey: "View 1",
-    dynamicHeight: "auto",
-  },
-}

package/widgetLibrary/CreditCard/CreditCard.tsx

@@ -1,108 +0,0 @@
-import React, { useCallback } from "react";
-
-export const CreditCard = ({
-  cardWidth = 250,
-  bank_name = "BANK NAME",
-  card_no ,
-  // = 6524,
-  cardholder_name,
-  expiry_date = "00/00",
-  triggerEventHandler,
-}) => {
-  const cardHeight = (cardWidth * 3) / 7;
-  const handleOnClick = useCallback(() => {
-    triggerEventHandler("click");
-  }, [triggerEventHandler]);
-  return ( 
-    <div
-      style={{
-        width: "100%",
-        // cardWidth,
-        height: cardHeight,
-        borderRadius: `${cardWidth / 23}px`,
-        backgroundColor: "#1c1c1c",
-        color: "#ffffff",
-        padding: `${cardHeight / 10}px`,
-        display: "flex",
-        flexDirection: "column",
-        justifyContent: "space-between",
-        boxShadow: "0 4px 8px rgba(0, 0, 0, 0.3)",
-      }}
-      onClick={handleOnClick}
-    >
-      {/* Top Section */}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        {/* <div style={{ fontSize: `${cardHeight / 10}px`, fontWeight: "bold" }}>
-          Credit Card
-        </div> */}
-        <div style={{ fontSize: `${cardHeight / 10 - 2}px` }}>{bank_name}</div>
-      </div>
-
-      {/* Chip and Card Number */}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <div
-          style={{
-            width: `${cardHeight / 5}px`,
-            height: `${cardHeight / 5}px`,
-            backgroundColor: "#d4a74d",
-            borderRadius: "5px",
-          }}
-        ></div>
-        <div
-          style={{ fontSize: `${cardHeight / 10 + 2}px`, letterSpacing: "2px",width:"100%" }}
-        >
-          **** **** **** {card_no}
-        </div>
-      </div>
-
-      {/* Card Details */}
-      <div
-        style={{
-          display: "flex",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <div>
-          {/* <div style={{ fontSize: '12px', marginBottom: '5px' }}>6324</div> */}
-          <div
-            style={{ fontSize: `${cardHeight / 20 + 4}px`, fontWeight: "bold" }}
-          >
-            {cardholder_name}
-          </div>
-        </div>
-        <div
-          style={{ textAlign: "right", fontSize: `${cardHeight / 20 + 2}px` }}
-        >
-          <div>EXP</div>
-          <div>{expiry_date}</div>
-        </div>
-      </div>
-
-      {/* Card Bottom Section */}
-      {/* <div
-        style={{
-          fontSize: '18px',
-          letterSpacing: '2px',
-          textAlign: 'center',
-        }}
-      >
-        4532 3100 9999 1049
-      </div> */}
-    </div>
-  );
-};
-
-export default CreditCard;

package/widgetLibrary/CreditCard/eventHandlerConfig.ts

@@ -1,14 +0,0 @@
-import i18n from "@/i18n/config"
-import { EventHandlerConfig } from "@/widgetLibrary/interface"
-
-export const CREDIT_CARD_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
-  events: [
-    {
-      label: i18n.t(
-        "editor.inspect.setter_content.widget_action_type_name.click",
-      ),
-      value: "click",
-    },
-  ],
-  methods: [],
-}

package/widgetLibrary/CreditCard/index.ts

@@ -1,4 +0,0 @@
-export {CreditCard} from './CreditCard';
-export {CREDIT_CARD_CONFIG} from './widgetConfig';
-export {CREDIT_CARD_PANEL_CONFIG} from './panelConfig';
-export {CREDIT_CARD_EVENT_HANDLER_CONFIG} from "./eventHandlerConfig"

package/widgetLibrary/CreditCard/interface.ts

@@ -1,12 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export interface LabelProps {
-  label?: string;
-  colorScheme?: string;
-  updateComponentHeight: any,
-  align?: "center" | "inherit" | "justify" | "left" | "right";
-  context,
-  wrapText?:boolean
-  isClassTrue: boolean,
-  trueClasses?: any[],
-  falseClasses?: any[],
-}

package/widgetLibrary/CreditCard/panelConfig.tsx

@@ -1,101 +0,0 @@
-import i18n from "@/i18n/config";
-import { PanelConfig } from "@/page/App/components/InspectPanel/interface";
-import { VALIDATION_TYPES } from "@/utils/validationFactory";
-import { CREDIT_CARD_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig";
-import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig";
-
-const baseWidgetName = "creditCard";
-
-// cardWidth = 150,
-// bank_name = "BANK NAME",
-// card_no,
-// cardholder_name = "cardholder_name",
-// expiry_date = "00/00",
-export const CREDIT_CARD_PANEL_CONFIG: PanelConfig[] = [
-  {
-    id: `${baseWidgetName}-basic`,
-    groupName: i18n.t("editor.inspect.setter_group.basic"),
-    children: [
-      {
-        id: `${baseWidgetName}-card-holderName`,
-        labelName: "Card Holder Name",
-        attrName: "cardholder_name",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-      {
-        id: `${baseWidgetName}-card-bank_name`,
-        labelName: "Bank Name",
-        attrName: "bank_name",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-        defaultValue: "BANK NAME",
-      }, //imageWidth,cardHeight
-      {
-        id: `${baseWidgetName}-card-card_no`,
-        labelName: "Card No.",
-        attrName: "card_no",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-
-      {
-        id: `${baseWidgetName}-label-cardWidth`,
-        labelName: "Card Width",
-        attrName: "cardWidth",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.NUMBER,
-      },
-      {
-        id: `${baseWidgetName}-label-expiry_date`,
-        labelName: "Expiry Date",
-        attrName: "expiry_date",
-        setterType: "INPUT_SETTER",
-        expectedType: VALIDATION_TYPES.STRING,
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-interaction`,
-    groupName: "INTERACTION",
-    children: [
-      {
-        ...generatorEventHandlerConfig(
-          baseWidgetName,
-          CREDIT_CARD_EVENT_HANDLER_CONFIG.events
-        ),
-      },
-    ],
-  },
-  {
-    id: `${baseWidgetName}-style`,
-    groupName: i18n.t("editor.inspect.setter_group.style"),
-    children: [
-      {
-        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/CreditCard/widgetConfig.tsx

@@ -1,20 +0,0 @@
-import CreditCard  from "@/assets/creditcard.svg"
-import { RESIZE_DIRECTION, WidgetConfig } from "@/widgetLibrary/interface";
-
-export const CREDIT_CARD_CONFIG: WidgetConfig = {
-  type: "CREDIT_CARD_WIDGET",
-  displayName: "creditCard",
-  widgetName: "creditCard",
-  icon:<CreditCard />,
-  keywords: ["Label", "文本输入框"],
-  sessionType: "INPUTS",
-  resizeDirection: RESIZE_DIRECTION.ALL,
-  version: 0,
-  defaults: {
-    label: "card",
-    classes:[{title:"headerLabel",value:"headerLabel"}],
-    cardName:"Your Card",
-    cardValue:"6524",
-    cardCaption:"Value"
-  },
-};

package/widgetLibrary/DateWidget/date.tsx

@@ -1,212 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { FC, useCallback, useEffect, useMemo } from "react";
-import { InvalidMessage } from "@/widgetLibrary/PublicSector/InvalidMessage";
-import {
-  getValidateVFromString,
-  handleValidateCheck,
-} from "@/widgetLibrary/PublicSector/InvalidMessage/utils";
-import { applyValidateMessageWrapperStyle } from "@/page/App/components/scaleSquare/components/TransformWidgetWrapper/style";
-import { DatePicker } from "@mui/x-date-pickers/DatePicker";
-import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
-import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
-import dayjs from "dayjs";
-import { AutoHeightContainer } from "../PublicSector/AutoHeightContainer";
-import { FormControl } from "@mui/material";
-import { getStyleMap } from "@/utils/getStyleMap";
- 
-export const WrappedDate: FC<any> = (props) => {
-  const {
-    value,
-    label,
-    required,
-    format,
-    validateMessage,
-    // minDate,
-    disabled,
-    // maxDate,
-    getValidateMessage,
-    handleUpdateMultiExecutionResult,
-    handleOnChange,
-    displayName,
-    readOnly,
-    context,
-    isClassTrue = true,
-    trueClasses = [],
-    falseClasses = [],
-  } = props;
- 
-  const changeValue = (value?: unknown) => {
-    new Promise((resolve) => {
-      const message = getValidateMessage(value);
-      handleUpdateMultiExecutionResult([
-        {
-          displayName,
-          value: {
-            value: value || "",
-            validateMessage: message,
-          },
-        },
-      ]);
-      resolve(true);
-    }).then(() => {
-      handleOnChange?.();
-    });
-  };
-  function isValidDate(dateString: any) {
-    const date = new Date(dateString);
-    return !isNaN(date?.getTime());
-  }
-  const style = useMemo(() => {
-    return getStyleMap( trueClasses, falseClasses, isClassTrue,context);
-  }, [ isClassTrue, trueClasses, falseClasses,context]);
-  return (
-    <div
-      style={{
-        paddingTop: "6px",
-        width: "100%",
-      }}
-    >
-      <FormControl
-        fullWidth={true}
-        variant="filled"
-        size="small"
-        sx={{ width: "100%" }}
-      >
-        <LocalizationProvider dateAdapter={AdapterDayjs}>
-          <DatePicker
-            label={label}
-            sx={{ width: "100%", fontSize: "10px" }}
-            css={style}
-            format={format}
-            onChange={(newValue) => {
-              if (isValidDate(newValue)) {
-                const formattedDate = dayjs(newValue).format(
-                  `${format}THH:mm:ss.SSSZ`
-                );
-                changeValue(formattedDate);
-              } else {
-                changeValue(newValue);
-              }
-            }}
-            // minDate={dayjs(minDate)}YYYY-MM-DD
-            // maxDate={dayjs(maxDate)}
-            disabled={disabled}
-            readOnly={readOnly}
-            value={isValidDate(value) ? dayjs(value, format) : null}
-            slotProps={{
-              textField: {
-                size: "small",
-                fullWidth: true,
-                error: !!validateMessage,
-                required: required,
-                // helperText: validateMessage,
-              },
-            }}
-          />
-        </LocalizationProvider>
-      </FormControl>
-    </div>
-  );
-};
- 
-WrappedDate.displayName = "WrappedDate";
- 
-export const DateWidget: FC<any> = (props) => {
-  const {
-    value,
-    handleUpdateDsl,
-    updateComponentRuntimeProps,
-    deleteComponentRuntimeProps,
-    labelPosition,
-    label,
-    labelWidth = 33,
-    required,
-    labelHidden,
-    pattern,
-    regex,
-    customRule,
-    hideValidationMessage,
-    updateComponentHeight,
-    validateMessage,
-    triggerEventHandler,
-  } = props;
- 
-  const getValidateMessage = useCallback(
-    (value?: unknown) => {
-      if (!hideValidationMessage) {
-        const message = handleValidateCheck({
-          value: getValidateVFromString(value),
-          required,
-          customRule,
-          pattern,
-          regex,
-        });
-        const showMessage = message && message.length > 0;
-        return showMessage ? message : "";
-      }
-      return "";
-    },
-    [customRule, hideValidationMessage, pattern, regex, required]
-  );
- 
-  const handleValidate = useCallback(
-    (value?: unknown) => {
-      const message = getValidateMessage(value);
-      handleUpdateDsl({
-        validateMessage: message,
-      });
-      return message;
-    },
-    [getValidateMessage, handleUpdateDsl]
-  );
- 
-  useEffect(() => {
-    updateComponentRuntimeProps({
-      setValue: (value: string) => {
-        handleUpdateDsl({ value });
-      },
-      clearValue: () => {
-        handleUpdateDsl({ value: "" });
-      },
-      validate: () => {
-        return handleValidate(value);
-      },
-    });
-    return () => {
-      deleteComponentRuntimeProps();
-    };
-  }, [
-    updateComponentRuntimeProps,
-    handleUpdateDsl,
-    deleteComponentRuntimeProps,
-    handleValidate,
-    value,
-  ]);
- 
-  const handleOnChange = useCallback(() => {
-    triggerEventHandler("change");
-  }, [triggerEventHandler]);
-  return (
-    <>
-      <WrappedDate
-        {...props}
-        getValidateMessage={getValidateMessage}
-        handleOnChange={handleOnChange}
-      />
-      {!hideValidationMessage && (
-        <div
-          css={applyValidateMessageWrapperStyle(
-            labelWidth,
-            labelPosition,
-            labelHidden || !label
-          )}
-        >
-          <InvalidMessage validateMessage={validateMessage} />
-        </div>
-      )}
-    </>
-  );
-};
-DateWidget.displayName = "DateWidget";
- 
-export default DateWidget;

package/widgetLibrary/DateWidget/eventHandlerConfig.ts

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

package/widgetLibrary/DateWidget/index.ts

@@ -1,6 +0,0 @@
-export {DateWidget} from './date.tsx'
-export {DATE_PANEL_CONFIG} from './panelConfig.tsx';
-export {DATE_WIDGET_CONFIG} from './widgetConfig.tsx';
-
-
-

package/widgetLibrary/DateWidget/interface.ts

@@ -1,29 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export interface DatePickerProps {
-  value:any,
-  displayName: string;
-  label?: string;
-  format?: string;
-  defaultValue?: any;
-  minDate?: any;
-  maxDate?: any;
-  disabled?: boolean;
-  readOnly?: boolean;
-  validateMessage?: string;
-  updateComponentHeight?: any;
-  styles?: any;
-  handleUpdateDsl?: any;
-  hideValidationMessage?: any;
-  pattern?: any;
-  regex?: any;
-  required?: any;
-  customRule?: any;
-  getValidateMessage: (value?: unknown) => string
-  handleUpdateMultiExecutionResult: (
-    updateSlice: {
-      displayName: string
-      value: Record<string, any>
-    }[],
-  ) => void
-  handleOnChange?: () => void
-}