@udixio/ui-react 1.6.4 → 2.1.0

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

@@ -1,91 +1,124 @@
-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';
+import { useEffect, useRef, useState } from 'react';
+import { CustomScrollInterface } from './custom-scroll';
+import { ReactProps } from '../utils';
+import { BlockScroll } from './block-scroll.effect';
+import { animate, AnimationPlaybackControls } from 'motion';
 
 export const SmoothScroll = ({
-  children,
-  transition = '.5s',
+  transition,
   orientation = 'vertical',
   throttleDuration = 25,
-  ...restProps
 }: {
-  children: ReactNode;
-  transition?: string;
+  transition?: {
+    duration?: number;
+  };
 } & ReactProps<CustomScrollInterface>) => {
-  const [scroll, setScroll] = useState<{
-    scrollProgress: number;
-    scrollTotal: number;
-    scrollVisible: number;
-    scroll: number;
-  } | null>(null);
+  // Target value (instant), driven by wheel/touch/keyboard or native scroll sync
+  const [scrollY, setScrollY] = useState(0);
 
-  const scrollProgress = motionValue(scroll?.scrollProgress ?? 0);
+  const [el, setEl] = useState<HTMLHtmlElement>();
 
-  const transform = useTransform(
-    scrollProgress,
-    [0, 1],
-    [0, 1 - (scroll?.scrollVisible ?? 0) / (scroll?.scrollTotal ?? 0)]
-  );
+  const isScrolling = useRef(false);
+  const scrollTimeoutRef = useRef<NodeJS.Timeout>();
+  const lastAppliedYRef = useRef(0);
 
-  const percentTransform = useTransform(
-    transform,
-    (value) => `${-value * 100}%`
-  );
+  useEffect(() => {
+    setEl(document as unknown as HTMLHtmlElement);
+    const y = document.documentElement.scrollTop;
+    setScrollY(y);
+    lastAppliedYRef.current = y;
+  }, []);
+
+  // Sync native scroll (e.g., scrollbar, programmatic) back to target after a small delay
+  useEffect(() => {
+    const onScroll = () => {
+      if (isScrolling.current) return;
+      setScrollY(document.documentElement.scrollTop);
+    };
+
+    el?.addEventListener('scroll', onScroll as unknown as EventListener);
+    return () => {
+      if (scrollTimeoutRef.current) clearTimeout(scrollTimeoutRef.current);
+      el?.removeEventListener('scroll', onScroll as unknown as EventListener);
+    };
+  }, [el]);
 
-  const handleScroll = (args: {
-    scrollProgress: number;
-    scrollTotal: number;
-    scrollVisible: number;
-    scroll: number;
-  }) => {
-    scrollProgress.set(args.scrollProgress);
-    if (args.scrollTotal > 0) {
-      setScroll(args);
+  // Drive the spring when target changes
+  const currentY = useRef<number | null>();
+  const animationRef = useRef<AnimationPlaybackControls | null>(null);
+  useEffect(() => {
+    const y = scrollY;
+
+    if (animationRef.current) {
+      animationRef.current.stop();
+      animationRef.current = null;
     }
-  };
-  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`);
+    if (!isScrolling.current) {
+      currentY.current = y;
+      return;
     }
+    animationRef.current = animate(currentY.current ?? y, y, {
+      duration: transition?.duration ?? 0.5,
+      ease: 'circOut',
+
+      onUpdate: (value) => {
+        if (scrollTimeoutRef.current) {
+          clearTimeout(scrollTimeoutRef.current);
+        }
+        currentY.current = value;
 
-    // Mettre à jour l'heure du dernier changement
-    lastChangeTimeRef.current = now;
+        const html = document.documentElement;
+        // Avoid micro-movements causing extra layout work
+        const rounded = Math.round(value * 1000) / 1000;
+        const last = lastAppliedYRef.current;
+        if (Math.abs(rounded - last) < 0.1) return;
+        lastAppliedYRef.current = rounded;
 
-    console.log(value); // Affiche également la valeur si nécessaire
-  });
+        if (isScrolling.current) {
+          html.scrollTo({ top: rounded });
+        }
+      },
+      onComplete: () => {
+        scrollTimeoutRef.current = setTimeout(() => {
+          isScrolling.current = false;
+        }, 300);
+        animationRef.current = null;
+      },
+    });
+    return () => {
+      // Safety: stop if effect re-runs quickly
+      if (animationRef.current) {
+        animationRef.current.stop();
+        animationRef.current = null;
+      }
+    };
+  }, [scrollY]);
+
+  if (!el) return null;
 
   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>
+    <BlockScroll
+      touch={false}
+      el={el as unknown as HTMLElement}
+      onScroll={(scroll) => {
+        if (
+          'deltaY' in scroll &&
+          scroll.deltaY !== 0 &&
+          el &&
+          scrollY !== null
+        ) {
+          let y = scrollY + scroll.deltaY;
+          const html = el.querySelector('html');
+          if (html) {
+            y = Math.min(y, html.scrollHeight - html.clientHeight);
+          }
+          y = Math.max(y, 0);
+          setScrollY(y);
+
+          isScrolling.current = true;
+        }
+      }}
+    ></BlockScroll>
   );
 };

package/src/lib/index.ts

@@ -4,3 +4,4 @@ export * from './icon';
 export * from './interfaces';
 export * from './styles';
 export * from './utils';
+export * from './config';

package/src/lib/styles/card.style.ts

@@ -5,7 +5,7 @@ export const cardStyle = defaultClassNames<CardInterface>(
   'card',
   ({ variant, isInteractive }) => ({
     card: classNames(
-      'card group/card rounded-xl overflow-hidden z-10',
+      'group/card rounded-xl overflow-hidden z-10',
       variant === 'outlined' && 'bg-surface border border-outline-variant',
       variant === 'elevated' && 'bg-surface-container-low shadow-1',
       variant === 'filled' && 'bg-surface-container-highest',

package/src/lib/styles/fab.style.ts

@@ -20,6 +20,10 @@ export const fabStyle = defaultClassNames<FabInterface>(
       variant === 'primary' && 'bg-primary-container',
       variant === 'secondary' && 'bg-secondary-container',
       variant === 'tertiary' && 'bg-tertiary-container',
+      variant === 'surface' && 'text-primary',
+      variant === 'primary' && 'text-on-primary-container',
+      variant === 'secondary' && 'text-on-secondary-container',
+      variant === 'tertiary' && 'text-on-tertiary-container',
     ),
     stateLayer: classNames(
       'absolute w-full h-full overflow-hidden left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2',
@@ -33,23 +37,11 @@ export const fabStyle = defaultClassNames<FabInterface>(
         'group-hover:hover-state-on-tertiary-container group-focus-visible:focus-state-on-tertiary-container',
     ),
 
-    icon: classNames(
-      {
-        'size-6': size == 'small' || size == 'medium' || isExtended,
-        'size-9': size == 'large' && !isExtended,
-      },
-      variant === 'surface' && 'text-primary',
-      variant === 'primary' && 'text-on-primary-container',
-      variant === 'secondary' && 'text-on-secondary-container',
-      variant === 'tertiary' && 'text-on-tertiary-container',
-    ),
+    icon: classNames({
+      'size-6': size == 'small' || size == 'medium' || isExtended,
+      'size-9': size == 'large' && !isExtended,
+    }),
 
-    label: classNames(
-      'text-title-medium text-nowrap',
-      variant === 'surface' && 'text-primary',
-      variant === 'primary' && 'text-on-primary-container',
-      variant === 'secondary' && 'text-on-secondary-container',
-      variant === 'tertiary' && 'text-on-tertiary-container',
-    ),
+    label: classNames('text-title-medium text-nowrap'),
   }),
 );

package/src/lib/styles/slider.style.ts

@@ -5,7 +5,7 @@ export const sliderStyle = defaultClassNames<SliderInterface>(
   'slider',
   ({ isChanging }) => ({
     slider: classNames([
-      'relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer',
+      'relative w-full h-11 flex items-center rounded gap-x-1.5 cursor-pointer min-w-32',
     ]),
     activeTrack: classNames([
       'h-4 relative transition-all duration-100 bg-primary overflow-hidden rounded-l-full ',
@@ -23,5 +23,5 @@ export const sliderStyle = defaultClassNames<SliderInterface>(
     dot: classNames([
       'h-1 w-1 absolute transform -translate-y-1/2 -translate-x-1/2 top-1/2 rounded-full',
     ]),
-  })
+  }),
 );

package/src/lib/styles/tab.style.ts

@@ -6,7 +6,7 @@ export const tabStyle = defaultClassNames<TabInterface>(
   'tab',
   ({ isSelected, icon, label, variant }) => ({
     tab: classNames(
-      'bg-surface flex-1 group outline-none flex px-4 justify-center items-center cursor-pointer',
+      'flex-1 group outline-none flex px-4 justify-center items-center cursor-pointer',
       { 'z-10': isSelected },
       Boolean(icon && label) && variant === 'primary' && 'h-16',
       !(Boolean(icon && label) && variant === 'primary') && 'h-12',

package/src/lib/styles/tabs.style.ts

@@ -5,9 +5,9 @@ export const tabsStyle = defaultClassNames<TabsInterface>(
   'tabs',
   ({ scrollable }) => ({
     tabs: classNames(
-      'border-b border-surface-container-highest',
+      'border-b border-surface-container-highest bg-surface',
       'flex relative ',
-      { 'overflow-x-auto': scrollable }
+      { 'overflow-x-auto': scrollable },
     ),
-  })
+  }),
 );