impaktapps-ui-builder 1.0.0 → 1.0.1

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCard/suggestCard.tsx

@@ -1,28 +0,0 @@
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import CommentIcon from '@mui/icons-material/Comment';
-import { applyItemStyle, nameStyle, titleContainerStyle } from "./style"
-import { useTheme } from "@mui/material";
-
-export const SuggestResourceCard: FC = () => {
-  const { t } = useTranslation()
-  const theme = useTheme()
-  return (
-    <div 
-      css={applyItemStyle(theme)}
-      onClick={() => {
-        window.open(
-          "https://www.act21.io/",
-          "_blank",
-        )
-      }}
-    >
-   <CommentIcon fontSize="small"/>
-      <div css={titleContainerStyle}>
-        <div css={nameStyle(theme)}>{t("editor.action.form.option.tell_us")}</div>
-      </div>
-    </div>
-  )
-}
-
-SuggestResourceCard.displayName = "SuggestResourceCard"

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCard/utils.tsx

@@ -1,36 +0,0 @@
-// import ImpaktApps from "@assets/impaktIcon.png";
-import  GlobalData  from "@assets/globaldata.svg";
-import  ReatApi  from "@assets/api.svg";
-import  Transformer  from "@assets/transformer.svg";
-import  Other  from "@assets/other.svg";
-import AltRouteIcon from "@mui/icons-material/AltRoute";
-import { ActionType } from "@/redux/currentApp/action/interface";
-export const getIconFromResourceType = (
-  resourceType: ActionType|"other",
-  height?: string | number
-) => {
-  switch (resourceType) {
-    case "restapi":
-      return <ReatApi height={height}/>;
-    case "setRouter":
-      return <AltRouteIcon style={{ height: height }} />;
-    case "globalData":
-      return <GlobalData />;
-    case "transformer":
-      return <Transformer />;
-    case "other":
-      return <Other />;
-    case "impaktapps":
-      return (
-        <div>
-          <img
-            src={""}
-            alt="impaktapps"
-            width={height || 34}
-            height={height || 40}
-            style={{ paddingTop: "6px" }}
-          />
-        </div>
-      );
-  }
-};

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCreatePanel/index.tsx

@@ -1,33 +0,0 @@
-import { FC } from "react"
-import { ConfigElement } from "../ConfigElements"
-import { ConfigElementProvider } from "../ConfigElements/provider"
-import { Header } from "../ResourceHeader"
-import { TipPanel } from "../TipPanel"
-import { ResourceCreatePanelProps } from "./interface"
-import {
-  containerStyle,
-  innerContainerStyle,
-  outerContainerStyle,
-} from "./style"
-import Divider from "@mui/material/Divider"
-
-export const ResourceCreatePanel: FC<ResourceCreatePanelProps> = (props) => {
-  const { resourceType, resourceID, handleOnClickBack } = props
-  return (
-    <ConfigElementProvider resourceType={resourceType} resourceID={resourceID}>
-      <div css={innerContainerStyle}>
-        <Header resourceType={resourceType} onClickBack={handleOnClickBack} />
-        <Divider />
-        <div css={outerContainerStyle}>
-          <div css={containerStyle}>
-            <ConfigElement
-              resourceType={resourceType}
-              resourceID={resourceID}
-            />
-            <TipPanel resourceType={resourceType} />
-          </div>
-        </div>
-      </div>
-    </ConfigElementProvider>
-  )
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCreatePanel/interface.ts

@@ -1,7 +0,0 @@
-import { ResourceType } from "../../../resource"
-
-export interface ResourceCreatePanelProps {
-  resourceType: ResourceType
-  resourceID?: string
-  handleOnClickBack: () => void
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCreatePanel/style.ts

@@ -1,24 +0,0 @@
-import { css } from "@emotion/react"
-
-export const containerStyle = css`
-  display: flex;
-  justify-content: center;
-  gap: 32px;
-  width: 1032px;
-`
-
-export const outerContainerStyle = css`
-  display: flex;
-  width: 100%;
-  justify-content: center;
-  overflow: hidden;
-  padding: 16px 0;
-`
-
-export const innerContainerStyle = css`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-`

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCreator/index.tsx

@@ -1,27 +0,0 @@
-
-import { FC, Suspense, useCallback, useContext } from "react"
-
-import { ResourceCreatePanel } from "../ResourceCreatePanel"
-import { ResourceCreatorProps } from "./interface"
-import { ResourceGeneratorContext } from "../.."
-import { ResourceType } from "../../../resource"
- 
-export const ResourceCreator: FC<ResourceCreatorProps> = (props) => {
-  const { resourceType, resourceID, onBack } = props
-
-  const { getResourceByID } = useContext(ResourceGeneratorContext)
-
-  const resource = getResourceByID(resourceID)
-  const finalResourceType = resource ? resource.resourceType : resourceType
-  const handleBack = useCallback(() => onBack("select"), [onBack])
-
-  return (
-    <Suspense>
-      <ResourceCreatePanel
-        resourceID={resourceID}
-        resourceType={finalResourceType as ResourceType}
-        handleOnClickBack={handleBack}
-      />
-    </Suspense>
-  )
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCreator/interface.ts

@@ -1,9 +0,0 @@
-
-import { ResourceType } from "../../../resource"
-import { ResourceCreatorPage } from "../../interface"
-
-export interface ResourceCreatorProps {
-  resourceID?: string
-  resourceType?: ResourceType
-  onBack: (page: ResourceCreatorPage) => void
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceCreator/style.ts

@@ -1,10 +0,0 @@
-import { css } from "@emotion/react"
-
-export const resourceCreatorContainerStyle = css`
-  width: 100%;
-  max-height: 685px;
-  display: flex;
-  flex-direction: column;
-  padding: 24px;
-  overflow-y: hidden;
-`

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceDivider/index.tsx

@@ -1,40 +0,0 @@
-import { TFunction } from "i18next"
-import { FC } from "react"
-import { useTranslation } from "react-i18next"
-import { ResourceDividerProps, ResourceDividerType } from "./interface"
-import { optionLabelStyle } from "./style"
-import { Divider } from "@mui/material"
-
-const getDividerContent = (type: ResourceDividerType, t: TFunction) => {
-  switch (type) {
-    case "Service Account":
-      return t("editor.action.form.group.gs.service_account")
-    case "General Option":
-      return t("editor.action.resource.db.title.general_option")
-    case "Advanced Option":
-      return t("editor.action.resource.db.title.advanced_option")
-    default:
-      return t("editor.action.resource.db.title.general_option")
-  }
-}
-
-export const ResourceDivider: FC<ResourceDividerProps> = (props) => {
-  const { type } = props
-  const { t } = useTranslation()
-  const content = getDividerContent(type, t)
-
-  return (
-    <>
-      <Divider
-        // direction="horizontal"
-        // ml="24px"
-        // mr="24px"
-        // mt="8px"
-        // mb="8px"
-        // w="unset"
-      />
-      <div css={optionLabelStyle}>{content}</div>
-    </>
-  )
-}
-ResourceDivider.displayName = "ResourceDivider"

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceDivider/interface.ts

@@ -1,8 +0,0 @@
-export type ResourceDividerType =
-  | "Service Account"
-  | "General Option"
-  | "Advanced Option"
-
-export interface ResourceDividerProps {
-  type: ResourceDividerType
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceDivider/style.ts

@@ -1,13 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const optionLabelStyle = css`
-  height: 38px;
-  display: flex;
-  font-size: 14px;
-  font-weight: 500;
-  padding: 8px 24px;
-  color: ${globalColor("grayBlue-04")};
-  align-items: center;
-`

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceHeader/index.tsx

@@ -1,53 +0,0 @@
-import { FC } from "react";
-import { useTranslation } from "react-i18next";
-import { getResourceNameFromResourceType } from "../../utils";
-import { ResourceHeaderProps } from "./interface";
-import {
-  buttonContainerStyle,
-  headerContainerStyle,
-  headerOuterContainerStyle,
-  titleContainerStyle,
-  titleNameContainerStyle,
-  titleNameStyle,
-} from "./style";
-import { Button } from "@mui/material";
-import { CreateButton } from "../ConfigElements/ActionButtons/CreateButton";
-import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import { getIconFromResourceType } from "../ResourceCard/utils";
-
-export const Header: FC<ResourceHeaderProps> = (props) => {
-  const { t } = useTranslation();
-  const { resourceType, onClickBack } = props;
-
-  return (
-    <div css={headerOuterContainerStyle}>
-      <div css={headerContainerStyle}>
-        <div>
-          <Button
-            startIcon={
-              <ArrowBackIosIcon fontSize="small" sx={{ fontSize: "8px" }} />
-            }
-            variant="text"
-            type="button"
-            size={"small"}
-            sx={{ fontSize: "13px" }}
-            onClick={onClickBack}
-          >
-            {t("back")}
-          </Button>
-        </div>
-        <div css={titleContainerStyle}>
-          <div css={titleNameContainerStyle}>
-            {getIconFromResourceType(resourceType)}
-            <h1 css={titleNameStyle}>
-              {getResourceNameFromResourceType(resourceType)}
-            </h1>
-          </div>
-          <div css={buttonContainerStyle}>
-            <CreateButton />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceHeader/interface.ts

@@ -1,7 +0,0 @@
-import { ResourceType } from "../../../resource"
-
-
-export interface ResourceHeaderProps {
-  resourceType: ResourceType
-  onClickBack: () => void
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceHeader/style.ts

@@ -1,45 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-export const headerOuterContainerStyle = css`
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-export const headerContainerStyle = css`
-  width: 1032px;
-  padding: 16px 0;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-`
-
-export const titleContainerStyle = css`
-  width: 100%;
-  padding: 0 16px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-`
-
-export const titleNameContainerStyle = css`
-  display: flex;
-  align-items: center;
-  gap: 8px;
-`
-
-export const titleNameStyle = css`
-  font-size: 16px;
-  font-weight: 500;
-  color: ${globalColor("grayBlue-02")};
-  margin: 0;
-  padding: 0;
-`
-
-export const buttonContainerStyle = css`
-  display: flex;
-  gap: 8px;
-  align-items: center;
-`

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceTypeSelector/index.tsx

@@ -1,65 +0,0 @@
-import { FC } from "react";
-import { ResourceTypeList } from "../../config";
-import { ResourceCard } from "../ResourceCard";
-import { SuggestResourceCard } from "../ResourceCard/suggestCard";
-import { ResourceTypeSelectorProps } from "./interface";
-import { categoryStyle, containerStyle, resourceListStyle } from "./style";
-
-export const ResourceTypeSelector: FC<ResourceTypeSelectorProps> = (props) => {
-  const { onSelect, filterResourceType } = props;
-  const finalResourceTypeList = ResourceTypeList.filter((resource) => {
-    const { category, item } = resource;
-    if (category === "notFind") {
-      return true;
-    }
-
-    const finalItems = item
-      .filter(({ hidden }) => !hidden)
-      .filter(({ resourceType }) => {
-        if (filterResourceType) {
-          return filterResourceType(resourceType);
-        }
-        return resourceType;
-      });
-    return finalItems.length > 0;
-  });
-
-  return (
-    <div css={containerStyle}>
-      {finalResourceTypeList.map(({ title, item, category }) => {
-        return (
-          <div key={category}>
-            <span css={categoryStyle}>{title}</span>
-            {category === "notFind" ? (
-              <div css={resourceListStyle}>
-                <SuggestResourceCard />
-              </div>
-            ) : (
-              <div css={resourceListStyle}>
-                {item
-                  .filter(({ hidden }) => !hidden)
-                  .filter(({ resourceType }) => {
-                    if (filterResourceType) {
-                      return filterResourceType(resourceType);
-                    }
-                    return resourceType;
-                  })
-                  .map(({ resourceType }) => (
-                    <ResourceCard
-                      key={resourceType}
-                      onSelect={(item) => {
-                        onSelect(item);
-                      }}
-                      resourceType={resourceType}
-                    />
-                  ))}
-              </div>
-            )}
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-ResourceTypeSelector.displayName = "ResourceTypeSelector";

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceTypeSelector/interface.ts

@@ -1,7 +0,0 @@
-import { ResourceType } from "../../../resource"
-
-
-export interface ResourceTypeSelectorProps {
-  onSelect: (item: ResourceType) => void
-  filterResourceType?: (item: ResourceType) => boolean
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/ResourceTypeSelector/style.ts

@@ -1,28 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const containerStyle = css`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  padding: 0 24px 16px 24px;
-`
-
-export const categoryStyle = css`
-  display: inline-block;
-  height: 30px;
-  line-height: 30px;
-  padding-top: 8px;
-  font-size: 14px;
-  font-weight: 500;
-  color: ${globalColor("grayBlue-04")};
-`
-
-export const resourceListStyle = css`
-  padding: 8px 0;
-  display: grid;
-  grid-gap: 16px;
-  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
-`

package/page/App/components/PublicTypes/ResourceGenerator/components/RowWhiteList/index.tsx

@@ -1,41 +0,0 @@
-
-import { FC, 
-  // useCallback, useState 
-} from "react"
-import { useTranslation } from "react-i18next"
-// import { WHITE_LIST_IP } from "../../config"
-import {
-  // ipListContainerStyle,
-  // ipListStyle,
-  // whiteListButtonContainerStyle,
-  // whiteListButtonStyle,
-  whiteListContentContainerStyle,
-  whiteListContentStyle,
-  whiteListDescriptionStyle,
-  // whiteListOperationIconStyle,
-  whiteListTitleStyle,
-} from "./style"
-
-interface IWhiteList {
-  onCopyIpReport?: () => void
-}
-
-export const WhiteList: FC<IWhiteList> = (props) => {
-  const { t } = useTranslation();
-  return (
-    <div>
-      <div css={whiteListContentContainerStyle}>
-        <div css={whiteListContentStyle}>
-          <div css={whiteListTitleStyle}>
-            {t("editor.action.resource.tip.allowlist.title")}
-          </div>
-          <div css={whiteListDescriptionStyle}>
-            {t("editor.action.resource.tip.allowlist.message")}
-          </div>
-        </div>
-    
-      </div>
-    </div>
-  )
-}
-WhiteList.displayName = "WhiteList"

package/page/App/components/PublicTypes/ResourceGenerator/components/RowWhiteList/style.ts

@@ -1,81 +0,0 @@
-import { globalColor } from "@/utils/colorBuilder"
-import { css } from "@emotion/react"
-
-
-export const ipListContainerStyle = css`
-  padding: 8px 0;
-`
-
-export const ipListStyle = css`
-  color: ${globalColor("grayBlue-02")};
-  font-size: 14px;
-`
-
-export const whiteListContentContainerStyle = css`
-  width: 100%;
-  padding-top: 16px;
-  display: flex;
-  height: 82px;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 8px;
-`
-
-export const whiteListContentStyle = css`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  flex-grow: 1;
-  gap: 4px;
-`
-
-export const whiteListTitleStyle = css`
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 22px;
-  color: ${globalColor("grayBlue-02")};
-  height: 22px;
-`
-export const whiteListDescriptionStyle = css`
-  height: 40px;
-  font-size: 12px;
-  line-height: 20px;
-  color: ${globalColor("grayBlue-04")};
-`
-
-export const whiteListButtonContainerStyle = css`
-  width: 120px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 32px;
-`
-export const whiteListOperationIconStyle = css`
-  width: 12px;
-  height: 12px;
-  cursor: pointer;
-  display: flex;
-  color: ${globalColor("grayBlue-04")};
-  & > svg {
-    width: 12px;
-    height: 12px;
-  }
-`
-
-export const whiteListButtonStyle = css`
-  border-radius: 4px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: 6px 16px;
-  gap: 8px;
-  width: 100px;
-  height: 32px;
-  cursor: pointer;
-  font-size: 12px;
-  background: ${globalColor("grayBlue-09")};
-  & > span {
-    line-height: 20px;
-    color: ${globalColor("grayBlue-02")};
-  }
-`

package/page/App/components/PublicTypes/ResourceGenerator/components/TipPanel/index.tsx

@@ -1,14 +0,0 @@
-import { FC } from "react"
-import { TipPanelProps } from "./interface"
-import { 
-  // linkContainerStyle,
-   tipsPanelContainerStyle } from "./style"
-
-export const TipPanel: FC<TipPanelProps> = (props) => {
-  // const { t } = useTranslation()
-  return (
-    <div css={tipsPanelContainerStyle}>
-
-    </div>
-  )
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/TipPanel/interface.ts

@@ -1,3 +0,0 @@
-export interface TipPanelProps {
-  resourceType?: string
-}

package/page/App/components/PublicTypes/ResourceGenerator/components/TipPanel/style.ts

@@ -1,13 +0,0 @@
-import { css } from "@emotion/react"
-
-export const tipsPanelContainerStyle = css`
-  display: flex;
-  padding: 8px 0px;
-  flex-direction: column;
-  gap: 16px;
-  width: 364px;
-`
-
-export const linkContainerStyle = css`
-  display: block;
-`

package/page/App/components/PublicTypes/ResourceGenerator/config.ts

@@ -1,51 +0,0 @@
-
-import i18next from "i18next"
-import { ResourceType } from "../resource"
-
-export const ACTION_MODAL_WIDTH = 1080
-
-export interface ResourceItem {
-  resourceType: ResourceType
-  hidden?: boolean
-}
-
-export const Databases: ResourceItem[] = [
-  {
-    resourceType: "impaktapps",
-    hidden: false,
-  },
-]
-
-export const Apis: ResourceItem[] = [
-  {
-    resourceType: "restapi",
-    hidden: false,
-  },
- 
-]
-
-export const ResourceTypeList = [
-  {
-    title: i18next.t("editor.action.type.database"),
-    item: Databases,
-    category: "databases" as const,
-  },
-  {
-    title: i18next.t("editor.action.type.api"),
-    item: Apis,
-    category: "apis" as const,
-  },
-  {
-    title: i18next.t("editor.action.form.title.feedback"),
-    item: [],
-    category: "notFind" as const,
-  },
-]
-
-export const WHITE_LIST_IP = [
-  "143.198.75.2",
-  "146.190.51.14",
-  "146.190.35.24",
-  "64.23.134.60",
-  "146.190.59.192",
-]