impaktapps-ui-builder 0.0.382457 → 1.0.0

package/utils/DropDown/use-merge-value.ts

@@ -0,0 +1,50 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import React, { useState, useEffect, useRef, ComponentState, PropsWithoutRef, } from "react"
+
+
+export function isUndefined(obj: any): obj is undefined {
+  return obj === undefined
+}
+export function usePrevious<T>(value: PropsWithoutRef<T> | ComponentState) {
+  const ref = useRef()
+  useEffect(() => {
+    ref.current = value
+  })
+  return ref.current
+}
+export function useMergeValue<T>(
+  defaultStateValue: T,
+  props?: {
+    defaultValue?: T
+    value?: T
+  },
+): [T, React.Dispatch<React.SetStateAction<T>>, T] {
+  const { defaultValue, value } = props || {}
+  const firstRenderRef = useRef(true)
+  const prevPropsValue = usePrevious(props?.value)
+
+  const [stateValue, setStateValue] = useState<T>(
+    !isUndefined(value)
+      ? value
+      : !isUndefined(defaultValue)
+      ? defaultValue
+      : defaultStateValue,
+  )
+
+  useEffect(() => {
+    if (firstRenderRef.current) {
+      firstRenderRef.current = false
+      return
+    }
+    if (value === undefined && prevPropsValue !== value) {
+      setStateValue(value)
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [value])
+
+  const mergedValue = isUndefined(value) ? stateValue : value
+
+  return [mergedValue, setStateValue, stateValue]
+}

package/utils/DropDown/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

package/utils/IconHotSpot/index.tsx

@@ -0,0 +1,36 @@
+import { ForwardRefRenderFunction, forwardRef } from "react"
+
+import { IconHotSpotProps } from "./interface"
+import { iconHotSpotContainerStyle } from "./style"
+import { globalColor } from "../colorBuilder"
+
+export const IconHotSpot: ForwardRefRenderFunction<
+  HTMLButtonElement,
+  IconHotSpotProps
+> = (props, ref) => {
+  const {
+    children,
+    iconSize = 16,
+    inactiveColor = globalColor("grayBlue-04"),
+    activeColor = globalColor("grayBlue-02"),
+    activeBgColor = globalColor("grayBlue-09"),
+    ...otherProps
+  } = props
+
+  return (
+    <button
+      {...otherProps}
+      css={iconHotSpotContainerStyle(
+        iconSize,
+        activeColor,
+        inactiveColor,
+        activeBgColor,
+      )}
+      ref={ref}
+    >
+      {children}
+    </button>
+  )
+}
+
+export default forwardRef<HTMLButtonElement, IconHotSpotProps>(IconHotSpot)

package/utils/IconHotSpot/interface.ts

@@ -0,0 +1,10 @@
+import { HTMLAttributes, ReactNode } from "react"
+
+export interface IconHotSpotProps extends HTMLAttributes<HTMLButtonElement> {
+  children: ReactNode
+  disabled?: boolean
+  iconSize?: number
+  activeColor?: string
+  activeBgColor?: string
+  inactiveColor?: string
+}

package/utils/IconHotSpot/style.ts

@@ -0,0 +1,29 @@
+import { css } from "@emotion/react"
+
+export const iconHotSpotContainerStyle = (
+  iconSize: number = 16,
+  activeColor: string,
+  inactiveColor: string,
+  activeBgColor: string,
+) => css`
+  padding: 4px;
+  border-radius: 4px;
+  font-size: ${iconSize}px;
+  color: ${inactiveColor};
+  width: ${iconSize + 4 * 2}px;
+  height: ${iconSize + 4 * 2}px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  border: none;
+  background-color: transparent;
+  cursor: pointer;
+  :disabled {
+    cursor: not-allowed;
+  }
+  :hover {
+    color: ${activeColor};
+    background-color: ${activeBgColor};
+  }
+`

package/utils/InspectHelper/selectWidgetHelper.ts

@@ -0,0 +1,25 @@
+import { JSToString, stringToJS } from "@/utils/evaluateDynamicString/utils"
+
+export const realInputValue = (
+  attrValue: string | undefined,
+  widgetDisplayName: string,
+) => {
+  if (attrValue === "" || attrValue == undefined) return ""
+  const value = `${attrValue.substring(
+    `{{${widgetDisplayName}.dataSources.map((item) => ( `.length,
+    attrValue.length - 4,
+  )}`
+
+  return JSToString(value)
+}
+
+export const getNeedComputedValue = (
+  value: string,
+  widgetDisplayName: string,
+) => {
+  const stringToCanEvaluate = stringToJS(value)
+  if (stringToCanEvaluate === "") {
+    return stringToCanEvaluate
+  }
+  return `{{${widgetDisplayName}.dataSources.map((item) => ( ${stringToCanEvaluate}))}}`
+}

package/utils/Link/index.ts

@@ -0,0 +1,2 @@
+export * from "./link"
+export * from "./interface"

package/utils/Link/interface.ts

@@ -0,0 +1,28 @@
+import { AnchorHTMLAttributes, ReactNode } from "react"
+import { BoxProps } from "../trigger/Box"
+
+
+export type LinkColorScheme =
+  | string
+  | "white"
+  | "blackAlpha"
+  | "gray"
+  | "grayBlue"
+  | "red"
+  | "orange"
+  | "yellow"
+  | "green"
+  | "blue"
+  | "cyan"
+  | "purple"
+  | "techPink"
+  | "techPurple"
+
+export interface LinkProps
+  extends AnchorHTMLAttributes<HTMLAnchorElement>,
+    BoxProps {
+  disabled?: boolean
+  icon?: boolean | ReactNode
+  colorScheme?: LinkColorScheme
+  hoverable?: boolean
+}

package/utils/Link/link.tsx

@@ -0,0 +1,38 @@
+import { forwardRef } from "react"
+import { LinkProps } from "./interface"
+import { applyDisable, applyLeftIcon, applyLinkContainer } from "./style"
+import { css } from "@emotion/react"
+import AddIcon from '@mui/icons-material/Add';
+import { applyBoxStyle, deleteCssProps } from "../model/src";
+import { useTheme } from "@mui/material";
+
+export const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  const {
+    disabled,
+    icon,
+    colorScheme = "blue",
+    hoverable = true,
+    ...otherProps
+  } = props
+
+  const leftIcon = typeof icon == "boolean" && icon ? <AddIcon /> : icon
+const theme = useTheme()
+  const finalCss = css`
+    ${applyLinkContainer(colorScheme, hoverable)};
+    ${applyDisable(colorScheme, disabled)};
+  `
+
+  return (
+    <a
+      ref={ref}
+      css={[finalCss, applyBoxStyle(props,theme)]}
+      {...deleteCssProps(otherProps)}
+    >
+      {leftIcon && <span css={applyLeftIcon}>{leftIcon}</span>}
+      {/* <span style={{marginBottom:"30px"}}> */}
+      
+    </a>
+  )
+})
+{/* {props.children}</span> */}
+Link.displayName = "Link"

package/utils/Link/style.ts

@@ -0,0 +1,69 @@
+import { css } from "@emotion/react"
+import { LinkColorScheme } from "./interface"
+import { globalColor } from "../colorBuilder"
+import { getSpecialThemeColor } from "../color-palette"
+
+export const colorSchemes: LinkColorScheme[] = [
+  "white",
+  "blackAlpha",
+  "gray",
+  "grayBlue",
+  "red",
+  "orange",
+  "yellow",
+  "green",
+  "blue",
+  "cyan",
+  "purple",
+  "techPink",
+  "techPurple",
+]
+
+export function applyLinkContainer(
+  colorScheme: LinkColorScheme,
+  hoverable: boolean,
+) {
+  const hoverBgColor =
+    colorScheme == "white"
+      ? globalColor(`white-06`)
+      : globalColor(`grayBlue-09`)
+  let hoverCss
+  if (hoverable) {
+    hoverCss = css`
+      &:hover {
+        background-color: ${hoverBgColor};
+      }
+    `
+  }
+  return css`
+    transition: background-color 200ms ease-in-out;
+    vertical-align: middle;
+    border-radius: 4px;
+    padding: 1px 4px;
+    font-size: 14px;
+    line-height: 22px;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    ${hoverCss};
+  `
+}
+
+export const applyLeftIcon = css`
+  margin-right: 4px;
+  margin-top:10px
+`
+
+export function applyDisable(colorScheme: LinkColorScheme, disabled?: boolean) {
+  const textColor = colorSchemes.includes(colorScheme)
+    ? getSpecialThemeColor(colorScheme)
+    : colorScheme
+  const finalColor = disabled
+    ? globalColor(`${colorScheme}-07`)
+    : textColor
+  const cursor = disabled ? "not-allowed" : "pointer"
+  return css`
+    color: ${finalColor};
+    cursor: ${cursor};
+  `
+}

package/utils/Notification/hook.ts

@@ -0,0 +1,66 @@
+import { v4 } from "uuid"
+import {
+  NotificationGlobalProps,
+  NotificationHandler,
+  notificationStore,
+} from "./notification-store"
+import { NotificationProps } from "./interface"
+
+const showImpl = (notification: NotificationProps) => {
+  if (
+    notificationStore.getNotification().length >
+    (notificationStore.getConfig().maxCount ?? 5)
+  ) {
+    notificationStore.getNotification().shift()
+  }
+  if (!notification.id) {
+    notification.id = v4()
+  }
+  if (!notification.position) {
+    notification.position = "topRight"
+  }
+  if (!notification.type) {
+    notification.type = "normal"
+  }
+  notificationStore.add(notification)
+  return notification.id
+}
+
+const handler = {
+  info: (notification: NotificationProps) => {
+    notification.type = "info"
+    return showImpl(notification)
+  },
+  error: (notification: NotificationProps) => {
+    notification.type = "error"
+    return showImpl(notification)
+  },
+  success: (notification: NotificationProps) => {
+    notification.type = "success"
+    return showImpl(notification)
+  },
+  warning: (notification: NotificationProps) => {
+    notification.type = "warning"
+    return showImpl(notification)
+  },
+  normal: (notification: NotificationProps) => {
+    notification.type = "normal"
+    return showImpl(notification)
+  },
+  show: showImpl,
+  remove: (id: string) => {
+    notificationStore.remove(id)
+  },
+  clear: () => {
+    notificationStore.setNotification([])
+  },
+  config: (notificationGlobalProps: NotificationGlobalProps) => {
+    notificationStore.updateConfig(notificationGlobalProps)
+  },
+} as NotificationHandler
+
+export function useNotification(): NotificationHandler {
+  return handler
+}
+
+export const createNotification = useNotification

package/utils/Notification/index.ts

@@ -0,0 +1,5 @@
+export * from "./interface"
+export * from "./notification"
+export * from "./style"
+export * from "./notification-group"
+export * from "./hook"

package/utils/Notification/interface.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react"
+import { BoxProps } from "../model/src/interface"
+
+
+export type NotificationPosition =
+  | "topLeft"
+  | "topRight"
+  | "bottomLeft"
+  | "bottomRight"
+
+export type NotificationType =
+  | "info"
+  | "error"
+  | "success"
+  | "warning"
+  | "normal"
+
+export interface NotificationProps extends BoxProps {
+  type?: NotificationType
+  action?: ReactNode
+  closable?: boolean
+  showIcon?: boolean
+  duration?: number
+  id?: string
+  position?: NotificationPosition
+  icon?: ReactNode
+  title?: string | ReactNode
+  content?: string | ReactNode
+  onClose?: (id?: string) => void
+}

package/utils/Notification/notification-group.tsx

@@ -0,0 +1,111 @@
+import { FC, useEffect, useMemo, useState } from "react"
+import { AnimatePresence } from "framer-motion"
+import { NotificationProps } from "./interface"
+import { notificationStore } from "./notification-store"
+import { Notification } from "./notification"
+import { applyNotificationContainerStyle } from "./style"
+import { BoxProps, applyBoxStyle } from "../model/src"
+import { useTheme } from "@mui/material"
+
+export const NotificationGroup: FC<BoxProps> = (props) => {
+  const theme = useTheme()
+  const [topLeftNotificationList, setTopLeftNotificationList] = useState<
+    NotificationProps[]
+  >([])
+  const [topRightNotificationList, setTopRightNotificationList] = useState<
+    NotificationProps[]
+  >([])
+  const [bottomLeftNotificationList, setBottomLeftNotificationList] = useState<
+    NotificationProps[]
+  >([])
+  const [bottomRightNotificationList, setBottomRightNotificationList] =
+    useState<NotificationProps[]>([])
+
+  useEffect(() => {
+    const listener = notificationStore.subscribe(() => {
+      setTopLeftNotificationList(
+        notificationStore.getNotification().filter((item) => {
+          return item.position === "topLeft"
+        }),
+      )
+      setTopRightNotificationList(
+        notificationStore.getNotification().filter((item) => {
+          return item.position === "topRight"
+        }),
+      )
+      setBottomLeftNotificationList(
+        notificationStore.getNotification().filter((item) => {
+          return item.position === "bottomLeft"
+        }),
+      )
+      setBottomRightNotificationList(
+        notificationStore.getNotification().filter((item) => {
+          return item.position === "bottomRight"
+        }),
+      )
+    })
+    return () => {
+      notificationStore.unSubscribe(listener.listenerId)
+    }
+  }, [])
+
+  const topLeftNotification = useMemo(() => {
+    return topLeftNotificationList.map((notification) => {
+      return <Notification key={notification.id} {...notification} />
+    })
+  }, [topLeftNotificationList])
+
+  const topRightNotification = useMemo(() => {
+    return topRightNotificationList.map((notification) => {
+      return <Notification key={notification.id} {...notification} />
+    })
+  }, [topRightNotificationList])
+
+  const bottomLeftNotification = useMemo(() => {
+    return bottomLeftNotificationList.map((notification) => {
+      return <Notification key={notification.id} {...notification} />
+    })
+  }, [bottomLeftNotificationList])
+
+  const bottomRightNotification = useMemo(() => {
+    return bottomRightNotificationList.map((notification) => {
+      return <Notification key={notification.id} {...notification} />
+    })
+  }, [bottomRightNotificationList])
+
+  return (
+    <>
+      <div
+        css={[applyNotificationContainerStyle("topLeft"), applyBoxStyle(props,theme)]}
+      >
+        <AnimatePresence>{topLeftNotification}</AnimatePresence>
+      </div>
+      <div
+        css={[
+          applyNotificationContainerStyle("topRight"),
+          applyBoxStyle(props,theme),
+        ]}
+      >
+        <AnimatePresence>{topRightNotification}</AnimatePresence>
+      </div>
+      <div
+        css={[
+          applyNotificationContainerStyle("bottomLeft"),
+          applyBoxStyle(props,theme),
+        ]}
+      >
+        <AnimatePresence>{bottomLeftNotification}</AnimatePresence>
+      </div>
+      <div
+        css={[
+          applyNotificationContainerStyle("bottomRight"),
+          applyBoxStyle(props,theme),
+        ]}
+      >
+        <AnimatePresence>{bottomRightNotification}</AnimatePresence>
+      </div>
+    </>
+  )
+}
+
+NotificationGroup.displayName = "NotificationGroup"

package/utils/Notification/notification-store.ts

@@ -0,0 +1,113 @@
+import { v4 } from "uuid"
+import { NotificationProps } from "./interface"
+
+export interface NotificationGlobalProps {
+  maxCount?: number
+  duration?: number
+}
+
+export interface NotificationHandler {
+  info: (Notification: NotificationProps) => string
+  error: (Notification: NotificationProps) => string
+  success: (Notification: NotificationProps) => string
+  warning: (Notification: NotificationProps) => string
+  normal: (Notification: NotificationProps) => string
+  show: (Notification: NotificationProps) => string
+  remove: (id: string) => void
+  config: (NotificationGlobalProps: NotificationGlobalProps) => void
+  clear: () => void
+}
+
+export interface SubListener {
+  listenerId: string
+  onStoreChange: () => void
+}
+
+export interface NotificationStoreHandler {
+  getNotification: () => NotificationProps[]
+  setNotification: (NotificationList: NotificationProps[]) => void
+  subscribe: (onStoreChange: () => void) => SubListener
+  unSubscribe: (listenerId: string) => void
+  updateConfig: (NotificationGlobalProps: NotificationGlobalProps) => void
+  getConfig: () => NotificationGlobalProps
+  add: (Notification: NotificationProps) => void
+  remove: (NotificationId: string) => void
+}
+
+export interface NotificationStore {
+  maxCount: number
+  duration: number
+  listener: SubListener[]
+  NotificationList: NotificationProps[]
+}
+
+const store = {
+  maxCount: 5,
+  duration: 3000,
+  listener: [],
+  NotificationList: [],
+} as NotificationStore
+
+function createNotificationStore(): NotificationStoreHandler {
+  return {
+    getNotification: () => {
+      return store.NotificationList
+    },
+    setNotification: (NotificationList: NotificationProps[]) => {
+      store.NotificationList = NotificationList
+      store.listener.forEach((listener) => {
+        listener.onStoreChange()
+      })
+    },
+    subscribe: (change) => {
+      const listener = {
+        listenerId: v4(),
+        onStoreChange: change,
+      } as SubListener
+      store.listener.push(listener)
+      listener.onStoreChange()
+      return listener
+    },
+    unSubscribe: (listenerId) => {
+      store.listener.splice(
+        store.listener.findIndex(
+          (listener) => listener.listenerId === listenerId,
+        ),
+        1,
+      )
+    },
+    add: (Notification) => {
+      store.NotificationList.push(Notification)
+      store.listener.forEach((listener) => {
+        listener.onStoreChange()
+      })
+    },
+    updateConfig: (NotificationGlobalProps) => {
+      if (NotificationGlobalProps.duration != undefined) {
+        store.duration = NotificationGlobalProps.duration
+      }
+      if (NotificationGlobalProps.maxCount != undefined) {
+        store.maxCount = NotificationGlobalProps.maxCount
+      }
+    },
+    getConfig: () => {
+      return {
+        maxCount: store.maxCount,
+        duration: store.duration,
+      }
+    },
+    remove: (NotificationId) => {
+      const index = store.NotificationList.findIndex(
+        (Notification) => Notification.id === NotificationId,
+      )
+      if (index != -1) {
+        store.NotificationList.splice(index, 1)
+        store.listener.forEach((listener) => {
+          listener.onStoreChange()
+        })
+      }
+    },
+  } as NotificationStoreHandler
+}
+
+export const notificationStore = createNotificationStore()