app-studio 0.2.2 → 0.2.7

package/dist/appstudio.esm.js

@@ -304,6 +304,7 @@ const palette = {
   }
 };
 
+// Configuration de thème par défaut
 const defaultThemeMain = {
   primary: 'color.black',
   secondary: 'color.blue',
@@ -313,6 +314,7 @@ const defaultThemeMain = {
   disabled: 'color.gray.500',
   loading: 'color.dark.500'
 };
+// Configuration des couleurs par défaut
 const defaultColors = {
   white: '#FFFFFF',
   black: '#000000',
@@ -345,10 +347,9 @@ const defaultColors = {
   darkGreen: '#006400',
   salmon: '#FA8072'
 };
+// Création du contexte de thème avec des valeurs par défaut
 const ThemeContext = /*#__PURE__*/createContext({
-  getColor: name => {
-    return name;
-  },
+  getColor: name => name,
   colors: {
     main: defaultColors,
     palette: palette
@@ -358,7 +359,35 @@ const ThemeContext = /*#__PURE__*/createContext({
     components: {}
   }
 });
+// Hook personnalisé pour utiliser le contexte de thème
 const useTheme = () => 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 = {
@@ -371,58 +400,69 @@ const ThemeProvider = _ref => {
     },
     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.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);
 };
@@ -763,7 +803,106 @@ const generateCssRules = (selector, styles, getColor, mediaQueries) => {
   return rules;
 };
 // Function to apply styles to a component
-const applyStyle = (props, getColor, mediaQueries, devices) => {
+const computeStyleProps = (props, getColor, mediaQueries, devices) => {
+  const styleProps = {};
+  const keyframesList = [];
+  // Gestion de la taille de l'élément
+  const size = props.height !== undefined && props.width !== undefined && props.height === props.width ? props.height : props.size ? props.size : null;
+  if (size) {
+    styleProps.height = styleProps.width = size;
+  }
+  // Gestion du padding et de la marge
+  if (props.paddingHorizontal) {
+    styleProps.paddingLeft = props.paddingHorizontal;
+    styleProps.paddingRight = props.paddingHorizontal;
+  }
+  if (props.marginHorizontal) {
+    styleProps.marginLeft = props.marginHorizontal;
+    styleProps.marginRight = props.marginHorizontal;
+  }
+  if (props.paddingVertical) {
+    styleProps.paddingTop = props.paddingVertical;
+    styleProps.paddingBottom = props.paddingVertical;
+  }
+  if (props.marginVertical) {
+    styleProps.marginTop = props.marginVertical;
+    styleProps.marginBottom = props.marginVertical;
+  }
+  // Application des ombres si spécifié
+  if (props.shadow) {
+    if (typeof props.shadow === 'number' || typeof props.shadow === 'boolean') {
+      const shadowValue = typeof props.shadow === 'number' && Shadows[props.shadow] !== undefined ? props.shadow : 2;
+      if (Shadows[shadowValue]) {
+        const shadowColor = Color.hex.rgb(Shadows[shadowValue].shadowColor) || [];
+        styleProps['boxShadow'] = `${Shadows[shadowValue].shadowOffset.height}px ${Shadows[shadowValue].shadowOffset.width}px ${Shadows[shadowValue].shadowRadius}px rgba(${shadowColor.join(',')},${Shadows[shadowValue].shadowOpacity})`;
+      }
+    } else {
+      const shadowColor = Color.hex.rgb(props.shadow.shadowColor) || [];
+      styleProps['boxShadow'] = `${props.shadow.shadowOffset.height}px ${props.shadow.shadowOffset.width}px ${props.shadow.shadowRadius}px rgba(${shadowColor.join(',')},${props.shadow.shadowOpacity})`;
+    }
+  }
+  // Gestion des animations
+  if (props.animate) {
+    const animation = props.animate;
+    const {
+      keyframesName,
+      keyframes
+    } = generateKeyframes(animation);
+    if (keyframes) {
+      keyframesList.push(keyframes);
+    }
+    styleProps.animationName = keyframesName;
+    styleProps.animationDuration = animation.duration || '1s';
+    styleProps.animationTimingFunction = animation.timingFunction || 'ease';
+    styleProps.animationDelay = animation.delay || '0s';
+    styleProps.animationIterationCount = `${animation.iterationCount || '1'}`;
+    styleProps.animationDirection = animation.direction || 'normal';
+    styleProps.animationFillMode = animation.fillMode || 'both';
+    styleProps.animationPlayState = animation.playState || 'running';
+  }
+  Object.keys(props).forEach(property => {
+    if (property !== 'style' && (isStyleProp(property) || extraKeys.has(property))) {
+      const value = props[property];
+      if (typeof value === 'object' && value !== null) {
+        // For other nested styles, exclude 'on' and 'media'
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const {
+          on,
+          media,
+          ...nestedProps
+        } = value;
+        const nestedResult = applyStyle(nestedProps, getColor, mediaQueries, devices);
+        styleProps[property] = nestedResult.styleProps;
+        keyframesList.push(...(nestedResult.keyframes || []));
+      } else {
+        // Simple style property
+        styleProps[property] = value;
+      }
+    }
+  });
+  return {
+    styleProps,
+    keyframes: keyframesList
+  };
+};
+// Function to apply styles to a component
+const applyStyle = function (props, getColor, mediaQueries, devices, depth,
+// Add a depth parameter
+maxDepth // Set a maximum depth
+) {
+  if (depth === void 0) {
+    depth = 0;
+  }
+  if (maxDepth === void 0) {
+    maxDepth = 10;
+  }
+  if (depth > maxDepth) {
+    console.error('Maximum recursion depth reached in applyStyle');
+    return {
+      styleProps: {},
+      keyframes: []
+    };
+  }
   const styleProps = {};
   const keyframesList = [];
   // Gestion de la taille de l'élément
@@ -820,24 +959,20 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
     styleProps.animationFillMode = animation.fillMode || 'both';
     styleProps.animationPlayState = animation.playState || 'running';
   }
-  // Traitement des propriétés de style
   Object.keys(props).forEach(property => {
     if (property !== 'style' && (isStyleProp(property) || extraKeys.has(property))) {
       const value = props[property];
       if (typeof value === 'object' && value !== null) {
-        // Pour les propriétés comme 'on', 'media'
         if (property === 'on') {
-          // Pseudo-sélecteurs
           for (const event in value) {
             if (!styleProps[`&:${event}`]) {
               styleProps[`&:${event}`] = {};
             }
-            const nestedResult = applyStyle(value[event], getColor, mediaQueries, devices);
+            const nestedResult = computeStyleProps(value[event], getColor, mediaQueries, devices);
             Object.assign(styleProps[`&:${event}`], nestedResult.styleProps);
             keyframesList.push(...(nestedResult.keyframes || []));
           }
         } else if (property === 'media') {
-          // Media queries
           for (const screenOrDevices in value) {
             const mediaValue = value[screenOrDevices];
             if (mediaQueries[screenOrDevices]) {
@@ -845,7 +980,7 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
               if (!styleProps[mediaQuery]) {
                 styleProps[mediaQuery] = {};
               }
-              const nestedResult = applyStyle(mediaValue, getColor, mediaQueries, devices);
+              const nestedResult = computeStyleProps(mediaValue, getColor, mediaQueries, devices);
               Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
               keyframesList.push(...(nestedResult.keyframes || []));
             } else if (devices[screenOrDevices]) {
@@ -856,7 +991,7 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
                   if (!styleProps[mediaQuery]) {
                     styleProps[mediaQuery] = {};
                   }
-                  const nestedResult = applyStyle(mediaValue, getColor, mediaQueries, devices);
+                  const nestedResult = computeStyleProps(mediaValue, getColor, mediaQueries, devices);
                   Object.assign(styleProps[mediaQuery], nestedResult.styleProps);
                   keyframesList.push(...(nestedResult.keyframes || []));
                 }
@@ -864,13 +999,19 @@ const applyStyle = (props, getColor, mediaQueries, devices) => {
             }
           }
         } else {
-          // Styles imbriqués
-          const nestedResult = applyStyle(value, getColor, mediaQueries, devices);
+          // For other nested styles, exclude 'on' and 'media'
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          const {
+            on,
+            media,
+            ...nestedProps
+          } = value;
+          const nestedResult = computeStyleProps(nestedProps, getColor, mediaQueries, devices);
           styleProps[property] = nestedResult.styleProps;
           keyframesList.push(...(nestedResult.keyframes || []));
         }
       } else {
-        // Propriété de style simple
+        // Simple style property
         styleProps[property] = value;
       }
     }