@udixio/ui-react 0.4.2 → 1.0.0

package/src/lib/components/Carousel.tsx

@@ -0,0 +1,196 @@
+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';
+
+/**
+ * Carousels show a collection of items that can be scrolled on and off the screen
+ * Resources
+ * @status beta
+ * @category Layout
+ */
+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,58 @@
+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);
+};
+
+/**
+ * @status beta
+ * @parent Carousel
+ */
+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/Divider.tsx

@@ -0,0 +1,18 @@
+import { dividerStyle } from '../styles';
+import { DividerInterface } from '../interfaces';
+import { ReactProps } from '../utils';
+
+/**
+ * Dividers are thin lines that group content in lists or other containers
+ * @status beta
+ * @category Layout
+ */
+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,122 @@
+import { 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';
+
+/**
+ * Floating action buttons (FABs) help people take primary actions
+ * @status beta
+ * @category Action
+ */
+export const Fab = ({
+  className,
+  label,
+  variant = 'primary',
+  size = 'medium',
+  href,
+  type,
+  icon,
+  isExtended = false,
+  ref,
+  transition,
+  children,
+  ...restProps
+}: ReactProps<FabInterface>) => {
+  if (children) label = children;
+  if (!label) {
+    throw new Error(
+      'FAB component requires either a label prop or children content',
+    );
+  }
+  const ElementType = href ? 'a' : 'button';
+
+  const styles = fabStyle({
+    href,
+    icon,
+    isExtended,
+    label,
+    size,
+    variant,
+    className,
+    transition,
+    children: label,
+  });
+
+  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,155 @@
+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';
+
+/**
+ * Icon buttons help people take minor actions with one tap
+ * @status beta
+ * @category Action
+ */
+export const IconButton = ({
+  variant = 'standard',
+  href,
+  disabled = false,
+  type = 'button',
+  title,
+  label,
+  onToggle,
+  activated = false,
+  onClick,
+  icon,
+  size = 'medium',
+  iconSelected,
+  className,
+  ref,
+  width = 'default',
+  shape = 'rounded',
+  allowShapeTransformation = true,
+  transition,
+  children,
+  ...restProps
+}: ReactProps<IconButtonInterface>) => {
+  if (children) label = children;
+  if (!label) {
+    throw new Error(
+      'IconButton component requires either a label prop or children content to provide an accessible aria-label',
+    );
+  }
+  if (!title) {
+    title = label;
+  }
+
+  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: isActive,
+    label,
+    iconSelected,
+    isActive,
+    onToggle,
+    disabled,
+    icon,
+    variant,
+    className,
+    size,
+    children: label,
+    ...restProps,
+  });
+
+  const defaultRef = useRef<HTMLDivElement>(null);
+  const resolvedRef = ref || defaultRef;
+
+  transition = { duration: 0.3, ...transition };
+
+  return (
+    <ElementType
+      disabled={disabled}
+      href={href}
+      style={{ transition: transition.duration + 's' }}
+      className={styles.iconButton}
+      aria-label={label}
+      {...(restProps as any)}
+      title={undefined}
+      onClick={handleClick}
+      ref={resolvedRef}
+    >
+      <ToolTip
+        targetRef={resolvedRef}
+        trigger={disabled ? null : undefined}
+        text={title}
+      ></ToolTip>
+
+      <div className={styles.touchTarget} />
+      <div
+        className={styles.stateLayer}
+        style={{ transition: transition.duration + 's' }}
+      >
+        {!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} />}
+    </ElementType>
+  );
+};