@udixio/ui-react 0.0.1 → 0.1.0

package/src/lib/components/Carousel.tsx

@@ -0,0 +1,190 @@
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import { CarouselInterface, CarouselItemInterface } from '../interfaces';
+
+import { motion, motionValue, useTransform } from 'motion/react';
+
+import { carouselStyle } from '../styles';
+import { CustomScroll } from '../effects';
+import { ReactProps } from '../utils';
+import { CarouselItem, normalize } from './CarouselItem';
+
+export const Carousel = ({
+  variant = 'hero',
+  className,
+  children,
+  ref: optionalRef,
+  marginPourcent = 0,
+  inputRange = [0.21, 0.65],
+  outputRange = [42, 300],
+  gap = 8,
+  onChange,
+  scrollSensitivity = 1.25,
+  ...restProps
+}: ReactProps<CarouselInterface>) => {
+  const defaultRef = useRef(null);
+  const ref = optionalRef || defaultRef;
+
+  const styles = carouselStyle({
+    className,
+    children,
+    variant,
+    inputRange,
+    outputRange,
+    marginPourcent,
+    onChange,
+    gap,
+    scrollSensitivity,
+  });
+
+  const items = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === CarouselItem
+  );
+
+  const trackRef = useRef<HTMLDivElement>(null);
+  const [itemsWidth, setItemsWidth] = useState<number[]>([]);
+  const [scroll, setScroll] = useState<{
+    scrollProgress: number;
+    scrollTotal: number;
+    scrollVisible: number;
+    scroll: number;
+  } | null>(null);
+  const calculatePercentages = () => {
+    if (!trackRef.current || !ref.current || !scroll) return [];
+
+    const { scrollVisible, scrollProgress } = scroll;
+
+    function assignRelativeIndexes(
+      values: number[],
+      progressScroll: number
+    ): number[] {
+      return values.map(
+        (value) => (value - progressScroll) / Math.abs(values[1] - values[0])
+      );
+    }
+
+    let itemValues = items.map((_, index) => {
+      const itemRef = itemRefs[index];
+
+      if (!itemRef.current || !trackRef.current) return 0;
+
+      let itemScrollXCenter = index / (items.length - 1);
+
+      if (itemScrollXCenter > 1) itemScrollXCenter = 1;
+      if (itemScrollXCenter < 0) itemScrollXCenter = 0;
+
+      return itemScrollXCenter;
+    });
+
+    itemValues = assignRelativeIndexes(itemValues, scrollProgress);
+
+    let visible =
+      ((ref.current?.clientWidth ?? scrollVisible) - (outputRange[0] + gap)) /
+      (outputRange[1] + gap);
+
+    itemValues
+      .map((value, index) => ({ value: Math.abs(value), originalIndex: index })) // Associer chaque élément à son index
+      .sort((a, b) => a.value - b.value)
+      .forEach((item, index) => {
+        if (index === 0) setSelectedItem(item.originalIndex);
+        let result = normalize(visible, [0, 1], [0, outputRange[1]]);
+        if (result < outputRange[0]) result = outputRange[0];
+        visible--;
+        itemValues[item.originalIndex] = result;
+      });
+
+    return itemValues;
+  };
+  const itemRefs = useRef<React.RefObject<HTMLDivElement | null>[]>([]).current;
+  const [selectedItem, setSelectedItem] = useState(0);
+
+  useEffect(() => {
+    if (onChange) onChange(selectedItem);
+  }, [selectedItem]);
+
+  if (itemRefs.length !== items.length) {
+    items.forEach((_, i) => {
+      if (!itemRefs[i]) {
+        itemRefs[i] = React.createRef<HTMLDivElement>(); // Crée une nouvelle ref si manquante
+      }
+    });
+  }
+
+  const renderItems = items.map((child, index) => {
+    return React.cloneElement(
+      child as React.ReactElement<ReactProps<CarouselItemInterface>>,
+      {
+        width: itemsWidth[index],
+        ref: itemRefs[index],
+        key: index,
+        index,
+      }
+    );
+  });
+
+  const scrollProgress = motionValue(scroll?.scrollProgress ?? 0);
+
+  const transform = useTransform(
+    scrollProgress,
+    [0, 1],
+    [
+      0,
+      1 -
+        (ref.current?.clientWidth ?? 0) / (trackRef?.current?.clientWidth ?? 0),
+    ]
+  );
+
+  const percentTransform = useTransform(
+    transform,
+    (value) => `${-value * 100}%`
+  );
+
+  const handleScroll = (args: {
+    scrollProgress: number;
+    scrollTotal: number;
+    scrollVisible: number;
+    scroll: number;
+  }) => {
+    if (args.scrollTotal > 0) {
+      setScroll(args);
+    }
+  };
+
+  useEffect(() => {
+    const updatedPercentages = calculatePercentages();
+    setItemsWidth(updatedPercentages);
+  }, [scroll]);
+
+  const [scrollSize, setScrollSize] = useState(0);
+  useLayoutEffect(() => {
+    let maxWidth = outputRange[1];
+    if (scroll && maxWidth > scroll.scrollVisible) {
+      maxWidth = scroll.scrollVisible;
+    }
+    const result = ((maxWidth + gap) * renderItems.length) / scrollSensitivity;
+    setScrollSize(result);
+  }, [ref, itemRefs, scroll]);
+
+  return (
+    <div className={styles.carousel} ref={ref} {...restProps}>
+      <CustomScroll
+        draggable
+        orientation={'horizontal'}
+        onScroll={handleScroll}
+        scrollSize={scrollSize}
+      >
+        <motion.div
+          className={styles.track}
+          ref={trackRef}
+          style={{
+            transitionDuration: '0.5s',
+            transitionTimingFunction: 'ease-out',
+            gap: `${gap}px`,
+            x: percentTransform,
+          }}
+        >
+          {renderItems}
+        </motion.div>
+      </CustomScroll>
+    </div>
+  );
+};

package/src/lib/components/CarouselItem.tsx

@@ -0,0 +1,53 @@
+import React, { useRef } from 'react';
+import { CarouselItemInterface } from '../interfaces';
+import { motion } from 'motion/react';
+import { carouselItemStyle } from '../styles';
+import { MotionProps } from '../utils';
+
+export const normalize = (
+  value: number,
+  inputRange: [number, number],
+  outputRange: [number, number] = [0, 1]
+): number => {
+  const [inputMin, inputMax] = inputRange;
+  const [outputMin, outputMax] = outputRange;
+
+  const clampedValue = Math.max(inputMin, Math.min(value, inputMax));
+
+  const normalizedValue = (clampedValue - inputMin) / (inputMax - inputMin);
+
+  return outputMin + normalizedValue * (outputMax - outputMin);
+};
+export const CarouselItem = ({
+  className,
+  children,
+  width = 1,
+  index = 0,
+  ref: optionalRef,
+  ...restProps
+}: MotionProps<CarouselItemInterface>) => {
+  const defaultRef = useRef(null);
+  const ref: React.RefObject<null | HTMLDivElement> = optionalRef || defaultRef;
+
+  const styles = carouselItemStyle({
+    className,
+    index,
+    width: width,
+    children,
+  });
+
+  return (
+    <motion.div
+      ref={ref}
+      animate={{ width: width + 'px' }}
+      transition={{
+        duration: 0.5,
+        ease: 'linear',
+      }}
+      className={styles.carouselItem}
+      {...restProps}
+    >
+      {children}
+    </motion.div>
+  );
+};

package/src/lib/components/Divided.tsx

@@ -0,0 +1,13 @@
+import { dividerStyle } from '../styles';
+import { DividerInterface } from '../interfaces';
+import { ReactProps } from '../utils';
+
+export const Divider = ({
+  orientation = 'horizontal',
+  className,
+  ...restProps
+}: ReactProps<DividerInterface>) => {
+  const styles = dividerStyle({ orientation, className });
+
+  return <hr className={styles.divider} {...restProps} />;
+};

package/src/lib/components/Fab.tsx

@@ -0,0 +1,109 @@
+import React, { useRef } from 'react';
+import { Icon } from '../icon';
+
+import { RippleEffect } from '../effects/ripple';
+import { AnimatePresence, motion } from 'motion/react';
+import { FabInterface } from '../interfaces/fab.interface';
+import { fabStyle } from '../styles/fab.style';
+import { classNames } from '../utils';
+import { ReactProps } from '../utils/component';
+import { ToolTip } from './ToolTip';
+
+export const Fab = ({
+  className,
+  label,
+  variant = 'primary',
+  size = 'medium',
+  href,
+  type,
+  icon,
+  isExtended = false,
+  ref,
+  transition,
+  ...restProps
+}: ReactProps<FabInterface>) => {
+  const ElementType = href ? 'a' : 'button';
+
+  const styles = fabStyle({
+    href,
+    icon,
+    isExtended,
+    label,
+    size,
+    variant,
+    className,
+    transition,
+  });
+
+  transition = { duration: 0.3, ...transition };
+
+  const defaultRef = useRef(null);
+  const resolvedRef = ref || defaultRef;
+
+  const labelVariants = {
+    visible: {
+      width: 'auto',
+      marginLeft: 12,
+      opacity: 1,
+      transition: {
+        ...transition,
+        opacity: {
+          duration: transition.duration! / 2,
+          delay: transition.duration! - transition.duration! / 2,
+        },
+      },
+    },
+    hidden: {
+      width: 0,
+      marginLeft: 0,
+      opacity: 0,
+      transition: {
+        ...transition,
+        marginLeft: {
+          duration: transition.duration! / 2,
+          delay: transition.duration! - transition.duration! / 2,
+        },
+      },
+    },
+  };
+  return (
+    <ElementType
+      {...(restProps as any)}
+      ref={resolvedRef}
+      href={href}
+      aria-label={isExtended ? undefined : label}
+      className={styles.fab}
+    >
+      <ToolTip
+        trigger={isExtended ? null : undefined}
+        text={label}
+        targetRef={resolvedRef}
+      />
+      <span className={styles.stateLayer}>
+        <RippleEffect
+          colorName={classNames({
+            primary: variant == 'surface',
+            'on-primary-container': variant == 'primary',
+            'on-secondary-container': variant == 'secondary',
+            'on-tertiary-container': variant == 'tertiary',
+          })}
+          triggerRef={resolvedRef}
+        />
+      </span>
+      <Icon icon={icon} className={styles.icon} />
+      <AnimatePresence>
+        {isExtended && (
+          <motion.span
+            variants={labelVariants}
+            initial="hidden"
+            animate="visible"
+            exit="hidden"
+            className={styles.label}
+          >
+            {label}
+          </motion.span>
+        )}
+      </AnimatePresence>
+    </ElementType>
+  );
+};

package/src/lib/components/IconButton.tsx

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef } from 'react';
+
+import { Icon } from '../icon/icon';
+import { IconButtonInterface } from '../interfaces/icon-button.interface';
+import { iconButtonStyle } from '../styles/icon-button.style';
+import { ReactProps } from '../utils/component';
+import { RippleEffect } from '../effects';
+import { classNames } from '../utils';
+import { ToolTip } from './ToolTip';
+
+export type IconButtonVariant = 'standard' | 'filled' | 'tonal' | 'outlined';
+
+export const IconButton = ({
+  variant = 'standard',
+  href,
+  disabled = false,
+  type = 'button',
+  title,
+  arialLabel,
+  onToggle,
+  activated = false,
+  onClick,
+  icon,
+  size = 'medium',
+  iconSelected,
+  className,
+  ref,
+  width = 'default',
+  shape = 'rounded',
+  allowShapeTransformation = true,
+  transition,
+  ...restProps
+}: ReactProps<IconButtonInterface>) => {
+  if (!title) {
+    title = arialLabel;
+  }
+
+  const [isActive, setIsActive] = React.useState(activated);
+  let handleClick;
+
+  if (!onToggle) {
+    handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
+      if (disabled) {
+        e.preventDefault();
+      }
+      if (onClick) {
+        onClick(e);
+      }
+    };
+  } else if (onToggle) {
+    handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
+      if (disabled) {
+        e.preventDefault();
+      }
+      setIsActive(!isActive);
+      onToggle(Boolean(isActive));
+    };
+    icon = isActive ? (iconSelected ? iconSelected : icon) : icon;
+  }
+  useEffect(() => {
+    setIsActive(activated);
+  }, [activated]);
+
+  // Détermine le type de l'élément à rendre : un bouton ou un lien
+  const ElementType = href ? 'a' : 'button';
+
+  const styles = iconButtonStyle({
+    transition,
+    shape,
+    allowShapeTransformation,
+    width,
+    href,
+    activated,
+    arialLabel,
+    iconSelected,
+    isActive,
+    onToggle,
+    disabled,
+    icon,
+    variant,
+    className,
+    size,
+    ...restProps,
+  });
+
+  const defaultRef = useRef<HTMLDivElement>(null);
+  const resolvedRef = ref || defaultRef;
+
+  transition = { duration: 0.3, ...transition };
+
+  return (
+    <ElementType
+      disabled={disabled}
+      href={href}
+      className={styles.iconButton}
+      aria-label={arialLabel}
+      {...(restProps as any)}
+      title={undefined}
+      onClick={handleClick}
+      ref={resolvedRef}
+    >
+      <ToolTip
+        targetRef={resolvedRef}
+        trigger={disabled ? null : undefined}
+        text={title}
+      ></ToolTip>
+      <div
+        style={{ transition: transition.duration + 's' }}
+        className={styles.container}
+      >
+        <div className={styles.stateLayer}>
+          {!disabled && (
+            <RippleEffect
+              colorName={classNames(
+                variant === 'standard' && {
+                  'on-surface-variant': !isActive,
+                  primary: isActive,
+                },
+                variant === 'filled' && {
+                  primary: !isActive && Boolean(onToggle),
+                  'inverse-on-surface': isActive || !onToggle,
+                },
+                variant === 'tonal' && {
+                  'on-surface-variant': !isActive && Boolean(onToggle),
+                  'on-secondary-container': isActive || !onToggle,
+                },
+                variant === 'outlined' && {
+                  'on-surface-variant': !isActive,
+                  'on-primary': isActive,
+                }
+              )}
+              triggerRef={resolvedRef}
+            />
+          )}
+        </div>
+
+        {icon && <Icon icon={icon} className={styles.icon} />}
+      </div>
+    </ElementType>
+  );
+};

package/src/lib/components/NavigationRail.tsx

@@ -0,0 +1,178 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { ReactProps } from '../utils';
+import {
+  NavigationRailItem,
+  NavigationRailSection,
+} from './NavigationRailItem';
+import { Fab } from './Fab';
+import { navigationRailStyle } from '../styles/navigation-rail.style';
+import { NavigationRailInterface } from '../interfaces/navigation-rail.interface';
+import { FabInterface, NavigationRailItemInterface } from '../interfaces';
+import { faBars, faXmark } from '@fortawesome/free-solid-svg-icons';
+import { IconButton } from './IconButton';
+
+export const NavigationRail = ({
+  variant = 'standard',
+  onItemSelected,
+  children,
+  className,
+  selectedItem: externalSelectedItem,
+  extended,
+  alignment = 'top',
+  menu = {
+    closed: {
+      icon: faBars,
+      label: 'Open menu',
+    },
+    opened: {
+      icon: faXmark,
+      label: 'Close menu',
+    },
+  },
+  style,
+  onExtendedChange,
+  transition,
+  setSelectedItem: externalSetSelectedItem,
+}: ReactProps<NavigationRailInterface>) => {
+  const [internalSelectedItem, internalSetSelectedItem] = useState<
+    number | null
+  >(null);
+
+  const [isExtended, setIsExtended] = useState(extended);
+
+  let selectedItem: number | null;
+  if (externalSelectedItem == 0 || externalSelectedItem != undefined) {
+    selectedItem = externalSelectedItem;
+  } else {
+    selectedItem = internalSelectedItem;
+  }
+
+  const setSelectedItem = externalSetSelectedItem || internalSetSelectedItem;
+
+  const ref = React.useRef<HTMLDivElement | null>(null);
+
+  const handleOnItemSelected = (
+    args: { index: number } & Pick<
+      ReactProps<NavigationRailItemInterface>,
+      'label' | 'icon'
+    > & {
+        ref: React.RefObject<any>;
+      }
+  ) => {
+    onItemSelected?.(args);
+  };
+
+  function flattenChildren(children: React.ReactNode): React.ReactNode[] {
+    const flatChildren: React.ReactNode[] = [];
+    React.Children.forEach(children, (child) => {
+      if (
+        React.isValidElement<{ children?: React.ReactNode }>(child) &&
+        child.type === React.Fragment
+      ) {
+        flatChildren.push(...flattenChildren(child.props.children));
+      } else {
+        flatChildren.push(child);
+      }
+    });
+    return flatChildren;
+  }
+
+  const childrenArray = flattenChildren(children);
+
+  const fab = childrenArray.filter(
+    (child) => React.isValidElement(child) && child.type === Fab
+  );
+
+  const styles = navigationRailStyle({
+    children,
+    onItemSelected,
+    selectedItem,
+    setSelectedItem,
+    className,
+    variant,
+    extended: isExtended,
+    isExtended,
+    alignment,
+    menu,
+    transition,
+    onExtendedChange,
+  });
+  transition = { duration: 0.3, ...transition };
+  const extendedOnly = useRef(false);
+  extendedOnly.current = false;
+
+  useEffect(() => {
+    onExtendedChange?.(isExtended ?? false);
+  }, [isExtended]);
+
+  return (
+    <div
+      style={{ transition: transition.duration + 's', ...style }}
+      ref={ref}
+      className={styles.navigationRail}
+    >
+      <div className={styles.header}>
+        <IconButton
+          onClick={() => setIsExtended(!isExtended)}
+          arialLabel={isExtended ? menu?.opened.label : menu?.closed.label}
+          className={styles.menuIcon}
+          icon={!isExtended ? menu?.closed.icon : menu.opened.icon}
+        />
+        {fab.length > 0 &&
+          React.cloneElement(
+            fab[0] as React.ReactElement<ReactProps<FabInterface>>,
+            {
+              transition: transition,
+              isExtended: isExtended,
+              className: '!shadow-none mx-5 ' + (fab[0] as any).props.className,
+            }
+          )}
+      </div>
+
+      <div className={styles.segments}>
+        {(() => {
+          let itemIndex = 0;
+          return childrenArray.map((child) => {
+            if (
+              React.isValidElement(child) &&
+              child.type === NavigationRailItem
+            ) {
+              return React.cloneElement(
+                child as React.ReactElement<
+                  ReactProps<NavigationRailItemInterface>
+                >,
+                {
+                  key: itemIndex,
+                  index: itemIndex++, // Utilise et incrémente le compteur dédié
+                  variant: isExtended ? 'horizontal' : 'vertical',
+                  selectedItem,
+                  setSelectedItem: setSelectedItem,
+                  onItemSelected: handleOnItemSelected,
+                  transition,
+                  extendedOnly: extendedOnly.current,
+                  isExtended,
+                }
+              );
+            }
+            if (React.isValidElement(child) && child.type === Fab) {
+              return null;
+            }
+            if (
+              React.isValidElement(child) &&
+              child.type === NavigationRailSection
+            ) {
+              extendedOnly.current = true;
+              if (!isExtended) return null;
+              return React.cloneElement(
+                child as React.ReactElement<{ label: string }>,
+                {}
+              );
+            }
+            return child;
+          });
+        })()}
+      </div>
+      <div className={'flex-1 max-h-[160px]'}></div>
+    </div>
+  );
+};