@udixio/ui-react 2.10.12 → 2.10.14

package/src/lib/components/Slider.tsx

@@ -1,374 +0,0 @@
-import { AnimatePresence, motion } from 'motion/react';
-import { SliderInterface } from '../interfaces';
-import { useSliderStyle } from '../styles';
-import { classNames, ReactProps } from '../utils';
-import { useEffect, useRef, useState } from 'react';
-
-/**
- * Sliders let users make selections from a range of values
- * @status beta
- * @category Input
- * @devx
- * - `value` is treated as the initial value; component is uncontrolled after mount.
- * - `onChange` receives the numeric value (not the DOM event).
- * @a11y
- * - Provides slider role/aria values, but no label prop.
- */
-export const Slider = ({
-  className,
-  valueFormatter,
-  step = 10,
-  name,
-  value: defaultValue = 0,
-  min = 0,
-  max = 100,
-  marks = [
-    {
-      value: 0,
-      label: '0',
-    },
-    {
-      value: 100,
-      label: '100',
-    },
-  ],
-  ref,
-  onChange,
-  ...restProps
-}: ReactProps<SliderInterface>) => {
-  const getpercentFromValue = (value: number) => {
-    const min = getMin();
-    const max = getMax();
-
-    if (value === Infinity) {
-      return 100;
-    } else if (value === -Infinity) {
-      return 0;
-    }
-    return ((value - min) / (max - min)) * 100;
-  };
-
-  const getMax = (isInfinity = false) => {
-    if (isInfinity) {
-      return max;
-    }
-    return max == Infinity ? marks[marks?.length - 1].value : max;
-  };
-  const getMin = (isInfinity = false) => {
-    if (isInfinity) {
-      return min;
-    }
-    return min == -Infinity ? marks[0].value : min;
-  };
-
-  const getValueFrompercent = (percent: number) => {
-    const min = getMin(false);
-    const max = getMax(false);
-    return ((max - min) * percent) / 100 + min;
-  };
-
-  const [isChanging, setIsChanging] = useState(false);
-  const defaultRef = useRef<HTMLDivElement>(null);
-  const resolvedRef: React.RefObject<any> | React.ForwardedRef<any> =
-    ref || defaultRef;
-
-  const [value, setValue] = useState(defaultValue);
-  const [percent, setpercent] = useState(getpercentFromValue(defaultValue));
-  const [mouseDown, setMouseDown] = useState(false);
-
-  useEffect(() => {
-    setValue(defaultValue);
-    setpercent(getpercentFromValue(defaultValue));
-  }, [defaultValue]);
-
-  const handleMouseDown = (e: any) => {
-    setMouseDown(true);
-    setIsChanging(true);
-    handleChange(e);
-  };
-
-  const handleMouseUp = () => {
-    setMouseDown(false);
-    setIsChanging(false);
-  };
-  useEffect(() => {
-    if (mouseDown) {
-      // Add mouse events
-      window.addEventListener('mouseup', handleMouseUp);
-      window.addEventListener('mousemove', handleChange);
-      // Add touch events
-      window.addEventListener('touchend', handleMouseUp);
-      window.addEventListener('touchmove', handleChange);
-    } else {
-      // Remove mouse events
-      window.removeEventListener('mouseup', handleMouseUp);
-      window.removeEventListener('mousemove', handleChange);
-      // Remove touch events
-      window.removeEventListener('touchend', handleMouseUp);
-      window.removeEventListener('touchmove', handleChange);
-    }
-
-    return () => {
-      // Cleanup - remove both mouse, touch and drag events
-      window.removeEventListener('mouseup', handleMouseUp);
-      window.removeEventListener('mousemove', handleChange);
-      window.removeEventListener('touchend', handleMouseUp);
-      window.removeEventListener('touchmove', handleChange);
-    };
-  }, [mouseDown]);
-
-  const styles = useSliderStyle({
-    className,
-    isChanging,
-    marks,
-    max,
-    min,
-    name,
-    step,
-    value,
-    valueFormatter,
-    onChange,
-  });
-  const handleChange = (event: any) => {
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-expect-error
-    const current = resolvedRef?.current;
-    if (current) {
-      const refPosition = current.getBoundingClientRect().left;
-
-      const clientX =
-        event.type === 'touchmove' || event.type === 'touchstart'
-          ? event.touches[0].clientX
-          : event.clientX;
-
-      const percent = ((clientX - refPosition) / current.offsetWidth) * 100;
-
-      updateSliderValues({ percent });
-    }
-  };
-  const updateSliderValues = ({
-    percent,
-    value,
-  }: {
-    percent?: number;
-    value?: number;
-  }) => {
-    if (percent) {
-      if (percent >= 100) {
-        setValue(getMax(true));
-        setpercent(100);
-        return;
-      }
-      if (percent <= 0) {
-        setValue(getMin(true));
-        setpercent(0);
-        return;
-      }
-
-      value = getValueFrompercent(percent);
-      if (value == getMin()) {
-        value = getMin(true);
-      }
-      if (value == getMax()) {
-        value = getMax(true);
-      }
-    } else if (value != undefined) {
-      if (value >= getMax()) {
-        setValue(getMax(true));
-        setpercent(100);
-        return;
-      }
-      if (value <= getMin()) {
-        setValue(getMin(true));
-        setpercent(0);
-        return;
-      }
-      percent = getpercentFromValue(value);
-    } else {
-      return;
-    }
-    if (step != null) {
-      value = Math.round((value - getMin()) / step) * step + getMin();
-    } else if (marks) {
-      value = marks.reduce((prev, curr, currentIndex) => {
-        let currDiff =
-          curr.value === Infinity
-            ? getMax()
-            : curr.value === -Infinity
-              ? getMin()
-              : curr.value;
-        let prevDiff =
-          prev.value === Infinity
-            ? getMax()
-            : prev.value === -Infinity
-              ? getMin()
-              : prev.value;
-        currDiff = Math.abs(currDiff - value!);
-        prevDiff = Math.abs(prevDiff - value!);
-
-        return currDiff < prevDiff ? curr : prev;
-      }).value;
-    }
-
-    if (value >= getMax()) {
-      value = getMax(true);
-    }
-    if (value <= getMin()) {
-      value = getMin(true);
-    }
-
-    percent = getpercentFromValue(value);
-
-    setValue(value);
-    setpercent(percent);
-    if (onChange) {
-      onChange(value);
-    }
-  };
-  const [sliderWidth, setSliderWidth] = useState(0);
-  useEffect(() => {
-    const updateSliderWidth = () => {
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-      // @ts-expect-error
-      if (resolvedRef.current) {
-        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-        // @ts-expect-error
-        setSliderWidth(resolvedRef.current.offsetWidth);
-      }
-    };
-
-    updateSliderWidth(); // Initial setup
-    window.addEventListener('resize', updateSliderWidth);
-
-    // Clean up
-    return () => {
-      window.removeEventListener('resize', updateSliderWidth);
-    };
-  }, []);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    // Check which key is pressed
-    switch (e.key) {
-      case 'ArrowRight':
-        if (step) {
-          updateSliderValues({ value: value + step });
-        } else if (marks) {
-          // Find the next mark (greater than the current value)
-          const nextMark = marks.find((mark) => mark.value > value);
-          if (nextMark) {
-            // If one exists, update the value to the mark's value
-            updateSliderValues({ value: nextMark.value });
-          }
-        }
-        break;
-
-      case 'ArrowLeft':
-        if (step) {
-          updateSliderValues({ value: value - step });
-        } else if (marks) {
-          // Find the previous mark (less than the current value)
-          const previousMark = marks
-            .slice(0)
-            .reverse()
-            .find((mark, index, array) => {
-              if (value === Infinity) {
-                // If value is Infinity, take the second-to-last mark
-                return index === 1;
-              }
-              return mark.value < value;
-            });
-
-          if (previousMark) {
-            // If one exists, update the value to the mark's value
-            updateSliderValues({ value: previousMark.value });
-          }
-        }
-        break;
-      default:
-        return;
-    }
-  };
-  return (
-    <div
-      tabIndex={0} // Make the slider focusable
-      onKeyDown={handleKeyDown} // Attach the keydown event
-      role="slider" // Inform assistive technologies about the type of the component
-      aria-valuemin={getMin(true)} // Inform about the minimum value
-      aria-valuemax={getMax(true)} // Inform about the maximum value
-      aria-valuenow={value} // Inform about the current value
-      aria-valuetext={value.toString()} // Textual representation of the value
-      className={styles.slider}
-      onMouseDown={handleMouseDown}
-      onClick={handleChange}
-      ref={resolvedRef}
-      onTouchStart={handleMouseDown}
-      onDragStart={(e) => e.preventDefault()}
-      {...restProps}
-    >
-      <input type="hidden" name={name} value={value} />
-      <div className={styles.activeTrack} style={{ flex: percent / 100 }}></div>
-      <div className={styles.handle}>
-        <AnimatePresence>
-          {isChanging && (
-            <motion.div
-              className={styles.valueIndicator}
-              initial="hidden"
-              animate="visible"
-              exit="hidden"
-              style={{
-                translate: '-50%',
-                transformOrigin: 'center bottom',
-                textWrap: 'nowrap',
-              }}
-              variants={{
-                visible: { opacity: 1, scale: 1 },
-                hidden: { opacity: 1, scale: 0 },
-              }}
-              transition={{ duration: 0.1 }}
-            >
-              {valueFormatter ? valueFormatter(value) : value}
-            </motion.div>
-          )}
-        </AnimatePresence>
-      </div>
-      <div
-        className={styles.inactiveTrack}
-        style={{ flex: 1 - percent / 100 }}
-      ></div>
-      <div
-        className={
-          'w-[calc(100%-12px)] h-full absolute -translate-x-1/2 transform left-1/2'
-        }
-      >
-        {marks &&
-          marks.map((mark, index) => {
-            let isUnderActiveTrack = null;
-
-            const handleAndGapPercent =
-              ((isChanging ? 9 : 10) / sliderWidth) * 100;
-            const markPercent = getpercentFromValue(mark.value);
-
-            if (markPercent <= percent - handleAndGapPercent) {
-              isUnderActiveTrack = true;
-            } else if (markPercent >= percent + handleAndGapPercent) {
-              isUnderActiveTrack = false;
-            }
-            return (
-              <div
-                key={index}
-                className={classNames(styles.dot, {
-                  'bg-primary-container':
-                    isUnderActiveTrack != null && isUnderActiveTrack,
-                  'bg-primary':
-                    isUnderActiveTrack != null && !isUnderActiveTrack,
-                })}
-                style={{
-                  left: `${getpercentFromValue(mark.value)}%`,
-                }}
-              ></div>
-            );
-          })}
-      </div>
-    </div>
-  );
-};

package/src/lib/components/Snackbar.tsx

@@ -1,77 +0,0 @@
-import { useEffect, useState } from 'react';
-import { AnimatePresence, motion } from 'motion/react';
-import { faXmark } from '@fortawesome/free-solid-svg-icons';
-import { SnackbarInterface } from '../interfaces/snackbar.interface';
-import { useSnackbarStyle } from '../styles/snackbar.style';
-
-import { MotionProps } from '../utils/component';
-import { IconButton } from './IconButton';
-
-/**
- * Snackbars show short updates about app processes at the bottom of the screen
- * @status beta
- * @category Communication
- * @devx
- * - Uncontrolled visibility; use `duration` to auto-dismiss.
- * @a11y
- * - No `role="status"`/`alert` announcements.
- * @limitations
- * - No queue/stacking and no controlled open prop.
- */
-export const Snackbar = ({
-  message,
-  className,
-  duration,
-  closeIcon = faXmark,
-  onClose,
-  ...restProps
-}: MotionProps<SnackbarInterface>) => {
-  const [isVisible, setIsVisible] = useState(true);
-
-  const styles = useSnackbarStyle({
-    className,
-    closeIcon,
-    duration,
-    isVisible,
-    onClose,
-    message,
-  });
-
-  useEffect(() => {
-    if (duration) {
-      setTimeout(() => {
-        handleClose();
-      }, duration);
-    }
-  }, [duration]);
-
-  const handleClose = () => {
-    setIsVisible(false);
-    onClose?.();
-  };
-
-  return (
-    <AnimatePresence>
-      {isVisible && (
-        <motion.div
-          initial={{ height: 0 }}
-          animate={{ height: 'auto' }}
-          exit={{ height: 0 }}
-          transition={{ duration: 0.1 }}
-          className={styles.snackbar}
-          {...restProps}
-        >
-          <div className={styles.container}>
-            <p className={styles.supportingText}>{message}</p>
-            <IconButton
-              onClick={() => handleClose()}
-              className={styles.icon}
-              icon={closeIcon}
-              label={'close the snackbar'}
-            ></IconButton>
-          </div>
-        </motion.div>
-      )}
-    </AnimatePresence>
-  );
-};

package/src/lib/components/Switch.tsx

@@ -1,107 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-
-import { Icon } from '../icon';
-import { motion } from 'motion/react';
-import { SwitchInterface } from '../interfaces/switch.interface';
-import { useSwitchStyle } from '../styles/switch.style';
-import { MotionProps } from '../utils/component';
-
-/**
- * Switches toggle the selection of an item on or off
- * @status beta
- * @category Input
- * @devx
- * - `selected` is used as initial state only; prop changes won’t sync.
- * @a11y
- * - Uses `role="switch"` but no label prop is exposed here.
- */
-export const Switch = ({
-  selected = false,
-  className,
-  activeIcon,
-  disabled = false,
-  inactiveIcon,
-  onChange,
-  onClick,
-  onKeyDown,
-  ref,
-  ...restProps
-}: MotionProps<SwitchInterface>) => {
-  const [isSelected, setIsSelected] = useState(selected);
-
-  useEffect(() => {
-    setIsSelected(selected);
-  }, [selected]);
-
-  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    toggleSwitchState();
-    if (onClick) {
-      onClick(event);
-    }
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    if (event.key === ' ' || event.key === 'Enter') {
-      event.preventDefault();
-      toggleSwitchState();
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-
-  const toggleSwitchState = () => {
-    setIsSelected(!isSelected);
-    onChange?.(!isSelected);
-  };
-  const styles = useSwitchStyle({
-    className,
-    isSelected,
-    activeIcon,
-    inactiveIcon,
-    disabled,
-    selected: isSelected,
-    onChange,
-  });
-
-  const defaultRef = useRef<HTMLDivElement>(null);
-  const resolvedRef: React.RefObject<any> | React.ForwardedRef<any> =
-    ref || defaultRef;
-
-  return (
-    <motion.div
-      role="switch"
-      aria-checked={isSelected}
-      tabIndex={disabled ? -1 : 0}
-      onKeyDown={handleKeyDown}
-      onClick={handleClick}
-      ref={resolvedRef}
-      className={styles.switch}
-      {...restProps}
-    >
-      <input type="hidden" value={isSelected ? '1' : '0'} />
-      <motion.div
-        layout
-        style={{ translate: isSelected ? '50%' : '-50%' }}
-        transition={{
-          type: 'spring',
-          stiffness: 700,
-          damping: 30,
-        }}
-        className={styles.handleContainer}
-      >
-        <div className={styles.handle}>
-          {(isSelected ? activeIcon : inactiveIcon) && (
-            <Icon
-              className={styles.icon}
-              icon={isSelected ? activeIcon! : inactiveIcon!}
-            ></Icon>
-          )}
-        </div>
-        <div className={styles.handleStateLayer} />
-      </motion.div>
-    </motion.div>
-  );
-};

package/src/lib/components/Tab.tsx

@@ -1,123 +0,0 @@
-import { motion } from 'motion/react';
-import React, { useEffect, useRef, useState } from 'react';
-
-import { Icon } from '../icon';
-import { useTabStyle } from '../styles/tab.style';
-import { TabInterface } from '../interfaces/tab.interface';
-import { ReactProps } from '../utils/component';
-import { State } from '../effects';
-
-/**
- * @status beta
- * @parent Tabs
- * @devx
- * - `label` can come from string children; selection is index-based.
- * - Use `TabGroup` to sync selection with panels/animations.
- * @a11y
- * - No keyboard navigation or `aria-controls` wiring.
- */
-export const Tab = ({
-  className,
-  onClick,
-  label: labelProp,
-  variant = 'primary',
-  href,
-  icon,
-  selectedTab,
-  setSelectedTab,
-  tabsId,
-  index,
-  onTabSelected,
-  scrollable = false,
-  selected = false,
-  children,
-  ref,
-  ...restProps
-}: ReactProps<TabInterface>) => {
-  const defaultRef = useRef(null);
-  const resolvedRef = ref || defaultRef;
-
-  // children (string) peut être utilisé comme alternative à label prop
-  const label = labelProp ?? (typeof children === 'string' ? children : undefined);
-
-  const [isSelected, setIsSelected] = useState<boolean>(selected);
-
-  useEffect(() => {
-    if (selected && selectedTab == null) {
-      setIsSelected(true);
-    } else {
-      setIsSelected(selectedTab == index && index != null);
-    }
-  }, [selectedTab]);
-
-  useEffect(() => {
-    if (selectedTab == index && onTabSelected) {
-      onTabSelected({
-        ref: resolvedRef as any,
-        index: index || 0,
-        label,
-        icon,
-      });
-    }
-  }, [selectedTab]);
-
-  const ElementType = href ? 'a' : 'button';
-
-  const handleClick = (e: React.MouseEvent<any>) => {
-    if (setSelectedTab) {
-      setSelectedTab(index ?? null);
-    }
-    if (onClick) {
-      onClick(e);
-    }
-  };
-
-  const styles = useTabStyle({
-    className,
-    onTabSelected,
-    scrollable,
-    selectedTab,
-    index,
-    tabsId,
-    selected: isSelected,
-    variant,
-    icon,
-    label,
-    isSelected,
-    setSelectedTab,
-    href: href as any,
-  });
-
-  return (
-    <ElementType
-      {...restProps}
-      role="tab"
-      aria-selected={isSelected}
-      ref={resolvedRef}
-      href={href}
-      className={styles.tab}
-      onClick={handleClick}
-      {...(restProps as any)}
-    >
-      <State
-        style={{ transition: 0.3 + 's' }}
-        className={styles.stateLayer}
-        colorName={
-          variant === 'primary' && isSelected ? 'primary' : 'on-surface'
-        }
-        stateClassName={'state-ripple-group-[tab]'}
-      />
-      <span className={styles.content}>
-        {icon && <Icon icon={icon} className={styles.icon} />}
-        <span className={styles.label}>{label}</span>
-        {isSelected && (
-          <motion.span
-            layoutId={`underline-${tabsId}`}
-            className={styles.underline}
-            transition={{ duration: 0.3 }}
-          />
-        )}
-      </span>
-    </ElementType>
-  );
-};