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

package/src/components/meter/Meter.tsx

@@ -21,13 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Format } from "@react-fabric/utilities";
-import classNames from "classnames";
+import { Format, cn } from "@react-fabric/utilities";
 import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import { type AriaProps, type CssProp, type TestProps } from "../../types";
-import classes from "./Meter.module.css";
+import type { CssProp, CustomColors, TestProps } from "../../types";
+import { getColor } from "../../utils";
 
-export interface MeterProps extends CssProp, AriaProps, TestProps {
+export interface MeterProps extends CssProp, TestProps {
   /**
    * meter value (0-100)
    */
@@ -36,9 +35,30 @@ export interface MeterProps extends CssProp, AriaProps, TestProps {
    * hide value label
    */
   hideLabel?: boolean;
+
+  color?: CustomColors;
 }
 
-export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
+/**
+ * A component that displays a visual representation of a value as a series of dots.
+ * It is useful for showing progress or completion status in a compact form.
+ * The meter consists of 6 dots, each representing approximately 16.67% of the total value.
+ * The active dots are filled based on the value provided, and the remaining dots are empty.
+ * The component can also display a label showing the percentage value.
+ *
+ * @example
+ * ```jsx
+ * <Meter value={75} />
+ * // Renders a meter with 4 active dots and a label showing "75%"
+ *
+ * <Meter value={50} hideLabel />
+ * // Renders a meter with 3 active dots and no label
+ *
+ * <Meter value={100} className="custom-meter" />
+ * // Renders a meter with all 6 active dots and a custom class name
+ * ```
+ */
+export function Meter({ value, hideLabel, color, className, ...props }: MeterProps) {
   /** ***************** calculate active meter dots *******************/
   const activeCount = useMemoDebugger(
     () => {
@@ -50,31 +70,28 @@ export const Meter = ({ value, hideLabel, className, ...aria }: MeterProps) => {
 
   return (
     <div
-      className={classNames(
-        classes.meter,
-        className,
-        "flex flex-nowrap items-center gap-[2px]",
-      )}
-      {...aria}
+      className={cn("fabric-meter", className, color && "gradient", "flex flex-nowrap items-center gap-0.5")}
+      style={{ color: getColor(color) }}
+      {...props}
     >
       {[0, 1, 2, 3, 4, 5].map((step) => (
         <div
           key={step}
-          className={classNames(
-            classes.meterBar,
+          className={cn(
+            "fabric-meterBar",
             "first-of-type:rounded-s last-of-type:rounded-e bg-tint-100 relative outline -outline-offset-1 outline-muted overflow-hidden after:absolute after:inset-0",
           )}
           data-active={activeCount >= step}
           style={
             {
               "--width": `${Math.min((activeCount - step) * 100, 100)}%`,
-            } as AnyObject
+            } as React.CSSProperties
           }
         />
       ))}
       {!hideLabel && (
-        <label className="text-muted">{Format.percent(value / 100)}</label>
+        <span className="fabric-meterLabel inline-block text-muted w-[4em] px-1">{Format.percent(value / 100)}</span>
       )}
     </div>
   );
-};
+}

package/src/components/modal/Modal.tsx

@@ -0,0 +1,226 @@
+/*
+ * 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 { cn } from "@react-fabric/utilities";
+import { Activity, use, useEffect, useId } from "react";
+import { LoadingLine } from "../../components/animations/LoadingLine";
+import { Icon } from "../../components/icon/Icon";
+import { ModalContext } from "../../context/context";
+import type { CallbackReturn, ChildrenProp, CssPropWithMap, TestProps } from "../../types";
+import type { TitlebarProps } from "../titlebar/Titlebar";
+import { Titlebar } from "../titlebar/Titlebar";
+
+export interface ModalProps<T>
+  extends
+    TestProps,
+    ChildrenProp,
+    TitlebarProps,
+    CssPropWithMap<{ root: string; body?: string; titlebar?: string; title?: string; icon?: string }> {
+  /**
+   * show loading indicator
+   */
+  loading?: boolean;
+  /**
+   * 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;
+  /**
+   * portal root element
+   */
+  root?: HTMLElement;
+  /**
+   * hide mask background
+   */
+  hideMask?: boolean;
+  closeOnEscape?: boolean;
+  /**
+   * close handler
+   */
+  onClose?: (args: T | null) => void;
+  /**
+   * before close handler, return false to prevent close
+   */
+  onBeforeClose?: (args: T | null) => CallbackReturn;
+}
+
+export function Modal<T extends AnyObject = AnyObject>({
+  icon,
+  className,
+  classNames,
+  title,
+  actions,
+  onClose,
+  onBeforeClose,
+  children,
+  loading,
+  root,
+  size,
+  hideMask,
+  width,
+  height,
+  minHeight,
+  minWidth,
+  closeOnEscape,
+  ...props
+}: ModalProps<T>) {
+  const id = useId();
+  const { activeModal, registerModal, removeModal } = use(ModalContext);
+  const { refs, context } = useFloating({
+    open: true,
+    onOpenChange: () => {
+      if (id === activeModal) handleClose(null);
+    },
+  });
+  const dismiss = useDismiss(context, {
+    outsidePressEvent: "mousedown",
+    escapeKey: closeOnEscape,
+    enabled: id === activeModal,
+  });
+  const role = useRole(context);
+
+  // Merge all the interactions into prop getters
+  const { getFloatingProps } = useInteractions([dismiss, role]);
+
+  const handleClose = (args: T | null) => {
+    void Promise.resolve(onBeforeClose?.(args)).then((ret) => {
+      if (ret !== false) {
+        if (refs.floating.current) refs.floating.current.dataset.show = "false";
+        setTimeout(() => {
+          onClose?.(args);
+        }, 250);
+      }
+      if (ret === false) setTimeout(() => refs.floating.current?.querySelector<HTMLElement>("[role='dialog']")?.focus(), 50);
+    });
+  };
+
+  useEffect(() => {
+    if (activeModal === id) {
+      const tmr = setTimeout(() => {
+        if (refs.floating.current) refs.floating.current.dataset.show = "true";
+      }, 50);
+
+      return () => {
+        clearTimeout(tmr);
+      };
+    }
+  }, [activeModal, id, refs.floating]);
+
+  useEffect(() => {
+    registerModal?.(id, () => onClose?.(null));
+
+    return () => {
+      removeModal?.(id);
+    };
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [id]);
+
+  return (
+    <Activity mode={id === activeModal ? "visible" : "hidden"}>
+      <FloatingPortal root={root}>
+        <FloatingOverlay
+          lockScroll
+          style={{
+            zIndex: "var(--z-overlay-mask)",
+            position: "absolute",
+            overflow: "hidden",
+          }}
+          className={cn("grid place-items-center p-16", !hideMask && "bg-tint-100/20 backdrop-blur-sm")}
+        >
+          <FloatingFocusManager context={context} modal>
+            <dialog
+              className={cn(
+                "fabric-modal",
+                className,
+                classNames?.root,
+                "rounded-capped relative overflow-hidden flex flex-col flex-nowrap",
+                "ring-2 ring-offset-2 ring-tint-100 focus-within:ring-primary-300 shadow-xl",
+                size === "sm" && "w-[20rem]",
+                size === "md" && "w-160",
+                size === "lg" && "w-[60vw]",
+                size === "xl" && "w-[80vw]",
+                size === "screen" && "w-screen h-screen",
+              )}
+              style={{
+                width,
+                height,
+                minHeight,
+                minWidth,
+              }}
+              ref={(el) => refs.setFloating(el)}
+              {...getFloatingProps()}
+              {...props}
+            >
+              <Titlebar
+                title={title}
+                icon={icon}
+                actions={
+                  <>
+                    <div className="px-1 leading-none">{actions}</div>
+                    <button className="size-fit cursor-pointer leading-none outline-none" onClick={() => handleClose(null)}>
+                      <Icon
+                        data-ref="panelClose"
+                        className={cn("fabric-panelAction", "cursor-pointer p-1 text-xl self-center")}
+                        icon="icon-[mdi--close]"
+                      />
+                    </button>
+                  </>
+                }
+                className={cn(classNames?.titlebar)}
+                classNames={classNames}
+              />
+              {loading && <LoadingLine />}
+              <div role="dialog" className={cn("fabric-modalBody", classNames?.body, "flex-1 grid overflow-hidden")}>
+                {children}
+              </div>
+            </dialog>
+          </FloatingFocusManager>
+        </FloatingOverlay>
+      </FloatingPortal>
+    </Activity>
+  );
+}

package/src/components/navigator/Navigator.tsx

@@ -21,59 +21,114 @@
  * 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 { HotKey } from "../../hotkeys/HotKey";
-import {
-  type AriaProps,
-  type ColorType,
-  type CssProp,
-  type TestProps,
-} from "../../types";
-import { CoreIcons } from "../../types/icons";
+import { cn, isEmpty } from "@react-fabric/utilities";
+import { useHotkeys } from "@tanstack/react-hotkeys";
+import type { ChildProp, CssProp, CustomColors, TestProps } from "../../types";
 import { Icon } from "../icon/Icon";
 
-export interface NavigatorProps extends CssProp, AriaProps, TestProps {
+export interface NavigatorProps extends CssProp, TestProps, Partial<ChildProp> {
+  /**
+   * item list length (ignore to enable infinite navigation)
+   */
+  length?: number;
+  /**
+   * current item index (ignore to enable infinite navigation)
+   */
+  current?: number;
+
+  disableKeyHandlers?: boolean;
   /**
    * navigator button color
    */
-  color?: ColorType | string;
+  color?: CustomColors;
   /**
    * navigation handler
    */
   onNavigate: (dir: -1 | 1) => void;
 }
 
-export const Navigator = ({
+const buttonClassName =
+  "not-disabled:cursor-pointer not-disabled:hover:bg-tint-500/20 rounded leading-0 inline-block disabled:text-tint-500/50 disabled:cursor-not-allowed";
+
+/**
+ * A component that provides navigation controls for traversing through items.
+ * It includes previous and next buttons, and supports keyboard navigation.
+ *
+ * @example
+ * ```jsx
+ * <Navigator
+ *   className="my-navigator"
+ *   onNavigate={(dir) => console.log(`Navigate ${dir === -1 ? 'previous' : 'next'}`)}
+ *   color="blue"
+ *   length={10}
+ *   current={0}
+ * >
+ *   <span>Current Item: 1</span>
+ * </Navigator>
+ * ```
+ */
+export function Navigator({
   className,
   onNavigate,
   color,
+  children,
+  length,
+  current,
+  disableKeyHandlers,
   ...aria
-}: NavigatorProps) => {
+}: NavigatorProps) {
+  const navPrev = () => (isEmpty(current) || current !== 0) && onNavigate(-1);
+  const navNext = () => (isEmpty(current) || current + 1 < (length ?? 0)) && onNavigate(+1);
+
+  useHotkeys([
+    {
+      hotkey: "ArrowLeft",
+      callback: navPrev,
+      options: {
+        enabled: !disableKeyHandlers,
+      },
+    },
+    {
+      hotkey: "ArrowRight",
+      callback: navNext,
+      options: {
+        enabled: !disableKeyHandlers,
+      },
+    },
+  ]);
   return (
-    <div
-      className={classNames(className, "inline-block leading-none")}
-      {...aria}
-    >
-      <HotKey keyCombo="left" handler={() => onNavigate(-1)} />
-      <HotKey keyCombo="right" handler={() => onNavigate(1)} />
-      <Icon
-        rtlFlip
-        color={color}
-        className="text-[1em] p-1"
-        aria-label="previous"
-        data-testid="previous"
-        icon={CoreIcons.chevronLeft}
-        onClick={(e) => [e.stopPropagation(), onNavigate(-1)]}
-      />
-      <Icon
-        rtlFlip
-        className="text-[1em] p-1"
-        color={color}
-        aria-label="next"
-        data-testid="next"
-        icon={CoreIcons.chevronRight}
-        onClick={(e) => [e.stopPropagation(), onNavigate(1)]}
-      />
+    <div data-ref="navigator" className={cn(className, "inline-flex gap-1 items-center leading-none")} {...aria}>
+      <button
+        type="button"
+        className={buttonClassName}
+        disabled={!isEmpty(current) && current === 0}
+        onClick={(e) => [e.stopPropagation(), navPrev()]}
+      >
+        <Icon
+          rtlFlip
+          color={color}
+          className="text-[1.25em] p-[0.125em]"
+          aria-label="previous"
+          data-ref="previous"
+          icon="icon-[mdi--chevron-left]"
+        />
+      </button>
+      <div className="text-[1em]">{children}</div>
+      <button
+        type="button"
+        className={buttonClassName}
+        disabled={!isEmpty(current) && current + 1 === length}
+        onClick={(e) => [e.stopPropagation(), navNext()]}
+      >
+        <Icon
+          rtlFlip
+          className="text-[1.25em] p-[0.125em]"
+          color={color}
+          aria-label="next"
+          data-ref="next"
+          icon="icon-[mdi--chevron-right]"
+        />
+      </button>
     </div>
   );
-};
+}