@udixio/ui-react 2.10.13 → 2.10.14

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

@@ -1,407 +0,0 @@
-import { useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { motion, useMotionValueEvent, useScroll } from 'motion/react';
-import { CustomScrollInterface } from './custom-scroll.interface';
-import { customScrollStyle } from './custom-scroll.style';
-import { ReactProps } from '../../utils';
-
-// Throttle helper that guarantees execution of the latest call after the wait window (leading + trailing)
-function createScrollThrottle(
-  wait: number,
-  fn: (latestValue: number, scrollOrientation: 'x' | 'y') => void,
-) {
-  let lastInvokeTime = 0;
-  let trailingTimeout: ReturnType<typeof setTimeout> | null = null;
-  let lastArgs: { v: number; o: 'x' | 'y' } | null = null;
-
-  const invoke = (v: number, o: 'x' | 'y') => {
-    lastInvokeTime = Date.now();
-    fn(v, o);
-  };
-
-  return (v: number, o: 'x' | 'y') => {
-    const now = Date.now();
-    const remaining = wait - (now - lastInvokeTime);
-
-    if (remaining <= 0) {
-      if (trailingTimeout) {
-        clearTimeout(trailingTimeout);
-        trailingTimeout = null;
-      }
-      invoke(v, o);
-    } else {
-      // Save the latest call and schedule a trailing execution
-      lastArgs = { v, o };
-      if (!trailingTimeout) {
-        trailingTimeout = setTimeout(() => {
-          trailingTimeout = null;
-          const args = lastArgs;
-          lastArgs = null;
-          if (args) invoke(args.v, args.o);
-        }, remaining);
-      }
-    }
-  };
-}
-
-export const CustomScroll = ({
-  children,
-  orientation = 'vertical',
-  scrollSize,
-  onScroll,
-  className,
-  draggable = false,
-  throttleDuration = 75,
-  scroll,
-  setScroll,
-}: ReactProps<CustomScrollInterface>) => {
-  const ref = useRef<HTMLDivElement>(null);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  // Ajout de l'état pour la largeur et la hauteur
-  const [dimensions, setDimensions] = useState<{
-    width: number | null;
-    height: number | null;
-  }>({
-    width: null,
-    height: null,
-  });
-
-  // Utilisation de ResizeObserver pour surveiller la largeur ET la hauteur
-  useEffect(() => {
-    if (!ref.current) return;
-
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        if (entry.target === ref.current) {
-          setDimensions({
-            width: entry.contentRect.width,
-            height: entry.contentRect.height, // On observe aussi la hauteur maintenant
-          });
-        }
-      }
-    });
-
-    observer.observe(ref.current);
-
-    return () => {
-      observer.disconnect();
-    };
-  }, [ref]);
-
-  const contentScrollSize = useRef<{
-    height: number;
-    width: number;
-  } | null>(null);
-  const containerSize = useRef<{
-    height: number;
-    width: number;
-  } | null>(null);
-
-  const getContentScrollSize = () => {
-    const el = contentRef.current;
-    if (!el) {
-      return null;
-    }
-    return {
-      width: scrollSize ?? el.scrollWidth,
-      height: scrollSize ?? el.scrollHeight,
-    };
-  };
-  const getContainerSize = (): { width: number; height: number } | null => {
-    const el = ref.current;
-    if (!el) {
-      return null;
-    }
-    return {
-      width: el.clientWidth,
-      height: el.clientHeight, // Correction ici pour retourner la bonne hauteur
-    };
-  };
-
-  const { scrollYProgress, scrollXProgress } = useScroll({
-    container: ref,
-  });
-
-  const handleScrollThrottledRef = useRef<
-    ((latestValue: number, scrollOrientation: 'x' | 'y') => void) | null
-  >(null);
-
-  if (!handleScrollThrottledRef.current) {
-    handleScrollThrottledRef.current = createScrollThrottle(
-      throttleDuration,
-      (latestValue, scrollOrientation: 'x' | 'y') => {
-        if (
-          !containerSize.current ||
-          !contentScrollSize.current ||
-          !ref.current
-        )
-          return;
-
-        // Notify simple percentage if requested
-        if (scrollOrientation === (orientation === 'horizontal' ? 'x' : 'y')) {
-          setScroll?.(latestValue);
-        }
-
-        if (onScroll) {
-          if (orientation === 'horizontal' && scrollOrientation === 'x') {
-            onScroll({
-              scrollProgress: latestValue,
-              scroll:
-                latestValue *
-                (contentScrollSize.current.width - ref.current.clientWidth),
-              scrollTotal:
-                contentScrollSize.current.width - ref.current.clientWidth,
-              scrollVisible: containerSize.current.width,
-            });
-          }
-          if (orientation === 'vertical' && scrollOrientation === 'y') {
-            onScroll({
-              scrollProgress: latestValue,
-              scroll:
-                latestValue *
-                (contentScrollSize.current.height - ref.current.clientHeight),
-              scrollTotal:
-                contentScrollSize.current.height - ref.current.clientHeight,
-              scrollVisible: containerSize.current.height,
-            });
-          }
-        }
-      },
-    );
-  }
-
-  const handleScroll = (latestValue: number, scrollOrientation: 'x' | 'y') => {
-    if (handleScrollThrottledRef.current) {
-      handleScrollThrottledRef.current(latestValue, scrollOrientation);
-    }
-  };
-
-  // Gestion des changements pour la width ET la height
-  useEffect(() => {
-    if (dimensions.width) handleScroll(scrollXProgress.get(), 'x');
-    if (dimensions.height) handleScroll(scrollYProgress.get(), 'y'); // Nouvelle ligne : mise à jour pour la hauteur
-  }, [dimensions]);
-
-  // Apply controlled scroll percentage to DOM when provided
-  useEffect(() => {
-    const container = ref.current;
-    const content = contentRef.current;
-    if (!container || !content) return;
-    if (typeof scroll !== 'number') return;
-    const clamp = (v: number, min: number, max: number) => Math.min(max, Math.max(min, v));
-    if (orientation === 'horizontal') {
-      const total = Math.max(0, (scrollSize ?? content.scrollWidth) - container.clientWidth);
-      container.scrollLeft = clamp(scroll * total, 0, total);
-    } else {
-      const total = Math.max(0, (scrollSize ?? content.scrollHeight) - container.clientHeight);
-      container.scrollTop = clamp(scroll * total, 0, total);
-    }
-  }, [scroll, orientation, scrollSize]);
-
-  useMotionValueEvent(scrollXProgress, 'change', (latestValue) => {
-    handleScroll(latestValue, 'x');
-  });
-  useMotionValueEvent(scrollYProgress, 'change', (latestValue) => {
-    handleScroll(latestValue, 'y');
-  });
-
-  const [isInitialized, setIsInitialized] = useState(false);
-  useLayoutEffect(() => {
-    if (isInitialized) return;
-    if (!containerSize.current || !contentScrollSize.current || !onScroll)
-      return;
-
-    onScroll({
-      scrollProgress: 0,
-      scroll: 0,
-      scrollTotal:
-        orientation == 'vertical'
-          ? contentScrollSize.current.height
-          : contentScrollSize.current.width,
-      scrollVisible:
-        orientation == 'vertical'
-          ? containerSize.current.height
-          : containerSize.current.width,
-    });
-    setIsInitialized(true);
-  }, [containerSize, contentScrollSize, onScroll]);
-
-  contentScrollSize.current = getContentScrollSize();
-  containerSize.current = getContainerSize();
-  const [isDragging, setIsDragging] = useState(false);
-
-  const styles = customScrollStyle({
-    isDragging,
-    children,
-    className,
-    onScroll,
-    orientation,
-    scrollSize,
-    draggable,
-    throttleDuration,
-  });
-
-  const [startX, setStartX] = useState<number | null>(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
-
-  const handleDrag = (e: MouseEvent) => {
-    if (!draggable) return;
-    const container = ref.current;
-    if (!container) return;
-    if (startX == null) return;
-    const x = e.pageX - container.offsetLeft; // Déplace au fur et à mesure
-    const walk = (x - startX) * 1.5; // Sensibilité du drag
-    container.scrollLeft = scrollLeft - walk; // Mise à jour manuelle du défilement
-  };
-
-  const handleMouseDown = (e: any) => {
-    const container = ref.current;
-    if (!container) return;
-    setIsDragging(true);
-    setStartX(e.pageX - container.offsetLeft); // Détecte la position initiale
-    setScrollLeft(container.scrollLeft); // Stocke la position de défilement actuelle
-  };
-
-  const handleMouseMove = (e: any) => {
-    if (!isDragging) return;
-    e.preventDefault();
-    handleDrag(e);
-  };
-
-  const handleMouseUp = () => {
-    setIsDragging(false);
-  };
-
-  const handleMouseLeave = () => {
-    setIsDragging(false);
-  };
-  const handleDragStart = (e: any) => {
-    e.preventDefault();
-  };
-
-  const timerRef = useRef<NodeJS.Timeout | null>(null);
-
-  useEffect(() => {
-    // Nettoie le timer lorsqu'on quitte le composant (important pour éviter les fuites de mémoire)
-    return () => {
-      if (timerRef.current) {
-        clearTimeout(timerRef.current);
-      }
-    };
-  }, []);
-
-  // External controller: listen for bubbling custom event to set scroll programmatically
-  useEffect(() => {
-    const el = ref.current;
-    if (!el) return;
-    const handler = (ev: Event) => {
-      const detail = (ev as CustomEvent).detail as
-        | { progress?: number; scroll?: number; orientation?: 'horizontal' | 'vertical' }
-        | undefined;
-      const container = ref.current;
-      if (!container || !detail) return;
-      const ori = detail.orientation ?? orientation;
-      if (typeof detail.progress === 'number') {
-        if (ori === 'horizontal') {
-          const total = Math.max(
-            0,
-            (contentScrollSize.current?.width ?? 0) - container.clientWidth,
-          );
-          container.scrollLeft = Math.min(total, Math.max(0, detail.progress * total));
-        } else {
-          const total = Math.max(
-            0,
-            (contentScrollSize.current?.height ?? 0) - container.clientHeight,
-          );
-          container.scrollTop = Math.min(total, Math.max(0, detail.progress * total));
-        }
-      } else if (typeof detail.scroll === 'number') {
-        if (ori === 'horizontal') {
-          const total = Math.max(
-            0,
-            (contentScrollSize.current?.width ?? 0) - container.clientWidth,
-          );
-          container.scrollLeft = Math.min(total, Math.max(0, detail.scroll));
-        } else {
-          const total = Math.max(
-            0,
-            (contentScrollSize.current?.height ?? 0) - container.clientHeight,
-          );
-          container.scrollTop = Math.min(total, Math.max(0, detail.scroll));
-        }
-      }
-    };
-    el.addEventListener('udx:customScroll:set', handler as EventListener);
-    return () => {
-      el.removeEventListener('udx:customScroll:set', handler as EventListener);
-    };
-  }, [orientation]);
-
-  return (
-    <div
-      className={styles.customScroll}
-      ref={ref}
-      onMouseDown={handleMouseDown}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onMouseLeave={handleMouseLeave}
-      onDragStart={handleDragStart}
-      onScroll={(e) => {
-        if (!isDragging) {
-          // Met à jour l'état pour indiquer que le scroll est en cours
-          setStartX(null);
-          setIsDragging(true);
-          // Réinitialiser le timer (on le supprime si des scrolls successifs se produisent)
-          if (timerRef.current) {
-            clearTimeout(timerRef.current);
-          }
-
-          // Créer un nouveau timer : `isDrawing` sera désactivé après 1 seconde
-          timerRef.current = setTimeout(() => {
-            setIsDragging(false);
-          }, 1000); // 1000ms = 1 seconde
-        }
-      }}
-    >
-      <div
-        ref={contentRef}
-        style={
-          orientation === 'vertical'
-            ? { height: containerSize?.current?.height ?? '100%' }
-            : { width: containerSize?.current?.width ?? '100%' }
-        }
-        className={styles.track}
-      >
-        {children}
-      </div>
-
-      {containerSize.current && contentScrollSize.current && (
-        <>
-          {orientation === 'vertical' &&
-            contentScrollSize.current.height > containerSize.current.height && (
-              <motion.div
-                className={'flex-none'}
-                style={{
-                  height:
-                    contentScrollSize.current.height -
-                    containerSize.current.height,
-                }}
-              />
-            )}
-
-          {orientation === 'horizontal' &&
-            contentScrollSize.current.width > containerSize.current.width && (
-              <motion.div
-                className={'flex-none'}
-                style={{
-                  width:
-                    contentScrollSize.current.width -
-                    containerSize.current.width,
-                }}
-              />
-            )}
-        </>
-      )}
-    </div>
-  );
-};

package/src/lib/effects/custom-scroll/custom-scroll.interface.ts

@@ -1,29 +0,0 @@
-import { ReactNode } from 'react';
-
-type Props = {
-  children: ReactNode;
-  orientation?: 'vertical' | 'horizontal';
-  scrollSize?: number;
-  onScroll?: (args: {
-    scroll: number;
-    scrollProgress: number;
-    scrollTotal: number;
-    scrollVisible: number;
-  }) => void;
-  // Controlled percentage (0..1). If provided, the container will reflect this progress.
-  scroll?: number;
-  // Callback fired with the latest scroll percentage (0..1) when user scrolls/drags.
-  setScroll?: (progress: number) => void;
-  draggable?: boolean;
-  throttleDuration?: number;
-};
-type CustomScrollStates = {
-  isDragging: boolean;
-};
-
-export interface CustomScrollInterface {
-  type: 'div';
-  props: Props;
-  states: CustomScrollStates;
-  elements: ['customScroll', 'track'];
-}

package/src/lib/effects/custom-scroll/custom-scroll.style.ts

@@ -1,32 +0,0 @@
-import { CustomScrollInterface } from './custom-scroll.interface';
-import { classNames, defaultClassNames } from '../../utils';
-
-export const customScrollStyle = defaultClassNames<CustomScrollInterface>(
-  'customScroll',
-  ({ orientation, draggable, isDragging }) => ({
-    customScroll: classNames(
-      'flex h-full w-full',
-      draggable && [
-        '[&::-webkit-scrollbar-track]:rounded-full',
-        '[&::-webkit-scrollbar-track]:bg-transparent',
-        '[&::-webkit-scrollbar-thumb]:rounded-full',
-        {
-          '[&::-webkit-scrollbar-thumb]:bg-outline': isDragging,
-          '[&::-webkit-scrollbar-thumb]:bg-transparent': !isDragging,
-        },
-        { '[&::-webkit-scrollbar]:h-2': orientation === 'horizontal' },
-        { '[&::-webkit-scrollbar]:w-2': orientation === 'vertical' },
-      ],
-      {
-        'overflow-y-scroll flex-col': orientation === 'vertical',
-        'overflow-x-scroll  flex-row': orientation === 'horizontal',
-        'cursor-grab': draggable && !isDragging,
-        'cursor-grabbing': draggable && isDragging,
-      }
-    ),
-    track: classNames('overflow-hidden flex-none sticky', {
-      'left-0 h-full': orientation === 'horizontal',
-      'top-0 w-full': orientation === 'vertical',
-    }),
-  })
-);

package/src/lib/effects/custom-scroll/index.ts

@@ -1,3 +0,0 @@
-export * from './custom-scroll.effect';
-export * from './custom-scroll.style';
-export * from './custom-scroll.interface';

package/src/lib/effects/index.ts

@@ -1,7 +0,0 @@
-export * from './ripple';
-export * from './custom-scroll';
-export * from './smooth-scroll.effect';
-export * from './State';
-export * from './SyncedFixedWrapper';
-export * from './ThemeProvider';
-export * from './AnimateOnScroll';

package/src/lib/effects/ripple/RippleEffect.tsx

@@ -1,116 +0,0 @@
-import { AnimatePresence, motion } from 'motion/react';
-import React, { useEffect, useState } from 'react';
-
-interface RippleEffectProps {
-  triggerRef: React.RefObject<any> | React.ForwardedRef<any>;
-  colorName?: string;
-}
-
-const RippleEffect: React.FC<RippleEffectProps> = ({
-  colorName = 'on-surface',
-  triggerRef,
-}) => {
-  const ripple = {
-    initial: {
-      opacity: 1,
-      ['--r' as any]: '25%',
-    },
-    animate: {
-      opacity: 1,
-      ['--r' as any]: '100%',
-      transition: {
-        duration: 0.5,
-      },
-    },
-    exit: {
-      opacity: 0,
-      ['--r' as any]: '100%',
-      transition: {
-        duration: 0.3,
-      },
-    },
-  } as const;
-
-  const [isCompleted, setIsCompleted] = useState(true);
-  const [isActive, setIsActive] = useState(false);
-  const [coordinates, setCoordinates] = useState({ x: 50, y: 50 });
-
-  useEffect(() => {
-    if (isActive) {
-      // restart presence cycle to allow exit animation after mouse up
-      setIsCompleted(true);
-      setIsCompleted(false);
-    }
-  }, [isActive]);
-
-  useEffect(() => {
-    const element = triggerRef?.current;
-    if (element) {
-      element.addEventListener('mousedown', handleMouseDown);
-      element.addEventListener('mouseup', handleMouseUp);
-      element.addEventListener('mouseleave', handleMouseLeave);
-      return () => {
-        element.removeEventListener('mousedown', handleMouseDown);
-        element.removeEventListener('mouseup', handleMouseUp);
-        element.removeEventListener('mouseleave', handleMouseLeave);
-      };
-    }
-  }, [triggerRef]);
-
-  const handleMouseDown = (e: MouseEvent) => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const el = triggerRef?.current as Element & {
-      clientWidth: number;
-      clientHeight: number;
-    };
-    const rect = el.getBoundingClientRect();
-    setIsActive(true);
-    setCoordinates({
-      x: ((e.clientX - rect.left) / el.clientWidth) * 100,
-      y: ((e.clientY - rect.top) / el.clientHeight) * 100,
-    });
-  };
-  const handleMouseLeave = (_e: MouseEvent) => {
-    setIsActive(false);
-  };
-
-  const handleMouseUp = (_e: MouseEvent) => {
-    setIsActive(false);
-  };
-
-  // Build the background as a function of state.
-  // color token mixed to a subtle alpha
-  const colorMix = `color-mix(in srgb, var(--state-color,_var(--color-${colorName})) 10%, transparent)`;
-  // const colorMix = `red`;
-
-  const style: React.CSSProperties & Record<string, any> = {
-    position: 'absolute',
-    inset: 0,
-    width: '100%',
-    height: '100%',
-    // supply CSS variables for gradient center and radius
-    ['--x' as any]: coordinates.x + '%',
-    ['--y' as any]: coordinates.y + '%',
-    ['--r' as any]: '0%', // will be animated by motion
-    background: `radial-gradient(ellipse at var(--x) var(--y), ${colorMix} var(--r), transparent calc(var(--r) * 2))`,
-    pointerEvents: 'none',
-  };
-
-  return (
-    <AnimatePresence mode="wait">
-      {(isActive || (!isActive && !isCompleted)) && (
-        <motion.div
-          style={style}
-          variants={ripple}
-          initial="initial"
-          animate="animate"
-          exit="exit"
-          onAnimationComplete={() => setIsCompleted(true)}
-        />
-      )}
-    </AnimatePresence>
-  );
-};
-
-export default RippleEffect;

package/src/lib/effects/ripple/index.tsx

@@ -1 +0,0 @@
-export { default as RippleEffect } from './RippleEffect';