@udixio/ui-react 0.4.2 → 1.0.0

package/src/lib/components/NavigationRail.tsx

@@ -0,0 +1,177 @@
+import {
+  Children,
+  cloneElement,
+  Fragment,
+  isValidElement,
+  ReactElement,
+  ReactNode,
+  RefObject,
+  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';
+
+/**
+ * Navigation rails let people switch between UI views on mid-sized devices
+ * @status beta
+ * @category Navigation
+ */
+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 = useRef<HTMLDivElement | null>(null);
+
+  const handleOnItemSelected = (
+    args: { index: number } & Pick<
+      ReactProps<NavigationRailItemInterface>,
+      'label' | 'icon'
+    > & {
+        ref: RefObject<any>;
+      },
+  ) => {
+    onItemSelected?.(args);
+  };
+
+  function flattenChildren(children: ReactNode): ReactNode[] {
+    const flatChildren: ReactNode[] = [];
+    Children.forEach(children, (child) => {
+      if (
+        isValidElement<{ children?: ReactNode }>(child) &&
+        child.type === Fragment
+      ) {
+        flatChildren.push(...flattenChildren(child.props.children));
+      } else {
+        flatChildren.push(child);
+      }
+    });
+    return flatChildren;
+  }
+
+  const childrenArray = flattenChildren(children);
+
+  const fab = childrenArray.filter(
+    (child) => 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)}
+          label={isExtended ? menu?.opened.label : menu?.closed.label}
+          className={styles.menuIcon}
+          icon={!isExtended ? menu?.closed.icon : menu.opened.icon}
+        />
+        {fab.length > 0 &&
+          cloneElement(fab[0] as 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 (isValidElement(child) && child.type === NavigationRailItem) {
+              return cloneElement(
+                child as 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 (isValidElement(child) && child.type === Fab) {
+              return null;
+            }
+            if (isValidElement(child) && child.type === NavigationRailSection) {
+              extendedOnly.current = true;
+              if (!isExtended) return null;
+              return cloneElement(child as ReactElement<{ label: string }>, {});
+            }
+            return child;
+          });
+        })()}
+      </div>
+      <div className={'flex-1 max-h-[160px]'}></div>
+    </div>
+  );
+};

package/src/lib/components/NavigationRailItem.tsx

@@ -0,0 +1,211 @@
+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';
+
+/**
+ * @status beta
+ * @parent NavigationRail
+ */
+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>
+  );
+};
+
+/**
+ * @status beta
+ * @parent NavigationRail
+ */
+export const NavigationRailItem = ({
+  className,
+  onClick,
+  label,
+  variant = 'vertical',
+  href,
+  icon,
+  selectedItem,
+  setSelectedItem,
+  index,
+  onItemSelected,
+  selected = false,
+  ref,
+  transition,
+  isExtended,
+  iconSelected,
+  style,
+  extendedOnly,
+  children,
+  ...restProps
+}: ReactProps<NavigationRailItemInterface>) => {
+  if (children) label = children;
+
+  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,
+    children: label,
+    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,154 @@
+import { 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';
+
+/**
+ * @status beta
+ * @category Communication
+ */
+export const ProgressIndicator = ({
+  variant = 'linear-determinate',
+  value = 0,
+  transitionDuration = 1000,
+  className,
+  ...restProps
+}: ReactProps<ProgressIndicatorInterface>): any => {
+  const [completedPercentage, setCompletedPercentage] = useState(value);
+
+  const [transitionRotate] = 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);
+    }
+    return;
+  }, [variant, togglePercentage, completedPercentage]);
+
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    if (completedPercentage >= 100) {
+      const timeoutId = setTimeout(() => {
+        setIsVisible(false);
+      }, transitionDuration);
+      return () => {
+        clearTimeout(timeoutId);
+      };
+    } else {
+      setIsVisible(true);
+    }
+    return;
+  }, [completedPercentage, transitionDuration]);
+
+  const styles = progressIndicatorStyle({
+    className,
+    variant,
+    value,
+    transitionDuration,
+    isVisible,
+  });
+
+  return (
+    <>
+      {(variant === 'linear-determinate' ||
+        variant == 'linear-indeterminate') && (
+        <div className={styles.progressIndicator} {...restProps}>
+          <div
+            style={{
+              width: `${completedPercentage}%`,
+              transition: `width ${transitionDuration}ms ease-in-out ${completedPercentage == 100 ? ', max-height 200ms 0.5s ease-in-out' : ''}`,
+            }}
+            className={styles.track}
+          ></div>
+          <div
+            style={{
+              marginLeft: completedPercentage != 100 ? '6px' : '0px',
+              transition: `width ${transitionDuration}ms ease-in-out ${completedPercentage == 100 ? `, max-height 200ms 0.5s ease-in-out, margin-left ${transitionDuration}ms ${transitionDuration / 1.5}ms` : ''}`,
+            }}
+            className={styles.activeIndicator}
+          ></div>
+          <div
+            style={{
+              width: `4 px`,
+              transition: `width ${transitionDuration}ms ease-in-out, max-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>
+      )}
+    </>
+  );
+};