@udixio/ui-react 0.4.2 → 1.0.0

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

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+import { CarouselItem } from '../components';
+
+export interface CarouselInterface {
+  type: 'div';
+  props: {
+    children?: ReactElement<typeof CarouselItem>[];
+    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,20 @@
+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;
+  children?: 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,36 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { IconButtonVariant } from '../components/IconButton';
+import { ActionOrLink } from '../utils/component';
+import { Transition } from 'motion';
+
+type Props = {
+  label?: string;
+  children?: 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', 'touchTarget', '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,39 @@
+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;
+  children?: 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,27 @@
+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;
+    message: 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'];
+}

package/src/lib/interfaces/text-field.interface.ts

@@ -0,0 +1,48 @@
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import React from 'react';
+import { IconButton } from '../components/IconButton';
+
+export type TextFieldVariant = 'filled' | 'outlined';
+
+type Props = {
+  placeholder?: string;
+  name: string;
+  label: string;
+  disabled?: boolean;
+  errorText?: string | null;
+  supportingText?: string;
+  trailingIcon?: React.ReactElement<typeof IconButton> | IconDefinition;
+  leadingIcon?: React.ReactElement<typeof IconButton> | IconDefinition;
+  onChange?: (value: string) => void;
+  showSupportingText?: boolean;
+  suffix?: string;
+
+  value: string;
+  variant?: TextFieldVariant;
+  type?: 'text' | 'password' | 'number';
+  autoComplete?: 'on' | 'off' | string;
+  textLine?: 'singleLine' | 'multiLine' | 'textAreas';
+};
+export type TextFieldStates = {
+  isFocused: boolean;
+  showErrorIcon: boolean;
+  showSupportingText: boolean;
+};
+
+export interface TextFieldInterface {
+  type: 'div';
+  props: Props;
+  states: TextFieldStates;
+  elements: [
+    'textField',
+    'content',
+    'label',
+    'input',
+    'activeIndicator',
+    'supportingText',
+    'leadingIcon',
+    'trailingIcon',
+    'suffix',
+    'stateLayer',
+  ];
+}

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

@@ -0,0 +1,35 @@
+import { ReactProps } from '../utils';
+import { ButtonInterface } from './button.interface';
+import { ReactNode, RefObject } from 'react';
+
+type Trigger = 'hover' | 'click' | 'focus' | null;
+
+export type ToolTipInterface<T extends HTMLElement = any> = {
+  type: 'div';
+  props: {
+    variant?: 'plain' | 'rich';
+    title?: string;
+    text: string;
+    buttons?: ReactProps<ButtonInterface> | ReactProps<ButtonInterface>[];
+    position?:
+      | 'top'
+      | 'bottom'
+      | 'left'
+      | 'right'
+      | 'top-left'
+      | 'top-right'
+      | 'bottom-left'
+      | 'bottom-right';
+    trigger?: Trigger | Trigger[];
+  } & (
+    | {
+        children?: never;
+        targetRef: RefObject<T>;
+      }
+    | {
+        children: ReactNode;
+        targetRef?: never;
+      }
+  );
+  elements: ['toolTip', 'container', 'subHead', 'supportingText', 'actions'];
+};

package/src/lib/styles/button.style.ts

@@ -0,0 +1,142 @@
+import { classNames, defaultClassNames } from '../utils';
+import { ButtonInterface } from '../interfaces';
+
+export const buttonStyle = defaultClassNames<ButtonInterface>(
+  'button',
+  ({
+    variant,
+    disabled,
+    iconPosition,
+    icon,
+    isActive,
+    loading,
+    shape,
+    onToggle,
+    size,
+    allowShapeTransformation,
+  }) => ({
+    button: classNames(
+      ' relative cursor-pointer group outline-none inline-block flex  justify-center   items-center  ',
+      size === 'xSmall' && 'text-label-large px-3 py-1.5 gap-1',
+      size === 'small' && 'text-label-large px-4 py-2.5 gap-2',
+      size === 'medium' && 'text-title-medium px-6 py-4 gap-2',
+      size === 'large' && 'text-headline-small px-12 py-8 gap-3',
+      size === 'xLarge' && 'text-headline-large px-16 py-12 gap-4',
+      shape === 'rounded' && {
+        'rounded-[30px]': size === 'xSmall' || size == 'small',
+        'rounded-[40px]': size === 'medium',
+        'rounded-[70px]': size === 'large' || size == 'xLarge',
+      },
+      (shape === 'squared' || (allowShapeTransformation && isActive)) && {
+        'rounded-[12px]': size === 'xSmall' || size == 'small',
+        'rounded-[16px]': size === 'medium',
+        'rounded-[28px]': size === 'large' || size == 'xLarge',
+      },
+      allowShapeTransformation &&
+        !disabled && {
+          'active:rounded-[12px]': size === 'xSmall' || size == 'small',
+          'active:rounded-[16px]': size === 'medium',
+          'active:rounded-[28px]': size === 'large' || size == 'xLarge',
+        },
+      variant === 'elevated' && {
+        'shadow-1 hover:shadow-2': !disabled,
+        'bg-surface-container-low text-primary': !disabled && !isActive,
+        'bg-primary text-on-primary': !disabled && isActive,
+        'text-on-surface/[38%]': disabled,
+      },
+      variant === 'filled' && {
+        'hover:shadow-1': !disabled,
+        'bg-surface-container text-on-surface-variant':
+          !disabled && !isActive && onToggle,
+        'bg-primary text-on-primary':
+          !disabled && ((isActive && onToggle) || !onToggle),
+        'text-on-surface/[38%]': disabled,
+      },
+      variant === 'tonal' && {
+        'hover:shadow-1': !disabled,
+        'bg-secondary-container text-on-secondary-container':
+          !disabled && !isActive,
+        'bg-secondary text-on-secondary': !disabled && isActive,
+        'text-on-surface/[0.38]': disabled,
+      },
+      variant === 'outlined' && [
+        ' border',
+        {
+          'border-on-surface/[0.12] text-on-surface/[0.38]': disabled,
+
+          'text-primary border-outline focus:border-primary':
+            !disabled && !isActive,
+          'text-inverse-on-surface bg-inverse-surface border-inverse-surface':
+            !disabled && isActive,
+        },
+      ],
+      variant === 'text' && [
+        'w-fit',
+        {
+          'text-primary': !disabled,
+          'text-on-surface/[0.38]': disabled,
+        },
+        size === 'xSmall' && '-mx-3 ',
+        size === 'small' && '-mx-4 ',
+        size === 'medium' && '-mx-6 ',
+        size === 'large' && '-mx-12',
+        size === 'xLarge' && '-mx-16 ',
+        // size === 'small' && ' -my-2.5',
+        // size === 'medium' && ' -my-4',
+        // size === 'large' && '-my-8',
+        // size === 'xLarge' && ' -my-12',
+      ],
+      disabled && 'cursor-default',
+    ),
+    touchTarget: classNames(
+      'absolute -translate-x-1/2 -translate-y-1/2 left-1/2 top-1/2 h-12 w-full',
+    ),
+    stateLayer: classNames(
+      'min-h-full min-w-full absolute top-0 left-0 overflow-hidden',
+      variant === 'elevated' && {
+        'bg-on-surface/[0.12]': disabled,
+        'group-state-primary': !disabled,
+      },
+      variant === 'filled' && {
+        'bg-on-surface/[0.12]': disabled,
+        'group-state-on-primary': !disabled && !onToggle,
+        'group-state-on-surface-variant': !disabled && onToggle,
+      },
+      shape === 'rounded' && {
+        'rounded-[30px]': size === 'xSmall' || size == 'small',
+        'rounded-[40px]': size === 'medium',
+        'rounded-[70px]': size === 'large' || size == 'xLarge',
+      },
+      (shape === 'squared' || (allowShapeTransformation && isActive)) && {
+        'rounded-[12px]': size === 'xSmall' || size == 'small',
+        'rounded-[16px]': size === 'medium',
+        'rounded-[28px]': size === 'large' || size == 'xLarge',
+      },
+      allowShapeTransformation &&
+        !disabled && {
+          'group-active:rounded-[12px]': size === 'xSmall' || size == 'small',
+          'group-active:rounded-[16px]': size === 'medium',
+          'group-active:rounded-[28px]': size === 'large' || size == 'xLarge',
+        },
+      variant === 'tonal' && {
+        'bg-on-surface/[0.12]': disabled,
+        'group-state-on-secondary-container ': !disabled,
+      },
+      variant === 'outlined' && {
+        'group-state-primary  group-state-primary': !disabled,
+      },
+      variant === 'text' && {
+        'group-state-primary': !disabled,
+      },
+    ),
+    label: classNames({ invisible: loading }),
+    icon: classNames(
+      { invisible: loading },
+      size === 'xSmall' && 'size-5',
+      size === 'small' && 'size-5',
+      size === 'medium' && 'size-6',
+      size === 'large' && 'size-8',
+      size === 'xLarge' && 'size-10',
+    ),
+  }),
+);

package/src/lib/styles/card.style.ts

@@ -0,0 +1,21 @@
+import { CardInterface } from '../interfaces';
+import { classNames, defaultClassNames } from '../utils';
+
+export const cardStyle = defaultClassNames<CardInterface>(
+  'card',
+  ({ variant, isInteractive }) => ({
+    card: classNames(
+      'card group/card rounded-xl overflow-hidden z-10',
+      variant === 'outlined' && 'bg-surface border border-outline-variant',
+      variant === 'elevated' && 'bg-surface-container-low shadow-1',
+      variant === 'filled' && 'bg-surface-container-highest',
+    ),
+    stateLayer: classNames([
+      'w-full top-0 left-0 h-full absolute -z-10',
+      {
+        ' group-hover/card:hover-state-on-surface group-focus-visible/card:focus-state-on-surface':
+          isInteractive,
+      },
+    ]),
+  }),
+);

package/src/lib/styles/carousel-item.style.ts

@@ -0,0 +1,11 @@
+import { CarouselItemInterface } from '../interfaces';
+import { classNames, defaultClassNames } from '../utils';
+
+export const carouselItemStyle = defaultClassNames<CarouselItemInterface>(
+  'carouselItem',
+  () => {
+    return {
+      carouselItem: classNames('rounded-[28px] overflow-hidden flex-none'),
+    };
+  },
+);

package/src/lib/styles/carousel.style.ts

@@ -0,0 +1,12 @@
+import { classNames, defaultClassNames } from '../utils';
+import { CarouselInterface } from '../interfaces';
+
+export const carouselStyle = defaultClassNames<CarouselInterface>(
+  'carousel',
+  () => ({
+    carousel: classNames(['w-full h-[400px]']),
+    track: classNames(
+      'grid grid-flow-col h-full transition-transform  ease-out w-fit',
+    ),
+  }),
+);

package/src/lib/styles/divider.style.ts

@@ -0,0 +1,17 @@
+import { DividerInterface } from '../interfaces/divider.interface';
+import { classNames, defaultClassNames } from '../utils';
+
+export const dividerStyle = defaultClassNames<DividerInterface>(
+  'divider',
+  ({ orientation }) => ({
+    divider: classNames(
+      'border-outline-variant ',
+      {
+        'h-fit w-full border-t': orientation === 'horizontal',
+      },
+      {
+        'h-auto self-stretch w-fit border-l': orientation === 'vertical',
+      }
+    ),
+  })
+);