@temboplus/frontend-react-core 0.1.3-beta.1 → 0.1.3-beta.2

package/dist/features/notifications/tembo-notify.js

@@ -0,0 +1,149 @@
+import { toast } from 'react-toastify';
+import { buildToastConfigs } from './toast-config.js';
+/**
+ * TemboNotify - Unified notification system
+ *
+ * Wraps react-toastify with consistent styling and behavior
+ * aligned with Tembo's design system.
+ *
+ * Note: This class needs to be initialized with theme tokens before use.
+ * Call TemboNotify.init(colors, constants) in your app setup.
+ *
+ * @example
+ * ```typescript
+ * // In your app setup (e.g., App.tsx)
+ * const { colors, constants } = useTemboTheme();
+ * useEffect(() => {
+ *   TemboNotify.init(colors, constants);
+ * }, [colors, constants]);
+ *
+ * // Then use anywhere in your app
+ * TemboNotify.success('Payment sent successfully!');
+ *
+ * // With options
+ * TemboNotify.error('Payment failed', {
+ *   duration: 8000,
+ *   onClick: () => console.log('Error clicked')
+ * });
+ *
+ * // Loading with promise
+ * const loadingId = TemboNotify.loading('Processing payment...');
+ * await processPayment();
+ * TemboNotify.success('Payment complete!', { id: loadingId });
+ *
+ * // Promise-based
+ * TemboNotify.promise(
+ *   apiCall(),
+ *   {
+ *     pending: 'Processing...',
+ *     success: 'Done!',
+ *     error: 'Failed!'
+ *   }
+ * );
+ * ```
+ */
+export class TemboNotify {
+    /**
+     * Initialize TemboNotify with theme tokens
+     * Must be called before using any notification methods
+     */
+    static init(colors, constants) {
+        this.configs = buildToastConfigs(colors, constants);
+    }
+    /**
+     * Get current toast configs, throws if not initialized
+     */
+    static getConfigs() {
+        if (!this.configs) {
+            throw new Error('TemboNotify not initialized. Call TemboNotify.init(colors, constants) before using notifications.');
+        }
+        return this.configs;
+    }
+    /**
+     * Display a success notification
+     */
+    static success(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.success(message, Object.assign(Object.assign({}, configs.successConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.successConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display an error notification
+     */
+    static error(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.error(message, Object.assign(Object.assign({}, configs.errorConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.errorConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display a warning notification
+     */
+    static warning(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.warning(message, Object.assign(Object.assign({}, configs.warningConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.warningConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display an info notification
+     */
+    static info(message, options) {
+        var _a;
+        const configs = this.getConfigs();
+        return toast.info(message, Object.assign(Object.assign({}, configs.infoConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.infoConfig.autoClose, position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Display a loading notification
+     * Returns an ID that can be used to update/dismiss it
+     */
+    static loading(message, options) {
+        const configs = this.getConfigs();
+        return toast.loading(message, Object.assign(Object.assign({}, configs.loadingConfig), { position: options === null || options === void 0 ? void 0 : options.position, onClick: options === null || options === void 0 ? void 0 : options.onClick, onClose: options === null || options === void 0 ? void 0 : options.onClose }));
+    }
+    /**
+     * Update an existing notification
+     */
+    static update(id, options) {
+        var _a;
+        const configs = this.getConfigs();
+        const config = options.type ? {
+            success: configs.successConfig,
+            error: configs.errorConfig,
+            warning: configs.warningConfig,
+            info: configs.infoConfig,
+        }[options.type] : undefined;
+        toast.update(id, Object.assign({ render: options.message, type: options.type, isLoading: false, autoClose: (_a = options.autoClose) !== null && _a !== void 0 ? _a : config === null || config === void 0 ? void 0 : config.autoClose }, config));
+    }
+    /**
+     * Dismiss a specific notification by ID
+     */
+    static dismiss(id) {
+        toast.dismiss(id);
+    }
+    /**
+     * Dismiss all notifications
+     */
+    static dismissAll() {
+        toast.dismiss();
+    }
+    /**
+     * Check if a notification is active
+     */
+    static isActive(id) {
+        return toast.isActive(id);
+    }
+    /**
+     * Handle promise-based operations with notifications
+     */
+    static promise(promise, messages, options) {
+        var _a, _b;
+        const configs = this.getConfigs();
+        return toast.promise(promise, {
+            pending: Object.assign({ render: messages.pending }, configs.loadingConfig),
+            success: Object.assign(Object.assign({ render: messages.success }, configs.successConfig), { autoClose: (_a = options === null || options === void 0 ? void 0 : options.duration) !== null && _a !== void 0 ? _a : configs.successConfig.autoClose }),
+            error: Object.assign(Object.assign({ render: messages.error }, configs.errorConfig), { autoClose: (_b = options === null || options === void 0 ? void 0 : options.duration) !== null && _b !== void 0 ? _b : configs.errorConfig.autoClose }),
+        }, {
+            position: options === null || options === void 0 ? void 0 : options.position,
+        });
+    }
+}
+TemboNotify.configs = null;

package/dist/features/notifications/toast-config.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CheckCircleOutlined, CloseCircleOutlined, ExclamationCircleOutlined, InfoCircleOutlined, } from '@ant-design/icons';
+/**
+ * Build toast configurations from theme tokens
+ * This function is called with theme values to generate toast configs
+ */
+export const buildToastConfigs = (colors, constants) => {
+    /**
+     * Common toast configuration aligned with Tembo theme
+     */
+    const baseConfig = {
+        position: 'top-right',
+        autoClose: 4000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+        progress: undefined,
+        style: {
+            fontFamily: constants.typography.fontFamily,
+            fontSize: constants.typography.fontSize.base,
+            borderRadius: constants.radius.base,
+        },
+    };
+    /**
+     * Success notification configuration
+     */
+    const successConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CheckCircleOutlined, { style: { fontSize: 20, color: colors.success.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.success.border}` }) });
+    /**
+     * Error notification configuration
+     */
+    const errorConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(CloseCircleOutlined, { style: { fontSize: 20, color: colors.error.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.error.border}` }), autoClose: 6000 });
+    /**
+     * Warning notification configuration
+     */
+    const warningConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(ExclamationCircleOutlined, { style: { fontSize: 20, color: colors.warning.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.warning.border}` }) });
+    /**
+     * Info notification configuration
+     */
+    const infoConfig = Object.assign(Object.assign({}, baseConfig), { icon: _jsx(InfoCircleOutlined, { style: { fontSize: 20, color: colors.info.main } }), style: Object.assign(Object.assign({}, baseConfig.style), { border: `1px solid ${colors.info.border}` }) });
+    /**
+     * Loading notification configuration
+     */
+    const loadingConfig = Object.assign(Object.assign({}, baseConfig), { autoClose: false, closeButton: false });
+    return {
+        loadingConfig,
+        infoConfig,
+        warningConfig,
+        errorConfig,
+        successConfig,
+        baseConfig,
+    };
+};

package/dist/features/notifications/toast-container.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from 'react';
+import { ToastContainer } from 'react-toastify';
+import { useTemboTheme } from '../../theme/index.js';
+import { TemboNotify } from './tembo-notify.js';
+/**
+ * Toast container that automatically initializes TemboNotify with current theme
+ * Reinitializes when theme changes to respect color/constant overrides
+ */
+const TemboToastContainer = (props) => {
+    const { colors, constants } = useTemboTheme();
+    // Initialize/update TemboNotify whenever theme changes
+    useEffect(() => {
+        TemboNotify.init(colors, constants);
+    }, [colors, constants]);
+    return _jsx(ToastContainer, Object.assign({}, props));
+};
+export default TemboToastContainer;

package/dist/index.js

@@ -0,0 +1 @@
+export * from "./providers.js";

package/dist/notifications/index.d.ts

@@ -0,0 +1 @@
+export * from "../features/notifications";

package/dist/providers.js

@@ -0,0 +1,32 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import TemboModalProvider from './features/dialogs/modal-provider.js';
+import TemboToastContainer from './features/notifications/toast-container.js';
+import { TemboThemeProvider } from './theme/index.js';
+/**
+ * Top-level provider that wires up theme, modal and notifications
+ * for all Tembo UI components.
+ *
+ * Supports theme customization through colors and constants props.
+ * TemboToastContainer automatically syncs with theme changes.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TemboUIProviders>
+ *   <App />
+ * </TemboUIProviders>
+ *
+ * // With custom colors
+ * <TemboUIProviders
+ *   colors={{
+ *     primary: { main: '#007bff' },
+ *     action: { main: '#28a745' }
+ *   }}
+ * >
+ *   <App />
+ * </TemboUIProviders>
+ * ```
+ */
+export const TemboUIProviders = ({ children, colors, constants, themeOverrides, }) => {
+    return (_jsx(TemboThemeProvider, { colors: colors, constants: constants, themeOverrides: themeOverrides, children: _jsxs(TemboModalProvider, { children: [children, _jsx(TemboToastContainer, {})] }) }));
+};

package/dist/theme/colors.js

@@ -0,0 +1,138 @@
+import { merge } from "lodash";
+/**
+ * Default Tembo color palette
+ * Light theme with professional, accessible colors
+ */
+export const defaultColorPalette = {
+    primary: {
+        main: '#000000',
+        hover: '#1a1a1a',
+        active: '#000000',
+        light: '#666666',
+        lighter: '#999999',
+        contrast: '#FFFFFF',
+    },
+    action: {
+        main: '#1a6985',
+        hover: '#145268',
+        active: '#0f3d4f',
+        light: '#e8f2f5',
+        lighter: '#f4f9fa',
+        disabled: '#a3c9d6',
+        contrast: '#FFFFFF',
+    },
+    neutral: {
+        50: '#ffffff',
+        100: '#fafafa',
+        200: '#f5f5f5',
+        300: '#f0f0f0',
+        400: '#e5e5e5',
+        500: '#d4d4d4',
+        600: '#b3b3b3',
+        700: '#999999',
+        800: '#666666',
+        900: '#1a1a1a',
+        950: '#000000',
+    },
+    success: {
+        main: '#10b981',
+        bg: '#ecfdf5',
+        border: '#a7f3d0',
+        text: '#047857',
+    },
+    error: {
+        main: '#ef4444',
+        bg: '#fef2f2',
+        border: '#fecaca',
+        text: '#dc2626',
+    },
+    warning: {
+        main: '#f59e0b',
+        bg: '#fffbeb',
+        border: '#fde68a',
+        text: '#d97706',
+    },
+    info: {
+        main: '#1a6985',
+        bg: '#e8f2f5',
+        border: '#b8d9e6',
+        text: '#0f3d4f',
+    },
+    surface: {
+        background: '#ffffff',
+        main: '#ffffff',
+        elevated: '#ffffff',
+        hover: '#fafafa',
+        subtle: '#f9fafb',
+    },
+    text: {
+        primary: '#000000',
+        secondary: '#666666',
+        tertiary: '#999999',
+        quaternary: '#b3b3b3',
+        disabled: '#d4d4d4',
+        inverse: '#ffffff',
+    },
+    border: {
+        main: '#e5e5e5',
+        light: '#f0f0f0',
+        strong: '#d4d4d4',
+        divider: '#e5e5e5',
+    },
+    components: {
+        button: {
+            primary: {
+                bg: '#1a6985',
+                hover: '#145268',
+                text: '#FFFFFF',
+            },
+            default: {
+                bg: '#FFFFFF',
+                border: '#d4d4d4',
+                text: '#000000',
+                hover: '#fafafa',
+            },
+        },
+        input: {
+            bg: '#ffffff',
+            border: '#d4d4d4',
+            borderHover: '#999999',
+            borderFocus: '#1a6985',
+            placeholder: '#999999',
+        },
+        table: {
+            bg: '#ffffff',
+            headerBg: '#fafafa',
+            headerText: '#000000',
+            border: '#e5e5e5',
+            rowHover: '#fafafa',
+        },
+        sidebar: {
+            bg: '#000000',
+            hover: 'rgba(255, 255, 255, 0.08)',
+            selected: 'rgba(255, 255, 255, 0.12)',
+            text: '#FFFFFF',
+            textSecondary: 'rgba(255, 255, 255, 0.65)',
+        },
+    },
+    utility: {
+        white: '#ffffff',
+        black: '#000000',
+        transparent: 'transparent',
+        link: '#1a6985',
+        linkHover: '#145268',
+        linkActive: '#0f3d4f',
+    },
+};
+/**
+ * Build a complete color palette by merging overrides with defaults
+ * Performs deep merge to allow partial nested overrides
+ *
+ * @param overrides - Partial color palette overrides
+ * @returns Complete color palette with overrides applied
+ */
+export const buildColorPalette = (overrides) => {
+    if (!overrides)
+        return defaultColorPalette;
+    return merge(defaultColorPalette, overrides);
+};

package/dist/theme/constants.js

@@ -0,0 +1,82 @@
+import { merge } from 'lodash';
+/**
+ * Default UI constants
+ * Professional, accessible defaults suitable for most applications
+ */
+export const defaultUIConstants = {
+    typography: {
+        fontFamily: "Avenir, MarkPro, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
+        fontSize: {
+            xs: 12,
+            sm: 13,
+            base: 14,
+            lg: 16,
+            xl: 18,
+        },
+        fontWeight: {
+            normal: 400,
+            medium: 500,
+            semibold: 600,
+            bold: 700,
+        },
+        lineHeight: {
+            tight: 1.25,
+            base: 1.5715,
+            relaxed: 1.75,
+        },
+    },
+    spacing: {
+        xs: 4,
+        sm: 8,
+        md: 12,
+        lg: 16,
+        xl: 24,
+        '2xl': 32,
+        '3xl': 48,
+    },
+    radius: {
+        none: 0,
+        sm: 8,
+        base: 12,
+        md: 14,
+        lg: 16,
+        xl: 20,
+        full: 9999,
+        button: 24,
+        input: 10,
+        card: 16,
+    },
+    shadow: {
+        sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        base: '0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 1px 2px -1px rgba(0, 0, 0, 0.08)',
+        md: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08)',
+        lg: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08)',
+        xl: '0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.08)',
+        card: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
+        elevated: '0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.08)',
+        dropdown: '0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.08)',
+    },
+    zIndex: {
+        dropdown: 1000,
+        modal: 1050,
+        popover: 1060,
+        tooltip: 1070,
+        notification: 1080,
+    },
+    transition: {
+        fast: '150ms cubic-bezier(0.4, 0, 0.2, 1)',
+        base: '200ms cubic-bezier(0.4, 0, 0.2, 1)',
+        slow: '300ms cubic-bezier(0.4, 0, 0.2, 1)',
+    },
+};
+/**
+ * Build complete UI constants by merging overrides with defaults
+ *
+ * @param overrides - Partial UI constants overrides
+ * @returns Complete UI constants with overrides applied
+ */
+export const buildUIConstants = (overrides) => {
+    if (!overrides)
+        return defaultUIConstants;
+    return merge(defaultUIConstants, overrides);
+};