@react-fabric/core 1.0.0-beta.0

package/src/overlays/alert/Alert.tsx

@@ -0,0 +1,229 @@
+/*
+ * 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, useLayoutEffect, useMemo } 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 { Title } from "../../typography/Title";
+import { getBorderClass, getColorClass } from "../../utils";
+import classes from "./Alert.module.css";
+
+export interface AlertProps extends Omit<IconProps, "iconBg" | "iconColor"> {
+  /**
+   * toast type
+   */
+  type?: "alert" | "confirm" | "prompt";
+  /**
+   * 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 Alert = ({
+  title,
+  message,
+  color = "primary",
+  icon,
+  rtlFlip,
+  actions,
+  // @ts-expect-error internal prop
+  onClose,
+  type,
+  okLabel,
+  cancelLabel,
+}: AlertProps) => {
+  const { t } = useTranslation("core");
+  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 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 handleClose = useCallback(
+    (ret: AnyObject) => {
+      refs.floating.current && (refs.floating.current.dataset.show = "false");
+      setTimeout(() => {
+        onClose(ret);
+      }, 250);
+    },
+    [onClose],
+  );
+  useLayoutEffect(() => {
+    setTimeout(
+      () =>
+        refs.floating.current && (refs.floating.current.dataset.show = "true"),
+      100,
+    );
+  }, []);
+
+  return (
+    <FloatingPortal>
+      <FloatingOverlay
+        lockScroll
+        style={{ zIndex: "var(--z-overlay-mask)" }}
+        className="bg-base/50 backdrop-blur-sm grid place-items-center"
+      >
+        <FloatingFocusManager context={context}>
+          <dialog
+            role="alertdialog"
+            className={classNames(
+              classes.alert,
+              getBorderClass(color + "-300"),
+              "grid bg-base border-2 pointer-events-auto overflow-hidden rounded-capped select-none",
+              "min-w-72 max-w-sm p-6 relative outline-0 shadow-lg",
+            )}
+            ref={refs.setFloating}
+            {...getFloatingProps()}
+          >
+            <div className={classNames("area-[icon] text-lg py-2")}>
+              {iconType}
+            </div>
+
+            <Title className="font-medium area-[title]">{title}</Title>
+            <p className="area-[message] py-4">{message}</p>
+            <div className="area-[message]">{message}</div>
+            <div className="flex gap-1 justify-center flex-nowrap pt-2 area-[actions]">
+              <div
+                className="contents"
+                onClickCapture={(e) =>
+                  handleClose((e.target as AnyObject).value)
+                }
+              >
+                {actions}
+              </div>
+              {type === "confirm" && (
+                <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>
+            </div>
+            <div className="absolute top-2 end-2">
+              <Button
+                size="sm"
+                variant="link"
+                className="m-0"
+                color={color}
+                onClick={() => handleClose(false)}
+                icon={CoreIcons.close}
+                aria-label="close"
+              />
+            </div>
+          </dialog>
+        </FloatingFocusManager>
+      </FloatingOverlay>
+    </FloatingPortal>
+  );
+};

package/src/overlays/flyout/Flyout.module.css

@@ -0,0 +1,52 @@
+/*
+ * 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 {
+  .flyout {
+    z-index: var(--z-overlay);
+    width: 32rem;
+    max-width: 70vw;
+    transition: margin 0.5s;
+
+    & .flyoutHeader {
+      background-color: theme(backgroundColor.base);
+      border-bottom: 0.5px solid theme(borderColor.dimmed);
+    }
+
+    & .flyoutBody {
+      grid-template: "head head head" auto ". loader ." auto "side-s content side-e" 1fr "foot foot foot" auto / auto 1fr auto;
+    }
+
+    &[data-align="start"] {
+      margin-inline-start: -100%;
+    }
+
+    &[data-align="end"] {
+      margin-inline-end: -100%;
+    }
+
+    &[data-show="true"] {
+      margin: 0;
+    }
+  }
+}

package/src/overlays/flyout/Flyout.tsx

@@ -0,0 +1,283 @@
+/*
+ * 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 {
+  Fragment,
+  useCallback,
+  useEffect,
+  type PropsWithChildren,
+} 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 "./Flyout.module.css";
+
+export interface FlyoutProps
+  extends AriaProps,
+    TestProps,
+    IconProps,
+    ChildrenProp {
+  /**
+   * flyout alignment
+   */
+  align?: "start" | "end";
+  /**
+   * 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";
+  /**
+   * width
+   */
+  width?: string | number;
+  /**
+   * minimum width
+   */
+  minWidth?: string | number;
+  /**
+   * hide backdrop mask
+   */
+  hideMask?: boolean;
+  /**
+   * close flyout on any click
+   */
+  closeOnClick?: boolean;
+  /**
+   * close handler
+   */
+  onClose: (...args: AnyObject) => void;
+  /**
+   * before close handler, return false to prevent close
+   */
+  onBeforeClose?: (...args: AnyObject) => CallbackReturn;
+}
+
+export const Flyout = ({
+  icon,
+  iconBg,
+  iconColor,
+  iconClassName,
+  rtlFlip,
+  title,
+  actions,
+  closeOnClick,
+  headerClassName,
+  onClose,
+  onBeforeClose,
+  children,
+  loading,
+  size,
+  width,
+  minWidth,
+  hideMask,
+  align = "start",
+  ...aria
+}: FlyoutProps) => {
+  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);
+  }, []);
+
+  const tryClosing = useCallback(
+    (e: React.MouseEvent) => {
+      if (
+        !!closeOnClick ||
+        (e.target as HTMLElement).closest("[data-flyout-dismiss='true']")
+      ) {
+        setTimeout(() => {
+          handleClose();
+        }, 100);
+      }
+    },
+    [closeOnClick, handleClose],
+  );
+
+  const Wrapper = useCallback(
+    ({ children }: PropsWithChildren) => {
+      if (hideMask) return <Fragment>{children}</Fragment>;
+
+      return (
+        <FloatingOverlay
+          lockScroll
+          style={{ zIndex: "var(--z-overlay-mask)" }}
+          className="bg-base/10 backdrop-blur-sm transition-all"
+        >
+          {children}
+        </FloatingOverlay>
+      );
+    },
+    [hideMask, handleClose],
+  );
+
+  return (
+    <FloatingPortal>
+      <Wrapper>
+        <FloatingFocusManager context={context}>
+          <Wrapper>
+            <div
+              data-align={align}
+              className={classNames(
+                classes.flyout,
+                "fixed inset-y-0 overflow-hidden flex flex-col flex-nowrap pointer-events-auto shadow-xl",
+                align === "start" ? "start-0" : "end-0",
+                size === "sm" && "w-[20rem]",
+                size === "md" && "w-[40rem]",
+                size === "lg" && "w-[60vw]",
+                size === "xl" && "w-[80vw]",
+              )}
+              style={{
+                width,
+                minWidth,
+              }}
+              onMouseUpCapture={tryClosing}
+              ref={refs.setFloating}
+              {...getFloatingProps()}
+              {...aria}
+              {...aria}
+            >
+              <HotKeyWrapper>
+                <Header
+                  flex
+                  className={classNames(classes.flyoutHeader, 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.flyoutBody,
+                    "flex-1 grid overflow-hidden",
+                  )}
+                  {...({ tabIndex: 0 } as AnyObject)}
+                >
+                  {children}
+                </div>
+              </HotKeyWrapper>
+            </div>
+          </Wrapper>
+        </FloatingFocusManager>
+      </Wrapper>
+    </FloatingPortal>
+  );
+};

package/src/overlays/index.ts

@@ -0,0 +1,29 @@
+/*
+ * 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.
+ */
+
+export { Alert } from "./alert/Alert";
+export { Flyout } from "./flyout/Flyout";
+export { Message } from "./message/Message";
+export { Modal } from "./modal/Modal";
+export { Toast } from "./toast/Toast";
+export { Tooltip } from "./tooltip/Tooltip";

package/src/overlays/message/Message.module.css

@@ -0,0 +1,37 @@
+/*
+ * 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 {
+  .message {
+    margin-top: -100%;
+    opacity: 0;
+    transition:
+      margin 0.4s,
+      opacity 0.3s 0.2s;
+
+    &[data-show="true"] {
+      margin-top: 0;
+      opacity: 1;
+    }
+  }
+}