@udixio/ui-react 0.1.2 → 0.2.0

package/src/lib/components/Carousel.tsx

@@ -8,6 +8,12 @@ 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,
@@ -37,7 +43,7 @@ export const Carousel = ({
   });
 
   const items = React.Children.toArray(children).filter(
-    (child) => React.isValidElement(child) && child.type === CarouselItem
+    (child) => React.isValidElement(child) && child.type === CarouselItem,
   );
 
   const trackRef = useRef<HTMLDivElement>(null);
@@ -55,10 +61,10 @@ export const Carousel = ({
 
     function assignRelativeIndexes(
       values: number[],
-      progressScroll: number
+      progressScroll: number,
     ): number[] {
       return values.map(
-        (value) => (value - progressScroll) / Math.abs(values[1] - values[0])
+        (value) => (value - progressScroll) / Math.abs(values[1] - values[0]),
       );
     }
 
@@ -117,7 +123,7 @@ export const Carousel = ({
         ref: itemRefs[index],
         key: index,
         index,
-      }
+      },
     );
   });
 
@@ -130,12 +136,12 @@ export const Carousel = ({
       0,
       1 -
         (ref.current?.clientWidth ?? 0) / (trackRef?.current?.clientWidth ?? 0),
-    ]
+    ],
   );
 
   const percentTransform = useTransform(
     transform,
-    (value) => `${-value * 100}%`
+    (value) => `${-value * 100}%`,
   );
 
   const handleScroll = (args: {

package/src/lib/components/CarouselItem.tsx

@@ -7,7 +7,7 @@ import { MotionProps } from '../utils';
 export const normalize = (
   value: number,
   inputRange: [number, number],
-  outputRange: [number, number] = [0, 1]
+  outputRange: [number, number] = [0, 1],
 ): number => {
   const [inputMin, inputMax] = inputRange;
   const [outputMin, outputMax] = outputRange;
@@ -18,6 +18,11 @@ export const normalize = (
 
   return outputMin + normalizedValue * (outputMax - outputMin);
 };
+
+/**
+ * @status beta
+ * @parent Carousel
+ */
 export const CarouselItem = ({
   className,
   children,

package/src/lib/components/{Divided.tsx → Divider.tsx}

@@ -2,6 +2,11 @@ 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,

package/src/lib/components/Fab.tsx

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import { Icon } from '../icon';
 
 import { RippleEffect } from '../effects/ripple';
@@ -9,6 +9,11 @@ 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,

package/src/lib/components/IconButton.tsx

@@ -10,13 +10,18 @@ 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,
-  arialLabel,
+  ariaLabel,
   onToggle,
   activated = false,
   onClick,
@@ -32,12 +37,12 @@ export const IconButton = ({
   ...restProps
 }: ReactProps<IconButtonInterface>) => {
   if (!title) {
-    title = arialLabel;
+    title = ariaLabel;
   }
 
   const [isActive, setIsActive] = React.useState(activated);
-  let handleClick;
 
+  let handleClick;
   if (!onToggle) {
     handleClick = (e: React.MouseEvent<any, MouseEvent>) => {
       if (disabled) {
@@ -70,8 +75,8 @@ export const IconButton = ({
     allowShapeTransformation,
     width,
     href,
-    activated,
-    arialLabel,
+    activated: isActive,
+    ariaLabel,
     iconSelected,
     isActive,
     onToggle,
@@ -93,7 +98,7 @@ export const IconButton = ({
       disabled={disabled}
       href={href}
       className={styles.iconButton}
-      aria-label={arialLabel}
+      aria-label={ariaLabel}
       {...(restProps as any)}
       title={undefined}
       onClick={handleClick}
@@ -127,7 +132,7 @@ export const IconButton = ({
                 variant === 'outlined' && {
                   'on-surface-variant': !isActive,
                   'on-primary': isActive,
-                }
+                },
               )}
               triggerRef={resolvedRef}
             />

package/src/lib/components/NavigationRail.tsx

@@ -1,9 +1,17 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { ReactProps } from '../utils';
 import {
-  NavigationRailItem,
-  NavigationRailSection,
-} from './NavigationRailItem';
+  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';
@@ -11,6 +19,11 @@ 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,
@@ -49,25 +62,25 @@ export const NavigationRail = ({
 
   const setSelectedItem = externalSetSelectedItem || internalSetSelectedItem;
 
-  const ref = React.useRef<HTMLDivElement | null>(null);
+  const ref = useRef<HTMLDivElement | null>(null);
 
   const handleOnItemSelected = (
     args: { index: number } & Pick<
       ReactProps<NavigationRailItemInterface>,
       'label' | 'icon'
     > & {
-        ref: React.RefObject<any>;
-      }
+        ref: RefObject<any>;
+      },
   ) => {
     onItemSelected?.(args);
   };
 
-  function flattenChildren(children: React.ReactNode): React.ReactNode[] {
-    const flatChildren: React.ReactNode[] = [];
-    React.Children.forEach(children, (child) => {
+  function flattenChildren(children: ReactNode): ReactNode[] {
+    const flatChildren: ReactNode[] = [];
+    Children.forEach(children, (child) => {
       if (
-        React.isValidElement<{ children?: React.ReactNode }>(child) &&
-        child.type === React.Fragment
+        isValidElement<{ children?: ReactNode }>(child) &&
+        child.type === Fragment
       ) {
         flatChildren.push(...flattenChildren(child.props.children));
       } else {
@@ -80,7 +93,7 @@ export const NavigationRail = ({
   const childrenArray = flattenChildren(children);
 
   const fab = childrenArray.filter(
-    (child) => React.isValidElement(child) && child.type === Fab
+    (child) => isValidElement(child) && child.type === Fab,
   );
 
   const styles = navigationRailStyle({
@@ -114,33 +127,25 @@ export const NavigationRail = ({
       <div className={styles.header}>
         <IconButton
           onClick={() => setIsExtended(!isExtended)}
-          arialLabel={isExtended ? menu?.opened.label : menu?.closed.label}
+          ariaLabel={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,
-            }
-          )}
+          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 (
-              React.isValidElement(child) &&
-              child.type === NavigationRailItem
-            ) {
-              return React.cloneElement(
-                child as React.ReactElement<
-                  ReactProps<NavigationRailItemInterface>
-                >,
+            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é
@@ -151,22 +156,16 @@ export const NavigationRail = ({
                   transition,
                   extendedOnly: extendedOnly.current,
                   isExtended,
-                }
+                },
               );
             }
-            if (React.isValidElement(child) && child.type === Fab) {
+            if (isValidElement(child) && child.type === Fab) {
               return null;
             }
-            if (
-              React.isValidElement(child) &&
-              child.type === NavigationRailSection
-            ) {
+            if (isValidElement(child) && child.type === NavigationRailSection) {
               extendedOnly.current = true;
               if (!isExtended) return null;
-              return React.cloneElement(
-                child as React.ReactElement<{ label: string }>,
-                {}
-              );
+              return cloneElement(child as ReactElement<{ label: string }>, {});
             }
             return child;
           });

package/src/lib/components/NavigationRailItem.tsx

@@ -6,6 +6,10 @@ 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'}>
@@ -14,6 +18,10 @@ export const NavigationRailSection = ({ label }: { label: string }) => {
   );
 };
 
+/**
+ * @status beta
+ * @parent NavigationRail
+ */
 export const NavigationRailItem = ({
   className,
   onClick,

package/src/lib/components/ProgressIndicator.tsx

@@ -1,10 +1,14 @@
-import React, { useEffect, useState } from 'react';
+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',
   minHeight = 4,
@@ -15,7 +19,7 @@ export const ProgressIndicator = ({
 }: ReactProps<ProgressIndicatorInterface>): any => {
   const [completedPercentage, setCompletedPercentage] = useState(value);
 
-  const [transitionRotate, setTransitionRotate] = useState(1.5);
+  const [transitionRotate] = useState(1.5);
 
   useEffect(() => {
     if (value > 100) {
@@ -45,6 +49,7 @@ export const ProgressIndicator = ({
       }, getTransitionRotate() * 1000);
       return () => clearInterval(interval);
     }
+    return;
   }, [variant, togglePercentage, completedPercentage]);
 
   const [isVisible, setIsVisible] = useState(false);
@@ -60,6 +65,7 @@ export const ProgressIndicator = ({
     } else {
       setIsVisible(true);
     }
+    return;
   }, [completedPercentage, transitionDuration]);
 
   const styles = progressIndicatorStyle({

package/src/lib/components/Slider.tsx

@@ -4,6 +4,11 @@ import { sliderStyle } 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
+ */
 export const Slider = ({
   className,
   valueFormatter,

package/src/lib/components/Snackbar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+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';
@@ -7,6 +7,11 @@ import { snackbarStyle } 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
+ */
 export const Snackbar = ({
   supportingText,
   className,
@@ -56,7 +61,7 @@ export const Snackbar = ({
               onClick={() => handleClose()}
               className={styles.icon}
               icon={closeIcon}
-              arialLabel={'close the snackbar'}
+              ariaLabel={'close the snackbar'}
             ></IconButton>
           </div>
         </motion.div>

package/src/lib/components/Switch.tsx

@@ -6,6 +6,11 @@ import { SwitchInterface } from '../interfaces/switch.interface';
 import { switchStyle } from '../styles/switch.style';
 import { MotionProps } from '../utils/component';
 
+/**
+ * Switches toggle the selection of an item on or off
+ * @status beta
+ * @category Input
+ */
 export const Switch = ({
   selected = false,
   className,

package/src/lib/components/Tab.tsx

@@ -7,6 +7,10 @@ import { tabStyle } from '../styles/tab.style';
 import { TabInterface } from '../interfaces/tab.interface';
 import { ReactProps } from '../utils/component';
 
+/**
+ * @status beta
+ * @parent Tabs
+ */
 export const Tab = ({
   className,
   onClick,

package/src/lib/components/Tabs.tsx

@@ -7,6 +7,11 @@ import { ReactProps } from '../utils/component';
 import { TabProps } from '../interfaces/tab.interface';
 import { Tab } from './Tab';
 
+/**
+ * Tabs organize content across different screens and views
+ * @status beta
+ * @category Navigation
+ */
 export const Tabs = ({
   variant = 'primary',
   onTabSelected,
@@ -17,7 +22,7 @@ export const Tabs = ({
   scrollable = false,
 }: ReactProps<TabsInterface>) => {
   const [internalSelectedTab, internalSetSelectedTab] = useState<number | null>(
-    null
+    null,
   );
 
   let selectedTab: number | null;
@@ -30,7 +35,7 @@ export const Tabs = ({
   const setSelectedTab = externalSetSelectedTab || internalSetSelectedTab;
 
   const tabChildren = React.Children.toArray(children).filter(
-    (child) => React.isValidElement(child) && child.type === Tab
+    (child) => React.isValidElement(child) && child.type === Tab,
   );
 
   const ref = React.useRef<HTMLDivElement | null>(null);
@@ -38,7 +43,7 @@ export const Tabs = ({
   const handleOnTabSelected = (
     args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
         ref: React.RefObject<any>;
-      }
+      },
   ) => {
     onTabSelected?.(args);
 

package/src/lib/components/TextField.tsx

@@ -10,6 +10,11 @@ import { classNames } from '../utils';
 import { ReactProps } from '../utils/component';
 import { TextFieldInterface } from '../interfaces/text-field.interface';
 
+/**
+ * Text fields let users enter text into a UI
+ * @status beta
+ * @category Input
+ */
 export const TextField = ({
   variant = 'filled',
   disabled = false,
@@ -34,7 +39,7 @@ export const TextField = ({
   const [isFocused, setIsFocused] = useState(false);
   const [showErrorIcon, setShowErrorIcon] = useState(false);
   const [showSupportingText, setShowSupportingText] = useState(
-    defaultShowSupportingText
+    defaultShowSupportingText,
   );
 
   useEffect(() => {
@@ -80,7 +85,7 @@ export const TextField = ({
   };
 
   const handleChange = (
-    event: React.ChangeEvent<HTMLInputElement & HTMLTextAreaElement>
+    event: React.ChangeEvent<HTMLInputElement & HTMLTextAreaElement>,
   ) => {
     const newValue = event.target.value;
     setValue(newValue); // Update local state
@@ -187,7 +192,7 @@ export const TextField = ({
                   'text-body-large top-1/2 transform -translate-y-1/2': !(
                     variant == 'filled' && !(!isFocused && !value.length)
                   ),
-                }
+                },
               )}
               transition={{ duration: 0.3 }}
             >

package/src/lib/components/ToolTip.tsx

@@ -1,10 +1,4 @@
-import {
-  cloneElement,
-  isValidElement,
-  useEffect,
-  useRef,
-  useState,
-} from 'react';
+import { cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
 import { MotionProps } from '../utils';
 import { Button } from './Button';
 import { ToolTipInterface } from '../interfaces';
@@ -13,6 +7,11 @@ import { v4 } from 'uuid';
 import { AnimatePresence, motion } from 'motion/react';
 import { SyncedFixedWrapper } from '../effects';
 
+/**
+ * Tooltips display brief labels or messages
+ * @status beta
+ * @category Communication
+ */
 export const ToolTip = ({
   variant = 'plain',
   buttons,
@@ -55,7 +54,7 @@ export const ToolTip = ({
     return () => {
       document.removeEventListener(
         'tooltip-update',
-        handleUpdate as EventListener
+        handleUpdate as EventListener,
       );
     };
   }, []);
@@ -130,6 +129,7 @@ export const ToolTip = ({
         targetElement.removeEventListener('blur', handleBlur);
       };
     }
+    return;
   }, [resolvedRef, trigger, id, isVisible]);
 
   // Si targetRef est undefined, on applique la réf au premier enfant

package/src/lib/components/index.ts

@@ -3,7 +3,7 @@ export * from './Card';
 export * from './Carousel';
 export * from './CarouselItem';
 export * from './CarouselItem';
-export * from './Divided';
+export * from './Divider';
 export * from './Fab';
 export * from './IconButton';
 export * from './IconButton';

package/src/lib/effects/SyncedFixedWrapper.tsx

@@ -25,8 +25,6 @@ export const SyncedFixedWrapper = ({
 
     const rect = target.getBoundingClientRect();
 
-    console.log(target);
-
     setStyle({
       position: 'fixed',
       top: rect.top,

package/src/lib/interfaces/button.interface.ts

@@ -37,10 +37,16 @@ type Props = {
   allowShapeTransformation?: boolean;
 
   transition?: Transition;
+
+  onToggle?: (isActive: boolean) => void;
+  activated?: boolean;
 };
 
 type Elements = ['button', 'stateLayer', 'container', 'icon', 'label'];
 
 export type ButtonInterface = ActionOrLink<Props> & {
   elements: Elements;
+  states: {
+    isActive: boolean;
+  };
 };

package/src/lib/interfaces/icon-button.interface.ts

@@ -4,7 +4,7 @@ import { ActionOrLink } from '../utils/component';
 import { Transition } from 'motion';
 
 type Props = {
-  arialLabel: string;
+  ariaLabel: string;
   icon: IconDefinition;
   size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
   width?: 'default' | 'narrow' | 'wide';