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

package/utils/Notification/notification.tsx

@@ -1,160 +0,0 @@
-import {
-  forwardRef,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-} from "react";
-import { NotificationProps } from "./interface";
-import { motion } from "framer-motion";
-import { notificationStore } from "./notification-store";
-import {
-  applyContentStyle,
-  applyContentWrapperStyle,
-  applyNotification,
-  applyNotificationAction,
-  applyNotificationCloseBtn,
-  // applyNotificationContentStyle,
-  applyNotificationSlide,
-  applyNotificationTitle,
-} from "./style";
-import CloseIcon from "@mui/icons-material/Close";
-import ErrorCircleIcon from "@mui/icons-material/ErrorOutline";
-import InfoCircleIcon from "@mui/icons-material/Info";
-import SuccessCircleIcon from "@mui/icons-material/CheckCircleOutline";
-import WarningCircleIcon from "@mui/icons-material/Warning";
-import { globalColor } from "../colorBuilder";
-import { applyBoxStyle } from "../DropDown/style";
-import { useTheme } from "@mui/material";
-
-export const Notification = forwardRef<HTMLDivElement, NotificationProps>(
-  (props, ref) => {
-    const {
-      type,
-      action,
-      // closable,
-      showIcon = true,
-      // duration,
-      id = "",
-      position = "topRight",
-      icon,
-      // content,
-      title,
-      onClose,
-    } = props;
-    const duration = 1200;
-    const handlerId = useRef<number | undefined>();
-const theme = useTheme()
-    const delayClose = useCallback(() => {
-      let timeId: number | undefined;
-      if (duration) {
-        timeId = window.setTimeout(() => {
-          notificationStore.remove(id);
-          onClose?.();
-        }, duration);
-      } else {
-        timeId = window.setTimeout(() => {
-          notificationStore.remove(id);
-          onClose?.();
-          handlerId.current = undefined;
-        }, notificationStore.getConfig()?.duration ?? 3000);
-      }
-      handlerId.current = timeId;
-    }, [duration, id, onClose]);
-
-    useEffect(() => {
-      delayClose();
-      return () => {
-        if (handlerId.current) {
-          clearTimeout(handlerId.current);
-          handlerId.current = undefined;
-        }
-      };
-    }, [delayClose]);
-
-    const normalIcon: ReactNode = useMemo(() => {
-      if (showIcon) {
-        if (icon) {
-          return icon;
-        } else {
-          switch (type) {
-            case "info":
-              return <InfoCircleIcon sx={{ color: globalColor("blue-03") }} />;
-            case "error":
-              return <ErrorCircleIcon sx={{ color: globalColor("red-03") }} />;
-            case "success":
-              return (
-                <SuccessCircleIcon sx={{ color: globalColor("green-03") }} />
-              );
-            case "warning":
-              return (
-                <WarningCircleIcon sx={{ color: globalColor("orange-03") }} />
-              );
-            case "normal":
-            default:
-              return <></>;
-          }
-        }
-      } else {
-        return <></>;
-      }
-    }, [showIcon, icon, type]);
-
-    return (
-      <motion.div
-        ref={ref}
-        css={[
-          applyNotification(
-            // closable
-            true
-          ),
-          applyBoxStyle(props,theme),
-        ]}
-        layout
-        initial="initial"
-        animate="animate"
-        exit="exit"
-        variants={applyNotificationSlide(position)}
-        onMouseEnter={() => {
-          if (handlerId.current) {
-            clearTimeout(handlerId.current);
-            handlerId.current = undefined;
-          }
-        }}
-        onMouseLeave={() => {
-          delayClose();
-        }}
-      >
-        <div css={applyContentWrapperStyle}>
-          <div className="icon-container">{normalIcon}</div>
-          <div css={applyContentStyle(showIcon)}>
-            {title && <div css={applyNotificationTitle}>{title}</div>}
-            {/* {content && (
-              <div css={applyNotificationContentStyle}>{content}</div>
-            )} */}
-          </div>
-        </div>
-        {action && <div css={applyNotificationAction}>{action}</div>}
-        {/* {closable && ( */}
-        <div
-          css={applyNotificationCloseBtn}
-          onClick={() => {
-            onClose?.();
-          }}
-        >
-          <CloseIcon
-            sx={{ fontSize: "14px" }}
-            onClick={() => {
-              onClose?.();
-            }}
-            color="error"
-          />
-        </div>
-        {/* )} */}
-      </motion.div>
-    );
-  }
-);
-
-Notification.displayName = "Notice";

package/utils/Notification/style.ts

@@ -1,144 +0,0 @@
-import { css, SerializedStyles } from "@emotion/react";
-import { Variants } from "framer-motion"
-import { NotificationPosition } from "./interface"
-import { globalColor } from "../colorBuilder"
-// ${closable ? "40px" : "16px"} 16px  16px16px 16px;
-export function applyNotification(closable?: boolean): SerializedStyles {
-  return css`
-    position: relative;
-    pointer-events: visible;
-    padding: 8px;
-    
-    margin-bottom: 20px;
-    width: 220px;
-    display: flex;
-    box-sizing: border-box;
-    box-shadow: 0 4px 10px 0 ${globalColor(`blackAlpha-07`)};
-    border-radius: 8px;
-    border: 1px solid ${globalColor(`grayBlue-08`)};
-    background-color: ${globalColor(`white-01`)};
-    flex-direction: column;
-  `
-}
-
-export const applyNotificationContentWrapper = css`
-  flex: 1;
-  word-break: break-all;
-`
-
-export const applyNotificationTitle = css`
-  font-size: 12px;
-  font-weight: 500;
-  color: ${globalColor(`grayBlue-02`)};
-  margin-top:3px;
-  margin-bottom: 4px;
-`
-
-export const applyNotificationContentStyle = css`
-  font-size: 10px;
-  color: ${globalColor(`grayBlue-04`)};
-`
-
-export const applyNotificationCloseBtn = css`
-  position: absolute;
-  right: 4px;
-  top: 8px;
-  font-size: 8px;
-  line-height: 0;
-  color: red;
-  cursor: pointer;
-  width: 24px;
-  height: 24px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`
-
-export const applyNotificationAction = css`
-  text-align: right;
-  margin-top: 16px;
-`
-
-export function applyNotificationSlide(
-  position: NotificationPosition,
-): Variants {
-  const originX =
-    position === "topLeft" || position === "bottomLeft" ? "-100%" : "100%"
-  return {
-    initial: {
-      x: `${originX}`,
-    },
-    animate: {
-      opacity: 1,
-      x: 0,
-    },
-    exit: {
-      opacity: 0,
-      transition: {
-        opacity: { duration: 0.2, ease: "linear" },
-      },
-    },
-  }
-}
-
-export const applyContentWrapperStyle = css`
-  display: flex;
-  flex-direction: row;
-`
-
-export function applyContentStyle(showIcon: boolean) {
-  return css`
-    flex: 1;
-    word-break: break-word;
-    margin-left: ${showIcon ? "8px" : "0"};
-  `
-}
-
-export const applyNotificationLeftStyle = css`
-  padding-right: 8px;
-`
-
-export function applyNotificationContainerStyle(
-  position: NotificationPosition,
-): SerializedStyles {
-  let positionStyle = css``
-  switch (position) {
-    case "topLeft":
-      positionStyle = css`
-        top: 20px;
-        left: 20px;
-        align-items: start;
-      `
-      break
-    case "topRight":
-      positionStyle = css`
-        top: 20px;
-        right: 20px;
-        align-items: end;
-      `
-      break
-    case "bottomLeft":
-      positionStyle = css`
-        bottom: 0;
-        left: 20px;
-        align-items: start;
-      `
-      break
-    case "bottomRight":
-      positionStyle = css`
-        bottom: 0;
-        right: 20px;
-        align-items: end;
-      `
-      break
-  }
-
-  return css`
-    display: inline-flex;
-    pointer-events: none;
-    z-index: ${400};
-    position: fixed;
-    flex-direction: column;
-    ${positionStyle};
-  `
-}

package/utils/Table/filterFn.ts

@@ -1,21 +0,0 @@
-import { FilterOptionsMap } from "./utils"
-import { CustomFilterFn, FilterOptions } from "./interface"
-import { isObject } from "@/redux/utils"
-import { isString } from "lodash-es"
-
-
-export function isTableFilterFn(value: string): value is CustomFilterFn {
-  return value in FilterOptionsMap
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function isFilterOption(option: any): option is FilterOptions {
-  return (
-    isObject(option) &&
-    "id" in option &&
-    isString(option.id) &&
-    "filterFn" in option &&
-    isTableFilterFn(option.filterFn as string) &&
-    "value" in option
-  )
-}

package/utils/Table/filters-editor.tsx

@@ -1,163 +0,0 @@
-import { FC, useMemo } from "react";
-import { FilterFn, FilterOperator, FiltersEditorProps } from "./interface";
-import {
-  editorButtonStyle,
-  editorStyle,
-  filterLabelStyle,
-  filterStyle,
-} from "./style";
-import { FilterOperatorOptions, FilterOptions } from "./utils";
-import Select from "@mui/material/Select";
-import { Button, MenuItem, TextField } from "@mui/material";
-import { isString } from "lodash-es";
-import DeleteIcon from "@mui/icons-material/Delete";
-import AddIcon from "@mui/icons-material/Add";
-import { globalColor } from "../colorBuilder";
-export const FiltersEditor: FC<FiltersEditorProps> = (props) => {
-  const {
-    filterOperator,
-    columnFilters,
-    columnsOption,
-    onDelete,
-    onAdd,
-    onChange,
-    onChangeOperator,
-    colorScheme,
-  } = props;
-
-  const recordList = useMemo(() => {
-    return (
-      <>
-        {columnFilters.map((filter, index) => {
-          const { id, value, filterFn } = filter;
-          return (
-            <div css={filterStyle} key={index}>
-              <div css={filterLabelStyle}>
-                {index === 0 ? (
-                  "Where"
-                ) : index === 1 ? (
-                  <Select
-                    sx={{
-                      width: "86px",
-                      marginRight: "12px",
-                      color: colorScheme,
-                    }}
-                    size="small"
-                    value={filterOperator}
-                    onChange={(e) => {
-                      onChangeOperator(e.target.value as FilterOperator);
-                    }}
-                  >
-                    {FilterOperatorOptions?.map((e) => {
-                      return (
-                        <MenuItem key={e.value} value={e.value}>
-                          {e.label}
-                        </MenuItem>
-                      );
-                    })}
-                  </Select>
-                ) : (
-                  filterOperator
-                )}
-              </div>
-              <Select
-                sx={{
-                  width: "200px",
-                  marginRight: "12px",
-                  color: colorScheme,
-                }}
-                size="small"
-                value={id}
-                onChange={(e) => {
-                  onChange(index, { ...filter, id: e.target.value as string });
-                }}
-              >
-                {columnsOption?.map((e) => {
-                  return (
-                    <MenuItem key={e.value} value={e.value}>
-                      {e.label}
-                    </MenuItem>
-                  );
-                })}
-              </Select>
-              <Select
-                sx={{
-                  width: "200px",
-                  color: colorScheme,
-                }}
-                size="small"
-                value={filterFn as string}
-                onChange={(e) => {
-                  if (e.target.value != null) {
-                    const option = e.target.value as FilterFn;
-                    onChange(index, {
-                      ...filter,
-                      filterFn: option,
-                    });
-                  }
-                }}
-              >
-                {FilterOptions?.map((e) => {
-                  return (
-                    <MenuItem key={e.value} value={e.value}>
-                      {e.label}
-                    </MenuItem>
-                  );
-                })}
-              </Select>
-              <TextField
-                sx={{ width: "200px", margin: "8px 4px" }}
-                disabled={
-                  (filterFn as string) === "empty" ||
-                  (filterFn as string) === "notEmpty"
-                }
-                size="small"
-                value={isString(value) ? value : undefined}
-                onChange={(e) => {
-                  onChange(index, { ...filter, value: e.target.value });
-                }}
-              />
-
-              <Button
-                variant="text"
-                sx={{ color: "gray" }}
-                onClick={() => {
-                  onDelete(index, filter);
-                }}
-                startIcon={
-                  <DeleteIcon sx={{ color: globalColor(`grayBlue-06`) }} />
-                }
-              />
-            </div>
-          );
-        })}
-      </>
-    );
-  }, [
-    colorScheme,
-    columnFilters,
-    columnsOption,
-    filterOperator,
-    onChange,
-    onChangeOperator,
-    onDelete,
-  ]);
-
-  return (
-    <div css={editorStyle}>
-      {recordList}
-      <span css={editorButtonStyle}>
-        <Button
-          variant="text"
-          sx={{ color: colorScheme, padding: "1px 8px" }}
-          onClick={onAdd}
-          startIcon={<AddIcon sx={{ color: globalColor(`techPurple-03`) }} />}
-        >
-          New
-        </Button>
-      </span>
-    </div>
-  );
-};
-
-FiltersEditor.displayName = "FiltersEditor";

package/utils/Table/index.ts

@@ -1,11 +0,0 @@
-export * from "./table"
-export * from "./interface"
-export * from "./style"
-export * from "./tbody"
-export * from "./td"
-export * from "./tfoot"
-export * from "./th"
-export * from "./thead"
-export * from "./tr"
-export * from "./table-data"
-export * from "./filterFn"