@canonical/react-components 2.3.1 → 2.4.0

package/dist/components/EventQueue/EventQueue.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from "react";
+import React from "react";
+export interface EventCallback<T> {
+    onSuccess: (event: T) => void;
+    onFailure: (msg: string) => void;
+    onFinish?: () => void;
+}
+export interface EventQueue<T> {
+    get: (operationId: string) => EventCallback<T> | undefined;
+    set: (operationId: string, onSuccess: (event: T) => void, onFailure: (msg: string) => void, onFinish?: () => void) => void;
+    remove: (operationId: string) => void;
+}
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+export declare function createEventQueue<T>(): {
+    EventQueueProvider: FC<{
+        children: ReactNode;
+    }>;
+    useEventQueue: () => EventQueue<T>;
+    EventQueueContext: React.Context<EventQueue<T>>;
+};

package/dist/components/EventQueue/EventQueue.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEventQueue = createEventQueue;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+
+function createEventQueue() {
+  const EventQueueContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+  const eventQueue = new Map();
+  const EventQueueProvider = _ref => {
+    let {
+      children
+    } = _ref;
+    return /*#__PURE__*/_react.default.createElement(EventQueueContext.Provider, {
+      value: {
+        get: operationId => eventQueue.get(operationId),
+        set: (operationId, onSuccess, onFailure, onFinish) => eventQueue.set(operationId, {
+          onSuccess,
+          onFailure,
+          onFinish
+        }),
+        remove: operationId => eventQueue.delete(operationId)
+      }
+    }, children);
+  };
+  const useEventQueue = () => {
+    const context = (0, _react.useContext)(EventQueueContext);
+    if (!context) {
+      throw new Error("useEventQueue must be used within an EventQueueProvider");
+    }
+    return context;
+  };
+  return {
+    EventQueueProvider,
+    useEventQueue,
+    EventQueueContext
+  };
+}

package/dist/components/EventQueue/EventQueueProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/EventQueue/index.d.ts

@@ -0,0 +1,2 @@
+export { createEventQueue } from "./EventQueue";
+export type { EventCallback, EventQueue } from "./EventQueue";

package/dist/components/EventQueue/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "createEventQueue", {
+  enumerable: true,
+  get: function () {
+    return _EventQueue.createEventQueue;
+  }
+});
+var _EventQueue = require("./EventQueue");

package/dist/esm/components/EventQueue/EventQueue.d.ts

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from "react";
+import React from "react";
+export interface EventCallback<T> {
+    onSuccess: (event: T) => void;
+    onFailure: (msg: string) => void;
+    onFinish?: () => void;
+}
+export interface EventQueue<T> {
+    get: (operationId: string) => EventCallback<T> | undefined;
+    set: (operationId: string, onSuccess: (event: T) => void, onFailure: (msg: string) => void, onFinish?: () => void) => void;
+    remove: (operationId: string) => void;
+}
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+export declare function createEventQueue<T>(): {
+    EventQueueProvider: FC<{
+        children: ReactNode;
+    }>;
+    useEventQueue: () => EventQueue<T>;
+    EventQueueContext: React.Context<EventQueue<T>>;
+};

package/dist/esm/components/EventQueue/EventQueue.js

@@ -0,0 +1,67 @@
+import { createContext, useContext } from "react";
+import React from "react";
+/**
+ * This provides an event queue system for managing callbacks associated with
+ * asynchronous operations (e.g., API calls) in an application.
+ *
+ * It allows components to register success, failure,
+ * and optional finish handlers for a given operation ID, and later retrieve or remove them.
+ *
+ * This is useful for handling side effects when dealing
+ * with multiple operations that need to be tracked and updated independently.
+ *
+ * The `createEventQueue` function should be used to create a single provider and context that are shared throughout your application.
+ * The returned `EventQueueProvider` and `useEventQueue` hook should be exported
+ * from a shared module and reused across the app to ensure a single
+ * context instance is used.
+ *
+ * Usage pattern:
+ * // eventQueue.ts
+ * export const { EventQueueProvider, useEventQueue } = createEventQueue<EventType>();
+ *
+ * // App.tsx
+ * import { EventQueueProvider } from "./eventQueue";
+ * ...
+ * <EventQueueProvider>
+ *   <App />
+ * </EventQueueProvider>
+ *
+ * // In any other component
+ * import { useEventQueue } from "./eventQueue";
+ * ...
+ * const eventQueue = useEventQueue();
+ * eventQueue.set(operationId, onSuccess, onFailure);
+ */
+
+export function createEventQueue() {
+  var EventQueueContext = /*#__PURE__*/createContext(undefined);
+  var eventQueue = new Map();
+  var EventQueueProvider = _ref => {
+    var {
+      children
+    } = _ref;
+    return /*#__PURE__*/React.createElement(EventQueueContext.Provider, {
+      value: {
+        get: operationId => eventQueue.get(operationId),
+        set: (operationId, onSuccess, onFailure, onFinish) => eventQueue.set(operationId, {
+          onSuccess,
+          onFailure,
+          onFinish
+        }),
+        remove: operationId => eventQueue.delete(operationId)
+      }
+    }, children);
+  };
+  var useEventQueue = () => {
+    var context = useContext(EventQueueContext);
+    if (!context) {
+      throw new Error("useEventQueue must be used within an EventQueueProvider");
+    }
+    return context;
+  };
+  return {
+    EventQueueProvider,
+    useEventQueue,
+    EventQueueContext
+  };
+}

package/dist/esm/components/EventQueue/EventQueueProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/EventQueue/index.d.ts

@@ -0,0 +1,2 @@
+export { createEventQueue } from "./EventQueue";
+export type { EventCallback, EventQueue } from "./EventQueue";

package/dist/esm/components/EventQueue/index.js

@@ -0,0 +1 @@
+export { createEventQueue } from "./EventQueue";

package/dist/esm/index.d.ts

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";
@@ -92,6 +93,7 @@ export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
 export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
+export type { EventCallback, EventQueue } from "./components/EventQueue";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
 export type { FormikFieldProps } from "./components/FormikField";

package/dist/esm/index.js

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";

package/dist/index.d.ts

@@ -21,6 +21,7 @@ export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
 export { default as DoughnutChart } from "./components/DoughnutChart";
 export { default as EmptyState } from "./components/EmptyState";
+export { createEventQueue } from "./components/EventQueue";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as FormikField } from "./components/FormikField";
@@ -92,6 +93,7 @@ export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
 export type { DoughnutChartProps, Segment } from "./components/DoughnutChart";
 export type { EmptyStateProps } from "./components/EmptyState";
+export type { EventCallback, EventQueue } from "./components/EventQueue";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
 export type { FormikFieldProps } from "./components/FormikField";

package/dist/index.js

@@ -29,6 +29,7 @@ var _exportNames = {
   ContextualMenu: true,
   DoughnutChart: true,
   EmptyState: true,
+  createEventQueue: true,
   Field: true,
   Form: true,
   FormikField: true,
@@ -584,6 +585,12 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "createEventQueue", {
+  enumerable: true,
+  get: function () {
+    return _EventQueue.createEventQueue;
+  }
+});
 Object.defineProperty(exports, "failure", {
   enumerable: true,
   get: function () {
@@ -721,6 +728,7 @@ var _ConfirmationModal = _interopRequireDefault(require("./components/Confirmati
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));
 var _DoughnutChart = _interopRequireDefault(require("./components/DoughnutChart"));
 var _EmptyState = _interopRequireDefault(require("./components/EmptyState"));
+var _EventQueue = require("./components/EventQueue");
 var _Field = _interopRequireDefault(require("./components/Field"));
 var _Form = _interopRequireDefault(require("./components/Form"));
 var _FormikField = _interopRequireDefault(require("./components/FormikField"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {