@tap-payments/os-micro-frontend-shared 0.1.368 → 0.1.369

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1 @@
1
+ export default function Toaster(): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import Box from '@mui/material/Box';
3
+ import { Toaster as HotToaster, resolveValue } from 'react-hot-toast';
4
+ import { actionSuccessIcon, warningInfoIcon } from '../../constants/index.js';
5
+ import { Content } from './style';
6
+ const icons = {
7
+ success: actionSuccessIcon,
8
+ error: warningInfoIcon,
9
+ };
10
+ export default function Toaster() {
11
+ return (_jsx(HotToaster, { children: (t) => (_jsxs(Content, { children: [icons[t.type] && _jsx(Box, { component: "img", src: icons[t.type], alt: t.type }), _jsx(Box, { children: resolveValue(t.message, t) })] })) }));
12
+ }
@@ -0,0 +1,2 @@
1
+ import Toaster from './Toaster';
2
+ export default Toaster;
@@ -0,0 +1,2 @@
1
+ import Toaster from './Toaster';
2
+ export default Toaster;
@@ -50,7 +50,7 @@ export { default as MultiSelectDropdownButton, type ButtonWithDropdownProps } fr
50
50
  export { default as MultiSelectWithSearch, type MultiSelectWithSearchProps, ChildMenuItem, ParentMenuItem } from './MultiSelectWithSearch';
51
51
  export { default as NestedDropdown, type DropdownProps, type Selected, type Placement, Dropdown, NestedMenuItem } from './NestedDropdown';
52
52
  export { default as NoInternet } from './NoInternet';
53
- export { default as Notifications } from './Notifications';
53
+ export { default as Toaster } from './Toaster';
54
54
  export { default as ProgressBar } from './ProgressBar';
55
55
  export { default as ProgressRing } from './ProgressRing';
56
56
  export * from './InputBase';
@@ -50,7 +50,7 @@ export { default as MultiSelectDropdownButton } from './MultiSelectDropdownButto
50
50
  export { default as MultiSelectWithSearch, ChildMenuItem, ParentMenuItem } from './MultiSelectWithSearch';
51
51
  export { default as NestedDropdown, Dropdown, NestedMenuItem } from './NestedDropdown';
52
52
  export { default as NoInternet } from './NoInternet';
53
- export { default as Notifications } from './Notifications';
53
+ export { default as Toaster } from './Toaster';
54
54
  export { default as ProgressBar } from './ProgressBar';
55
55
  export { default as ProgressRing } from './ProgressRing';
56
56
  export * from './InputBase';
@@ -13,3 +13,4 @@ export * from './useAppsInfo';
13
13
  export * from './useAppEventPublisher';
14
14
  export * from './useAppEventListener';
15
15
  export * from './useSelectedMerchantDetails';
16
+ export * from './useToast';
@@ -13,3 +13,4 @@ export * from './useAppsInfo';
13
13
  export * from './useAppEventPublisher';
14
14
  export * from './useAppEventListener';
15
15
  export * from './useSelectedMerchantDetails';
16
+ export * from './useToast';
@@ -0,0 +1,12 @@
1
+ import { ToastMessage } from '../types/index.js';
2
+ import type { ToastOptions } from 'react-hot-toast';
3
+ export interface ToastFunction {
4
+ (message: ToastMessage, options?: ToastOptions): string;
5
+ success: (message: ToastMessage, options?: ToastOptions) => string;
6
+ error: (message: ToastMessage, options?: ToastOptions) => string;
7
+ loading: (message: ToastMessage, options?: ToastOptions) => string;
8
+ custom: (message: ToastMessage, options?: ToastOptions) => string;
9
+ dismiss: (toastId?: string) => void;
10
+ remove: (toastId?: string) => void;
11
+ }
12
+ export declare function useToast(): ToastFunction;
@@ -0,0 +1,29 @@
1
+ import { useMemo, useCallback } from 'react';
2
+ import { useAppEventPublisher } from './index.js';
3
+ import { AppEvent } from '../types/index.js';
4
+ const generateToastId = () => crypto.randomUUID();
5
+ export function useToast() {
6
+ const publish = useAppEventPublisher(AppEvent.OnToast);
7
+ const createToastByVariant = useCallback((variant) => (message, options) => {
8
+ var _a;
9
+ const id = (_a = options === null || options === void 0 ? void 0 : options.id) !== null && _a !== void 0 ? _a : generateToastId();
10
+ publish({ action: 'show', variant, message, options: Object.assign(Object.assign({}, options), { id }) });
11
+ return id;
12
+ }, [publish]);
13
+ return useMemo(() => {
14
+ // base callable function
15
+ const toast = createToastByVariant('default');
16
+ // attach variants
17
+ toast.success = createToastByVariant('success');
18
+ toast.error = createToastByVariant('error');
19
+ toast.loading = createToastByVariant('loading');
20
+ toast.custom = createToastByVariant('custom');
21
+ toast.dismiss = (toastId) => {
22
+ publish({ action: 'dismiss', variant: 'dismiss', toastId });
23
+ };
24
+ toast.remove = (toastId) => {
25
+ publish({ action: 'remove', variant: 'remove', toastId });
26
+ };
27
+ return toast;
28
+ }, [createToastByVariant, publish]);
29
+ }
@@ -1,4 +1,4 @@
1
- import { CalenderMode, NavigateFunction, TableMode, Timezone } from './index.js';
1
+ import { CalenderMode, NavigateFunction, TableMode, Timezone, ToastEventPayload } from './index.js';
2
2
  import { DragControls } from 'framer-motion';
3
3
  export declare enum AppEvent {
4
4
  OnClickTableAction = "on-click-table-action",
@@ -10,6 +10,7 @@ export declare enum AppEvent {
10
10
  OnNavigate = "on-navigate",
11
11
  OnStartDrag = "on-start-drag",
12
12
  OnChangeAppToolbar = "on-change-app-toolbar",
13
+ OnToast = "on-toast",
13
14
  OnModifyRemotePayload = "on-modify-remote-payload"
14
15
  }
15
16
  /**
@@ -46,4 +47,5 @@ export type AppEventMap = {
46
47
  windowId: string;
47
48
  payload: object;
48
49
  }) => void;
50
+ [AppEvent.OnToast]: (params: ToastEventPayload) => void;
49
51
  };
@@ -10,6 +10,7 @@ export var AppEvent;
10
10
  AppEvent["OnNavigate"] = "on-navigate";
11
11
  AppEvent["OnStartDrag"] = "on-start-drag";
12
12
  AppEvent["OnChangeAppToolbar"] = "on-change-app-toolbar";
13
+ AppEvent["OnToast"] = "on-toast";
13
14
  // Remote Events
14
15
  AppEvent["OnModifyRemotePayload"] = "on-modify-remote-payload";
15
16
  })(AppEvent || (AppEvent = {}));
@@ -32,3 +32,4 @@ export * from './filter';
32
32
  export * from './utilities';
33
33
  export * from './reports';
34
34
  export * from './document';
35
+ export * from './toast';
@@ -32,3 +32,4 @@ export * from './filter';
32
32
  export * from './utilities';
33
33
  export * from './reports';
34
34
  export * from './document';
35
+ export * from './toast';
@@ -0,0 +1,16 @@
1
+ import type { ToastOptions, ValueOrFunction, Renderable, Toast } from 'react-hot-toast';
2
+ export type ToastMessage = ValueOrFunction<Renderable, Toast>;
3
+ export type ToastEventPayload = {
4
+ action: 'show';
5
+ variant: 'default' | 'success' | 'error' | 'loading' | 'custom';
6
+ message: ToastMessage;
7
+ options?: ToastOptions;
8
+ } | {
9
+ variant: 'dismiss';
10
+ action: 'dismiss';
11
+ toastId?: string;
12
+ } | {
13
+ variant: 'remove';
14
+ action: 'remove';
15
+ toastId?: string;
16
+ };
@@ -0,0 +1 @@
1
+ export {};
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tap-payments/os-micro-frontend-shared",
3
3
  "description": "Shared components and utilities for Tap Payments micro frontends",
4
- "version": "0.1.368",
4
+ "version": "0.1.369",
5
5
  "testVersion": 0,
6
6
  "type": "module",
7
7
  "main": "build/index.js",
@@ -1 +0,0 @@
1
- export default function Notifications(): import("react/jsx-runtime").JSX.Element;
@@ -1,12 +0,0 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
- import Box from '@mui/material/Box';
3
- import { Toaster, resolveValue } from 'react-hot-toast';
4
- import { actionSuccessIcon, warningInfoIcon } from '../../constants/index.js';
5
- import { Content } from './style';
6
- const icons = {
7
- success: actionSuccessIcon,
8
- error: warningInfoIcon,
9
- };
10
- export default function Notifications() {
11
- return (_jsx(Toaster, { children: (t) => (_jsxs(Content, { children: [icons[t.type] && _jsx(Box, { component: "img", src: icons[t.type], alt: t.type }), _jsx(Box, { children: resolveValue(t.message, t) })] })) }));
12
- }
@@ -1,2 +0,0 @@
1
- import Notifications from './Notifications';
2
- export default Notifications;
@@ -1,2 +0,0 @@
1
- import Notifications from './Notifications';
2
- export default Notifications;