@unbxd-ui/unbxd-react-components 0.2.145 → 0.2.146

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..."));
+  }
 };

package/components/ProgressBar/progressBarCore.css

@@ -1 +1 @@
-.RCB-progress-bar{width:100%;position:relative;background:#ccc}.RCB-progress-value{height:100%;position:absolute;top:0;background:#3d9565}
+.RCB-progress-bar{width:100%;position:relative;background:#ccc}.RCB-progress-bar.custom-warning{background:#FFCF5C}.RCB-progress-bar.custom-error{background:#F05C5C}.RCB-progress-value{height:100%;position:absolute;top:0;background:#3d9565}