impaktapps-ui-builder 0.0.382460 → 1.0.0

package/page/App/components/Actions/ActionPanel/utils/safeModeTip.ts

@@ -0,0 +1,18 @@
+const SAFE_MODE_ACTION_TYPE = [
+  "clickhouse",
+  "supabasedb",
+  "mysql",
+  "tidb",
+  "mariadb",
+  "postgresql",
+  "snowflake",
+  "neon",
+  "hydra",
+  "mssql",
+  "oracle",
+  "oracle9i",
+]
+
+export const isSafeModeAction = (actionType: string) => {
+  return SAFE_MODE_ACTION_TYPE.includes(actionType)
+}

package/page/App/components/Actions/Context/SqlModeTipContext/index.tsx

@@ -0,0 +1,31 @@
+import { FC, ReactNode, createContext, useCallback, useState } from "react"
+
+type ActionShowSQLMode = Record<string, boolean>
+
+interface Injected {
+  showSQLModeTip: ActionShowSQLMode
+  setShowSQLModeTip: (actionID: string, show: boolean) => void
+}
+
+export const SQLModeTipContext = createContext<Injected>({} as Injected)
+export const SQLModeTipProvider: FC<{ children: ReactNode }> = ({
+  children,
+}) => {
+  const [showSQLModeTip, setShowSQLModeTip] = useState({})
+
+  const handleSetSQModeTip = useCallback((actionID: string, show: boolean) => {
+    setShowSQLModeTip((prev) => {
+      return {
+        ...prev,
+        [actionID]: show,
+      }
+    })
+  }, [])
+  return (
+    <SQLModeTipContext.Provider
+      value={{ showSQLModeTip, setShowSQLModeTip: handleSetSQModeTip }}
+    >
+      {children}
+    </SQLModeTipContext.Provider>
+  )
+}

package/page/App/components/Actions/DragBar/index.tsx

@@ -0,0 +1,87 @@
+import React, { FC, RefObject, useEffect, useState } from "react"
+import { actionEditorDragBarStyle } from "./style"
+import { DragBarProps } from "./interface"
+import { isNumber } from "util"
+
+const handleResize = (
+  resizeRef: RefObject<HTMLDivElement>,
+  movementY: number,
+  minHeight: number,
+  getMaxHeight?: () => number | undefined,
+  placeholderRef?: RefObject<HTMLDivElement>,
+  callback?: () => void,
+) => {
+  const resize = resizeRef?.current
+  const placeholder = placeholderRef?.current
+  if (!resize) return
+
+  const { height } = resize.getBoundingClientRect()
+  const updatedHeight = height - movementY
+
+  if (getMaxHeight) {
+    const maxHeight = getMaxHeight()
+    if (isNumber(maxHeight) && updatedHeight > maxHeight) return
+  }
+
+  if (updatedHeight < window.innerHeight && updatedHeight > minHeight) {
+    resize.style.height = `${updatedHeight}px`
+    if (placeholder) {
+      placeholder.style.paddingBottom = `${updatedHeight + 48}px`
+    }
+    callback?.()
+  }
+}
+
+export const DragBar: FC<DragBarProps> = (props) => {
+  const {
+    resizeRef,
+    placeholderRef,
+    minHeight = 300,
+    getMaxHeight,
+    onChange,
+  } = props
+  const [mouseDown, setMouseDown] = useState(false)
+
+  useEffect(() => {
+    const handleMouseMove = (e: MouseEvent) => {
+      e.preventDefault()
+      handleResize(
+        resizeRef,
+        e.movementY,
+        minHeight,
+        getMaxHeight,
+        placeholderRef,
+        () => {
+          onChange?.()
+        },
+      )
+    }
+    if (mouseDown) {
+      window.addEventListener("mousemove", handleMouseMove)
+    }
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+    }
+  }, [getMaxHeight, minHeight, mouseDown, onChange, placeholderRef, resizeRef])
+
+  useEffect(() => {
+    const handleMouseUp = () => setMouseDown(false)
+    window.addEventListener("mouseup", handleMouseUp)
+
+    return () => {
+      window.removeEventListener("mouseup", handleMouseUp)
+    }
+  }, [getMaxHeight, minHeight])
+
+  return (
+    <div
+      css={actionEditorDragBarStyle}
+      onMouseDown={() => {
+        setMouseDown(true)
+      }}
+    />
+  )
+}
+
+DragBar.displayName = "DragBar"

package/page/App/components/Actions/DragBar/interface.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, RefObject } from "react"
+
+export interface DragBarProps extends HTMLAttributes<HTMLDivElement> {
+  resizeRef: RefObject<HTMLDivElement>
+  placeholderRef?: RefObject<HTMLDivElement>
+  minHeight?: number
+  getMaxHeight?: () => number | undefined
+  setContainerDimensions?: (height: number) => void
+  onChange?: () => void
+}

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

@@ -0,0 +1,17 @@
+import { globalColor } from "@/utils/colorBuilder"
+import { css } from "@emotion/react"
+
+
+export const actionEditorDragBarStyle = css`
+  top: -5px;
+  cursor: row-resize;
+  width: 100%;
+  position: absolute;
+  transition: all 0.2s;
+  height: 5px;
+  z-index: 10;
+
+  &:hover {
+    background: ${globalColor(`grayBlue-08`)};
+  }
+`

package/page/App/components/Actions/List/index.ts

@@ -0,0 +1,4 @@
+export * from "./list"
+export * from "./list-item"
+export * from "./list-item-meta"
+export * from "./interface"

package/page/App/components/Actions/List/interface.ts

@@ -0,0 +1,46 @@
+import { BoxProps } from "@/widgetLibrary/ButtonWidget/interface"
+import { HTMLAttributes, ReactNode, UIEventHandler } from "react"
+
+
+export type ListSize = "small" | "medium" | "large"
+
+export interface ListProps<T>
+  extends Omit<HTMLAttributes<HTMLDivElement>, "onScroll">,
+    BoxProps {
+  data?: T[]
+  size?: ListSize
+  bordered?: boolean
+  split?: boolean
+  height?: number
+  hoverable?: boolean
+  renderRaw?: boolean
+  header?: ReactNode | string
+  footer?: ReactNode | string
+  render?: (data: T, index: number) => ReactNode
+  renderKey?: (data: T, index: number) => string
+  bottomOffset?: number
+  topOffset?: number
+  onReachBottom?: () => void
+  onReachTop?: () => void
+  hasMore?: boolean
+  loader?: ReactNode
+  endMessage?: ReactNode
+  onScroll?: UIEventHandler<HTMLElement>
+  itemHeight?: number
+}
+
+export interface ListItemProps
+  extends HTMLAttributes<HTMLDivElement>,
+    BoxProps {
+  actions?: ReactNode
+  extra?: ReactNode
+  size?: ListSize
+}
+
+export interface ListItemMetaProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, "title">,
+    BoxProps {
+  title?: string | ReactNode
+  avatar?: string
+  description?: string
+}

package/page/App/components/Actions/List/list-item-meta.tsx

@@ -0,0 +1,59 @@
+import { forwardRef } from "react";
+import { ListItemMetaProps } from "./interface";
+import {
+  applyItemMetaAvatar,
+  applyItemMetaContainer,
+  applyListItemMetaTitleStyle,
+  applyTypoStyle,
+} from "./style";
+import { applyBoxStyle, deleteCssProps } from "@/utils/model/src";
+import { Avatar, Typography, useTheme } from "@mui/material";
+import { globalColor } from "@/utils/colorBuilder";
+
+export const ListItemMeta = forwardRef<HTMLDivElement, ListItemMetaProps>(
+  (props, ref) => {
+    const { title, avatar, description, ...otherProps } = props;
+    const theme = useTheme();
+    return (
+      <div
+        css={[applyItemMetaContainer(), applyBoxStyle(props, theme)]}
+        ref={ref}
+        {...deleteCssProps(otherProps)}
+      >
+        {avatar && (
+          <Avatar
+            css={applyItemMetaAvatar}
+            // size="medium"
+            // shape="square"
+            src={avatar}
+          />
+        )}
+        <Typography css={applyTypoStyle}>
+          {title && typeof title === "string" ? (
+            // <Text fs="14px" fw="500" colorScheme="gray">
+            <div>{title}</div>
+          ) : (
+            // </Text>
+            <div css={applyListItemMetaTitleStyle}>{title}</div>
+          )}
+          {title && description && <div style={{ height: "4px" }} />}
+          {description && (
+            <div
+              // fs="14px"
+              style={{
+                color:
+                  title == undefined
+                    ? globalColor(`grayBlue-02`)
+                    : globalColor(`grayBlue-04`),
+              }}
+            >
+              {description}
+            </div>
+          )}
+        </Typography>
+      </div>
+    );
+  }
+);
+
+ListItemMeta.displayName = "ListItemMeta";

package/page/App/components/Actions/List/list-item.tsx

@@ -0,0 +1,34 @@
+import { forwardRef } from "react"
+import { css } from "@emotion/react"
+import { ListItemProps } from "./interface"
+import {
+  applyListItemActionsStyle,
+  applyListItemContainer,
+  applyListItemExtraStyle,
+  applyListItemInner,
+} from "./style"
+import { applyBoxStyle, deleteCssProps } from "@/utils/model/src"
+import { useTheme } from "@mui/material"
+
+
+export const ListItem = forwardRef<HTMLDivElement, ListItemProps>(
+  (props, ref) => {
+    const { actions, extra, size = "medium", ...otherProps } = props
+    const theme = useTheme()
+    return (
+      <div
+        css={css(applyListItemContainer(size), applyBoxStyle(props,theme))}
+        ref={ref}
+        {...deleteCssProps(otherProps)}
+      >
+        <div css={applyListItemInner}>
+          {props.children}
+          {actions && <div css={applyListItemActionsStyle}>{actions}</div>}
+        </div>
+        {extra && <div css={applyListItemExtraStyle}>{extra}</div>}
+      </div>
+    )
+  },
+)
+
+ListItem.displayName = "ListItem"

package/page/App/components/Actions/List/list.tsx

@@ -0,0 +1,144 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { forwardRef, ReactNode } from "react";
+import { ListProps } from "./interface";
+import { applyBarStyle, applyListContainer, applyListItemOuter } from "./style";
+
+import VirtualList from "rc-virtual-list";
+import { css } from "@emotion/react";
+import { applyBoxStyle, deleteCssProps } from "@/utils/model/src";
+import Typography from "@mui/material/Typography";
+import { Divider, useTheme } from "@mui/material";
+
+export const List = forwardRef<HTMLDivElement, ListProps<any>>((props, ref) => {
+  const {
+    data,
+    size = "medium",
+    bordered = true,
+    split = true,
+    hoverable,
+    header,
+    footer,
+    height,
+    render,
+    renderRaw,
+    renderKey,
+    bottomOffset = 0,
+    topOffset = 0,
+    onReachBottom,
+    onReachTop,
+    hasMore,
+    loader,
+    endMessage,
+    itemHeight,
+    onScroll,
+    ...otherProps
+  } = props;
+const theme = useTheme()
+  return (
+    <div
+      css={css(applyListContainer(bordered), applyBoxStyle(props,theme))}
+      ref={ref}
+      {...deleteCssProps(otherProps)}
+    >
+      {header && (
+        <>
+          {typeof header == "string" ? (
+            <div css={applyBarStyle(size)}>
+              <Typography>
+                <div style={{ color: theme.palette.text.secondary, fontWeight: "bold" }}>
+                  {header}
+                </div>
+              </Typography>
+            </div>
+          ) : (
+            <div css={applyBarStyle(size)}>{header}</div>
+          )}
+          <Divider />
+        </>
+      )}
+      {data && render && renderKey && (
+        <VirtualList
+          height={height}
+          data={data}
+          virtual={height != undefined && itemHeight != undefined}
+          fullHeight={height === undefined}
+          itemKey={(item) => {
+            return renderKey(item, data.indexOf(item));
+          }}
+          itemHeight={itemHeight}
+          onScroll={(e) => {
+            if (onScroll != undefined) {
+              onScroll(e);
+            }
+            if (
+              onReachBottom != undefined &&
+              e.currentTarget.scrollHeight -
+                (e.currentTarget.scrollTop + e.currentTarget.clientHeight) <=
+                bottomOffset
+            ) {
+              onReachBottom();
+            }
+            if (
+              onReachTop != undefined &&
+              e.currentTarget.scrollTop <= topOffset
+            ) {
+              onReachTop();
+            }
+          }}
+        >
+          {(item): ReactNode => {
+            let endNode: ReactNode;
+            if (data.indexOf(item) != data.length - 1) {
+              if (split) {
+                endNode = <Divider />;
+              }
+            } else {
+              if (hasMore != undefined) {
+                if (hasMore) {
+                  endNode = loader;
+                } else {
+                  endNode = endMessage;
+                }
+              }
+            }
+            if (renderRaw) {
+              return (
+                <>
+                  {render(item, data.indexOf(item))}
+                  {endNode}
+                </>
+              );
+            } else {
+              return (
+                <>
+                  <div css={applyListItemOuter(hoverable)}>
+                    {render(item, data.indexOf(item))}
+                  </div>
+                  {endNode}
+                </>
+              );
+            }
+          }}
+        </VirtualList>
+      )}
+      {footer && (
+        <>
+          <Divider />
+          {typeof footer == "string" ? (
+            <div css={applyBarStyle(size)}>
+              <Typography>
+                <div style={{ color:theme.palette.text.secondary, fontWeight: "bold" }}>
+                  {footer}{" "}
+                </div>
+              </Typography>
+            </div>
+          ) : (
+            <div css={applyBarStyle(size)}>{footer}</div>
+          )}
+        </>
+      )}
+    </div>
+  );
+});
+
+List.displayName = "List";

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

@@ -0,0 +1,119 @@
+import { css, SerializedStyles } from "@emotion/react"
+
+import { ListSize } from "./interface"
+import { globalColor } from "@/utils/colorBuilder"
+
+export function applyListContainer(bordered?: boolean): SerializedStyles {
+  let containerCss = css`
+    display: inline-flex;
+    flex-direction: column;
+  `
+  if (bordered) {
+    containerCss = css`
+      ${containerCss};
+      border: solid 1px ${globalColor(`grayBlue-09`)};
+      border-radius: 2px;
+    `
+  }
+  return containerCss
+}
+
+export function applyListItemOuter(hoverable?: boolean): SerializedStyles {
+  let hoverableCss: SerializedStyles = css``
+  if (hoverable) {
+    hoverableCss = css`
+      &:hover {
+        background-color: ${globalColor(`grayBlue-09`)};
+      }
+    `
+  }
+  return css`
+    ${hoverableCss};
+  `
+}
+
+export function applyListItemContainer(size: ListSize): SerializedStyles {
+  let sizeCss: SerializedStyles
+  switch (size) {
+    case "small":
+      sizeCss = css`
+        padding: 8px 16px;
+      `
+      break
+    case "medium":
+      sizeCss = css`
+        padding: 12px 16px;
+      `
+      break
+    case "large":
+      sizeCss = css`
+        padding: 16px 16px;
+      `
+      break
+  }
+  return css`
+    display: flex;
+    flex-direction: row;
+    ${sizeCss};
+  `
+}
+
+export const applyListItemInner = css`
+  display: inline-flex;
+  flex-direction: column;
+  flex-grow: 1;
+`
+
+export function applyItemMetaContainer(): SerializedStyles {
+  return css`
+    display: inline-flex;
+    align-items: start;
+    flex-direction: row;
+  `
+}
+
+export const applyItemMetaAvatar = css`
+  margin-right: 8px;
+`
+
+export const applyTypoStyle = css`
+  align-self: center;
+`
+
+export const applyListItemActionsStyle = css`
+  margin-top: 8px;
+`
+
+export const applyListItemExtraStyle = css`
+  display: flex;
+  align-items: center;
+  margin-left: 32px;
+`
+
+export function applyBarStyle(size: ListSize) {
+  let sizeCss: SerializedStyles
+  switch (size) {
+    case "small":
+      sizeCss = css`
+        padding: 8px 16px;
+      `
+      break
+    case "medium":
+      sizeCss = css`
+        padding: 12px 16px;
+      `
+      break
+    case "large":
+      sizeCss = css`
+        padding: 16px 16px;
+      `
+      break
+  }
+  return css`
+    ${sizeCss};
+  `
+}
+
+export const applyListItemMetaTitleStyle = css`
+  display: inline-flex;
+`

package/page/App/components/Actions/SearchHeader/index.tsx

@@ -0,0 +1,84 @@
+import { css } from "@emotion/react";
+import { AnimatePresence, motion } from "framer-motion";
+import { Dispatch, FC, SetStateAction, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { SearchHeaderProps } from "./interface";
+import {
+  actionListHeaderContainerStyle,
+  actionTitleStyle,
+  searchHeaderStyle,
+  searchInputContainerStyle,
+  searchInputStyle,
+} from "./style";
+import SearchIcon from "@mui/icons-material/Search";
+import { Button, Input, useTheme } from "@mui/material";
+
+interface SearchInputProps {
+  onSearch: (value: string) => void;
+  setInSearchState: Dispatch<SetStateAction<boolean>>;
+}
+
+const SearchInput: FC<SearchInputProps> = (props) => {
+  const { t } = useTranslation();
+  const { onSearch, setInSearchState } = props;
+
+  return (
+    <div css={css(searchHeaderStyle, searchInputContainerStyle)}>
+      <motion.div
+        initial={{ width: 0, opacity: 0 }}
+        animate={{ width: "100%", opacity: 1 }}
+        exit={{ width: 0, opacity: 0 }}
+        transition={{ duration: 0.2 }}
+      >
+        <Input
+          placeholder={t("editor.action.action_list.placeholder.search")}
+          onChange={(e) => {
+            return onSearch(e.target.value);
+          }}
+          css={searchInputStyle}
+        />
+      </motion.div>
+
+      <motion.div
+        initial={{ opacity: 0 }}
+        animate={{ opacity: 1 }}
+        exit={{ opacity: 0 }}
+        transition={{ duration: 0.2 }}
+      >
+        <Button
+          onClick={() => {
+            setInSearchState(false);
+            onSearch("");
+          }}
+          variant="text"
+          size="small"
+        >
+          {t("editor.action.action_list.btn.close")}
+        </Button>
+      </motion.div>
+    </div>
+  );
+};
+
+export const SearchHeader: FC<SearchHeaderProps> = (props) => {
+  const { onSearch, title } = props;
+  const [inSearchState, setInSearchState] = useState(false);
+const theme = useTheme()
+  const { t } = useTranslation();
+  return (
+    <AnimatePresence>
+      {inSearchState ? (
+        <SearchInput setInSearchState={setInSearchState} onSearch={onSearch} />
+      ) : (
+        <div css={actionListHeaderContainerStyle}>
+          <h3 css={actionTitleStyle(theme)}>
+            {title || t("editor.action.action_list.title")}
+          </h3>
+          <SearchIcon color="primary" onClick={() => setInSearchState(true)} />
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
+
+SearchHeader.displayName = "SearchHeader";

package/page/App/components/Actions/SearchHeader/interface.tsx

@@ -0,0 +1,4 @@
+export interface SearchHeaderProps {
+  onSearch: (value: string) => void,
+  title?:string
+}