@react-fabric/core 1.0.0-beta.8 → 1.0.1

package/src/core/aside/Aside.tsx

@@ -1,78 +1,65 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
- *
- * The MIT License (MIT)
- * Copyright (c) 2024 Adarsh Pastakia
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 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:
+ * 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 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.
+ * 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,
-  type ReactNode,
-} from "react";
-import { Loading } from "../../components/animations/Animations";
+import { cn } from "@react-fabric/utilities";
+import { Activity, useEffect, useMemo, useRef, useState } from "react";
+import { StyleEffect } from "../../components/effect/StyleEffect";
 import { Icon } from "../../components/icon/Icon";
+import type { TitlebarProps } from "../../components/titlebar/Titlebar";
+import { Titlebar } from "../../components/titlebar/Titlebar";
+import { useGlobals } from "../../context/context";
 import { useLayoutEffectDebugger } from "../../hooks/useEffectDebugger";
+import { usePropState } from "../../hooks/usePropState";
 import { usePropToggle } from "../../hooks/usePropToggle";
 import { useResize } from "../../hooks/useResize";
-import {
-  type ChildrenProp,
-  type CollapseProps,
-  type CssProp,
-  type Elements,
-  type IconProps,
-  type TestProps,
-} from "../../types";
-import { CoreIcons } from "../../types/icons";
+import type { ChildrenProp, CollapseProps, CssPropWithMap, TestProps } from "../../types";
+import { getIconProps } from "../../utils";
 import { ErrorBoundary } from "../boundary/ErrorBoundary";
-import classes from "./Aside.module.css";
 
 export interface AsideProps
-  extends IconProps,
+  extends
     ChildrenProp,
     CollapseProps,
-    CssProp,
+    CssPropWithMap<{
+      root?: string;
+      titlebar?: string;
+      body?: string;
+      title?: string;
+      icon?: string;
+      actions?: string;
+    }>,
     TestProps {
-  /**
-   * page title
-   */
-  title?: ReactNode;
   /**
    * align inline-end
    */
   align?: "start" | "end";
+
   /**
-   * header actions
-   */
-  actions?: Elements<JSX.Element>;
-  /**
-   * header class
-   */
-  headerClassName?: string;
-  /**
-   * header class
+   * margin (uses tailwind spacing calculation, ie. 2 = 0.5rem)
    */
-  bodyClassName?: string;
+  margin?: number;
 
   /**
    * show loading indicator
@@ -85,12 +72,15 @@ export interface AsideProps
   /**
    * allow flyout with collapsed
    */
-  flyout?: boolean;
+  enableFlyout?: boolean;
   /**
    * event handler when shown
    */
   onFlyout?: () => void;
 
+  id?: string;
+  hideCollapseHandle?: boolean;
+
   /**
    * fixed width
    */
@@ -103,25 +93,59 @@ export interface AsideProps
    * min width
    */
   minWidth?: number | string;
+  /**
+   * Resize event
+   */
+  onResize?: (width: number) => void;
 }
 
 /**
- * Side panel
+ * A sidebar component that can be collapsed, resized, and has a flyout feature.
+ * It supports a title, icon, actions, and loading state.
+ * It can be aligned to the start or end of the page.
+ *
+ * @example
+ * ```jsx
+ * <Aside
+ *   title="Sidebar Title"
+ *   icon=icon-[mdi--menu]
+ *   rtlFlip={true}
+ *   className="custom-aside"
+ *   bodyClassName="custom-aside-body"
+ *   headerClassName="custom-aside-header"
+ *   resizeable={true}
+ *   flyout={true}
+ *   onFlyout={() => console.log("Flyout triggered")}
+ *   collapsed={false}
+ *   collapsable={true}
+ *   onCollapse={() => console.log("Collapsed toggled")}
+ *   actions={<button>Action</button>}
+ *   loading={false}
+ *   align="start"
+ *   width="20rem"
+ *   minWidth="2rem"
+ *   maxWidth="30vw"
+ *   data-testid="aside-test"
+ *   data-test-value="aside-value"
+ * >
+ *   <Content>This is the content of the aside.</Content>
+ * </Aside>
+ * ```
  */
-export const Aside = ({
+export function Aside({
   children,
   title,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
+  id,
+  margin,
+  hideCollapseHandle,
   className,
-  bodyClassName,
-  headerClassName,
+  classNames,
   resizeable,
-  flyout,
+  enableFlyout,
   onFlyout,
-  collapsed,
+  onResize,
+  collapsed: _collapsed,
   collapsable,
   onCollapse,
   actions,
@@ -132,47 +156,47 @@ export const Aside = ({
   maxWidth = "30vw",
   "data-testid": testId,
   "data-test-value": testValue,
-}: AsideProps) => {
+}: AsideProps & TitlebarProps) {
   const elementRef = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState(wd);
+  const [width, setWidth] = usePropState(wd);
   const [peek, setPeek] = useState(false);
+  const { registerArea, unregisterArea } = useGlobals();
 
-  const [isCollapsed, toggleCollapse] = usePropToggle(collapsed, onCollapse);
+  const [collapsed, onToggle] = usePropToggle(_collapsed, onCollapse);
 
-  useEffect(() => {
-    setWidth(wd);
-  }, [wd]);
-
-  const handleResize = useRef(({ x }: { x: number }) => {
+  const handleResizeRef = useRef(({ x }: { x: number }) => {
     if (elementRef.current != null) {
-      setWidth(elementRef.current.offsetWidth + x);
+      if (x !== 0) setWidth(elementRef.current.offsetWidth + x);
     }
   });
-  const resizeHandleProps = useResize(handleResize.current, {
+  const { ref, isResizing, onMouseDown } = useResize(handleResizeRef.current, {
     isReverse: align === "end",
+    onEnd() {
+      const width = (ref.current?.parentElement as HTMLElement)?.offsetWidth;
+      setWidth(width);
+      onResize?.(width ?? 0);
+    },
   });
 
-  const tryPeek = useCallback(() => {
-    if (isCollapsed) {
-      if (flyout) {
-        setPeek(!peek);
-        !peek && onFlyout?.();
+  const tryPeek = (force?: boolean) => {
+    if (collapsed) {
+      if (enableFlyout) {
+        setPeek(force ?? !peek);
+        if (force ?? !peek) onFlyout?.();
       } else {
-        void toggleCollapse();
+        void onToggle(force);
       }
     }
-  }, [peek, flyout, isCollapsed, onFlyout, toggleCollapse]);
+  };
 
   useLayoutEffectDebugger(
     () => {
-      if (peek) {
+      if (!isResizing && peek) {
         const handler = (e: MouseEvent) => {
           if (
-            (e.target as HTMLElement).closest(`[data-ref="asideBody"]`) ==
-              null &&
-            (e.target as HTMLElement).closest(
-              `[data-ref="asidePlaceholder"]`,
-            ) == null
+            (e.target as HTMLElement).closest(`[data-dismiss="true"]`) !== null ||
+            ((e.target as HTMLElement).closest(`[data-ref="aside-container"]`) === null &&
+              (e.target as HTMLElement).closest(`[data-ref="aside-placeholder"]`) === null)
           ) {
             setPeek(false);
           }
@@ -182,10 +206,20 @@ export const Aside = ({
         return () => document.removeEventListener("mouseup", handler);
       }
     },
-    [peek],
+    [peek, isResizing],
     "Aside peek",
   );
 
+  useEffect(() => {
+    if (id) {
+      registerArea(id, (open) => {
+        tryPeek(open);
+      });
+      return () => unregisterArea(id);
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [id]);
+
   const widthStyles = useMemo(
     () => ({
       width,
@@ -197,88 +231,99 @@ export const Aside = ({
 
   return (
     <aside
-      className={classNames(classes.aside, className, "overflow-hidden grid")}
+      className={cn("fabric-aside", className, "grid relative min-h-0 z-2", collapsed && (enableFlyout ? "w-fit" : "w-0"))}
       data-align={align}
-      data-flyout={peek}
+      data-peek={peek}
+      data-flyout={enableFlyout}
       data-loading={loading}
-      data-collapsed={isCollapsed}
-      style={isCollapsed ? undefined : widthStyles}
+      data-collapsed={collapsed}
       data-testid={testId}
       data-test-value={testValue}
+      data-ref="aside"
+      style={
+        {
+          "--aside-margin": `calc(var(--spacing) * ${margin ?? 0})`,
+        } as React.CSSProperties
+      }
     >
-      <header
-        className={classNames(
-          classes.asideHeader,
-          headerClassName,
-          "grid area-head items-center",
-        )}
-        data-testid="aside-header"
-      >
-        {title && (
+      {collapsed && enableFlyout && (
+        <div
+          role="none"
+          onClick={() => tryPeek()}
+          data-ref="aside-placeholder"
+          className={cn("fabric-asidePlaceholder", classNames?.root, classNames?.body, "overflow-hidden")}
+        >
+          <StyleEffect />
+          {icon && <Icon className={cn("fabric-asideIcon", classNames?.icon, "p-1 text-lg select-none pointer-events-none")} {...getIconProps(icon)} />}
+          <div data-ref="aside-title" className={cn("fabric-asideTitle", classNames?.title, "truncate py-0.5 px-1 select-none pointer-events-none")}>
+            {title}
+          </div>
           <div
-            className={classNames(
-              classes.asideTitle,
-              "truncate py-0.5 px-1 select-none pointer-events-none",
-            )}
+            role="none"
+            data-dismiss="true"
+            className="area-[pin] p-2 hover:bg-primary-500/10 cursor-pointer flex items-center justify-center"
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={() => onToggle()}
           >
-            {title}
+            <Icon icon="icon-[mdi--pin-outline]" className="rotate-30" />
+          </div>
+        </div>
+      )}
+      <div data-ref="aside-container" className={cn("fabric-asideContainer", classNames?.root, "overflow-hidden grid")} ref={elementRef} style={widthStyles}>
+        <StyleEffect />
+        <Titlebar title={title} icon={icon} actions={actions} className={classNames?.titlebar} />
+        <Activity mode={peek || !collapsed ? "visible" : "hidden"}>
+          <ErrorBoundary>{children}</ErrorBoundary>
+        </Activity>
+
+        {enableFlyout && !hideCollapseHandle && (
+          <div
+            role="none"
+            data-dismiss="true"
+            className="area-[pin] p-2 hover:bg-primary-500/10 cursor-pointer flex items-center justify-center bg-tint-500/10"
+            onMouseDown={(e) => e.stopPropagation()}
+            onClick={() => onToggle()}
+          >
+            {!collapsed ? <Icon icon="icon-[mdi--pin]" /> : <Icon icon="icon-[mdi--pin-outline]" className="rotate-30" />}
           </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
+          ref={ref}
           role="none"
-          onClick={tryPeek}
-          data-ref="asidePlaceholder"
-          className={classes.asidePlaceholder}
+          data-ref="resize-handle"
+          onMouseDown={onMouseDown}
+          className={cn(
+            "fabric-asideResizer",
+            resizeable && "before:absolute before:top-1/2 before:-translate-y-1/2 before:content-['⋮'] before:leading-0",
+            "after:absolute after:transform-[height] after:border-solid after:border-s-2 after:h-0 after:m-auto after:inset-y-0 after:border-s-primary-500",
+            resizeable && "hover:after:duration-500 hover:after:h-full",
+            align === "start" ? "before:-inset-e-px" : "before:-inset-s-px",
+            isResizing && "after:h-full",
+            resizeable ? "w-1 cursor-col-resize bg-tint-50 border-x border-tint-300/50 -mx-px" : "w-0 border-0 pointer-events-none",
+          )}
         />
-      )}
-      <section
-        ref={elementRef}
-        data-ref="asideBody"
-        className={classNames(
-          classes.asideBody,
-          bodyClassName,
-          "overflow-hidden grid",
-        )}
-        style={isCollapsed ? widthStyles : undefined}
-        data-testid="aside-body"
-      >
-        <ErrorBoundary>{children}</ErrorBoundary>
-      </section>
-      {resizeable && (
+      </div>
+      {collapsable && !enableFlyout && !hideCollapseHandle && (
         <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",
+          role="none"
+          className={cn(
+            "absolute z-1 h-16 w-2 py-6 leading-0 m-auto inset-y-0",
+            "bg-dimmed text-dimmed outline outline-tint-200/50 rounded-sm cursor-pointer pointer-events-auto",
+            align === "start" ? "rounded-s-none -inset-e-2" : "rounded-e-none -inset-s-2",
+            !collapsed && "opacity-70 hover:opacity-100 hover:bg-default hover:outline-default",
           )}
-        />
+          onMouseDown={(e) => e.stopPropagation()}
+          onClick={() => onToggle()}
+        >
+          <i
+            className={
+              "-ms-1 inline-block rtl:-scale-100 " +
+              ((collapsed && align === "start") || (!collapsed && align === "end") ? "icon-[mdi--chevron-right]" : "icon-[mdi--chevron-left]")
+            }
+          />
+        </div>
       )}
     </aside>
   );
-};
+}

package/src/core/boundary/ErrorBoundary.tsx

@@ -1,37 +1,39 @@
-/*
+/**
  * React Fabric
- * @version: 1.0.0
- *
+ * @version 1.0.0
+ * @license MIT
+ * @copyright 2024 Adarsh Pastakia
  *
- * 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:
  *
- * 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 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.
+ * 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 { useLogger } from "@react-fabric/utilities";
-import classNames from "classnames";
-import { Component } from "react";
+import { Component, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Fragment } from "react/jsx-runtime";
-import { useMemoDebugger } from "../../hooks/useEffectDebugger";
-import { usePropToggle } from "../../hooks/usePropToggle";
-import { type ChildrenProp } from "../../types";
-import classes from "./ErrorBoundary.module.css";
+import { useGlobals } from "../../context/context";
+import type { ChildrenProp } from "../../types";
 import { ErrorIcon } from "./ErrorIcon";
-import { useGlobals } from "../../context/Global";
+
+interface ErrorComponentProps {
+  error?: string;
+  errorElement?: React.ComponentType<{ error?: string }>;
+}
 
 const DefaultError = ({ error }: { error?: string }) => {
   const { t } = useTranslation("core");
@@ -43,45 +45,31 @@ const DefaultError = ({ error }: { error?: string }) => {
   );
 };
 
-const ErrorMessage = ({ error, errorElement }: KeyValue) => {
+const ErrorMessage = ({ error, errorElement }: ErrorComponentProps) => {
   const { errorElement: globalError } = useGlobals();
-  const EE = useMemoDebugger(
-    () => errorElement ?? globalError ?? DefaultError,
-    [],
-    "ErrorBoundary element",
-  );
+  const EE = errorElement ?? globalError ?? DefaultError;
   return (
     <Fragment>
       <ErrorIcon />
-      <div className={classNames(classes.boundaryMessage, "p-2")}>
+      <div className="fabric-boundaryMessage p-2">
         <EE error={error} />
       </div>
     </Fragment>
   );
 };
 
-const ErrorStack = ({ error, stack }: KeyValue) => {
-  const [show, toggleShow] = usePropToggle(false);
-  useLogger().error(error, {}, stack);
+const ErrorStack = ({ error, stack }: { error?: string; stack: string }) => {
+  const [show, setShow] = useState(false);
+  console.error(error, {}, stack);
   return (
-    <div className={classNames(classes.boundaryDetail, "overflow-hidden grid")}>
-      <div
-        className={classNames(
-          classes.boundaryLink,
-          "px-2 py-1 text-xs text-end",
-        )}
-      >
-        <span role="link" tabIndex={0} className="link" onClick={toggleShow}>
+    <div className="fabric-boundaryDetail overflow-hidden grid">
+      <div className="fabric-boundaryLink px-2 py-1 text-xs text-end">
+        <span role="link" tabIndex={0} className="link" onClick={() => setShow(!show)} onKeyDown={() => setShow(!show)}>
           {show ? "Hide Detail" : "Show Detail"}
         </span>
       </div>
       {show && (
-        <div
-          className={classNames(
-            classes.boundaryStack,
-            "overflow-auto p-2 text-xs border-t",
-          )}
-        >
+        <div className="fabric-boundaryStack overflow-auto p-2 text-xs border-t">
           <pre className="whitespace-pre-wrap">{stack}</pre>
         </div>
       )}
@@ -90,7 +78,15 @@ const ErrorStack = ({ error, stack }: KeyValue) => {
 };
 
 /**
- * An error boundary wrapper higher-order component designed to provide consistent error display across the application will trap runtime errors
+ * Catches JavaScript errors in the child tree, logs them, and displays a fallback UI.
+ * It can be used to wrap any component tree to prevent the entire application from crashing due to errors in a specific part of the UI.
+ *
+ * @example
+ * ```tsx
+ * <ErrorBoundary errorElement={CustomErrorComponent}>
+ *   <MyComponent />
+ * </ErrorBoundary>
+ * ```
  */
 export class ErrorBoundary extends Component<
   {
@@ -105,7 +101,7 @@ export class ErrorBoundary extends Component<
     return { hasError: true, error: error.message, stack: error.stack };
   }
 
-  constructor(props: AnyObject) {
+  constructor(props: ErrorComponentProps & ChildrenProp) {
     super(props);
     this.state = { hasError: false };
   }
@@ -120,23 +116,9 @@ export class ErrorBoundary extends Component<
       const { errorElement: E } = this.props;
       // You can render any custom fallback UI
       return (
-        <div
-          className={classNames(
-            classes.errorBoundary,
-            "grid grid-rows-1 overflow-hidden p-0.5 rounded-capped",
-          )}
-        >
-          <div
-            className={classNames(
-              classes.boundaryContent,
-              "overflow-hidden grid rounded-capped",
-            )}
-          >
-            <ErrorMessage error={this.state.error} errorElement={E} />
-            {env === "development" && (
-              <ErrorStack error={this.state.error} stack={this.state.stack} />
-            )}
-          </div>
+        <div className="fabric-errorBoundary grid overflow-hidden rounded-capped">
+          <ErrorMessage error={this.state.error} errorElement={E} />
+          {env === "development" && <ErrorStack error={this.state.error} stack={this.state.stack as string} />}
         </div>
       );
     }