@udixio/ui-react 0.0.1 → 0.1.0

package/src/lib/components/ToolTip.tsx

@@ -0,0 +1,232 @@
+import {
+  cloneElement,
+  isValidElement,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { MotionProps } from '../utils';
+import { Button } from './Button';
+import { ToolTipInterface } from '../interfaces';
+import { toolStyle } from '../styles';
+import { v4 } from 'uuid';
+import { AnimatePresence, motion } from 'motion/react';
+import { SyncedFixedWrapper } from '../effects';
+
+export const ToolTip = ({
+  variant = 'plain',
+  buttons,
+  className,
+  children,
+  title,
+  text,
+  position,
+  targetRef,
+  ref,
+  trigger = ['hover', 'focus'],
+  ...props
+}: MotionProps<ToolTipInterface>) => {
+  if (!children && !targetRef) {
+    throw new Error('ToolTip must have a child or a targetRef');
+  }
+  if (!Array.isArray(trigger)) {
+    trigger = [trigger];
+  }
+
+  if (buttons && !Array.isArray(buttons)) {
+    buttons = [buttons];
+  }
+
+  const internalRef = useRef<HTMLElement | null>(null); // Ref interne au cas où targetRef est undefined
+  const resolvedRef = targetRef || internalRef; // Utilise targetRef si défini, sinon internalRef
+
+  const [currentToolTipId, setCurrentToolTipId] = useState<string | null>(null);
+  const [id] = useState(v4());
+  const [isVisible, setIsVisible] = useState(false);
+
+  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const handleUpdate = (event: CustomEvent) => {
+      setCurrentToolTipId(event.detail);
+    };
+
+    document.addEventListener('tooltip-update', handleUpdate as EventListener);
+    return () => {
+      document.removeEventListener(
+        'tooltip-update',
+        handleUpdate as EventListener
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (timeout.current) clearTimeout(timeout.current);
+
+    if (currentToolTipId) {
+      setIsVisible(currentToolTipId === id);
+    } else {
+      timeout.current = setTimeout(() => {
+        setIsVisible(false);
+      }, 1200);
+    }
+  }, [currentToolTipId, id]);
+
+  // Ajouter des gestionnaires sur l'élément cible (targetRef ou internalRef)
+
+  const handleMouseEnter = () => {
+    if (trigger.includes('hover')) {
+      const event = new CustomEvent('tooltip-update', { detail: id });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (trigger.includes('hover')) {
+      const event = new CustomEvent('tooltip-update', { detail: null });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleClick = () => {
+    if (trigger.includes('click')) {
+      const event = new CustomEvent('tooltip-update', {
+        detail: isVisible ? null : id,
+      });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleFocus = () => {
+    if (trigger.includes('focus')) {
+      const event = new CustomEvent('tooltip-update', { detail: id });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleBlur = () => {
+    if (trigger.includes('focus')) {
+      const event = new CustomEvent('tooltip-update', { detail: null });
+      document.dispatchEvent(event);
+    }
+  };
+
+  useEffect(() => {
+    if (resolvedRef?.current) {
+      const targetElement = resolvedRef.current;
+
+      targetElement.addEventListener('mouseenter', handleMouseEnter);
+      targetElement.addEventListener('mouseleave', handleMouseLeave);
+      targetElement.addEventListener('click', handleClick);
+      targetElement.addEventListener('focus', handleFocus);
+      targetElement.addEventListener('blur', handleBlur);
+
+      // Nettoyage au démontage
+      return () => {
+        targetElement.removeEventListener('mouseenter', handleMouseEnter);
+        targetElement.removeEventListener('mouseleave', handleMouseLeave);
+        targetElement.removeEventListener('click', handleClick);
+        targetElement.removeEventListener('focus', handleFocus);
+        targetElement.removeEventListener('blur', handleBlur);
+      };
+    }
+  }, [resolvedRef, trigger, id, isVisible]);
+
+  // Si targetRef est undefined, on applique la réf au premier enfant
+  const enhancedChildren =
+    !targetRef && isValidElement(children)
+      ? cloneElement(children, { ref: internalRef } as any)
+      : children;
+
+  if (!position && typeof window !== 'undefined') {
+    if (resolvedRef?.current && !position) {
+      const rect = resolvedRef.current.getBoundingClientRect();
+
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      const x = rect.left / viewportWidth; // X entre 0 et 1
+      const y = rect.top / viewportHeight; // Y entre 0 et 1
+
+      if (variant === 'plain') {
+        if (x < 1 / 3) {
+          position = 'right';
+        } else if (x > 2 / 3) {
+          position = 'left';
+        } else {
+          position = y > 0.5 ? 'top' : 'bottom';
+        }
+      } else {
+        if (x < 1 / 2 && y < 1 / 2) {
+          position = 'bottom-right';
+        } else if (x > 1 / 2 && y < 1 / 2) {
+          position = 'bottom-left';
+        } else if (x > 1 / 2 && y > 1 / 2) {
+          position = 'top-left';
+        } else if (x < 1 / 2 && y > 1 / 2) {
+          position = 'top-right';
+        }
+      }
+    }
+  }
+
+  const styles = toolStyle({
+    variant,
+    buttons,
+    className,
+    title,
+    text,
+    position,
+    trigger,
+    targetRef: targetRef as any,
+    children: children as any,
+  });
+
+  return (
+    <>
+      {enhancedChildren}
+      <AnimatePresence>
+        {isVisible && (
+          <SyncedFixedWrapper targetRef={resolvedRef}>
+            <motion.div
+              initial={{ opacity: currentToolTipId ? 1 : 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: currentToolTipId ? 0 : 0.3 }}
+              exit={{ opacity: currentToolTipId ? 1 : 0 }}
+              className={styles.toolTip}
+              {...props}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <motion.div
+                className={styles.container}
+                layoutId={'tool-tip'}
+                transition={{
+                  type: 'spring',
+                  stiffness: 200,
+                  damping: 20,
+                }}
+              >
+                {title && <div className={styles.subHead}>{title}</div>}
+                <div className={styles.supportingText}>{text}</div>
+                {buttons && (
+                  <div className={styles.actions}>
+                    {Array.isArray(buttons) &&
+                      buttons.map((buttonArgs, index) => (
+                        <Button
+                          key={index}
+                          size={'small'}
+                          variant={'text'}
+                          {...buttonArgs}
+                        />
+                      ))}
+                  </div>
+                )}
+              </motion.div>
+            </motion.div>
+          </SyncedFixedWrapper>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};

package/src/lib/components/index.ts

@@ -0,0 +1,19 @@
+export * from './Button';
+export * from './Card';
+export * from './Carousel';
+export * from './CarouselItem';
+export * from './CarouselItem';
+export * from './Divided';
+export * from './Fab';
+export * from './IconButton';
+export * from './IconButton';
+export * from './ProgressIndicator';
+export * from './Slider';
+export * from './Snackbar';
+export * from './Switch';
+export * from './Tab';
+export * from './Tabs';
+export * from './TextField';
+export * from './NavigationRailItem';
+export * from './NavigationRail';
+export * from './ToolTip';

package/src/lib/effects/SyncedFixedWrapper.tsx

@@ -0,0 +1,64 @@
+import {
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+type SyncedFixedWrapperProps = {
+  targetRef: RefObject<any>;
+  children: ReactNode;
+};
+
+export const SyncedFixedWrapper = ({
+  targetRef,
+  children,
+}: SyncedFixedWrapperProps) => {
+  const [style, setStyle] = useState<React.CSSProperties | null>(null);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
+
+  const updatePosition = () => {
+    const target = targetRef.current;
+    if (!target) return;
+
+    const rect = target.getBoundingClientRect();
+
+    console.log(target);
+
+    setStyle({
+      position: 'fixed',
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+      pointerEvents: 'none', // si le wrapper ne doit pas capter les events
+      zIndex: 999, // personnalise si besoin
+    });
+  };
+
+  useEffect(() => {
+    const target = targetRef.current;
+    if (!target) return;
+
+    updatePosition();
+
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+
+    // Observe resize of the target element
+    resizeObserver.current = new ResizeObserver(updatePosition);
+    resizeObserver.current.observe(target);
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+      resizeObserver.current?.disconnect();
+    };
+  }, [targetRef]);
+
+  if (!style) return null;
+
+  return createPortal(<div style={style}>{children}</div>, document.body);
+};

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

@@ -0,0 +1,287 @@
+import { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { motion, useMotionValueEvent, useScroll } from 'motion/react';
+import { throttle } from 'throttle-debounce';
+import { CustomScrollInterface } from './custom-scroll.interface';
+import { customScrollStyle } from './custom-scroll.style';
+import { ReactProps } from '../../utils';
+
+export const CustomScroll = ({
+  children,
+  orientation = 'vertical',
+  scrollSize,
+  onScroll,
+  className,
+  draggable = false,
+  throttleDuration = 75,
+}: 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 = throttle(
+      throttleDuration,
+      (latestValue, scrollOrientation: 'x' | 'y') => {
+        if (!containerSize.current || !contentScrollSize.current) return;
+        if (onScroll) {
+          if (orientation === 'horizontal' && scrollOrientation === 'x') {
+            onScroll({
+              scrollProgress: latestValue,
+              scroll: latestValue * contentScrollSize.current.width,
+              scrollTotal: contentScrollSize.current.width,
+              scrollVisible: containerSize.current.width,
+            });
+          }
+          if (orientation === 'vertical' && scrollOrientation === 'y') {
+            onScroll({
+              scrollProgress: latestValue,
+              scroll: latestValue * contentScrollSize.current.height,
+              scrollTotal: contentScrollSize.current.height,
+              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]);
+
+  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);
+      }
+    };
+  }, []);
+
+  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

@@ -0,0 +1,25 @@
+import { ReactNode } from 'react';
+
+type Props = {
+  children: ReactNode;
+  orientation?: 'vertical' | 'horizontal';
+  scrollSize?: number;
+  onScroll?: (args: {
+    scroll: number;
+    scrollProgress: number;
+    scrollTotal: number;
+    scrollVisible: 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

@@ -0,0 +1,32 @@
+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

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

package/src/lib/effects/index.ts

@@ -0,0 +1,4 @@
+export * from './ripple';
+export * from './custom-scroll';
+export * from './smooth-scroll.effect';
+export * from './SyncedFixedWrapper';