@udixio/ui-react 0.4.2 → 1.0.0

package/src/lib/components/Tabs.tsx

@@ -0,0 +1,90 @@
+import React, { useMemo, useState } from 'react';
+import { v4 as uuidv4 } from 'uuid';
+import { TabsInterface } from '../interfaces/tabs.interface';
+
+import { tabsStyle } from '../styles/tabs.style';
+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,
+  children,
+  className,
+  selectedTab: externalSelectedTab,
+  setSelectedTab: externalSetSelectedTab,
+  scrollable = false,
+}: ReactProps<TabsInterface>) => {
+  const [internalSelectedTab, internalSetSelectedTab] = useState<number | null>(
+    null,
+  );
+
+  let selectedTab: number | null;
+  if (externalSelectedTab == 0 || externalSelectedTab != undefined) {
+    selectedTab = externalSelectedTab;
+  } else {
+    selectedTab = internalSelectedTab;
+  }
+
+  const setSelectedTab = externalSetSelectedTab || internalSetSelectedTab;
+
+  const tabChildren = React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child) && child.type === Tab,
+  );
+
+  const ref = React.useRef<HTMLDivElement | null>(null);
+
+  const handleOnTabSelected = (
+    args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
+        ref: React.RefObject<any>;
+      },
+  ) => {
+    onTabSelected?.(args);
+
+    if (scrollable) {
+      const tabs: HTMLElement = ref.current!;
+      const tabSelected: HTMLElement = args.ref.current;
+      if (tabs && tabSelected) {
+        const scrollLeft =
+          tabSelected.offsetLeft +
+          tabSelected.offsetWidth / 2 -
+          tabs.offsetWidth / 2;
+        tabs.scrollTo({ left: scrollLeft, behavior: 'smooth' });
+      }
+    }
+  };
+
+  const tabsId = useMemo(() => uuidv4(), []);
+
+  const styles = tabsStyle({
+    children,
+    onTabSelected,
+    scrollable,
+    selectedTab,
+    setSelectedTab,
+    className,
+    variant,
+  });
+  return (
+    <div ref={ref} role="tablist" className={styles.tabs}>
+      {tabChildren.map((child, index) => {
+        return React.cloneElement(child as React.ReactElement<TabProps>, {
+          key: index,
+          index,
+          variant: variant,
+          selectedTab,
+          setSelectedTab: setSelectedTab,
+          tabsId: tabsId,
+          onTabSelected: handleOnTabSelected,
+          scrollable,
+        });
+      })}
+    </div>
+  );
+};

package/src/lib/components/TextField.tsx

@@ -0,0 +1,274 @@
+import React, { useEffect, useState } from 'react';
+import { Icon } from '../icon';
+import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
+import { motion } from 'motion/react';
+import { v4 as uuidv4 } from 'uuid';
+
+import TextareaAutosize from 'react-textarea-autosize';
+import { textFieldStyle } from '../styles/text-field.style';
+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,
+  errorText,
+  placeholder,
+  suffix,
+  name,
+  label,
+  className,
+  supportingText,
+  trailingIcon,
+  leadingIcon,
+  type = 'text',
+  textLine = 'singleLine',
+  autoComplete = 'on',
+  onChange,
+  value: defaultValue,
+  showSupportingText: defaultShowSupportingText = false,
+  ...restProps
+}: ReactProps<TextFieldInterface>) => {
+  const [value, setValue] = useState(defaultValue ?? '');
+  const [isFocused, setIsFocused] = useState(false);
+  const [showErrorIcon, setShowErrorIcon] = useState(false);
+  const [showSupportingText, setShowSupportingText] = useState(
+    defaultShowSupportingText,
+  );
+
+  useEffect(() => {
+    setValue(defaultValue ?? '');
+  }, [defaultValue]);
+
+  useEffect(() => {
+    if (errorText?.length) {
+      setShowErrorIcon(true);
+    } else {
+      setShowErrorIcon(false);
+    }
+  }, [errorText]);
+
+  useEffect(() => {
+    if (defaultShowSupportingText) {
+      setShowSupportingText(defaultShowSupportingText);
+    } else {
+      if (supportingText?.length) {
+        setShowSupportingText(true);
+      } else {
+        setShowSupportingText(false);
+      }
+    }
+  }, [showSupportingText, supportingText]);
+
+  useEffect(() => {
+    if (isFocused) {
+      setShowErrorIcon(false);
+    }
+  }, [isFocused]);
+
+  const inputRef = React.useRef<HTMLInputElement & HTMLTextAreaElement>(null);
+
+  const focusInput = () => {
+    if (inputRef.current && !isFocused) {
+      inputRef.current.focus();
+    }
+  };
+
+  const handleOnFocus = () => {
+    setIsFocused(true);
+  };
+
+  const handleChange = (
+    event: React.ChangeEvent<HTMLInputElement & HTMLTextAreaElement>,
+  ) => {
+    const newValue = event.target.value;
+    setValue(newValue); // Update local state
+
+    setShowErrorIcon(false);
+
+    // If external onChange prop is provided, call it with the new value
+    if (typeof onChange === 'function') {
+      onChange(newValue);
+    }
+  };
+
+  const handleBlur = () => {
+    setIsFocused(false);
+  };
+
+  const styles = textFieldStyle({
+    showSupportingText,
+    isFocused,
+    showErrorIcon,
+    disabled,
+    name,
+    label,
+    autoComplete,
+    className,
+    onChange,
+    placeholder,
+    supportingText,
+    type,
+    leadingIcon,
+    trailingIcon,
+    variant,
+    errorText,
+    value,
+    suffix,
+    textLine,
+  });
+
+  const [uuid] = useState(uuidv4());
+
+  let textComponentProps: object;
+  let TextComponent;
+  switch (textLine) {
+    case 'multiLine':
+      TextComponent = TextareaAutosize;
+      textComponentProps = {};
+      break;
+    case 'textAreas':
+      TextComponent = 'textarea';
+      textComponentProps = {};
+      break;
+    case 'singleLine':
+    default:
+      TextComponent = 'input';
+      textComponentProps = { type: type };
+      break;
+  }
+
+  return (
+    <div className={styles.textField} {...restProps}>
+      <fieldset onClick={focusInput} className={styles.content}>
+        <div className={styles.stateLayer}></div>
+        {leadingIcon && (
+          <div className={styles.leadingIcon}>
+            {React.isValidElement(leadingIcon) ? (
+              leadingIcon
+            ) : (
+              <Icon className={'w-5 h-5'} icon={leadingIcon}></Icon>
+            )}
+          </div>
+        )}
+
+        {!((!isFocused && !value.length) || variant == 'filled') && (
+          <motion.legend
+            variants={{
+              hidden: { width: 0, padding: 0 },
+              visible: { width: 'auto', padding: '0 8px' },
+            }}
+            initial={'hidden'}
+            animate={!(!isFocused && !value.length) ? 'visible' : 'hidden'}
+            className={'max-w-full ml-2 px-2 text-body-small h-0'}
+            transition={{ duration: 0.2 }}
+          >
+            <span className={'transform inline-flex -translate-y-1/2'}>
+              <motion.span
+                className={styles.label}
+                transition={{ duration: 0.3 }}
+                layoutId={uuid}
+              >
+                {label}
+              </motion.span>
+            </span>
+          </motion.legend>
+        )}
+        <div className={'flex-1 relative'}>
+          {((!isFocused && !value.length) || variant == 'filled') && (
+            <motion.label
+              htmlFor={name}
+              className={classNames(
+                'absolute left-4  transition-all duration-300',
+                {
+                  'text-body-small top-2':
+                    variant == 'filled' && !(!isFocused && !value.length),
+                  'text-body-large top-1/2 transform -translate-y-1/2': !(
+                    variant == 'filled' && !(!isFocused && !value.length)
+                  ),
+                },
+              )}
+              transition={{ duration: 0.3 }}
+            >
+              <motion.span
+                className={styles.label}
+                transition={{ duration: 0.3 }}
+                layoutId={variant == 'outlined' ? uuid : undefined}
+              >
+                {label}
+              </motion.span>
+            </motion.label>
+          )}
+          <TextComponent
+            ref={inputRef}
+            value={value}
+            onChange={handleChange}
+            className={styles.input}
+            id={name}
+            name={name}
+            placeholder={isFocused ? (placeholder ?? undefined) : ''}
+            onFocus={handleOnFocus}
+            onBlur={handleBlur}
+            disabled={disabled}
+            autoComplete={autoComplete}
+            aria-invalid={!!errorText?.length}
+            aria-label={label}
+            {...textComponentProps}
+          />
+        </div>
+
+        <div className={styles.activeIndicator}></div>
+
+        {!showErrorIcon && (
+          <>
+            {trailingIcon && (
+              <div
+                onClick={(event) => {
+                  event.stopPropagation();
+                }}
+                className={styles.trailingIcon}
+              >
+                {React.isValidElement(trailingIcon) ? (
+                  trailingIcon
+                ) : (
+                  <Icon className={'h-5'} icon={trailingIcon}></Icon>
+                )}
+              </div>
+            )}
+            {!trailingIcon && suffix && (
+              <span className={styles.suffix}>{suffix}</span>
+            )}
+          </>
+        )}
+
+        {showErrorIcon && (
+          <div
+            className={classNames(styles.trailingIcon, {
+              ' absolute right-0': !trailingIcon,
+            })}
+          >
+            <Icon
+              className={'h-5 text-error'}
+              icon={faCircleExclamation}
+            ></Icon>
+          </div>
+        )}
+      </fieldset>
+      {showSupportingText && (
+        <p className={styles.supportingText}>
+          {errorText?.length
+            ? errorText
+            : supportingText?.length
+              ? supportingText
+              : '\u00A0'}
+        </p>
+      )}
+    </div>
+  );
+};

package/src/lib/components/ToolTip.tsx

@@ -0,0 +1,232 @@
+import { cloneElement, isValidElement, useEffect, useRef, useState } from 'react';
+import { MotionProps } from '../utils';
+import { Button } from './Button';
+import { ToolTipInterface } from '../interfaces';
+import { toolStyle } from '../styles';
+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,
+  className,
+  children,
+  title,
+  text,
+  position,
+  targetRef,
+  ref,
+  trigger = ['hover', 'focus'],
+  ...props
+}: MotionProps<ToolTipInterface>) => {
+  if (!children && !targetRef) {
+    throw new Error('ToolTip must have a child or a targetRef');
+  }
+  if (!Array.isArray(trigger)) {
+    trigger = [trigger];
+  }
+
+  if (buttons && !Array.isArray(buttons)) {
+    buttons = [buttons];
+  }
+
+  const internalRef = useRef<HTMLElement | null>(null); // Ref interne au cas où targetRef est undefined
+  const resolvedRef = targetRef || internalRef; // Utilise targetRef si défini, sinon internalRef
+
+  const [currentToolTipId, setCurrentToolTipId] = useState<string | null>(null);
+  const [id] = useState(v4());
+  const [isVisible, setIsVisible] = useState(false);
+
+  const timeout = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    const handleUpdate = (event: CustomEvent) => {
+      setCurrentToolTipId(event.detail);
+    };
+
+    document.addEventListener('tooltip-update', handleUpdate as EventListener);
+    return () => {
+      document.removeEventListener(
+        'tooltip-update',
+        handleUpdate as EventListener,
+      );
+    };
+  }, []);
+
+  useEffect(() => {
+    if (timeout.current) clearTimeout(timeout.current);
+
+    if (currentToolTipId) {
+      setIsVisible(currentToolTipId === id);
+    } else {
+      timeout.current = setTimeout(() => {
+        setIsVisible(false);
+      }, 1200);
+    }
+  }, [currentToolTipId, id]);
+
+  // Ajouter des gestionnaires sur l'élément cible (targetRef ou internalRef)
+
+  const handleMouseEnter = () => {
+    if (trigger.includes('hover')) {
+      const event = new CustomEvent('tooltip-update', { detail: id });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleMouseLeave = () => {
+    if (trigger.includes('hover')) {
+      const event = new CustomEvent('tooltip-update', { detail: null });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleClick = () => {
+    if (trigger.includes('click')) {
+      const event = new CustomEvent('tooltip-update', {
+        detail: isVisible ? null : id,
+      });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleFocus = () => {
+    if (trigger.includes('focus')) {
+      const event = new CustomEvent('tooltip-update', { detail: id });
+      document.dispatchEvent(event);
+    }
+  };
+
+  const handleBlur = () => {
+    if (trigger.includes('focus')) {
+      const event = new CustomEvent('tooltip-update', { detail: null });
+      document.dispatchEvent(event);
+    }
+  };
+
+  useEffect(() => {
+    if (resolvedRef?.current) {
+      const targetElement = resolvedRef.current;
+
+      targetElement.addEventListener('mouseenter', handleMouseEnter);
+      targetElement.addEventListener('mouseleave', handleMouseLeave);
+      targetElement.addEventListener('click', handleClick);
+      targetElement.addEventListener('focus', handleFocus);
+      targetElement.addEventListener('blur', handleBlur);
+
+      // Nettoyage au démontage
+      return () => {
+        targetElement.removeEventListener('mouseenter', handleMouseEnter);
+        targetElement.removeEventListener('mouseleave', handleMouseLeave);
+        targetElement.removeEventListener('click', handleClick);
+        targetElement.removeEventListener('focus', handleFocus);
+        targetElement.removeEventListener('blur', handleBlur);
+      };
+    }
+    return;
+  }, [resolvedRef, trigger, id, isVisible]);
+
+  // Si targetRef est undefined, on applique la réf au premier enfant
+  const enhancedChildren =
+    !targetRef && isValidElement(children)
+      ? cloneElement(children, { ref: internalRef } as any)
+      : children;
+
+  if (!position && typeof window !== 'undefined') {
+    if (resolvedRef?.current && !position) {
+      const rect = resolvedRef.current.getBoundingClientRect();
+
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      const x = rect.left / viewportWidth; // X entre 0 et 1
+      const y = rect.top / viewportHeight; // Y entre 0 et 1
+
+      if (variant === 'plain') {
+        if (x < 1 / 3) {
+          position = 'right';
+        } else if (x > 2 / 3) {
+          position = 'left';
+        } else {
+          position = y > 0.5 ? 'top' : 'bottom';
+        }
+      } else {
+        if (x < 1 / 2 && y < 1 / 2) {
+          position = 'bottom-right';
+        } else if (x > 1 / 2 && y < 1 / 2) {
+          position = 'bottom-left';
+        } else if (x > 1 / 2 && y > 1 / 2) {
+          position = 'top-left';
+        } else if (x < 1 / 2 && y > 1 / 2) {
+          position = 'top-right';
+        }
+      }
+    }
+  }
+
+  const styles = toolStyle({
+    variant,
+    buttons,
+    className,
+    title,
+    text,
+    position,
+    trigger,
+    targetRef: targetRef as any,
+    children: children as any,
+  });
+
+  return (
+    <>
+      {enhancedChildren}
+      <AnimatePresence>
+        {isVisible && (
+          <SyncedFixedWrapper targetRef={resolvedRef}>
+            <motion.div
+              initial={{ opacity: currentToolTipId ? 1 : 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ duration: currentToolTipId ? 0 : 0.3 }}
+              exit={{ opacity: currentToolTipId ? 1 : 0 }}
+              className={styles.toolTip}
+              {...props}
+              onMouseEnter={handleMouseEnter}
+              onMouseLeave={handleMouseLeave}
+            >
+              <motion.div
+                className={styles.container}
+                layoutId={'tool-tip'}
+                transition={{
+                  type: 'spring',
+                  stiffness: 200,
+                  damping: 20,
+                }}
+              >
+                {title && <div className={styles.subHead}>{title}</div>}
+                <div className={styles.supportingText}>{text}</div>
+                {buttons && (
+                  <div className={styles.actions}>
+                    {Array.isArray(buttons) &&
+                      buttons.map((buttonArgs, index) => (
+                        <Button
+                          key={index}
+                          size={'small'}
+                          variant={'text'}
+                          {...buttonArgs}
+                        />
+                      ))}
+                  </div>
+                )}
+              </motion.div>
+            </motion.div>
+          </SyncedFixedWrapper>
+        )}
+      </AnimatePresence>
+    </>
+  );
+};

package/src/lib/components/index.ts

@@ -0,0 +1,19 @@
+export * from './Button';
+export * from './Card';
+export * from './Carousel';
+export * from './CarouselItem';
+export * from './CarouselItem';
+export * from './Divider';
+export * from './Fab';
+export * from './IconButton';
+export * from './IconButton';
+export * from './ProgressIndicator';
+export * from './Slider';
+export * from './Snackbar';
+export * from './Switch';
+export * from './Tab';
+export * from './Tabs';
+export * from './TextField';
+export * from './NavigationRailItem';
+export * from './NavigationRail';
+export * from './ToolTip';

package/src/lib/effects/SyncedFixedWrapper.tsx

@@ -0,0 +1,62 @@
+import {
+  type ReactNode,
+  type RefObject,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { createPortal } from 'react-dom';
+
+type SyncedFixedWrapperProps = {
+  targetRef: RefObject<any>;
+  children: ReactNode;
+};
+
+export const SyncedFixedWrapper = ({
+  targetRef,
+  children,
+}: SyncedFixedWrapperProps) => {
+  const [style, setStyle] = useState<React.CSSProperties | null>(null);
+  const resizeObserver = useRef<ResizeObserver | null>(null);
+
+  const updatePosition = () => {
+    const target = targetRef.current;
+    if (!target) return;
+
+    const rect = target.getBoundingClientRect();
+
+    setStyle({
+      position: 'fixed',
+      top: rect.top,
+      left: rect.left,
+      width: rect.width,
+      height: rect.height,
+      pointerEvents: 'none', // si le wrapper ne doit pas capter les events
+      zIndex: 999, // personnalise si besoin
+    });
+  };
+
+  useEffect(() => {
+    const target = targetRef.current;
+    if (!target) return;
+
+    updatePosition();
+
+    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener('resize', updatePosition);
+
+    // Observe resize of the target element
+    resizeObserver.current = new ResizeObserver(updatePosition);
+    resizeObserver.current.observe(target);
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener('resize', updatePosition);
+      resizeObserver.current?.disconnect();
+    };
+  }, [targetRef]);
+
+  if (!style) return null;
+
+  return createPortal(<div style={style}>{children}</div>, document.body);
+};