@react-fabric/core 1.0.0-beta.0

package/src/context/NotificationCenter.tsx

@@ -0,0 +1,223 @@
+/*
+ * 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 { isObject, isString, uuid } from "@react-fabric/utilities";
+import { Fragment, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Alert, type AlertProps } from "../overlays/alert/Alert";
+import { Message, type MessageProps } from "../overlays/message/Message";
+import { Toast, type ToastProps } from "../overlays/toast/Toast";
+
+export interface NotificationManagerRef {
+  showMessage: (
+    props: string | MessageProps,
+    timeout?: number,
+  ) => Promise<boolean | string>;
+
+  showToast: (
+    props: string | ToastProps,
+    timeout?: number,
+  ) => Promise<boolean | string>;
+
+  showAlert: (props: string | AlertProps) => Promise<boolean | string>;
+
+  showError: (
+    props: string | Omit<ToastProps, "color">,
+  ) => Promise<boolean | string>;
+
+  closeAll: () => void;
+}
+
+/** ***************** refactor props *******************/
+const makeProps = (obj: AnyObject): AnyObject => {
+  if (isString(obj)) {
+    return { message: obj };
+  } else if (isObject(obj)) {
+    return { ...obj };
+  }
+  return { message: "" };
+};
+
+export const NotificationManager = ({ onLoad }: KeyValue) => {
+  const refItems = useRef<KeyValue>({ toasts: {}, messages: {}, alerts: {} });
+
+  const [messages, setMessages] = useState<AnyObject>({});
+  const [toasts, setToasts] = useState<AnyObject>({});
+  const [alerts, setAlerts] = useState<AnyObject>({});
+
+  const updateMessages = useRef(() => {
+    setMessages({ ...refItems.current.messages });
+  });
+
+  const updateToasts = useRef(() => {
+    setToasts({ ...refItems.current.toasts });
+  });
+
+  const updateAlerts = useRef(() => {
+    setAlerts({ ...refItems.current.alerts });
+  });
+
+  const handleCloseAll = useRef(() => {
+    Object.values(refItems.current.messages).forEach((msg: AnyObject) =>
+      msg[1]?.(false),
+    );
+    Object.values(refItems.current.toasts).forEach((msg: AnyObject) =>
+      msg[1]?.(false),
+    );
+    Object.values(refItems.current.alerts).forEach((msg: AnyObject) =>
+      msg[1]?.(false),
+    );
+    refItems.current.messages = {};
+    refItems.current.toasts = {};
+    refItems.current.alerts = {};
+    updateMessages.current();
+    updateToasts.current();
+    updateAlerts.current();
+  });
+
+  const openNotification = useRef(
+    async (
+      map: KeyValue,
+      update: AnyObject,
+      Notif: React.ComponentType<AnyObject>,
+      props: AnyObject,
+      timeout = 5000,
+    ) => {
+      let timerRef: AnyObject = null;
+      const obj: AnyObject = makeProps(props);
+      return await new Promise<boolean | string>((resolve) => {
+        const key = uuid();
+        const handleClose = (b: boolean | string = false) => {
+          clearTimeout(timerRef);
+          setTimeout(() => {
+            // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+            delete map[key];
+            update();
+            resolve(b);
+          }, 250);
+        };
+        map[key] = [
+          <div key={key}>
+            <Notif
+              {...obj}
+              onClose={handleClose}
+              onCloseAll={handleCloseAll.current}
+            />
+          </div>,
+          handleClose,
+        ];
+        update();
+        if (obj.type !== "confirm" && timeout > 0) {
+          timerRef = setTimeout(handleClose, timeout);
+        }
+      });
+    },
+  );
+
+  const showMessage = useRef(
+    async (props: string | MessageProps, timeout = 5000) => {
+      return await openNotification.current(
+        refItems.current.messages,
+        updateMessages.current,
+        Message,
+        props,
+        timeout,
+      );
+    },
+  );
+
+  const showToast = useRef(
+    async (props: string | MessageProps, timeout = 5000) => {
+      return await openNotification.current(
+        refItems.current.toasts,
+        updateToasts.current,
+        Toast,
+        props,
+        timeout,
+      );
+    },
+  );
+
+  const showAlert = useRef(async (props: string | MessageProps) => {
+    return await openNotification.current(
+      refItems.current.alerts,
+      updateAlerts.current,
+      Alert,
+      props,
+      0,
+    );
+  });
+
+  const showError = useRef(
+    async (props: string | MessageProps, timeout = 5000) => {
+      return await openNotification.current(
+        refItems.current.toasts,
+        Toast,
+        { ...makeProps(props), color: "danger" },
+        0,
+      );
+    },
+  );
+
+  useEffect(() => {
+    onLoad({
+      showMessage: showMessage.current,
+      showToast: showToast.current,
+      showAlert: showAlert.current,
+      showError: showError.current,
+      closeAll: handleCloseAll.current,
+    });
+  }, []);
+
+  return (
+    <Fragment>
+      {createPortal(
+        <div
+          style={{ zIndex: "var(--z-overlay)" }}
+          className="ruf-container__overlays pointer-events-none fixed inset-0 p-4 bg-transparent"
+        >
+          {Object.values(alerts).map(([el]: AnyObject) => el)}
+        </div>,
+        document.body,
+      )}
+      {createPortal(
+        <div
+          style={{ zIndex: "var(--z-notifications)" }}
+          className="ruf-container__notifs flex flex-nowrap pointer-events-none fixed inset-0 p-2 bg-transparent flex-col-reverse items-center justify-end"
+        >
+          {Object.values(messages).map(([el]: AnyObject) => el)}
+        </div>,
+        document.body,
+      )}
+      {createPortal(
+        <div
+          style={{ zIndex: "var(--z-notifications)" }}
+          className="ruf-container__toasts flex flex-nowrap pointer-events-none fixed inset-0 p-4 bg-transparent flex-col items-end justify-end overflow-auto scroll-hide"
+        >
+          {Object.values(toasts).map(([el]: AnyObject) => el)}
+        </div>,
+        document.body,
+      )}
+    </Fragment>
+  );
+};

package/src/core/aside/Aside.module.css

@@ -0,0 +1,231 @@
+/*
+ * 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 {
+  .aside {
+    --aside-bg: color-mix(in lab, var(--fabric-bg) 95%, var(--tint));
+    --aside-border: color-mix(in lab, var(--fabric-bg) 75%, var(--tint));
+
+    background-color: var(--aside-bg);
+
+    &[data-align="start"] {
+      grid-area: side-s;
+      grid-template:
+        "head resizer" auto
+        "loader resizer" auto
+        "content resizer" 1fr / 1fr auto;
+      border-inline-end: 1px solid var(--aside-border);
+
+      & .asideHeader {
+        grid-template-areas: "icon title actions collapse";
+        grid-template-columns: auto 1fr auto auto;
+      }
+    }
+
+    &[data-align="end"] {
+      grid-area: side-e;
+      grid-template:
+        "resizer head" auto
+        "resizer loader" auto
+        "resizer content" 1fr / auto 1fr;
+      border-inline-start: 1px solid var(--aside-border);
+
+      & .asideHeader {
+        grid-template-areas: "collapse icon title actions";
+        grid-template-columns: auto auto 1fr auto;
+      }
+
+      & .asideCollapse {
+        transform: scaleX(-1);
+      }
+    }
+
+    & .asideBody {
+      grid-area: content;
+      grid-template: "head" auto "content" 1fr "foot" auto / 1fr;
+
+      & > [data-ref="content"] {
+        background-color: transparent;
+      }
+    }
+
+    & .asideHeader {
+      font-weight: 500;
+      color: theme(colors.primary.600);
+
+      &:not(:empty) {
+        border-bottom: 1px solid var(--aside-border);
+      }
+    }
+
+    & .asideTitle {
+      grid-area: title;
+    }
+
+    & .asideIcon {
+      grid-area: icon;
+    }
+
+    .asideActions {
+      grid-area: actions;
+    }
+
+    & .asideCollapse {
+      grid-area: collapse;
+
+      &:hover {
+        background-color: color-mix(in lab, var(--fabric-text) 10%, #0000);
+      }
+    }
+
+    & .asidePlaceholder {
+      z-index: 4;
+      grid-area: content;
+      background-color: var(--aside-bg);
+    }
+
+    & .asideResizer {
+      cursor: col-resize;
+      position: relative;
+      grid-area: resizer;
+      width: 0.25rem;
+
+      &::before {
+        height: 32px;
+        border: 1px solid theme(colors.tint.700);
+        border-width: 0 1.5px;
+      }
+
+      &:hover::before,
+      &:active::before {
+        height: 100%;
+        background-color: theme(colors.primary.600);
+        border-color: theme(backgroundColor.base);
+        border-width: 0 1.25px;
+      }
+    }
+  }
+}
+
+@layer util {
+  .asideBody,
+  .asideHeader {
+    width: unset;
+    height: unset;
+    margin: unset;
+  }
+
+  .asideBody {
+    & > [data-ref="content"] {
+      background-color: transparent;
+    }
+  }
+
+  .aside[data-collapsed="true"] {
+    position: relative;
+    overflow: visible;
+    width: 2rem;
+
+    & .asideBody {
+      position: absolute;
+      z-index: -1;
+      inset: 0;
+
+      background-color: var(--aside-bg);
+
+      transition: transform cubic-bezier(0.4, 0, 0.2, 1) 150ms;
+    }
+
+    & .asideHeader {
+      position: absolute;
+      z-index: 5;
+      width: 2rem;
+    }
+
+    & .asideTitle {
+      position: absolute;
+      top: 1rem;
+      grid-area: unset;
+      font-size: 1rem;
+    }
+
+    .asideIcon {
+      margin-inline: 2px;
+    }
+
+    & .asideCollapse + .asideIcon,
+    & .asideResizer {
+      display: none;
+    }
+  }
+
+  [dir="ltr"] .aside[data-align="start"][data-collapsed="true"],
+  [dir="rtl"] .aside[data-align="end"][data-collapsed="true"] {
+    & .asideBody {
+      right: unset;
+      transform: translateX(-100%);
+      grid-area: unset;
+    }
+
+    & .asideTitle {
+      right: calc(2rem + 2px);
+      transform-origin: 100% 100%;
+      transform: rotate(-90deg) translateY(2rem);
+    }
+
+    & .asideCollapse {
+      transform: scaleX(-1);
+    }
+
+    &[data-flyout="true"] .asideBody {
+      z-index: 3;
+      transform: translateX(2rem);
+      box-shadow: 0 0 1rem 0 var(--fabric-shadow);
+    }
+  }
+
+  [dir="ltr"] .aside[data-align="end"][data-collapsed="true"],
+  [dir="rtl"] .aside[data-align="start"][data-collapsed="true"] {
+    & .asideBody {
+      left: unset;
+      transform: translateX(100%);
+      grid-area: unset;
+    }
+
+    & .asideTitle {
+      left: calc(2rem + 2px);
+      transform-origin: 0 100%;
+      transform: rotate(90deg) translateY(2rem);
+    }
+
+    & .asideCollapse {
+      transform: scaleX(1);
+    }
+
+    &[data-flyout="true"] .asideBody {
+      z-index: 3;
+      transform: translateX(-2rem);
+      box-shadow: 0 0 1rem 0 var(--fabric-shadow);
+    }
+  }
+}

package/src/core/aside/Aside.tsx

@@ -0,0 +1,262 @@
+/*
+ * 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, useEffect, useMemo, useRef, useState } from "react";
+import { Loading } from "../../components/animations/Animations";
+import { Icon } from "../../components/icon/Icon";
+import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
+import { usePropToggle } from "../../hooks/usePropToggle";
+import { useResize } from "../../hooks/useResize";
+import {
+  type ChildrenProp,
+  type CollapseProps,
+  type Elements,
+  type IconProps,
+  type TestProps,
+} from "../../types";
+import { CoreIcons } from "../../types/icons";
+import { ErrorBoundary } from "../boundary/ErrorBoundary";
+import classes from "./Aside.module.css";
+
+export interface AsideProps
+  extends IconProps,
+    ChildrenProp,
+    CollapseProps,
+    TestProps {
+  /**
+   * page title
+   */
+  title?: string;
+  /**
+   * align inline-end
+   */
+  align?: "start" | "end";
+  /**
+   * header actions
+   */
+  actions?: Elements<JSX.Element>;
+  /**
+   * header class
+   */
+  headerClassName?: string;
+
+  /**
+   * show loading indicator
+   */
+  loading?: boolean;
+  /**
+   * allow resize
+   */
+  resizeable?: boolean;
+  /**
+   * allow flyout with collapsed
+   */
+  flyout?: boolean;
+  /**
+   * event handler when shown
+   */
+  onFlyout?: () => void;
+
+  /**
+   * fixed width
+   */
+  width?: number | string;
+  /**
+   * max width
+   */
+  maxWidth?: number | string;
+  /**
+   * min width
+   */
+  minWidth?: number | string;
+}
+
+/**
+ * Side panel
+ */
+export const Aside = ({
+  children,
+  title,
+  icon,
+  iconBg,
+  iconColor,
+  rtlFlip,
+  headerClassName,
+  resizeable,
+  flyout,
+  onFlyout,
+  collapsed,
+  collapsable,
+  onCollapse,
+  actions,
+  loading,
+  align = "start",
+  width: wd = "20rem",
+  minWidth = "2rem",
+  maxWidth = "30vw",
+  "data-testid": testId,
+  "data-test-value": testValue,
+}: AsideProps) => {
+  const elementRef = useRef<HTMLDivElement>(null);
+  const [width, setWidth] = useState(wd);
+  const [peek, setPeek] = useState(false);
+
+  const [isCollapsed, toggleCollapse] = usePropToggle(collapsed, onCollapse);
+
+  useEffect(() => {
+    setWidth(wd);
+  }, [wd]);
+
+  const handleResize = useRef(({ x }: { x: number }) => {
+    if (elementRef.current != null) {
+      setWidth(elementRef.current.offsetWidth + x);
+    }
+  });
+  const resizeHandleProps = useResize(handleResize.current, {
+    isReverse: align === "end",
+  });
+
+  const tryPeek = useCallback(() => {
+    if (isCollapsed) {
+      if (flyout) {
+        setPeek(!peek);
+        !peek && onFlyout?.();
+      } else {
+        void toggleCollapse();
+      }
+    }
+  }, [peek, flyout, isCollapsed, onFlyout, toggleCollapse]);
+
+  useLayoutEffectDebugger(
+    () => {
+      if (peek) {
+        const handler = (e: MouseEvent) => {
+          if (
+            (e.target as HTMLElement).closest(`[data-ref="asideBody"]`) ==
+              null &&
+            (e.target as HTMLElement).closest(
+              `[data-ref="asidePlaceholder"]`,
+            ) == null
+          ) {
+            setPeek(false);
+          }
+        };
+        document.addEventListener("mouseup", handler);
+
+        return () => document.removeEventListener("mouseup", handler);
+      }
+    },
+    [peek],
+    "Aside peek",
+  );
+
+  const widthStyles = useMemo(
+    () => ({
+      width,
+      minWidth,
+      maxWidth,
+    }),
+    [width, minWidth, maxWidth],
+  );
+
+  return (
+    <aside
+      className={classNames(classes.aside, "overflow-hidden grid")}
+      data-align={align}
+      data-flyout={peek}
+      data-collapsed={isCollapsed}
+      style={isCollapsed ? undefined : widthStyles}
+      data-testid={testId}
+      data-test-value={testValue}
+    >
+      <header
+        className={classNames(
+          classes.asideHeader,
+          headerClassName,
+          "grid area-head items-center",
+        )}
+      >
+        {title && (
+          <div
+            className={classNames(
+              classes.asideTitle,
+              "truncate py-0.5 px-1 select-none pointer-events-none",
+            )}
+          >
+            {title}
+          </div>
+        )}
+        {collapsable && (
+          <Icon
+            aria-label={isCollapsed ? "expand" : "collapse"}
+            className={classNames(classes.asideCollapse, "p-2 select-none")}
+            icon={CoreIcons.chevronLeft}
+            rtlFlip
+            onClick={toggleCollapse}
+            data-ref="asideToggle"
+          />
+        )}
+        {icon && (
+          <Icon
+            icon={icon}
+            bg={iconBg}
+            color={iconColor}
+            rtlFlip={rtlFlip}
+            className={classNames(
+              classes.asideIcon,
+              "p-1 text-lg select-none pointer-events-none",
+            )}
+          />
+        )}
+        {actions && <div className={classes.asideActions}>{actions}</div>}
+      </header>
+      {loading && <Loading />}
+      {isCollapsed && (
+        <div
+          role="none"
+          onClick={tryPeek}
+          data-ref="asidePlaceholder"
+          className={classes.asidePlaceholder}
+        />
+      )}
+      <section
+        ref={elementRef}
+        data-ref="asideBody"
+        className={classNames(classes.asideBody, "overflow-hidden grid")}
+        style={isCollapsed ? widthStyles : undefined}
+      >
+        <ErrorBoundary>{children}</ErrorBoundary>
+      </section>
+      {resizeable && (
+        <div
+          {...resizeHandleProps}
+          className={classNames(
+            classes.asideResizer,
+            "before:absolute before:inset-0 before:w-1 before:top-1/2 before:-translate-y-1/2 before:transition-all",
+          )}
+        />
+      )}
+    </aside>
+  );
+};