impaktapps-ui-builder 1.0.0 → 1.0.1

package/page/App/components/Actions/ActionListItem/style.ts

@@ -1,92 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { SerializedStyles, css } from "@emotion/react"
-import { Theme } from "@mui/material"
-
-export const actionIconContainer = css`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  flex-shrink: 0;
-  width: 16px;
-  height: 16px;
-`
-
-export const actionItemDotStyle = css`
-  flex-shrink: 0;
-  width: 8px;
-  margin-left: 9px;
-  height: 8px;
-  margin-right: 9px;
-  box-sizing: border-box;
-  border-radius: 50%;
-  background: ${globalColor(`blue-03`)};
-`
-
-export function applyActionItemTitleStyle(error: boolean, theme: Theme): SerializedStyles {
-  return css`
-    flex-shrink: 1; 
-    font-weight: 500;
-    margin-left: 8px;
-    overflow: hidden;
-    color: ${error
-      ? globalColor(`red-03`)
-      : theme.palette.text.secondary};
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    &:hover {
-    color:${theme.palette.text.primary}
-    } `
-}
-
-export const timeStyle = css`
-  color: ${globalColor(`grayBlue-04`)};
-`
-
-export const warningCircleStyle = css`
-  position: absolute;
-  color: ${globalColor(`red-03`)};
-  font-size: 8px;
-  bottom: 0;
-  right: 0;
-`
-
-export function applyActionItemContainerStyle(
-  selected: boolean, theme: Theme
-): SerializedStyles {
-  return css` 
-    background: ${selected
-      ? theme.palette.background.default
-      : "transparent"};
-   
-    width: 100%;
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    padding-left: 16px;
-    padding-right: 16px;
-    height: 40px;
-    font-size: 14px;
-    color:${theme.palette.text.secondary};
-    &:hover {
-      background: ${theme.palette.background.default};
-      color: ${theme.palette.text.primary
-    } 
-    }
-  `
-}
-
-export const actionItemLeftStyle = css`
-  color: ${globalColor(`grayBlue-02`)};
-  display: flex;
-  overflow: hidden;
-  flex-direction: row;
-  align-items: center;
-  flex-grow: 1;
-`
-
-export const runningTimeStyle = (theme: Theme) => css`
-  font-size: 12px;
-  font-weight: 400;
-  color: ${theme.palette.text.secondary};
-`

package/page/App/components/Actions/ActionPanel/ActionEventHandler/index.tsx

@@ -1,113 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { klona } from "klona/json"
-import { FC, Suspense, useCallback } from "react"
-import { useTranslation } from "react-i18next"
-import { useDispatch, useSelector } from "react-redux"
-
-import {
-  actionEventHandlerStyle,
-  actionEventHandlerWrapperStyle,
-} from "@/page/App/components/Actions/ActionPanel/ActionEventHandler/style"
-import RenderPanelSetter from "@/page/App/components/InspectPanel/components/PanelSetter"
-import { SelectedProvider } from "@/page/App/components/InspectPanel/context/selectedContext"
-import { getCachedAction } from "@/redux/config/configSelector"
-import { configActions } from "@/redux/config/configSlice"
-import {
-  actionFailedEventHandlerConfig,
-  actionSuccessEventHandlerConfig,
-} from "@/widgetLibrary/PublicSector/utils/generatorEventHandlerConfig"
-import { ActionContent } from "@/redux/currentApp/action/interface"
-import { getNewWidgetPropsByUpdateSlice } from "@/redux/utils"
-import { isObject } from "@/utils/evaluateDynamicString/valueConverter"
-import { TriggerProvider } from "@/utils/trigger/trigger-provider"
-
-export const ActionEventHandler: FC = () => {
-  const { t } = useTranslation()
-  const action:any = useSelector(getCachedAction)
-  const dispatch = useDispatch()
-
-  const handleUpdateDsl = useCallback(
-    (attrPath: string, value: any) => {
-      if (action != undefined) {
-        const newActionContent = klona(action.content || {})
-
-        const updateSlice: Record<string, unknown> = { [attrPath]: value }
-
-        const result = getNewWidgetPropsByUpdateSlice(
-          updateSlice,
-          newActionContent as unknown as Record<string, unknown>,
-        ) as unknown as ActionContent
-        dispatch(
-          configActions.updateCachedAction({
-            ...action,
-            content: result,
-          }),
-        )
-      }
-    },
-    [action, dispatch],
-  )
-
-  const handleUpdateMultiAttrDSL = useCallback(
-    (updateSlice: Record<string, unknown>) => {
-      if (!isObject(updateSlice) || action == undefined) return
-      const newActionContent = klona(action.content || {})
-      const result = getNewWidgetPropsByUpdateSlice(
-        updateSlice,
-        newActionContent as unknown as Record<string, unknown>,
-      ) as unknown as ActionContent
-      dispatch(
-        configActions.updateCachedAction({
-          ...action,
-          content: result,
-        }),
-      )
-    },
-    [action, dispatch],
-  )
-
-  // keep empty
-  const handleUpdateOtherMultiAttrDSL = useCallback(
-    (_displayName: string, _updateSlice: Record<string, unknown>) => {
-      return
-    },
-    [],
-  )
-
-  return (
-    <Suspense>
-      <TriggerProvider renderInBody zIndex={10}>
-        <div css={actionEventHandlerWrapperStyle}>
-          <div css={actionEventHandlerStyle}>
-            {t("editor.action.panel.label.event_handler")}
-          </div>
-          {action && (
-            <SelectedProvider
-              widgetType={action.actionType}
-              widgetDisplayName={action.displayName}
-              widgetParentDisplayName=""
-              widgetProps={action.content || {}}
-              handleUpdateDsl={handleUpdateDsl}
-              handleUpdateMultiAttrDSL={handleUpdateMultiAttrDSL}
-              handleUpdateOtherMultiAttrDSL={handleUpdateOtherMultiAttrDSL}
-              widgetOrAction="ACTION"
-            >
-              <RenderPanelSetter
-                config={actionSuccessEventHandlerConfig}
-                displayName={action.displayName}
-                parentAttrName=""
-              />
-              <RenderPanelSetter
-                config={actionFailedEventHandlerConfig}
-                displayName={action.displayName}
-                parentAttrName=""
-              />
-            </SelectedProvider>
-          )}
-        </div>
-      </TriggerProvider>
-    </Suspense>
-  )
-}
-
-ActionEventHandler.displayName = "ActionEventHandler"

package/page/App/components/Actions/ActionPanel/ActionEventHandler/style.ts

@@ -1,20 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const actionEventHandlerStyle = css`
-  border-top: 1px solid ${globalColor(`grayBlue-08`)};
-  height: 39px;
-  padding-top: 16px;
-  padding-left: 16px;
-  font-size: 14px;
-  font-weight: 500;
-  text-align: left;
-  color: ${globalColor(`grayBlue-04`)};
-`
-
-export const actionEventHandlerWrapperStyle = css`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-`

package/page/App/components/Actions/ActionPanel/ActionMockPanel/index.tsx

@@ -1,72 +0,0 @@
-import { FC, memo } from "react"
-import { useTranslation } from "react-i18next"
-import { useDispatch } from "react-redux"
-import { CodeEditor } from "@/components/CodeEditor"
-import {
-  CODE_LANG,
-  CODE_TYPE,
-} from "@/components/CodeEditor/CodeMirror/extensions/interface"
-import { configActions } from "@/redux/config/configSlice"
-// import { TransformerComponent } from "../TransformerComponent"
-import { ActionMockPanelProps } from "./interface"
-import {
-  mockDataContainerStyle,
-  mockDataTitleStyle,
-  mockPanelContainerStyle,
-} from "./style"
-// import { Checkbox } from "@mui/material"
-
-// eslint-disable-next-line react-refresh/only-export-components
-const ActionMockPanel: FC<ActionMockPanelProps> = (props) => {
-  const { mockData } = props
-
-  const dispatch = useDispatch()
-  const { t } = useTranslation()
-
-  const handleOnChangeMockData = (value: string) => {
-    // dispatch(
-    //   configActions.updateCachedActionMockConfigReducer({
-    //     mockData: value,
-    //   }),
-    // )
-  }
-
-  const handleOnChangeEnableForReleasedApp = (checked: boolean) => {
-    // dispatch(
-    //   configActions.updateCachedActionMockConfigReducer({
-    //     enableForReleasedApp: checked,
-    //   }),
-    // )
-  }
-
-  return (
-    <>
-      <div css={mockPanelContainerStyle}>
-        <div css={mockDataContainerStyle}>
-          <span css={mockDataTitleStyle}>
-            {t("editor.action.panel.option.mock.json")}
-          </span>
-          <CodeEditor
-            value={mockData}
-            showLineNumbers
-            canShowCompleteInfo
-            height="88px"
-            lang={CODE_LANG.JAVASCRIPT}
-            codeType={CODE_TYPE.NO_METHOD_FUNCTION}
-            onChange={handleOnChangeMockData}
-          />
-        </div>
-        {/* <Checkbox
-          checked={enableForReleasedApp}
-          // colorScheme="techPurple"
-          onChange={(e)=> { return handleOnChangeEnableForReleasedApp(!!e.target.value)}}
-        >
-          {t("editor.action.panel.option.mock.on_deploy")}
-        </Checkbox> */}
-      </div>
-      {/* <TransformerComponent fullWidth /> */}
-    </>
-  )
-}
-
-export default memo(ActionMockPanel)

package/page/App/components/Actions/ActionPanel/ActionMockPanel/interface.ts

@@ -1,4 +0,0 @@
-export interface ActionMockPanelProps {
-  mockData: string
-  enableForReleasedApp: boolean
-}

package/page/App/components/Actions/ActionPanel/ActionMockPanel/style.ts

@@ -1,22 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const mockDataContainerStyle = css`
-  display: flex;
-  padding: 8px 0;
-  flex-direction: column;
-  gap: 10px;
-`
-
-export const mockDataTitleStyle = css`
-  color: ${globalColor("grayBlue-02")};
-  font-size: 14px;
-  font-weight: 500;
-  line-height: 22px;
-`
-
-export const mockPanelContainerStyle = css`
-  padding: 8px 16px;
-  width: 100%;
-`

package/page/App/components/Actions/ActionPanel/ActionResult/index.tsx

@@ -1,135 +0,0 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
-import { FC, useCallback, useRef, useState } from "react";
-import { useTranslation } from "react-i18next";
-import { useSelector } from "react-redux";
-import { CodeEditor } from "@/components/CodeEditor";
-import { CODE_LANG } from "@/components/CodeEditor/CodeMirror/extensions/interface";
-import { ActionResultProps } from "@/page/App/components/Actions/ActionPanel/ActionResult/interface";
-import {
-  actionResultContainerStyle,
-  applyActionContentContainerStyle,
-  customerCodeStyle,
-} from "@/page/App/components/Actions/ActionPanel/ActionResult/style";
-import { DragBar } from "@/page/App/components/Actions/DragBar";
-import { getSelectedAction } from "@/redux/config/configSelector";
-import { getExecutionResult } from "@/redux/currentApp/executionTree/executionSelector";
-import { RootState } from "@/store";
-import { AdvancedResultHeader, RESULT_SHOW_TYPE } from "./restApiHeader";
-import { getDisplayResult } from "./utils";
-
-export const ActionResult: FC<ActionResultProps> = (props) => {
-  const { onClose, visible } = props;
-
-  const resizeRef = useRef<HTMLDivElement>(null);
-
-  const alertRef = useRef<HTMLDivElement>(null);
-
-  const [showType, setShowType] = useState<RESULT_SHOW_TYPE>(
-    RESULT_SHOW_TYPE.RESPONSE
-  );
-
-  const selectedAction = useSelector(getSelectedAction)! ?? {};
-
-  const currentActionExecutionResult = useSelector<
-    RootState,
-    Record<string, any> | undefined
-  >((rootState) => {
-    const executionResult = getExecutionResult(rootState);
-    if (selectedAction.displayName) {
-      return executionResult[selectedAction.displayName];
-    }
-  });
-
-  const { t } = useTranslation();
-
-  const renderResult =
-    visible &&
-    (currentActionExecutionResult?.data !== undefined ||
-      currentActionExecutionResult?.runResult !== undefined);
-
-  const isError = currentActionExecutionResult?.runResult?.error;
-  const result = currentActionExecutionResult?.data;
-  const rawResult = currentActionExecutionResult?.rawData;
-  const responseHeader = currentActionExecutionResult?.responseHeaders;
-
-  const runningTimes =
-    (currentActionExecutionResult?.endTime ?? 0) -
-    (currentActionExecutionResult?.startTime ?? 0);
-
-  const [codeMirrorHeight, setCodeMirrorHeight] = useState(260);
-
-  const handleResultTabsClick = useCallback((activeKey: RESULT_SHOW_TYPE) => {
-    return () => {
-      setShowType(activeKey);
-    };
-  }, []);
-
-  const finalResult = {
-    result,
-    rawResult,
-    responseHeader,
-  };
-
-  const advancedApiResultTabs = [
-    {
-      title: t("editor.action.panel.result.restapi.response"),
-      name: RESULT_SHOW_TYPE.RESPONSE,
-      shown: !!result,
-    },
-    {
-      title: t("editor.action.panel.result.restapi.rawdata"),
-      name: RESULT_SHOW_TYPE.RAW_DATA,
-      shown: !!rawResult,
-    },
-    {
-      title: t("editor.action.panel.result.restapi.headers"),
-      name: RESULT_SHOW_TYPE.HEADERS,
-      shown: !!responseHeader,
-    },
-  ];
-
-  const displayData = getDisplayResult(showType, finalResult);
-
-  return (
-    <div css={actionResultContainerStyle}>
-      <div css={applyActionContentContainerStyle(renderResult)} ref={resizeRef}>
-        <DragBar
-          minHeight={300}
-          resizeRef={resizeRef}
-          onChange={() => {
-            setCodeMirrorHeight(
-              resizeRef.current!.offsetHeight - alertRef.current!.offsetHeight
-            );
-          }}
-        />
-
-        <AdvancedResultHeader
-          showType={showType}
-          runningTimes={runningTimes}
-          onClose={onClose}
-          handleResultTabsClick={handleResultTabsClick}
-          ref={alertRef}
-          statusCode={responseHeader?.statusCode}
-          statusText={responseHeader?.statusText}
-          tabsConfig={advancedApiResultTabs}
-          isError={isError}
-        />
-
-        <CodeEditor
-          // height={codeMirrorHeight + "px"}
-          wrapperCss={customerCodeStyle}
-          showLineNumbers
-          editable={false}
-          value={
-            isError
-              ? currentActionExecutionResult?.runResult?.message
-              : JSON.stringify(displayData, undefined, 2)
-          }
-          lang={CODE_LANG.JSON}
-        />
-      </div>
-    </div>
-  );
-};
-
-ActionResult.displayName = "ActionResult";

package/page/App/components/Actions/ActionPanel/ActionResult/interface.ts

@@ -1,4 +0,0 @@
-export interface ActionResultProps {
-  visible: boolean
-  onClose: () => void
-}

package/page/App/components/Actions/ActionPanel/ActionResult/restApiHeader.tsx

@@ -1,116 +0,0 @@
-import { MouseEventHandler, forwardRef } from "react";
-import { useTranslation } from "react-i18next";
-
-import {
-  alertInfoContainerStyle,
-  alertInfoStyle,
-  alertTabsContainerStyle,
-  alertTabsItemStyle,
-  alertTextStyle,
-  applyStatusCodeStyle,
-  getActiveStyle,
-  restApiAlertBarStyle,
-  tabsContentStyle,
-  timestampStyle,
-} from "@/page/App/components/Actions/ActionPanel/ActionResult/style";
-import { globalColor } from "@/utils/colorBuilder";
-import CloseIcon from "@mui/icons-material/Close";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-export enum RESULT_SHOW_TYPE {
-  "RESPONSE" = "response",
-  "HEADERS" = "headers",
-  "RAW_DATA" = "rawData",
-}
-
-interface TabsConfig {
-  title: string;
-  name: RESULT_SHOW_TYPE;
-  shown: boolean;
-}
-
-interface AdvancedResultHeaderProps {
-  showType: RESULT_SHOW_TYPE;
-  handleResultTabsClick: (
-    activeType: RESULT_SHOW_TYPE
-  ) => MouseEventHandler<HTMLDivElement>;
-  statusCode?: number;
-  statusText?: string;
-  runningTimes: number;
-  onClose: MouseEventHandler<SVGElement>;
-  tabsConfig: TabsConfig[];
-  isError: boolean;
-}
-
-export const AdvancedResultHeader = forwardRef<
-  HTMLDivElement,
-  AdvancedResultHeaderProps
->((props, ref) => {
-  const {
-    handleResultTabsClick,
-    showType,
-    statusCode,
-    runningTimes,
-    tabsConfig,
-    onClose,
-    isError,
-  } = props;
-
-  const canShownTabs = tabsConfig.filter((info) => info.shown);
-
-  const { t } = useTranslation();
-  return (
-    <div ref={ref} css={restApiAlertBarStyle}>
-      {canShownTabs.length > 1 ? (
-        <>
-          <div css={alertTabsContainerStyle}>
-            {canShownTabs.map((info) => (
-              <div
-                key={info.name}
-                css={[
-                  alertTabsItemStyle,
-                  getActiveStyle(showType === info.name),
-                ]}
-                data-key={info.name}
-                onClick={handleResultTabsClick(info.name)}
-              >
-                <div css={tabsContentStyle}>{info.title}</div>
-              </div>
-            ))}
-          </div>
-          <div css={alertInfoContainerStyle}>
-            {statusCode && (
-              <div css={alertInfoStyle}>
-                {t("editor.action.panel.result.restapi.status")}
-                <span css={applyStatusCodeStyle(statusCode)}>{statusCode}</span>
-              </div>
-            )}
-            <div css={alertInfoStyle}>
-              Times
-              <span css={timestampStyle}>{`${runningTimes}ms`}</span>
-            </div>
-          </div>
-        </>
-      ) : (
-        <>
-          {isError ? (
-            <WarningAmberIcon sx={{color:"red"}} />
-          ) : (
-            <CheckCircleOutlineIcon sx={{ color: globalColor("green-03") }} />
-          )}
-          <span css={alertTextStyle}>
-            {isError
-              ? t("editor.action.panel.status.ran_failed")
-              : t("editor.action.panel.status.ran_successfully")}
-          </span>
-        </>
-      )}
-      <CloseIcon
-        sx={{ color: globalColor("grayBlue-05"), cursor: "pointer" }}
-        onClick={onClose}
-      />
-    </div>
-  );
-});
-
-AdvancedResultHeader.displayName = "RestAPIHeader";