@udixio/ui-react 0.0.1 → 0.1.0

package/src/lib/components/NavigationRailItem.tsx

@@ -0,0 +1,199 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Icon } from '../icon';
+import { ReactProps } from '../utils';
+import { NavigationRailItemInterface } from '../interfaces';
+import { navigationRailItemStyle } from '../styles/navigation-rail-item.style';
+import { AnimatePresence, motion } from 'motion/react';
+
+export const NavigationRailSection = ({ label }: { label: string }) => {
+  return (
+    <div className={' h-9 flex items-center mx-9 mt-3'}>
+      <p className={'text-label-large text-on-surface-variant'}>{label}</p>
+    </div>
+  );
+};
+
+export const NavigationRailItem = ({
+  className,
+  onClick,
+  label,
+  variant = 'vertical',
+  href,
+  icon,
+  selectedItem,
+  setSelectedItem,
+  index,
+  onItemSelected,
+  selected = false,
+  ref,
+  transition,
+  isExtended,
+  iconSelected,
+  style,
+  extendedOnly,
+  ...restProps
+}: ReactProps<NavigationRailItemInterface>) => {
+  const defaultRef = useRef<any>(null);
+  const resolvedRef = ref || defaultRef;
+
+  const [isSelected, setIsSelected] = useState<boolean>(selected);
+
+  useEffect(() => {
+    if (selected && selectedItem == null) {
+      setIsSelected(true);
+    } else {
+      setIsSelected(selectedItem == index && index != null);
+    }
+  }, [selectedItem]);
+
+  useEffect(() => {
+    if (selectedItem == index && onItemSelected) {
+      onItemSelected({
+        ref: resolvedRef as any,
+        index: index || 0,
+        label,
+        icon,
+      });
+    }
+  }, [selectedItem]);
+
+  const ElementType = href ? 'a' : 'button';
+
+  const handleClick = (e: React.MouseEvent<any>) => {
+    if (setSelectedItem) {
+      setSelectedItem(index ?? null);
+    }
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const styles = navigationRailItemStyle({
+    isExtended,
+    extendedOnly,
+    className,
+    onItemSelected,
+    selectedItem,
+    index,
+    transition,
+    selected: isSelected,
+    variant,
+    icon,
+    label,
+    isSelected,
+    setSelectedItem,
+    href: href as any,
+    iconSelected,
+  });
+
+  transition = { duration: 0.3, ...transition };
+
+  if (extendedOnly && !isExtended) return null;
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    <ElementType
+      {...restProps}
+      role="tab"
+      aria-selected={isSelected}
+      ref={resolvedRef}
+      href={href}
+      className={styles.navigationRailItem}
+      onClick={handleClick}
+      style={{ transition: transition.duration + 's', ...style }}
+    >
+      <motion.div
+        style={{
+          transition:
+            variant == 'horizontal'
+              ? transition.duration +
+                `s, gap ${transition.duration! / 2}s ${transition.duration! - transition.duration! / 2}s`
+              : transition.duration +
+                `s, gap ${transition.duration! / 3}s ${transition.duration! - transition.duration! / 3}s`,
+        }}
+        transition={transition}
+        className={styles.container}
+      >
+        <motion.div layout className={styles.stateLayer}></motion.div>
+        {icon && (
+          <Icon
+            icon={isSelected ? iconSelected : icon}
+            className={styles.icon}
+          />
+        )}
+        <AnimatePresence>
+          {variant == 'horizontal' &&
+            (() => {
+              const initial = {
+                width: 0,
+                opacity: 0,
+                transition: {
+                  ...transition,
+                },
+              };
+              const animate = {
+                width: 'auto',
+                opacity: 1,
+                transition: {
+                  ...transition,
+                  opacity: {
+                    duration: transition.duration! / 2,
+                    delay: transition.duration! - transition.duration! / 2,
+                  },
+                },
+              };
+              return (
+                <motion.span
+                  initial={initial}
+                  animate={animate}
+                  exit={initial}
+                  className={styles.label}
+                >
+                  {label}
+                </motion.span>
+              );
+            })()}
+        </AnimatePresence>
+      </motion.div>
+      <AnimatePresence>
+        {variant == 'vertical' &&
+          (() => {
+            const initial = {
+              height: 0,
+              opacity: 0,
+              transition: {
+                ...transition,
+                opacity: {
+                  duration: 0,
+                },
+              },
+            };
+            const animate = {
+              height: 'auto',
+              opacity: 1,
+              transition: {
+                ...transition,
+                opacity: {
+                  duration: transition.duration! / 3,
+                  delay: transition.duration! - transition.duration! / 3,
+                },
+              },
+            };
+            return (
+              <motion.span
+                initial={initial}
+                animate={animate}
+                exit={initial}
+                className={styles.label}
+                transition={transition}
+              >
+                {label}
+              </motion.span>
+            );
+          })()}
+      </AnimatePresence>
+    </ElementType>
+  );
+};

package/src/lib/components/ProgressIndicator.tsx

@@ -0,0 +1,157 @@
+import React, { useEffect, useState } from 'react';
+import { ProgressIndicatorInterface } from '../interfaces/progress-indicator.interface';
+
+import { motion } from 'motion/react';
+import { progressIndicatorStyle } from '../styles/progress-indicator.style';
+import { ReactProps } from '../utils/component';
+
+export const ProgressIndicator = ({
+  variant = 'linear-determinate',
+  minHeight = 4,
+  value = 0,
+  transitionDuration = 1000,
+  className,
+  ...restProps
+}: ReactProps<ProgressIndicatorInterface>): any => {
+  const [completedPercentage, setCompletedPercentage] = useState(value);
+
+  const [transitionRotate, setTransitionRotate] = useState(1.5);
+
+  useEffect(() => {
+    if (value > 100) {
+      value = 100;
+    }
+    if (value < 0) {
+      value = 0;
+    }
+    setCompletedPercentage(value);
+  }, [value]);
+
+  const [togglePercentage, setTogglePercentage] = useState(true);
+
+  const getTransitionRotate = () => {
+    return togglePercentage ? transitionRotate : transitionRotate * 0.5;
+  };
+
+  useEffect(() => {
+    if (
+      (variant === 'circular-indeterminate' ||
+        variant === 'linear-indeterminate') &&
+      completedPercentage !== 100
+    ) {
+      const interval = setInterval(() => {
+        setCompletedPercentage(togglePercentage ? 10 : 90);
+        setTogglePercentage(!togglePercentage);
+      }, getTransitionRotate() * 1000);
+      return () => clearInterval(interval);
+    }
+  }, [variant, togglePercentage, completedPercentage]);
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (completedPercentage >= 100) {
+      const timeoutId = setTimeout(() => {
+        setIsVisible(false);
+      }, transitionDuration);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    } else {
+      setIsVisible(true);
+    }
+  }, [completedPercentage, transitionDuration]);
+
+  const styles = progressIndicatorStyle({
+    className,
+    variant,
+    value,
+    transitionDuration,
+    isVisible,
+    minHeight,
+  });
+
+  return (
+    <>
+      {(variant === 'linear-determinate' ||
+        variant == 'linear-indeterminate') && (
+        <div
+          style={{ height: `${minHeight}px` }}
+          className={styles.progressIndicator}
+          {...restProps}
+        >
+          <div
+            style={{
+              height: !isVisible ? '0px' : `${minHeight}px`,
+              width: `${completedPercentage}%`,
+              transition: `width ${1}ms ease-in-out ${completedPercentage == 100 ? ', height 200ms 0.5s ease-in-out' : ''}`,
+            }}
+            className={styles.track}
+          ></div>
+          <div
+            style={{
+              height: !isVisible ? '0px' : `${minHeight}px`,
+              marginLeft: completedPercentage != 100 ? '6px' : '0px',
+              transition: `width ${transitionDuration}ms ease-in-out ${completedPercentage == 100 ? `, height 200ms 0.5s ease-in-out, margin-left ${transitionDuration}ms ${transitionDuration / 1.5}ms` : ''}`,
+            }}
+            className={styles.activeIndicator}
+          ></div>
+          <div
+            style={{
+              height: !isVisible ? '0px' : `${minHeight}px`,
+              width: `${minHeight}px`,
+              transition: `width ${transitionDuration}ms ease-in-out, height 200ms 0.5s ease-in-out`,
+            }}
+            className={styles.stop}
+          ></div>
+        </div>
+      )}
+      {(variant === 'circular-determinate' ||
+        variant == 'circular-indeterminate') && (
+        <motion.svg
+          key={togglePercentage + ''}
+          width="48"
+          height="48"
+          viewBox="0 0 48 48"
+          initial={{ rotate: -90 }}
+          animate={{ rotate: 270 }}
+          transition={{
+            repeat: Infinity,
+            duration: getTransitionRotate(),
+            ease: 'linear',
+          }}
+          className={styles.progressIndicator}
+          {...(restProps as any)}
+        >
+          <motion.circle
+            cx="50%"
+            cy="50%"
+            r={isVisible ? 'calc(50% - 2px)' : '50%'}
+            style={{
+              strokeLinecap: 'round',
+            }}
+            initial="hidden"
+            animate="visible"
+            className={styles.activeIndicator}
+            variants={{
+              hidden: {
+                pathLength: togglePercentage ? 10 / 100 : 90 / 100,
+              },
+              visible: {
+                pathLength: togglePercentage ? 90 / 100 : 10 / 100,
+              },
+            }}
+            transition={{
+              pathLength: {
+                type: 'tween',
+                ease: 'linear',
+                duration: getTransitionRotate(),
+                bounce: 0,
+              },
+            }}
+          />
+        </motion.svg>
+      )}
+    </>
+  );
+};

package/src/lib/components/Slider.tsx

@@ -0,0 +1,361 @@
+import { AnimatePresence, motion } from 'motion/react';
+import { SliderInterface } from '../interfaces';
+import { sliderStyle } from '../styles';
+import { classNames, ReactProps } from '../utils';
+import { useEffect, useRef, useState } from 'react';
+
+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 getPourcentFromValue = (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 getValueFromPourcent = (pourcent: number) => {
+    const min = getMin(false);
+    const max = getMax(false);
+    return ((max - min) * pourcent) / 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 [pourcent, setPourcent] = useState(getPourcentFromValue(defaultValue));
+  const [mouseDown, setMouseDown] = useState(false);
+  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 = sliderStyle({
+    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 pourcent = ((clientX - refPosition) / current.offsetWidth) * 100;
+
+      updateSliderValues({ pourcent });
+    }
+  };
+  const updateSliderValues = ({
+    pourcent,
+    value,
+  }: {
+    pourcent?: number;
+    value?: number;
+  }) => {
+    if (pourcent) {
+      if (pourcent >= 100) {
+        setValue(getMax(true));
+        setPourcent(100);
+        return;
+      }
+      if (pourcent <= 0) {
+        setValue(getMin(true));
+        setPourcent(0);
+        return;
+      }
+
+      value = getValueFromPourcent(pourcent);
+      if (value == getMin()) {
+        value = getMin(true);
+      }
+      if (value == getMax()) {
+        value = getMax(true);
+      }
+    } else if (value != undefined) {
+      if (value >= getMax()) {
+        setValue(getMax(true));
+        setPourcent(100);
+        return;
+      }
+      if (value <= getMin()) {
+        setValue(getMin(true));
+        setPourcent(0);
+        return;
+      }
+      pourcent = getPourcentFromValue(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);
+    }
+
+    pourcent = getPourcentFromValue(value);
+
+    setValue(value);
+    setPourcent(pourcent);
+    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: pourcent / 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 - pourcent / 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 = getPourcentFromValue(mark.value);
+
+            if (markPercent <= pourcent - handleAndGapPercent) {
+              isUnderActiveTrack = true;
+            } else if (markPercent >= pourcent + handleAndGapPercent) {
+              isUnderActiveTrack = false;
+            }
+            return (
+              <div
+                key={index}
+                className={classNames(styles.dot, {
+                  'bg-primary-container':
+                    isUnderActiveTrack != null && isUnderActiveTrack,
+                  'bg-primary':
+                    isUnderActiveTrack != null && !isUnderActiveTrack,
+                })}
+                style={{
+                  left: `${getPourcentFromValue(mark.value)}%`,
+                }}
+              ></div>
+            );
+          })}
+      </div>
+    </div>
+  );
+};