@teamvortexsoftware/vortex-react-native 0.0.7 → 0.0.9

package/dist/utils/themeUtils.js

@@ -0,0 +1,55 @@
+"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

@@ -0,0 +1,172 @@
+"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
+});

package/package.json

@@ -2,23 +2,35 @@
   "name": "@teamvortexsoftware/vortex-react-native",
   "description": "",
   "author": "@teamvortexsoftware",
-  "version": "0.0.7",
-  "publishConfig": {
-    "access": "restricted"
+  "version": "0.0.9",
+  "files": [
+    "dist",
+    "plugin",
+    "plugin.js"
+  ],
+  "main": "./plugin/withVortexReactNative.js",
+  "exports": {
+    ".": "./plugin.js",
+    "./runtime": "./dist/index.js"
   },
-  "main": "src/index.tsx",
-  "types": "src/index.tsx",
-  "react-native": "src/index.tsx",
+  "expo": {
+    "plugins": [
+      "@teamvortexsoftware/vortex-react-native"
+    ]
+  },
+  "types": "dist/types/index.d.ts",
+  "react-native": "dist/index.js",
   "devDependencies": {
     "@eslint/js": "^9.24.0",
+    "@expo/config-plugins": "^10.0.2",
     "@types/react": "18.2.14",
     "@types/react-native-vector-icons": "^6.4.18",
     "eslint": "^9.24.0",
     "eslint-plugin-react-native": "^4.1.0",
     "typescript": "5.8.3",
     "typescript-eslint": "^8.30.1",
-    "@teamvortexsoftware/eslint-config": "0.0.0",
-    "@teamvortexsoftware/typescript-config": "0.0.0"
+    "@teamvortexsoftware/typescript-config": "0.0.0",
+    "@teamvortexsoftware/eslint-config": "0.0.0"
   },
   "dependencies": {
     "expo-standard-web-crypto": "^2.1.4",
@@ -35,7 +47,7 @@
     "react-native-svg": "*"
   },
   "scripts": {
-    "build": "echo \"no build\"",
+    "build": "tsc",
     "prepublish": "pnpm run build",
     "lint": "eslint src/",
     "type-check": "tsc --noEmit"

package/plugin/withVortexReactNative.js

@@ -0,0 +1,74 @@
+const { withInfoPlist, withProjectBuildGradle, IOSConfig, withDangerousMod } = require('@expo/config-plugins');
+const fs = require('fs');
+const path = require('path');
+
+const customFonts = [
+  "FontAwesome6_Brands.ttf",
+  "FontAwesome6_Regular.ttf",
+  "FontAwesome6_Solid.ttf",
+];
+
+// iOS integration
+const withIosFonts = (config) => {
+  return withInfoPlist(config, (modConfig) => {
+    console.log('[withVortexReactNative] Adding custom fonts to iOS Info.plist');
+
+    const existingFonts = Array.isArray(modConfig.modResults.UIAppFonts)
+      ? modConfig.modResults.UIAppFonts
+      : [];
+
+    modConfig.modResults.UIAppFonts = Array.from(new Set([...existingFonts, ...customFonts]));
+
+    return modConfig;
+  });
+};
+
+// Android integration
+const withAndroidFonts = (config) => {
+  // Copy fonts to Android assets directory
+  return withDangerousMod(config, [
+    'android',
+    async (config) => {
+      console.log('[withVortexReactNative] Setting up fonts for Android');
+      
+      const projectRoot = config.modRequest.projectRoot;
+      const fontsDirectory = path.resolve(projectRoot, 'node_modules/react-native-vector-icons/Fonts');
+      const assetsDirectory = path.resolve(projectRoot, 'android/app/src/main/assets/fonts');
+
+      // Ensure the assets directory exists
+      if (!fs.existsSync(assetsDirectory)) {
+        fs.mkdirSync(assetsDirectory, { recursive: true });
+      }
+
+      // Copy each font file to the assets directory
+      for (const font of customFonts) {
+        const sourcePath = path.resolve(fontsDirectory, font);
+        const destPath = path.resolve(assetsDirectory, font);
+        
+        if (fs.existsSync(sourcePath)) {
+          fs.copyFileSync(sourcePath, destPath);
+          console.log(`[withVortexReactNative] Copied ${font} to Android assets`);
+        } else {
+          console.warn(`[withVortexReactNative] Font file not found: ${sourcePath}`);
+        }
+      }
+
+      return config;
+    },
+  ]);
+};
+
+// Main plugin function
+const withVortexReactNative = (config) => {
+  console.log('[withVortexReactNative] plugin running');
+  
+  // Apply iOS configuration
+  config = withIosFonts(config);
+  
+  // Apply Android configuration
+  config = withAndroidFonts(config);
+  
+  return config;
+};
+
+module.exports = withVortexReactNative;

package/plugin.js

@@ -0,0 +1,2 @@
+// plugin.js
+module.exports = require('./plugin/withVortexReactNative');

package/eslint.config.mjs

@@ -1,4 +0,0 @@
-import { config } from "@teamvortexsoftware/eslint-config/react-native";
-
-/** @type {import("eslint").Linter.Config} */
-export default config;

package/src/components/ShareButtons.tsx

@@ -1,172 +0,0 @@
-import React, { useState } from "react";
-import { Pressable, StyleSheet, Text, View } from "react-native";
-import Icon from "react-native-vector-icons/FontAwesome6";
-import { ThemeColors } from "../utils/themeUtils";
-import QRCode from "react-native-qrcode-svg";
-
-/**
- * ShareButton component for rendering a single share option button
- */
-interface ShareButtonProps {
-  iconName: string;
-  label: string;
-  onPress: () => void;
-  themeColors: ThemeColors;
-  themeStyles: any;
-}
-
-export function ShareButton({
-  iconName,
-  label,
-  onPress,
-  themeColors,
-  themeStyles,
-}: ShareButtonProps) {
-  return (
-    <View style={styles.shareButtonWrapper}>
-      <Pressable
-        style={[styles.shareButton, themeStyles.secondaryButton]}
-        onPress={onPress}
-      >
-        <View style={styles.buttonContentContainer}>
-          <Icon
-            name={iconName}
-            size={24}
-            color={themeColors.secondaryButtonForeground}
-          />
-          <Text
-            style={[styles.shareButtonText, themeStyles.secondaryButtonText]}
-          >
-            {label}
-          </Text>
-        </View>
-      </Pressable>
-    </View>
-  );
-}
-
-/**
- * ShareButtons component for rendering all available share options
- */
-export interface ShareButtonsProps {
-  has: any;
-  themeColors: ThemeColors;
-  themeStyles: any;
-  handleShareLink: () => void;
-  handleCopyLink: () => void;
-  shareableLink?: string;
-}
-
-export function ShareButtons({
-  has,
-  themeColors,
-  themeStyles,
-  handleShareLink,
-  handleCopyLink,
-  shareableLink,
-}: ShareButtonsProps) {
-  const [showQRCode, setShowQRCode] = useState(false);
-  // Define button configurations
-  const buttonConfigs = [
-    {
-      key: "shareOptionsNativeShareSheet",
-      iconName: "share",
-      label: "Share",
-      onPress: handleShareLink,
-      isAvailable: has.shareOptionsNativeShareSheet,
-    },
-    {
-      key: "shareOptionsCopyLink",
-      iconName: "copy",
-      label: "Copy Link",
-      onPress: handleCopyLink,
-      isAvailable: has.shareOptionsCopyLink,
-    },
-    {
-      key: "shareOptionsQRCode",
-      iconName: "qrcode",
-      label: "QR Code",
-      onPress: () => setShowQRCode(!showQRCode),
-      isAvailable: true,
-    },
-    {
-      key: "shareOptionsWhatsApp",
-      iconName: "whatsapp",
-      label: "WhatsApp",
-      onPress: () => {},
-      isAvailable: has.shareOptionsWhatsApp,
-    },
-    {
-      key: "shareOptionsSms",
-      iconName: "message",
-      label: "SMS",
-      onPress: () => {},
-      isAvailable: has.shareOptionsSms,
-    },
-    // Add more share options as needed
-    // Example:
-    // {
-    //   key: 'shareOptionsFacebookMessenger',
-    //   iconName: 'facebook-messenger',
-    //   label: 'Messenger',
-    //   onPress: () => {},
-    //   isAvailable: has.shareOptionsFacebookMessenger,
-    // },
-  ];
-
-  return (
-    <>
-      {showQRCode && shareableLink && (
-        <View style={styles.qrCodeContainer}>
-          <QRCode
-            value={shareableLink}
-            size={200}
-            color={themeColors.containerForeground}
-            backgroundColor={themeColors.containerBackground}
-          />
-        </View>
-      )}
-      {buttonConfigs
-        .filter((config) => config.isAvailable)
-        .map((config) => (
-          <ShareButton
-            key={config.key}
-            iconName={config.iconName}
-            label={config.label}
-            onPress={config.onPress}
-            themeColors={themeColors}
-            themeStyles={themeStyles}
-          />
-        ))}
-    </>
-  );
-}
-
-const styles = StyleSheet.create({
-  shareButtonWrapper: {
-    width: "48%",
-    margin: 5,
-  },
-  shareButton: {
-    flexDirection: "row",
-    alignItems: "center",
-    padding: 10,
-    borderWidth: 1,
-    borderRadius: 5,
-    justifyContent: "center",
-  },
-  buttonContentContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-  },
-  shareButtonText: {
-    marginLeft: 10,
-  },
-  qrCodeContainer: {
-    width: "100%",
-    alignItems: "center",
-    justifyContent: "center",
-    marginBottom: 20,
-    padding: 10,
-  },
-});

package/src/hooks/useThemeStyles.ts

@@ -1,42 +0,0 @@
-import { useMemo } from "react";
-import { ThemeColors } from "../utils/themeUtils";
-
-/**
- * Hook to generate dynamic styles based on theme colors
- * @param themeColors The theme colors object
- * @returns Object containing styled components based on the theme
- */
-export function useThemeStyles(themeColors: ThemeColors) {
-  const themeStyles = useMemo(
-    () => ({
-      primaryButton: {
-        backgroundColor: themeColors.primaryButtonBackground,
-        borderColor: themeColors.primaryButtonBorder,
-      },
-      primaryButtonText: {
-        color: themeColors.primaryButtonForeground,
-      },
-      secondaryButton: {
-        backgroundColor: themeColors.secondaryButtonBackground,
-        borderColor: themeColors.secondaryButtonBorder,
-      },
-      secondaryButtonText: {
-        color: themeColors.secondaryButtonForeground,
-      },
-      containerStyles: {
-        backgroundColor: themeColors.containerBackground,
-      },
-      textStyles: {
-        color: themeColors.containerForeground,
-      },
-      inputStyles: {
-        borderColor: themeColors.containerBorder,
-        color: themeColors.containerForeground,
-        backgroundColor: themeColors.containerBackground,
-      },
-    }),
-    [themeColors],
-  );
-
-  return themeStyles;
-}