@udixio/ui-react 1.6.3 → 2.0.0

package/src/lib/effects/AnimateOnScroll.tsx

@@ -0,0 +1,353 @@
+import { ReactNode, useEffect, useMemo, useRef } from 'react';
+
+/**
+ * AnimateOnScroll
+ *
+ * Manages triggers for animations:
+ * - ScrollDriven animations: use native CSS if supported; otherwise import JS fallback per element set.
+ * - Other entry/exit animations: handled via IntersectionObserver in JS.
+ */
+
+export type AnimateOnScrollProps = {
+  prefix?: string;
+  children?: ReactNode;
+  once?: boolean; // if true in JS modes, animate only first time per element
+};
+
+function supportsScrollTimeline(): boolean {
+  if (typeof window === `undefined`) return false;
+  try {
+    // @ts-ignore - CSS may not exist in TS lib
+    if (window.CSS && typeof window.CSS.supports === `function`) {
+      // @ts-ignore
+      return (
+        CSS.supports(`animation-timeline: view()`) ||
+        CSS.supports(`animation-timeline: scroll()`) ||
+        // some older implementations used view-timeline-name
+        CSS.supports(`view-timeline-name: --a`)
+      );
+    }
+  } catch {}
+  return false;
+}
+
+function prefersReducedMotion(): boolean {
+  if (typeof window === `undefined` || !(`matchMedia` in window)) return false;
+  return window.matchMedia(`(prefers-reduced-motion: reduce)`).matches;
+}
+
+function isScrollDrivenCandidate(el: Element): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  const cls = el.classList;
+
+  return Array.from(cls).some(
+    (className) =>
+      className.startsWith('anim-') && className.includes('scroll'),
+  );
+}
+function isJsObserverCandidate(el: Element): boolean {
+  if (!(el instanceof HTMLElement)) return false;
+  const cls = el.classList;
+  const hasAnimation = Array.from(cls).some((className) =>
+    className.startsWith('anim-'),
+  );
+  if (!hasAnimation) return false;
+  // Not scroll-driven
+  return !isScrollDrivenCandidate(el);
+}
+
+// Collect `--anim-names-*` CSS custom properties on the element and update:
+// - animations-names: comma-separated list of suffixes (after --anim-names-)
+// - will-change: union of comma-separated values from each variable
+function updateAnimNamesAndWillChange(el: HTMLElement, prefix: string): void {
+  if (typeof window === 'undefined') return;
+  try {
+    const cs = getComputedStyle(el);
+
+    const animationNames = new Set<string>();
+
+    // Replace the classList loop with this:
+    Array.from(el.classList).forEach((className) => {
+      if (className.startsWith('anim')) {
+        const cssVarName = `--anim-name-${className.replaceAll(/-in|-out|-scroll/g, '').replace(prefix + '-', '')}`;
+        const animationName = cs.getPropertyValue(cssVarName).trim();
+        if (animationName) {
+          animationNames.add(animationName.replace(prefix + '-', ''));
+        }
+      }
+    });
+
+    if (animationNames.size > 0) {
+      const value = Array.from(animationNames)
+        .map((name) => {
+          return `var(--anim-name-${name})`;
+        })
+        .join(', ');
+      const changes = Array.from(animationNames)
+        .map((name) => {
+          return `var(--anim-dependencies-${name})`;
+        })
+        .join(', ');
+
+      el.style.animationName = value;
+      el.style.willChange = changes;
+    }
+  } catch {
+    // no-op
+  }
+}
+
+function hydrateElement(el: HTMLElement, prefix: string): void {
+  if (!isScrollDrivenCandidate(el)) return;
+
+  // Map data-anim-scroll to correct axis class if provided
+  if (el.hasAttribute(`data-${prefix}-scroll`)) {
+    const raw = (el.getAttribute(`data-${prefix}-scroll`) || ``)
+      .trim()
+      .toLowerCase();
+    const axis =
+      raw === `x` || raw === `inline`
+        ? `inline`
+        : raw === `y` || raw === `block`
+          ? `block`
+          : `auto`;
+    const hasAny =
+      el.classList.contains(`${prefix}-timeline`) ||
+      el.classList.contains(`${prefix}-timeline-inline`) ||
+      el.classList.contains(`${prefix}-timeline-block`) ||
+      el.classList.contains(`${prefix}-timeline-x`) ||
+      el.classList.contains(`${prefix}-timeline-y`);
+    if (!hasAny) {
+      if (axis === `inline`) el.classList.add(`${prefix}-timeline-inline`);
+      else if (axis === `block`) el.classList.add(`${prefix}-timeline-block`);
+      else el.classList.add(`${prefix}-scroll`);
+    }
+  }
+
+  // Offsets via data-anim-start / data-anim-end (accepts tokens like "entry 20%", "cover 50%", etc.)
+  const start = el.getAttribute(`data-${prefix}-start`);
+  if (start) el.style.setProperty(`--${prefix}-range-start`, start);
+  const end = el.getAttribute(`data-${prefix}-end`);
+  if (end) el.style.setProperty(`--${prefix}-range-end`, end);
+
+  // Ensure play state is running unless explicitly paused
+  const explicitlyPaused =
+    el.hasAttribute(`data-${prefix}-paused`) ||
+    el.classList.contains(`${prefix}-paused`);
+  const alreadyRunning =
+    el.hasAttribute(`data-${prefix}-run`) ||
+    el.classList.contains(`${prefix}-run`);
+  if (!explicitlyPaused && !alreadyRunning) {
+    el.setAttribute(`data-${prefix}-run`, ``);
+  }
+
+  // Update animations-names and will-change derived from --anim-names-*
+  updateAnimNamesAndWillChange(el, prefix);
+}
+
+const scrollDrivenSelectorParts = (prefix: string) => [
+  `.${prefix}-timeline`,
+  `.${prefix}-timeline-x`,
+  `.${prefix}-timeline-y`,
+  `.${prefix}-timeline-inline`,
+  `.${prefix}-timeline-block`,
+  `[data-${prefix}-scroll]`,
+];
+
+function queryScrollDrivenCandidates(
+  root: ParentNode = document,
+  prefix: string,
+): HTMLElement[] {
+  // Select any elements that have an animation class and are marked as scroll-driven
+  const animated = Array.from(
+    root.querySelectorAll<HTMLElement>(`[class*="${prefix}-"]`),
+  );
+  return animated.filter((el) => isScrollDrivenCandidate(el));
+}
+
+function queryJsObserverCandidates(
+  root: ParentNode = document,
+  prefix: string,
+): HTMLElement[] {
+  // All anim-in/out that are NOT scroll-driven
+  const animated = Array.from(
+    root.querySelectorAll<HTMLElement>(`[class*="anim-"]`),
+  );
+
+  return animated.filter((el) => !isScrollDrivenCandidate(el));
+}
+
+export const AnimateOnScroll = ({
+  prefix = 'anim',
+  children,
+  once = true,
+}: AnimateOnScrollProps) => {
+  const reduced = useMemo(prefersReducedMotion, []);
+  const cssSupported = useMemo(() => supportsScrollTimeline(), []);
+  const moRef = useRef<MutationObserver | null>(null);
+  const ioRef = useRef<IntersectionObserver | null>(null);
+  const observedSetRef = useRef<WeakSet<Element> | null>(null);
+
+  useEffect(() => {
+    if (reduced) return; // respect reduced motion
+
+    // Setup JS observers for non-scroll-driven animations
+    const observed = new WeakSet<Element>();
+    observedSetRef.current = observed;
+
+    const io = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          const el = entry.target as HTMLElement;
+
+          if (!isJsObserverCandidate(el)) {
+            continue;
+          }
+
+          const cls = el.classList;
+          const isOut = cls.contains(`${prefix}-out`);
+          const isIn = !isOut;
+
+          if (isIn && entry.isIntersecting) {
+            el.setAttribute(`data-${prefix}-in-run`, ``);
+            if (once) io.unobserve(el);
+          } else if (isOut && !entry.isIntersecting) {
+            // Play exit when leaving viewport
+            el.setAttribute(`data-${prefix}-out-run`, ``);
+            if (once) io.unobserve(el);
+          } else {
+            // Pause when not in the triggering state
+            // Do not aggressively remove attribute if once=true and already ran
+            if (!once) {
+              // Store current animation name
+              const currentAnimationName = el.style.animationName;
+              // Remove animation name
+              el.style.animationName = 'none';
+              el.removeAttribute(`data-${prefix}-in-run`);
+              el.removeAttribute(`data-${prefix}-out-run`);
+              void el.offsetWidth; // reflow
+              // Re-apply animation name
+              el.style.animationName = currentAnimationName;
+            }
+          }
+        }
+      },
+      { threshold: [0, 0.2] },
+    );
+    ioRef.current = io;
+
+    const observeJsCandidates = (root?: ParentNode) => {
+      const candidates = queryJsObserverCandidates(root || document, prefix);
+      for (const el of candidates) {
+        if (observed.has(el)) continue;
+        observed.add(el);
+        // Update animations meta for non-scroll-driven animated elements
+        updateAnimNamesAndWillChange(el, prefix);
+        io.observe(el);
+      }
+    };
+
+    // Initial observe
+    observeJsCandidates();
+
+    // Now handle scroll-driven branch per support state
+    let cleanupScrollDriven: void | (() => void);
+
+    if (cssSupported) {
+      let rafId: number | null = null;
+      const schedule = () => {
+        if (rafId != null) return;
+        rafId = requestAnimationFrame(() => {
+          rafId = null;
+          const els = queryScrollDrivenCandidates(undefined, prefix);
+          for (const el of els) hydrateElement(el, prefix);
+        });
+      };
+
+      // Initial hydration
+      schedule();
+
+      // Observe DOM changes to re-hydrate and attach IO to new js candidates
+      const mo = new MutationObserver((muts) => {
+        for (const m of muts) {
+          if (m.type === `attributes`) {
+            const t = m.target;
+            if (t instanceof HTMLElement) {
+              hydrateElement(t as HTMLElement, prefix);
+              // If an element lost/gained scroll-driven marker, ensure it`s observed appropriately
+              if (isJsObserverCandidate(t)) {
+                if (!observed.has(t)) {
+                  observed.add(t);
+                  io.observe(t);
+                }
+              }
+              // Always update animations meta on attribute changes that may affect styles
+              updateAnimNamesAndWillChange(t as HTMLElement, prefix);
+            }
+          } else if (m.type === `childList`) {
+            // new nodes
+            if (m.addedNodes && m.addedNodes.length) {
+              for (const node of Array.from(m.addedNodes)) {
+                if (node instanceof HTMLElement) {
+                  // hydrate scroll-driven in subtree
+                  const sds = queryScrollDrivenCandidates(node, prefix);
+                  for (const el of sds) hydrateElement(el, prefix);
+                  // observe js candidates in subtree
+                  observeJsCandidates(node);
+                }
+              }
+            }
+          }
+        }
+      });
+      mo.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: [
+          `class`,
+          `data-${prefix}-scroll`,
+          `data-${prefix}-start`,
+          `data-${prefix}-end`,
+          `data-${prefix}-paused`,
+          `data-${prefix}-run`,
+        ],
+      });
+      moRef.current = mo;
+
+      cleanupScrollDriven = () => {
+        if (rafId != null) cancelAnimationFrame(rafId);
+        mo.disconnect();
+        moRef.current = null;
+      };
+    } else {
+      // No CSS support: dynamically import the fallback ONLY if there are scroll-driven candidates
+      let stop: void | (() => void);
+      const existing = queryScrollDrivenCandidates(undefined, prefix);
+      // Update animations meta for scroll-driven candidates even without native support
+      for (const el of existing) updateAnimNamesAndWillChange(el, prefix);
+      if (existing.length > 0) {
+        import(`./scrollDriven`).then((m) => {
+          stop = m.initScrollViewFallback({ once });
+        });
+      }
+      cleanupScrollDriven = () => {
+        if (typeof stop === `function`) (stop as () => void)();
+      };
+    }
+
+    return () => {
+      // cleanup both branches
+      if (cleanupScrollDriven) cleanupScrollDriven();
+      // IO cleanup
+      if (ioRef.current) {
+        ioRef.current.disconnect();
+        ioRef.current = null;
+      }
+      observedSetRef.current = null;
+    };
+  }, [cssSupported, reduced, once]);
+
+  // Always return only children; no extra DOM
+  return <>{children}</>;
+};

package/src/lib/effects/ThemeProvider.tsx

@@ -1,4 +1,9 @@
-import { type API, type ConfigInterface, loader } from '@udixio/theme';
+import {
+  type API,
+  type ConfigInterface,
+  ContextOptions,
+  loader,
+} from '@udixio/theme';
 import { useEffect, useRef, useState } from 'react';
 import { TailwindPlugin } from '@udixio/tailwind';
 
@@ -11,78 +16,98 @@ export const ThemeProvider = ({
   config,
   throttleDelay = 100, // Délai par défaut de 300ms
   onLoad,
+  loadTheme = false,
 }: {
-  config: ConfigInterface;
+  config: Readonly<ConfigInterface>;
   onLoad?: (api: API) => void;
   throttleDelay?: number;
+  loadTheme?: boolean;
 }) => {
-  const [outputCss, setOutputCss] = useState<null | string>(null);
+  const [themeApi, setThemeApi] = useState<API | null>(null);
 
-  // Refs pour gérer le throttling
+  // Charger l'API du thème une fois au montage
+  useEffect(() => {
+    (async () => {
+      const api = await loader(config, loadTheme);
+      setThemeApi(api);
+    })();
+  }, []);
+
+  const [outputCss, setOutputCss] = useState<string | null>(null);
+
+  // Throttle avec exécution en tête (leading) et en fin (trailing)
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
-  const lastSourceColorRef = useRef<string>(config.sourceColor);
-  const isInitialLoadRef = useRef<boolean>(true);
+  const lastExecTimeRef = useRef<number>(0);
+  const lastArgsRef = useRef<Partial<ContextOptions> | null>(null);
 
   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;
-    }
+    if (!themeApi) return; // Attendre que l'API soit prête
 
-    // Si la couleur n'a pas changé, on ne fait rien
-    if (config.sourceColor === lastSourceColorRef.current) {
-      return;
-    }
+    const ctx: Partial<ContextOptions> = {
+      ...config,
+      // Assurer la compatibilité avec l'API qui attend sourceColorHex
+      sourceColor: config.sourceColor,
+    };
 
-    // Annuler le timeout précédent s'il existe
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
+    const now = Date.now();
+    const timeSinceLast = now - lastExecTimeRef.current;
 
-    // Programmer un nouveau changement de thème avec un délai
-    timeoutRef.current = setTimeout(async () => {
-      lastSourceColorRef.current = config.sourceColor;
-      await applyThemeChange(config.sourceColor);
-      timeoutRef.current = null;
-    }, throttleDelay);
+    const invoke = async (args: Partial<ContextOptions>) => {
+      // applique et notifie
+      await applyThemeChange(args);
+    };
 
-    // Cleanup function pour annuler le timeout si le composant se démonte
-    return () => {
+    // Leading: si délai écoulé ou jamais exécuté, exécuter tout de suite
+    if (lastExecTimeRef.current === 0 || timeSinceLast >= throttleDelay) {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
         timeoutRef.current = null;
       }
-    };
-  }, [config.sourceColor, throttleDelay]);
-
-  const applyThemeChange = async (sourceColor: string) => {
-    if (!isValidHexColor(sourceColor)) {
-      throw new Error('Invalid hex color');
+      lastArgsRef.current = null;
+      lastExecTimeRef.current = now;
+      void invoke(ctx);
+    } else {
+      // Sinon, mémoriser la dernière requête et programmer une exécution en trailing
+      lastArgsRef.current = ctx;
+      if (!timeoutRef.current) {
+        const remaining = Math.max(0, throttleDelay - timeSinceLast);
+        timeoutRef.current = setTimeout(async () => {
+          timeoutRef.current = null;
+          const args = lastArgsRef.current;
+          lastArgsRef.current = null;
+          if (args) {
+            lastExecTimeRef.current = Date.now();
+            await invoke(args);
+          }
+        }, remaining);
+      }
     }
 
-    try {
-      // Mesure du temps de chargement de l'API
-      const api = await loader({
-        ...config,
-        sourceColor,
-      });
-      onLoad?.(api);
+    // Cleanup: au changement de dépendances, ne rien faire ici (on gère trailing)
+    return () => {};
+  }, [config, throttleDelay, themeApi]);
 
-      const generatedCss = api.plugins
-        .getPlugin(TailwindPlugin)
-        .getInstance().outputCss;
-
-      if (generatedCss) {
-        setOutputCss(generatedCss);
+  const applyThemeChange = async (ctx: Partial<ContextOptions>) => {
+    if (typeof ctx.sourceColor == 'string') {
+      if (!isValidHexColor(ctx.sourceColor)) {
+        throw new Error('Invalid hex color');
       }
-    } catch (err) {
-      throw new Error(
-        err instanceof Error ? err.message : 'Theme loading failed',
-      );
     }
+
+    if (!themeApi) {
+      // L'API n'est pas prête; ignorer silencieusement car l'effet principal attend themeApi
+      return;
+    }
+    themeApi.context.update(ctx);
+
+    await themeApi.load();
+
+    const outputCss = themeApi?.plugins
+      .getPlugin(TailwindPlugin)
+      .getInstance().outputCss;
+    setOutputCss(outputCss);
+
+    onLoad?.(themeApi);
   };
 
   // Cleanup lors du démontage du composant
@@ -90,6 +115,7 @@ export const ThemeProvider = ({
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
       }
     };
   }, []);

package/src/lib/effects/block-scroll.effect.tsx

@@ -0,0 +1,174 @@
+import React, { useEffect, useRef } from 'react';
+
+type ScrollIntent =
+  | {
+      type: 'intent';
+      source: 'wheel' | 'touch' | 'keyboard';
+      deltaX: number;
+      deltaY: number;
+      originalEvent: Event;
+    }
+  | {
+      type: 'scrollbar';
+      scrollTop: number;
+      scrollLeft: number;
+      maxScrollTop: number;
+      maxScrollLeft: number;
+    };
+
+type BlockScrollProps = {
+  onScroll?: (evt: ScrollIntent) => void; // log des intentions + du scroll via scrollbar
+  touch?: boolean;
+  el: HTMLElement;
+};
+
+export const BlockScroll: React.FC<BlockScrollProps> = ({
+  onScroll,
+  el,
+  touch = true,
+}) => {
+  const lastTouch = useRef<{ x: number; y: number } | null>(null);
+  const lastScrollTop = useRef<number>(0);
+  const lastScrollLeft = useRef<number>(0);
+
+  useEffect(() => {
+    if (!el) return;
+
+    // Initialize last known scroll positions to block scrollbar-based scrolling
+    lastScrollTop.current = el.scrollTop;
+    lastScrollLeft.current = el.scrollLeft;
+
+    const emitIntent = (payload: Extract<ScrollIntent, { type: 'intent' }>) => {
+      // Log the desired deltaY for every scroll attempt (wheel/touch/keyboard)
+      onScroll?.(payload);
+    };
+
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      emitIntent({
+        type: 'intent',
+        source: 'wheel',
+        deltaX: e.deltaX,
+        deltaY: e.deltaY,
+        originalEvent: e,
+      });
+    };
+
+    const onTouchStart = (e: TouchEvent) => {
+      if (!touch) return;
+      const t = e.touches[0];
+      if (t) lastTouch.current = { x: t.clientX, y: t.clientY };
+    };
+
+    const onTouchMove = (e: TouchEvent) => {
+      if (!touch) return;
+      const t = e.touches[0];
+      if (!t || !lastTouch.current) return;
+      e.preventDefault();
+      const dx = lastTouch.current.x - t.clientX;
+      const dy = lastTouch.current.y - t.clientY;
+      lastTouch.current = { x: t.clientX, y: t.clientY };
+      emitIntent({
+        type: 'intent',
+        source: 'touch',
+        deltaX: dx,
+        deltaY: dy,
+        originalEvent: e,
+      });
+    };
+
+    const onTouchEnd = () => {
+      if (!touch) return;
+      lastTouch.current = null;
+    };
+
+    const onKeyDown = (e: KeyboardEvent) => {
+      const line = 40;
+      const page = el.clientHeight * 0.9;
+      let dx = 0,
+        dy = 0;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          dy = line;
+          break;
+        case 'ArrowUp':
+          dy = -line;
+          break;
+        case 'ArrowRight':
+          dx = line;
+          break;
+        case 'ArrowLeft':
+          dx = -line;
+          break;
+        case 'PageDown':
+          dy = page;
+          break;
+        case 'PageUp':
+          dy = -page;
+          break;
+        case 'Home':
+          dy = Number.NEGATIVE_INFINITY;
+          break;
+        case 'End':
+          dy = Number.POSITIVE_INFINITY;
+          break;
+        case ' ':
+          dy = e.shiftKey ? -page : page;
+          break;
+        default:
+          return;
+      }
+      e.preventDefault();
+      emitIntent({
+        type: 'intent',
+        source: 'keyboard',
+        deltaX: dx,
+        deltaY: dy,
+        originalEvent: e,
+      });
+    };
+
+    // const onScrollEvent = (e) => {
+    //   const currentScrollTop = e.target.scrollTop;
+    //   const currentScrollLeft = e.target.scrollLeft;
+    //
+    //   // Check if scroll position changed from last known position
+    //   if (
+    //     currentScrollTop !== lastScrollTop.current ||
+    //     currentScrollLeft !== lastScrollLeft.current
+    //   ) {
+    //     console.log('onScrollllllllllll', e, document);
+    //     onScroll?.({
+    //       type: 'scrollbar',
+    //       scrollTop: currentScrollTop,
+    //       scrollLeft: currentScrollLeft,
+    //       maxScrollTop: e.target.scrollHeight - e.target.clientHeight,
+    //       maxScrollLeft: e.target.scrollWidth - e.target.clientWidth,
+    //     });
+    //   }
+    //
+    //   // Update last known scroll positions
+    //   lastScrollTop.current = currentScrollTop;
+    //   lastScrollLeft.current = currentScrollLeft;
+    //
+    //   document.querySelector('html')?.scrollTo({ top: 0 });
+    // };
+
+    el.addEventListener('wheel', onWheel, { passive: false });
+    el.addEventListener('touchstart', onTouchStart, { passive: true });
+    el.addEventListener('touchmove', onTouchMove, { passive: false });
+    el.addEventListener('touchend', onTouchEnd, { passive: true });
+    el.addEventListener('keydown', onKeyDown);
+    // el.addEventListener('scroll', onScrollEvent, { passive: true });
+
+    return () => {
+      el.removeEventListener('wheel', onWheel as EventListener);
+      el.removeEventListener('touchstart', onTouchStart as EventListener);
+      el.removeEventListener('touchmove', onTouchMove as EventListener);
+      el.removeEventListener('touchend', onTouchEnd as EventListener);
+      el.removeEventListener('keydown', onKeyDown as EventListener);
+      // el.removeEventListener('scroll', onScrollEvent as EventListener);
+    };
+  }, [onScroll]);
+};