@udixio/ui-react 2.9.5 → 2.9.7

package/src/lib/components/TabPanels.tsx

@@ -0,0 +1,71 @@
+import React, { useContext } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { TabGroupContext } from './TabGroupContext';
+import { TabPanelsInterface } from '../interfaces/tab-panels.interface';
+import { ReactProps } from '../utils/component';
+import { useTabPanelsStyle } from '../styles/tab-panels.style';
+import { TabPanel } from './TabPanel';
+
+/**
+ * TabPanels renders the content panels with slide animation
+ * Must be used within a TabGroup
+ * @status beta
+ * @category Navigation
+ */
+export const TabPanels = ({
+  children,
+  className,
+}: ReactProps<TabPanelsInterface>) => {
+  const context = useContext(TabGroupContext);
+
+  if (!context) {
+    console.warn('TabPanels must be used within a TabGroup');
+    return null;
+  }
+
+  const { selectedTab, direction, tabsId } = context;
+
+  const panelChildren = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === TabPanel,
+  ) as React.ReactElement[];
+
+  const styles = useTabPanelsStyle({
+    children,
+    className,
+  });
+
+  return (
+    <div className={styles.tabPanels}>
+      <AnimatePresence initial={false} custom={direction} mode="popLayout">
+        {panelChildren.map(
+          (child, index) =>
+            selectedTab === index && (
+              <motion.div
+                key={index}
+                custom={direction}
+                variants={{
+                  enter: (dir: number) => ({
+                    x: dir * 100 + '%',
+                    opacity: 1,
+                  }),
+                  center: { x: 0, opacity: 1 },
+                  exit: (dir: number) => ({
+                    x: dir * -100 + '%',
+                    opacity: 1,
+                  }),
+                }}
+                initial="enter"
+                animate="center"
+                exit="exit"
+                transition={{ type: 'spring', stiffness: 400, damping: 40 }}
+                role="tabpanel"
+                aria-labelledby={`tab-${tabsId}-${index}`}
+              >
+                {React.cloneElement(child, { isSelected: true })}
+              </motion.div>
+            ),
+        )}
+      </AnimatePresence>
+    </div>
+  );
+};

package/src/lib/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState } from 'react';
+import React, { useContext, useMemo, useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 import { TabsInterface } from '../interfaces/tabs.interface';
 
@@ -6,6 +6,7 @@ import { useTabsStyle } from '../styles/tabs.style';
 import { ReactProps } from '../utils/component';
 import { TabProps } from '../interfaces/tab.interface';
 import { Tab } from './Tab';
+import { TabGroupContext } from './TabGroupContext';
 
 /**
  * Tabs organize content across different screens and views
@@ -21,22 +22,28 @@ export const Tabs = ({
   setSelectedTab: externalSetSelectedTab,
   scrollable = false,
 }: ReactProps<TabsInterface>) => {
+  const tabGroupContext = useContext(TabGroupContext);
+
   const [internalSelectedTab, internalSetSelectedTab] = useState<number | null>(
     null,
   );
 
+  // Priorité : props > context > état interne
   let selectedTab: number | null;
-  if (externalSelectedTab == 0 || externalSelectedTab != undefined) {
+  if (externalSelectedTab === 0 || externalSelectedTab != undefined) {
     selectedTab = externalSelectedTab;
+  } else if (tabGroupContext) {
+    selectedTab = tabGroupContext.selectedTab;
   } else {
     selectedTab = internalSelectedTab;
   }
 
-  const setSelectedTab = externalSetSelectedTab || internalSetSelectedTab;
+  const setSelectedTab =
+    externalSetSelectedTab ?? tabGroupContext?.setSelectedTab ?? internalSetSelectedTab;
 
   const tabChildren = React.Children.toArray(children).filter(
     (child) => React.isValidElement(child) && child.type === Tab,
-  );
+  ) as React.ReactElement<TabProps>[];
 
   const ref = React.useRef<HTMLDivElement | null>(null);
 
@@ -60,7 +67,10 @@ export const Tabs = ({
     }
   };
 
-  const tabsId = useMemo(() => uuidv4(), []);
+  const tabsId = useMemo(
+    () => tabGroupContext?.tabsId ?? uuidv4(),
+    [tabGroupContext?.tabsId],
+  );
 
   const styles = useTabsStyle({
     children,
@@ -71,10 +81,11 @@ export const Tabs = ({
     className,
     variant,
   });
+
   return (
     <div ref={ref} role="tablist" className={styles.tabs}>
       {tabChildren.map((child, index) => {
-        return React.cloneElement(child as React.ReactElement<TabProps>, {
+        return React.cloneElement(child, {
           key: index,
           index,
           variant: variant,

package/src/lib/components/index.ts

@@ -17,6 +17,9 @@ export * from './Snackbar';
 export * from './Switch';
 export * from './Tab';
 export * from './Tabs';
+export * from './TabGroup';
+export * from './TabPanels';
+export * from './TabPanel';
 export * from './TextField';
 export * from './NavigationRailItem';
 export * from './NavigationRail';

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

@@ -1,142 +1,98 @@
-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';
+import { useEffect, useRef, ReactNode } from 'react';
+import Lenis from 'lenis';
+
+export type SmoothScrollProps = {
+  /**
+   * Duration of the scroll animation in seconds or as a CSS string (e.g., '1s', '500ms').
+   * Default: 1.2
+   */
+  transition?: number | string;
+  /**
+   * Easing function for the scroll animation.
+   * Default: easeOutQuint
+   */
+  easing?: (t: number) => number;
+  /**
+   * Scroll orientation.
+   * Default: 'vertical'
+   */
+  orientation?: 'vertical' | 'horizontal';
+  /**
+   * Enable smooth scrolling on touch devices.
+   * Default: false (native touch scrolling is usually preferred)
+   */
+  smoothTouch?: boolean;
+  /**
+   * Multiplier for touch scroll sensitivity.
+   * Default: 2
+   */
+  touchMultiplier?: number;
+  /**
+   * Children elements (optional, component works at document level)
+   */
+  children?: ReactNode;
+};
 
 /**
- * WARNING: using this component is not recommended for now.
- * It may block or alter certain scroll events (wheel/touch/keyboard) depending on the context.
- * Rework it later (e.g., via Lenis or another solution) before using it in production.
+ * SmoothScroll component using Lenis for smooth scrolling.
+ * This component enables smooth scrolling at the document level.
  */
 export const SmoothScroll = ({
-  transition,
+  transition = 1.2,
+  easing,
   orientation = 'vertical',
-  throttleDuration = 25,
-}: {
-  transition?: {
-    ease:
-      | 'linear'
-      | 'easeIn'
-      | 'easeOut'
-      | 'easeInOut'
-      | 'circIn'
-      | 'circOut'
-      | 'circInOut'
-      | 'backIn'
-      | 'backOut'
-      | 'backInOut'
-      | 'anticipate'
-      | ((t: number) => number);
-    duration?: number;
-  };
-} & ReactProps<CustomScrollInterface>) => {
-  // Target value (instant), driven by wheel/touch/keyboard or native scroll sync
-  const [scrollY, setScrollY] = useState(0);
-
-  const [el, setEl] = useState<HTMLHtmlElement>();
-
-  const isScrolling = useRef(false);
-  const scrollTimeoutRef = useRef<NodeJS.Timeout>();
-  const lastAppliedYRef = useRef(0);
-
-  useEffect(() => {
-    setEl(document as unknown as HTMLHtmlElement);
-    const y = document.documentElement.scrollTop;
-    setScrollY(y);
-    lastAppliedYRef.current = y;
-  }, []);
+  smoothTouch = false,
+  touchMultiplier = 2,
+  children,
+}: SmoothScrollProps) => {
+  const lenisRef = useRef<Lenis | null>(null);
+  const rafRef = useRef<number | null>(null);
 
-  // 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]);
-
-  // 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;
+    // Parse duration from string if needed (e.g., '1s' -> 1, '500ms' -> 0.5)
+    let duration: number;
+    if (typeof transition === 'string') {
+      if (transition.endsWith('ms')) {
+        duration = parseFloat(transition) / 1000;
+      } else if (transition.endsWith('s')) {
+        duration = parseFloat(transition);
+      } else {
+        duration = parseFloat(transition) || 1.2;
+      }
+    } else {
+      duration = transition;
     }
 
-    if (!isScrolling.current) {
-      currentY.current = y;
-      return;
-    }
-    animationRef.current = animate(currentY.current ?? y, y, {
-      duration: (transition?.duration ?? 500) / 1000,
-      ease: transition?.ease ?? 'easeOut',
+    // Default easing: easeOutQuint
+    const defaultEasing = (t: number) => 1 - Math.pow(1 - t, 5);
+
+    // Initialize Lenis
+    lenisRef.current = new Lenis({
+      duration,
+      easing: easing ?? defaultEasing,
+      orientation,
+      smoothWheel: true,
+      touchMultiplier,
+      syncTouch: smoothTouch,
+    });
 
-      onUpdate: (value) => {
-        if (scrollTimeoutRef.current) {
-          clearTimeout(scrollTimeoutRef.current);
-        }
-        currentY.current = value;
+    // Animation frame loop
+    const raf = (time: number) => {
+      lenisRef.current?.raf(time);
+      rafRef.current = requestAnimationFrame(raf);
+    };
 
-        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;
+    rafRef.current = requestAnimationFrame(raf);
 
-        if (isScrolling.current) {
-          html.scrollTo({ top: rounded });
-        }
-      },
-      onComplete: () => {
-        scrollTimeoutRef.current = setTimeout(() => {
-          isScrolling.current = false;
-        }, 300);
-        animationRef.current = null;
-      },
-    });
+    // Cleanup
     return () => {
-      // Safety: stop if effect re-runs quickly
-      if (animationRef.current) {
-        animationRef.current.stop();
-        animationRef.current = null;
+      if (rafRef.current !== null) {
+        cancelAnimationFrame(rafRef.current);
       }
+      lenisRef.current?.destroy();
+      lenisRef.current = null;
     };
-  }, [scrollY]);
-
-  if (!el) return null;
-
-  return (
-    <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);
+  }, [transition, easing, orientation, smoothTouch, touchMultiplier]);
 
-          isScrolling.current = true;
-        }
-      }}
-    ></BlockScroll>
-  );
+  return children ? <>{children}</> : null;
 };

package/src/lib/interfaces/index.ts

@@ -15,6 +15,8 @@ export * from './snackbar.interface';
 export * from './switch.interface';
 export * from './tab.interface';
 export * from './tabs.interface';
+export * from './tab-group.interface';
+export * from './tab-panels.interface';
 export * from './text-field.interface';
 export * from './navigation-rail-item.interface';
 export * from './tooltip.interface';

package/src/lib/interfaces/tab-group.interface.ts

@@ -0,0 +1,13 @@
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+
+export interface TabGroupInterface {
+  type: 'div';
+  props: {
+    children: ReactNode;
+    selectedTab?: number | null;
+    setSelectedTab?: Dispatch<SetStateAction<number | null>>;
+    defaultTab?: number;
+  };
+  states: object;
+  elements: ['tabGroup'];
+}

package/src/lib/interfaces/tab-panels.interface.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface TabPanelsInterface {
+  type: 'div';
+  props: {
+    children: ReactNode;
+  };
+  states: object;
+  elements: ['tabPanels'];
+}
+
+export interface TabPanelInterface {
+  type: 'div';
+  props: {
+    children: ReactNode;
+  };
+  states: {
+    isSelected: boolean;
+  };
+  elements: ['tabPanel'];
+}

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

@@ -1,6 +1,6 @@
 import { ActionOrLink } from '../utils/component';
 import { TabsVariant } from './tabs.interface';
-import { Dispatch, RefObject, SetStateAction } from 'react';
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
 import { Icon } from '../icon';
 
 export type TabProps = {
@@ -18,6 +18,7 @@ export type TabProps = {
   ) => void;
   index?: number;
   scrollable?: boolean;
+  children?: ReactNode;
 };
 
 type Elements = ['tab', 'stateLayer', 'icon', 'label', 'content', 'underline'];

package/src/lib/styles/index.ts

@@ -15,6 +15,7 @@ export * from './snackbar.style';
 export * from './switch.style';
 export * from './tab.style';
 export * from './tabs.style';
+export * from './tab-panels.style';
 export * from './text-field.style';
 export * from './tooltip.style';
 export { useButtonStyle } from './button.style';

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

@@ -0,0 +1,35 @@
+import { TabPanelsInterface, TabPanelInterface } from '../interfaces';
+import {
+  type ClassNameComponent,
+  classNames,
+  createUseClassNames,
+  defaultClassNames,
+} from '../utils';
+
+const tabPanelsConfig: ClassNameComponent<TabPanelsInterface> = () => ({
+  tabPanels: classNames('overflow-hidden'),
+});
+
+export const tabPanelsStyle = defaultClassNames<TabPanelsInterface>(
+  'tabPanels',
+  tabPanelsConfig,
+);
+
+export const useTabPanelsStyle = createUseClassNames<TabPanelsInterface>(
+  'tabPanels',
+  tabPanelsConfig,
+);
+
+const tabPanelConfig: ClassNameComponent<TabPanelInterface> = () => ({
+  tabPanel: classNames(''),
+});
+
+export const tabPanelStyle = defaultClassNames<TabPanelInterface>(
+  'tabPanel',
+  tabPanelConfig,
+);
+
+export const useTabPanelStyle = createUseClassNames<TabPanelInterface>(
+  'tabPanel',
+  tabPanelConfig,
+);

package/src/stories/effect/smooth-scroll.stories.tsx

@@ -2,42 +2,51 @@ import type { Meta, StoryObj } from '@storybook/react';
 import { SmoothScroll } from '../../';
 import { JSX } from 'react/jsx-runtime';
 
-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 const meta = {
   title: 'effect/SmoothScroll',
   component: SmoothScroll,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  parameters: {},
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {},
+  argTypes: {
+    transition: {
+      control: { type: 'text' },
+      description: 'Duration of the scroll animation (e.g., "1s", "500ms", or number in seconds)',
+    },
+    orientation: {
+      control: { type: 'select' },
+      options: ['vertical', 'horizontal'],
+    },
+    smoothTouch: {
+      control: { type: 'boolean' },
+      description: 'Enable smooth scrolling on touch devices',
+    },
+    touchMultiplier: {
+      control: { type: 'number' },
+      description: 'Multiplier for touch scroll sensitivity',
+    },
+  },
 } satisfies Meta<typeof SmoothScroll>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
-
 const createSmoothScrollStory = () => {
   const SmoothScrollStory: () => JSX.Element = () => (
-    <div className={'h-96'}>
-      <SmoothScroll transition={'1s'}>
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />{' '}
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />{' '}
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />{' '}
-        <div className={' h-52 bg-primary'} />
-        <div className={' h-52 bg-secondary'} />
-        <div className={' h-52 bg-tertiary'} />
-      </SmoothScroll>
-    </div>
+    <>
+      <SmoothScroll transition="1s" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+      <div className="h-52 bg-primary" />
+      <div className="h-52 bg-secondary" />
+      <div className="h-52 bg-tertiary" />
+    </>
   );
 
   return SmoothScrollStory;