@unbxd-ui/unbxd-react-components 0.2.145-beta.8 → 0.2.145-beta.9

package/components/DataLoader/DataLoader.stories.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.WithErrorHandling = exports.WithCustomLoader = exports.MultipleRequests = exports.Interactive = exports.Default = void 0;
+exports["default"] = exports.WithErrorHandling = exports.WithDifferentLoaderStates = exports.WithCustomLoader = exports.MultipleRequests = exports.Interactive = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _DataLoader = _interopRequireDefault(require("./DataLoader"));
+var _PageLoader = _interopRequireDefault(require("../PageLoader"));
 var _dataLoader = _interopRequireDefault(require("../../core/dataLoader"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
@@ -47,17 +48,13 @@ var mockRequests = [{
   }
 }];
 
-// Custom loader component example
+// Custom loader component using PageLoader
 var CustomLoader = function CustomLoader() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    style: {
-      padding: '20px',
-      border: '1px solid #ccc',
-      borderRadius: '4px',
-      textAlign: 'center',
-      background: '#f5f5f5'
-    }
-  }, "Loading data...");
+  return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], {
+    header: "Loading Data",
+    messages: ['Fetching from API...', 'Processing data...', 'Almost ready...'],
+    showLoader: true
+  });
 };
 
 // Custom error component example
@@ -149,7 +146,8 @@ var WithErrorHandling = exports.WithErrorHandling = {
       onDataFailed: function onDataFailed(err) {
         console.error('Error:', err);
         setError(err);
-      }
+      },
+      Loader: CustomLoader
     }, error ? /*#__PURE__*/_react["default"].createElement(ErrorDisplay, {
       error: error
     }) : /*#__PURE__*/_react["default"].createElement("div", null, "Data loaded successfully!")));
@@ -182,7 +180,8 @@ var MultipleRequests = exports.MultipleRequests = {
       },
       onDataFailed: function onDataFailed(error) {
         return console.error('Error:', error);
-      }
+      },
+      Loader: CustomLoader
     }, /*#__PURE__*/_react["default"].createElement("div", null, "Multiple requests completed!"));
   }
 };
@@ -193,4 +192,69 @@ var Interactive = exports.Interactive = {
     requests: mockRequests,
     children: /*#__PURE__*/_react["default"].createElement("div", null, "Data loaded successfully!")
   }
+};
+
+// Example with different PageLoader configurations
+var WithDifferentLoaderStates = exports.WithDifferentLoaderStates = {
+  render: function render() {
+    var _React$useState3 = _react["default"].useState('simple'),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      loadingState = _React$useState4[0],
+      setLoadingState = _React$useState4[1];
+    var SimpleLoader = function SimpleLoader() {
+      return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], {
+        showLoader: true
+      });
+    };
+    var HeaderLoader = function HeaderLoader() {
+      return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], {
+        header: "Fetching User Data",
+        showLoader: true
+      });
+    };
+    var MessagesLoader = function MessagesLoader() {
+      return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], {
+        header: "Loading Dashboard",
+        messages: ['Connecting to database...', 'Fetching user preferences...', 'Loading dashboard widgets...', 'Finalizing setup...'],
+        showLoader: true
+      });
+    };
+    var getLoader = function getLoader() {
+      switch (loadingState) {
+        case 'simple':
+          return SimpleLoader;
+        case 'header':
+          return HeaderLoader;
+        case 'messages':
+          return MessagesLoader;
+        default:
+          return SimpleLoader;
+      }
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        marginBottom: '20px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("label", null, "Loader Type: "), /*#__PURE__*/_react["default"].createElement("select", {
+      value: loadingState,
+      onChange: function onChange(e) {
+        return setLoadingState(e.target.value);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("option", {
+      value: "simple"
+    }, "Simple Loader"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "header"
+    }, "With Header"), /*#__PURE__*/_react["default"].createElement("option", {
+      value: "messages"
+    }, "With Cycling Messages"))), /*#__PURE__*/_react["default"].createElement(_DataLoader["default"], {
+      requests: mockRequests,
+      Loader: getLoader(),
+      onDataLoaded: function onDataLoaded(results) {
+        return console.log('Data loaded:', results);
+      },
+      onDataFailed: function onDataFailed(error) {
+        return console.error('Error:', error);
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, "Data loaded successfully!")));
+  }
 };

package/components/PageLoader/PageLoader.js

@@ -0,0 +1,84 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _excluded = ["className", "header", "messages", "showLoader", "messageInterval"];
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+var PageLoader = function PageLoader(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    header = _ref.header,
+    _ref$messages = _ref.messages,
+    messages = _ref$messages === void 0 ? [] : _ref$messages,
+    _ref$showLoader = _ref.showLoader,
+    showLoader = _ref$showLoader === void 0 ? true : _ref$showLoader,
+    _ref$messageInterval = _ref.messageInterval,
+    messageInterval = _ref$messageInterval === void 0 ? 2500 : _ref$messageInterval,
+    restProps = _objectWithoutProperties(_ref, _excluded);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    currentMessageIndex = _useState2[0],
+    setCurrentMessageIndex = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    fade = _useState4[0],
+    setFade = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if (messages.length > 1) {
+      var interval = setInterval(function () {
+        setFade(false); // Start fade-out
+        setTimeout(function () {
+          setCurrentMessageIndex(function (prev) {
+            return (prev + 1) % messages.length;
+          });
+          setFade(true); // Start fade-in
+        }, 250); // Adjust for smoother transition (half of fade duration)
+      }, messageInterval); // Change message every messageInterval
+      return function () {
+        return clearInterval(interval);
+      };
+    }
+  }, [messages, messageInterval]); // Add messageInterval to dependency array
+
+  if (!showLoader) return null;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader-wrapper"
+  }, /*#__PURE__*/_react["default"].createElement("div", _extends({
+    className: "page-loader ".concat(className)
+  }, restProps), /*#__PURE__*/_react["default"].createElement("img", {
+    src: "https://d3t0v15wul5tya.cloudfront.net/selfserve-ui/prod/assets/images/blueLoader.svg",
+    alt: "Loading..."
+  })), header && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader-header"
+  }, header), messages.length > 0 && /*#__PURE__*/_react["default"].createElement("div", {
+    className: "loader-messages ".concat(fade ? "fade-in" : "fade-out")
+  }, messages[currentMessageIndex]));
+};
+PageLoader.propTypes = {
+  /** Additional CSS classes for the loader */
+  className: _propTypes["default"].string,
+  /** Header text to display above the loader */
+  header: _propTypes["default"].string,
+  /** Array of messages that cycle automatically */
+  messages: _propTypes["default"].arrayOf(_propTypes["default"].string),
+  /** Whether to show the loader */
+  showLoader: _propTypes["default"].bool,
+  /** Interval in milliseconds for message changes (default: 2500ms) */
+  messageInterval: _propTypes["default"].number
+};
+var _default = exports["default"] = PageLoader;

package/components/PageLoader/PageLoader.stories.js

@@ -0,0 +1,276 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.WithSingleMessage = exports.WithHeader = exports.WithCyclingMessages = exports.SlowCyclingMessages = exports.MinimalLoader = exports.LongLoadingExample = exports.Interactive = exports.FastCyclingMessages = exports.Default = exports.DataLoadingSimulation = exports.CustomizableInterval = exports.CustomStyling = exports.AccessibilityFeatures = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _PageLoader = _interopRequireDefault(require("./PageLoader"));
+var _Button = _interopRequireDefault(require("../Button/Button"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+var meta = {
+  title: 'Components/PageLoader',
+  component: _PageLoader["default"],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'A full-screen page loader with animated dots and cycling messages. Shows a wave-scanning animation with optional header and rotating status messages.'
+      }
+    }
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the loader'
+    },
+    header: {
+      control: 'text',
+      description: 'Header text to display above the loader'
+    },
+    messages: {
+      control: 'object',
+      description: 'Array of messages that cycle automatically'
+    },
+    showLoader: {
+      control: 'boolean',
+      description: 'Whether to show the loader'
+    },
+    messageInterval: {
+      control: {
+        type: 'range',
+        min: 500,
+        max: 10000,
+        step: 500
+      },
+      description: 'Interval in milliseconds for message changes (default: 2500ms)'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Default story
+var Default = exports.Default = {
+  args: {
+    showLoader: true
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// With header only
+var WithHeader = exports.WithHeader = {
+  args: {
+    showLoader: true,
+    header: "Loading Application"
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// With header and single message
+var WithSingleMessage = exports.WithSingleMessage = {
+  args: {
+    showLoader: true,
+    header: "Processing Request",
+    messages: ["Please wait while we process your request..."]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// With cycling messages
+var WithCyclingMessages = exports.WithCyclingMessages = {
+  args: {
+    showLoader: true,
+    header: "Loading Dashboard",
+    messages: ["Initializing application...", "Loading user preferences...", "Fetching latest data...", "Almost ready..."],
+    messageInterval: 2000 // Slightly faster than default
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Fast cycling messages
+var FastCyclingMessages = exports.FastCyclingMessages = {
+  args: {
+    showLoader: true,
+    header: "Fast Message Cycling",
+    messages: ["Message 1", "Message 2", "Message 3", "Message 4"],
+    messageInterval: 1000 // 1 second interval
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Slow cycling messages
+var SlowCyclingMessages = exports.SlowCyclingMessages = {
+  args: {
+    showLoader: true,
+    header: "Slow Message Cycling",
+    messages: ["Taking time to process...", "This might take a while...", "Please be patient...", "Still working on it..."],
+    messageInterval: 5000 // 5 second interval
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Customizable interval demo
+var CustomizableInterval = exports.CustomizableInterval = {
+  args: {
+    showLoader: true,
+    header: "Customizable Message Speed",
+    messages: ["Adjust the controls to change speed", "Use the messageInterval prop", "Perfect for different use cases", "From fast alerts to slow processes"],
+    messageInterval: 2500 // Default interval
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Long loading simulation
+var LongLoadingExample = exports.LongLoadingExample = {
+  args: {
+    showLoader: true,
+    header: "Setting up your workspace",
+    messages: ["Connecting to servers...", "Downloading configuration...", "Installing dependencies...", "Optimizing performance...", "Finalizing setup...", "Almost there..."]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Interactive demo with toggle
+var Interactive = exports.Interactive = {
+  args: {
+    header: "Interactive Demo",
+    messages: ["Click the button to toggle the loader", "Watch the messages cycle", "Notice the smooth animations"]
+  },
+  render: function render(args) {
+    var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isLoading = _useState2[0],
+      setIsLoading = _useState2[1];
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem',
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "PageLoader Interactive Demo"), /*#__PURE__*/_react["default"].createElement("p", null, "Click the button below to show/hide the page loader:"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: function onClick() {
+        return setIsLoading(!isLoading);
+      },
+      appearance: "primary"
+    }, isLoading ? 'Hide Loader' : 'Show Loader'), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], _extends({}, args, {
+      showLoader: isLoading
+    })));
+  }
+};
+
+// Minimal loader (just animation)
+var MinimalLoader = exports.MinimalLoader = {
+  args: {
+    showLoader: true
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args);
+  }
+};
+
+// Custom styling example
+var CustomStyling = exports.CustomStyling = {
+  args: {
+    showLoader: true,
+    className: "custom-loader",
+    header: "Custom Styled Loader",
+    messages: ["This loader has custom styling applied"]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("style", null, "\n        .custom-loader .RCB-page-loader-backdrop {\n          background: rgba(0, 0, 0, 0.8);\n        }\n        .custom-loader .RCB-page-loader-title {\n          color: #fff;\n        }\n        .custom-loader .RCB-page-loader-message {\n          color: #ccc;\n        }\n      "), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args));
+  }
+};
+
+// Accessibility demo
+var AccessibilityFeatures = exports.AccessibilityFeatures = {
+  args: {
+    showLoader: true,
+    header: "Accessibility Demo",
+    messages: ["This loader includes ARIA attributes", "Supports reduced motion preferences", "Screen reader friendly", "High contrast mode compatible"]
+  },
+  render: function render(args) {
+    return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem',
+        marginBottom: '1rem',
+        background: '#f5f5f5'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h3", null, "Accessibility Features:"), /*#__PURE__*/_react["default"].createElement("ul", {
+      style: {
+        textAlign: 'left',
+        maxWidth: '600px',
+        margin: '0 auto'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "ARIA Labels:"), " Proper role, aria-modal, aria-label, aria-live attributes"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Reduced Motion:"), " Respects prefers-reduced-motion setting"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "High Contrast:"), " Adapts to high contrast mode"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Screen Readers:"), " Announces loading state and updates"), /*#__PURE__*/_react["default"].createElement("li", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Keyboard Navigation:"), " Properly manages focus"))), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], args));
+  }
+};
+
+// Data loading simulation
+var DataLoadingSimulation = exports.DataLoadingSimulation = {
+  args: {
+    header: "Data Loading Simulation"
+  },
+  render: function render(args) {
+    var _useState3 = (0, _react.useState)(0),
+      _useState4 = _slicedToArray(_useState3, 2),
+      currentStep = _useState4[0],
+      setCurrentStep = _useState4[1];
+    var _useState5 = (0, _react.useState)(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isLoading = _useState6[0],
+      setIsLoading = _useState6[1];
+    var loadingSteps = ["Connecting to database...", "Authenticating user...", "Fetching user data...", "Loading preferences...", "Preparing dashboard...", "Complete!"];
+    var startLoading = function startLoading() {
+      setIsLoading(true);
+      setCurrentStep(0);
+      var interval = setInterval(function () {
+        setCurrentStep(function (prev) {
+          if (prev >= loadingSteps.length - 1) {
+            clearInterval(interval);
+            setTimeout(function () {
+              return setIsLoading(false);
+            }, 1000);
+            return prev;
+          }
+          return prev + 1;
+        });
+      }, 1500);
+    };
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        padding: '2rem',
+        textAlign: 'center'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("h2", null, "Simulated Data Loading Process"), /*#__PURE__*/_react["default"].createElement("p", null, "This demo simulates a real loading sequence with step-by-step updates:"), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
+      onClick: startLoading,
+      disabled: isLoading,
+      appearance: "primary"
+    }, "Start Loading Simulation"), /*#__PURE__*/_react["default"].createElement(_PageLoader["default"], _extends({}, args, {
+      showLoader: isLoading,
+      messages: [loadingSteps[currentStep]]
+    })));
+  }
+};

package/components/PageLoader/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _PageLoader = _interopRequireDefault(require("./PageLoader"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var _default = exports["default"] = _PageLoader["default"];

package/components/PageLoader/pageLoaderCore.css

@@ -0,0 +1 @@
+.page-loader{width:100%;height:fit-content;display:flex;justify-content:center;align-items:center}.loader-wrapper{text-align:center}.loader-header{color:#17173A;font-weight:600;font-size:16px;margin-top:15px}.loader-messages{color:#6F6F8D;margin-top:5px;font-weight:400;font-size:14px;transition:opacity 0.4s ease-in-out}.loader-messages.fade-in{opacity:1}.loader-messages.fade-out{opacity:0}