@unbxd-ui/unbxd-react-components 0.2.145-beta.4 → 0.2.145-beta.5

package/components/NotificationComponent/NotificationComponent.stories.js

@@ -3,25 +3,176 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SimpleUsage = void 0;
+exports["default"] = exports.WithHTMLContent = exports.WithCloseButton = exports.Warning = exports.Success = exports.MultipleNotifications = exports.LongContent = exports.Info = exports.Error = exports.CustomFadeOut = exports.AutoUpdating = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _NotificationComponent = _interopRequireDefault(require("./NotificationComponent"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var _default = exports["default"] = {
-  title: "NotificationComponent"
-};
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "success",
-    messageId: 1
-  }, "Data loaded successfully"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "error",
-    messageId: 2
-  }, "Some error occured"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "warning",
-    messageId: 3
-  }, "Doing this operation will erase all your data"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
-    appearance: "info",
-    messageId: 4
-  }, "The job is scheduled. You will get a notification once it is completed."));
+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/NotificationComponent',
+  component: _NotificationComponent["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    appearance: {
+      control: 'select',
+      options: ['success', 'error', 'warning', 'info'],
+      description: 'The appearance/type of the notification'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes for the notification'
+    },
+    messageId: {
+      control: 'number',
+      description: 'Unique ID to represent this particular message'
+    },
+    fadeOut: {
+      control: 'boolean',
+      description: 'Whether the message should fade out automatically'
+    },
+    fadeOutTime: {
+      control: 'number',
+      description: 'Time in milliseconds before the notification fades out'
+    },
+    showClose: {
+      control: 'boolean',
+      description: 'Whether to show a close button on the notification'
+    }
+  }
+};
+var _default = exports["default"] = meta; // Basic notifications for different appearances
+var Success = exports.Success = {
+  args: {
+    children: 'Operation completed successfully!',
+    appearance: 'success'
+  }
+};
+var Error = exports.Error = {
+  args: {
+    children: 'An error occurred while processing your request.',
+    appearance: 'error',
+    fadeOut: false
+  }
+};
+var Warning = exports.Warning = {
+  args: {
+    children: 'Please review your changes before proceeding.',
+    appearance: 'warning',
+    fadeOut: false
+  }
+};
+var Info = exports.Info = {
+  args: {
+    children: 'Your session will expire in 5 minutes.',
+    appearance: 'info',
+    fadeOut: false
+  }
+};
+
+// Notification with custom fadeout time
+var CustomFadeOut = exports.CustomFadeOut = {
+  args: {
+    children: 'This message will fade out in 5 seconds',
+    appearance: 'success',
+    fadeOut: true,
+    fadeOutTime: 5000
+  }
+};
+
+// Notification with close button
+var WithCloseButton = exports.WithCloseButton = {
+  args: {
+    children: 'Click the X button to close this notification',
+    appearance: 'info',
+    showClose: true,
+    fadeOut: false
+  }
+};
+
+// Long content notification
+var LongContent = exports.LongContent = {
+  args: {
+    children: 'This is a notification with a longer content that might wrap to multiple lines. It demonstrates how the component handles larger amounts of text while maintaining its appearance and readability.',
+    appearance: 'info',
+    showClose: true,
+    fadeOut: false
+  }
+};
+
+// Notification with HTML content
+var WithHTMLContent = exports.WithHTMLContent = {
+  args: {
+    children: /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("strong", null, "Important Update"), /*#__PURE__*/_react["default"].createElement("p", null, "This notification contains ", /*#__PURE__*/_react["default"].createElement("em", null, "formatted"), " text and ", /*#__PURE__*/_react["default"].createElement("a", {
+      href: "#",
+      style: {
+        color: 'inherit',
+        textDecoration: 'underline'
+      }
+    }, "links"), ".")),
+    appearance: 'info',
+    showClose: true,
+    fadeOut: false
+  }
+};
+
+// Multiple notifications demo
+var MultipleNotifications = exports.MultipleNotifications = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "success"
+    }, "Success Message"), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "error"
+    }, "Error Message"), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "warning"
+    }, "Warning Message"), /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "info"
+    }, "Info Message"));
+  }
+};
+
+// Auto-updating notification demo
+var AutoUpdating = exports.AutoUpdating = {
+  render: function render() {
+    var _React$useState = _react["default"].useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      count = _React$useState2[0],
+      setCount = _React$useState2[1];
+    var _React$useState3 = _react["default"].useState(1),
+      _React$useState4 = _slicedToArray(_React$useState3, 2),
+      messageId = _React$useState4[0],
+      setMessageId = _React$useState4[1];
+    _react["default"].useEffect(function () {
+      var timer = setInterval(function () {
+        setCount(function (prev) {
+          return prev + 1;
+        });
+        setMessageId(function (prev) {
+          return prev + 1;
+        });
+      }, 3000);
+      return function () {
+        return clearInterval(timer);
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement(_NotificationComponent["default"], {
+      appearance: "info",
+      messageId: messageId,
+      fadeOut: true,
+      fadeOutTime: 2500
+    }, "This message has updated ", count, " times");
+  }
 };

package/components/ProgressBar/ProgressBar.stories.js

@@ -3,17 +3,210 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SimpleUsage = void 0;
+exports["default"] = exports.WithLabel = exports.States = exports.Indeterminate = exports.Heights = exports.Default = exports.CustomStyled = exports.Animated = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
-var _default = exports["default"] = {
-  title: "ProgressBar"
+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/ProgressBar',
+  component: _ProgressBar["default"],
+  parameters: {
+    layout: 'centered'
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    progress: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 100,
+        step: 1
+      },
+      description: 'Progress value (0-100)'
+    },
+    height: {
+      control: 'text',
+      description: 'Height of the progress bar (CSS value)'
+    },
+    className: {
+      control: 'text',
+      description: 'Additional CSS classes'
+    }
+  }
 };
-var SimpleUsage = exports.SimpleUsage = function SimpleUsage() {
-  return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "progress-container"
-  }, /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
-    progress: 40
-  }));
+var _default = exports["default"] = meta; // Basic progress bar
+var Default = exports.Default = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 60,
+      height: "20px"
+    }));
+  }
+};
+
+// Different heights
+var Heights = exports.Heights = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Thin (8px)"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 75,
+      height: "8px"
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Default (20px)"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 75,
+      height: "20px"
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Thick (32px)"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 75,
+      height: "32px"
+    })));
+  }
+};
+
+// Different progress states
+var States = exports.States = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Low Progress (25%)"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 25,
+      height: "20px",
+      className: "progress-low"
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Medium Progress (50%)"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 50,
+      height: "20px",
+      className: "progress-medium"
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "High Progress (75%)"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 75,
+      height: "20px",
+      className: "progress-high"
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Complete (100%)"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 100,
+      height: "20px",
+      className: "progress-complete"
+    })));
+  }
+};
+
+// Animated progress
+var Animated = exports.Animated = {
+  render: function render() {
+    var _React$useState = _react["default"].useState(0),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      progress = _React$useState2[0],
+      setProgress = _React$useState2[1];
+    _react["default"].useEffect(function () {
+      var timer = setInterval(function () {
+        setProgress(function (oldProgress) {
+          var newProgress = oldProgress + 1;
+          if (newProgress === 100) {
+            clearInterval(timer);
+          }
+          return Math.min(newProgress, 100);
+        });
+      }, 100);
+      return function () {
+        clearInterval(timer);
+      };
+    }, []);
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: progress,
+      height: "20px"
+    }), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        textAlign: 'center',
+        marginTop: '10px'
+      }
+    }, progress, "%"));
+  }
+};
+
+// Custom styled progress bar
+var CustomStyled = exports.CustomStyled = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '20px',
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Success Theme"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 75,
+      height: "20px",
+      className: "custom-success"
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Warning Theme"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 75,
+      height: "20px",
+      className: "custom-warning"
+    })), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Error Theme"), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 75,
+      height: "20px",
+      className: "custom-error"
+    })));
+  }
+};
+
+// Progress bar with label
+var WithLabel = exports.WithLabel = {
+  render: function render() {
+    var progress = 65;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        marginBottom: '5px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement("span", null, "Uploading..."), /*#__PURE__*/_react["default"].createElement("span", null, progress, "%")), /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: progress,
+      height: "20px"
+    }));
+  }
+};
+
+// Indeterminate progress
+var Indeterminate = exports.Indeterminate = {
+  render: function render() {
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      style: {
+        width: '300px'
+      }
+    }, /*#__PURE__*/_react["default"].createElement(_ProgressBar["default"], {
+      progress: 100,
+      height: "20px",
+      className: "indeterminate"
+    }), /*#__PURE__*/_react["default"].createElement("p", {
+      style: {
+        textAlign: 'center',
+        marginTop: '10px'
+      }
+    }, "Loading..."));
+  }
 };