@udixio/ui-react 0.4.2 → 1.0.0

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';

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

@@ -0,0 +1,103 @@
+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: 0,
+      borderRadius: '50%',
+      width: '25%',
+      height: '25%',
+    },
+    animate: {
+      opacity: 1,
+      borderRadius: 0,
+      width: '200%',
+      height: '200%',
+      transition: {
+        duration: 0.3,
+        borderRadius: { duration: 0.3, delay: 0.3 },
+      },
+    },
+  };
+
+  const [isCompleted, setIsCompleted] = useState(true);
+  const [isActive, setIsActive] = useState(false);
+  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    if (isActive) {
+      setIsCompleted(true);
+      setIsCompleted(false);
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    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;
+    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);
+  };
+
+  return (
+    <AnimatePresence mode="wait">
+      {(isActive || (!isActive && !isCompleted)) && (
+        <motion.div
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: coordinates.y + '%',
+            left: coordinates.x + '%',
+            background: `color-mix(in srgb, var(--color-${colorName}) 12%, transparent)`,
+            pointerEvents: 'none',
+          }}
+          variants={ripple}
+          initial="initial"
+          animate={'animate'}
+          exit={{ opacity: 0, transition: { duration: 0 } }}
+          onAnimationComplete={() => setIsCompleted(true)}
+          className={'transform -translate-x-1/2 -translate-y-1/2'}
+        />
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default RippleEffect;

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

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

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

@@ -0,0 +1,91 @@
+import { ReactNode, useRef, useState } from 'react';
+import {
+  motion,
+  motionValue,
+  useMotionValueEvent,
+  useTransform,
+} from 'motion/react';
+import { CustomScroll, CustomScrollInterface } from './custom-scroll';
+import { classNames, ReactProps } from '../utils';
+
+export const SmoothScroll = ({
+  children,
+  transition = '.5s',
+  orientation = 'vertical',
+  throttleDuration = 25,
+  ...restProps
+}: {
+  children: ReactNode;
+  transition?: string;
+} & ReactProps<CustomScrollInterface>) => {
+  const [scroll, setScroll] = useState<{
+    scrollProgress: number;
+    scrollTotal: number;
+    scrollVisible: number;
+    scroll: number;
+  } | null>(null);
+
+  const scrollProgress = motionValue(scroll?.scrollProgress ?? 0);
+
+  const transform = useTransform(
+    scrollProgress,
+    [0, 1],
+    [0, 1 - (scroll?.scrollVisible ?? 0) / (scroll?.scrollTotal ?? 0)]
+  );
+
+  const percentTransform = useTransform(
+    transform,
+    (value) => `${-value * 100}%`
+  );
+
+  const handleScroll = (args: {
+    scrollProgress: number;
+    scrollTotal: number;
+    scrollVisible: number;
+    scroll: number;
+  }) => {
+    scrollProgress.set(args.scrollProgress);
+    if (args.scrollTotal > 0) {
+      setScroll(args);
+    }
+  };
+  const lastChangeTimeRef = useRef<number | null>(null);
+  useMotionValueEvent(percentTransform, 'change', (value) => {
+    // Récupérer l'heure actuelle
+    const now = performance.now();
+
+    // Si une heure précédente existe, calculer le delta
+    if (lastChangeTimeRef.current !== null) {
+      const deltaTime = now - lastChangeTimeRef.current;
+      console.log(`Delta temps : ${deltaTime} ms`);
+    }
+
+    // Mettre à jour l'heure du dernier changement
+    lastChangeTimeRef.current = now;
+
+    console.log(value); // Affiche également la valeur si nécessaire
+  });
+
+  return (
+    <CustomScroll
+      onScroll={handleScroll}
+      throttleDuration={throttleDuration}
+      {...restProps}
+    >
+      <motion.div
+        className={classNames('transition-transform  ease-out', {
+          'w-fit h-full': orientation === 'horizontal',
+          'h-fit w-full': orientation === 'vertical',
+        })}
+        style={{
+          transitionDuration: transition,
+          ...(orientation == 'vertical'
+            ? { y: percentTransform }
+            : { x: percentTransform }),
+        }}
+      >
+        {children}
+      </motion.div>
+    </CustomScroll>
+  );
+};

package/src/lib/icon/icon.tsx

@@ -0,0 +1,47 @@
+import type React from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { classNames } from '../utils';
+
+interface Props {
+  icon: IconDefinition;
+  colors?: string[];
+  className?: string;
+}
+
+export const Icon: React.FC<Props> = ({ icon, colors = [], className }) => {
+  const { icon: iconData } = icon; // Extraction des données de l'icône.
+  const [width, height, , , svgPathData] = iconData || [];
+
+  const getColorStyle = (colors: string[]): React.CSSProperties => {
+    switch (colors.length) {
+      case 2:
+        return {
+          '--fa-primary-color': colors[0] || 'inherit',
+          '--fa-secondary-color': colors[1] || 'inherit',
+        } as React.CSSProperties;
+      case 1:
+        return { color: colors[0] } as React.CSSProperties;
+      default:
+        return {};
+    }
+  };
+
+  return (
+    <svg
+      className={classNames('size-5 box-content', className)}
+      style={{
+        ...getColorStyle(colors),
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${width} ${height}`}
+      role="img"
+      aria-hidden="true"
+    >
+      {typeof svgPathData === 'string' ? (
+        <path className={'fill-current'} d={svgPathData} />
+      ) : (
+        svgPathData.map((d, index) => <path key={index} d={d} />)
+      )}
+    </svg>
+  );
+};

package/src/lib/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon';

package/src/lib/index.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './effects';
+export * from './icon';
+export * from './interfaces';
+export * from './styles';
+export * from './utils';

package/src/lib/interfaces/button.interface.ts

@@ -0,0 +1,54 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ActionOrLink } from '../utils';
+import { Transition } from 'motion';
+
+type Props = {
+  /**
+   * The label is the text that is displayed on the button.
+   */
+  label?: string;
+
+  children?: string;
+
+  size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
+
+  /**
+   * The button variant determines the style of the button.
+   */
+  variant?: 'filled' | 'elevated' | 'tonal' | 'outlined' | 'text';
+
+  /**
+   * Disables the button if set to true.
+   */
+  disabled?: boolean;
+
+  /**
+   * An optional icon to display in the button.
+   */
+  icon?: IconDefinition;
+
+  iconPosition?: 'left' | 'right';
+
+  loading?: boolean;
+
+  /**
+   * The shape of the button defines whether it is squared or rounded.
+   */
+  shape?: 'squared' | 'rounded';
+
+  allowShapeTransformation?: boolean;
+
+  transition?: Transition;
+
+  onToggle?: (isActive: boolean) => void;
+  activated?: boolean;
+};
+
+type Elements = ['button', 'touchTarget', 'stateLayer', 'icon', 'label'];
+
+export type ButtonInterface = ActionOrLink<Props> & {
+  elements: Elements;
+  states: {
+    isActive: boolean;
+  };
+};

package/src/lib/interfaces/card.interface.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface CardInterface {
+  type: 'div';
+  props: {
+    variant?: 'outlined' | 'elevated' | 'filled';
+    isInteractive?: boolean;
+    children: ReactNode;
+  };
+  elements: ['card', 'stateLayer'];
+}

package/src/lib/interfaces/carousel-item.interface.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface CarouselItemInterface {
+  type: 'div';
+  props: {
+    children?: ReactNode | undefined;
+    width?: number;
+    index?: number;
+  };
+  elements: ['carouselItem'];
+}