impaktapps-ui-builder 1.0.0 → 1.0.1-alpha.1

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

@@ -1,50 +0,0 @@
-/* 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

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

package/utils/IconHotSpot/index.tsx

@@ -1,36 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

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

package/utils/Link/interface.ts

@@ -1,28 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

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

package/utils/Notification/interface.ts

@@ -1,30 +0,0 @@
-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

@@ -1,111 +0,0 @@
-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

@@ -1,113 +0,0 @@
-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()