@dream-encode/wp-js-plugin-utils 0.3.0 → 0.4.0

package/dist/components/Process/ProcessInfo.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * Wrapper for a process info key/value table.
+ *
+ * @param  {Object}    props
+ * @param  {string}    [props.className]  Wrapper class name. Defaults to `'process-info'`.
+ * @param  {*}         props.children     `ProcessInfoRow` children (or any nodes).
+ * @return {JSX.Element|null}
+ */
+const ProcessInfo = ({
+  className = 'process-info',
+  children
+}) => {
+  if (!children) {
+    return null;
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: children
+  });
+};
+var _default = exports.default = ProcessInfo;

package/dist/components/Process/ProcessInfoRow.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _element = require("@wordpress/element");
+var _components = require("@wordpress/components");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * A single key/value row inside `ProcessInfo`.
+ *
+ * Either pass a primitive `value` or pass JSX as `children`. If `children` is
+ * provided the value cell is rendered as a `div` (so it can host buttons,
+ * spans, refs, etc.). Otherwise it is rendered as a `Text` cell.
+ *
+ * @param  {Object}                 props
+ * @param  {string|JSX.Element}     props.label              The row label (key cell).
+ * @param  {*}                      [props.value]            Primitive value to render in the value cell.
+ * @param  {*}                      [props.children]         Custom value content.
+ * @param  {boolean}                [props.show=true]        Render the row only when truthy.
+ * @param  {string}                 [props.className='row']  Row wrapper class name.
+ * @param  {string}                 [props.keyClassName='key']
+ * @param  {string}                 [props.valueClassName='value']
+ * @return {JSX.Element|null}
+ */const ProcessInfoRow = ({
+  label,
+  value,
+  children,
+  show = true,
+  className = 'row',
+  keyClassName = 'key',
+  valueClassName = 'value'
+}) => {
+  if (!show) {
+    return null;
+  }
+  const content = children !== undefined ? children : value;
+  const isComplexContent = (0, _element.isValidElement)(content) || Array.isArray(content);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: className,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+      className: keyClassName,
+      children: label
+    }), isComplexContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: valueClassName,
+      children: content
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+      className: valueClassName,
+      children: content
+    })]
+  });
+};
+var _default = exports.default = ProcessInfoRow;

package/dist/components/Process/ProcessStatusInfo.js

@@ -0,0 +1,117 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _Progress = _interopRequireDefault(require("../Progress/Progress"));
+var _ProcessStatusSummary = _interopRequireDefault(require("./ProcessStatusSummary"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const PENDING_STATUSES = ['pending', 'queued'];
+
+/**
+ * Card-level wrapper for a single running process.
+ *
+ * Renders the process name, optional id and badges, a progress bar, a status
+ * summary row, an action button slot and an expandable details section.
+ *
+ * @param  {Object}        props
+ * @param  {string|JSX.Element} props.name                    Display name shown at the top.
+ * @param  {string|number} [props.processId]                  Optional id rendered as `#{id}` next to the name.
+ * @param  {string}        props.status                       Current process status.
+ * @param  {number}        props.percentComplete              Percent complete (0-100).
+ * @param  {string}        [props.progressStatus]             Optional override for the Progress bar status modifier.
+ * @param  {Object[]}      [props.runs]                       Forwarded to `ProcessStatusSummary`.
+ * @param  {number}        [props.startTime]                  Forwarded to `ProcessStatusSummary`.
+ * @param  {number}        [props.secondsRemaining]           Forwarded to `ProcessStatusSummary`.
+ * @param  {Object}        [props.summaryProps]               Additional props passed to `ProcessStatusSummary`.
+ * @param  {JSX.Element}   [props.badges]                     Badges/pill labels rendered after the name (e.g. "DRY RUN").
+ * @param  {JSX.Element}   [props.actions]                    Action buttons rendered on the right side.
+ * @param  {*}             [props.children]                   Content for the expandable details section (e.g. `<ProcessInfo>`).
+ * @param  {boolean}       [props.expandable=true]            Whether the details toggle is rendered.
+ * @param  {boolean}       [props.defaultExpanded=false]      Initial expanded state.
+ * @param  {string}        [props.className='process']        Wrapper class name.
+ * @param  {string[]}      [props.modifierClassNames]         Additional class names appended to the wrapper.
+ * @param  {string}        [props.detailsToggleIcon='menu']   Dashicon name for the details toggle.
+ * @param  {string}        [props.idClassName='process-id']   Class for the id label.
+ * @param  {string}        [props.nameClassName='process-name'] Class for the name label.
+ * @param  {string}        [props.actionsClassName='process-buttons'] Class for the actions container.
+ * @param  {string}        [props.detailsClassName='details'] Class for the expandable details container.
+ * @return {JSX.Element|null}
+ */
+const ProcessStatusInfo = ({
+  name,
+  processId,
+  status,
+  percentComplete,
+  progressStatus,
+  runs,
+  startTime,
+  secondsRemaining,
+  summaryProps = {},
+  badges,
+  actions,
+  children,
+  expandable = true,
+  defaultExpanded = false,
+  className = 'process',
+  modifierClassNames = [],
+  detailsToggleIcon = 'menu',
+  idClassName = 'process-id',
+  nameClassName = 'process-name',
+  actionsClassName = 'process-buttons',
+  detailsClassName = 'details'
+}) => {
+  const [showDetails, setShowDetails] = (0, _element.useState)(defaultExpanded);
+  const wrapperClassName = [className, ...modifierClassNames].filter(Boolean).join(' ');
+  const isPending = PENDING_STATUSES.includes(status);
+  const showDetailsToggle = expandable && !!children && !isPending;
+  const toggleShowDetails = () => {
+    setShowDetails(current => !current);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: wrapperClassName,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+      alignment: "top",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalVStack, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalHStack, {
+          alignment: "left",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            className: nameClassName,
+            children: name
+          }), (processId || processId === 0) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            className: idClassName,
+            variant: "muted",
+            children: `#${processId}`
+          }), badges]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
+          currentValue: percentComplete ?? 0,
+          maxValue: 100,
+          status: progressStatus || status
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ProcessStatusSummary.default, {
+          status: status,
+          percentComplete: percentComplete,
+          runs: runs,
+          startTime: startTime,
+          secondsRemaining: secondsRemaining,
+          ...summaryProps
+        })]
+      }), (showDetailsToggle || actions) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: actionsClassName,
+        children: [showDetailsToggle && /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Icon, {
+          className: "process-details-icon",
+          icon: detailsToggleIcon,
+          size: 30,
+          onClick: toggleShowDetails
+        }), actions]
+      })]
+    }), !!children && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: `${detailsClassName} ${showDetails ? 'open' : 'closed'}`,
+      children: children
+    })]
+  });
+};
+var _default = exports.default = ProcessStatusInfo;

package/dist/components/Process/ProcessStatusSummary.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _i18n = require("@wordpress/i18n");
+var _components = require("@wordpress/components");
+var _element = require("@wordpress/element");
+var _time = require("../../utils/time");
+var _dates = require("../../utils/dates");
+var _useValueChangeEffect = _interopRequireDefault(require("../../hooks/useValueChangeEffect"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Status summary row for a long-running process.
+ *
+ * Renders a single horizontal row of muted text describing the current status,
+ * percent complete and (when applicable) an estimated time remaining countdown.
+ *
+ * The consumer is responsible for computing the initial `secondsRemaining`
+ * (e.g. via an EMA over previous run cycle times) and passing it in. The
+ * component manages the per-second countdown internally and resets it whenever
+ * the `secondsRemaining` prop changes.
+ *
+ * @param  {Object}    props
+ * @param  {string}    props.status                            Current process status.
+ * @param  {number}    props.percentComplete                   Percent complete (0-100).
+ * @param  {number}    [props.secondsRemaining]                Pre-computed seconds remaining. Overrides `runs`/`startTime` when provided.
+ * @param  {Object[]}  [props.runs]                            Array of process run records used to compute time remaining via EMA.
+ * @param  {number}    [props.startTime]                       Unix timestamp (seconds) the process started. Used for the simple fallback.
+ * @param  {number}    [props.emaWindow=2]                     Window size passed to the EMA helper.
+ * @param  {boolean}   [props.emaUseCycleTime=true]            Whether the EMA helper should use full cycle time.
+ * @param  {string}    [props.className='summary']             Wrapper class name.
+ * @param  {boolean}   [props.animatePercent=true]             Animate the percent complete value when it changes.
+ * @param  {boolean}   [props.showEstimatedCompletedTime=true] Append the local-time ETA after the time remaining.
+ * @param  {JSX.Element} [props.failedAction]                  Slot rendered after the "Failed!" label (e.g. a retry button).
+ * @param  {Object}    [props.messages]                        Optional per-status JSX/string overrides keyed by status name.
+ * @param  {string}    [props.textDomain='default']            Translation domain for built-in strings.
+ * @param  {Object}    [props.labels]                          Per-string label overrides (see `defaultLabels`).
+ * @return {JSX.Element|null}
+ */const ProcessStatusSummary = ({
+  status,
+  percentComplete,
+  secondsRemaining,
+  runs,
+  startTime,
+  emaWindow = 2,
+  emaUseCycleTime = true,
+  className = 'summary',
+  animatePercent = true,
+  showEstimatedCompletedTime = true,
+  failedAction,
+  messages = {},
+  textDomain = 'default',
+  labels = {}
+}) => {
+  const mergedLabels = (0, _element.useMemo)(() => ({
+    waiting: (0, _i18n.__)('Waiting', textDomain),
+    inProgress: (0, _i18n.__)('In-progress', textDomain),
+    complete: (0, _i18n.__)('Complete', textDomain),
+    completing: (0, _i18n.__)('Completing process', textDomain),
+    failed: (0, _i18n.__)('Failed!', textDomain),
+    percentSuffix: (0, _i18n.__)('complete', textDomain),
+    calculating: (0, _i18n.__)('Calculating time remaining...', textDomain),
+    fewSeconds: (0, _i18n.__)('A few seconds remaining', textDomain),
+    /* translators: %s: Time remaining. */
+    approxRemaining: (0, _i18n.__)('Approx. %s remaining', textDomain),
+    ...labels
+  }), [textDomain, labels]);
+  const percentValue = String(parseFloat(percentComplete ?? 0).toFixed(1));
+  const {
+    displayValue: displayPercent,
+    elementRef: percentRef
+  } = (0, _useValueChangeEffect.default)(percentValue, animatePercent ? 'fast' : 'default');
+  const [intervalSecondsRemaining, setIntervalSecondsRemaining] = (0, _element.useState)(false);
+  const [estimatedCompletedTime, setEstimatedCompletedTime] = (0, _element.useState)(false);
+  const intervalRef = (0, _element.useRef)(null);
+  const computedSecondsRemaining = (0, _element.useMemo)(() => {
+    if (secondsRemaining !== undefined && secondsRemaining !== null) {
+      return Number(secondsRemaining);
+    }
+    if (!percentComplete || percentComplete >= 100) {
+      return 0;
+    }
+    if (Array.isArray(runs) && runs.length >= 3) {
+      const {
+        avgTime
+      } = (0, _time.calculateEstimatedTimeRemainingUsingEMA)(runs, emaWindow, emaUseCycleTime);
+      if (avgTime > 0) {
+        const remainingPercentage = 100 - percentComplete;
+        const estimatedRemainingRuns = remainingPercentage / (percentComplete / runs.length);
+        return Math.max(1, avgTime * estimatedRemainingRuns);
+      }
+    }
+    if (startTime) {
+      return (0, _time.calculateEstimatedTimeRemainingSimple)(startTime, percentComplete);
+    }
+    return 0;
+  }, [secondsRemaining, runs, startTime, percentComplete, emaWindow, emaUseCycleTime]);
+  (0, _element.useEffect)(() => {
+    if (computedSecondsRemaining && Number(computedSecondsRemaining) > 0) {
+      setIntervalSecondsRemaining(Number(computedSecondsRemaining));
+      setEstimatedCompletedTime((0, _time.addSecondsToCurrentTime)(Number(computedSecondsRemaining)));
+    }
+  }, [computedSecondsRemaining]);
+  (0, _element.useEffect)(() => {
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);
+      intervalRef.current = null;
+    }
+    if (intervalSecondsRemaining > 0 && percentComplete < 100) {
+      intervalRef.current = setInterval(() => {
+        setIntervalSecondsRemaining(old => Math.max(0, old - 1));
+      }, 1000);
+    }
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current);
+        intervalRef.current = null;
+      }
+    };
+  }, [intervalSecondsRemaining > 0, percentComplete]);
+  const formattedTimeRemaining = (0, _element.useMemo)(() => {
+    if (percentComplete >= 100 || intervalSecondsRemaining !== false && intervalSecondsRemaining <= 0) {
+      return mergedLabels.fewSeconds;
+    }
+    if (!intervalSecondsRemaining) {
+      return mergedLabels.calculating;
+    }
+    return (0, _i18n.sprintf)(mergedLabels.approxRemaining, (0, _time.secondsToDhmsShort)(intervalSecondsRemaining) || '0:01');
+  }, [intervalSecondsRemaining, percentComplete, mergedLabels]);
+  const formattedEstimatedCompletedTime = (0, _element.useMemo)(() => {
+    if (!estimatedCompletedTime) {
+      return false;
+    }
+    return ` (${(0, _dates.convertTimestampToFriendlyTime)(estimatedCompletedTime, textDomain)})`;
+  }, [estimatedCompletedTime, textDomain]);
+  if (messages[status] !== undefined && messages[status] !== null) {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: className,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+        variant: "muted",
+        children: messages[status]
+      })
+    });
+  }
+  switch (status) {
+    case 'pending':
+    case 'queued':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: className,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "status",
+          children: mergedLabels.waiting
+        })
+      });
+    case 'processing':
+      if (percentComplete >= 100) {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: className,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            variant: "muted",
+            className: "status",
+            children: mergedLabels.completing
+          })
+        });
+      }
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: className,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "status",
+          children: mergedLabels.inProgress
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "divider",
+          children: "|"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalText, {
+          variant: "muted",
+          className: "percent-complete",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            ref: percentRef,
+            children: displayPercent
+          }), "% ", mergedLabels.percentSuffix]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "divider",
+          children: "|"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_components.__experimentalText, {
+          variant: "muted",
+          className: "time-remaining",
+          children: [formattedTimeRemaining, showEstimatedCompletedTime && formattedEstimatedCompletedTime]
+        })]
+      });
+    case 'complete':
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: className,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          className: "status",
+          children: mergedLabels.complete
+        })
+      });
+    case 'failed':
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: className,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+          variant: "muted",
+          isDestructive: "true",
+          className: "status",
+          children: mergedLabels.failed
+        }), failedAction && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_element.Fragment, {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_components.__experimentalText, {
+            variant: "muted",
+            className: "divider",
+            children: "|"
+          }), failedAction]
+        })]
+      });
+    default:
+      return null;
+  }
+};
+var _default = exports.default = ProcessStatusSummary;

package/dist/components/Process/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ProcessInfo", {
+  enumerable: true,
+  get: function () {
+    return _ProcessInfo.default;
+  }
+});
+Object.defineProperty(exports, "ProcessInfoRow", {
+  enumerable: true,
+  get: function () {
+    return _ProcessInfoRow.default;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusInfo", {
+  enumerable: true,
+  get: function () {
+    return _ProcessStatusInfo.default;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusSummary", {
+  enumerable: true,
+  get: function () {
+    return _ProcessStatusSummary.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _ProcessInfo.default;
+  }
+});
+var _ProcessInfo = _interopRequireDefault(require("./ProcessInfo"));
+var _ProcessInfoRow = _interopRequireDefault(require("./ProcessInfoRow"));
+var _ProcessStatusSummary = _interopRequireDefault(require("./ProcessStatusSummary"));
+var _ProcessStatusInfo = _interopRequireDefault(require("./ProcessStatusInfo"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Process/styles/_process.scss

@@ -0,0 +1,158 @@
+/*
+ * Generic styling for the wp-plugin-utils Process components.
+ *
+ * `de-wp-plugin-utils-process-info` styles the key/value table rendered by
+ * `<ProcessInfo>` / `<ProcessInfoRow>`. Pass the same wrapper class name that
+ * is supplied to the `className` prop (defaults to `process-info`).
+ *
+ *     .migration-info {
+ *         @include de-wp-plugin-utils-process-info();
+ *     }
+ *
+ * `de-wp-plugin-utils-process-status-summary` styles the horizontal status
+ * row rendered by `<ProcessStatusSummary>`. Pass the same wrapper class name
+ * that is supplied to its `className` prop (defaults to `summary`).
+ *
+ *     .migration {
+ *         @include de-wp-plugin-utils-process-status-summary();
+ *     }
+ */
+
+@mixin de-wp-plugin-utils-process-info {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+
+	.row {
+		display: grid;
+		grid-template-columns: 150px max-content;
+		grid-auto-rows: 25px;
+		grid-template-areas: "key value";
+		width: 100%;
+
+		.key {
+			display: flex;
+			flex-direction: column;
+			align-items: flex-start;
+			justify-content: center;
+			grid-area: key;
+			font-weight: 600;
+		}
+
+		.value {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: center;
+			grid-area: value;
+
+			.percentage {
+				margin-left: 0.35rem;
+				opacity: 0.7;
+				font-style: italic;
+			}
+		}
+	}
+}
+
+@mixin de-wp-plugin-utils-process-status-summary {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: flex-start;
+	gap: 8px;
+}
+
+/*
+ * `de-wp-plugin-utils-process-status-info` styles the card-level wrapper
+ * rendered by `<ProcessStatusInfo>`. Pass the same wrapper class name that is
+ * supplied to its `className` prop (defaults to `process`).
+ *
+ *     .migration {
+ *         @include de-wp-plugin-utils-process-status-info();
+ *     }
+ */
+@mixin de-wp-plugin-utils-process-status-info {
+	width: 100%;
+	padding: calc(24px);
+	display: flex;
+	align-items: center;
+	flex-direction: column;
+	gap: calc(8px);
+	justify-content: space-between;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	box-sizing: border-box;
+
+	& > .components-h-stack {
+		width: 100%;
+
+		& > .components-v-stack {
+			width: 100%;
+			flex: 1;
+		}
+	}
+
+	&:last-child {
+		border-bottom: none;
+	}
+
+	.process-name {
+		font-size: 18px;
+		font-weight: 500;
+		margin-left: 3px;
+	}
+
+	.process-id {
+		margin-left: 7px;
+		margin-top: 2px;
+	}
+
+	.process-buttons {
+		display: flex;
+		align-items: center;
+		justify-content: flex-end;
+		gap: 8px;
+		margin-left: 7rem;
+		padding-top: 5px;
+
+		.process-details-icon {
+			cursor: pointer;
+		}
+	}
+
+	&.cancelled {
+		opacity: 0.4;
+		pointer-events: none;
+	}
+
+	.summary {
+		margin-left: 3px;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		justify-content: flex-start;
+		gap: 8px;
+	}
+
+	.details {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		padding: 0 calc(16px);
+		overflow: hidden;
+		max-height: 0;
+		opacity: 0;
+		transition: max-height 0.4s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
+
+		&.open {
+			max-height: 800px;
+			opacity: 1;
+			padding: calc(12px) calc(16px);
+			padding-bottom: 0;
+		}
+	}
+}

package/dist/components/Progress/Progress.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * HTML `<progress>` bar with a status modifier class.
+ *
+ * @param  {Object}  props
+ * @param  {number}  props.currentValue              Current value.
+ * @param  {number}  [props.maxValue=100]            Maximum value.
+ * @param  {string}  [props.status]                  Status modifier appended to the class name (e.g. `processing`).
+ * @param  {string}  [props.id='progress-bar']       DOM id.
+ * @param  {string}  [props.className='progress-bar'] Base class name.
+ * @return {JSX.Element}
+ */
+const Progress = ({
+  currentValue,
+  maxValue = 100,
+  status,
+  id = 'progress-bar',
+  className = 'progress-bar'
+}) => {
+  const classes = [className, status].filter(Boolean).join(' ');
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("progress", {
+    id: id,
+    className: classes,
+    value: currentValue,
+    max: maxValue,
+    children: [currentValue, "%"]
+  });
+};
+var _default = exports.default = Progress;

package/dist/components/Progress/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
+var _Progress = _interopRequireDefault(require("./Progress"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/Progress/styles/_progress.scss

@@ -0,0 +1,112 @@
+/*
+ * Generic styling for the wp-plugin-utils Progress component.
+ *
+ * Targets the `<progress>` element rendered by `<Progress>`. Apply to a
+ * selector that matches the `className` prop (defaults to `progress-bar`).
+ *
+ *     .progress-bar {
+ *         @include de-wp-plugin-utils-progress();
+ *     }
+ */
+
+$de-wp-plugin-utils-progress-waiting-color: #f1efef !default;
+$de-wp-plugin-utils-progress-processing-color: #006FE6 !default;
+$de-wp-plugin-utils-progress-complete-color: #65C728 !default;
+$de-wp-plugin-utils-progress-border-radius: 5px !default;
+$de-wp-plugin-utils-progress-shimmer-end-color: rgba(255, 255, 255, 0.3) !default;
+
+@mixin de-wp-plugin-utils-progress(
+	$waiting-color: $de-wp-plugin-utils-progress-waiting-color,
+	$processing-color: $de-wp-plugin-utils-progress-processing-color,
+	$complete-color: $de-wp-plugin-utils-progress-complete-color,
+	$border-radius: $de-wp-plugin-utils-progress-border-radius,
+	$shimmer-end-color: $de-wp-plugin-utils-progress-shimmer-end-color
+) {
+	height: 20px;
+	width: 100%;
+	border-radius: $border-radius;
+	position: relative;
+
+	&::-webkit-progress-bar {
+		background: $waiting-color;
+		border-radius: $border-radius;
+	}
+
+	&.processing {
+		&::after {
+			content: '';
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(
+				90deg,
+				transparent 0%,
+				$shimmer-end-color 50%,
+				transparent 100%
+			);
+			background-size: 200% 100%;
+			border-radius: $border-radius;
+			animation: de-wp-plugin-utils-progress-shimmer 2s infinite linear;
+			pointer-events: none;
+		}
+
+		&::-webkit-progress-value {
+			background: $processing-color;
+			animation: none;
+		}
+
+		&::-webkit-progress-bar {
+			animation: none;
+		}
+	}
+
+	&.pending,
+	&.queued {
+		&::-webkit-progress-value {
+			background: $waiting-color;
+			animation-name: de-wp-plugin-utils-progress-pulse-waiting;
+			animation-duration: 2s;
+			animation-iteration-count: infinite;
+		}
+
+		&::-webkit-progress-bar {
+			animation-name: de-wp-plugin-utils-progress-pulse-waiting;
+			animation-duration: 2s;
+			animation-iteration-count: infinite;
+		}
+	}
+
+	&.complete {
+		&::-webkit-progress-value {
+			background: $complete-color;
+		}
+	}
+
+	&::-webkit-progress-value,
+	&[value]::-webkit-progress-value {
+		border-radius: $border-radius;
+		transition: all 1s ease;
+	}
+}
+
+@keyframes de-wp-plugin-utils-progress-pulse-waiting {
+	0% {
+		background-color: hsl( 200, 20%, 70% );
+	}
+
+	100% {
+		background-color: hsl( 200, 20%, 95% );
+	}
+}
+
+@keyframes de-wp-plugin-utils-progress-shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+
+	100% {
+		background-position: 200% 0;
+	}
+}

package/dist/components/index.js

@@ -33,7 +33,39 @@ Object.defineProperty(exports, "NotificationsList", {
     return _NotificationsDrawer.NotificationsList;
   }
 });
+Object.defineProperty(exports, "ProcessInfo", {
+  enumerable: true,
+  get: function () {
+    return _Process.default;
+  }
+});
+Object.defineProperty(exports, "ProcessInfoRow", {
+  enumerable: true,
+  get: function () {
+    return _Process.ProcessInfoRow;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusInfo", {
+  enumerable: true,
+  get: function () {
+    return _Process.ProcessStatusInfo;
+  }
+});
+Object.defineProperty(exports, "ProcessStatusSummary", {
+  enumerable: true,
+  get: function () {
+    return _Process.ProcessStatusSummary;
+  }
+});
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
 var _Notices = _interopRequireDefault(require("./Notices"));
 var _NotificationsDrawer = _interopRequireWildcard(require("./NotificationsDrawer"));
+var _Process = _interopRequireWildcard(require("./Process"));
+var _Progress = _interopRequireDefault(require("./Progress"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (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 (const 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 _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/utils/time.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.secondsToDhmsShortIso = exports.secondsToDhmsShort = exports.secondsToDhms = exports.addSecondsToCurrentTime = void 0;
+exports.secondsToDhmsShortIso = exports.secondsToDhmsShort = exports.secondsToDhms = exports.calculateEstimatedTimeRemainingUsingSMA = exports.calculateEstimatedTimeRemainingUsingEMA = exports.calculateEstimatedTimeRemainingSimple = exports.addSecondsToCurrentTime = void 0;
 var _strings = require("./strings");
 /**
  * Convert seconds to a human readable format.
@@ -80,4 +80,135 @@ const addSecondsToCurrentTime = seconds => {
   rawDate = new Date(rawDate.getTime() + Number(seconds * 1000));
   return rawDate.getTime() / 1000;
 };
-exports.addSecondsToCurrentTime = addSecondsToCurrentTime;
+
+/**
+ * Calculate an estimated time remaining based on elapsed time and percent complete.
+ *
+ * @param  {number}  startTime        Unix timestamp (seconds) when the process started.
+ * @param  {number}  percentComplete  Percent complete (0-100).
+ * @return {number}
+ */
+exports.addSecondsToCurrentTime = addSecondsToCurrentTime;
+const calculateEstimatedTimeRemainingSimple = (startTime, percentComplete) => {
+  if (!startTime || percentComplete <= 0 || percentComplete >= 100) {
+    return 0;
+  }
+  const secondsSinceStartTime = Date.now() / 1000 - Number(startTime);
+  const decimalComplete = percentComplete / 100;
+  const totalSeconds = secondsSinceStartTime / decimalComplete;
+  const remaining = totalSeconds - secondsSinceStartTime;
+  return Math.max(1, remaining);
+};
+
+/**
+ * Calculate an estimated time remaining, using Simple Moving Average (SMA).
+ *
+ * @param  {number[]}  times   Array of previous run times (seconds).
+ * @param  {number}    window  Subset of times to use.
+ * @param  {number}    n       Number of loops.
+ * @return {number[]}
+ */
+exports.calculateEstimatedTimeRemainingSimple = calculateEstimatedTimeRemainingSimple;
+const calculateEstimatedTimeRemainingUsingSMA = (times, window = 2, n = Infinity) => {
+  if (!times || times.length < window) {
+    return [];
+  }
+  let index = window - 1;
+  const length = times.length + 1;
+  const simpleMovingAverages = [];
+  let numberOfSMAsCalculated = 0;
+  while (++index < length && numberOfSMAsCalculated++ < n) {
+    const windowSlice = times.slice(index - window, index);
+    const sum = windowSlice.reduce((prev, curr) => prev + curr, 0);
+    simpleMovingAverages.push(sum / window);
+  }
+  return simpleMovingAverages;
+};
+
+/**
+ * Calculate an estimated time remaining, using Exponential Moving Average (EMA).
+ *
+ * Each run object should expose at least `start_time`. Optional fields
+ * `completed_time`, `last_attempt_time` and `total_time` are used when present.
+ *
+ * @param  {Object[]}  runs           Array of process run records.
+ * @param  {number}    window         Subset of times to use.
+ * @param  {boolean}   useCycleTime   Whether to use full cycle time instead of pure processing time.
+ * @return {{emaValues: number[], avgTime: number}}
+ */
+exports.calculateEstimatedTimeRemainingUsingSMA = calculateEstimatedTimeRemainingUsingSMA;
+const calculateEstimatedTimeRemainingUsingEMA = (runs, window = 2, useCycleTime = true) => {
+  if (!runs || runs.length < window + 1) {
+    return {
+      emaValues: [],
+      avgTime: 0
+    };
+  }
+  const sortedRuns = [...runs].sort((a, b) => Number(a.start_time) - Number(b.start_time));
+  let timesToUse = [];
+  if (useCycleTime) {
+    const runsWithCycleTimes = [];
+    for (let i = 1; i < sortedRuns.length; i++) {
+      const previousRun = sortedRuns[i - 1];
+      const currentRun = sortedRuns[i];
+      const processingTime = currentRun.completed_time ? Number(currentRun.completed_time) - Number(currentRun.start_time) : currentRun.last_attempt_time ? Number(currentRun.last_attempt_time) - Number(currentRun.start_time) : 0;
+      const previousEndTime = previousRun.completed_time ? Number(previousRun.completed_time) : previousRun.last_attempt_time ? Number(previousRun.last_attempt_time) : Number(previousRun.start_time);
+      const currentEndTime = currentRun.completed_time ? Number(currentRun.completed_time) : currentRun.last_attempt_time ? Number(currentRun.last_attempt_time) : Number(currentRun.start_time);
+      const cycleTime = currentEndTime - previousEndTime;
+      if (cycleTime > 0 && processingTime > 0) {
+        runsWithCycleTimes.push({
+          ...currentRun,
+          total_time: processingTime,
+          cycle_time: cycleTime
+        });
+      }
+    }
+    if (runsWithCycleTimes.length < window) {
+      return {
+        emaValues: [],
+        avgTime: 0
+      };
+    }
+    timesToUse = runsWithCycleTimes.map(run => run.cycle_time);
+  } else {
+    timesToUse = sortedRuns.map(run => {
+      if (typeof run.total_time === 'number' && run.total_time > 0) {
+        return run.total_time;
+      }
+      const startTime = run.start_time ? Number(run.start_time) : null;
+      const endTime = run.completed_time ? Number(run.completed_time) : run.last_attempt_time ? Number(run.last_attempt_time) : null;
+      return startTime && endTime ? endTime - startTime : 0;
+    }).filter(time => time > 0);
+    if (timesToUse.length < window) {
+      return {
+        emaValues: [],
+        avgTime: 0
+      };
+    }
+  }
+  let index = window - 1;
+  let previousEmaIndex = 0;
+  const length = timesToUse.length;
+  const smoothingFactor = 2 / (window + 1);
+  const exponentialMovingAverages = [];
+  const smaValues = calculateEstimatedTimeRemainingUsingSMA(timesToUse, window, 1);
+  const sma = smaValues.length > 0 ? smaValues[0] : 0;
+  if (sma <= 0) {
+    return {
+      emaValues: [],
+      avgTime: 0
+    };
+  }
+  exponentialMovingAverages.push(sma);
+  while (++index < length) {
+    const value = timesToUse[index];
+    const previousEma = exponentialMovingAverages[previousEmaIndex++];
+    const currentEma = (value - previousEma) * smoothingFactor + previousEma;
+    exponentialMovingAverages.push(currentEma);
+  }
+  return {
+    emaValues: exponentialMovingAverages,
+    avgTime: exponentialMovingAverages.length > 0 ? exponentialMovingAverages[exponentialMovingAverages.length - 1] : 0
+  };
+};
+exports.calculateEstimatedTimeRemainingUsingEMA = calculateEstimatedTimeRemainingUsingEMA;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dream-encode/wp-js-plugin-utils",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Common JS functionality used by custom WP plugins.",
   "keywords": [
     "wordpress",
@@ -28,6 +28,8 @@
     "./data-migrations": "./dist/data-migrations/index.js",
     "./components": "./dist/components/index.js",
     "./components/notifications-drawer/styles": "./dist/components/NotificationsDrawer/styles/_notifications-drawer.scss",
+    "./components/process/styles": "./dist/components/Process/styles/_process.scss",
+    "./components/progress/styles": "./dist/components/Progress/styles/_progress.scss",
     "./hooks": "./dist/hooks/index.js",
     "./api": "./dist/api/index.js",
     "./utils": "./dist/utils/index.js",