@udixio/ui-react 1.4.0 → 1.5.0

package/dist/lib/effects/ThemeProvider.d.ts

@@ -1,5 +1,6 @@
 import { ConfigInterface } from '@udixio/theme';
-export declare const ThemeProvider: ({ config }: {
+export declare const ThemeProvider: ({ config, throttleDelay, }: {
     config: ConfigInterface;
+    throttleDelay?: number;
 }) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=ThemeProvider.d.ts.map

package/dist/lib/effects/ThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,eAAe,CAAC;AAS7D,eAAO,MAAM,aAAa,GAAI,YAAY;IAAE,MAAM,EAAE,eAAe,CAAA;CAAE,mDAgDpE,CAAC"}
+{"version":3,"file":"ThemeProvider.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/ThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,eAAe,EAAU,MAAM,eAAe,CAAC;AAS7D,eAAO,MAAM,aAAa,GAAI,4BAG3B;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,mDA2FA,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -36,7 +36,7 @@
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "@udixio/theme": "1.2.0",
-    "@udixio/tailwind": "1.4.0"
+    "@udixio/tailwind": "1.5.0"
   },
   "repository": {
     "type": "git",

package/src/lib/effects/ThemeProvider.tsx

@@ -1,5 +1,5 @@
 import { type ConfigInterface, loader } from '@udixio/theme';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import { TailwindPlugin } from '@udixio/tailwind';
 
 function isValidHexColor(hexColorString: string) {
@@ -7,52 +7,101 @@ function isValidHexColor(hexColorString: string) {
   return regex.test(hexColorString);
 }
 
-export const ThemeProvider = ({ config }: { config: ConfigInterface }) => {
+export const ThemeProvider = ({
+  config,
+  throttleDelay = 100, // Délai par défaut de 300ms
+}: {
+  config: ConfigInterface;
+  throttleDelay?: number;
+}) => {
   const [error, setError] = useState<string | null>(null);
-
   const [outputCss, setOutputCss] = useState<null | string>(null);
 
+  // Refs pour gérer le throttling
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+  const lastSourceColorRef = useRef<string>(config.sourceColor);
+  const isInitialLoadRef = useRef<boolean>(true);
+
   useEffect(() => {
-    if (!isValidHexColor(config.sourceColor)) {
+    // Si c'est le premier chargement, on applique immédiatement
+    if (isInitialLoadRef.current) {
+      isInitialLoadRef.current = false;
+      lastSourceColorRef.current = config.sourceColor;
+      applyThemeChange(config.sourceColor);
+      return;
+    }
+
+    // Si la couleur n'a pas changé, on ne fait rien
+    if (config.sourceColor === lastSourceColorRef.current) {
+      return;
+    }
+
+    // Annuler le timeout précédent s'il existe
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    // Programmer un nouveau changement de thème avec un délai
+    timeoutRef.current = setTimeout(() => {
+      lastSourceColorRef.current = config.sourceColor;
+      applyThemeChange(config.sourceColor);
+      timeoutRef.current = null;
+    }, throttleDelay);
+
+    // Cleanup function pour annuler le timeout si le composant se démonte
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
+    };
+  }, [config.sourceColor, throttleDelay]);
+
+  const applyThemeChange = async (sourceColor: string) => {
+    if (!isValidHexColor(sourceColor)) {
       setError('Invalid hex color');
       return;
     }
 
-    const initTheme = async () => {
-      try {
-        const api = await loader(config);
+    setError(null);
 
-        api.themes.update({
-          sourceColorHex: config.sourceColor,
-        });
+    try {
+      // Mesure du temps de chargement de l'API
+      const api = await loader(config);
+      api.themes.update({
+        sourceColorHex: sourceColor,
+      });
+      await api.load();
 
-        await api.load();
+      const generatedCss = api.plugins
+        .getPlugin(TailwindPlugin)
+        .getInstance().outputCss;
 
-        setOutputCss(
-          api.plugins.getPlugin(TailwindPlugin).getInstance().outputCss,
-        );
+      if (generatedCss) {
+        setOutputCss(generatedCss);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Theme loading failed');
+    }
+  };
 
-        console.log('Theme loaded');
-      } catch (err) {
-        console.error('Theme loading failed:', err);
-        setError(err instanceof Error ? err.message : 'Theme loading failed');
+  // Cleanup lors du démontage du composant
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
       }
     };
+  }, []);
 
-    initTheme();
-  }, [config.sourceColor]);
   if (error) {
-    console.error('ThemeProvider error:', error);
     return null;
   }
 
   if (!outputCss) {
+    console.error('ThemeProvider null');
     return null;
   }
-  return (
-    <style
-      type="text/tailwindcss"
-      dangerouslySetInnerHTML={{ __html: outputCss }}
-    />
-  );
+
+  return <style dangerouslySetInnerHTML={{ __html: outputCss }} />;
 };