funuicss 3.6.17 → 3.6.19

package/ui/theme/theme.js

@@ -70,15 +70,10 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     }
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useGlobalConfig = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.useVariant = exports.useTheme = void 0;
+exports.useComponentVariant = exports.useTypographyValue = exports.useColor = exports.useProjectData = exports.useThemeConfig = exports.useTypography = exports.useColors = exports.useComponentConfig = exports.useThemeValue = exports.useVariant = exports.useTheme = void 0;
 var react_1 = __importStar(require("react"));
 var themes_1 = require("./themes");
 var darkenUtils_1 = require("./darkenUtils");
-var firestore_1 = require("firebase/firestore");
-var db;
-if (typeof window !== 'undefined') {
-    db = require('../../utils/Firebase').default;
-}
 var ThemeContext = (0, react_1.createContext)({
     variant: 'standard',
     setVariant: function () { },
@@ -96,95 +91,104 @@ var useTheme = function () {
     return context;
 };
 exports.useTheme = useTheme;
-// Backward compatibility
 var useVariant = function () {
     var _a = (0, exports.useTheme)(), variant = _a.variant, setVariant = _a.setVariant;
     return { variant: variant, setVariant: setVariant };
 };
 exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
-/*                          THEME CACHE & STORAGE                             */
+/*                          CDN THEME LOADER                                  */
 /* -------------------------------------------------------------------------- */
-var CACHE_KEY = 'funui_theme_cache';
-var CACHE_EXPIRY = 1000 * 60 * 60; // 1 hour
-var getThemeFromCache = function (projectId) {
-    if (typeof window === 'undefined')
-        return null;
-    try {
-        var cached = localStorage.getItem("".concat(CACHE_KEY, "_").concat(projectId));
-        if (!cached)
-            return null;
-        var parsed = JSON.parse(cached);
-        var isExpired = Date.now() - parsed.timestamp > CACHE_EXPIRY;
-        if (isExpired) {
-            localStorage.removeItem("".concat(CACHE_KEY, "_").concat(projectId));
-            return null;
+var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
+    var publicResponse, data, error_1, publicUrl, response, data, error_2;
+    return __generator(this, function (_a) {
+        switch (_a.label) {
+            case 0:
+                _a.trys.push([0, 4, , 5]);
+                return [4 /*yield*/, fetch("/funui.json", {
+                        cache: 'no-cache',
+                    })];
+            case 1:
+                publicResponse = _a.sent();
+                if (!publicResponse.ok) return [3 /*break*/, 3];
+                return [4 /*yield*/, publicResponse.json()];
+            case 2:
+                data = _a.sent();
+                console.log('✅ Loaded theme from public folder');
+                return [2 /*return*/, data];
+            case 3: return [3 /*break*/, 5];
+            case 4:
+                error_1 = _a.sent();
+                console.log('No theme in public folder, checking Firebase Storage...');
+                return [3 /*break*/, 5];
+            case 5:
+                _a.trys.push([5, 10, , 11]);
+                publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F".concat(projectId, ".json?alt=media");
+                return [4 /*yield*/, fetch(publicUrl, {
+                        cache: 'no-cache',
+                    })];
+            case 6:
+                response = _a.sent();
+                if (!response.ok) return [3 /*break*/, 8];
+                return [4 /*yield*/, response.json()];
+            case 7:
+                data = _a.sent();
+                console.log('✅ Loaded theme from Firebase Storage CDN');
+                return [2 /*return*/, data];
+            case 8:
+                console.error('Firebase Storage fetch failed:', response.status, response.statusText);
+                _a.label = 9;
+            case 9: return [3 /*break*/, 11];
+            case 10:
+                error_2 = _a.sent();
+                console.error('Error loading from Firebase Storage:', error_2);
+                return [3 /*break*/, 11];
+            case 11: return [2 /*return*/, null];
         }
-        return parsed.data;
-    }
-    catch (error) {
-        console.error('Error reading theme cache:', error);
-        return null;
-    }
+    });
+}); };
+/* -------------------------------------------------------------------------- */
+/*                          CSS VARIABLE APPLIER                              */
+/* -------------------------------------------------------------------------- */
+var applyTypographyVariables = function (typography, root) {
+    if (!typography)
+        return;
+    Object.entries(typography).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        // Convert flat keys to CSS custom property format
+        var cssVarName = "--".concat(key.replace(/_/g, '-'));
+        root.style.setProperty(cssVarName, value);
+    });
 };
-var saveThemeToCache = function (projectId, data) {
-    if (typeof window === 'undefined')
+var applyColorVariables = function (colors, root) {
+    if (!colors)
         return;
-    try {
-        var cache = {
-            projectId: projectId,
-            data: data,
-            timestamp: Date.now(),
-        };
-        localStorage.setItem("".concat(CACHE_KEY, "_").concat(projectId), JSON.stringify(cache));
-    }
-    catch (error) {
-        console.error('Error saving theme cache:', error);
-    }
+    Object.entries(colors).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        // Convert flat keys to CSS custom property format
+        var cssVarName = "--".concat(key.replace(/_/g, '-'));
+        root.style.setProperty(cssVarName, value);
+    });
 };
-/* -------------------------------------------------------------------------- */
-/*                          SINGLETON LISTENER                                */
-/* -------------------------------------------------------------------------- */
-var activeListener = null;
-var currentProjectId = null;
-var listenerSubscribers = new Set();
-var subscribeToTheme = function (projectId, callback) {
-    listenerSubscribers.add(callback);
-    // If listener already exists for this project, just subscribe
-    if (currentProjectId === projectId && activeListener) {
-        return function () {
-            listenerSubscribers.delete(callback);
-        };
+var applyThemeConfig = function (themeConfig, root) {
+    if (!themeConfig)
+        return;
+    // Apply colors if they exist
+    if (themeConfig.colors) {
+        applyColorVariables(themeConfig.colors, root);
     }
-    // Clean up old listener if project changed
-    if (activeListener && currentProjectId !== projectId) {
-        activeListener();
-        activeListener = null;
-        currentProjectId = null;
+    // Apply typography if it exists
+    if (themeConfig.typography) {
+        applyTypographyVariables(themeConfig.typography, root);
     }
-    // Create new listener
-    var docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
-    currentProjectId = projectId;
-    var unsubscribe = (0, firestore_1.onSnapshot)(docRef, function (snapshot) {
-        var data = snapshot.data();
-        if (!data)
-            return;
-        // Save to cache
-        saveThemeToCache(projectId, data);
-        // Notify all subscribers
-        listenerSubscribers.forEach(function (cb) { return cb(data); });
-    }, function (error) {
-        console.error('Theme listener error:', error);
-    });
-    activeListener = unsubscribe;
-    return function () {
-        listenerSubscribers.delete(callback);
-        if (listenerSubscribers.size === 0 && activeListener) {
-            activeListener();
-            activeListener = null;
-            currentProjectId = null;
+    // Apply any other theme config properties
+    Object.entries(themeConfig).forEach(function (_a) {
+        var key = _a[0], value = _a[1];
+        if (key !== 'colors' && key !== 'typography' && typeof value === 'string') {
+            var cssVarName = "--".concat(key.replace(/_/g, '-'));
+            root.style.setProperty(cssVarName, value);
         }
-    };
+    });
 };
 /* -------------------------------------------------------------------------- */
 /*                                COMPONENT                                   */
@@ -197,6 +201,7 @@ var ThemeProvider = function (_a) {
     var _g = (0, react_1.useState)(true), isLoading = _g[0], setIsLoading = _g[1];
     var _h = (0, react_1.useState)(true), isInitialLoad = _h[0], setIsInitialLoad = _h[1];
     var _j = (0, react_1.useState)(null), error = _j[0], setError = _j[1];
+    var _k = (0, react_1.useState)(null), currentVersion = _k[0], setCurrentVersion = _k[1];
     /* -------------------------- Apply base theme --------------------------- */
     (0, react_1.useEffect)(function () {
         var root = document.documentElement;
@@ -218,7 +223,7 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- Firebase Theme Sync ----------------------- */
+    /* ---------------------- CDN Theme Sync ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined' || !projectId) {
             setIsLoading(false);
@@ -226,34 +231,38 @@ var ThemeProvider = function (_a) {
             return;
         }
         var root = document.documentElement;
-        // Step 1: Try to load from cache immediately
-        var cachedTheme = getThemeFromCache(projectId);
-        if (cachedTheme) {
-            applyThemeData(cachedTheme, root);
-            setIsLoading(false);
-            // Still initialLoad true, but we have cached data to show
-        }
-        // Step 2: Fetch fresh data (doesn't block render if we have cache)
-        var fetchInitialData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var docRef, snapshot, data, err_1;
+        var pollTimer;
+        var fetchFromCDN = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var cdnTheme, newVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
                         _a.trys.push([0, 2, 3, 4]);
-                        docRef = (0, firestore_1.doc)(db, 'Projects', projectId);
-                        return [4 /*yield*/, (0, firestore_1.getDoc)(docRef)];
+                        return [4 /*yield*/, loadThemeFromCDN(projectId)];
                     case 1:
-                        snapshot = _a.sent();
-                        if (snapshot.exists()) {
-                            data = snapshot.data();
-                            applyThemeData(data, root);
-                            saveThemeToCache(projectId, data);
+                        cdnTheme = _a.sent();
+                        if (cdnTheme) {
+                            newVersion = cdnTheme.version || Date.now();
+                            if (!currentVersion || newVersion !== currentVersion) {
+                                // Apply theme data to CSS variables and state
+                                applyThemeData(cdnTheme, root);
+                                setCurrentVersion(newVersion);
+                                console.log('✅ Theme updated from CDN');
+                            }
+                            else {
+                                console.log('✓ Theme unchanged');
+                            }
+                            setError(null);
+                        }
+                        else {
+                            console.warn('⚠️ No theme found in CDN');
+                            setError('Theme not found in CDN');
                         }
                         return [3 /*break*/, 4];
                     case 2:
                         err_1 = _a.sent();
-                        console.error('Error fetching initial theme:', err_1);
-                        setError('Failed to load theme');
+                        console.error('Error loading theme from CDN:', err_1);
+                        setError('Failed to load theme from CDN');
                         return [3 /*break*/, 4];
                     case 3:
                         setIsLoading(false);
@@ -263,35 +272,26 @@ var ThemeProvider = function (_a) {
                 }
             });
         }); };
-        // Only fetch if no cache
-        if (!cachedTheme) {
-            fetchInitialData();
-        }
-        else {
-            // We have cache, mark as loaded after short delay
-            setTimeout(function () { return setIsInitialLoad(false); }, 100);
-        }
-        // Step 3: Subscribe to real-time updates
-        var unsubscribe = subscribeToTheme(projectId, function (data) {
-            applyThemeData(data, root);
-        });
-        return unsubscribe;
-    }, [projectId]);
-    /* Helper function to apply theme data */
+        // Initial load
+        fetchFromCDN();
+        // Poll for updates every 5 minutes
+        pollTimer = setInterval(function () {
+            fetchFromCDN();
+        }, 5 * 60 * 1000);
+        return function () {
+            clearInterval(pollTimer);
+        };
+    }, [projectId, currentVersion]);
     var applyThemeData = function (data, root) {
         var _a;
-        var config = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
+        var themeConfig = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
         var newVariant = data.default_variation || 'standard';
         setVariant(newVariant);
-        setThemeConfig(config);
+        setThemeConfig(themeConfig);
         setProjectData(data);
-        // Apply CSS variables
-        Object.entries(config).forEach(function (_a) {
-            var key = _a[0], value = _a[1];
-            root.style.setProperty(key.startsWith('--') ? key : "--".concat(key), String(value));
-        });
+        // Apply all theme config to CSS variables
+        applyThemeConfig(themeConfig, root);
     };
-    /* Memoize context value to prevent unnecessary re-renders */
     var contextValue = (0, react_1.useMemo)(function () { return ({
         variant: variant,
         setVariant: setVariant,
@@ -301,42 +301,67 @@ var ThemeProvider = function (_a) {
         isInitialLoad: isInitialLoad,
         error: error,
     }); }, [variant, themeConfig, projectData, isLoading, isInitialLoad, error]);
-    /* ------------------------------- Render ------------------------------- */
     return (react_1.default.createElement(ThemeContext.Provider, { value: contextValue },
         react_1.default.createElement("div", { className: "theme-".concat(theme, " ").concat(funcss), style: {
                 backgroundColor: 'var(--page-bg)',
                 color: 'var(--text-color)',
                 minHeight: minHeight,
-                // Smooth transition when theme changes
                 transition: isInitialLoad ? 'none' : 'background-color 0.3s ease, color 0.3s ease',
             } }, children)));
 };
 exports.default = ThemeProvider;
 /* -------------------------------------------------------------------------- */
-/*                          HELPER HOOKS                                      */
+/*                              HELPER HOOKS                                  */
 /* -------------------------------------------------------------------------- */
-// Hook to get specific theme values
 var useThemeValue = function (key) {
     var themeConfig = (0, exports.useTheme)().themeConfig;
     return themeConfig[key];
 };
 exports.useThemeValue = useThemeValue;
-// Hook to get component-specific config
 var useComponentConfig = function (componentName) {
     var _a;
     var projectData = (0, exports.useTheme)().projectData;
     return ((_a = projectData === null || projectData === void 0 ? void 0 : projectData.components) === null || _a === void 0 ? void 0 : _a[componentName]) || {};
 };
 exports.useComponentConfig = useComponentConfig;
-// Hook to get colors
 var useColors = function () {
+    var _a;
     var projectData = (0, exports.useTheme)().projectData;
-    return (projectData === null || projectData === void 0 ? void 0 : projectData.colors) || {};
+    return ((_a = projectData === null || projectData === void 0 ? void 0 : projectData.theme_config) === null || _a === void 0 ? void 0 : _a.colors) || {};
 };
 exports.useColors = useColors;
-// Hook to get global config
-var useGlobalConfig = function () {
+var useTypography = function () {
+    var _a;
     var projectData = (0, exports.useTheme)().projectData;
-    return (projectData === null || projectData === void 0 ? void 0 : projectData.global) || {};
+    return ((_a = projectData === null || projectData === void 0 ? void 0 : projectData.theme_config) === null || _a === void 0 ? void 0 : _a.typography) || {};
+};
+exports.useTypography = useTypography;
+var useThemeConfig = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    return (projectData === null || projectData === void 0 ? void 0 : projectData.theme_config) || {};
+};
+exports.useThemeConfig = useThemeConfig;
+var useProjectData = function () {
+    var projectData = (0, exports.useTheme)().projectData;
+    return projectData;
+};
+exports.useProjectData = useProjectData;
+// Get specific color value
+var useColor = function (colorName) {
+    var colors = (0, exports.useColors)();
+    return colors[colorName];
+};
+exports.useColor = useColor;
+// Get specific typography value
+var useTypographyValue = function (property) {
+    var typography = (0, exports.useTypography)();
+    return typography[property];
+};
+exports.useTypographyValue = useTypographyValue;
+// Get component variant
+var useComponentVariant = function (componentName, variantName) {
+    if (variantName === void 0) { variantName = 'default'; }
+    var componentConfig = (0, exports.useComponentConfig)(componentName);
+    return componentConfig[variantName] || {};
 };
-exports.useGlobalConfig = useGlobalConfig;
+exports.useComponentVariant = useComponentVariant;

package/utils/componentUtils.d.ts

@@ -46,15 +46,15 @@ export interface UseComponentConfigReturn extends ComponentConfig {
  */
 export declare const getComponentConfig: (projectData: ProjectData | null | undefined, componentName: string, variantName?: string) => ComponentConfig;
 /**
- * Merge component config with local props - only applies config if variant exists
+ * Merge component config with local props - LOCAL PROPS OVERRIDE CONFIG
  *
  * @param config - Component configuration from getComponentConfig
- * @param localProps - Props passed directly to the component
+ * @param localProps - Props passed directly to the component (OVERRIDES CONFIG)
  * @returns Merged configuration with metadata
  */
 export declare const mergeComponentConfig: (config: ComponentConfig, localProps?: ComponentProps) => MergedConfig;
 /**
- * Hook for easy component config usage - only applies if variant is provided and exists
+ * Hook for easy component config usage with LOCAL PROP OVERRIDE
  * Uses useMemo to prevent unnecessary re-computation
  *
  * @param componentName - Name of the component
@@ -63,12 +63,15 @@ export declare const mergeComponentConfig: (config: ComponentConfig, localProps?
  */
 export declare const useComponentConfiguration: (componentName: string, variantName?: string) => UseComponentConfigReturn;
 /**
- * Utility function to check if a component variant exists
- * Useful for conditional rendering logic
+ * Hook that directly returns merged props with local override
+ * Perfect for direct use in components
+ */
+export declare const useComponentProps: (componentName: string, variantName?: string, localProps?: ComponentProps) => ComponentProps;
+/**
+ * Quick utility to check if a component variant exists
  */
 export declare const hasComponentVariant: (projectData: ProjectData | null | undefined, componentName: string, variantName: string) => boolean;
 /**
  * Get all available variants for a component
- * Useful for variant selectors/dropdowns
  */
 export declare const getAvailableVariants: (projectData: ProjectData | null | undefined, componentName: string) => string[];