funuicss 3.6.18 → 3.6.19

package/ui/theme/theme.js

@@ -70,7 +70,7 @@ 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");
@@ -97,49 +97,7 @@ var useVariant = function () {
 };
 exports.useVariant = useVariant;
 /* -------------------------------------------------------------------------- */
-/*                          THEME CACHE & STORAGE                             */
-/* -------------------------------------------------------------------------- */
-var CACHE_KEY = 'funui_theme_cache';
-var CACHE_EXPIRY = 1000 * 60 * 60; // 1 hour
-var POLL_INTERVAL = 5 * 60 * 1000; // Check for updates every 5 minutes
-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;
-        }
-        return parsed.data;
-    }
-    catch (error) {
-        console.error('Error reading theme cache:', error);
-        return null;
-    }
-};
-var saveThemeToCache = function (projectId, data) {
-    if (typeof window === 'undefined')
-        return;
-    try {
-        var cache = {
-            projectId: projectId,
-            data: data,
-            timestamp: Date.now(),
-            version: data.version || Date.now(),
-        };
-        localStorage.setItem("".concat(CACHE_KEY, "_").concat(projectId), JSON.stringify(cache));
-    }
-    catch (error) {
-        console.error('Error saving theme cache:', error);
-    }
-};
-/* -------------------------------------------------------------------------- */
-/*                          CDN THEME LOADER (NO TOKEN!)                      */
+/*                          CDN THEME LOADER                                  */
 /* -------------------------------------------------------------------------- */
 var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, void 0, function () {
     var publicResponse, data, error_1, publicUrl, response, data, error_2;
@@ -175,7 +133,7 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
                 return [4 /*yield*/, response.json()];
             case 7:
                 data = _a.sent();
-                console.log('✅ Loaded theme from Firebase Storage (public CDN)');
+                console.log('✅ Loaded theme from Firebase Storage CDN');
                 return [2 /*return*/, data];
             case 8:
                 console.error('Firebase Storage fetch failed:', response.status, response.statusText);
@@ -190,6 +148,49 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
     });
 }); };
 /* -------------------------------------------------------------------------- */
+/*                          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 applyColorVariables = function (colors, root) {
+    if (!colors)
+        return;
+    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);
+    });
+};
+var applyThemeConfig = function (themeConfig, root) {
+    if (!themeConfig)
+        return;
+    // Apply colors if they exist
+    if (themeConfig.colors) {
+        applyColorVariables(themeConfig.colors, root);
+    }
+    // Apply typography if it exists
+    if (themeConfig.typography) {
+        applyTypographyVariables(themeConfig.typography, root);
+    }
+    // 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                                   */
 /* -------------------------------------------------------------------------- */
 var ThemeProvider = function (_a) {
@@ -222,7 +223,7 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- CDN Theme Sync (No Token!) ----------------------- */
+    /* ---------------------- CDN Theme Sync ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined' || !projectId) {
             setIsLoading(false);
@@ -231,15 +232,6 @@ var ThemeProvider = function (_a) {
         }
         var root = document.documentElement;
         var pollTimer;
-        // Step 1: Load from cache immediately
-        var cachedTheme = getThemeFromCache(projectId);
-        if (cachedTheme) {
-            applyThemeData(cachedTheme, root);
-            setCurrentVersion(cachedTheme.version || null);
-            setIsLoading(false);
-            console.log('✅ Using cached theme');
-        }
-        // Step 2: Fetch from CDN
         var fetchFromCDN = function () { return __awaiter(void 0, void 0, void 0, function () {
             var cdnTheme, newVersion, err_1;
             return __generator(this, function (_a) {
@@ -252,8 +244,8 @@ var ThemeProvider = function (_a) {
                         if (cdnTheme) {
                             newVersion = cdnTheme.version || Date.now();
                             if (!currentVersion || newVersion !== currentVersion) {
+                                // Apply theme data to CSS variables and state
                                 applyThemeData(cdnTheme, root);
-                                saveThemeToCache(projectId, cdnTheme);
                                 setCurrentVersion(newVersion);
                                 console.log('✅ Theme updated from CDN');
                             }
@@ -264,17 +256,13 @@ var ThemeProvider = function (_a) {
                         }
                         else {
                             console.warn('⚠️ No theme found in CDN');
-                            if (!cachedTheme) {
-                                setError('Theme not found');
-                            }
+                            setError('Theme not found in CDN');
                         }
                         return [3 /*break*/, 4];
                     case 2:
                         err_1 = _a.sent();
                         console.error('Error loading theme from CDN:', err_1);
-                        if (!cachedTheme) {
-                            setError('Failed to load theme');
-                        }
+                        setError('Failed to load theme from CDN');
                         return [3 /*break*/, 4];
                     case 3:
                         setIsLoading(false);
@@ -284,32 +272,25 @@ var ThemeProvider = function (_a) {
                 }
             });
         }); };
-        if (!cachedTheme) {
-            fetchFromCDN();
-        }
-        else {
-            setTimeout(function () { return setIsInitialLoad(false); }, 100);
-            fetchFromCDN();
-        }
-        // Step 3: Poll for updates every 5 minutes
+        // Initial load
+        fetchFromCDN();
+        // Poll for updates every 5 minutes
         pollTimer = setInterval(function () {
             fetchFromCDN();
-        }, POLL_INTERVAL);
+        }, 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);
-        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);
     };
     var contextValue = (0, react_1.useMemo)(function () { return ({
         variant: variant,
@@ -329,7 +310,9 @@ var ThemeProvider = function (_a) {
             } }, children)));
 };
 exports.default = ThemeProvider;
-// Helper hooks
+/* -------------------------------------------------------------------------- */
+/*                              HELPER HOOKS                                  */
+/* -------------------------------------------------------------------------- */
 var useThemeValue = function (key) {
     var themeConfig = (0, exports.useTheme)().themeConfig;
     return themeConfig[key];
@@ -342,12 +325,43 @@ var useComponentConfig = function (componentName) {
 };
 exports.useComponentConfig = useComponentConfig;
 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;
-var useGlobalConfig = function () {
+var useTypography = function () {
+    var _a;
+    var projectData = (0, exports.useTheme)().projectData;
+    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.global) || {};
+    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[];

package/utils/componentUtils.js

@@ -1,5 +1,4 @@
 "use strict";
-// import { useTheme } from "../ui/theme/theme"
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -12,154 +11,7 @@ var __assign = (this && this.__assign) || function () {
     return __assign.apply(this, arguments);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAvailableVariants = exports.hasComponentVariant = exports.useComponentConfiguration = exports.mergeComponentConfig = exports.getComponentConfig = void 0;
-// // utils/componentUtils.ts
-// // Type definitions
-// export interface ComponentProps {
-//   [key: string]: any
-// }
-// export interface ComponentMetadata {
-//   createdAt?: Date
-//   updatedAt?: Date
-//   isCustom?: boolean
-//   baseVariant?: string
-// }
-// export interface ComponentVariant {
-//   componentProps: ComponentProps
-//   metadata?: ComponentMetadata
-// }
-// export interface ComponentConfig {
-//   componentProps: ComponentProps
-//   variantExists: boolean
-//   actualVariant: string
-//   availableVariants: string[]
-//   metadata: ComponentMetadata
-// }
-// export interface ProjectData {
-//   components?: {
-//     [componentName: string]: {
-//       [variantName: string]: ComponentVariant
-//     }
-//   }
-// }
-// export interface MergedConfig {
-//   props: ComponentProps
-//   variant: string
-//   hasConfig: boolean
-// }
-// export interface UseComponentConfigReturn extends ComponentConfig {
-//   mergeWithLocal: (localProps?: ComponentProps) => MergedConfig
-//   getProp: <T = any>(propName: string, defaultValue?: T) => T
-// }
-// /**
-//  * Universal component config getter
-//  */
-// export const getComponentConfig = (
-//   projectData: ProjectData | null | undefined,
-//   componentName: string,
-//   variantName: string = 'default'
-// ): ComponentConfig => {
-//   if (!projectData?.components?.[componentName]) {
-//     return {
-//       componentProps: {},
-//       variantExists: false,
-//       actualVariant: variantName,
-//       availableVariants: [],
-//       metadata: {}
-//     }
-//   }
-//   const component = projectData.components[componentName]
-//   const availableVariants = Object.keys(component)
-//   // Find the best variant match
-//   let targetVariant = variantName
-//   if (!availableVariants.includes(variantName)) {
-//     if (availableVariants.includes('default')) {
-//       targetVariant = 'default'
-//     } else if (availableVariants.length > 0) {
-//       targetVariant = availableVariants[0]
-//     } else {
-//       return {
-//         componentProps: {},
-//         variantExists: false,
-//         actualVariant: variantName,
-//         availableVariants: [],
-//         metadata: {}
-//       }
-//     }
-//   }
-//   const variantData = component[targetVariant] || {}
-//   return {
-//     componentProps: variantData.componentProps || {},
-//     variantExists: true,
-//     actualVariant: targetVariant,
-//     availableVariants,
-//     metadata: variantData.metadata || {}
-//   }
-// }
-// /**
-//  * Merge component config with local props - only applies config if variant exists
-//  */
-// export const mergeComponentConfig = (
-//   config: ComponentConfig,
-//   localProps: ComponentProps = {}
-// ): MergedConfig => {
-//   // Only apply config if variant exists and has actual configuration
-//   const hasValidConfig = config.variantExists && Object.keys(config.componentProps).length > 0
-//   if (!hasValidConfig) {
-//     return {
-//       props: localProps,
-//       variant: config.actualVariant,
-//       hasConfig: false
-//     }
-//   }
-//   return {
-//     // Props: config overrides local only if variant exists
-//     props: {
-//       ...localProps,
-//       ...config.componentProps
-//     },
-//     // Metadata
-//     variant: config.actualVariant,
-//     hasConfig: true
-//   }
-// }
-// /**
-//  * Hook for easy component config usage - only applies if variant is provided and exists
-//  */
-// export const useComponentConfiguration = (
-//   componentName: string, 
-//   variantName?: string // Make variantName optional
-// ): UseComponentConfigReturn => {
-//   const { projectData } = useTheme()
-//   // Only get config if variantName is provided
-//   const config = variantName ? getComponentConfig(projectData, componentName, variantName) : {
-//     componentProps: {},
-//     variantExists: false,
-//     actualVariant: '',
-//     availableVariants: [],
-//     metadata: {}
-//   }
-//   const mergeWithLocal = (
-//     localProps: ComponentProps = {}
-//   ): MergedConfig => {
-//     // If no variant name was provided, return local props as-is
-//     if (!variantName) {
-//       return {
-//         props: localProps,
-//         variant: '',
-//         hasConfig: false
-//       }
-//     }
-//     return mergeComponentConfig(config, localProps)
-//   }
-//   const getProp = <T = any>(propName: string, defaultValue?: T): T => 
-//     (config.componentProps[propName] ?? defaultValue) as T
-//   return {
-//     ...config,
-//     mergeWithLocal,
-//     getProp
-//   }
-// }
+exports.getAvailableVariants = exports.hasComponentVariant = exports.useComponentProps = exports.useComponentConfiguration = exports.mergeComponentConfig = exports.getComponentConfig = void 0;
 var theme_1 = require("../ui/theme/theme");
 var react_1 = require("react");
 /**
@@ -219,29 +71,37 @@ var getComponentConfig = function (projectData, componentName, variantName) {
 };
 exports.getComponentConfig = getComponentConfig;
 /**
- * Deep merge utility for nested objects
- * Config props override local props, but we preserve nested structure
+ * Smart merge utility - LOCAL PROPS OVERRIDE CONFIG PROPS
+ * If a prop exists in both local and config, local wins
  */
-var deepMerge = function (target, source) {
-    var result = __assign({}, target);
-    for (var key in source) {
-        if (source[key] !== undefined) {
-            // For objects, do shallow merge (we don't go too deep to avoid complexity)
-            if (typeof source[key] === 'object' && !Array.isArray(source[key]) && source[key] !== null) {
-                result[key] = __assign(__assign({}, (target[key] || {})), source[key]);
+var smartMergeWithLocalOverride = function (configProps, localProps) {
+    var result = __assign({}, configProps);
+    // Apply local props - they override config props
+    for (var key in localProps) {
+        if (localProps[key] !== undefined) {
+            // For objects, do smart merge but local object properties still override
+            if (typeof localProps[key] === 'object' &&
+                !Array.isArray(localProps[key]) &&
+                localProps[key] !== null &&
+                typeof configProps[key] === 'object' &&
+                !Array.isArray(configProps[key]) &&
+                configProps[key] !== null) {
+                // Merge nested objects but local properties still win
+                result[key] = __assign(__assign({}, configProps[key]), localProps[key]);
             }
             else {
-                result[key] = source[key];
+                // Primitive values or arrays - local always wins
+                result[key] = localProps[key];
             }
         }
     }
     return result;
 };
 /**
- * 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
  */
 var mergeComponentConfig = function (config, localProps) {
@@ -255,17 +115,16 @@ var mergeComponentConfig = function (config, localProps) {
             hasConfig: false
         };
     }
+    // LOCAL PROPS OVERRIDE CONFIG PROPS
     return {
-        // Props: config overrides local, with deep merge for nested objects
-        props: deepMerge(localProps, config.componentProps),
-        // Metadata
+        props: smartMergeWithLocalOverride(config.componentProps, localProps),
         variant: config.actualVariant,
         hasConfig: true
     };
 };
 exports.mergeComponentConfig = mergeComponentConfig;
 /**
- * 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
@@ -287,7 +146,7 @@ var useComponentConfiguration = function (componentName, variantName) {
         }
         return (0, exports.getComponentConfig)(projectData, componentName, variantName);
     }, [projectData, componentName, variantName]);
-    // Memoize merge function
+    // Memoize merge function - LOCAL PROPS OVERRIDE CONFIG
     var mergeWithLocal = (0, react_1.useMemo)(function () {
         return function (localProps) {
             if (localProps === void 0) { localProps = {}; }
@@ -302,7 +161,7 @@ var useComponentConfiguration = function (componentName, variantName) {
             return (0, exports.mergeComponentConfig)(config, localProps);
         };
     }, [config, variantName]);
-    // Memoize getProp function
+    // Memoize getProp function (gets from config only, not merged)
     var getProp = (0, react_1.useMemo)(function () {
         return function (propName, defaultValue) { var _a; return ((_a = config.componentProps[propName]) !== null && _a !== void 0 ? _a : defaultValue); };
     }, [config.componentProps]);
@@ -310,8 +169,22 @@ var useComponentConfiguration = function (componentName, variantName) {
 };
 exports.useComponentConfiguration = useComponentConfiguration;
 /**
- * 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
+ */
+var useComponentProps = function (componentName, variantName, localProps) {
+    if (variantName === void 0) { variantName = 'default'; }
+    if (localProps === void 0) { localProps = {}; }
+    var projectData = (0, theme_1.useTheme)().projectData;
+    return (0, react_1.useMemo)(function () {
+        var config = (0, exports.getComponentConfig)(projectData, componentName, variantName);
+        var merged = (0, exports.mergeComponentConfig)(config, localProps);
+        return merged.props;
+    }, [projectData, componentName, variantName, localProps]);
+};
+exports.useComponentProps = useComponentProps;
+/**
+ * Quick utility to check if a component variant exists
  */
 var hasComponentVariant = function (projectData, componentName, variantName) {
     var _a, _b;
@@ -320,7 +193,6 @@ var hasComponentVariant = function (projectData, componentName, variantName) {
 exports.hasComponentVariant = hasComponentVariant;
 /**
  * Get all available variants for a component
- * Useful for variant selectors/dropdowns
  */
 var getAvailableVariants = function (projectData, componentName) {
     var _a;

package/utils/FireStore.d.ts

@@ -1,10 +0,0 @@
-export namespace Requests {
-    export function getDocs(collectionName: any, docs_limit: any, extraQueries?: any[]): Promise<any>;
-    export function getDoc(collectionName: any, id: any): Promise<any>;
-    export function query(collectionName: any, queriesArr: any[] | undefined, docs_limit: any): Promise<any>;
-    export function add_document(cName: any, data: any, dbCollection?: string): Promise<any>;
-    export function set_doc(cName: any, doc_id: any, data: any): Promise<any>;
-    export function update(cName: any, doc_id: any, data: any): Promise<any>;
-    export function _delete(cName: any, doc_id: any): Promise<any>;
-    export { _delete as delete };
-}