@temboplus/frontend-react-core 0.1.3-beta.3 → 0.1.3-beta.4
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.
- package/dist/{ZoomOutOutlined-BY_CCwq7.js → ZoomOutOutlined-CW-jqBMI.js} +2 -2
- package/dist/{ZoomOutOutlined-BY_CCwq7.js.map → ZoomOutOutlined-CW-jqBMI.js.map} +1 -1
- package/dist/{ZoomOutOutlined-BL6A5RSq.js → ZoomOutOutlined-Pw8hpWWK.js} +2 -2
- package/dist/{ZoomOutOutlined-BL6A5RSq.js.map → ZoomOutOutlined-Pw8hpWWK.js.map} +1 -1
- package/dist/dialogs/index.cjs.js +1 -1
- package/dist/dialogs/index.js +1 -1
- package/dist/features/notifications/tembo-notify.d.ts +50 -45
- package/dist/features/notifications/tembo-notify.js +70 -42
- package/dist/features/notifications/toast-config.d.ts +2 -1
- package/dist/features/notifications/toast-config.js +20 -16
- package/dist/features/notifications/toast-container.d.ts +2 -2
- package/dist/features/notifications/toast-container.js +102 -4
- package/dist/index.cjs.js +1 -1
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.esm.js +1 -1
- package/dist/index.esm.js.map +1 -1
- package/dist/notifications/index.cjs.js +1 -1
- package/dist/notifications/index.js +1 -1
- package/dist/tembo-notify-CQLeeHrK.js +2 -0
- package/dist/tembo-notify-CQLeeHrK.js.map +1 -0
- package/dist/tembo-notify-k9u2UVuM.js +2 -0
- package/dist/tembo-notify-k9u2UVuM.js.map +1 -0
- package/package.json +1 -1
- package/dist/tembo-notify-B-mUpU8q.js +0 -2
- package/dist/tembo-notify-B-mUpU8q.js.map +0 -1
- package/dist/tembo-notify-C4_8DSSc.js +0 -2
- package/dist/tembo-notify-C4_8DSSc.js.map +0 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var e=require("../theme-provider-RhAw3jw_.js"),s=require("antd"),t=require("@ebay/nice-modal-react");require("lodash");var n=require("../InfoCircleOutlined-B7d2aRfV.js"),o=require("../ZoomOutOutlined-
|
|
1
|
+
"use strict";var e=require("../theme-provider-RhAw3jw_.js"),s=require("antd"),t=require("@ebay/nice-modal-react");require("lodash");var n=require("../InfoCircleOutlined-B7d2aRfV.js"),o=require("../ZoomOutOutlined-CW-jqBMI.js");function r(e){return e&&e.__esModule?e:{default:e}}require("react");var i=r(t);const c=i.default.create(n=>{var o,r,i;const c=t.useModal();return e.jsxRuntimeExports.jsx(s.Modal,{open:c.visible,title:n.title,onOk:async()=>{n.onOk&&await n.onOk(),c.resolve(!0),c.remove()},onCancel:()=>{n.onCancel&&n.onCancel(),c.resolve(!1),c.remove()},okText:null!==(o=n.okText)&&void 0!==o?o:"OK",cancelText:null!==(r=n.cancelText)&&void 0!==r?r:"Cancel",okButtonProps:{danger:n.okDanger,type:null!==(i=n.okType)&&void 0!==i?i:"primary"},centered:!0,destroyOnClose:!0,children:e.jsxRuntimeExports.jsxs("div",{style:{display:"flex",gap:12,alignItems:"flex-start"},children:[n.icon&&e.jsxRuntimeExports.jsx("div",{style:{fontSize:22,marginTop:2},children:n.icon}),e.jsxRuntimeExports.jsx("div",{style:{flex:1},children:n.content})]})})});const a=()=>{const{colors:s}=e.useTemboTheme();return e.jsxRuntimeExports.jsx(n.RefIcon,{style:{color:s.error.main}})},l=()=>{const{colors:s}=e.useTemboTheme();return e.jsxRuntimeExports.jsx(o.RefIcon,{style:{color:s.warning.main}})},u=()=>{const{colors:s}=e.useTemboTheme();return e.jsxRuntimeExports.jsx(n.RefIcon$1,{style:{color:s.info.main}})},x=()=>{const{colors:s}=e.useTemboTheme();return e.jsxRuntimeExports.jsx(n.RefIcon$2,{style:{color:s.success.main}})},m=()=>{const{colors:s}=e.useTemboTheme();return e.jsxRuntimeExports.jsx(o.RefIcon$1,{style:{color:s.primary.main}})};exports.ConfirmDialog=c,exports.TemboConfirm=class{static async danger(s){return i.default.show(c,Object.assign(Object.assign({},s),{icon:e.jsxRuntimeExports.jsx(a,{}),okDanger:!0,okType:"primary"}))}static async warning(s){return i.default.show(c,Object.assign(Object.assign({},s),{icon:e.jsxRuntimeExports.jsx(l,{})}))}static async info(s){return i.default.show(c,Object.assign(Object.assign({},s),{icon:e.jsxRuntimeExports.jsx(u,{})}))}static async success(s){return i.default.show(c,Object.assign(Object.assign({},s),{icon:e.jsxRuntimeExports.jsx(x,{})}))}static async confirm(s){return i.default.show(c,Object.assign(Object.assign({},s),{icon:e.jsxRuntimeExports.jsx(m,{})}))}};
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
package/dist/dialogs/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as s,u as n}from"../theme-provider-Ca4P0Hcp.js";import{Modal as o}from"antd";import e,{useModal as t}from"@ebay/nice-modal-react";import"lodash";import{R as r,a as c,b as a}from"../InfoCircleOutlined-DYs90hdV.js";import{R as i,a as l}from"../ZoomOutOutlined-
|
|
1
|
+
import{j as s,u as n}from"../theme-provider-Ca4P0Hcp.js";import{Modal as o}from"antd";import e,{useModal as t}from"@ebay/nice-modal-react";import"lodash";import{R as r,a as c,b as a}from"../InfoCircleOutlined-DYs90hdV.js";import{R as i,a as l}from"../ZoomOutOutlined-Pw8hpWWK.js";import"react";const j=e.create(n=>{var e,r,c;const a=t();return s.jsx(o,{open:a.visible,title:n.title,onOk:async()=>{n.onOk&&await n.onOk(),a.resolve(!0),a.remove()},onCancel:()=>{n.onCancel&&n.onCancel(),a.resolve(!1),a.remove()},okText:null!==(e=n.okText)&&void 0!==e?e:"OK",cancelText:null!==(r=n.cancelText)&&void 0!==r?r:"Cancel",okButtonProps:{danger:n.okDanger,type:null!==(c=n.okType)&&void 0!==c?c:"primary"},centered:!0,destroyOnClose:!0,children:s.jsxs("div",{style:{display:"flex",gap:12,alignItems:"flex-start"},children:[n.icon&&s.jsx("div",{style:{fontSize:22,marginTop:2},children:n.icon}),s.jsx("div",{style:{flex:1},children:n.content})]})})});class m{static async danger(n){return e.show(j,Object.assign(Object.assign({},n),{icon:s.jsx(y,{}),okDanger:!0,okType:"primary"}))}static async warning(n){return e.show(j,Object.assign(Object.assign({},n),{icon:s.jsx(x,{})}))}static async info(n){return e.show(j,Object.assign(Object.assign({},n),{icon:s.jsx(d,{})}))}static async success(n){return e.show(j,Object.assign(Object.assign({},n),{icon:s.jsx(u,{})}))}static async confirm(n){return e.show(j,Object.assign(Object.assign({},n),{icon:s.jsx(p,{})}))}}const y=()=>{const{colors:o}=n();return s.jsx(r,{style:{color:o.error.main}})},x=()=>{const{colors:o}=n();return s.jsx(i,{style:{color:o.warning.main}})},d=()=>{const{colors:o}=n();return s.jsx(c,{style:{color:o.info.main}})},u=()=>{const{colors:o}=n();return s.jsx(a,{style:{color:o.success.main}})},p=()=>{const{colors:o}=n();return s.jsx(l,{style:{color:o.primary.main}})};export{j as ConfirmDialog,m as TemboConfirm};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,15 +1,24 @@
|
|
|
1
1
|
import { ToastOptions, ToastContent, Id } from 'react-toastify';
|
|
2
2
|
import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
|
|
3
|
-
|
|
3
|
+
/**
|
|
4
|
+
* Message input - can be simple string or object with title and description
|
|
5
|
+
*/
|
|
6
|
+
export type NotifyMessage = ToastContent | {
|
|
7
|
+
title: string;
|
|
8
|
+
description?: string;
|
|
9
|
+
};
|
|
10
|
+
export interface NotifyOptions extends Omit<ToastOptions, 'type'> {
|
|
4
11
|
/**
|
|
5
|
-
*
|
|
6
|
-
*
|
|
12
|
+
* Unique ID for the toast to prevent duplicates
|
|
13
|
+
* If a toast with this ID exists, it will be updated instead of creating a new one
|
|
7
14
|
*/
|
|
8
|
-
|
|
15
|
+
toastId?: Id;
|
|
9
16
|
/**
|
|
10
|
-
*
|
|
17
|
+
* Duration in milliseconds before auto-closing
|
|
18
|
+
* Set to false or 0 to prevent auto-close
|
|
19
|
+
* @default 4000 for success/info/warning, 6000 for error
|
|
11
20
|
*/
|
|
12
|
-
|
|
21
|
+
duration?: number | false;
|
|
13
22
|
/**
|
|
14
23
|
* Callback when notification is clicked
|
|
15
24
|
*/
|
|
@@ -22,43 +31,30 @@ export interface NotifyOptions {
|
|
|
22
31
|
/**
|
|
23
32
|
* TemboNotify - Unified notification system
|
|
24
33
|
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
* Note: This class needs to be initialized with theme tokens before use.
|
|
29
|
-
* Call TemboNotify.init(colors, constants) in your app setup.
|
|
34
|
+
* Professional, clean notifications inspired by Supabase design system.
|
|
35
|
+
* Wraps react-toastify with consistent styling and behavior.
|
|
30
36
|
*
|
|
31
37
|
* @example
|
|
32
38
|
* ```typescript
|
|
33
|
-
* //
|
|
34
|
-
* const { colors, constants } = useTemboTheme();
|
|
35
|
-
* useEffect(() => {
|
|
36
|
-
* TemboNotify.init(colors, constants);
|
|
37
|
-
* }, [colors, constants]);
|
|
38
|
-
*
|
|
39
|
-
* // Then use anywhere in your app
|
|
39
|
+
* // Simple message
|
|
40
40
|
* TemboNotify.success('Payment sent successfully!');
|
|
41
41
|
*
|
|
42
|
-
* // With
|
|
43
|
-
* TemboNotify.error(
|
|
44
|
-
*
|
|
45
|
-
*
|
|
42
|
+
* // With title and description
|
|
43
|
+
* TemboNotify.error({
|
|
44
|
+
* title: 'Payment Failed',
|
|
45
|
+
* description: 'Insufficient funds in your account'
|
|
46
46
|
* });
|
|
47
47
|
*
|
|
48
|
-
* //
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
48
|
+
* // With toastId to prevent duplicates
|
|
49
|
+
* TemboNotify.warning('Session expiring soon', {
|
|
50
|
+
* toastId: 'session-warning',
|
|
51
|
+
* duration: 10000
|
|
52
|
+
* });
|
|
52
53
|
*
|
|
53
|
-
* //
|
|
54
|
-
* TemboNotify.
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
* pending: 'Processing...',
|
|
58
|
-
* success: 'Done!',
|
|
59
|
-
* error: 'Failed!'
|
|
60
|
-
* }
|
|
61
|
-
* );
|
|
54
|
+
* // Update existing toast
|
|
55
|
+
* const id = TemboNotify.loading('Processing...');
|
|
56
|
+
* await processPayment();
|
|
57
|
+
* TemboNotify.update(id, { type: 'success', message: 'Done!' });
|
|
62
58
|
* ```
|
|
63
59
|
*/
|
|
64
60
|
export declare class TemboNotify {
|
|
@@ -72,39 +68,48 @@ export declare class TemboNotify {
|
|
|
72
68
|
* Get current toast configs, throws if not initialized
|
|
73
69
|
*/
|
|
74
70
|
private static getConfigs;
|
|
71
|
+
/**
|
|
72
|
+
* Format message content for display
|
|
73
|
+
*/
|
|
74
|
+
private static formatMessage;
|
|
75
|
+
/**
|
|
76
|
+
* Build toast options from config and user options
|
|
77
|
+
*/
|
|
78
|
+
private static buildOptions;
|
|
75
79
|
/**
|
|
76
80
|
* Display a success notification
|
|
77
81
|
*/
|
|
78
|
-
static success(message:
|
|
82
|
+
static success(message: NotifyMessage, options?: NotifyOptions): Id;
|
|
79
83
|
/**
|
|
80
84
|
* Display an error notification
|
|
81
85
|
*/
|
|
82
|
-
static error(message:
|
|
86
|
+
static error(message: NotifyMessage, options?: NotifyOptions): Id;
|
|
83
87
|
/**
|
|
84
88
|
* Display a warning notification
|
|
85
89
|
*/
|
|
86
|
-
static warning(message:
|
|
90
|
+
static warning(message: NotifyMessage, options?: NotifyOptions): Id;
|
|
87
91
|
/**
|
|
88
92
|
* Display an info notification
|
|
89
93
|
*/
|
|
90
|
-
static info(message:
|
|
94
|
+
static info(message: NotifyMessage, options?: NotifyOptions): Id;
|
|
91
95
|
/**
|
|
92
96
|
* Display a loading notification
|
|
93
97
|
* Returns an ID that can be used to update/dismiss it
|
|
94
98
|
*/
|
|
95
|
-
static loading(message:
|
|
99
|
+
static loading(message: NotifyMessage, options?: Omit<NotifyOptions, 'duration'>): Id;
|
|
96
100
|
/**
|
|
97
101
|
* Update an existing notification
|
|
98
102
|
*/
|
|
99
103
|
static update(id: Id, options: {
|
|
100
104
|
type?: 'success' | 'error' | 'warning' | 'info';
|
|
101
|
-
message?:
|
|
105
|
+
message?: NotifyMessage;
|
|
102
106
|
autoClose?: number | false;
|
|
107
|
+
render?: ToastContent;
|
|
103
108
|
}): void;
|
|
104
109
|
/**
|
|
105
110
|
* Dismiss a specific notification by ID
|
|
106
111
|
*/
|
|
107
|
-
static dismiss(id
|
|
112
|
+
static dismiss(id?: Id): void;
|
|
108
113
|
/**
|
|
109
114
|
* Dismiss all notifications
|
|
110
115
|
*/
|
|
@@ -117,8 +122,8 @@ export declare class TemboNotify {
|
|
|
117
122
|
* Handle promise-based operations with notifications
|
|
118
123
|
*/
|
|
119
124
|
static promise<T>(promise: Promise<T>, messages: {
|
|
120
|
-
pending:
|
|
121
|
-
success:
|
|
122
|
-
error:
|
|
125
|
+
pending: NotifyMessage;
|
|
126
|
+
success: NotifyMessage | ((data: T) => NotifyMessage);
|
|
127
|
+
error: NotifyMessage | ((error: any) => NotifyMessage);
|
|
123
128
|
}, options?: NotifyOptions): Promise<T>;
|
|
124
129
|
}
|
|
@@ -1,45 +1,34 @@
|
|
|
1
|
+
import { __rest } from "tslib";
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
1
3
|
import { toast } from 'react-toastify';
|
|
2
4
|
import { buildToastConfigs } from './toast-config.js';
|
|
3
5
|
/**
|
|
4
6
|
* TemboNotify - Unified notification system
|
|
5
7
|
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* Note: This class needs to be initialized with theme tokens before use.
|
|
10
|
-
* Call TemboNotify.init(colors, constants) in your app setup.
|
|
8
|
+
* Professional, clean notifications inspired by Supabase design system.
|
|
9
|
+
* Wraps react-toastify with consistent styling and behavior.
|
|
11
10
|
*
|
|
12
11
|
* @example
|
|
13
12
|
* ```typescript
|
|
14
|
-
* //
|
|
15
|
-
* const { colors, constants } = useTemboTheme();
|
|
16
|
-
* useEffect(() => {
|
|
17
|
-
* TemboNotify.init(colors, constants);
|
|
18
|
-
* }, [colors, constants]);
|
|
19
|
-
*
|
|
20
|
-
* // Then use anywhere in your app
|
|
13
|
+
* // Simple message
|
|
21
14
|
* TemboNotify.success('Payment sent successfully!');
|
|
22
15
|
*
|
|
23
|
-
* // With
|
|
24
|
-
* TemboNotify.error(
|
|
25
|
-
*
|
|
26
|
-
*
|
|
16
|
+
* // With title and description
|
|
17
|
+
* TemboNotify.error({
|
|
18
|
+
* title: 'Payment Failed',
|
|
19
|
+
* description: 'Insufficient funds in your account'
|
|
27
20
|
* });
|
|
28
21
|
*
|
|
29
|
-
* //
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
22
|
+
* // With toastId to prevent duplicates
|
|
23
|
+
* TemboNotify.warning('Session expiring soon', {
|
|
24
|
+
* toastId: 'session-warning',
|
|
25
|
+
* duration: 10000
|
|
26
|
+
* });
|
|
33
27
|
*
|
|
34
|
-
* //
|
|
35
|
-
* TemboNotify.
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
* pending: 'Processing...',
|
|
39
|
-
* success: 'Done!',
|
|
40
|
-
* error: 'Failed!'
|
|
41
|
-
* }
|
|
42
|
-
* );
|
|
28
|
+
* // Update existing toast
|
|
29
|
+
* const id = TemboNotify.loading('Processing...');
|
|
30
|
+
* await processPayment();
|
|
31
|
+
* TemboNotify.update(id, { type: 'success', message: 'Done!' });
|
|
43
32
|
* ```
|
|
44
33
|
*/
|
|
45
34
|
export class TemboNotify {
|
|
@@ -59,37 +48,58 @@ export class TemboNotify {
|
|
|
59
48
|
}
|
|
60
49
|
return this.configs;
|
|
61
50
|
}
|
|
51
|
+
/**
|
|
52
|
+
* Format message content for display
|
|
53
|
+
*/
|
|
54
|
+
static formatMessage(message) {
|
|
55
|
+
if (message && typeof message === 'object' && 'title' in message) {
|
|
56
|
+
return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: 14 }, children: message.title }), message.description && (_jsx("div", { style: { fontSize: 13, opacity: 0.9 }, children: message.description }))] }));
|
|
57
|
+
}
|
|
58
|
+
return message;
|
|
59
|
+
}
|
|
60
|
+
/**
|
|
61
|
+
* Build toast options from config and user options
|
|
62
|
+
*/
|
|
63
|
+
static buildOptions(baseConfig, options) {
|
|
64
|
+
const _a = options || {}, { duration, toastId, onClick, onClose } = _a, restOptions = __rest(_a, ["duration", "toastId", "onClick", "onClose"]);
|
|
65
|
+
return Object.assign(Object.assign(Object.assign({}, baseConfig), restOptions), { toastId, autoClose: duration !== undefined ? (duration || false) : baseConfig.autoClose, onClick,
|
|
66
|
+
onClose });
|
|
67
|
+
}
|
|
62
68
|
/**
|
|
63
69
|
* Display a success notification
|
|
64
70
|
*/
|
|
65
71
|
static success(message, options) {
|
|
66
|
-
var _a;
|
|
67
72
|
const configs = this.getConfigs();
|
|
68
|
-
|
|
73
|
+
const content = this.formatMessage(message);
|
|
74
|
+
const toastOptions = this.buildOptions(configs.successConfig, options);
|
|
75
|
+
return toast.success(content, toastOptions);
|
|
69
76
|
}
|
|
70
77
|
/**
|
|
71
78
|
* Display an error notification
|
|
72
79
|
*/
|
|
73
80
|
static error(message, options) {
|
|
74
|
-
var _a;
|
|
75
81
|
const configs = this.getConfigs();
|
|
76
|
-
|
|
82
|
+
const content = this.formatMessage(message);
|
|
83
|
+
const toastOptions = this.buildOptions(configs.errorConfig, options);
|
|
84
|
+
return toast.error(content, toastOptions);
|
|
77
85
|
}
|
|
78
86
|
/**
|
|
79
87
|
* Display a warning notification
|
|
80
88
|
*/
|
|
81
89
|
static warning(message, options) {
|
|
82
|
-
var _a;
|
|
83
90
|
const configs = this.getConfigs();
|
|
84
|
-
|
|
91
|
+
const content = this.formatMessage(message);
|
|
92
|
+
const toastOptions = this.buildOptions(configs.warningConfig, options);
|
|
93
|
+
return toast.warning(content, toastOptions);
|
|
85
94
|
}
|
|
86
95
|
/**
|
|
87
96
|
* Display an info notification
|
|
88
97
|
*/
|
|
89
98
|
static info(message, options) {
|
|
90
|
-
var _a;
|
|
91
99
|
const configs = this.getConfigs();
|
|
92
|
-
|
|
100
|
+
const content = this.formatMessage(message);
|
|
101
|
+
const toastOptions = this.buildOptions(configs.infoConfig, options);
|
|
102
|
+
return toast.info(content, toastOptions);
|
|
93
103
|
}
|
|
94
104
|
/**
|
|
95
105
|
* Display a loading notification
|
|
@@ -97,7 +107,11 @@ export class TemboNotify {
|
|
|
97
107
|
*/
|
|
98
108
|
static loading(message, options) {
|
|
99
109
|
const configs = this.getConfigs();
|
|
100
|
-
|
|
110
|
+
const content = this.formatMessage(message);
|
|
111
|
+
const _a = options || {}, { toastId, onClick, onClose } = _a, restOptions = __rest(_a, ["toastId", "onClick", "onClose"]);
|
|
112
|
+
return toast.loading(content, Object.assign(Object.assign(Object.assign({}, configs.loadingConfig), restOptions), { toastId,
|
|
113
|
+
onClick,
|
|
114
|
+
onClose }));
|
|
101
115
|
}
|
|
102
116
|
/**
|
|
103
117
|
* Update an existing notification
|
|
@@ -111,7 +125,10 @@ export class TemboNotify {
|
|
|
111
125
|
warning: configs.warningConfig,
|
|
112
126
|
info: configs.infoConfig,
|
|
113
127
|
}[options.type] : undefined;
|
|
114
|
-
|
|
128
|
+
const content = options.message
|
|
129
|
+
? this.formatMessage(options.message)
|
|
130
|
+
: options.render;
|
|
131
|
+
toast.update(id, Object.assign({ render: content, type: options.type, isLoading: false, autoClose: (_a = options.autoClose) !== null && _a !== void 0 ? _a : config === null || config === void 0 ? void 0 : config.autoClose }, config));
|
|
115
132
|
}
|
|
116
133
|
/**
|
|
117
134
|
* Dismiss a specific notification by ID
|
|
@@ -138,11 +155,22 @@ export class TemboNotify {
|
|
|
138
155
|
var _a, _b;
|
|
139
156
|
const configs = this.getConfigs();
|
|
140
157
|
return toast.promise(promise, {
|
|
141
|
-
pending: Object.assign({ render: messages.pending }, configs.loadingConfig),
|
|
142
|
-
success: Object.assign(Object.assign({ render:
|
|
143
|
-
|
|
158
|
+
pending: Object.assign({ render: this.formatMessage(messages.pending) }, configs.loadingConfig),
|
|
159
|
+
success: Object.assign(Object.assign({ render: (data) => {
|
|
160
|
+
const msg = typeof messages.success === 'function'
|
|
161
|
+
? messages.success(data)
|
|
162
|
+
: messages.success;
|
|
163
|
+
return this.formatMessage(msg);
|
|
164
|
+
} }, configs.successConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.successConfig.autoClose }),
|
|
165
|
+
error: Object.assign(Object.assign({ render: (error) => {
|
|
166
|
+
const msg = typeof messages.error === 'function'
|
|
167
|
+
? messages.error(error)
|
|
168
|
+
: messages.error;
|
|
169
|
+
return this.formatMessage(msg);
|
|
170
|
+
} }, configs.errorConfig), { autoClose: (_b = options === null || options === void 0 ? void 0 : options.duration) !== null && _b !== void 0 ? _b : configs.errorConfig.autoClose }),
|
|
144
171
|
}, {
|
|
145
172
|
position: options === null || options === void 0 ? void 0 : options.position,
|
|
173
|
+
toastId: options === null || options === void 0 ? void 0 : options.toastId,
|
|
146
174
|
});
|
|
147
175
|
}
|
|
148
176
|
}
|
|
@@ -2,7 +2,7 @@ import { ToastOptions } from 'react-toastify';
|
|
|
2
2
|
import { TemboColorPalette, TemboUIConstants } from '../../theme/index.js';
|
|
3
3
|
/**
|
|
4
4
|
* Build toast configurations from theme tokens
|
|
5
|
-
*
|
|
5
|
+
* Professional, clean design inspired by Supabase
|
|
6
6
|
*/
|
|
7
7
|
export declare const buildToastConfigs: (colors: TemboColorPalette, constants: TemboUIConstants) => {
|
|
8
8
|
loadingConfig: ToastOptions<unknown>;
|
|
@@ -11,5 +11,6 @@ export declare const buildToastConfigs: (colors: TemboColorPalette, constants: T
|
|
|
11
11
|
errorConfig: ToastOptions<unknown>;
|
|
12
12
|
successConfig: ToastOptions<unknown>;
|
|
13
13
|
baseConfig: ToastOptions<unknown>;
|
|
14
|
+
colors: TemboColorPalette;
|
|
14
15
|
};
|
|
15
16
|
export type ToastConfigs = ReturnType<typeof buildToastConfigs>;
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, } from '@ant-design/icons';
|
|
2
|
+
import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, LoadingOutlined, } from '@ant-design/icons';
|
|
3
3
|
/**
|
|
4
4
|
* Build toast configurations from theme tokens
|
|
5
|
-
*
|
|
5
|
+
* Professional, clean design inspired by Supabase
|
|
6
6
|
*/
|
|
7
7
|
export const buildToastConfigs = (colors, constants) => {
|
|
8
8
|
/**
|
|
9
|
-
* Common toast configuration
|
|
9
|
+
* Common toast configuration - Supabase-inspired clean design
|
|
10
10
|
*/
|
|
11
11
|
const baseConfig = {
|
|
12
12
|
position: 'top-right',
|
|
@@ -15,33 +15,36 @@ export const buildToastConfigs = (colors, constants) => {
|
|
|
15
15
|
closeOnClick: true,
|
|
16
16
|
pauseOnHover: true,
|
|
17
17
|
draggable: true,
|
|
18
|
-
progress: undefined,
|
|
19
18
|
style: {
|
|
20
19
|
fontFamily: constants.typography.fontFamily,
|
|
21
|
-
fontSize:
|
|
22
|
-
borderRadius:
|
|
20
|
+
fontSize: 14,
|
|
21
|
+
borderRadius: 8,
|
|
22
|
+
padding: '12px 16px',
|
|
23
|
+
boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
|
|
24
|
+
border: '1px solid',
|
|
25
|
+
minHeight: 56,
|
|
23
26
|
},
|
|
24
27
|
};
|
|
25
28
|
/**
|
|
26
|
-
* Success notification
|
|
29
|
+
* Success notification - Clean green
|
|
27
30
|
*/
|
|
28
|
-
const successConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CheckCircleOutlined, { style: { fontSize:
|
|
31
|
+
const successConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CheckCircleOutlined, { style: { fontSize: 18, color: colors.success.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.main, borderColor: colors.success.border, color: colors.text.primary }), className: 'toast-success', progressClassName: 'toast-progress-success' });
|
|
29
32
|
/**
|
|
30
|
-
* Error notification
|
|
33
|
+
* Error notification - Clean red
|
|
31
34
|
*/
|
|
32
|
-
const errorConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CloseCircleOutlined, { style: { fontSize:
|
|
35
|
+
const errorConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CloseCircleOutlined, { style: { fontSize: 18, color: colors.error.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.main, borderColor: colors.error.border, color: colors.text.primary }), className: 'toast-error', progressClassName: 'toast-progress-error', autoClose: 6000 });
|
|
33
36
|
/**
|
|
34
|
-
* Warning notification
|
|
37
|
+
* Warning notification - Clean amber
|
|
35
38
|
*/
|
|
36
|
-
const warningConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(ExclamationCircleOutlined, { style: { fontSize:
|
|
39
|
+
const warningConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(ExclamationCircleOutlined, { style: { fontSize: 18, color: colors.warning.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.main, borderColor: colors.warning.border, color: colors.text.primary }), className: 'toast-warning', progressClassName: 'toast-progress-warning' });
|
|
37
40
|
/**
|
|
38
|
-
* Info notification
|
|
41
|
+
* Info notification - Clean blue
|
|
39
42
|
*/
|
|
40
|
-
const infoConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(InfoCircleOutlined, { style: { fontSize:
|
|
43
|
+
const infoConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(InfoCircleOutlined, { style: { fontSize: 18, color: colors.info.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.main, borderColor: colors.info.border, color: colors.text.primary }), className: 'toast-info', progressClassName: 'toast-progress-info' });
|
|
41
44
|
/**
|
|
42
|
-
* Loading notification
|
|
45
|
+
* Loading notification - Clean with spinner
|
|
43
46
|
*/
|
|
44
|
-
const loadingConfig = Object.assign(Object.assign({}, baseConfig), { autoClose: false, closeButton: false });
|
|
47
|
+
const loadingConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(LoadingOutlined, { style: { fontSize: 18, color: colors.primary.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { backgroundColor: colors.surface.main, borderColor: colors.border.main, color: colors.text.primary }), className: 'toast-loading', autoClose: false, closeButton: false, hideProgressBar: true });
|
|
45
48
|
return {
|
|
46
49
|
loadingConfig,
|
|
47
50
|
infoConfig,
|
|
@@ -49,5 +52,6 @@ export const buildToastConfigs = (colors, constants) => {
|
|
|
49
52
|
errorConfig,
|
|
50
53
|
successConfig,
|
|
51
54
|
baseConfig,
|
|
55
|
+
colors, // Export colors for CSS generation
|
|
52
56
|
};
|
|
53
57
|
};
|
|
@@ -2,8 +2,8 @@ import React from 'react';
|
|
|
2
2
|
import { ToastContainerProps as RTToastContainerProps } from 'react-toastify';
|
|
3
3
|
export type TemboToastContainerProps = RTToastContainerProps;
|
|
4
4
|
/**
|
|
5
|
-
* Toast container
|
|
6
|
-
*
|
|
5
|
+
* Toast container with Supabase-inspired professional styling
|
|
6
|
+
* Automatically initializes TemboNotify with current theme
|
|
7
7
|
*/
|
|
8
8
|
declare const TemboToastContainer: React.FC<TemboToastContainerProps>;
|
|
9
9
|
export default TemboToastContainer;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useEffect } from 'react';
|
|
3
3
|
import { ToastContainer } from 'react-toastify';
|
|
4
4
|
import { useTemboTheme } from '../../theme/index.js';
|
|
5
5
|
import { TemboNotify } from './tembo-notify.js';
|
|
6
6
|
/**
|
|
7
|
-
* Toast container
|
|
8
|
-
*
|
|
7
|
+
* Toast container with Supabase-inspired professional styling
|
|
8
|
+
* Automatically initializes TemboNotify with current theme
|
|
9
9
|
*/
|
|
10
10
|
const TemboToastContainer = (props) => {
|
|
11
11
|
const { colors, constants } = useTemboTheme();
|
|
@@ -13,6 +13,104 @@ const TemboToastContainer = (props) => {
|
|
|
13
13
|
useEffect(() => {
|
|
14
14
|
TemboNotify.init(colors, constants);
|
|
15
15
|
}, [colors, constants]);
|
|
16
|
-
return _jsx(ToastContainer, Object.assign({}, props))
|
|
16
|
+
return (_jsxs(_Fragment, { children: [_jsx(ToastContainer, Object.assign({}, props)), _jsx("style", { children: `
|
|
17
|
+
/* Supabase-inspired professional toast styles */
|
|
18
|
+
.Toastify__toast {
|
|
19
|
+
font-family: ${constants.typography.fontFamily};
|
|
20
|
+
line-height: 1.5;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.Toastify__toast-body {
|
|
24
|
+
padding: 0;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.Toastify__toast-icon {
|
|
28
|
+
width: 18px;
|
|
29
|
+
margin-inline-end: 12px;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.Toastify__close-button {
|
|
33
|
+
opacity: 0.5;
|
|
34
|
+
transition: opacity 0.2s ease;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.Toastify__close-button:hover {
|
|
38
|
+
opacity: 1;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
/* Progress bar styling by type */
|
|
42
|
+
.Toastify__progress-bar {
|
|
43
|
+
height: 3px;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.toast-progress-success .Toastify__progress-bar {
|
|
47
|
+
background: ${colors.success.main};
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.toast-progress-error .Toastify__progress-bar {
|
|
51
|
+
background: ${colors.error.main};
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.toast-progress-warning .Toastify__progress-bar {
|
|
55
|
+
background: ${colors.warning.main};
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.toast-progress-info .Toastify__progress-bar {
|
|
59
|
+
background: ${colors.info.main};
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
/* Smooth entrance animation */
|
|
63
|
+
@keyframes toastSlideIn {
|
|
64
|
+
from {
|
|
65
|
+
transform: translateX(110%);
|
|
66
|
+
opacity: 0;
|
|
67
|
+
}
|
|
68
|
+
to {
|
|
69
|
+
transform: translateX(0);
|
|
70
|
+
opacity: 1;
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
.Toastify__toast--top-right {
|
|
75
|
+
animation: toastSlideIn 0.3s ease-out;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.Toastify__toast--top-left {
|
|
79
|
+
animation: toastSlideIn 0.3s ease-out;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
.Toastify__toast--top-center {
|
|
83
|
+
animation: toastSlideIn 0.3s ease-out;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Smooth exit animation */
|
|
87
|
+
@keyframes toastSlideOut {
|
|
88
|
+
from {
|
|
89
|
+
transform: translateX(0);
|
|
90
|
+
opacity: 1;
|
|
91
|
+
}
|
|
92
|
+
to {
|
|
93
|
+
transform: translateX(110%);
|
|
94
|
+
opacity: 0;
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
.Toastify__toast--top-right.Toastify__toast--removing {
|
|
99
|
+
animation: toastSlideOut 0.3s ease-in forwards;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
/* Responsive spacing */
|
|
103
|
+
@media only screen and (max-width: 480px) {
|
|
104
|
+
.Toastify__toast-container {
|
|
105
|
+
padding: 0;
|
|
106
|
+
width: 100vw;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.Toastify__toast {
|
|
110
|
+
margin-bottom: 0;
|
|
111
|
+
border-radius: 0;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
` })] }));
|
|
17
115
|
};
|
|
18
116
|
export default TemboToastContainer;
|
package/dist/index.cjs.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";var
|
|
1
|
+
"use strict";var n=require("./theme-provider-RhAw3jw_.js"),t=require("@ebay/nice-modal-react"),s=require("react"),o=require("react-toastify");require("lodash");var e=require("./tembo-notify-CQLeeHrK.js");function r(n){return n&&n.__esModule?n:{default:n}}require("antd"),require("tslib"),require("./InfoCircleOutlined-B7d2aRfV.js"),require("./ZoomOutOutlined-CW-jqBMI.js");var a=r(t);const i=t=>n.jsxRuntimeExports.jsx(a.default.Provider,{children:t.children}),m=t=>{const{colors:r,constants:a}=n.useTemboTheme();return s.useEffect(()=>{e.TemboNotify.init(r,a)},[r,a]),n.jsxRuntimeExports.jsxs(n.jsxRuntimeExports.Fragment,{children:[n.jsxRuntimeExports.jsx(o.ToastContainer,Object.assign({},t)),n.jsxRuntimeExports.jsx("style",{children:`\n /* Supabase-inspired professional toast styles */\n .Toastify__toast {\n font-family: ${a.typography.fontFamily};\n line-height: 1.5;\n }\n \n .Toastify__toast-body {\n padding: 0;\n }\n \n .Toastify__toast-icon {\n width: 18px;\n margin-inline-end: 12px;\n }\n \n .Toastify__close-button {\n opacity: 0.5;\n transition: opacity 0.2s ease;\n }\n \n .Toastify__close-button:hover {\n opacity: 1;\n }\n \n /* Progress bar styling by type */\n .Toastify__progress-bar {\n height: 3px;\n }\n \n .toast-progress-success .Toastify__progress-bar {\n background: ${r.success.main};\n }\n \n .toast-progress-error .Toastify__progress-bar {\n background: ${r.error.main};\n }\n \n .toast-progress-warning .Toastify__progress-bar {\n background: ${r.warning.main};\n }\n \n .toast-progress-info .Toastify__progress-bar {\n background: ${r.info.main};\n }\n \n /* Smooth entrance animation */\n @keyframes toastSlideIn {\n from {\n transform: translateX(110%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n \n .Toastify__toast--top-right {\n animation: toastSlideIn 0.3s ease-out;\n }\n \n .Toastify__toast--top-left {\n animation: toastSlideIn 0.3s ease-out;\n }\n \n .Toastify__toast--top-center {\n animation: toastSlideIn 0.3s ease-out;\n }\n \n /* Smooth exit animation */\n @keyframes toastSlideOut {\n from {\n transform: translateX(0);\n opacity: 1;\n }\n to {\n transform: translateX(110%);\n opacity: 0;\n }\n }\n \n .Toastify__toast--top-right.Toastify__toast--removing {\n animation: toastSlideOut 0.3s ease-in forwards;\n }\n \n /* Responsive spacing */\n @media only screen and (max-width: 480px) {\n .Toastify__toast-container {\n padding: 0;\n width: 100vw;\n }\n \n .Toastify__toast {\n margin-bottom: 0;\n border-radius: 0;\n }\n }\n `})]})};exports.TemboUIProviders=({children:t,colors:s,constants:o,themeOverrides:e})=>n.jsxRuntimeExports.jsx(n.TemboThemeProvider,{colors:s,constants:o,themeOverrides:e,children:n.jsxRuntimeExports.jsxs(i,{children:[t,n.jsxRuntimeExports.jsx(m,{})]})});
|
|
2
2
|
//# sourceMappingURL=index.cjs.js.map
|
package/dist/index.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs.js","sources":["../src/features/dialogs/modal-provider.tsx","../src/features/notifications/toast-container.tsx","../src/providers.tsx"],"sourcesContent":[null,null,null],"names":["TemboModalProvider","props","_jsx","NiceModal","Provider","children","TemboToastContainer","colors","constants","useTemboTheme","useEffect","TemboNotify","init","ToastContainer","
|
|
1
|
+
{"version":3,"file":"index.cjs.js","sources":["../src/features/dialogs/modal-provider.tsx","../src/features/notifications/toast-container.tsx","../src/providers.tsx"],"sourcesContent":[null,null,null],"names":["TemboModalProvider","props","_jsx","NiceModal","Provider","children","TemboToastContainer","colors","constants","useTemboTheme","useEffect","TemboNotify","init","_jsxs","ToastContainer","typography","fontFamily","success","main","error","warning","info","themeOverrides","TemboThemeProvider"],"mappings":"gYAGA,MAAMA,EAAmDC,GAC9CC,EAAAA,kBAAAA,IAACC,EAAAA,QAAUC,mBAAUH,EAAMI,WCOhCC,EAA2DL,IAC7D,MAAMM,OAAEA,EAAMC,UAAEA,GAAcC,kBAO9B,OAJAC,EAAAA,UAAU,KACNC,cAAYC,KAAKL,EAAQC,IAC1B,CAACD,EAAQC,IAGRK,EAAAA,kBAAAA,6CACIX,EAAAA,kBAAAA,IAACY,EAAAA,gCAAmBb,IACpBC,EAAAA,kBAAAA,IAAA,QAAA,CAAAG,SAAQ,6IAGeG,EAAUO,WAAWC,g5BA4BtBT,EAAOU,QAAQC,gJAIfX,EAAOY,MAAMD,kJAIbX,EAAOa,QAAQF,+IAIfX,EAAOc,KAAKH,o6DCtBmB,EAC7Db,WACAE,SACAC,YACAc,oBAGIpB,EAAAA,kBAAAA,IAACqB,qBAAkB,CACfhB,OAAQA,EACRC,UAAWA,EACXc,eAAgBA,EAAcjB,SAE9BQ,EAAAA,kBAAAA,KAACb,EAAkB,CAAAK,SAAA,CACdA,EACDH,EAAAA,kBAAAA,IAACI,EAAmB,CAAA"}
|
package/dist/index.esm.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{j as
|
|
1
|
+
import{j as n,u as t,T as o}from"./theme-provider-Ca4P0Hcp.js";import s from"@ebay/nice-modal-react";import{useEffect as a}from"react";import{ToastContainer as r}from"react-toastify";import"lodash";import{T as i}from"./tembo-notify-k9u2UVuM.js";import"antd";import"tslib";import"./InfoCircleOutlined-DYs90hdV.js";import"./ZoomOutOutlined-Pw8hpWWK.js";const e=t=>n.jsx(s.Provider,{children:t.children}),m=o=>{const{colors:s,constants:e}=t();return a(()=>{i.init(s,e)},[s,e]),n.jsxs(n.Fragment,{children:[n.jsx(r,Object.assign({},o)),n.jsx("style",{children:`\n /* Supabase-inspired professional toast styles */\n .Toastify__toast {\n font-family: ${e.typography.fontFamily};\n line-height: 1.5;\n }\n \n .Toastify__toast-body {\n padding: 0;\n }\n \n .Toastify__toast-icon {\n width: 18px;\n margin-inline-end: 12px;\n }\n \n .Toastify__close-button {\n opacity: 0.5;\n transition: opacity 0.2s ease;\n }\n \n .Toastify__close-button:hover {\n opacity: 1;\n }\n \n /* Progress bar styling by type */\n .Toastify__progress-bar {\n height: 3px;\n }\n \n .toast-progress-success .Toastify__progress-bar {\n background: ${s.success.main};\n }\n \n .toast-progress-error .Toastify__progress-bar {\n background: ${s.error.main};\n }\n \n .toast-progress-warning .Toastify__progress-bar {\n background: ${s.warning.main};\n }\n \n .toast-progress-info .Toastify__progress-bar {\n background: ${s.info.main};\n }\n \n /* Smooth entrance animation */\n @keyframes toastSlideIn {\n from {\n transform: translateX(110%);\n opacity: 0;\n }\n to {\n transform: translateX(0);\n opacity: 1;\n }\n }\n \n .Toastify__toast--top-right {\n animation: toastSlideIn 0.3s ease-out;\n }\n \n .Toastify__toast--top-left {\n animation: toastSlideIn 0.3s ease-out;\n }\n \n .Toastify__toast--top-center {\n animation: toastSlideIn 0.3s ease-out;\n }\n \n /* Smooth exit animation */\n @keyframes toastSlideOut {\n from {\n transform: translateX(0);\n opacity: 1;\n }\n to {\n transform: translateX(110%);\n opacity: 0;\n }\n }\n \n .Toastify__toast--top-right.Toastify__toast--removing {\n animation: toastSlideOut 0.3s ease-in forwards;\n }\n \n /* Responsive spacing */\n @media only screen and (max-width: 480px) {\n .Toastify__toast-container {\n padding: 0;\n width: 100vw;\n }\n \n .Toastify__toast {\n margin-bottom: 0;\n border-radius: 0;\n }\n }\n `})]})},p=({children:t,colors:s,constants:a,themeOverrides:r})=>n.jsx(o,{colors:s,constants:a,themeOverrides:r,children:n.jsxs(e,{children:[t,n.jsx(m,{})]})});export{p as TemboUIProviders};
|
|
2
2
|
//# sourceMappingURL=index.esm.js.map
|