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

package/dist/esm/context/Global.js

@@ -1,14 +1,19 @@
 'use client';
 
-import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import i18next from 'i18next';
-import { useState, useEffect, useCallback, useContext, createContext } from 'react';
-import { HotKeyWrapper } from '../hotkeys/HotKeyWrapper.js';
-import { NotificationManager } from './NotificationCenter.js';
+import { useState, useEffectEvent, useEffect, useCallback, useLayoutEffect, useMemo } from 'react';
+import { flushSync } from 'react-dom';
+import { Toaster } from 'sonner';
+import { AnimationIndicator } from '../components/animations/Indicator.js';
+import { Icon } from '../components/icon/Icon.js';
+import { GlobalContext } from './context.js';
+import { ModalManagerProvider } from './ModalManager.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["errorElement"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var KEY_LOCALE = "ruf:locale";
 var KEY_CALENDAR = "ruf:calendar";
 var KEY_COLOR_SCHEME = "ruf:colorScheme";
@@ -21,60 +26,60 @@ var systemCalendar = function systemCalendar() {
   return (_ref2 = typeof window !== "undefined" ? localStorage.getItem(KEY_CALENDAR) : undefined) !== null && _ref2 !== void 0 ? _ref2 : "gregorian";
 };
 var systemColorScheme = function systemColorScheme() {
-  var _localStorage$getItem;
-  var theme = typeof window !== "undefined" ? (_localStorage$getItem = localStorage.getItem(KEY_COLOR_SCHEME)) !== null && _localStorage$getItem !== void 0 ? _localStorage$getItem : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light";
+  var _ref3;
+  var theme = typeof window !== "undefined" ? (_ref3 = localStorage.getItem(KEY_COLOR_SCHEME)) !== null && _ref3 !== void 0 ? _ref3 : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : "light";
   return theme;
 };
-var GlobalContext = /*#__PURE__*/createContext({});
 
 /**
- * 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>
+ * ```
  */
-var ApplicationProvider = function ApplicationProvider(_ref3) {
-  var children = _ref3.children,
-    errorElement = _ref3.errorElement,
-    defaultLocale = _ref3.defaultLocale,
-    defaultCalendar = _ref3.defaultCalendar,
-    defaultColorScheme = _ref3.defaultColorScheme;
-  var _useState = useState({
-      closeAll: function closeAll() {
-        return undefined;
-      },
-      showAlert: function showAlert() {
-        return undefined;
-      },
-      showError: function showError() {
-        return undefined;
-      },
-      showMessage: function showMessage() {
-        return undefined;
-      },
-      showToast: function showToast() {
-        return undefined;
-      }
+function ApplicationProvider(_ref4) {
+  var children = _ref4.children,
+    errorElement = _ref4.errorElement,
+    defaultLocale = _ref4.defaultLocale,
+    defaultCalendar = _ref4.defaultCalendar,
+    defaultColorScheme = _ref4.defaultColorScheme,
+    styleEffect = _ref4.styleEffect;
+  var _useState = useState(function () {
+      return defaultColorScheme !== null && defaultColorScheme !== void 0 ? defaultColorScheme : systemColorScheme();
     }),
     _useState2 = _slicedToArray(_useState, 2),
-    refNotifications = _useState2[0],
-    setNotificationRef = _useState2[1];
-  var _useState3 = useState(defaultColorScheme !== null && defaultColorScheme !== void 0 ? defaultColorScheme : systemColorScheme()),
+    colorScheme = _useState2[0],
+    setColorScheme = _useState2[1];
+  var _useState3 = useState(function () {
+      return defaultCalendar !== null && defaultCalendar !== void 0 ? defaultCalendar : systemCalendar();
+    }),
     _useState4 = _slicedToArray(_useState3, 2),
-    colorScheme = _useState4[0],
-    setColorScheme = _useState4[1];
-  var _useState5 = useState(defaultCalendar !== null && defaultCalendar !== void 0 ? defaultCalendar : systemCalendar()),
+    calendar = _useState4[0],
+    setCalendar = _useState4[1];
+  var _useState5 = useState(function () {
+      return defaultLocale !== null && defaultLocale !== void 0 ? defaultLocale : systemLocale();
+    }),
     _useState6 = _slicedToArray(_useState5, 2),
-    calendar = _useState6[0],
-    setCalendar = _useState6[1];
-  var _useState7 = useState(defaultLocale !== null && defaultLocale !== void 0 ? defaultLocale : systemLocale()),
+    locale = _useState6[0],
+    setLocale = _useState6[1];
+  var _useState7 = useState({}),
     _useState8 = _slicedToArray(_useState7, 2),
-    locale = _useState8[0],
-    setLocale = _useState8[1];
+    areas = _useState8[0],
+    setAreas = _useState8[1];
 
   /** ***************** set initial theme and locale dir  *******************/
-  useEffect(function () {
+  var init = useEffectEvent(function () {
     document.documentElement.lang = locale;
     if (!document.documentElement.dataset.colorScheme) {
       document.documentElement.dataset.colorScheme = colorScheme;
     } else {
+      // eslint-disable-next-line @eslint-react/set-state-in-effect
       setColorScheme(document.documentElement.dataset.colorScheme);
     }
     if (typeof window !== "undefined") {
@@ -86,14 +91,26 @@ var ApplicationProvider = function ApplicationProvider(_ref3) {
         //
       }
     }
-  }, []);
+  });
+
+  // eslint-disable-next-line @eslint-react/exhaustive-deps
+  useEffect(init, []);
 
   /** ***************** theme toggle *******************/
   var toggleColorScheme = useCallback(function (forceTheme) {
     var newTheme = forceTheme !== null && forceTheme !== void 0 ? forceTheme : colorScheme === "dark" ? "light" : "dark";
-    setColorScheme(newTheme);
-    localStorage.setItem(KEY_COLOR_SCHEME, newTheme);
-    document.documentElement.dataset.colorScheme = newTheme;
+    if (!document.activeViewTransition) document.startViewTransition(function () {
+      // eslint-disable-next-line @eslint-react/dom-no-flush-sync
+      flushSync(function () {
+        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]);
 
@@ -108,6 +125,7 @@ var ApplicationProvider = function ApplicationProvider(_ref3) {
     } catch (_unused2) {
       //
     }
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     setLocale(locale);
     return locale;
   }, []);
@@ -118,48 +136,113 @@ var ApplicationProvider = function ApplicationProvider(_ref3) {
     localStorage.setItem(KEY_CALENDAR, calendar);
     return calendar;
   }, []);
+  useLayoutEffect(function () {
+    if (defaultLocale) changeLocale(defaultLocale);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [defaultLocale]);
+  var registerArea = useCallback(function (area, callback) {
+    setAreas(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, area, callback));
+    });
+  }, []);
+  var unregisterArea = useCallback(function (area) {
+    setAreas(function (prev) {
+      var newAreas = _objectSpread({}, prev);
+      delete newAreas[area];
+      return newAreas;
+    });
+  }, []);
+  var toggleArea = useCallback(function (area, open) {
+    if (areas[area]) areas[area](open);
+  }, [areas]);
+  var _useState9 = useState(),
+    _useState0 = _slicedToArray(_useState9, 2),
+    alert = _useState0[0],
+    setAlert = _useState0[1];
+  var showAlert = useCallback(function (alert) {
+    setAlert(alert);
+  }, []);
+  var isDark = useMemo(function () {
+    return colorScheme === "dark";
+  }, [colorScheme]);
 
   /** ***************** context provider *******************/
-  return /*#__PURE__*/jsxs(GlobalContext.Provider, {
+  return /*#__PURE__*/jsxs(GlobalContext, {
     value: {
       errorElement: errorElement,
+      styleEffect: styleEffect,
+      showAlert: showAlert,
+      registerArea: registerArea,
+      unregisterArea: unregisterArea,
+      toggleArea: toggleArea,
       changeLocale: changeLocale,
       changeCalendar: changeCalendar,
       toggleColorScheme: toggleColorScheme,
+      isDark: isDark,
       currentLocale: locale,
       currentCalendar: calendar,
-      currentColorScheme: colorScheme,
-      notificationManager: refNotifications
+      currentColorScheme: colorScheme
     },
-    children: [/*#__PURE__*/jsx(HotKeyWrapper, {
+    children: [/*#__PURE__*/jsx(Toaster, {
+      id: "toasting",
+      theme: colorScheme,
+      visibleToasts: 18,
+      toastOptions: {
+        className: "fabric-toast",
+        unstyled: true
+      },
+      icons: {
+        error: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-danger-700",
+          type: "cross"
+        }),
+        info: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-info-700",
+          type: "info"
+        }),
+        success: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-success-700",
+          type: "check"
+        }),
+        warning: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-warning-700",
+          type: "exclaim"
+        }),
+        loading: /*#__PURE__*/jsx(Icon, {
+          icon: "icon-[svg-spinners--clock]",
+          className: "text-xl"
+        })
+      }
+    }), /*#__PURE__*/jsx(Toaster, {
+      id: "messaging",
+      theme: colorScheme,
+      visibleToasts: 9,
+      toastOptions: {
+        className: "fabric-message",
+        unstyled: true
+      },
+      icons: {
+        error: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-danger-300",
+          type: "cross"
+        }),
+        info: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-info-300",
+          type: "info"
+        }),
+        success: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-success-300",
+          type: "check"
+        }),
+        warning: /*#__PURE__*/jsx(AnimationIndicator, {
+          className: "text-lg text-warning-300",
+          type: "exclaim"
+        })
+      }
+    }), alert, /*#__PURE__*/jsx(ModalManagerProvider, {
       children: children
-    }), /*#__PURE__*/jsx(NotificationManager, {
-      onLoad: setNotificationRef
     })]
   });
-};
-
-/**
- * internal usage only
- * @internal
- */
-var useGlobals = function useGlobals() {
-  return useContext(GlobalContext);
-};
-
-/**
- * global application context
- */
-var useApplicationContext = function useApplicationContext() {
-  var _useContext = useContext(GlobalContext);
-    _useContext.errorElement;
-    var rest = _objectWithoutProperties(_useContext, _excluded);
-  return rest;
-};
-var useNotificationService = function useNotificationService() {
-  var _useContext2 = useContext(GlobalContext),
-    notificationManager = _useContext2.notificationManager;
-  return notificationManager !== null && notificationManager !== void 0 ? notificationManager : {};
-};
+}
 
-export { ApplicationProvider, GlobalContext, useApplicationContext, useGlobals, useNotificationService };
+export { ApplicationProvider };

package/dist/esm/context/ModalManager.js

@@ -0,0 +1,60 @@
+'use client';
+
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import { useState, useCallback } from 'react';
+import { ModalContext } from './context.js';
+import { jsx } from 'react/jsx-runtime';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function ModalManagerProvider(_ref) {
+  var children = _ref.children;
+  var _useState = useState([]),
+    _useState2 = _slicedToArray(_useState, 2),
+    modalHistory = _useState2[0],
+    setModalHistory = _useState2[1];
+  var _useState3 = useState({}),
+    _useState4 = _slicedToArray(_useState3, 2),
+    modalCallbacks = _useState4[0],
+    setModalCallbacks = _useState4[1];
+  var registerModal = useCallback(function (id, callback) {
+    setModalHistory(function (prev) {
+      return [].concat(_toConsumableArray(prev), [id]);
+    });
+    setModalCallbacks(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, _defineProperty({}, id, callback));
+    });
+  }, []);
+  var removeModal = useCallback(function (id) {
+    setModalHistory(function (prev) {
+      return prev.slice(0, prev.indexOf(id));
+    });
+    setModalCallbacks(function (prev) {
+      delete prev[id];
+      return prev;
+    });
+  }, []);
+  var closeModal = function closeModal(id) {
+    var _modalCallbacks$id;
+    (_modalCallbacks$id = modalCallbacks[id]) === null || _modalCallbacks$id === void 0 || _modalCallbacks$id.call(modalCallbacks);
+  };
+  var closeAllModal = function closeAllModal() {
+    Object.values(modalCallbacks).map(function (cb) {
+      return cb();
+    });
+  };
+  return /*#__PURE__*/jsx(ModalContext, {
+    value: {
+      registerModal: registerModal,
+      removeModal: removeModal,
+      closeModal: closeModal,
+      closeAllModal: closeAllModal,
+      activeModal: modalHistory[modalHistory.length - 1]
+    },
+    children: children
+  });
+}
+
+export { ModalManagerProvider };

package/dist/esm/context/context.js

@@ -0,0 +1,40 @@
+'use client';
+
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import { use, createContext } from 'react';
+
+var _excluded = ["errorElement", "registerArea", "unregisterArea", "toggleArea", "styleEffect"];
+var GlobalContext = /*#__PURE__*/createContext({});
+var ModalContext = /*#__PURE__*/createContext({});
+
+/**
+ * internal usage only
+ * @internal
+ */
+var useGlobals = function useGlobals() {
+  return 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();
+ * ```
+ */
+var useApplicationContext = function useApplicationContext() {
+  var _use = use(GlobalContext);
+    _use.errorElement;
+    _use.registerArea;
+    _use.unregisterArea;
+    _use.toggleArea;
+    _use.styleEffect;
+    var rest = _objectWithoutProperties(_use, _excluded);
+  return rest;
+};
+
+export { GlobalContext, ModalContext, useApplicationContext, useGlobals };

package/dist/esm/core/areaToggle/AreaToggle.js

@@ -0,0 +1,41 @@
+'use client';
+
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { cloneElement } from 'react';
+import { useGlobals } from '../../context/context.js';
+
+function AreaToggle(_ref) {
+  var children = _ref.children,
+    id = _ref.id;
+  var _useGlobals = useGlobals(),
+    toggleArea = _useGlobals.toggleArea;
+  return /*#__PURE__*/cloneElement(children, {
+    onClick: function () {
+      var _onClick = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee(e) {
+        var _children$props$onCli, _children$props;
+        var res;
+        return _regeneratorRuntime.wrap(function (_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              e.stopPropagation();
+              _context.next = 1;
+              return Promise.resolve((_children$props$onCli = (_children$props = children.props).onClick) === null || _children$props$onCli === void 0 ? void 0 : _children$props$onCli.call(_children$props, e));
+            case 1:
+              res = _context.sent;
+              toggleArea(id, !!res);
+            case 2:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      function onClick(_x) {
+        return _onClick.apply(this, arguments);
+      }
+      return onClick;
+    }()
+  });
+}
+
+export { AreaToggle };