impaktapps-ui-builder 0.0.382457 → 1.0.0

package/widgetLibrary/SelectWidget/widgetConfig.tsx

@@ -0,0 +1,37 @@
+import { v4 } from "uuid";
+import  SelectWidgetIcon  from "@/assets/widgetCover/select.svg";
+
+import { RESIZE_DIRECTION, WidgetConfig } from "@/widgetLibrary/interface";
+import i18n from "@/i18n/config";
+
+export const SELECT_WIDGET_CONFIG: WidgetConfig = {
+  type: "SELECT_WIDGET",
+  displayName: "select",
+  widgetName: i18n.t("widget.select.name"),
+  icon: <SelectWidgetIcon />,
+  keywords: ["Select", "选择器"],
+  sessionType: "SELECT",
+  resizeDirection: RESIZE_DIRECTION.HORIZONTAL,
+  version: 0,
+  defaults: {
+    optionConfigureMode: "dynamic",
+    multiple: false,
+    defaultValue: [],
+    id: "auto",
+    label: "Select",
+    name: "Select",
+    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" },
+    ],
+    dataSources: "{{[]}}",
+    hidden: false,
+    freeSolo: false,
+    currentIndex: 0,
+    disabled: false,
+    placeholder: "",
+    tooltipText: "",
+    variant: "outlined",
+  },
+};

package/widgetLibrary/Slider/Slider.tsx

@@ -0,0 +1,229 @@
+import { Box, IconButton } from "@mui/material";
+import { useRef, useState, useCallback, useEffect } from "react";
+import ArrowRightIcon from "@mui/icons-material/ArrowRight";
+import ArrowLeftIcon from "@mui/icons-material/ArrowLeft";
+export const SLIDER = ({
+  cardWidth = 200,
+  sliderData = [],
+  triggerEventHandler,
+  handleUpdateMultiExecutionResult,
+  displayName,
+}) => {
+  const cardHeight = (cardWidth * 4) / 7;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const sliderRef = useRef(null);
+
+  const handleOnClick = useCallback(() => {
+    triggerEventHandler("click");
+  }, [triggerEventHandler]);
+
+  const handleScroll = (index) => {
+    if (sliderRef.current) {
+      const scrollAmount = index * (cardWidth + 20); // card width + margin
+      sliderRef.current.scrollTo({
+        left: scrollAmount,
+        behavior: "smooth",
+      });
+      setCurrentIndex(index);
+      handleUpdateMultiExecutionResult([
+        {
+          displayName,
+          value: { selectedCell: { index } },
+        },
+      ]);
+    }
+  };
+useEffect(()=>{
+  setCurrentIndex(0)
+  handleUpdateMultiExecutionResult([
+    {
+      displayName,
+      value: { selectedCell: { index:0 } },
+    },
+  ]);
+},[displayName, handleUpdateMultiExecutionResult])
+  const handlePrev = () => {
+    if (currentIndex > 0) {
+      handleScroll(currentIndex - 1);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentIndex < sliderData.length - 1) {
+      handleScroll(currentIndex + 1);
+    }
+  };
+
+  return (
+    <div style={{ position: "relative", width: "100%" }}>
+      {/* Slider */}
+      <div
+        ref={sliderRef}
+        style={{
+          overflow: "hidden",
+          display: "flex",
+          scrollBehavior: "smooth",
+          width: "100%",
+        }}
+      >
+        <div
+          style={{
+            display: "flex",
+            transition: "transform 0.3s ease-in-out",
+          }}
+        >
+          {sliderData?.length == 0 &&<div style={{textAlign:"center",color:"GrayText"}}> No Card Found</div>}
+          {sliderData?.map((e, index) => (
+            <Box
+              key={index}
+              component={"div"}
+              sx={{
+                width: `${cardWidth}px`,
+                margin: "10px",
+                marginRight: "20px",
+                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}
+            >
+              {/* Card Content */}
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+             
+                <div style={{ fontSize: `${cardHeight / 10 - 2}px` }}>
+                  {e.bank_name}
+                </div>
+              </div>
+              {/* <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",
+                    textAlign:"left",
+                    width: cardWidth - 40,
+                  }}
+                >
+                  **** **** **** {e.card_number?.slice(12)}
+                </div>
+              {/* </div> */}
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <div>
+                  <div
+                    style={{
+                      fontSize: `${cardHeight / 20 + 4}px`,
+                      fontWeight: "bold",
+                    }}
+                  >
+                    
+                    {e.owner_name}
+                  </div>
+                </div>
+                <div
+                  style={{
+                    textAlign: "right",
+                    fontSize: `${cardHeight / 20 + 2}px`,
+                  }}
+                >
+                  <div>EXP</div>
+                  <div>{e.expiry_date}</div>
+                </div>
+              </div>
+            </Box>
+          ))}
+        </div>
+      </div>
+
+      {/* Navigation Buttons */}
+      <IconButton
+        size="small"
+        disabled={currentIndex === 0}
+        sx={{
+          position: "absolute",
+          left: "-10px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 1,
+          // marginLeft: "-10px",
+          backgroundColor: "#000",
+          color: "#fff",
+        }}
+      >
+        <ArrowLeftIcon onClick={handlePrev} />
+      </IconButton>
+      <IconButton
+        size="small"
+        disabled={currentIndex === sliderData.length - 1}
+        sx={{
+          position: "absolute",
+          right: "-10px",
+          top: "50%",
+          transform: "translateY(-50%)",
+          zIndex: 1,
+          // marginLeft: "-10px",
+          backgroundColor: "#000",
+          color: "#fff",
+        }}
+      >
+        <ArrowRightIcon onClick={handleNext} />
+      </IconButton>
+
+      {/* Dot Navigation */}
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "10px",
+        }}
+      >
+        {sliderData?.map((_, index) => (
+          <div
+            key={index}
+            onClick={() => handleScroll(index)}
+            style={{
+              width: "10px",
+              height: "10px",
+              borderRadius: "50%",
+              backgroundColor: currentIndex === index ? "#000" : "#ccc",
+              margin: "0 5px",
+              cursor: "pointer",
+            }}
+          ></div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SLIDER;

package/widgetLibrary/Slider/eventHandlerConfig.ts

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

package/widgetLibrary/Slider/index.ts

@@ -0,0 +1,4 @@
+export {SLIDER} from './Slider';
+export {SLIDER_CONFIG} from './widgetConfig';
+export {SLIDER_PANEL_CONFIG} from './panelConfig';
+export {SLIDER_EVENT_HANDLER_CONFIG} from "./eventHandlerConfig"

package/widgetLibrary/Slider/interface.ts

@@ -0,0 +1,12 @@
+/* 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/Slider/panelConfig.tsx

@@ -0,0 +1,71 @@
+import i18n from "@/i18n/config";
+import { PanelConfig } from "@/page/App/components/InspectPanel/interface";
+import { VALIDATION_TYPES } from "@/utils/validationFactory";
+import { SLIDER_EVENT_HANDLER_CONFIG} from "./eventHandlerConfig";
+import { generatorEventHandlerConfig } from "../PublicSector/utils/generatorEventHandlerConfig";
+
+const baseWidgetName = "slider";
+
+// cardWidth = 150,
+// bank_name = "BANK NAME",
+// card_no,
+// cardholder_name = "cardholder_name",
+// expiry_date = "00/00",
+export const SLIDER_PANEL_CONFIG: PanelConfig[] = [
+  {
+    id: `${baseWidgetName}-basic`,
+    groupName: i18n.t("editor.inspect.setter_group.basic"),
+    children: [
+      {
+        id: `${baseWidgetName}-card-sliderDara`,
+        labelName: "Slidar Data",
+        attrName: "sliderData",
+        setterType: "INPUT_SETTER",
+        expectedType: VALIDATION_TYPES.ARRAY,
+      },
+    ],
+  },
+    {
+      id: `${baseWidgetName}-interaction`,
+      groupName: "INTERACTION",
+      children: [
+        {
+          ...generatorEventHandlerConfig(
+            baseWidgetName,
+            SLIDER_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/Slider/widgetConfig.tsx

@@ -0,0 +1,18 @@
+import Slider  from "@/assets/widgetCover/slider.svg"
+import { RESIZE_DIRECTION, WidgetConfig } from "@/widgetLibrary/interface";
+
+export const SLIDER_CONFIG: WidgetConfig = {
+  type: "SLIDER_WIDGET",
+  displayName: "slider",
+  widgetName: "slider",
+  icon:<Slider />,
+  keywords: ["Label", "文本输入框"],
+  sessionType: "INPUTS",
+  resizeDirection: RESIZE_DIRECTION.ALL,
+  version: 0,
+  defaults: {
+    label: "card",
+    classes:[{title:"headerLabel",value:"headerLabel"}],
+   sliderData:[],
+  },
+};

package/widgetLibrary/TableWidget/eventHandlerConfig.ts

@@ -0,0 +1,69 @@
+import i18n from "@/i18n/config"
+import { EventHandlerConfig } from "@/widgetLibrary/interface"
+
+export const TABLE_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
+  events: [
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.sortingChange",
+      ),
+      value: "sortingChange",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.paginationChange",
+      ),
+      value: "paginationChange",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.filtersChange",
+      ),
+      value: "filtersChange",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.rowSelectChange",
+      ),
+      value: "rowSelectChange",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.rowClick",
+      ),
+      value: "rowClick",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.refresh",
+      ),
+      value: "refresh",
+    },
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.onCellSelect",
+      ),
+      value: "onCellSelect",
+    },
+  ],
+  methods: [
+    "selectPage",
+    "selectRow",
+    "clearSelection",
+    "setFilters",
+    "clearFilters",
+    "setSort",
+  ],
+}
+
+export const TABLE_BUTTON_EVENT_HANDLER_CONFIG: EventHandlerConfig = {
+  events: [
+    {
+      label: i18n.t(
+        "editor.inspect.setter_content.widget_action_type_name.clickMenuItem",
+      ),
+      value: "clickMenuItem",
+    },
+  ],
+  methods: [],
+}

package/widgetLibrary/TableWidget/index.ts

@@ -0,0 +1,3 @@
+export { TABLE_WIDGET_CONFIG } from "./widgetConfig"
+export { TABLE_EVENT_HANDLER_CONFIG } from "./eventHandlerConfig"
+export { TABLE_PANEL_CONFIG } from "./panelConfig"

package/widgetLibrary/TableWidget/interface.ts

@@ -0,0 +1,192 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ColumnDef } from "@tanstack/react-table"
+import { HTMLAttributes } from "react"
+import { BaseWidgetProps } from "@/widgetLibrary/interface"
+import { ButtonColorScheme, ButtonProps } from "../ButtonWidget/interface"
+import { TableProps } from "@/utils/Table"
+export interface CellItemProps {
+  cellValue: string
+  id: string
+  label?: string
+  index: number
+}
+export enum Columns {
+  Auto = "auto",
+  Text = "text",
+  Date = "date",
+  Tag = "tag",
+  Time = "time",
+  DateTime = "datetime",
+  Number = "number",
+  Percent = "percent",
+  Link = "link",
+  Button = "button",
+  ButtonGroup = "buttongroup",
+  Boolean = "boolean",
+  Image = "image",
+  IconGroup = "icongroup",
+  Rating = "rating",
+  Markdown = "markdown",
+  // HTML = "html",
+  Currency = "currency",
+}
+
+export type ColumnType = Lowercase<keyof typeof Columns>
+
+export const ColumnTypeOption = Object.entries(Columns).map(([key, value]) => {
+  return {
+    label: key,
+    value: value as ColumnType,
+  }
+})
+
+export const defaultColumnItem: Partial<ColumnItemShape> = {
+  enableSorting: true,
+  type: "auto",
+  visible: true,
+  format: "YYYY-MM-DD",
+  // colorScheme: "gray",
+  objectFit: "scale-down",
+  tagColor: "auto",
+  alignment: "left",
+}
+
+export interface ColumnItemShape
+  extends Pick<ColumnDef<object>, "cell" | "id" | "meta"> {
+  accessorKey: string
+  header: string
+  value?: string
+  label?: string
+  type?: ColumnType
+  disabled?: boolean
+  colorScheme?: ButtonColorScheme
+  objectFit?: any,
+  enableSorting?: boolean
+  visible?: boolean
+  decimalPlaces?: number
+  showThousandsSeparator?: boolean
+  format?: string
+  mappedValue?: string
+  custom?: boolean
+  fromCurrentRow?: Record<string, boolean>
+  events?: any[]
+  columnIndex?: number
+  alignment?: TableCellAlign
+  backgroundColor?: string
+  // button type
+  variant?: ButtonProps["variant"]
+  // icon type
+  iconName?: string
+  iconGroupContent?: TableCellIconGroupItemProps[]
+  // currency type
+  currencyCode?: string
+  // tag type
+  tagLabel?: string
+  tagColor?: string | "auto"
+  tagColorJs?: string | "auto"
+  tagColorMode?: "select" | "dynamic"
+  // button group type
+  buttonGroupContent?: TableCellButtonGroupItemProps[]
+}
+
+export type TableCellAlign = "left" | "center" | "right"
+
+export interface TableCellButtonGroupItemProps extends CellItemProps {
+  colorScheme?: ButtonColorScheme
+  disabled?: boolean
+  variant?: ButtonProps["variant"]
+  fromCurrentRow?: Record<string, boolean>
+}
+
+export interface TableCellIconGroupItemProps extends CellItemProps {
+  colorScheme?: string
+  disabled?: boolean
+  fromCurrentRow?: Record<string, boolean>
+}
+
+export const tagColorSchemeOptions = [
+  "auto",
+  "blackAlpha",
+  "gray",
+  "grayBlue",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "cyan",
+  "purple",
+  "techPurple",
+  "techPink",
+]
+
+export interface TableCommonProps
+  extends HTMLAttributes<HTMLDivElement>,
+    Pick<
+      TableProps<any, any>,
+      | "loading"
+      | "columns"
+      | "filter"
+      | "refresh"
+      | "download"
+      | "downloadRawData"
+      | "overFlow"
+      | "pagination"
+      | "defaultSort"
+      | "rowSelection"
+      | "columnVisibility"
+      | "multiRowSelection"
+      | "enableSingleCellSelection"
+      | "columnSizing"
+      | "data"
+    > {
+  emptyState?: string
+  pageSize?: number
+  pageIndex?: number
+  defaultSortKey?: string
+  defaultSortOrder?: "ascend" | "descend"
+  selectedRow?: any[]
+  targetRow?: any
+  enableServerSidePagination?: boolean
+  paginationType?:
+    | "limitOffsetBased"
+    | "cursorBased"
+    | "graphqlRelayCursorBased"
+  totalRowCount?: number
+  nextBeforeCursor?: number
+  nextAfterCursor?: number
+  hasNextPage?: boolean
+  handleUpdateMultiExecutionResult: (
+    updateSlice: {
+      displayName: string
+      value: Record<string, any>
+    }[],
+  ) => void
+}
+
+export interface WrappedTableProps
+  extends TableCommonProps,
+    Omit<BaseWidgetProps, "triggerEventHandler"> {
+  customColumns?: Record<number, string>
+  clickOutsideToResetSelection?: boolean
+  handleOnClickMenuItem?: (path: string) => void
+  handleOnCellSelect: () => void
+  handleOnSortingChange: () => void
+  handleOnPaginationChange: () => void
+  handleOnFiltersChange: () => void
+  handleOnRowSelectChange: () => void
+  handleOnRowClick: () => void
+  handleOnRefresh: () => void
+}
+
+// todo: @echoxyc error extends
+export interface TableWidgetProps extends TableCommonProps, BaseWidgetProps {
+  columns: ColumnItemShape[]
+  dataSource: any[]
+  dataSourceJS: any[]
+  dataSourceMode: "select" | "dynamic"
+}
+
+export interface WrappedTableContextProps {
+  handleOnClick?: () => void
+}