@teamvortexsoftware/vortex-react-native 1.0.0 → 1.0.1

package/dist/hooks/usePrefetchWidgetConfiguration.js

@@ -0,0 +1,117 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePrefetchWidgetConfiguration = usePrefetchWidgetConfiguration;
+const react_1 = require("react");
+const vortex_shared_ui_1 = require("@teamvortexsoftware/vortex-shared-ui");
+const react_native_uuid_1 = __importDefault(require("react-native-uuid"));
+const configCache_1 = require("../utils/configCache");
+/**
+ * Hook to prefetch widget configuration for instant rendering.
+ * This hook fetches the configuration early (e.g., when JWT becomes available)
+ * so the VortexInvite component can render immediately without showing a loading spinner.
+ *
+ * The hook will still refetch in the background when VortexInvite mounts to ensure
+ * the configuration is up-to-date (stale-while-revalidate pattern).
+ *
+ * @example
+ * ```tsx
+ * const { widgetConfiguration } = usePrefetchWidgetConfiguration({
+ *   componentId: 'your-component-id',
+ *   vortexApiUrl: 'https://client-api.vortexsoftware.com',
+ *   jwt,
+ *   enabled: !!jwt, // Only prefetch when JWT is ready
+ * });
+ *
+ * <VortexInvite
+ *   componentId={componentId}
+ *   jwt={jwt}
+ *   widgetConfiguration={widgetConfiguration} // Pass prefetched config
+ *   // ... other props
+ * />
+ * ```
+ */
+function usePrefetchWidgetConfiguration({ componentId, vortexApiUrl, jwt, user, enabled = true, }) {
+    // Read from module-level cache instead of local state
+    const widgetConfiguration = configCache_1.configCache.get(componentId);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    // Generate effective JWT (same logic as useVortexInvite)
+    const effectiveJwt = (0, react_1.useMemo)(() => {
+        if (jwt)
+            return jwt;
+        if (user) {
+            if (typeof user === 'string')
+                return user;
+            const payload = Object.assign(Object.assign({}, user), { componentId });
+            const jsonString = JSON.stringify(payload);
+            const base64Encoded = Buffer.from(jsonString).toString('base64');
+            return `raw-data:${base64Encoded}`;
+        }
+        return undefined;
+    }, [jwt, user, componentId]);
+    const vortexClient = (0, react_1.useMemo)(() => {
+        const clientInfo = (0, vortex_shared_ui_1.getClientInfo)();
+        const sessionId = react_native_uuid_1.default.v4();
+        return new vortex_shared_ui_1.VortexClient(vortexApiUrl, clientInfo.name, clientInfo.version, sessionId);
+    }, [vortexApiUrl]);
+    (0, react_1.useEffect)(() => {
+        if (!enabled) {
+            return;
+        }
+        if (!effectiveJwt) {
+            return;
+        }
+        if (widgetConfiguration) {
+            return;
+        }
+        let cancelled = false;
+        const fetchConfig = () => __awaiter(this, void 0, void 0, function* () {
+            var _a;
+            setIsLoading(true);
+            setError(null);
+            try {
+                console.log('[Vortex] Prefetching widget configuration...');
+                const result = yield vortexClient.getWidgetConfiguration(componentId, effectiveJwt);
+                if (!cancelled && ((_a = result === null || result === void 0 ? void 0 : result.data) === null || _a === void 0 ? void 0 : _a.widgetConfiguration)) {
+                    const config = result.data.widgetConfiguration;
+                    configCache_1.configCache.set(componentId, config); // Write to shared cache
+                    console.log('[Vortex] Widget configuration prefetched successfully');
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    const error = err instanceof Error ? err : new Error('Failed to prefetch configuration');
+                    setError(error);
+                    console.error('[Vortex] Failed to prefetch widget configuration:', error);
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setIsLoading(false);
+                }
+            }
+        });
+        fetchConfig();
+        return () => {
+            cancelled = true;
+        };
+    }, [componentId, effectiveJwt, vortexClient, enabled, widgetConfiguration]);
+    return {
+        widgetConfiguration,
+        error,
+        isLoading,
+    };
+}
+//# sourceMappingURL=usePrefetchWidgetConfiguration.js.map

package/dist/hooks/usePrefetchWidgetConfiguration.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePrefetchWidgetConfiguration.js","sourceRoot":"","sources":["../../src/hooks/usePrefetchWidgetConfiguration.ts"],"names":[],"mappings":"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","sourcesContent":["import { useState, useEffect, useMemo } from 'react';\nimport { VortexClient, getClientInfo, VortexWidgetError } from '@teamvortexsoftware/vortex-shared-ui';\nimport { WidgetConfiguration, UnsignedData } from '@teamvortexsoftware/vortex-types';\nimport uuid from 'react-native-uuid';\nimport { configCache } from '../utils/configCache';\n\nexport interface UsePrefetchWidgetConfigurationOptions {\n  componentId: string;\n  vortexApiUrl: string;\n  jwt?: string;\n  user?: string | UnsignedData;\n  enabled?: boolean; // Allow conditional prefetching\n}\n\n/**\n * Hook to prefetch widget configuration for instant rendering.\n * This hook fetches the configuration early (e.g., when JWT becomes available)\n * so the VortexInvite component can render immediately without showing a loading spinner.\n * \n * The hook will still refetch in the background when VortexInvite mounts to ensure\n * the configuration is up-to-date (stale-while-revalidate pattern).\n * \n * @example\n * ```tsx\n * const { widgetConfiguration } = usePrefetchWidgetConfiguration({\n *   componentId: 'your-component-id',\n *   vortexApiUrl: 'https://client-api.vortexsoftware.com',\n *   jwt,\n *   enabled: !!jwt, // Only prefetch when JWT is ready\n * });\n * \n * <VortexInvite\n *   componentId={componentId}\n *   jwt={jwt}\n *   widgetConfiguration={widgetConfiguration} // Pass prefetched config\n *   // ... other props\n * />\n * ```\n */\nexport function usePrefetchWidgetConfiguration({\n  componentId,\n  vortexApiUrl,\n  jwt,\n  user,\n  enabled = true,\n}: UsePrefetchWidgetConfigurationOptions) {\n  // Read from module-level cache instead of local state\n  const widgetConfiguration = configCache.get(componentId);\n  const [error, setError] = useState<Error | null>(null);\n  const [isLoading, setIsLoading] = useState(false);\n\n  // Generate effective JWT (same logic as useVortexInvite)\n  const effectiveJwt = useMemo(() => {\n    if (jwt) return jwt;\n    if (user) {\n      if (typeof user === 'string') return user;\n      const payload = { ...user, componentId };\n      const jsonString = JSON.stringify(payload);\n      const base64Encoded = Buffer.from(jsonString).toString('base64');\n      return `raw-data:${base64Encoded}`;\n    }\n    return undefined;\n  }, [jwt, user, componentId]);\n\n  const vortexClient = useMemo(() => {\n    const clientInfo = getClientInfo();\n    const sessionId = uuid.v4() as string;\n    return new VortexClient(vortexApiUrl, clientInfo.name, clientInfo.version, sessionId);\n  }, [vortexApiUrl]);\n\n  useEffect(() => {\n    if (!enabled) {\n      return;\n    }\n\n    if (!effectiveJwt) {\n      return;\n    }\n\n    if (widgetConfiguration) {\n      return;\n    }\n\n    let cancelled = false;\n\n    const fetchConfig = async () => {\n      setIsLoading(true);\n      setError(null);\n\n      try {\n        console.log('[Vortex] Prefetching widget configuration...');\n        const result = await vortexClient.getWidgetConfiguration(componentId, effectiveJwt);\n\n        if (!cancelled && result?.data?.widgetConfiguration) {\n          const config = result.data.widgetConfiguration as unknown as WidgetConfiguration;\n          configCache.set(componentId, config); // Write to shared cache\n          console.log('[Vortex] Widget configuration prefetched successfully');\n        }\n      } catch (err) {\n        if (!cancelled) {\n          const error = err instanceof Error ? err : new Error('Failed to prefetch configuration');\n          setError(error);\n          console.error('[Vortex] Failed to prefetch widget configuration:', error);\n        }\n      } finally {\n        if (!cancelled) {\n          setIsLoading(false);\n        }\n      }\n    };\n\n    fetchConfig();\n\n    return () => {\n      cancelled = true;\n    };\n  }, [componentId, effectiveJwt, vortexClient, enabled, widgetConfiguration]);\n\n  return {\n    widgetConfiguration,\n    error,\n    isLoading,\n  };\n}\n"]}

package/dist/hooks/useThemeStyles.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useThemeStyles = useThemeStyles;
+const react_1 = require("react");
+/**
+ * Hook to generate dynamic styles based on theme colors
+ * @param themeColors The theme colors object
+ * @returns Object containing styled components based on the theme
+ */
+function useThemeStyles(themeColors) {
+    const themeStyles = (0, react_1.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,
+            borderColor: themeColors.containerBorder,
+        },
+        textStyles: {
+            color: themeColors.containerForeground,
+        },
+        inputStyles: {
+            borderColor: themeColors.containerBorder,
+            color: themeColors.containerForeground,
+            backgroundColor: themeColors.containerBackground,
+        },
+    }), [themeColors]);
+    return themeStyles;
+}
+//# sourceMappingURL=useThemeStyles.js.map

package/dist/hooks/useThemeStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemeStyles.js","sourceRoot":"","sources":["../../src/hooks/useThemeStyles.ts"],"names":[],"mappings":";;AAQA,wCAkCC;AA1CD,iCAAgC;AAGhC;;;;GAIG;AACH,SAAgB,cAAc,CAAC,WAAwB;IACrD,MAAM,WAAW,GAAG,IAAA,eAAO,EACzB,GAAG,EAAE,CAAC,CAAC;QACL,aAAa,EAAE;YACb,eAAe,EAAE,WAAW,CAAC,uBAAuB;YACpD,WAAW,EAAE,WAAW,CAAC,mBAAmB;SAC7C;QACD,iBAAiB,EAAE;YACjB,KAAK,EAAE,WAAW,CAAC,uBAAuB;SAC3C;QACD,eAAe,EAAE;YACf,eAAe,EAAE,WAAW,CAAC,yBAAyB;YACtD,WAAW,EAAE,WAAW,CAAC,qBAAqB;SAC/C;QACD,mBAAmB,EAAE;YACnB,KAAK,EAAE,WAAW,CAAC,yBAAyB;SAC7C;QACD,eAAe,EAAE;YACf,eAAe,EAAE,WAAW,CAAC,mBAAmB;YAChD,WAAW,EAAE,WAAW,CAAC,eAAe;SACzC;QACD,UAAU,EAAE;YACV,KAAK,EAAE,WAAW,CAAC,mBAAmB;SACvC;QACD,WAAW,EAAE;YACX,WAAW,EAAE,WAAW,CAAC,eAAe;YACxC,KAAK,EAAE,WAAW,CAAC,mBAAmB;YACtC,eAAe,EAAE,WAAW,CAAC,mBAAmB;SACjD;KACF,CAAC,EACF,CAAC,WAAW,CAAC,CACd,CAAC;IAEF,OAAO,WAAW,CAAC;AACrB,CAAC","sourcesContent":["import { useMemo } from \"react\";\nimport { ThemeColors } from \"../utils/themeUtils\";\n\n/**\n * Hook to generate dynamic styles based on theme colors\n * @param themeColors The theme colors object\n * @returns Object containing styled components based on the theme\n */\nexport function useThemeStyles(themeColors: ThemeColors) {\n  const themeStyles = useMemo(\n    () => ({\n      primaryButton: {\n        backgroundColor: themeColors.primaryButtonBackground,\n        borderColor: themeColors.primaryButtonBorder,\n      },\n      primaryButtonText: {\n        color: themeColors.primaryButtonForeground,\n      },\n      secondaryButton: {\n        backgroundColor: themeColors.secondaryButtonBackground,\n        borderColor: themeColors.secondaryButtonBorder,\n      },\n      secondaryButtonText: {\n        color: themeColors.secondaryButtonForeground,\n      },\n      containerStyles: {\n        backgroundColor: themeColors.containerBackground,\n        borderColor: themeColors.containerBorder,\n      },\n      textStyles: {\n        color: themeColors.containerForeground,\n      },\n      inputStyles: {\n        borderColor: themeColors.containerBorder,\n        color: themeColors.containerForeground,\n        backgroundColor: themeColors.containerBackground,\n      },\n    }),\n    [themeColors],\n  );\n\n  return themeStyles;\n}\n"]}