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

package/widgetLibrary/MuiltiSelect.tsx/style.ts

@@ -1,81 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { SerializedStyles, css } from "@emotion/react"
-
-
-export function applyAlignStyle(
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  verticalAlign?: any,
-): SerializedStyles {
-  return css`
-    width: 100%;
-    display: flex;
-    align-items: ${verticalAlign};
-  `
-}
-
-const getRealHeightStyle = (
-  dynamicHeight: "auto" | "fixed" | "limited",
-  dynamicMinHeight: number = 0,
-  dynamicMaxHeight: number = 0,
-) => {
-  switch (dynamicHeight) {
-    case "auto":
-      return css`
-        height: auto;
-      `
-    case "limited":
-      return css`
-        min-height: ${dynamicMinHeight - 6}px;
-        height: auto;
-        max-height: ${dynamicMaxHeight - 6}px;
-      `
-    case "fixed":
-      return css`
-        height: 100%;
-      `
-    default:
-      return ""
-  }
-}
-
-export const applyAutoHeightContainerStyle = (
-  dynamicHeight: "auto" | "fixed" | "limited",
-  dynamicMinHeight?: number,
-  dynamicMAxHeight?: number,
-) => {
-  return css`
-    display: flex;
-    width: 100%;
-    position: relative;
-    ${getRealHeightStyle(dynamicHeight, dynamicMinHeight, dynamicMAxHeight)};
-  `
-}
-
-export function applyMarkdownStyle(horizontalAlign?: string): SerializedStyles {
-  return css`
-    width: 100%;
-    text-align: ${horizontalAlign};
-    overflow-wrap: break-word;
-  `
-}
-
-export const applyTextStyle = (horizontalAlign?: string, weight?: number) => {
-  return css`
-    width: 100%;
-    font-weight: ${weight ?? 400};
-    text-align: ${horizontalAlign};
-    overflow-wrap: break-word;
-  `
-}
-
-export const applyContainerStyle = (colorScheme: string) => {
-  return css`
-    width: 100%;
-    color: ${globalColor(colorScheme)};
-
-    a,
-    span {
-      color: ${globalColor(colorScheme)};
-    }
-  `
-}

package/widgetLibrary/MuiltiSelect.tsx/styles.css

@@ -1,4 +0,0 @@
-.custom-autocomplete .MuiOutlinedInput-root {
-  width: 100%;
-  height: 100%;
-}

package/widgetLibrary/MuiltiSelect.tsx/widgetConfig.tsx

@@ -1,33 +0,0 @@
-import { v4 } from "uuid"
-import  MultiselectWidgetIcon   from "@/assets/widgetCover/multiselect.svg"
-import i18n from "@/i18n/config"
-import { RESIZE_DIRECTION, WidgetConfig } from "@/widgetLibrary/interface"
- 
-export const MULTISELECT_WIDGET_CONFIG: WidgetConfig = {
-  type: "MULTISELECT_WIDGET",
-  displayName: "multiselect",
-  widgetName: i18n.t("widget.multiselect.name"),
-  icon: <MultiselectWidgetIcon />,
-  keywords: ["Multiselect",  "多项选择"],
-  sessionType: "SELECT",
-  version: 0,
-  defaults: {
-    label: "Label",
-    helperText:"",
-    optionConfigureMode: "static",
-    labelAlign: "left",
-    labelPosition: "left",
-    labelWidth: "{{33}}",
-    dataSources: "{{[]}}",
-    colorScheme: "blue",
-    hidden: false,
-    manualOptions: [
-      { id: `option-${v4()}`, label: "Option 1", value: "Option 1" },
-      { id: `option-${v4()}`, label: "Option 2", value: "Option 2" },
-      { id: `option-${v4()}`, label: "Option 3", value: "Option 3" },
-    ],
-    dynamicHeight: "auto",
-    formDataKey: "multiselect",
-    resizeDirection: RESIZE_DIRECTION.HORIZONTAL,
-  },
-}

package/widgetLibrary/NativeContainer/BasicPanel.ts

@@ -1,189 +0,0 @@
-// import i18n from "@/i18n/config"
-import i18n from "@/i18n/config"
-import { PanelConfig } from "@/page/App/components/InspectPanel/interface"
-import { ScreenPayload } from "@/redux/config/configState"
-import { VALIDATION_TYPES } from "@/utils/validationFactory"
-export const BUILD_BASIC_NATIVE_CONTAINER_PANEL_CONFIG = (currentScreen: ScreenPayload) => {
-  const baseWidgetName = "View"
-  const BasicContainer_PANEL_CONFIG: PanelConfig[] = [
-
-
-    {
-      id: `${baseWidgetName}-basic`,
-      groupName: i18n.t("editor.inspect.setter_group.basic"),
-      children: [
-        {
-          id: `${baseWidgetName}-viewList-extraSmallScreen`,
-          labelName: "Flex",
-          labelDesc: "Flex",
-          attrName: `flex`,
-          defaultValue: "1",
-          expectedType: VALIDATION_TYPES.STRING,
-          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,
-        },
-        // {
-        //   id: `${baseWidgetName}-style-Direction`,
-        //   setterType: "RADIO_GROUP_SETTER",
-        //   labelName: i18n.t("Direction"),
-        //   attrName: "direction",
-        //   options: [
-        //     {
-        //       label: "row",
-        //       value: "row",
-        //     },
-        //     {
-        //       label: "column",
-        //       value: "column",
-        //     },
-        //   ],
-        // },
-
-        // {
-        //   id: `${baseWidgetName}-style-align`,
-        //   setterType: "RADIO_GROUP_SETTER",
-        //   labelName: i18n.t("Align"),
-        //   attrName: "align",
-        //   options: [
-        //     {
-        //       label: "flex-start",
-        //       value: "flex-start",
-        //     },
-        //     {
-        //       label: "flex-end",
-        //       value: "flex-end",
-        //     },
-        //     {
-        //       label: "center",
-        //       value: "center",
-        //     },
-        //     {
-        //       label: "stretch",
-        //       value: "stretch",
-        //     },
-        //     {
-        //       label: "baseline",
-        //       value: "baseline",
-        //     },
-        //   ]
-        // },
-        // {
-        //   id: `${baseWidgetName}-style-justify`,
-        //   setterType: "RADIO_GROUP_SETTER",
-        //   labelName: i18n.t("Justify"),
-        //   attrName: "justify",
-        //   options: [
-        //     {
-        //       label: "flex-start",
-        //       value: "flex-start",
-        //     },
-        //     {
-        //       label: "flex-end",
-        //       value: "flex-end",
-        //     },
-        //     {
-        //       label: "center",
-        //       value: "center",
-        //     },
-        //     {
-        //       label: "space-between",
-        //       value: "space-between",
-        //     },
-        //     {
-        //       label: "space-around",
-        //       value: "space-around",
-        //     },
-        //     {
-        //       label: "space-evenly",
-        //       value: "space-evenly",
-        //     },
-
-        //   ]
-        // },
-
-        // {
-        //   id: `${baseWidgetName}-label-noWrap`,
-        //   labelName: "Wrap Text",
-        //   attrName: "wrapText",
-        //   setterType: "INPUT_SETTER",
-        //   expectedType: VALIDATION_TYPES.BOOLEAN,
-        //   defaultValue: true
-        // },
-
-        //   {
-        //     id: `${baseWidgetName}-viewList-extraSmallScreen`,
-        //     labelName: "Row Gap",
-        //     labelDesc: "Row Gap",
-        //     attrName: `rowGap`,
-        //     defaultValue: "1",
-        //     expectedType: VALIDATION_TYPES.STRING,
-        //     setterType: "INPUT_SETTER",
-        //   },
-
-      ],
-    },
-    // {
-    //   id: `${baseWidgetName}-viewList-extraSmallScreen`,
-    //   labelName: "Flex",
-    //   labelDesc: "Flex",
-    //   attrName: `flex`,
-    //   defaultValue: "1",
-    //   expectedType: VALIDATION_TYPES.STRING,
-    //   setterType: "INPUT_SETTER",
-    // },
-    // {
-    //   id: `${baseWidgetName}-style-align`,
-    //   setterType: "RADIO_GROUP_SETTER",
-    //   labelName: i18n.t("Align"),
-    //   attrName: "align",
-    //   options: [
-    //     {
-    //       label: "flex-start",
-    //       value: "flex-start",
-    //     },
-    //     {
-    //       label: "flex-end",
-    //       value: "flex-end",
-    //     },
-    //     {
-    //       label: "center",
-    //       value: "center",
-    //     },
-    //     {
-    //       label: "stretch",
-    //       value: "stretch",
-    //     },
-    //     {
-    //       label: "baseline",
-    //       value: "baseline",
-    //     },
-    //   ]
-    // },
-
-  ]
-  return BasicContainer_PANEL_CONFIG;
-}

package/widgetLibrary/NativeContainer/NativeChild.tsx

@@ -1,156 +0,0 @@
-import RenderComponentCanvasContainerMobile from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainerMobile";
-import RenderChildrenCanvas from "../RenderChildrenCanvas";
-import React, { useMemo } from "react";
-import { Platform, View, Text, ViewStyle, Pressable } from "react-native";
-import { RowContent } from "../CSSGrid/utils";
-import { configActions } from "@/redux/config/configSlice";
-import { isCurrentNodeDisable } from "@/redux/currentApp/components/componentsSelector";
-import { getStyleMap } from "@/utils/getStyleMap";
-import store, { RootState } from "@/store";
-
-export const NativeChild = ({
-  children,
-  index,
-  dispatch,
-  modalVisible,
-  menuPosition,
-  setModalVisible,
-  handleDeleteOptionItem,
-  context
-}: {
-  children: any;
-  index: number;
-  dispatch: any;
-  modalVisible: boolean;
-  menuPosition: { top: number; left: number };
-  setModalVisible: (visible: boolean) => void;
-  handleDeleteOptionItem: (index: number) => void;
-  context: any;
-}) => {
-  const childStyles = useMemo(() => (
-    getStyleMap(
-      children?.props?.trueClasses,
-      children?.props?.falseClasses,
-      children?.props?.isClassTrue ?? true,
-      context
-    )
-  ), [children?.props, context]);
-
-  const flattenedStyles = Array.isArray(childStyles)
-  ? childStyles.flat().reduce((merged, styleObj) => ({ ...merged, ...styleObj }), {})
-  : childStyles || {};
-
-  const subContainerStyle: ViewStyle = {
-      // height: "100%",
-      // width: "100%",
-      // borderColor:'#9793FD',
-      // borderWidth: 0.5,
-      // paddingLeft: 10,
-      // paddingRight: 10 
-      borderColor: Platform.OS === 'web' ? '#9793FD' : "none",
-      borderWidth: Platform.OS === 'web' ? 0.5 : 0
-    }
-  return (
-    <Pressable
-      key={children.displayName}
-      style={{
-        ...flattenedStyles,
-        ...subContainerStyle,
-        flex: children?.props?.flex ?? 1,
-        // alignItems: children?.props?.align,
-        // flexDirection: "row",
-        // justifyContent: children?.props?.justify
-        // width: "50%"
-        // Default to 1 if undefined
-      }}
-      onPress={(e: any) => {
-        e.stopPropagation();
-        if (!isCurrentNodeDisable(children.displayName,store.getState() as RootState)) {
-          dispatch(configActions.updateSelectedComponent([children.displayName]));
-        }
-      }}
-      // onContextMenu={(event: any) => {
-      //   if (isEditMode) {
-      //     event?.preventDefault();
-      //     event?.stopPropagation();
-      //     setModalVisible((pre) => !pre);
-      //     setMenuPosition({ top: event.clientY, left: event.clientX });
-      //   }
-      // }}
-    >
-      {Platform.OS === 'web' && (
-        <View style={{
-          position: 'absolute',
-          zIndex: 1,
-          bottom: 0,
-          right: 0,
-          backgroundColor: '#E2EAF4',
-          padding: 1, // Fixed: Removed quotes
-          borderWidth: 0.5, // Fixed: Separate border properties
-          borderColor: '#9793FD',
-          borderStyle: 'dotted',
-          width: 40,   // Set a smaller width
-          height: 10,
-        }}>
-          <Text style={{ fontSize: 6 }}>
-            {children.displayName}
-          </Text>
-        </View>
-      )}
-      
-      {modalVisible && Platform.OS === 'web' && (
-        <View
-          style={{
-            position: 'absolute',
-            zIndex: 30,
-            backgroundColor: 'white',
-            // color: 'black',
-            // textAlign: 'left',
-            shadowColor: 'gray',
-            shadowOffset: { width: 2, height: 2 },
-            shadowOpacity: 0.8,
-            shadowRadius: 5,
-            borderRadius: 5,
-            left: menuPosition.left - 20,
-            top: menuPosition.top,
-            // fontSize: 14,
-            paddingTop: 10,
-            // fontFamily: 'Roboto',
-          }}
-        >
-          <RowContent
-            click={(e: any) => {
-              e.stopPropagation();
-              handleDeleteOptionItem(index);
-            }}
-            setModalVisible={setModalVisible}
-            rowContent="Delete View"
-            error={false}
-          />
-        </View>
-      )}
-
-      {Platform.OS === 'web' ? (
-        <>
-          {/* <RenderComponentCanvasContainer displayName={""} containerPadding={""}/> */}
-          <RenderChildrenCanvas
-            displayName={children.displayName}
-            columnNumber={1}
-            handleUpdateHeight={() => { }}
-            canResizeCanvas={false}
-            containerPadding={"1px"}
-            key={children.displayName + "Nativecanvas"}
-            gridContainer={true}
-          />
-        </>
-      ) : (
-        <RenderComponentCanvasContainerMobile
-          displayName={children.displayName}
-          containerPadding={""}
-          key={children.displayName + "Nativecanvas"}
-          columnNumber={1}
-        />
-      )}
-    </Pressable>
-  );
-};

package/widgetLibrary/NativeContainer/NativeContainer.tsx

@@ -1,189 +0,0 @@
-import React, { useCallback, useMemo, useState } from "react";
-import { Platform, View, ViewStyle, Text } from "react-native";
-import { v4 as uuidv4 } from "uuid";
-import { ComponentProps, ConfigItem } from "./interface";
-import { useDrop } from "react-dnd";
-import { DRAG_EFFECT, DragInfo } from "@/page/App/components/scaleSquare/components/DragContainer/interface";
-import { DropCollectedProps, DropResultInfo } from "@/page/App/components/dotPanel/components/Canvas/interface";
-import useMeasure from "react-use-measure";
-import RenderComponentCanvasContainer from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainer";
-import RenderComponentCanvasContainerMobile from "@/page/App/components/dotPanel/components/Canvas/renderComponentCanvasContainerMobile";
-import { getIsIMPAKTEditMode, getIsIMPAKTProductMode } from "@/redux/config/configSelector";
-import { getCurrentPageBodySection } from "@/redux/currentApp/executionTree/executionSelector";
-import { getCurrentDisplayName } from "@/page/App/components/dotPanel/hooks/sectionUtils";
-import RenderChildrenCanvas from "../RenderChildrenCanvas";
-import { getComponentMap } from "@/redux/currentApp/executionTree/executionSelector";
-import { configActions } from "@/redux/config/configSlice";
-import { useDispatch, useSelector } from "react-redux";
-import { isCurrentNodeDisable } from "@/redux/currentApp/components/componentsSelector";
-import { css } from "@emotion/native";
-import { RowContent } from "../CSSGrid/utils";
-import { componentsActions } from "@/redux/currentApp/components/componentsSlice";
-import { getStyleMap } from "@/utils/getStyleMap";
-import { NativeChild } from "./NativeChild";
-
-
-// interface ViewComponentProps extends ComponentProps {
-//   isEditMode?: boolean;
-//   childrenNode?: ConfigItem[];
-//   currentIndex?: number;
-//   handleOnClick?: () => void;
-//   handleUpdateHeight?: () => void;
-//   RenderChildrenCanvas?: React.FC<any>;
-//   ContainerEmptyState?: React.FC;
-//   isGridContainer?: boolean;
-// }
-
-export const NativeContainer: React.FC<any> = (props) => {
-
-
-  const
-    {
-      direction,
-      style,
-      justify,
-      align,
-      padding,
-      rowGap,
-      columnGap,
-      //   isEditMode,
-      //   childrenNode,
-      //   currentIndex = 0,
-      //   handleOnClick,
-      //   handleUpdateHeight,
-      //   RenderChildrenCanvas,
-      //   ContainerEmptyState,
-      //   isGridContainer,
-      childrenNode,
-      displayName,
-      isClassTrue = true,
-      trueClasses = [],
-      falseClasses = [],
-      context
-
-    } = props
-  console.log("props >> ", props);
-  const isEditMode = useSelector(getIsIMPAKTEditMode);
-  const [modalVisible, setModalVisible] = useState(false);
-  const [menuPosition, setMenuPosition] = useState({ top: 0, left: 0 });
-  const containerStyle: ViewStyle = {
-    flexDirection: direction === "row" ? "row" : "column",
-    justifyContent: justify,
-    alignItems: align,
-    padding,
-    rowGap: rowGap,
-    columnGap: columnGap,
-    // height: "90%",
-    // width: "100%",
-    flex: 1,
-    ...style,
-  };
-  const containerNameStyle: ViewStyle = {
-    position: 'absolute',
-    left: 0,
-    bottom: 0,
-    zIndex: 5,
-    backgroundColor: '#E2EAF4',
-    borderWidth: 0.5,
-    borderColor: '#9793FD' ,
-    // borderColor: Platform.OS === 'web' ? '#9793FD' : "none",
-    borderStyle: 'dotted',
-    padding: 2,
-    width: 50,   // Set a smaller width
-    height: 10,
-
-    // flexShrink: 1
-  };
-  
-
-  const styles = useMemo(() => {
-    return getStyleMap(trueClasses, falseClasses, isClassTrue, context);
-  }, [trueClasses, falseClasses, isClassTrue, context]);
-
-  console.log("styles", styles);
-  const flattenedStyles = Array.isArray(styles)
-  ? styles.flat().reduce((merged, styleObj) => ({ ...merged, ...styleObj }), {})
-  : styles || {};
-
-
-  const dispatch = useDispatch();
-
-  const componentsMap: any = useSelector(getComponentMap);
-  const ChildNodesMap = useMemo(
-    () =>
-      componentsMap[displayName].childrenNode.map((e) => {
-        return componentsMap[e];
-      }),
-    [componentsMap, displayName]
-  );
-
-  const handleDeleteOptionItem: any = useCallback(
-    (index: number) => {
-      const updatedArray = ChildNodesMap.filter((_optionItems: Record<string, any>, i: number) => {
-        return i !== index;
-      })
-      const currentChildrenNodeDisplayName = childrenNode[index];
-      const updateSlice = {
-        [props.attrPath]: updatedArray,
-      };
-      props.handleUpdateOriginalDSLMultiAttr?.(updateSlice);
-      dispatch(
-        componentsActions.deleteComponentNodeReducer({
-          displayNames: [currentChildrenNodeDisplayName],
-        })
-      );
-
-    }, [childrenNode, props.attrPath, ChildNodesMap, dispatch, props.handleUpdateOriginalDSLMultiAttr]
-  )
-
-  console.log("ChildNodesMap >> ", ChildNodesMap);
-
-  return (
-
-    <View
-      key={displayName}
-      // ref={Platform.OS === 'web' ? dropRef: null}
-      style={{...flattenedStyles,...containerStyle}}
-
-    >
-      {
-        Platform.OS === 'web' &&
-        <View style={containerNameStyle}>
-          <Text style={{ fontSize: 5.5 }}>{displayName}</Text>
-        </View>
-      }
-
-
-      {
-        childrenNode && childrenNode.length > 0 ? (
-          ChildNodesMap.map((children: any, index: number) =>
-
-          (
-            <NativeChild
-              key={children.displayName}
-              children={children}
-              index={index}
-              dispatch={dispatch}
-              modalVisible={modalVisible}
-              menuPosition={menuPosition}
-              setModalVisible={setModalVisible}
-              handleDeleteOptionItem={handleDeleteOptionItem}
-              context={context}
-            />
-          ))
-        ) : (
-          <RenderChildrenCanvas
-            displayName={displayName}
-            columnNumber={1}
-            handleUpdateHeight={() => { }}
-            canResizeCanvas={false}
-            containerPadding={"1px"}
-            key={displayName + "Nativecanvas"}
-            gridContainer={true}
-          />
-        )
-      }
-    </View>
-  );
-};
-

package/widgetLibrary/NativeContainer/WidgetConfig.tsx

@@ -1,37 +0,0 @@
-import { RESIZE_DIRECTION, WidgetConfig } from "@/widgetLibrary/interface";
-import LabelIcon from "@/assets/widgetCover/label.svg";
-
-import { CONTAINER_TYPE } from "@/utils/generators/interface"
-
-export const BasicNativeContainerConfig = {
-  type: "NATIVECANVAS",
-  displayName: "ViewNative",
-  widgetName: "ViewNative",
-  containerType: CONTAINER_TYPE.EDITOR_DOT_PANEL,
-  version: 0,
-}
-
-export const NATIVE_CONTAINER_CONFIG: WidgetConfig = {
-  type: "NATIVE_CONTAINER_WIDGET",
-  displayName: "NativeContainer",
-  widgetName: "NativeContainer",
-  //   icon: LabelIcon, // Replace null with LabelIcon if required
-  keywords: ["CustomView", "Container", "Layout"],
-  sessionType: "CONTAINER",
-  // w: 12,
-  // h: 8,
-  childrenNode: [BasicNativeContainerConfig, BasicNativeContainerConfig],
-  //   resizeDirection: RESIZE_DIRECTION.BOTH,
-  version: 1,
-  defaults: {
-    direction: "row",
-    justify: "flex-start",
-    align: "center",
-    padding: 0,
-    rowGap: 0,
-    columnGap: 0,
-    isEditMode: false,
-    label: "Custom View",
-  },
-  icon: ""
-};

package/widgetLibrary/NativeContainer/index.ts

@@ -1,3 +0,0 @@
-export {NativeContainer} from './NativeContainer'
-export {NATIVE_CONTAINER_CONFIG} from './WidgetConfig'
-export {NATIVECONTAINER_PANEL_CONFIG} from './panelConfig'