app-studio 0.2.4 → 0.2.8

package/dist/appstudio.cjs.development.js

@@ -311,6 +311,7 @@ const palette = {
   }
 };
 
+// Configuration de thème par défaut
 const defaultThemeMain = {
   primary: 'color.black',
   secondary: 'color.blue',
@@ -320,6 +321,7 @@ const defaultThemeMain = {
   disabled: 'color.gray.500',
   loading: 'color.dark.500'
 };
+// Configuration des couleurs par défaut
 const defaultColors = {
   white: '#FFFFFF',
   black: '#000000',
@@ -352,10 +354,9 @@ const defaultColors = {
   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
@@ -365,7 +366,35 @@ const ThemeContext = /*#__PURE__*/React.createContext({
     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 = {
@@ -378,58 +407,69 @@ const ThemeProvider = _ref => {
     },
     children
   } = _ref;
+  // Fusion profonde des thèmes par défaut avec ceux fournis
+  const mergedTheme = deepMerge(defaultThemeMain, 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é.
+   */
+  console.log({
+    mergedTheme
+  });
   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);
 };
@@ -838,7 +878,7 @@ const computeStyleProps = (props, getColor, mediaQueries, devices) => {
           media,
           ...nestedProps
         } = value;
-        const nestedResult = applyStyle(nestedProps, getColor, mediaQueries, devices);
+        const nestedResult = computeStyleProps(nestedProps);
         styleProps[property] = nestedResult.styleProps;
         keyframesList.push(...(nestedResult.keyframes || []));
       } else {
@@ -935,7 +975,7 @@ maxDepth // Set a maximum depth
             if (!styleProps[`&:${event}`]) {
               styleProps[`&:${event}`] = {};
             }
-            const nestedResult = computeStyleProps(value[event], getColor, mediaQueries, devices);
+            const nestedResult = computeStyleProps(value[event]);
             Object.assign(styleProps[`&:${event}`], nestedResult.styleProps);
             keyframesList.push(...(nestedResult.keyframes || []));
           }
@@ -947,7 +987,7 @@ maxDepth // Set a maximum depth
               if (!styleProps[mediaQuery]) {
                 styleProps[mediaQuery] = {};
               }
-              const nestedResult = computeStyleProps(mediaValue, getColor, mediaQueries, devices);
+              const nestedResult = computeStyleProps(mediaValue);
               Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
               keyframesList.push(...(nestedResult.keyframes || []));
             } else if (devices[screenOrDevices]) {
@@ -958,7 +998,7 @@ maxDepth // Set a maximum depth
                   if (!styleProps[mediaQuery]) {
                     styleProps[mediaQuery] = {};
                   }
-                  const nestedResult = computeStyleProps(mediaValue, getColor, mediaQueries, devices);
+                  const nestedResult = computeStyleProps(mediaValue);
                   Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
                   keyframesList.push(...(nestedResult.keyframes || []));
                 }
@@ -973,7 +1013,7 @@ maxDepth // Set a maximum depth
             media,
             ...nestedProps
           } = value;
-          const nestedResult = computeStyleProps(nestedProps, getColor, mediaQueries, devices);
+          const nestedResult = computeStyleProps(nestedProps);
           styleProps[property] = nestedResult.styleProps;
           keyframesList.push(...(nestedResult.keyframes || []));
         }
@@ -983,6 +1023,9 @@ maxDepth // Set a maximum depth
       }
     }
   });
+  console.log({
+    styleProps
+  });
   return {
     styleProps,
     keyframes: keyframesList