@teamvortexsoftware/vortex-react-native 0.0.12 → 1.0.0

package/dist/utils/formUtils.js

@@ -1,174 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractFormConfiguration = extractFormConfiguration;
-exports.convertFormStyleToRNStyle = convertFormStyleToRNStyle;
-exports.findComponentByRole = findComponentByRole;
-exports.mergeThemeAndComponentStyles = mergeThemeAndComponentStyles;
-exports.getEmailPlaceholder = getEmailPlaceholder;
-exports.getSubmitButtonLabel = getSubmitButtonLabel;
-exports.hasGridLayout = hasGridLayout;
-exports.hasEmailAndShareInSeparateColumns = hasEmailAndShareInSeparateColumns;
-/**
- * Extracts the form configuration from the widget configuration
- */
-function extractFormConfiguration(widgetConfiguration) {
-    var _a, _b, _c;
-    if (!((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b["vortex.components.form"]) === null || _c === void 0 ? void 0 : _c.value)) {
-        return null;
-    }
-    return widgetConfiguration.configuration.props["vortex.components.form"].value;
-}
-/**
- * Converts form component style object to React Native styles
- */
-function convertFormStyleToRNStyle(style) {
-    if (!style)
-        return {};
-    const rnStyle = {};
-    Object.keys(style).forEach((key) => {
-        const styleObj = style[key];
-        // Handle special cases like background-color to backgroundColor
-        const normalizedKey = key.replace(/-([a-z])/g, (g) => g[1].toUpperCase());
-        // Use computedValue if available, otherwise use value
-        if (styleObj.computedValue) {
-            rnStyle[normalizedKey] = styleObj.computedValue;
-        }
-        else if (styleObj.value !== undefined) {
-            // Handle numeric values
-            if (typeof styleObj.value === 'string' && !isNaN(Number(styleObj.value))) {
-                rnStyle[normalizedKey] = Number(styleObj.value);
-            }
-            else {
-                rnStyle[normalizedKey] = styleObj.value;
-            }
-        }
-    });
-    return rnStyle;
-}
-/**
- * Find a specific component by role in the form configuration
- */
-function findComponentByRole(formConfig, role) {
-    if (!formConfig)
-        return null;
-    const findComponent = (components) => {
-        var _a;
-        for (const component of components) {
-            if (((_a = component.vortex) === null || _a === void 0 ? void 0 : _a.role) === role) {
-                return component;
-            }
-            if (component.children) {
-                const found = findComponent(component.children);
-                if (found)
-                    return found;
-            }
-        }
-        return null;
-    };
-    return findComponent(formConfig);
-}
-/**
- * Merges theme styles with component-specific styles from form configuration
- */
-function mergeThemeAndComponentStyles(themeStyles, themeColors, formConfig) {
-    // Start with the base theme styles
-    const mergedStyles = Object.assign({}, themeStyles);
-    // Find submit button and email input components
-    const submitButton = findComponentByRole(formConfig, 'submit');
-    const emailInput = findComponentByRole(formConfig, 'email');
-    // Merge submit button styles
-    if (submitButton === null || submitButton === void 0 ? void 0 : submitButton.style) {
-        const submitButtonStyle = convertFormStyleToRNStyle(submitButton.style);
-        mergedStyles.primaryButton = Object.assign(Object.assign(Object.assign({}, mergedStyles.primaryButton), (submitButtonStyle['backgroundColor'] && { backgroundColor: submitButtonStyle['backgroundColor'] })), (submitButtonStyle['borderColor'] && { borderColor: submitButtonStyle['borderColor'] }));
-        // Update button text if there's a color specified
-        if (submitButtonStyle['color']) {
-            mergedStyles.primaryButtonText = Object.assign(Object.assign({}, mergedStyles.primaryButtonText), { color: submitButtonStyle['color'] });
-        }
-    }
-    // Merge email input styles
-    if (emailInput === null || emailInput === void 0 ? void 0 : emailInput.style) {
-        const emailInputStyle = convertFormStyleToRNStyle(emailInput.style);
-        mergedStyles.inputStyles = Object.assign(Object.assign({}, mergedStyles.inputStyles), emailInputStyle);
-    }
-    return mergedStyles;
-}
-/**
- * Get email input placeholder from form configuration
- */
-function getEmailPlaceholder(formConfig) {
-    const emailInput = findComponentByRole(formConfig, 'email');
-    return (emailInput === null || emailInput === void 0 ? void 0 : emailInput.placeholder) || 'Enter email';
-}
-/**
- * Get submit button label from form configuration
- */
-function getSubmitButtonLabel(formConfig) {
-    const submitButton = findComponentByRole(formConfig, 'submit');
-    return (submitButton === null || submitButton === void 0 ? void 0 : submitButton.label) || 'Invite';
-}
-/**
- * Determines if the form layout uses a grid structure
- */
-function hasGridLayout(formConfig) {
-    if (!formConfig)
-        return false;
-    const findGrid = (components) => {
-        for (const component of components) {
-            if (component.type === 'grid') {
-                return true;
-            }
-            if (component.children) {
-                const found = findGrid(component.children);
-                if (found)
-                    return true;
-            }
-        }
-        return false;
-    };
-    return findGrid(formConfig);
-}
-/**
- * Determines if email and share components are in separate grid items
- */
-function hasEmailAndShareInSeparateColumns(formConfig) {
-    if (!formConfig)
-        return false;
-    // Look for a grid with multiple grid-items
-    const findSeparateColumns = (components) => {
-        for (const component of components) {
-            if (component.type === 'grid' && component.children) {
-                // Check if there are at least 2 grid-items
-                const gridItems = component.children.filter(child => child.type === 'grid-item');
-                if (gridItems.length >= 2) {
-                    // Check if one has email and one has share
-                    let hasEmailItem = false;
-                    let hasShareItem = false;
-                    for (const item of gridItems) {
-                        if (!item.children)
-                            continue;
-                        // Check for email component
-                        if (!hasEmailItem) {
-                            hasEmailItem = item.children.some(child => {
-                                var _a;
-                                return child.type === 'form' &&
-                                    ((_a = child.children) === null || _a === void 0 ? void 0 : _a.some(formChild => { var _a; return ((_a = formChild.vortex) === null || _a === void 0 ? void 0 : _a.role) === 'email'; }));
-                            });
-                        }
-                        // Check for share component
-                        if (!hasShareItem) {
-                            hasShareItem = item.children.some(child => child.type === 'vortex.components.share');
-                        }
-                    }
-                    return hasEmailItem && hasShareItem;
-                }
-            }
-            if (component.children) {
-                const found = findSeparateColumns(component.children);
-                if (found)
-                    return true;
-            }
-        }
-        return false;
-    };
-    return findSeparateColumns(formConfig);
-}

package/dist/utils/themeUtils.js

@@ -1,55 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractThemeColors = extractThemeColors;
-exports.extractFeatureFlags = extractFeatureFlags;
-/**
- * Extracts theme colors from widget configuration
- */
-function extractThemeColors(widgetConfiguration) {
-    var _a, _b;
-    const options = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props;
-    const colors = ((_b = options === null || options === void 0 ? void 0 : options['vortex.theme.colors']) === null || _b === void 0 ? void 0 : _b.value) || [];
-    const colorMap = {};
-    colors.forEach((color) => {
-        if (color.key && color.value) {
-            colorMap[color.key] = color.value;
-        }
-    });
-    return {
-        containerBackground: colorMap['--container-background'] || '#ffffff',
-        containerForeground: colorMap['--container-foreground-color'] || '#666666',
-        containerBorder: colorMap['--container-border-color'] || '#c4c4c4',
-        primaryButtonBackground: colorMap['--primary-button-background'] || '#197af3',
-        primaryButtonForeground: colorMap['--primary-button-foreground-color'] || '#ffffff',
-        primaryButtonBorder: colorMap['--primary-button-border-color'] || '#000000',
-        secondaryButtonBackground: colorMap['--secondary-button-background'] || '#dfdfdf',
-        secondaryButtonForeground: colorMap['--secondary-button-foreground-color'] || '#000000',
-        secondaryButtonBorder: colorMap['--secondary-button-border-color'] || '#c4c4c4',
-    };
-}
-/**
- * Extracts feature flags from widget configuration
- */
-function extractFeatureFlags(widgetConfiguration) {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
-    const features = Array.isArray((_c = (_b = (_a = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _a === void 0 ? void 0 : _a.props) === null || _b === void 0 ? void 0 : _b['vortex.components']) === null || _c === void 0 ? void 0 : _c.value)
-        ? (_f = (_e = (_d = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _d === void 0 ? void 0 : _d.props) === null || _e === void 0 ? void 0 : _e['vortex.components']) === null || _f === void 0 ? void 0 : _f.value
-        : [];
-    const shareOptions = Array.isArray((_j = (_h = (_g = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h['vortex.components.share.options']) === null || _j === void 0 ? void 0 : _j.value)
-        ? (_m = (_l = (_k = widgetConfiguration === null || widgetConfiguration === void 0 ? void 0 : widgetConfiguration.configuration) === null || _k === void 0 ? void 0 : _k.props) === null || _l === void 0 ? void 0 : _l['vortex.components.share.options']) === null || _m === void 0 ? void 0 : _m.value
-        : [];
-    return {
-        shareableLinks: features.includes("vortex.components.emailinvitations"),
-        emailInvitations: features.includes("vortex.components.share"),
-        shareEnabled: features.includes("vortex.components.share"),
-        shareOptionsCopyLink: shareOptions.includes("copyLink"),
-        shareOptionsFacebookMessenger: shareOptions.includes("facebookMessenger"),
-        shareOptionsInstagramDms: shareOptions.includes("instagramDms"),
-        shareOptionsLinkedInMessaging: shareOptions.includes("linkedInMessaging"),
-        shareOptionsNativeShareSheet: shareOptions.includes("nativeShareSheet"),
-        shareOptionsQrCode: shareOptions.includes("qrCode"), // Only true if specifically included
-        shareOptionsSms: shareOptions.includes("sms"),
-        shareOptionsTwitterDms: shareOptions.includes("twitterDms"),
-        shareOptionsWhatsApp: shareOptions.includes("whatsApp"),
-    };
-}

package/dist/vortexInvite.js

@@ -1,172 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.VortexInvite = VortexInvite;
-const react_1 = __importDefault(require("react"));
-const react_native_1 = require("react-native");
-const useVortexInvite_1 = require("./hooks/useVortexInvite");
-const ShareButtons_1 = require("./components/ShareButtons");
-function VortexInvite({ widgetId, environmentId, vortexApiHost, isLoading = false, jwt, onSuccess, onError, contentTokens, }) {
-    const { error, fetching, loading, email, setEmail, opacity, themeColors, themeStyles, has, inviteLoading, showSuccessMessage, handleInviteClick, handleShareLink, handleCopyLink, getShareableLink, formLayout, } = (0, useVortexInvite_1.useVortexInvite)({
-        widgetId,
-        environmentId,
-        vortexApiHost,
-        isLoading,
-        jwt,
-        onSuccess,
-        onError,
-    });
-    if (error === null || error === void 0 ? void 0 : error.message) {
-        return <react_native_1.Text data-testid="error">{error.message}</react_native_1.Text>;
-    }
-    if (fetching || loading) {
-        return <react_native_1.Animated.View style={[styles.skeleton, { opacity }]}/>;
-    }
-    // Theme styles are now provided by the hook
-    // If we have a grid layout with separate columns for email and share, we'll use that layout
-    if ((formLayout === null || formLayout === void 0 ? void 0 : formLayout.isGridLayout) && (formLayout === null || formLayout === void 0 ? void 0 : formLayout.hasSeparateColumns)) {
-        return (<react_native_1.View style={[styles.container, themeStyles.containerStyles]}>
-        <react_native_1.View style={styles.gridContainer}>
-          {/* Email invitation column */}
-          {(has === null || has === void 0 ? void 0 : has.emailInvitations) && (<react_native_1.View style={styles.gridItem}>
-              <react_native_1.Text style={[styles.introText, themeStyles.textStyles]}>Invite People</react_native_1.Text>
-              <react_native_1.TextInput style={[styles.input, themeStyles.inputStyles]} placeholder={formLayout.emailPlaceholder} placeholderTextColor={themeColors.containerForeground} value={email} onChangeText={setEmail} autoCapitalize="none"/>
-              <react_native_1.View style={styles.buttonContainer}>
-                <react_native_1.Pressable style={[styles.submitButton, themeStyles.primaryButton, inviteLoading && styles.disabledButton]} onPress={() => handleInviteClick(contentTokens)} disabled={inviteLoading}>
-                  {inviteLoading ? (<react_native_1.ActivityIndicator size="small" color={themeColors.containerBackground}/>) : (<react_native_1.Text style={[styles.submitButtonText, themeStyles.primaryButtonText]}>
-                      {formLayout.submitButtonLabel}
-                    </react_native_1.Text>)}
-                </react_native_1.Pressable>
-                {showSuccessMessage && (<react_native_1.View style={styles.successMessageContainer}>
-                    <react_native_1.Text style={styles.successMessage}>Success!</react_native_1.Text>
-                  </react_native_1.View>)}
-              </react_native_1.View>
-            </react_native_1.View>)}
-
-          {/* Share buttons column */}
-          {(has === null || has === void 0 ? void 0 : has.shareableLinks) && (<react_native_1.View style={styles.gridItem}>
-              <react_native_1.View style={styles.shareButtonsContainer}>
-                <ShareButtons_1.ShareButtons has={has} themeColors={themeColors} themeStyles={themeStyles} handleShareLink={handleShareLink} handleCopyLink={handleCopyLink} shareableLink={getShareableLink()}/>
-              </react_native_1.View>
-            </react_native_1.View>)}
-        </react_native_1.View>
-      </react_native_1.View>);
-    }
-    // Default stacked layout
-    return (<react_native_1.View style={[styles.container, themeStyles.containerStyles]}>
-      {(has === null || has === void 0 ? void 0 : has.emailInvitations) && (<react_native_1.View style={styles.inviteContainer}>
-          <react_native_1.Text style={[styles.introText, themeStyles.textStyles]}>Invite People</react_native_1.Text>
-          <react_native_1.TextInput style={[styles.input, themeStyles.inputStyles]} placeholder={(formLayout === null || formLayout === void 0 ? void 0 : formLayout.emailPlaceholder) || 'Enter email'} placeholderTextColor={themeColors.containerForeground} value={email} onChangeText={setEmail} autoCapitalize="none"/>
-          <react_native_1.View style={styles.buttonContainer}>
-            <react_native_1.Pressable style={[styles.submitButton, themeStyles.primaryButton, inviteLoading && styles.disabledButton]} onPress={() => handleInviteClick(contentTokens)} disabled={inviteLoading}>
-              {inviteLoading ? (<react_native_1.ActivityIndicator size="small" color={themeColors.containerBackground}/>) : (<react_native_1.Text style={[styles.submitButtonText, themeStyles.primaryButtonText]}>
-                  {(formLayout === null || formLayout === void 0 ? void 0 : formLayout.submitButtonLabel) || 'Invite'}
-                </react_native_1.Text>)}
-            </react_native_1.Pressable>
-            {showSuccessMessage && (<react_native_1.View style={styles.successMessageContainer}>
-                <react_native_1.Text style={styles.successMessage}>Success!</react_native_1.Text>
-              </react_native_1.View>)}
-          </react_native_1.View>
-        </react_native_1.View>)}
-
-      {(has === null || has === void 0 ? void 0 : has.shareableLinks) && (<react_native_1.View style={styles.shareContainer}>
-          {(has === null || has === void 0 ? void 0 : has.emailInvitations) && <react_native_1.Text style={[styles.divider, themeStyles.textStyles]}>OR</react_native_1.Text>}
-
-          <react_native_1.View style={styles.shareButtonsContainer}>
-            <ShareButtons_1.ShareButtons has={has} themeColors={themeColors} themeStyles={themeStyles} handleShareLink={handleShareLink} handleCopyLink={handleCopyLink} shareableLink={getShareableLink()}/>
-          </react_native_1.View>
-        </react_native_1.View>)}
-    </react_native_1.View>);
-}
-const styles = react_native_1.StyleSheet.create({
-    container: {
-        padding: 15,
-        display: 'flex',
-        flexDirection: 'column',
-        borderRadius: 8,
-        borderWidth: 1,
-    },
-    gridContainer: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'space-between',
-    },
-    gridItem: {
-        flex: 1,
-        padding: 8,
-        minWidth: 250, // Ensure items have minimum width for smaller screens
-    },
-    disabledButton: {
-        opacity: 0.7,
-    },
-    successMessageContainer: {
-        marginTop: 8,
-        padding: 8,
-        alignItems: 'center',
-        width: '100%',
-    },
-    successMessage: {
-        color: 'green',
-        fontWeight: 'bold',
-        fontSize: 16,
-    },
-    inviteContainer: {
-        display: 'flex',
-        flexDirection: 'column',
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginTop: 8,
-    },
-    introText: {
-        marginBottom: 8,
-        fontSize: 24,
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
-    input: {
-        width: '100%',
-        borderWidth: 1,
-        padding: 10,
-        borderRadius: 5,
-        marginBottom: 8,
-    },
-    buttonContainer: {
-        marginTop: 16,
-        marginBottom: 8,
-        width: '100%',
-    },
-    submitButton: {
-        padding: 12,
-        borderRadius: 5,
-        alignItems: 'center',
-        borderWidth: 1,
-    },
-    submitButtonText: {
-        fontWeight: '500',
-        textTransform: 'none',
-    },
-    skeleton: {
-        width: '100%',
-        height: 50,
-        backgroundColor: 'lightgray',
-        borderRadius: 5,
-    },
-    shareContainer: {
-        marginTop: 16,
-        alignItems: 'center',
-    },
-    divider: {
-        marginVertical: 10,
-        fontSize: 16,
-        fontWeight: 'bold',
-        textAlign: 'center',
-    },
-    shareButtonsContainer: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-        justifyContent: 'center',
-    },
-    // Share button styles moved to ShareButtons.tsx
-});