@grupalia/rn-ui-kit 0.17.0 → 0.19.0

package/src/components/BaseBadge.tsx

@@ -1,192 +0,0 @@
-import clsx from 'clsx';
-import { styled } from 'nativewind';
-import { ViewProps } from 'react-native';
-
-import { View } from '../hoc-components';
-import BaseIcon from './BaseIcon';
-import BaseText from './BaseText';
-import { HeroIcon } from '../types/heroicons';
-
-export type BadgeVariant =
-  'gray' |
-  'brand' |
-  'error' |
-  'warning' |
-  'success' |
-  'blue_gray' |
-  'blue_light' |
-  'blue' |
-  'indigo' |
-  'purple' |
-  'pink' |
-  'orange';
-
-export type BadgeSize = 'sm' | 'md' | 'lg';
-
-interface BaseBadgeProps extends ViewProps {
-  variant?: BadgeVariant;
-  size?: BadgeSize;
-  text: string;
-  transparent?: boolean;
-  squared?: boolean;
-  leftIcon?: HeroIcon | null;
-  rightIcon?: HeroIcon | null;
-}
-
-function BaseBadge({
-  variant = 'gray',
-  size = 'md',
-  text,
-  transparent = false,
-  squared = false,
-  leftIcon = null,
-  rightIcon = null,
-  ...props
-}: BaseBadgeProps) {
-  const variantStyles = {
-    gray: {
-      bg: 'bg-utility-gray-50',
-      text: 'text-utility-gray-700',
-      border: 'border-utility-gray-200',
-    },
-    brand: {
-      bg: 'bg-utility-brand-50',
-      text: 'text-utility-brand-700',
-      border: 'border-utility-brand-200',
-    },
-    error: {
-      bg: 'bg-utility-error-50',
-      text: 'text-utility-error-700',
-      border: 'border-utility-error-200',
-    },
-    warning: {
-      bg: 'bg-utility-warning-50',
-      text: 'text-utility-warning-700',
-      border: 'border-utility-warning-200',
-    },
-    success: {
-      bg: 'bg-utility-success-50',
-      text: 'text-utility-success-700',
-      border: 'border-utility-success-200',
-    },
-    blue_gray: {
-      bg: 'bg-utility-gray_blue-50',
-      text: 'text-utility-gray_blue-700',
-      border: 'border-utility-gray_blue-200',
-    },
-    blue_light: {
-      bg: 'bg-utility-blue_light-50',
-      text: 'text-utility-blue_light-700',
-      border: 'border-utility-blue_light-200',
-    },
-    blue: {
-      bg: 'bg-utility-blue-50',
-      text: 'text-utility-blue-700',
-      border: 'border-utility-blue-200',
-    },
-    indigo: {
-      bg: 'bg-utility-indigo-50',
-      text: 'text-utility-indigo-700',
-      border: 'border-utility-indigo-200',
-    },
-    purple: {
-      bg: 'bg-utility-purple-50',
-      text: 'text-utility-purple-700',
-      border: 'border-utility-purple-200',
-    },
-    pink: {
-      bg: 'bg-utility-pink-50',
-      text: 'text-utility-pink-700',
-      border: 'border-utility-pink-200',
-    },
-    orange: {
-      bg: 'bg-utility-orange-50',
-      text: 'text-utility-orange-700',
-      border: 'border-utility-orange-200',
-    },
-  };
-
-  const sizeStyles = {
-    sm: {
-      container: 'px-1.5 py-0.5',
-      text: 'text-xs',
-    },
-    md: {
-      container: 'px-2.5 py-0.5',
-      text: 'text-sm',
-    },
-    lg: {
-      container: 'px-3 py-1',
-      text: 'text-base',
-    },
-  };
-
-  const iconSizes = {
-    sm: 12,
-    md: 14,
-    lg: 16,
-  };
-
-  const containerStyles = clsx(
-    'flex-row items-center justify-center border',
-    squared ? 'rounded-md' : 'rounded-full',
-    transparent ? 'bg-transparent' : variantStyles[variant].bg,
-    transparent ? 'border-primary' : variantStyles[variant].border,
-    sizeStyles[size].container,
-  );
-
-  const textStyles = clsx(
-    'font-medium',
-    variantStyles[variant].text,
-    sizeStyles[size].text,
-  );
-
-  const iconSpacingStyles = {
-    left: 'mr-1.5',
-    right: 'ml-1.5',
-  };
-
-  const iconColors = {
-    gray: 'utility-gray-500',
-    brand: 'utility-brand-500',
-    error: 'utility-error-500',
-    warning: 'utility-warning-500',
-    success: 'utility-success-500',
-    blue_gray: 'utility-gray_blue-500',
-    blue_light: 'utility-blue_light-500',
-    blue: 'utility-blue-500',
-    indigo: 'utility-indigo-500',
-    purple: 'utility-purple-500',
-    pink: 'utility-pink-500',
-    orange: 'utility-orange-500',
-  } as const;
-
-  return (
-    <View
-      className={containerStyles}
-      {...props}
-    >
-      {leftIcon && (
-        <View className={iconSpacingStyles.left}>
-          <BaseIcon
-            icon={leftIcon}
-            size={iconSizes[size]}
-            color={iconColors[variant]}
-          />
-        </View>
-      )}
-      <BaseText className={textStyles}>{text}</BaseText>
-      {rightIcon && (
-        <View className={iconSpacingStyles.right}>
-          <BaseIcon
-            icon={rightIcon}
-            size={iconSizes[size]}
-            color={iconColors[variant]}
-          />
-        </View>
-      )}
-    </View>
-  );
-}
-
-export default styled(BaseBadge);

package/src/components/BaseBottomSheetModal.tsx

@@ -1,50 +0,0 @@
-import {
-  BottomSheetModal,
-  BottomSheetBackdrop,
-  BottomSheetBackdropProps,
-  BottomSheetModalProps,
-  BottomSheetView,
-} from '@gorhom/bottom-sheet';
-import { forwardRef, ReactNode } from 'react';
-import { StyleSheet } from 'react-native';
-
-function BackdropComponent(props: BottomSheetBackdropProps) {
-  return (
-    <BottomSheetBackdrop
-      {...props}
-      opacity={0.5}
-      enableTouchThrough={false}
-      appearsOnIndex={0}
-      disappearsOnIndex={-1}
-      style={[{ backgroundColor: 'rgba(0, 0, 0, 1)' }, StyleSheet.absoluteFillObject]}
-    />
-  );
-}
-
-interface BaseBottomSheetModalProps extends BottomSheetModalProps {
-  children: ReactNode;
-}
-
-const BaseBottomSheetModal = forwardRef<
-  BottomSheetModal,
-  BaseBottomSheetModalProps
->(({ children, ...props }, ref) => (
-  <BottomSheetModal
-    ref={ref}
-    backdropComponent={BackdropComponent}
-    style={{
-      shadowColor: 'black',
-      shadowOffset: { width: 0, height: 10 },
-      shadowOpacity: 0.53,
-      shadowRadius: 13.97,
-      elevation: 21,
-    }}
-    {...props}
-  >
-    <BottomSheetView>
-      {children}
-    </BottomSheetView>
-  </BottomSheetModal>
-));
-
-export default BaseBottomSheetModal;

package/src/components/BaseButton.tsx

@@ -1,317 +0,0 @@
-import clsx from 'clsx';
-import { styled } from 'nativewind';
-import React from 'react';
-import { GestureResponderEvent } from 'react-native';
-
-import { View, ActivityIndicator } from '../hoc-components';
-import BaseIcon from './BaseIcon';
-import BaseText from './BaseText';
-import PressableOpacity from './PressableOpacity';
-import { Color as ForegroundColor } from '../styles/foreground-colors';
-import { HeroIcon } from '../types/heroicons';
-
-interface ButtonProps extends React.ComponentProps<typeof PressableOpacity> {
-  variant?: 'primary' | 'secondary' | 'tertiary' | 'link-color' | 'link-gray';
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-  text?: string;
-  loading?: boolean;
-  disabled?: boolean;
-  destructive?: boolean;
-  leftIcon?: HeroIcon | null;
-  rightIcon?: HeroIcon | null;
-  countdownSecs?: number;
-  debounceSecs?: number;
-}
-
-function BaseButton({
-  variant = 'primary',
-  size = 'md',
-  text = '',
-  loading = false,
-  disabled = false,
-  destructive = false,
-  leftIcon = null,
-  rightIcon = null,
-  hitSlop = 6,
-  countdownSecs = 0,
-  debounceSecs = 0,
-  onPress,
-  ...props
-}: ButtonProps) {
-  const [timer, setTimer] = React.useState(countdownSecs);
-  const [timerUsed, setTimerUsed] = React.useState(false);
-  const [debounce, setDebounce] = React.useState<number>(0);
-  const [isDisabled, setIsDisabled] = React.useState(disabled || countdownSecs > 0);
-
-  React.useEffect(() => {
-    let intervalId: NodeJS.Timeout;
-    if (countdownSecs > 0 && !timerUsed) {
-      setIsDisabled(true);
-      setTimer(countdownSecs);
-      intervalId = setInterval(() => {
-        setTimer((prevTimer: number) => {
-          if (prevTimer <= 1) {
-            clearInterval(intervalId);
-            setIsDisabled(Boolean(disabled));
-            setTimerUsed(true);
-            return 0;
-          }
-          return prevTimer - 1;
-        });
-      }, 1000);
-    } else {
-      setIsDisabled(Boolean(disabled));
-    }
-    return () => {
-      if (intervalId) clearInterval(intervalId);
-    };
-  }, [countdownSecs, disabled, timerUsed]);
-
-  React.useEffect(() => {
-    let timeout: NodeJS.Timeout | undefined;
-
-    if (debounce > 0) {
-      setIsDisabled(true);
-      timeout = setTimeout(() => {
-        setDebounce((prev: number) => {
-          if (prev <= 1) {
-            setIsDisabled(false);
-            return 0;
-          }
-
-          return prev - 1;
-        });
-      }, 1000);
-    }
-    return () => {
-      if (timeout) clearTimeout(timeout);
-    };
-  }, [debounce, disabled]);
-
-  function handleOnPress(e: GestureResponderEvent) {
-    onPress?.(e);
-    if (debounceSecs) {
-      setDebounce(debounceSecs);
-      setIsDisabled(true);
-    }
-  }
-
-  const sizeClasses = {
-    xs: 'rounded-md h-8 px-4',
-    sm: 'rounded-md h-9 px-4',
-    md: 'rounded-lg h-10 px-5',
-    lg: 'rounded-lg h-11 px-5',
-    xl: 'rounded-lg h-12 px-6',
-  };
-
-  const iconOnlyClasses = {
-    xs: 'rounded-md h-8 w-8',
-    sm: 'rounded-md h-9 w-9',
-    md: 'rounded-lg h-10 w-10',
-    lg: 'rounded-lg h-11 w-11',
-    xl: 'rounded-lg h-12 w-12',
-  };
-
-  const containerClasses = {
-    primary: {
-      default: destructive ? 'bg-error-solid' : 'bg-brand-solid',
-      disabled: 'bg-disabled border border-disabled_subtle',
-      loading: destructive ? 'bg-error-solid' : 'bg-brand-solid_hover',
-    },
-    secondary: {
-      default: destructive ? 'bg-primary border border-error_subtle' : 'bg-primary border border-primary',
-      disabled: 'bg-primary border border-disabled_subtle',
-      loading: destructive ? 'bg-error-primary border border-error_subtle' : 'bg-primary_hover border border-primary',
-    },
-    tertiary: {
-      default: 'bg-transparent',
-      disabled: 'bg-transparent',
-      loading: destructive ? 'bg-error-primary' : 'bg-primary_hover',
-    },
-    'link-color': {
-      default: 'bg-transparent',
-      disabled: 'bg-transparent',
-      loading: 'bg-transparent',
-    },
-    'link-gray': {
-      default: 'bg-transparent',
-      disabled: 'bg-transparent',
-      loading: 'bg-transparent',
-    },
-  };
-
-  const textColorClasses = {
-    primary: {
-      default: 'text-white',
-      disabled: 'text-disabled',
-      loading: 'text-white',
-    },
-    secondary: {
-      default: destructive ? 'text-error' : 'text-secondary',
-      disabled: 'text-disabled',
-      loading: destructive ? 'text-error-primary' : 'text-secondary',
-    },
-    tertiary: {
-      default: destructive ? 'text-error' : 'text-tertiary',
-      disabled: 'text-disabled',
-      loading: destructive ? 'text-error-primary' : 'text-tertiary',
-    },
-    'link-color': {
-      default: destructive ? 'text-error' : 'text-brand-tertiary',
-      disabled: 'text-disabled',
-      loading: destructive ? 'text-error' : 'text-brand-tertiary',
-    },
-    'link-gray': {
-      default: destructive ? 'text-error' : 'text-tertiary',
-      disabled: 'text-disabled',
-      loading: destructive ? 'text-error' : 'text-tertiary',
-    },
-  };
-
-  const textSizeClasses = {
-    xs: 'text-xs',
-    sm: 'text-sm',
-    md: 'text-sm',
-    lg: 'text-sm',
-    xl: 'text-base',
-  };
-
-  let buttonState: 'default' | 'disabled' | 'loading' = 'default';
-  if (loading) {
-    buttonState = 'loading';
-  } else if (isDisabled) {
-    buttonState = 'disabled';
-  }
-
-  const isIconOnly = !text && (leftIcon || rightIcon);
-
-  const buttonStyles = clsx(
-    'flex flex-row items-center justify-center',
-    isIconOnly ? iconOnlyClasses[size] : sizeClasses[size],
-    containerClasses[variant][buttonState],
-  );
-
-  const textStyles = clsx(
-    'font-medium',
-    textSizeClasses[size],
-    textColorClasses[variant][buttonState],
-  );
-
-  const iconColors = {
-    primary: {
-      default: 'fg-white',
-      disabled: 'fg-disabled',
-      loading: 'fg-white',
-    },
-    secondary: {
-      default: 'fg-secondary',
-      disabled: 'fg-disabled',
-      loading: 'fg-secondary',
-    },
-    tertiary: {
-      default: 'fg-tertiary',
-      disabled: 'fg-disabled',
-      loading: 'fg-tertiary',
-    },
-    'link-color': {
-      default: 'fg-brand-primary',
-      disabled: 'fg-disabled',
-      loading: 'fg-brand-primary',
-    },
-    'link-gray': {
-      default: 'fg-secondary',
-      disabled: 'fg-disabled',
-      loading: 'fg-secondary',
-    },
-  };
-
-  const spinnerColorMap = {
-    primary: {
-      default: '#fff',
-      disabled: '#9AA4B2', // text-disabled color
-      loading: '#fff',
-    },
-    secondary: {
-      default: destructive ? '#F04438' : '#667085',
-      disabled: '#9AA4B2', // text-disabled color
-      loading: destructive ? '#F04438' : '#667085',
-    },
-    tertiary: {
-      default: destructive ? '#F04438' : '#667085',
-      disabled: '#9AA4B2', // text-disabled color
-      loading: destructive ? '#F04438' : '#667085',
-    },
-    'link-color': {
-      default: destructive ? '#F04438' : '#7F56D9',
-      disabled: '#9AA4B2', // text-disabled color
-      loading: destructive ? '#F04438' : '#7F56D9',
-    },
-    'link-gray': {
-      default: destructive ? '#F04438' : '#667085',
-      disabled: '#9AA4B2', // text-disabled color
-      loading: destructive ? '#F04438' : '#667085',
-    },
-  };
-
-  let spinnerColor = '#fff';
-  if (buttonState === 'disabled') {
-    spinnerColor = spinnerColorMap[variant].disabled;
-  } else if (buttonState === 'loading') {
-    spinnerColor = spinnerColorMap[variant].loading;
-  } else {
-    spinnerColor = spinnerColorMap[variant].default;
-  }
-
-  return (
-    <PressableOpacity
-      disabled={isDisabled || loading}
-      className={buttonStyles}
-      hitSlop={hitSlop}
-      onPress={(e) => handleOnPress(e)}
-      {...props}
-    >
-      <View className={clsx('flex flex-row items-center justify-center', loading && 'opacity-0')}>
-        {leftIcon && (
-          <BaseIcon
-            icon={leftIcon}
-            size={20}
-            color={iconColors[variant][buttonState] as ForegroundColor}
-            className={isIconOnly ? '' : 'mr-1.5'}
-          />
-        )}
-        {text && (
-          <BaseText className={textStyles}>
-            {text}
-            {timer > 0 ? ` (${timer})` : ''}
-            {debounce > 0 ? ` (${debounce})` : ''}
-          </BaseText>
-        )}
-        {rightIcon && (
-          <BaseIcon
-            icon={rightIcon}
-            size={20}
-            color={iconColors[variant][buttonState] as ForegroundColor}
-            className={isIconOnly ? '' : 'ml-1.5'}
-          />
-        )}
-      </View>
-      {loading && (
-        <ActivityIndicator
-          size="small"
-          color={spinnerColor}
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            bottom: 0,
-            justifyContent: 'center',
-            alignItems: 'center',
-          }}
-        />
-      )}
-    </PressableOpacity>
-  );
-}
-
-export default styled(BaseButton);

package/src/components/BaseConfirmationModal.tsx

@@ -1,66 +0,0 @@
-import { styled } from 'nativewind';
-
-import { View, Modal } from '../hoc-components';
-import BaseButton from './BaseButton';
-import BaseText from './BaseText';
-
-interface Props extends React.ComponentProps<typeof Modal> {
-  visible: boolean;
-  title: string;
-  body: string | React.ReactNode;
-  confirmText?: string;
-  cancelText?: string;
-  onConfirm: () => void;
-  onCancel: () => void;
-  countdownSecs?: number;
-  loading?: boolean;
-}
-
-function BaseConfirmationModal({
-  visible,
-  title,
-  body,
-  confirmText = 'Aceptar',
-  cancelText = 'Cancelar',
-  onConfirm,
-  onCancel,
-  countdownSecs = 0,
-  loading = false,
-  ...props
-}: Props) {
-  return (
-    <Modal
-      animationType="fade"
-      transparent
-      visible={visible}
-      onRequestClose={() => onCancel()}
-      {...props}
-    >
-      <View className="flex-1 items-center justify-center bg-overlay">
-        <View className="m-4 flex flex-col space-y-4 rounded-lg bg-primary p-8">
-          <BaseText className="mb-4 text-lg font-semibold">
-            {title}
-          </BaseText>
-          {typeof body === 'string' ? (
-            <BaseText className="text-base">
-              {body}
-            </BaseText>
-          ) : body}
-          <BaseButton
-            text={confirmText}
-            onPress={onConfirm}
-            loading={loading}
-            countdownSecs={countdownSecs}
-          />
-          <BaseButton
-            variant="secondary"
-            text={cancelText}
-            onPress={onCancel}
-          />
-        </View>
-      </View>
-    </Modal>
-  );
-}
-
-export default styled(BaseConfirmationModal);