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

package/dist/alerts/index.d.ts

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

package/dist/dialogs/index.d.ts

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

package/dist/features/alerts/alert.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Space, Flex, Typography } from 'antd';
+import { InfoCircleOutlined, CheckCircleOutlined, ExclamationCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { useTemboTheme } from '../../theme/index.js';
+const { Text } = Typography;
+export const TemboAlert = ({ type = 'info', message: title, description, icon, showIcon = true, style, }) => {
+    const { colors, constants } = useTemboTheme();
+    const getAlertColors = (alertType) => {
+        switch (alertType) {
+            case 'success':
+                return {
+                    background: colors.success.bg,
+                    border: colors.success.main,
+                    iconColor: colors.success.main,
+                    textColor: colors.success.text,
+                };
+            case 'warning':
+                return {
+                    background: colors.warning.bg,
+                    border: colors.warning.main,
+                    iconColor: colors.warning.main,
+                    textColor: colors.warning.text,
+                };
+            case 'error':
+                return {
+                    background: colors.error.bg,
+                    border: colors.error.main,
+                    iconColor: colors.error.main,
+                    textColor: colors.error.text,
+                };
+            case 'info':
+            default:
+                return {
+                    background: colors.info.bg,
+                    border: colors.info.main,
+                    iconColor: colors.info.main,
+                    textColor: colors.info.text,
+                };
+        }
+    };
+    const getDefaultIcon = (alertType) => {
+        switch (alertType) {
+            case 'success':
+                return _jsx(CheckCircleOutlined, {});
+            case 'warning':
+                return _jsx(ExclamationCircleOutlined, {});
+            case 'error':
+                return _jsx(CloseCircleOutlined, {});
+            case 'info':
+            default:
+                return _jsx(InfoCircleOutlined, {});
+        }
+    };
+    const alertColors = getAlertColors(type);
+    const alertIcon = icon || getDefaultIcon(type);
+    // Calculate icon width for alignment (icon + gap)
+    const iconWidth = showIcon ? 14 + 8 : 0; // icon size + gap
+    const renderTitle = () => {
+        if (typeof title === 'string') {
+            return (_jsx(Text, { strong: true, style: {
+                    fontSize: 13,
+                    color: alertColors.textColor,
+                    lineHeight: 1.4,
+                }, children: title }));
+        }
+        return title;
+    };
+    const renderDescription = () => {
+        if (typeof description === 'string') {
+            return (_jsx(Text, { style: {
+                    fontSize: 12,
+                    color: colors.text.secondary,
+                    lineHeight: 1.5,
+                    paddingLeft: title && showIcon ? iconWidth : 0,
+                }, children: description }));
+        }
+        // For React nodes, wrap in a div with appropriate styling
+        return (_jsx("div", { style: {
+                fontSize: 12,
+                color: colors.text.secondary,
+                lineHeight: 1.5,
+                paddingLeft: title && showIcon ? iconWidth : 0,
+            }, children: description }));
+    };
+    return (_jsx("div", { style: Object.assign({ width: '100%', padding: '12px 16px', backgroundColor: alertColors.background, borderRadius: constants.radius.sm, borderLeft: `3px solid ${alertColors.border}` }, style), children: _jsxs(Space, { direction: "vertical", size: title ? 6 : 0, style: { width: '100%' }, children: [title && (_jsxs(Flex, { gap: 8, align: "center", children: [showIcon && (_jsx("div", { style: {
+                                color: alertColors.iconColor,
+                                fontSize: 14,
+                                lineHeight: 1,
+                            }, children: alertIcon })), renderTitle()] })), description && (_jsxs(Flex, { gap: 8, align: "flex-start", children: [!title && showIcon && (_jsx("div", { style: {
+                                color: alertColors.iconColor,
+                                fontSize: 14,
+                                lineHeight: 1,
+                                marginTop: 1,
+                            }, children: alertIcon })), renderDescription()] }))] }) }));
+};

package/dist/features/alerts/index.js

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

package/dist/features/dialogs/index.js

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

package/dist/features/dialogs/modal-provider.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import NiceModal from '@ebay/nice-modal-react';
+const TemboModalProvider = (props) => {
+    return _jsx(NiceModal.Provider, { children: props.children });
+};
+export default TemboModalProvider;

package/dist/features/dialogs/tembo-confirm.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Modal } from 'antd';
+import NiceModal, { useModal } from '@ebay/nice-modal-react';
+import { ExclamationCircleOutlined, QuestionCircleOutlined, InfoCircleOutlined, WarningOutlined, CheckCircleOutlined, } from '@ant-design/icons';
+import { useTemboTheme } from '../../theme/index.js';
+/**
+ * Base confirmation dialog using NiceModal
+ */
+export const ConfirmDialog = NiceModal.create((props) => {
+    var _a, _b, _c;
+    const modal = useModal();
+    const handleOk = async () => {
+        if (props.onOk) {
+            await props.onOk();
+        }
+        modal.resolve(true);
+        modal.remove();
+    };
+    const handleCancel = () => {
+        if (props.onCancel) {
+            props.onCancel();
+        }
+        modal.resolve(false);
+        modal.remove();
+    };
+    return (_jsx(Modal, { open: modal.visible, title: props.title, onOk: handleOk, onCancel: handleCancel, okText: (_a = props.okText) !== null && _a !== void 0 ? _a : 'OK', cancelText: (_b = props.cancelText) !== null && _b !== void 0 ? _b : 'Cancel', okButtonProps: {
+            danger: props.okDanger,
+            type: (_c = props.okType) !== null && _c !== void 0 ? _c : 'primary',
+        }, centered: true, destroyOnClose: true, children: _jsxs("div", { style: { display: 'flex', gap: 12, alignItems: 'flex-start' }, children: [props.icon && (_jsx("div", { style: { fontSize: 22, marginTop: 2 }, children: props.icon })), _jsx("div", { style: { flex: 1 }, children: props.content })] }) }));
+});
+/**
+ * TemboConfirm - Unified confirmation dialog system
+ *
+ * Provides consistent, theme-aligned confirmation dialogs using NiceModal.
+ * Uses theme colors at invocation time to ensure proper theming.
+ *
+ * @example
+ * ```typescript
+ * // Danger confirmation
+ * const confirmed = await TemboConfirm.danger({
+ *   title: 'Delete Payment',
+ *   content: 'This action cannot be undone.',
+ *   okText: 'Yes, Delete',
+ * });
+ *
+ * if (confirmed) {
+ *   // proceed with deletion
+ * }
+ *
+ * // Warning confirmation
+ * await TemboConfirm.warning({
+ *   title: 'Unsaved Changes',
+ *   content: 'You have unsaved changes. Continue?',
+ * });
+ * ```
+ */
+export class TemboConfirm {
+    /**
+     * Show a danger/destructive confirmation dialog (red OK button)
+     */
+    static async danger(props) {
+        // We need to get colors from context, but static methods can't use hooks
+        // Solution: Accept colors as optional param or use a wrapper component
+        return NiceModal.show(ConfirmDialog, Object.assign(Object.assign({}, props), { icon: _jsx(DangerIcon, {}), okDanger: true, okType: 'primary' }));
+    }
+    /**
+     * Show a warning confirmation dialog (orange icon)
+     */
+    static async warning(props) {
+        return NiceModal.show(ConfirmDialog, Object.assign(Object.assign({}, props), { icon: _jsx(WarningIcon, {}) }));
+    }
+    /**
+     * Show an info confirmation dialog (blue icon)
+     */
+    static async info(props) {
+        return NiceModal.show(ConfirmDialog, Object.assign(Object.assign({}, props), { icon: _jsx(InfoIcon, {}) }));
+    }
+    /**
+     * Show a success confirmation dialog (green icon)
+     */
+    static async success(props) {
+        return NiceModal.show(ConfirmDialog, Object.assign(Object.assign({}, props), { icon: _jsx(SuccessIcon, {}) }));
+    }
+    /**
+     * Show a generic question dialog
+     */
+    static async confirm(props) {
+        return NiceModal.show(ConfirmDialog, Object.assign(Object.assign({}, props), { icon: _jsx(QuestionIcon, {}) }));
+    }
+}
+// Icon wrapper components that use the theme hook
+const DangerIcon = () => {
+    const { colors } = useTemboTheme();
+    return _jsx(ExclamationCircleOutlined, { style: { color: colors.error.main } });
+};
+const WarningIcon = () => {
+    const { colors } = useTemboTheme();
+    return _jsx(WarningOutlined, { style: { color: colors.warning.main } });
+};
+const InfoIcon = () => {
+    const { colors } = useTemboTheme();
+    return _jsx(InfoCircleOutlined, { style: { color: colors.info.main } });
+};
+const SuccessIcon = () => {
+    const { colors } = useTemboTheme();
+    return _jsx(CheckCircleOutlined, { style: { color: colors.success.main } });
+};
+const QuestionIcon = () => {
+    const { colors } = useTemboTheme();
+    return _jsx(QuestionCircleOutlined, { style: { color: colors.primary.main } });
+};

package/dist/features/input-validation/account-name-validator.js

@@ -0,0 +1,28 @@
+import { BankValidation } from "@temboplus/frontend-core";
+/**
+ * Validator for account name field using existing BankValidation.
+ * Ensures the account name meets the criteria defined in your validation utils.
+ *
+ * @param rule - The rule object for validation
+ * @param value - The value to validate
+ * @returns Promise resolving to trimmed account name or rejecting with error
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: ACCOUNT_NAME_VALIDATOR }]
+ */
+export const ACCOUNT_NAME_VALIDATOR = (rule, value) => {
+    const accountNameString = value === null || value === void 0 ? void 0 : value.toString().trim();
+    // If field is empty/undefined/null
+    if (!accountNameString) {
+        if (rule.required) {
+            return Promise.reject(new Error("Account name is required."));
+        }
+        return Promise.resolve(undefined);
+    }
+    const isValid = BankValidation.validateAccountName(accountNameString);
+    if (isValid) {
+        return Promise.resolve(accountNameString);
+    }
+    return Promise.reject(new Error("Invalid account name. Please enter a valid full name with at least two words (e.g., 'John Smith', 'Anna-Marie Johnson')."));
+};

package/dist/features/input-validation/account-number-validator.js

@@ -0,0 +1,65 @@
+import { BankValidation, Country } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for bank account numbers specific to a country.
+ * Uses BankValidation.validateAccountNumber() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: ACCOUNT_NUMBER_VALIDATOR('KE') }]
+ */
+export const ACCOUNT_NUMBER_VALIDATOR = (countryCode) => {
+    return (rule, value) => {
+        var _a;
+        const accountNumberString = value === null || value === void 0 ? void 0 : value.toString().trim();
+        // If field is empty/undefined/null
+        if (!accountNumberString) {
+            if (rule.required) {
+                return Promise.reject(new Error("Account number is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        // Remove spaces for validation but keep original format for display
+        const normalizedAccountNumber = removeSpaces(accountNumberString);
+        if (countryCode) {
+            const isValid = BankValidation.validateAccountNumber(normalizedAccountNumber, countryCode);
+            if (isValid) {
+                return Promise.resolve(normalizedAccountNumber);
+            }
+            const countryName = (_a = Country.from(countryCode)) === null || _a === void 0 ? void 0 : _a.name;
+            const formatHint = getAccountNumberFormatHint(countryCode);
+            return Promise.reject(new Error(`Invalid ${countryName} account number format. ${formatHint}`));
+        }
+        const isValid = BankValidation.validateAccountNumberForAnyCountry(normalizedAccountNumber);
+        if (isValid) {
+            return Promise.resolve(normalizedAccountNumber);
+        }
+        return Promise.reject(new Error(`Invalid account number format`));
+    };
+};
+// ==================== UTILITY FUNCTIONS ====================
+/**
+ * Removes all whitespace characters from the given string.
+ *
+ * @param input - The input string from which spaces should be removed
+ * @returns A new string with all whitespace characters removed
+ */
+function removeSpaces(input) {
+    return input.replace(/\s+/g, "");
+}
+/**
+ * Gets account number format hint based on country.
+ *
+ * @param countryCode - The ISO2 country code
+ * @returns Format hint string for the specific country
+ */
+function getAccountNumberFormatHint(countryCode) {
+    const formatHints = {
+        TZ: "Account number should be 9-19 characters long.",
+        KE: "Account number should be 10, 12, or 15 alphanumeric characters.",
+        // Add more country-specific hints as needed
+    };
+    return formatHints[countryCode] || "Please enter a valid account number.";
+}

package/dist/features/input-validation/amount-validator.js

@@ -0,0 +1,100 @@
+import { Amount } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for monetary amounts using the Amount class.
+ * Validates format, currency, and range constraints with currency-specific defaults.
+ * Only allows positive amounts (including zero).
+ *
+ * **Default Range Constraints by Currency:**
+ * - **TZS (Tanzanian Shilling)**: Min: 1,000 TZS, Max: 1,000,000 TZS
+ * - **KES (Kenyan Shilling)**: Min: 40 KES, Max: 40,000,000 KES
+ * - **Other Currencies**: Min: 1, Max: 1,000,000 (in respective currency units)
+ *
+ * These defaults are applied only when `min` and/or `max` options are not explicitly provided.
+ * You can override these defaults by providing explicit `min` and `max` values in the options.
+ * Set `min` or `max` to `null` to completely disable that constraint.
+ *
+ * @param options - Configuration options for amount validation
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // Basic validation with TZS currency (uses default min: 1,000 TZS, max: 1,000,000 TZS)
+ * rules: [{ required: true, validator: AMOUNT_VALIDATOR() }]
+ *
+ * @example
+ * // Basic validation with KES currency (uses default min: 40 KES, max: 40,000,000 KES)
+ * rules: [{ required: true, validator: AMOUNT_VALIDATOR({ currencyCode: 'KES' }) }]
+ *
+ * @example
+ * // Override default ranges with custom min/max values
+ * rules: [{
+ *   required: true,
+ *   validator: AMOUNT_VALIDATOR({
+ *     currencyCode: 'USD',
+ *     min: 1,           // Custom minimum (overrides default)
+ *     max: 10000,       // Custom maximum (overrides default)
+ *   })
+ * }]
+ *
+ * @example
+ * // Disable range validation by setting min and max to null
+ * rules: [{
+ *   required: true,
+ *   validator: AMOUNT_VALIDATOR({
+ *     currencyCode: 'USD',
+ *     min: null,        // No minimum constraint
+ *     max: null,        // No maximum constraint
+ *   })
+ * }]
+ *
+ * @example
+ * // Disable only minimum constraint, keep maximum
+ * rules: [{
+ *   required: true,
+ *   validator: AMOUNT_VALIDATOR({
+ *     currencyCode: 'TZS',
+ *     min: null,        // No minimum constraint
+ *     // max uses default (1,000,000 TZS)
+ *   })
+ * }]
+ */
+export const AMOUNT_VALIDATOR = (options = {}) => {
+    const { currencyCode = "TZS", invalidFormatMessage, minMessage, maxMessage, } = options;
+    const { min: defaultMin, max: defaultMax } = Amount.getTransactionLimits(currencyCode);
+    // Use provided values, or fall back to currency-specific defaults
+    // If explicitly set to null, no constraint will be applied
+    const min = options.min !== undefined ? options.min : defaultMin;
+    const max = options.max !== undefined ? options.max : defaultMax;
+    return (rule, value) => {
+        // Convert value to string for processing
+        const amountString = value === null || value === void 0 ? void 0 : value.toString().trim();
+        // If field is empty/undefined/null
+        if (!amountString) {
+            if (rule.required) {
+                return Promise.reject(new Error("Amount is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        // Try to create Amount instance
+        const amountInstance = Amount.from(amountString, currencyCode);
+        if (!amountInstance) {
+            return Promise.reject(new Error(invalidFormatMessage ||
+                `Invalid amount format. Please enter a valid monetary amount (e.g., "1000", "1,234.56").`));
+        }
+        // Reject negative amounts (always not allowed)
+        if (amountInstance.isNegative()) {
+            return Promise.reject(new Error("Negative amounts are not allowed. Please enter a positive amount."));
+        }
+        // Check minimum constraint (only if min is not null)
+        if (min !== null && amountInstance.lessThan(min)) {
+            return Promise.reject(new Error(minMessage ||
+                `Amount must be at least ${(defaultMin === null || defaultMin === void 0 ? void 0 : defaultMin.label) || min}. Please enter a higher amount.`));
+        }
+        // Check maximum constraint (only if max is not null)
+        if (max !== null && amountInstance.greaterThan(max)) {
+            return Promise.reject(new Error(maxMessage ||
+                `Amount must not exceed ${(defaultMax === null || defaultMax === void 0 ? void 0 : defaultMax.label) || max}. Please enter a lower amount.`));
+        }
+        // Return the formatted numeric value (normalized)
+        return Promise.resolve(amountInstance.formattedNumericValue);
+    };
+};

package/dist/features/input-validation/index.js

@@ -0,0 +1,5 @@
+export * from "./account-name-validator.js";
+export * from "./account-number-validator.js";
+export * from "./amount-validator.js";
+export * from "./phone-number-validator.js";
+export * from "./swift-code-validator.js";

package/dist/features/input-validation/phone-number-validator.js

@@ -0,0 +1,79 @@
+import { Country, PhoneNumberFactory } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for general phone numbers that validates format and country.
+ * Uses PhoneNumberFactory.canCreate() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: PHONE_NUMBER_VALIDATOR('TZ') }]
+ */
+export const PHONE_NUMBER_VALIDATOR = (countryCode) => {
+    return (rule, value) => {
+        var _a;
+        const phoneString = value === null || value === void 0 ? void 0 : value.toString().trim();
+        // If field is empty/undefined/null
+        if (!phoneString) {
+            if (rule.required) {
+                return Promise.reject(new Error("Phone number is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        const isValid = PhoneNumberFactory.canCreate(phoneString, {
+            defaultCountry: countryCode,
+        });
+        if (isValid) {
+            // Return normalized phone number
+            const phoneInstance = PhoneNumberFactory.create(phoneString, {
+                defaultCountry: countryCode,
+            });
+            return Promise.resolve((phoneInstance === null || phoneInstance === void 0 ? void 0 : phoneInstance.e164Format) || phoneString);
+        }
+        if (countryCode) {
+            const countryName = (_a = Country.from(countryCode)) === null || _a === void 0 ? void 0 : _a.name;
+            return Promise.reject(new Error(`Invalid ${countryName} phone number format. Please enter a valid ${countryName} phone number.`));
+        }
+        return Promise.reject(new Error("This phone number is invalid."));
+    };
+};
+/**
+ * Creates a validator for mobile phone numbers eligible for payout operations.
+ * Uses PhoneNumberFactory.checkPayoutEligibility() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: MOBILE_PHONE_VALIDATOR('TZ') }]
+ */
+export const MOBILE_PHONE_VALIDATOR = (countryCode) => {
+    return (rule, value) => {
+        var _a;
+        const phoneString = value === null || value === void 0 ? void 0 : value.toString().trim();
+        // If field is empty/undefined/null
+        if (!phoneString) {
+            if (rule.required) {
+                return Promise.reject(new Error("Mobile phone number is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        const phoneInstance = PhoneNumberFactory.create(phoneString, {
+            defaultCountry: countryCode,
+        });
+        if (!phoneInstance) {
+            return Promise.reject(new Error("This phone number is invalid."));
+        }
+        const isEligibleForPayout = PhoneNumberFactory.checkPayoutEligibility(phoneInstance);
+        if (isEligibleForPayout) {
+            return Promise.resolve((phoneInstance === null || phoneInstance === void 0 ? void 0 : phoneInstance.e164Format) || phoneString);
+        }
+        if (countryCode) {
+            const countryName = (_a = Country.from(countryCode)) === null || _a === void 0 ? void 0 : _a.name;
+            return Promise.reject(new Error(`Invalid ${countryName} phone number format. Please enter a valid ${countryName} phone number.`));
+        }
+        return Promise.reject(new Error("This phone number is invalid."));
+    };
+};

package/dist/features/input-validation/swift-code-validator.js

@@ -0,0 +1,38 @@
+import { BankValidation, Country } from "@temboplus/frontend-core";
+/**
+ * Creates a validator for SWIFT/BIC codes specific to a country.
+ * Uses BankValidation.validateSwiftCode() for validation.
+ *
+ * @param countryCode - The ISO2 country code for validation context
+ * @returns Validator function for AntD form rules
+ *
+ * @example
+ * // In form rules
+ * rules: [{ required: true, validator: SWIFT_CODE_VALIDATOR('TZ') }]
+ */
+export const SWIFT_CODE_VALIDATOR = (countryCode) => {
+    return (rule, value) => {
+        var _a;
+        const swiftCodeString = value === null || value === void 0 ? void 0 : value.toString().trim().toUpperCase();
+        // If field is empty/undefined/null
+        if (!swiftCodeString) {
+            if (rule.required) {
+                return Promise.reject(new Error("SWIFT code is required."));
+            }
+            return Promise.resolve(undefined);
+        }
+        if (countryCode) {
+            const isValid = BankValidation.validateSwiftCode(swiftCodeString, countryCode);
+            if (isValid) {
+                return Promise.resolve(swiftCodeString);
+            }
+            const countryName = (_a = Country.from(countryCode)) === null || _a === void 0 ? void 0 : _a.name;
+            return Promise.reject(new Error(`Invalid ${countryName} SWIFT code. Please enter a valid ${countryName} bank SWIFT/BIC code.`));
+        }
+        const isValid = BankValidation.validateSwiftCodeForAnyCountry(swiftCodeString);
+        if (isValid) {
+            return Promise.resolve(swiftCodeString);
+        }
+        return Promise.reject(new Error(`Invalid SWIFT code. Please enter a valid supported bank SWIFT/BIC code.`));
+    };
+};

package/dist/features/notifications/index.js

@@ -0,0 +1,3 @@
+export * from "./tembo-notify.js";
+export * from "./toast-config.js";
+export * from "./toast-container.js";