@udixio/ui-react 1.3.0 → 1.5.0

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

@@ -0,0 +1,6 @@
+import { ConfigInterface } from '@udixio/theme';
+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

@@ -0,0 +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,4BAG3B;IACD,MAAM,EAAE,eAAe,CAAC;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,mDA2FA,CAAC"}

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

@@ -2,4 +2,5 @@ export * from './ripple';
 export * from './custom-scroll';
 export * from './smooth-scroll.effect';
 export * from './SyncedFixedWrapper';
+export * from './ThemeProvider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/effects/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@udixio/ui-react",
-  "version": "1.3.0",
+  "version": "1.5.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "throttle-debounce": "^5.0.2",
-    "clsx": "^2.1.1",
+    "clsx": "^1.1.1",
     "react-textarea-autosize": "^8.5.9",
     "motion": "^12.23.0",
     "tailwind-merge": "^3.3.1",
@@ -35,8 +35,8 @@
   "devDependencies": {
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "@udixio/theme": "1.1.0",
-    "@udixio/tailwind": "1.3.0"
+    "@udixio/theme": "1.2.0",
+    "@udixio/tailwind": "1.5.0"
   },
   "repository": {
     "type": "git",

package/src/lib/effects/ThemeProvider.tsx

@@ -0,0 +1,107 @@
+import { type ConfigInterface, loader } from '@udixio/theme';
+import { useEffect, useRef, useState } from 'react';
+import { TailwindPlugin } from '@udixio/tailwind';
+
+function isValidHexColor(hexColorString: string) {
+  const regex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  return regex.test(hexColorString);
+}
+
+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(() => {
+    // 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;
+    }
+
+    setError(null);
+
+    try {
+      // Mesure du temps de chargement de l'API
+      const api = await loader(config);
+      api.themes.update({
+        sourceColorHex: sourceColor,
+      });
+      await api.load();
+
+      const generatedCss = api.plugins
+        .getPlugin(TailwindPlugin)
+        .getInstance().outputCss;
+
+      if (generatedCss) {
+        setOutputCss(generatedCss);
+      }
+    } catch (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);
+      }
+    };
+  }, []);
+
+  if (error) {
+    return null;
+  }
+
+  if (!outputCss) {
+    console.error('ThemeProvider null');
+    return null;
+  }
+
+  return <style dangerouslySetInnerHTML={{ __html: outputCss }} />;
+};

package/src/lib/effects/index.ts

@@ -2,3 +2,4 @@ export * from './ripple';
 export * from './custom-scroll';
 export * from './smooth-scroll.effect';
 export * from './SyncedFixedWrapper';
+export * from './ThemeProvider';

package/src/udixio.css

@@ -1,4 +1,3 @@
-
 @plugin "@udixio/tailwind" {
   colorKeys: surface, surface-dim, surface-bright, surface-container-lowest, surface-container-low, surface-container, surface-container-high, surface-container-highest, on-surface, on-surface-variant, outline, outline-variant, inverse-surface, inverse-on-surface, primary, primary-dim, on-primary, primary-container, on-primary-container, primary-fixed, primary-fixed-dim, on-primary-fixed, on-primary-fixed-variant, inverse-primary, secondary, secondary-dim, on-secondary, secondary-container, on-secondary-container, secondary-fixed, secondary-fixed-dim, on-secondary-fixed, on-secondary-fixed-variant, tertiary, tertiary-dim, on-tertiary, tertiary-container, on-tertiary-container, tertiary-fixed, tertiary-fixed-dim, on-tertiary-fixed, on-tertiary-fixed-variant, error, error-dim, on-error, error-container, on-error-container, surface-variant, surface-tint, background, on-background;
   fontStyles: display-large fontWeight[400] fontSize[3.5625] lineHeight[4] letterSpacing[-0.015625] fontFamily[expressive], display-medium fontWeight[400] fontSize[2.8125] lineHeight[3.25] fontFamily[expressive], display-small fontWeight[400] fontSize[2.25] lineHeight[2.75] fontFamily[expressive], headline-large fontWeight[400] fontSize[2] lineHeight[2.5] fontFamily[expressive], headline-medium fontWeight[400] fontSize[1.75] lineHeight[2.25] fontFamily[expressive], headline-small fontWeight[400] fontSize[1.5] lineHeight[2] fontFamily[expressive], title-large fontWeight[400] fontSize[1.375] lineHeight[1.75] fontFamily[neutral], title-medium fontWeight[500] fontSize[1] lineHeight[1.5] fontFamily[neutral] letterSpacing[0.009375], title-small fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-large fontWeight[500] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.00625], label-medium fontWeight[500] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], label-small fontWeight[500] fontSize[0.6875] lineHeight[1] fontFamily[neutral] letterSpacing[0.03125], body-large fontWeight[400] fontSize[1] lineHeight[1.5625] fontFamily[neutral] letterSpacing[0.03125], body-medium fontWeight[400] fontSize[0.875] lineHeight[1.25] fontFamily[neutral] letterSpacing[0.015625], body-small fontWeight[400] fontSize[0.75] lineHeight[1] fontFamily[neutral] letterSpacing[0.025];
@@ -114,7 +113,8 @@
   --color-on-background: #eae3ef;
   }
 }
+
 @theme {
   --font-expressive: "Roboto", "sans-serif";
   --font-neutral: "Roboto", "sans-serif";
-}
+}

package/vite.config.ts

@@ -3,6 +3,7 @@ import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
 import dts from 'vite-plugin-dts';
 import * as path from 'path';
+import { visualizer } from 'rollup-plugin-visualizer';
 
 const getUdixioVite = async () => {
   // @ts-expect-error - NX_GRAPH_CREATION is a global variable set by Nx
@@ -10,7 +11,7 @@ const getUdixioVite = async () => {
     return;
   } else {
     const dynamicPath = '@udixio/theme';
-    return (await import(dynamicPath)).udixioVite();
+    return (await import(dynamicPath)).vitePlugin;
   }
 };
 
@@ -24,6 +25,12 @@ export default defineConfig(async () => ({
       entryRoot: 'src',
       tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
     }),
+    visualizer({
+      filename: '../../stats/ui-react.html',
+      open: false,
+      gzipSize: true,
+      brotliSize: true,
+    }),
   ],
   // Uncomment this if you are using workers.
   // worker: {
@@ -39,6 +46,7 @@ export default defineConfig(async () => ({
       transformMixedEsModules: true,
     },
     lib: {
+      ssr: true,
       // Could also be a dictionary or array of multiple entry points.
       entry: 'src/index.ts',
       name: '@udixio/ui-react',
@@ -58,8 +66,9 @@ export default defineConfig(async () => ({
         'react-textarea-autosize',
         'tailwind-merge',
         'motion',
-        'motion/react',
         '@udixio/theme',
+        '@udixio/tailwind',
+        'motion/react',
       ],
     },
   },