app-studio 0.2.4 → 0.2.7

package/dist/appstudio.umd.development.js

@@ -310,6 +310,7 @@
     }
   };
 
+  // Configuration de thème par défaut
   const defaultThemeMain = {
     primary: 'color.black',
     secondary: 'color.blue',
@@ -319,6 +320,7 @@
     disabled: 'color.gray.500',
     loading: 'color.dark.500'
   };
+  // Configuration des couleurs par défaut
   const defaultColors = {
     white: '#FFFFFF',
     black: '#000000',
@@ -351,10 +353,9 @@
     darkGreen: '#006400',
     salmon: '#FA8072'
   };
+  // Création du contexte de thème avec des valeurs par défaut
   const ThemeContext = /*#__PURE__*/React.createContext({
-    getColor: name => {
-      return name;
-    },
+    getColor: name => name,
     colors: {
       main: defaultColors,
       palette: palette
@@ -364,7 +365,35 @@
       components: {}
     }
   });
+  // Hook personnalisé pour utiliser le contexte de thème
   const useTheme = () => React.useContext(ThemeContext);
+  // Fonction de fusion profonde simple
+  const deepMerge = (target, source) => {
+    if (typeof source !== 'object' || source === null) {
+      return target;
+    }
+    const merged = {
+      ...target
+    };
+    for (const key in source) {
+      if (Object.prototype.hasOwnProperty.call(source, key)) {
+        const sourceValue = source[key];
+        const targetValue = target[key];
+        if (Array.isArray(sourceValue)) {
+          // Remplacer les tableaux
+          merged[key] = sourceValue;
+        } else if (typeof sourceValue === 'object' && sourceValue !== null && !Array.isArray(sourceValue)) {
+          // Fusion récursive des objets
+          merged[key] = deepMerge(targetValue || {}, sourceValue);
+        } else {
+          // Remplacer les autres types de valeurs
+          merged[key] = sourceValue;
+        }
+      }
+    }
+    return merged;
+  };
+  // Composant ThemeProvider
   const ThemeProvider = _ref => {
     let {
       theme = {
@@ -377,58 +406,69 @@
       },
       children
     } = _ref;
+    // Fusion profonde des thèmes par défaut avec ceux fournis
+    const mergedTheme = deepMerge({
+      main: defaultThemeMain,
+      components: {}
+    }, theme);
+    // Fusion profonde des couleurs par défaut avec celles fournies
+    const mergedColors = deepMerge({
+      main: defaultColors,
+      palette: palette
+    }, colors);
+    /**
+     * Fonction pour récupérer une couleur basée sur un chemin en chaîne.
+     * Supporte les références imbriquées comme 'theme.button.primary.background'.
+     * @param name - Le nom de la couleur à récupérer.
+     * @returns La valeur de couleur résolue ou le nom original si non trouvé.
+     */
     const getColor = name => {
       if (name === 'transparent') return name;
       try {
-        // Si le nom commence par "theme.", nous recherchons dans les couleurs du thème
         if (name.startsWith('theme.')) {
           const keys = name.split('.');
-          if (keys[1] !== undefined && typeof theme.components[keys[1]] == 'object' && theme.components[keys[1]][keys[2]] !== undefined) {
-            return getColor(theme.components[keys[1]][keys[2]]);
-          } else if (theme.main[keys[1]] && theme.main[keys[1]] !== undefined) {
-            return getColor(theme.main[keys[1]]);
-          } else {
-            console.log('Color ' + name + ' not found');
+          let value = mergedTheme;
+          for (let i = 1; i < keys.length; i++) {
+            value = value[keys[i]];
+            if (value === undefined) {
+              console.warn(`Couleur "${name}" non trouvée dans le thème.`);
+              return name;
+            }
           }
-        }
-        // Si le nom commence par "color.", nous recherchons dans la palette
-        else if (name.startsWith('color.')) {
-          const keys = name.split('.'); // Retirer le préfixe "color."
-          if (colors.palette && colors.palette[keys[1]][keys[2]] !== undefined) {
-            return colors.palette[keys[1]][keys[2]];
-          } else if (colors.palette && colors.palette[keys[1]][parseInt(keys[2])] !== undefined) {
-            return colors.palette[keys[1]][parseInt(keys[2])];
-          } else if (colors.main && colors.main[keys[1]] !== undefined) {
-            return colors.main[keys[1]];
+          if (typeof value === 'string') {
+            return getColor(value); // Résoudre les références imbriquées
           } else {
-            console.log('Color ' + name + ' not found');
+            console.warn(`La couleur "${name}" a résolu à une valeur non-string.`);
+            return name;
+          }
+        } else if (name.startsWith('color.')) {
+          const keys = name.split('.');
+          if (keys.length === 2) {
+            // Exemple : "color.white"
+            const colorName = keys[1];
+            return mergedColors.main[colorName] || name;
+          } else if (keys.length === 3) {
+            // Exemple : "color.palette.primary.500"
+            const [_, paletteName, variant] = keys;
+            if (mergedColors.palette[paletteName] && mergedColors.palette[paletteName][variant]) {
+              return mergedColors.palette[paletteName][variant];
+            } else {
+              console.warn(`Color ${_} non trouvée`);
+            }
           }
+          console.warn(`Color "${name}" non trouvée dans la palette ou les couleurs principales.`);
         }
-      } catch (e) {}
-      return name;
+      } catch (e) {
+        console.error('Erreur lors de la récupération de la couleur:', e);
+      }
+      return name; // Retourner le nom original si non trouvé
     };
+
     return /*#__PURE__*/React__default.createElement(ThemeContext.Provider, {
       value: {
         getColor,
-        theme: {
-          main: {
-            ...defaultThemeMain,
-            ...theme.main
-          },
-          components: {
-            ...theme.components
-          }
-        },
-        colors: {
-          main: {
-            ...defaultColors,
-            ...colors.main
-          },
-          palette: {
-            ...palette,
-            ...colors.palette
-          }
-        }
+        theme: mergedTheme,
+        colors: mergedColors
       }
     }, children);
   };