@udixio/ui-react 0.0.1 → 0.1.0

package/src/lib/effects/ripple/RippleEffect.tsx

@@ -0,0 +1,103 @@
+import { AnimatePresence, motion } from 'motion/react';
+import React, { useEffect, useState } from 'react';
+
+interface RippleEffectProps {
+  triggerRef: React.RefObject<any> | React.ForwardedRef<any>;
+  colorName?: string;
+}
+
+const RippleEffect: React.FC<RippleEffectProps> = ({
+  colorName = 'on-surface',
+  triggerRef,
+}) => {
+  const ripple = {
+    initial: {
+      opacity: 0,
+      borderRadius: '50%',
+      width: '25%',
+      height: '25%',
+    },
+    animate: {
+      opacity: 1,
+      borderRadius: 0,
+      width: '200%',
+      height: '200%',
+      transition: {
+        duration: 0.3,
+        borderRadius: { duration: 0.3, delay: 0.3 },
+      },
+    },
+  };
+
+  const [isCompleted, setIsCompleted] = useState(true);
+  const [isActive, setIsActive] = useState(false);
+  const [coordinates, setCoordinates] = useState({ x: 0, y: 0 });
+
+  useEffect(() => {
+    if (isActive) {
+      setIsCompleted(true);
+      setIsCompleted(false);
+    }
+  }, [isActive]);
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const element = triggerRef?.current;
+    if (element) {
+      element.addEventListener('mousedown', handleMouseDown);
+      element.addEventListener('mouseup', handleMouseUp);
+      element.addEventListener('mouseleave', handleMouseLeave);
+      return () => {
+        element.removeEventListener('mousedown', handleMouseDown);
+        element.removeEventListener('mouseup', handleMouseUp);
+        element.removeEventListener('mouseleave', handleMouseLeave);
+      };
+    }
+  }, [triggerRef]);
+
+  const handleMouseDown = (e: MouseEvent) => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    const el = triggerRef?.current as Element;
+    const rect = el.getBoundingClientRect();
+    setIsActive(true);
+    setCoordinates({
+      x: ((e.clientX - rect.left) / el.clientWidth) * 100,
+      y: ((e.clientY - rect.top) / el.clientHeight) * 100,
+    });
+  };
+  const handleMouseLeave = (e: MouseEvent) => {
+    setIsActive(false);
+  };
+
+  const handleMouseUp = (e: MouseEvent) => {
+    setIsActive(false);
+  };
+
+  return (
+    <AnimatePresence mode="wait">
+      {(isActive || (!isActive && !isCompleted)) && (
+        <motion.div
+          style={{
+            position: 'absolute',
+            width: '100%',
+            height: '100%',
+            top: coordinates.y + '%',
+            left: coordinates.x + '%',
+            background: `color-mix(in srgb, var(--color-${colorName}) 12%, transparent)`,
+            pointerEvents: 'none',
+          }}
+          variants={ripple}
+          initial="initial"
+          animate={'animate'}
+          exit={{ opacity: 0, transition: { duration: 0 } }}
+          onAnimationComplete={() => setIsCompleted(true)}
+          className={'transform -translate-x-1/2 -translate-y-1/2'}
+        />
+      )}
+    </AnimatePresence>
+  );
+};
+
+export default RippleEffect;

package/src/lib/effects/ripple/index.tsx

@@ -0,0 +1 @@
+export { default as RippleEffect } from './RippleEffect';

package/src/lib/effects/smooth-scroll.effect.tsx

@@ -0,0 +1,91 @@
+import { ReactNode, useRef, useState } from 'react';
+import {
+  motion,
+  motionValue,
+  useMotionValueEvent,
+  useTransform,
+} from 'motion/react';
+import { CustomScroll, CustomScrollInterface } from './custom-scroll';
+import { classNames, ReactProps } from '../utils';
+
+export const SmoothScroll = ({
+  children,
+  transition = '.5s',
+  orientation = 'vertical',
+  throttleDuration = 25,
+  ...restProps
+}: {
+  children: ReactNode;
+  transition?: string;
+} & ReactProps<CustomScrollInterface>) => {
+  const [scroll, setScroll] = useState<{
+    scrollProgress: number;
+    scrollTotal: number;
+    scrollVisible: number;
+    scroll: number;
+  } | null>(null);
+
+  const scrollProgress = motionValue(scroll?.scrollProgress ?? 0);
+
+  const transform = useTransform(
+    scrollProgress,
+    [0, 1],
+    [0, 1 - (scroll?.scrollVisible ?? 0) / (scroll?.scrollTotal ?? 0)]
+  );
+
+  const percentTransform = useTransform(
+    transform,
+    (value) => `${-value * 100}%`
+  );
+
+  const handleScroll = (args: {
+    scrollProgress: number;
+    scrollTotal: number;
+    scrollVisible: number;
+    scroll: number;
+  }) => {
+    scrollProgress.set(args.scrollProgress);
+    if (args.scrollTotal > 0) {
+      setScroll(args);
+    }
+  };
+  const lastChangeTimeRef = useRef<number | null>(null);
+  useMotionValueEvent(percentTransform, 'change', (value) => {
+    // Récupérer l'heure actuelle
+    const now = performance.now();
+
+    // Si une heure précédente existe, calculer le delta
+    if (lastChangeTimeRef.current !== null) {
+      const deltaTime = now - lastChangeTimeRef.current;
+      console.log(`Delta temps : ${deltaTime} ms`);
+    }
+
+    // Mettre à jour l'heure du dernier changement
+    lastChangeTimeRef.current = now;
+
+    console.log(value); // Affiche également la valeur si nécessaire
+  });
+
+  return (
+    <CustomScroll
+      onScroll={handleScroll}
+      throttleDuration={throttleDuration}
+      {...restProps}
+    >
+      <motion.div
+        className={classNames('transition-transform  ease-out', {
+          'w-fit h-full': orientation === 'horizontal',
+          'h-fit w-full': orientation === 'vertical',
+        })}
+        style={{
+          transitionDuration: transition,
+          ...(orientation == 'vertical'
+            ? { y: percentTransform }
+            : { x: percentTransform }),
+        }}
+      >
+        {children}
+      </motion.div>
+    </CustomScroll>
+  );
+};

package/src/lib/icon/icon.tsx

@@ -0,0 +1,47 @@
+import type React from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { classNames } from '../utils';
+
+interface Props {
+  icon: IconDefinition;
+  colors?: string[];
+  className?: string;
+}
+
+export const Icon: React.FC<Props> = ({ icon, colors = [], className }) => {
+  const { icon: iconData } = icon; // Extraction des données de l'icône.
+  const [width, height, , , svgPathData] = iconData || [];
+
+  const getColorStyle = (colors: string[]): React.CSSProperties => {
+    switch (colors.length) {
+      case 2:
+        return {
+          '--fa-primary-color': colors[0] || 'inherit',
+          '--fa-secondary-color': colors[1] || 'inherit',
+        } as React.CSSProperties;
+      case 1:
+        return { color: colors[0] } as React.CSSProperties;
+      default:
+        return {};
+    }
+  };
+
+  return (
+    <svg
+      className={classNames('size-5 box-content', className)}
+      style={{
+        ...getColorStyle(colors),
+      }}
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox={`0 0 ${width} ${height}`}
+      role="img"
+      aria-hidden="true"
+    >
+      {typeof svgPathData === 'string' ? (
+        <path className={'fill-current'} d={svgPathData} />
+      ) : (
+        svgPathData.map((d, index) => <path key={index} d={d} />)
+      )}
+    </svg>
+  );
+};

package/src/lib/icon/index.ts

@@ -0,0 +1 @@
+export * from './icon';

package/src/lib/index.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './effects';
+export * from './icon';
+export * from './interfaces';
+export * from './styles';
+export * from './utils';

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

@@ -0,0 +1,46 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ActionOrLink } from '../utils';
+import { Transition } from 'motion';
+
+type Props = {
+  /**
+   * The label is the text that is displayed on the button.
+   */
+  label: string;
+
+  size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
+
+  /**
+   * The button variant determines the style of the button.
+   */
+  variant?: 'filled' | 'elevated' | 'outlined' | 'text' | 'filledTonal';
+
+  /**
+   * Disables the button if set to true.
+   */
+  disabled?: boolean;
+
+  /**
+   * An optional icon to display in the button.
+   */
+  icon?: IconDefinition;
+
+  iconPosition?: 'left' | 'right';
+
+  loading?: boolean;
+
+  /**
+   * The shape of the button defines whether it is squared or rounded.
+   */
+  shape?: 'squared' | 'rounded';
+
+  allowShapeTransformation?: boolean;
+
+  transition?: Transition;
+};
+
+type Elements = ['button', 'stateLayer', 'container', 'icon', 'label'];
+
+export type ButtonInterface = ActionOrLink<Props> & {
+  elements: Elements;
+};

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

@@ -0,0 +1,8 @@
+export interface CardInterface {
+  type: 'div';
+  props: {
+    variant?: 'outlined' | 'elevated' | 'filled';
+    isInteractive?: boolean;
+  };
+  elements: ['card', 'stateLayer'];
+}

package/src/lib/interfaces/carousel-item.interface.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+
+export interface CarouselItemInterface {
+  type: 'div';
+  props: {
+    children?: ReactNode | undefined;
+    width?: number;
+    index?: number;
+  };
+  elements: ['carouselItem'];
+}

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

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+
+export interface CarouselInterface {
+  type: 'div';
+  props: {
+    children?: ReactNode;
+    marginPourcent?: number;
+    onChange?: (index: number) => void;
+    variant?:
+      | 'hero'
+      | 'center-aligned hero'
+      | 'multi-browse'
+      | 'un-contained'
+      | 'full-screen';
+    scrollSensitivity?: number;
+    gap?: number;
+    inputRange?: [number, number];
+    outputRange?: [number, number];
+  };
+  elements: ['carousel', 'track'];
+}

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

@@ -0,0 +1,7 @@
+export interface DividerInterface {
+  type: 'hr';
+  props: {
+    orientation?: 'vertical' | 'horizontal';
+  };
+  elements: ['divider'];
+}

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

@@ -0,0 +1,19 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ActionOrLink } from '../utils/component';
+import { Transition } from 'motion';
+
+export type FabVariant = 'surface' | 'primary' | 'secondary' | 'tertiary';
+type Props = {
+  variant?: FabVariant;
+  label: string;
+  icon: IconDefinition;
+  size?: 'small' | 'medium' | 'large';
+  isExtended?: boolean;
+  transition?: Transition;
+};
+
+export type Elements = ['fab', 'stateLayer', 'icon', 'label'];
+
+export type FabInterface = ActionOrLink<Props> & {
+  elements: Elements;
+};

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

@@ -0,0 +1,35 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconButtonVariant } from '../components/IconButton';
+import { ActionOrLink } from '../utils/component';
+import { Transition } from 'motion';
+
+type Props = {
+  arialLabel: string;
+  icon: IconDefinition;
+  size?: 'xSmall' | 'small' | 'medium' | 'large' | 'xLarge';
+  width?: 'default' | 'narrow' | 'wide';
+  iconSelected?: IconDefinition;
+  onToggle?: (isActive: boolean) => void;
+  variant?: IconButtonVariant;
+  disabled?: boolean;
+  activated?: boolean;
+
+  /**
+   * The shape of the button defines whether it is squared or rounded.
+   */
+  shape?: 'squared' | 'rounded';
+
+  allowShapeTransformation?: boolean;
+
+  transition?: Transition;
+};
+
+export type IconButtonStates = {
+  isActive: boolean;
+};
+type Elements = ['iconButton', 'stateLayer', 'container', 'icon'];
+
+export type IconButtonInterface = ActionOrLink<Props> & {
+  states: IconButtonStates;
+  elements: Elements;
+};

package/src/lib/interfaces/index.ts

@@ -0,0 +1,16 @@
+export * from './button.interface';
+export * from './card.interface';
+export * from './carousel-item.interface';
+export * from './carousel.interface';
+export * from './divider.interface';
+export * from './fab.interface';
+export * from './icon-button.interface';
+export * from './progress-indicator.interface';
+export * from './slider.interface';
+export * from './snackbar.interface';
+export * from './switch.interface';
+export * from './tab.interface';
+export * from './tabs.interface';
+export * from './text-field.interface';
+export * from './navigation-rail-item.interface';
+export * from './tooltip.interface';

package/src/lib/interfaces/navigation-rail-item.interface.ts

@@ -0,0 +1,38 @@
+import { ActionOrLink } from '../utils';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { Dispatch, RefObject, SetStateAction } from 'react';
+import { Transition } from 'motion';
+
+export type NavProps = {
+  selected?: boolean;
+  variant?: 'vertical' | 'horizontal';
+  label?: string;
+  icon: IconDefinition;
+  iconSelected: IconDefinition;
+  selectedItem?: number | null;
+  setSelectedItem?: Dispatch<SetStateAction<number | null>>;
+  onItemSelected?: (
+    args: { index: number } & Pick<NavProps, 'label' | 'icon'> & {
+        ref: RefObject<any>;
+      }
+  ) => void;
+  index?: number;
+  transition?: Transition;
+  extendedOnly?: boolean;
+  isExtended?: boolean;
+};
+
+type Elements = [
+  'navigationRailItem',
+  'stateLayer',
+  'icon',
+  'label',
+  'container',
+];
+
+export type NavigationRailItemInterface = ActionOrLink<NavProps> & {
+  states: {
+    isSelected: boolean;
+  };
+  elements: Elements;
+};

package/src/lib/interfaces/navigation-rail.interface.ts

@@ -0,0 +1,39 @@
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { Transition } from 'motion';
+import { ReactProps } from '../utils';
+import { NavigationRailItemInterface } from './navigation-rail-item.interface';
+
+type MenuState = {
+  icon: IconDefinition;
+  label: string;
+};
+
+export interface NavigationRailInterface {
+  type: 'div';
+  props: {
+    variant?: 'standard' | 'modal';
+    onItemSelected?: (
+      args: { index: number } & Pick<
+        ReactProps<NavigationRailItemInterface>,
+        'label' | 'icon'
+      > & {
+          ref: RefObject<any>;
+        }
+    ) => void;
+    children: ReactNode;
+    selectedItem?: number | null;
+    setSelectedItem?: Dispatch<SetStateAction<number | null>>;
+    extended?: boolean;
+    alignment?: 'middle' | 'top';
+    menu?: {
+      closed: MenuState;
+      opened: MenuState;
+    };
+    onExtendedChange?: (extended: boolean) => void;
+
+    transition?: Transition;
+  };
+  states: { isExtended?: boolean };
+  elements: ['navigationRail', 'header', 'menuIcon', 'segments'];
+}

package/src/lib/interfaces/progress-indicator.interface.ts

@@ -0,0 +1,35 @@
+/**
+ * Type for the different variants of the ProgressIndicator component.
+ */
+export type ProgressIndicatorVariant =
+  | 'linear-determinate'
+  | 'linear-indeterminate'
+  | 'circular-determinate'
+  | 'circular-indeterminate';
+
+export interface ProgressIndicatorInterface {
+  type: 'div';
+  props: {
+    /**
+     * The percentage of the progress completed.
+     */
+    value?: number;
+
+    /**
+     * The duration of the transition animation in milliseconds.
+     */
+    transitionDuration?: number;
+
+    /**
+     * The variant of the ProgressIndicator.
+     */
+    variant?: ProgressIndicatorVariant;
+    /**
+     * The minimum height of the line used to draw the linear indicator.
+     */
+    minHeight?: number;
+  };
+  states: { isVisible: boolean };
+
+  elements: ['progressIndicator', 'stop', 'activeIndicator', 'track'];
+}

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

@@ -0,0 +1,29 @@
+export interface SliderInterface {
+  type: 'div';
+  props: {
+    value?: number;
+
+    name: string;
+    onChange?: (value: number) => void;
+    valueFormatter?: (value: number) => string | number;
+
+    step?: number;
+    min?: number;
+    max?: number;
+    marks?: {
+      value: number;
+      label?: string;
+    }[];
+  };
+  states: {
+    isChanging: boolean;
+  };
+  elements: [
+    'slider',
+    'activeTrack',
+    'handle',
+    'inactiveTrack',
+    'valueIndicator',
+    'dot',
+  ];
+}

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

@@ -0,0 +1,13 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+export interface SnackbarInterface {
+  type: 'div';
+  props: {
+    duration?: number;
+    onClose?: () => void;
+    supportingText: string;
+    closeIcon?: IconDefinition;
+  };
+  states: { isVisible: boolean };
+  elements: ['snackbar', 'container', 'supportingText', 'action', 'icon'];
+}

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

@@ -0,0 +1,14 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+
+export interface SwitchInterface {
+  type: 'div';
+  props: {
+    selected?: boolean;
+    activeIcon?: IconDefinition;
+    inactiveIcon?: IconDefinition;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+  };
+  states: { isSelected: boolean };
+  elements: ['switch', 'handleContainer', 'icon', 'handleStateLayer', 'handle'];
+}

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

@@ -0,0 +1,30 @@
+import { ActionOrLink } from '../utils/component';
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { TabsVariant } from './tabs.interface';
+import { Dispatch, RefObject, SetStateAction } from 'react';
+
+export type TabProps = {
+  selected?: boolean;
+  variant?: TabsVariant;
+  label?: string;
+  icon?: IconDefinition;
+  selectedTab?: number | null;
+  setSelectedTab?: Dispatch<SetStateAction<number | null>>;
+  tabsId?: string;
+  onTabSelected?: (
+    args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
+        ref: RefObject<any>;
+      }
+  ) => void;
+  index?: number;
+  scrollable?: boolean;
+};
+
+type Elements = ['tab', 'stateLayer', 'icon', 'label', 'content', 'underline'];
+
+export type TabInterface = ActionOrLink<TabProps> & {
+  states: {
+    isSelected: boolean;
+  };
+  elements: Elements;
+};

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

@@ -0,0 +1,22 @@
+import { TabProps } from './tab.interface';
+import { Dispatch, ReactNode, RefObject, SetStateAction } from 'react';
+
+export type TabsVariant = 'primary' | 'secondary';
+
+export interface TabsInterface {
+  type: 'div';
+  props: {
+    variant?: TabsVariant;
+    onTabSelected?: (
+      args: { index: number } & Pick<TabProps, 'label' | 'icon'> & {
+          ref: RefObject<any>;
+        },
+    ) => void;
+    children: ReactNode;
+    selectedTab?: number | null;
+    setSelectedTab?: Dispatch<SetStateAction<number | null>>;
+    scrollable?: boolean;
+  };
+  states: object;
+  elements: ['tabs'];
+}