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

package/src/context/Global.tsx

@@ -1,158 +1,97 @@
-/*
+/**
  * 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 i18next from "i18next";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useState,
-  type ComponentType,
-  type FC,
-  type PropsWithChildren,
-} from "react";
-import { HotKeyWrapper } from "../hotkeys/HotKeyWrapper";
-import {
-  NotificationManager,
-  type NotificationManagerRef,
-} from "./NotificationCenter";
-
-interface State {
-  locale: string;
-  colorScheme: "light" | "dark";
-  calendar: "gregorian" | "hijri";
-}
+import type { PropsWithChildren } from "react";
+import { useCallback, useEffect, useEffectEvent, useLayoutEffect, useMemo, useState } from "react";
+import { flushSync } from "react-dom";
+import { Toaster } from "sonner";
+import { AnimationIndicator } from "../components/animations/Indicator";
+import { Icon } from "../components/icon/Icon";
+import type { State } from "./context";
+import { GlobalContext } from "./context";
+import { ModalManagerProvider } from "./ModalManager";
 
 export interface GlobalProps extends PropsWithChildren {
   /**
    * application default error display
    */
-  errorElement?: ComponentType<{ error?: string }>;
+  errorElement?: React.ComponentType<{ error?: string }>;
+
+  // Overlay effect
+  styleEffect?: "glass" | "matte";
 
   defaultLocale?: string;
   defaultCalendar?: State["calendar"];
   defaultColorScheme?: State["colorScheme"];
 }
 
-interface GlobalContextType {
-  /**
-   * change language locale
-   * @param locale
-   */
-  changeLocale: (locale: string) => string;
-  /**
-   * change date calendat
-   * @param locale
-   */
-  changeCalendar: (calendar: State["calendar"]) => State["calendar"];
-  /**
-   * toggle theme between light and dark
-   * or force to theme provided
-   * @param theme
-   */
-  toggleColorScheme: (
-    colorScheme?: State["colorScheme"],
-  ) => State["colorScheme"];
-  /**
-   * application default error display
-   */
-  errorElement: GlobalProps["errorElement"];
-
-  currentLocale: string;
-  currentCalendar: State["calendar"];
-  currentColorScheme: State["colorScheme"];
-
-  notificationManager: NotificationManagerRef;
-}
-
 const KEY_LOCALE = "ruf:locale";
 const KEY_CALENDAR = "ruf:calendar";
 const KEY_COLOR_SCHEME = "ruf:colorScheme";
 const systemLocale = () => {
-  return (
-    (typeof window !== "undefined"
-      ? localStorage.getItem(KEY_LOCALE)
-      : undefined) ?? "en"
-  );
+  return (typeof window !== "undefined" ? localStorage.getItem(KEY_LOCALE) : undefined) ?? "en";
 };
 const systemCalendar = () => {
-  return (
-    (typeof window !== "undefined"
-      ? (localStorage.getItem(KEY_CALENDAR) as AnyObject)
-      : undefined) ?? "gregorian"
-  );
+  return (typeof window !== "undefined" ? (localStorage.getItem(KEY_CALENDAR) as State["calendar"]) : undefined) ?? "gregorian";
 };
 const systemColorScheme = () => {
   const theme: AnyObject =
     typeof window !== "undefined"
-      ? localStorage.getItem(KEY_COLOR_SCHEME) ??
-        (window.matchMedia("(prefers-color-scheme: dark)").matches
-          ? "dark"
-          : "light")
+      ? ((localStorage.getItem(KEY_COLOR_SCHEME) as State["colorScheme"]) ?? (window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light"))
       : "light";
-  return theme;
+  return theme as "light" | "dark";
 };
 
-export const GlobalContext = createContext<GlobalContextType>(
-  {} as GlobalContextType,
-);
-
 /**
- * global context provider
+ * Root context provider for the application.
+ * Wraps the app with global state management for locale, calendar system, and color scheme,
+ * and provides context to all descendant components via `GlobalContext`.
+ *
+ * @example
+ * ```tsx
+ * <ApplicationProvider defaultLocale="en" defaultColorScheme="dark">
+ *    <App />
+ * </ApplicationProvider>
+ * ```
  */
-export const ApplicationProvider: FC<GlobalProps> = ({
-  children,
-  errorElement,
-  defaultLocale,
-  defaultCalendar,
-  defaultColorScheme,
-}) => {
-  const [refNotifications, setNotificationRef] =
-    useState<NotificationManagerRef>({
-      closeAll: () => undefined,
-      showAlert: () => undefined as AnyObject,
-      showError: () => undefined as AnyObject,
-      showMessage: () => undefined as AnyObject,
-      showToast: () => undefined as AnyObject,
-    });
-  const [colorScheme, setColorScheme] = useState<State["colorScheme"]>(
-    defaultColorScheme ?? systemColorScheme(),
-  );
-  const [calendar, setCalendar] = useState<State["calendar"]>(
-    defaultCalendar ?? systemCalendar(),
-  );
-  const [locale, setLocale] = useState<State["locale"]>(
-    defaultLocale ?? systemLocale(),
-  );
+export function ApplicationProvider({ children, errorElement, defaultLocale, defaultCalendar, defaultColorScheme, styleEffect }: GlobalProps) {
+  const [colorScheme, setColorScheme] = useState<State["colorScheme"]>(() => defaultColorScheme ?? systemColorScheme());
+  const [calendar, setCalendar] = useState<State["calendar"]>(() => defaultCalendar ?? systemCalendar());
+  const [locale, setLocale] = useState<State["locale"]>(() => defaultLocale ?? systemLocale());
+
+  const [areas, setAreas] = useState<Record<string, (open?: boolean) => void>>({});
 
   /** ***************** set initial theme and locale dir  *******************/
-  useEffect(() => {
+  const init = useEffectEvent(() => {
     document.documentElement.lang = locale;
     if (!document.documentElement.dataset.colorScheme) {
       document.documentElement.dataset.colorScheme = colorScheme;
     } else {
-      setColorScheme(document.documentElement.dataset.colorScheme as AnyObject);
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
+      setColorScheme(document.documentElement.dataset.colorScheme as "light" | "dark");
     }
     if (typeof window !== "undefined") {
       try {
@@ -163,19 +102,31 @@ export const ApplicationProvider: FC<GlobalProps> = ({
         //
       }
     }
-  }, []);
+  });
+
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
+  useEffect(init, []);
 
   /** ***************** theme toggle *******************/
   const toggleColorScheme = useCallback(
     (forceTheme?: State["colorScheme"]) => {
-      const newTheme =
-        forceTheme ?? (colorScheme === "dark" ? "light" : "dark");
-      setColorScheme(newTheme);
-      localStorage.setItem(KEY_COLOR_SCHEME, newTheme);
-      document.documentElement.dataset.colorScheme = newTheme;
+      const newTheme = forceTheme ?? (colorScheme === "dark" ? "light" : "dark");
+      if (!document.activeViewTransition)
+        document.startViewTransition(() => {
+          // eslint-disable-next-line @eslint-react/dom-no-flush-sync
+          flushSync(() => {
+            setColorScheme(newTheme);
+            localStorage.setItem(KEY_COLOR_SCHEME, newTheme);
+            document.documentElement.dataset.colorScheme = newTheme;
+          });
+        });
+      else {
+        setColorScheme(newTheme);
+        localStorage.setItem(KEY_COLOR_SCHEME, newTheme);
+        document.documentElement.dataset.colorScheme = newTheme;
+      }
       return newTheme;
     },
-
     [colorScheme],
   );
 
@@ -190,6 +141,7 @@ export const ApplicationProvider: FC<GlobalProps> = ({
     } catch {
       //
     }
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setLocale(locale);
     return locale;
   }, []);
@@ -201,41 +153,89 @@ export const ApplicationProvider: FC<GlobalProps> = ({
     return calendar;
   }, []);
 
+  useLayoutEffect(() => {
+    if (defaultLocale) changeLocale(defaultLocale);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [defaultLocale]);
+
+  const registerArea = useCallback((area: string, callback: (open?: boolean) => void) => {
+    setAreas((prev) => ({ ...prev, [area]: callback }));
+  }, []);
+
+  const unregisterArea = useCallback((area: string) => {
+    setAreas((prev) => {
+      const newAreas = { ...prev };
+      delete newAreas[area];
+      return newAreas;
+    });
+  }, []);
+
+  const toggleArea = useCallback(
+    (area: string, open?: boolean) => {
+      if (areas[area]) areas[area](open);
+    },
+    [areas],
+  );
+
+  const [alert, setAlert] = useState<React.ReactElement>();
+  const showAlert = useCallback((alert?: React.ReactElement) => {
+    setAlert(alert);
+  }, []);
+
+  const isDark = useMemo(() => colorScheme === "dark", [colorScheme]);
+
   /** ***************** context provider *******************/
   return (
-    <GlobalContext.Provider
+    <GlobalContext
       value={{
         errorElement,
+        styleEffect,
+        showAlert,
+        registerArea,
+        unregisterArea,
+        toggleArea,
         changeLocale,
         changeCalendar,
         toggleColorScheme,
+        isDark,
         currentLocale: locale,
         currentCalendar: calendar,
         currentColorScheme: colorScheme,
-        notificationManager: refNotifications as AnyObject,
       }}
     >
-      <HotKeyWrapper>{children}</HotKeyWrapper>
-      <NotificationManager onLoad={setNotificationRef} />
-    </GlobalContext.Provider>
+      <Toaster
+        id="toasting"
+        theme={colorScheme}
+        visibleToasts={18}
+        toastOptions={{
+          className: "fabric-toast",
+          unstyled: true,
+        }}
+        icons={{
+          error: <AnimationIndicator className="text-lg text-danger-700" type="cross" />,
+          info: <AnimationIndicator className="text-lg text-info-700" type="info" />,
+          success: <AnimationIndicator className="text-lg text-success-700" type="check" />,
+          warning: <AnimationIndicator className="text-lg text-warning-700" type="exclaim" />,
+          loading: <Icon icon="icon-[svg-spinners--clock]" className="text-xl" />,
+        }}
+      />
+      <Toaster
+        id="messaging"
+        theme={colorScheme}
+        visibleToasts={9}
+        toastOptions={{
+          className: "fabric-message",
+          unstyled: true,
+        }}
+        icons={{
+          error: <AnimationIndicator className="text-lg text-danger-300" type="cross" />,
+          info: <AnimationIndicator className="text-lg text-info-300" type="info" />,
+          success: <AnimationIndicator className="text-lg text-success-300" type="check" />,
+          warning: <AnimationIndicator className="text-lg text-warning-300" type="exclaim" />,
+        }}
+      />
+      {alert}
+      <ModalManagerProvider>{children}</ModalManagerProvider>
+    </GlobalContext>
   );
-};
-
-/**
- * internal usage only
- * @internal
- */
-export const useGlobals = () => useContext(GlobalContext);
-
-/**
- * global application context
- */
-export const useApplicationContext = () => {
-  const { errorElement, ...rest } = useContext(GlobalContext);
-  return rest;
-};
-
-export const useNotificationService = () => {
-  const { notificationManager } = useContext(GlobalContext);
-  return notificationManager ?? {};
-};
+}

package/src/context/ModalManager.tsx

@@ -0,0 +1,68 @@
+/**
+ * React Fabric
+ * @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:
+ *
+ * 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 type { PropsWithChildren } from "react";
+import { use, useCallback, useState } from "react";
+import { ModalContext } from "./context";
+
+export function ModalManagerProvider({ children }: PropsWithChildren) {
+  const [modalHistory, setModalHistory] = useState<string[]>([]);
+  const [modalCallbacks, setModalCallbacks] = useState<KeyValue<() => void>>({});
+
+  const registerModal = useCallback((id: string, callback: () => void) => {
+    setModalHistory((prev) => [...prev, id]);
+    setModalCallbacks((prev) => ({ ...prev, [id]: callback }));
+  }, []);
+
+  const removeModal = useCallback((id: string) => {
+    setModalHistory((prev) => prev.slice(0, prev.indexOf(id)));
+    setModalCallbacks((prev) => {
+      delete prev[id];
+      return prev;
+    });
+  }, []);
+
+  const closeModal = (id: string) => {
+    modalCallbacks[id]?.();
+  };
+
+  const closeAllModal = () => {
+    Object.values(modalCallbacks).map((cb) => cb());
+  };
+
+  return (
+    <ModalContext
+      value={{ registerModal, removeModal, closeModal, closeAllModal, activeModal: modalHistory[modalHistory.length - 1] }}
+    >
+      {children}
+    </ModalContext>
+  );
+}
+
+export const useModalManager = () => {
+  const { closeModal, closeAllModal } = use(ModalContext);
+
+  return { closeModal, closeAllModal };
+};

package/src/context/context.ts

@@ -0,0 +1,111 @@
+/**
+ * React Fabric
+ * @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:
+ *
+ * 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 { createContext, use } from "react";
+import type { GlobalProps } from "./Global";
+
+export interface State {
+  locale: string;
+  colorScheme: "light" | "dark";
+  calendar: "gregorian" | "hijri";
+}
+
+interface GlobalContextType {
+  /**
+   * change language locale
+   */
+  changeLocale: (locale: string) => string;
+  /**
+   * change date calendar
+   */
+  changeCalendar: (calendar: State["calendar"]) => State["calendar"];
+  /**
+   * toggle theme between light and dark
+   * or force to theme provided
+   */
+  toggleColorScheme: (colorScheme?: State["colorScheme"]) => State["colorScheme"];
+  /**
+   * application default error display
+   */
+  errorElement: GlobalProps["errorElement"];
+
+  /**
+   * collapsable layout sections
+   */
+  registerArea: (area: string, callback: (open?: boolean) => void) => void;
+  unregisterArea: (area: string) => void;
+  toggleArea: (area: string, open?: boolean) => void;
+
+  showAlert: (alert?: React.ReactElement) => void;
+
+  styleEffect?: "glass" | "matte";
+
+  isDark: boolean;
+  currentLocale: string;
+  currentCalendar: State["calendar"];
+  currentColorScheme: State["colorScheme"];
+}
+
+export const GlobalContext = createContext<GlobalContextType>({} as GlobalContextType);
+
+interface ModalContextType {
+  activeModal?: string;
+  registerModal: (id: string, callback: () => void) => void;
+  removeModal: (id: string) => void;
+
+  closeModal: (id: string) => void;
+  closeAllModal: () => void;
+}
+
+export const ModalContext = createContext<ModalContextType>({} as ModalContextType);
+
+/**
+ * internal usage only
+ * @internal
+ */
+export const useGlobals = () => use(GlobalContext);
+
+/**
+ * Hook to access the global application context.
+ * This hook provides access to the global context values, including the current locale, calendar, and color scheme.
+ *
+ * @returns {GlobalContextType} The global context values excluding the error element.
+ *
+ * @example
+ * ```jsx
+ * const { changeLocale, currentLocale, toggleColorScheme } = useApplicationContext();
+ * ```
+ */
+export const useApplicationContext = () => {
+  const {
+    errorElement: _,
+    registerArea: __,
+    unregisterArea: ___,
+    toggleArea: ____,
+    styleEffect: _____,
+    ...rest
+  } = use(GlobalContext);
+  return rest;
+};

package/src/core/areaToggle/AreaToggle.tsx

@@ -0,0 +1,45 @@
+/**
+ * React Fabric
+ * @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:
+ *
+ * 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 { cloneElement } from "react";
+import { useGlobals } from "../../context/context";
+import type { CallbackReturn } from "../../types";
+
+export function AreaToggle({
+  children,
+  id,
+}: {
+  id: string;
+  children: React.ReactElement<{ onClick?: (e: React.MouseEvent) => CallbackReturn }>;
+}) {
+  const { toggleArea } = useGlobals();
+  return cloneElement(children, {
+    onClick: async (e: React.MouseEvent) => {
+      e.stopPropagation();
+      const res = await Promise.resolve(children.props.onClick?.(e));
+      toggleArea(id, !!res);
+    },
+  });
+}