@udixio/ui-react 0.0.1 → 0.1.0

package/src/lib/components/Snackbar.tsx

@@ -0,0 +1,66 @@
+import React, { useEffect, useState } from 'react';
+import { AnimatePresence, motion } from 'motion/react';
+import { faXmark } from '@fortawesome/free-solid-svg-icons';
+import { SnackbarInterface } from '../interfaces/snackbar.interface';
+import { snackbarStyle } from '../styles/snackbar.style';
+
+import { MotionProps } from '../utils/component';
+import { IconButton } from './IconButton';
+
+export const Snackbar = ({
+  supportingText,
+  className,
+  duration,
+  closeIcon = faXmark,
+  onClose,
+  ...restProps
+}: MotionProps<SnackbarInterface>) => {
+  const [isVisible, setIsVisible] = useState(true);
+
+  const styles = snackbarStyle({
+    className,
+    closeIcon,
+    duration,
+    isVisible,
+    onClose,
+    supportingText,
+  });
+
+  useEffect(() => {
+    if (duration) {
+      setTimeout(() => {
+        handleClose();
+      }, duration);
+    }
+  }, [duration]);
+
+  const handleClose = () => {
+    setIsVisible(false);
+    onClose?.();
+  };
+
+  return (
+    <AnimatePresence>
+      {isVisible && (
+        <motion.div
+          initial={{ height: 0 }}
+          animate={{ height: 'auto' }}
+          exit={{ height: 0 }}
+          transition={{ duration: 0.1 }}
+          className={styles.snackbar}
+          {...restProps}
+        >
+          <div className={styles.container}>
+            <p className={styles.supportingText}>{supportingText}</p>
+            <IconButton
+              onClick={() => handleClose()}
+              className={styles.icon}
+              icon={closeIcon}
+              arialLabel={'close the snackbar'}
+            ></IconButton>
+          </div>
+        </motion.div>
+      )}
+    </AnimatePresence>
+  );
+};

package/src/lib/components/Switch.tsx

@@ -0,0 +1,94 @@
+import React, { useRef, useState } from 'react';
+
+import { Icon } from '../icon';
+import { motion } from 'motion/react';
+import { SwitchInterface } from '../interfaces/switch.interface';
+import { switchStyle } from '../styles/switch.style';
+import { MotionProps } from '../utils/component';
+
+export const Switch = ({
+  selected = false,
+  className,
+  activeIcon,
+  disabled = false,
+  inactiveIcon,
+  onChange,
+  onClick,
+  onKeyDown,
+  ref,
+  ...restProps
+}: MotionProps<SwitchInterface>) => {
+  const [isSelected, setIsSelected] = useState(selected);
+
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    toggleSwitchState();
+    if (onClick) {
+      onClick(event);
+    }
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (disabled) return;
+    if (event.key === ' ' || event.key === 'Enter') {
+      event.preventDefault();
+      toggleSwitchState();
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+
+  const toggleSwitchState = () => {
+    setIsSelected(!isSelected);
+    onChange?.(!isSelected);
+  };
+  const styles = switchStyle({
+    className,
+    isSelected,
+    activeIcon,
+    inactiveIcon,
+    disabled,
+    selected: isSelected,
+    onChange,
+  });
+
+  const defaultRef = useRef<HTMLDivElement>(null);
+  const resolvedRef: React.RefObject<any> | React.ForwardedRef<any> =
+    ref || defaultRef;
+
+  return (
+    <motion.div
+      role="switch"
+      aria-checked={isSelected}
+      tabIndex={disabled ? -1 : 0}
+      onKeyDown={handleKeyDown}
+      onClick={handleClick}
+      ref={resolvedRef}
+      className={styles.switch}
+      {...restProps}
+    >
+      <input type="hidden" value={isSelected ? '1' : '0'} />
+      <motion.div
+        layout
+        style={{ translate: isSelected ? '50%' : '-50%' }}
+        transition={{
+          type: 'spring',
+          stiffness: 700,
+          damping: 30,
+        }}
+        className={styles.handleContainer}
+      >
+        <div className={styles.handle}>
+          {(isSelected ? activeIcon : inactiveIcon) && (
+            <Icon
+              className={styles.icon}
+              icon={isSelected ? activeIcon! : inactiveIcon!}
+            ></Icon>
+          )}
+        </div>
+        <div className={styles.handleStateLayer} />
+      </motion.div>
+    </motion.div>
+  );
+};

package/src/lib/components/Tab.tsx

@@ -0,0 +1,110 @@
+import { motion } from 'motion/react';
+import React, { useEffect, useRef, useState } from 'react';
+
+import { Icon } from '../icon';
+import { RippleEffect } from '../effects/ripple';
+import { tabStyle } from '../styles/tab.style';
+import { TabInterface } from '../interfaces/tab.interface';
+import { ReactProps } from '../utils/component';
+
+export const Tab = ({
+  className,
+  onClick,
+  label,
+  variant = 'primary',
+  href,
+  icon,
+  selectedTab,
+  setSelectedTab,
+  tabsId,
+  index,
+  onTabSelected,
+  scrollable = false,
+  selected = false,
+  ref,
+  ...restProps
+}: ReactProps<TabInterface>) => {
+  const defaultRef = useRef(null);
+  const resolvedRef = ref || defaultRef;
+
+  const [isSelected, setIsSelected] = useState<boolean>(selected);
+
+  useEffect(() => {
+    if (selected && selectedTab == null) {
+      setIsSelected(true);
+    } else {
+      setIsSelected(selectedTab == index && index != null);
+    }
+  }, [selectedTab]);
+
+  useEffect(() => {
+    if (selectedTab == index && onTabSelected) {
+      onTabSelected({
+        ref: resolvedRef as any,
+        index: index || 0,
+        label,
+        icon,
+      });
+    }
+  }, [selectedTab]);
+
+  const ElementType = href ? 'a' : 'button';
+
+  const handleClick = (e: React.MouseEvent<any>) => {
+    if (setSelectedTab) {
+      setSelectedTab(index ?? null);
+    }
+    if (onClick) {
+      onClick(e);
+    }
+  };
+
+  const styles = tabStyle({
+    className,
+    onTabSelected,
+    scrollable,
+    selectedTab,
+    index,
+    tabsId,
+    selected: isSelected,
+    variant,
+    icon,
+    label,
+    isSelected,
+    setSelectedTab,
+    href: href as any,
+  });
+
+  return (
+    <ElementType
+      {...restProps}
+      role="tab"
+      aria-selected={isSelected}
+      ref={resolvedRef}
+      href={href}
+      className={styles.tab}
+      onClick={handleClick}
+      {...(restProps as any)}
+    >
+      <span className={styles.stateLayer}>
+        <RippleEffect
+          colorName={
+            variant === 'primary' && isSelected ? 'primary' : 'on-surface'
+          }
+          triggerRef={resolvedRef}
+        />
+      </span>
+      <span className={styles.content}>
+        {icon && <Icon icon={icon} className={styles.icon} />}
+        <span className={styles.label}>{label}</span>
+        {isSelected && (
+          <motion.span
+            layoutId={`underline-${tabsId}`}
+            className={styles.underline}
+            transition={{ duration: 0.3 }}
+          />
+        )}
+      </span>
+    </ElementType>
+  );
+};

package/src/lib/components/Tabs.tsx

@@ -0,0 +1,85 @@
+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';
+
+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,269 @@
+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';
+
+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>
+  );
+};