@react-fabric/core 1.0.0-beta.9 → 1.0.2

package/src/overlays/message/Message.tsx

@@ -1,107 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import classNames from "classnames";
-import { useCallback, useLayoutEffect, useRef } from "react";
-import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
-import { getBgClass, getColorClass } from "../../utils";
-import classes from "./Message.module.css";
-
-export interface MessageProps extends Omit<IconProps, "iconBg" | "iconColor"> {
-  /**
-   * message title
-   */
-  title?: string;
-  /**
-   * message text
-   */
-  message: string | JSX.Element;
-  /**
-   * theme color
-   */
-  color?: ColorType;
-  /**
-   * extra action button
-   */
-  actions?: Elements<JSX.Element>;
-}
-
-export const Message = ({
-  title,
-  message,
-  color,
-  icon,
-  rtlFlip,
-  actions,
-  // @ts-expect-error internal prop
-  onClose,
-}: MessageProps) => {
-  const elRef = useRef<HTMLDivElement>(null);
-  const handleClose = useCallback(
-    (ret?: AnyObject) => {
-      elRef.current && (elRef.current.dataset.show = "false");
-      setTimeout(() => {
-        onClose(ret);
-      }, 250);
-    },
-    [onClose],
-  );
-  useLayoutEffect(() => {
-    setTimeout(
-      () => elRef.current && (elRef.current.dataset.show = "true"),
-      100,
-    );
-  }, []);
-
-  return (
-    <div
-      className={classNames(
-        classes.message,
-        color ? getBgClass(color + "-300") : "bg-invert",
-        color ? getColorClass(color + "-900") : "text-invert",
-        "flex flex-nowrap gap-1 px-8 relative justify-center max-w-md pointer-events-auto rounded mb-2 select-none",
-      )}
-      ref={elRef}
-    >
-      {icon && <Icon icon={icon} size="md" rtlFlip={rtlFlip} />}
-      {title && <div className="font-medium">{title}</div>}
-      <div className="truncate flex-initial">{message}</div>
-      {actions && (
-        <div
-          className="flex gap-1 flex-nowrap"
-          onClickCapture={(e) => handleClose((e.target as AnyObject).value)}
-        >
-          {actions}
-        </div>
-      )}
-      <div
-        role="none"
-        className="cursor-pointer opacity-65 absolute end-1 hover:opacity-90"
-        onClick={() => handleClose()}
-      >
-        &times;
-      </div>
-    </div>
-  );
-};

package/src/overlays/modal/Modal.tsx

@@ -1,244 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import {
-  FloatingFocusManager,
-  FloatingOverlay,
-  FloatingPortal,
-  useDismiss,
-  useFloating,
-  useInteractions,
-  useRole,
-} from "@floating-ui/react";
-import classNames from "classnames";
-import { useCallback, useEffect } from "react";
-import { Loading } from "../../components/animations/Animations";
-import { Icon } from "../../components/icon/Icon";
-import { Header } from "../../core/headfoot/HeadFoot";
-import { HotKeyWrapper } from "../../hotkeys/HotKeyWrapper";
-import {
-  type AriaProps,
-  type CallbackReturn,
-  type ChildrenProp,
-  type Elements,
-  type IconProps,
-  type TestProps,
-} from "../../types";
-import { CoreIcons } from "../../types/icons";
-import classes from "./Modal.module.css";
-
-export interface ModalProps
-  extends AriaProps,
-    TestProps,
-    IconProps,
-    ChildrenProp {
-  /**
-   * header className
-   */
-  headerClassName?: string;
-  /**
-   * icon className
-   */
-  iconClassName?: string;
-  /**
-   * show loading indicator
-   */
-  loading?: boolean;
-  /**
-   * modal title
-   */
-  title?: JSX.Element | string | false;
-  /**
-   * header actions
-   */
-  actions?: Elements<JSX.Element>;
-  /**
-   * modal size
-   */
-  size?: "sm" | "md" | "lg" | "xl" | "screen";
-  /**
-   * height
-   */
-  height?: string | number;
-  /**
-   * width
-   */
-  width?: string | number;
-  /**
-   * minimum height
-   */
-  minHeight?: string | number;
-  /**
-   * minimum width
-   */
-  minWidth?: string | number;
-  /**
-   * close handler
-   */
-  onClose?: (...args: AnyObject) => void;
-  /**
-   * before close handler, return false to prevent close
-   */
-  onBeforeClose?: (...args: AnyObject) => CallbackReturn;
-}
-
-export const Modal = ({
-  icon,
-  iconBg,
-  iconColor,
-  iconClassName,
-  rtlFlip,
-  title,
-  actions,
-  headerClassName,
-  onClose,
-  onBeforeClose,
-  children,
-  loading,
-  size,
-  width,
-  height,
-  minHeight,
-  minWidth,
-  ...aria
-}: ModalProps) => {
-  const { refs, context } = useFloating({
-    open: true,
-    onOpenChange: () => {
-      handleClose(false);
-    },
-  });
-  const dismiss = useDismiss(context, {
-    outsidePressEvent: "mousedown",
-    escapeKey: true,
-  });
-  const role = useRole(context);
-
-  // Merge all the interactions into prop getters
-  const { getFloatingProps } = useInteractions([dismiss, role]);
-
-  const handleClose = useCallback(
-    (...args: AnyObject) => {
-      void Promise.resolve(onBeforeClose?.(...args)).then((ret) => {
-        if (ret !== false) {
-          refs.floating.current &&
-            (refs.floating.current.dataset.show = "false");
-          setTimeout(() => {
-            onClose?.(...args);
-          }, 250);
-        }
-        ret === false &&
-          setTimeout(
-            () =>
-              refs.floating.current
-                ?.querySelector<HTMLElement>("[role='dialog']")
-                ?.focus(),
-            50,
-          );
-      });
-    },
-    [onBeforeClose, onClose],
-  );
-
-  useEffect(() => {
-    setTimeout(() => {
-      refs.floating.current && (refs.floating.current.dataset.show = "true");
-      refs.floating.current
-        ?.querySelector<HTMLElement>("[role='dialog']")
-        ?.focus();
-    }, 50);
-  }, []);
-
-  return (
-    <FloatingPortal>
-      <FloatingOverlay
-        lockScroll
-        style={{ zIndex: "var(--z-overlay-mask)" }}
-        className="bg-base/20 backdrop-blur-sm grid place-items-center"
-      >
-        <FloatingFocusManager context={context}>
-          <dialog
-            className={classNames(
-              classes.modal,
-              "rounded-capped relative overflow-hidden flex flex-col flex-nowrap",
-              "ring-1 ring-tint-100 ring-offset-1 focus-within:ring-primary-300 shadow-xl",
-              size === "sm" && "w-[20rem]",
-              size === "md" && "w-[40rem]",
-              size === "lg" && "w-[60vw]",
-              size === "xl" && "w-[80vw]",
-              size === "screen" && "w-screen h-screen",
-            )}
-            style={{
-              width,
-              height,
-              minHeight,
-              minWidth,
-            }}
-            ref={refs.setFloating}
-            {...getFloatingProps()}
-            {...aria}
-          >
-            <HotKeyWrapper>
-              <Header
-                flex
-                className={classNames(classes.modalHeader, headerClassName)}
-              >
-                {icon && (
-                  <Icon
-                    icon={icon}
-                    bg={iconBg}
-                    color={iconColor}
-                    className={classNames(iconClassName, "p-1")}
-                    rtlFlip={rtlFlip}
-                  />
-                )}
-                <label className="flex-1 truncate py-2 px-1">{title}</label>
-                {actions}
-                <Icon
-                  data-ref="panelClose"
-                  className={classNames(
-                    classes.panelAction,
-                    "cursor-pointer p-1 text-xl self-stretch",
-                  )}
-                  icon={CoreIcons.close}
-                  onClick={() => handleClose(false)}
-                />
-              </Header>
-              {loading && <Loading />}
-              <div
-                role="dialog"
-                className={classNames(
-                  classes.modalBody,
-                  "flex-1 grid overflow-hidden",
-                )}
-                {...({ tabIndex: 0 } as AnyObject)}
-              >
-                {children}
-              </div>
-            </HotKeyWrapper>
-          </dialog>
-        </FloatingFocusManager>
-      </FloatingOverlay>
-    </FloatingPortal>
-  );
-};

package/src/overlays/toast/Toast.module.css

@@ -1,37 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  .toast {
-    margin-bottom: -100%;
-    opacity: 0;
-    transition:
-      margin 0.4s,
-      opacity 0.3s 0.2s;
-
-    &[data-show="true"] {
-      margin-bottom: 0;
-      opacity: 1;
-    }
-  }
-}

package/src/overlays/toast/Toast.tsx

@@ -1,216 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-import classNames from "classnames";
-import { Fragment, useCallback, useLayoutEffect, useMemo, useRef } from "react";
-import { useTranslation } from "react-i18next";
-import { AnimationIndicator } from "../../components/animations/Animations";
-import { Button } from "../../components/button/Button";
-import { Icon } from "../../components/icon/Icon";
-import { type ColorType, type Elements, type IconProps } from "../../types";
-import { CoreIcons } from "../../types/icons";
-import { getBgClass, getBorderClass, getColorClass } from "../../utils";
-import classes from "./Toast.module.css";
-
-export interface ToastProps extends Omit<IconProps, "iconBg" | "iconColor"> {
-  /**
-   * toast type
-   */
-  type?: "alert" | "confirm";
-  /**
-   * toast title
-   */
-  title?: string;
-  /**
-   * toast text
-   */
-  message: string | JSX.Element;
-  /**
-   * theme color
-   */
-  color?: ColorType;
-  /**
-   * extra action button
-   */
-  actions?: Elements<JSX.Element>;
-  /**
-   * ok label
-   */
-  okLabel?: string;
-  /**
-   * cancel label
-   */
-  cancelLabel?: string;
-}
-
-export const Toast = ({
-  title,
-  message,
-  color = "primary",
-  icon,
-  rtlFlip,
-  actions,
-  // @ts-expect-error internal prop
-  onClose,
-  // @ts-expect-error internal prop
-  onCloseAll,
-  type,
-  okLabel,
-  cancelLabel,
-}: ToastProps) => {
-  const { t } = useTranslation("core");
-
-  const iconType = useMemo(() => {
-    if (icon)
-      return (
-        <Icon icon={icon} size="md" rtlFlip={rtlFlip} color={color + "-600"} />
-      );
-    switch (color) {
-      case "danger":
-        return (
-          <AnimationIndicator
-            type="cross"
-            className={getColorClass(color + "-600")}
-          />
-        );
-      case "success":
-        return (
-          <AnimationIndicator
-            type="check"
-            className={getColorClass(color + "-600")}
-          />
-        );
-      case "warning":
-        return (
-          <AnimationIndicator
-            type="exclaim"
-            className={getColorClass(color + "-600")}
-          />
-        );
-      default:
-        return (
-          <AnimationIndicator
-            type={type === "confirm" ? "question" : "info"}
-            className={getColorClass(color + "-600")}
-          />
-        );
-    }
-  }, [color, type, icon]);
-
-  const elRef = useRef<HTMLDivElement>(null);
-  const handleClose = useCallback(
-    (ret?: AnyObject) => {
-      elRef.current && (elRef.current.dataset.show = "false");
-      setTimeout(() => {
-        onClose(ret);
-      }, 250);
-    },
-    [onClose],
-  );
-  useLayoutEffect(() => {
-    setTimeout(
-      () => elRef.current && (elRef.current.dataset.show = "true"),
-      100,
-    );
-  }, []);
-
-  return (
-    <div
-      role="alert"
-      className={classNames(
-        classes.toast,
-        getBorderClass(color + "-300"),
-        "flex flex-nowrap max-w-sm bg-base min-w-72 border pointer-events-auto relative overflow-hidden rounded-capped mt-4 select-none",
-      )}
-      ref={elRef}
-    >
-      <div
-        className={classNames("flex-initial p-2", getBgClass(color + "-100"))}
-      >
-        {iconType}
-      </div>
-      <div
-        className={classNames(
-          getBgClass(color + "-50/50"),
-          "flex flex-col flex-1 flex-nowrap overflow-hidden p-2",
-        )}
-      >
-        <div className="flex flex-nowrap gap-2 items-start">
-          <div className="font-medium flex-1">{title}</div>
-          <div>
-            <Button
-              size="sm"
-              variant="link"
-              className="m-0"
-              color={color}
-              icon={CoreIcons.closeAll}
-              aria-label="close-all"
-              onClick={onCloseAll}
-            />
-            <Button
-              size="sm"
-              variant="link"
-              className="m-0"
-              color={color}
-              icon={CoreIcons.close}
-              aria-label="close"
-              onClick={() => handleClose(false)}
-            />
-          </div>
-        </div>
-        <div>{message}</div>
-        {(type === "confirm" || actions) && (
-          <div className="flex gap-1 justify-end flex-nowrap pt-2">
-            <div
-              className="contents"
-              onClickCapture={(e) => handleClose((e.target as AnyObject).value)}
-            >
-              {actions}
-            </div>
-            {type === "confirm" && (
-              <Fragment>
-                <div className="flex-1" />
-                <Button
-                  size="sm"
-                  variant="link"
-                  color={color}
-                  onClick={() => handleClose(false)}
-                >
-                  {cancelLabel ?? t("action.cancel", "Cancel")}
-                </Button>
-                <Button
-                  size="sm"
-                  variant="solid"
-                  color={color}
-                  onClick={() => handleClose(true)}
-                >
-                  {okLabel ?? t("action.ok", "OK")}
-                </Button>
-              </Fragment>
-            )}
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};

package/src/overlays/tooltip/Tooltip.module.css

@@ -1,53 +0,0 @@
-/*
- * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
- *
- * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
- * and associated documentation files (the "Software"), to deal in the Software without restriction,
- * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
- * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
- * subject to the following conditions:
- *
- * The above copyright notice and this permission notice shall be included in all copies or substantial
- * portions of the Software.
- *
- * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
- * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
- * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
- * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
- */
-
-@layer comp {
-  .tooltip {
-    z-index: var(--z-tooltip);
-    color: theme(backgroundColor.invert);
-
-    &[data-color="primary"] {
-      color: theme(colors.primary.600);
-    }
-
-    &[data-color="accent"] {
-      color: theme(colors.accent.600);
-    }
-
-    &[data-color="info"] {
-      color: theme(colors.info.600);
-    }
-
-    &[data-color="danger"] {
-      color: theme(colors.danger.600);
-    }
-
-    &[data-color="success"] {
-      color: theme(colors.success.600);
-    }
-
-    &[data-color="warning"] {
-      color: theme(colors.warning.600);
-    }
-  }
-}