@grupalia/rn-ui-kit 0.10.0 → 0.11.0

package/src/components/BaseAlert.tsx

@@ -4,62 +4,63 @@ import { InformationCircleIcon as OutlinedInformationCircleIcon } from 'react-na
 import {
   ExclamationTriangleIcon,
   CheckCircleIcon,
-  InformationCircleIcon,
   XCircleIcon,
+  InformationCircleIcon as SolidInformationCircleIcon,
 } from 'react-native-heroicons/solid';
 
-import { View, Text } from '../hoc-components';
+import { View } from '../hoc-components';
 import BaseIcon from './BaseIcon';
+import BaseText from './BaseText';
 import { useIsAboveBreakpoint } from '../hooks/useIsAboveBreakpoint';
 
 interface IconComponentProps {
-  type: 'error' | 'success' | 'alert' | 'info' | 'notice';
+  type: 'error' | 'success' | 'alert' | 'brand';
   variant?: 'primary' | 'secondary';
 }
 
 function IconComponent({ type, variant = 'primary' }: IconComponentProps) {
   const iconColors = {
+    brand: {
+      primary: 'fg-white',
+      secondary: 'fg-brand-primary',
+    },
     error: {
-      primary: 'fg-error-primary',
-      secondary: 'fg-error-secondary',
+      primary: 'fg-white',
+      secondary: 'fg-error-primary',
     },
     success: {
-      primary: 'fg-success-primary',
-      secondary: 'fg-success-secondary',
+      primary: 'fg-white',
+      secondary: 'fg-success-primary',
     },
     alert: {
-      primary: 'fg-warning-primary',
-      secondary: 'fg-warning-secondary',
-    },
-    info: {
-      primary: 'utility-gray-500',
-      secondary: 'utility-gray-400',
-    },
-    notice: {
-      primary: 'utility-blue-500',
-      secondary: 'utility-blue-400',
+      primary: 'fg-white',
+      secondary: 'fg-warning-primary',
     },
   } as const;
 
   const icons = {
+    brand: SolidInformationCircleIcon,
     error: XCircleIcon,
     success: CheckCircleIcon,
     alert: ExclamationTriangleIcon,
-    info: OutlinedInformationCircleIcon,
-    notice: InformationCircleIcon,
   };
 
+  if (variant === 'secondary') {
+    icons.brand = OutlinedInformationCircleIcon;
+  }
+
   return (
     <BaseIcon
       icon={icons[type]}
-      size={20}
+      size={18}
       color={iconColors[type][variant]}
+      className="mr-1"
     />
   );
 }
 
 interface Props extends React.ComponentProps<typeof View> {
-  type: 'error' | 'success' | 'alert' | 'info' | 'notice';
+  type: 'brand' | 'error' | 'success' | 'alert';
   message: string;
   description?: string;
   variant?: 'primary' | 'secondary';
@@ -75,73 +76,66 @@ function BaseAlert({
 }: Props) {
   const largePhone = useIsAboveBreakpoint('xs');
   const alertClasses = () => {
-    if (variant === 'secondary') {
-      return 'bg-white border';
-    }
-
-    switch (type) {
-      case 'error':
-        return 'bg-error-secondary';
-      case 'success':
-        return 'bg-success-secondary';
-      case 'alert':
-        return 'bg-yellow-50 border-yellow-400';
-      case 'info':
-        return 'bg-white border border-gray-300';
-      case 'notice':
-      default:
-        return 'bg-blue-100';
-    }
-  };
-
-  const textColor = () => {
-    if (variant === 'secondary') {
+    if (variant === 'primary') {
       switch (type) {
         case 'error':
-          return 'text-red-500';
+          return 'bg-error-solid';
         case 'success':
-          return 'text-green-500';
+          return 'bg-success-solid';
         case 'alert':
-          return 'text-yellow-500';
-        case 'info':
-        case 'notice':
+          return 'bg-warning-solid';
+        case 'brand':
         default:
-          return 'text-blue-500';
+          return 'bg-brand-solid';
       }
     } else {
       switch (type) {
         case 'error':
-          return 'text-red-700';
+          return 'bg-white border border-error';
         case 'success':
-          return 'text-green-700';
         case 'alert':
-          return 'text-yellow-700';
-        case 'info':
-          return 'text-gray-500';
-        case 'notice':
+          return 'bg-white border border-primary';
+        case 'brand':
         default:
-          return 'text-blue-700';
+          return 'bg-white border border-brand';
       }
     }
   };
 
-  const borderColor = () => {
-    if (variant === 'secondary') {
-      switch (type) {
-        case 'error':
-          return 'border-red-300';
-        case 'success':
-          return 'border-green-300';
-        case 'alert':
-          return 'border-yellow-300';
-        case 'info':
-        case 'notice':
-        default:
-          return 'border-blue-300';
-      }
+  const messageTextColor = () => {
+    if (variant === 'primary') {
+      return 'text-white';
+    }
+
+    switch (type) {
+      case 'error':
+        return 'text-error-primary';
+      case 'success':
+        return 'text-success-primary';
+      case 'alert':
+        return 'text-warning-primary';
+      case 'brand':
+      default:
+        return 'text-brand-secondary';
+    }
+  };
+
+  const descriptionTextColor = () => {
+    if (variant === 'primary') {
+      return 'text-utility-gray-100';
     }
 
-    return '';
+    switch (type) {
+      case 'error':
+        return 'text-error-primary';
+      case 'success':
+        return 'text-success-primary';
+      case 'alert':
+        return 'text-warning-primary';
+      case 'brand':
+      default:
+        return 'text-brand-tertiary';
+    }
   };
 
   return (
@@ -149,7 +143,6 @@ function BaseAlert({
       className={clsx(
         'flex flex-row rounded-lg',
         alertClasses(),
-        borderColor(),
         largePhone ? 'px-2 py-4' : 'px-1 py-2',
       )}
       {...props}
@@ -160,14 +153,24 @@ function BaseAlert({
           variant={variant}
         />
       </View>
-      <View className={clsx('flex flex-1 flex-col', largePhone ? 'ml-3' : 'ml-1')}>
-        <Text className={clsx('font-medium', textColor(), largePhone ? 'text-base' : 'text-xs')}>
+      <View className={clsx('flex flex-1 flex-col pr-2', largePhone ? 'ml-3' : 'ml-1')}>
+        <BaseText className={clsx(
+          'flex-1 font-semibold',
+          messageTextColor(),
+          largePhone ? 'text-base' : 'text-sm',
+        )}
+        >
           {message}
-        </Text>
+        </BaseText>
         {description && (
-          <Text className={clsx('text-xs text-gray-700', largePhone ? 'mt-3' : 'mt-1')}>
+          <BaseText className={clsx(
+            'flex-1 text-sm',
+            descriptionTextColor(),
+            largePhone ? 'mt-3' : 'mt-1',
+          )}
+          >
             {description}
-          </Text>
+          </BaseText>
         )}
         {children}
       </View>

package/src/components/BaseBadge.tsx

@@ -2,8 +2,9 @@ import clsx from 'clsx';
 import { styled } from 'nativewind';
 import { ViewProps } from 'react-native';
 
-import { View, Text } from '../hoc-components';
+import { View } from '../hoc-components';
 import BaseIcon from './BaseIcon';
+import BaseText from './BaseText';
 import { HeroIcon } from '../types/heroicons';
 
 export type BadgeVariant =
@@ -174,7 +175,7 @@ function BaseBadge({
           />
         </View>
       )}
-      <Text className={textStyles}>{text}</Text>
+      <BaseText className={textStyles}>{text}</BaseText>
       {rightIcon && (
         <View className={iconSpacingStyles.right}>
           <BaseIcon

package/src/components/BaseButton.tsx

@@ -3,10 +3,9 @@ import { styled } from 'nativewind';
 import React from 'react';
 import { GestureResponderEvent } from 'react-native';
 
-import {
-  Text, View, ActivityIndicator,
-} from '../hoc-components';
+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';
@@ -289,11 +288,11 @@ function BaseButton({
           />
         )}
         {text && (
-          <Text className={textStyles}>
+          <BaseText className={textStyles}>
             {text}
             {timer > 0 ? ` (${timer})` : ''}
             {debounce > 0 ? ` (${debounce})` : ''}
-          </Text>
+          </BaseText>
         )}
         {rightIcon && (
           <BaseIcon

package/src/components/BaseDateInput.tsx

@@ -5,9 +5,10 @@ import { ViewProps } from 'react-native';
 import DatePicker, { DatePickerProps } from 'react-native-date-picker';
 import { CalendarIcon } from 'react-native-heroicons/outline';
 
-import { Text, View, Pressable } from '../hoc-components';
+import { View, Pressable } from '../hoc-components';
 import BaseIcon from './BaseIcon';
 import BaseSpinner from './BaseSpinner';
+import BaseText from './BaseText';
 
 interface BaseDateInputProps extends Omit<DatePickerProps, 'open' | 'date' | 'onConfirm' | 'onCancel'> {
   value?: Date | null;
@@ -91,8 +92,8 @@ export default function BaseDateInput({
       className={clsx('flex flex-col', className)}
       style={style}
     >
-      {label && <Text className="mb-2 font-semibold text-secondary">{label}</Text>}
-      {description && <Text className="mb-2 text-tertiary">{description}</Text>}
+      {label && <BaseText className="mb-2 font-semibold text-secondary">{label}</BaseText>}
+      {description && <BaseText className="mb-2 text-tertiary">{description}</BaseText>}
       <Pressable
         onPress={() => {
           if (!disabled) {
@@ -123,13 +124,13 @@ export default function BaseDateInput({
             />
           )}
         </View>
-        <Text className={clsx(
+        <BaseText className={clsx(
           'flex-1',
           formattedDate ? 'text-primary' : 'text-placeholder',
         )}
         >
           {formattedDate || placeholder}
-        </Text>
+        </BaseText>
       </Pressable>
       <DatePicker
         {...props}
@@ -142,7 +143,7 @@ export default function BaseDateInput({
         }}
       />
       {touched && error && (
-        <Text className="text-error-primary">{error}</Text>
+        <BaseText className="text-error-primary">{error}</BaseText>
       )}
     </View>
   );

package/src/components/BaseHorizontalTabs.tsx

@@ -3,14 +3,10 @@ import { styled } from 'nativewind';
 import React, { useState } from 'react';
 import { ViewProps } from 'react-native';
 
-import {
-  View,
-  Text,
-  ScrollView,
-  Pressable,
-} from '../hoc-components';
+import { View, ScrollView, Pressable } from '../hoc-components';
 import BaseBadge from './BaseBadge';
 import BaseSelect, { BaseSelectProps, SelectOption } from './BaseSelect';
+import BaseText from './BaseText';
 
 export type Variant = 'button-brand' | 'underline' | 'button-gray' | 'button-border' | 'button-minimal';
 
@@ -192,9 +188,9 @@ function BaseHorizontalTabs({
               className={getTabStyles(tab.id === selectedTab)}
             >
               <View className="flex-row items-center space-x-2">
-                <Text className={getTextStyles(tab.id === selectedTab)}>
+                <BaseText className={getTextStyles(tab.id === selectedTab)}>
                   {tab.label}
-                </Text>
+                </BaseText>
                 {(tab.badge || tab.badge === 0) && (
                   <BaseBadge
                     text={String(tab.badge)}

package/src/components/BaseRadioGroup.tsx

@@ -2,8 +2,9 @@ import { styled } from 'nativewind';
 import React from 'react';
 import { ViewProps } from 'react-native';
 
-import { View, Text } from '../hoc-components';
+import { View } from '../hoc-components';
 import BaseSelectionItem from './BaseSelectionItem';
+import BaseText from './BaseText';
 
 export interface RadioOption {
   label?: string;
@@ -59,13 +60,13 @@ function BaseRadioGroup({
         >
           {option.children || (
             <View className="ml-3 flex-1">
-              <Text className="text-base text-primary">{option.label}</Text>
+              <BaseText className="text-base text-primary">{option.label}</BaseText>
             </View>
           )}
         </BaseSelectionItem>
       ))}
       {hasError && (
-        <Text className="mt-1.5 text-sm text-error-primary">{error}</Text>
+        <BaseText className="mt-1.5 text-sm text-error-primary">{error}</BaseText>
       )}
     </View>
   );

package/src/components/BaseSelect.tsx

@@ -6,14 +6,11 @@ import { ViewStyle, Dimensions } from 'react-native';
 import { ChevronDownIcon, CheckIcon } from 'react-native-heroicons/outline';
 
 import {
-  GestureScrollView,
-  View,
-  Text,
-  Pressable,
-  TouchableOpacity,
+  GestureScrollView, View, Pressable, TouchableOpacity,
 } from '../hoc-components';
 import BaseBottomSheetModal from './BaseBottomSheetModal';
 import BaseIcon from './BaseIcon';
+import BaseText from './BaseText';
 
 export interface SelectOption {
   value: string;
@@ -89,7 +86,7 @@ function BaseSelect({
   return (
     <View style={style}>
       {label && (
-        <Text className="mb-1.5 text-sm font-medium text-gray-700">{label}</Text>
+        <BaseText className="mb-1.5 text-sm font-medium text-gray-700">{label}</BaseText>
       )}
 
       <Pressable
@@ -97,12 +94,12 @@ function BaseSelect({
         disabled={disabled}
         className={selectClasses}
       >
-        <Text
+        <BaseText
           className={textClasses}
           numberOfLines={1}
         >
           {selectedOption?.label || placeholder}
-        </Text>
+        </BaseText>
         <BaseIcon
           icon={ChevronDownIcon}
           size={20}
@@ -112,11 +109,11 @@ function BaseSelect({
       </Pressable>
 
       {helpText && !hasError && (
-        <Text className="mt-1.5 text-sm text-gray-500">{helpText}</Text>
+        <BaseText className="mt-1.5 text-sm text-gray-500">{helpText}</BaseText>
       )}
 
       {hasError && (
-        <Text className="mt-1.5 text-sm text-red-600">{error}</Text>
+        <BaseText className="mt-1.5 text-sm text-red-600">{error}</BaseText>
       )}
 
       <BaseBottomSheetModal
@@ -131,9 +128,9 @@ function BaseSelect({
             paddingBottom: 16,
           }}
         >
-          <Text className="mb-4 text-center text-lg font-semibold text-gray-900">
+          <BaseText className="mb-4 text-center text-lg font-semibold text-gray-900">
             {bottomSheetTitle || label || placeholder}
-          </Text>
+          </BaseText>
           {options.map((option, index) => (
             <TouchableOpacity
               key={option.value}
@@ -147,7 +144,7 @@ function BaseSelect({
                 },
               )}
             >
-              <Text
+              <BaseText
                 className={clsx('flex-1 text-base', {
                   'text-gray-900': !option.disabled,
                   'text-gray-400': option.disabled,
@@ -155,7 +152,7 @@ function BaseSelect({
                 })}
               >
                 {option.label}
-              </Text>
+              </BaseText>
               {option.value === value && (
               <CheckIcon
                 size={20}

package/src/components/BaseSelectionItem.tsx

@@ -4,7 +4,8 @@ import React from 'react';
 import { ViewProps } from 'react-native';
 import { CheckIcon } from 'react-native-heroicons/solid';
 
-import { View, Text, TouchableOpacity } from '../hoc-components';
+import { View, TouchableOpacity } from '../hoc-components';
+import BaseText from './BaseText';
 
 export interface BaseSelectionItemProps extends ViewProps {
   value: unknown;
@@ -75,7 +76,7 @@ function BaseSelectionItem({
         </View>
       </TouchableOpacity>
       {hasError && (
-        <Text className="mt-1.5 text-sm text-error-primary">{error}</Text>
+        <BaseText className="mt-1.5 text-sm text-error-primary">{error}</BaseText>
       )}
     </View>
   );

package/src/components/BaseStackedList.tsx

@@ -4,9 +4,10 @@ import { ViewProps } from 'react-native';
 import { InboxIcon } from 'react-native-heroicons/outline';
 import { ArrowLeftIcon, ArrowRightIcon } from 'react-native-heroicons/solid';
 
-import { View, Text } from '../hoc-components';
+import { View } from '../hoc-components';
 import BaseButton from './BaseButton';
 import BaseSpinner from './BaseSpinner';
+import BaseText from './BaseText';
 import colors from '../styles/colors';
 
 export interface BaseStackedListProps<T> extends ViewProps {
@@ -37,9 +38,9 @@ function EmptyState({ description }: EmptyStateProps) {
           color={colors.gray_light[500]}
         />
       </View>
-      <Text className="mt-4 text-base font-medium text-primary">No hay nada que mostrar</Text>
+      <BaseText className="mt-4 text-base font-medium text-primary">No hay nada que mostrar</BaseText>
       {description && (
-        <Text className="mt-2 text-sm text-tertiary">{description}</Text>
+        <BaseText className="mt-2 text-sm text-tertiary">{description}</BaseText>
       )}
     </View>
   );
@@ -118,7 +119,7 @@ function BaseStackedList<T>({
             leftIcon={ArrowLeftIcon}
           />
 
-          <Text className="text-sm font-medium text-secondary">
+          <BaseText className="text-sm font-medium text-secondary">
             Página
             {' '}
             {currentPage + 1}
@@ -126,7 +127,7 @@ function BaseStackedList<T>({
             de
             {' '}
             {totalPages}
-          </Text>
+          </BaseText>
 
           <BaseButton
             variant="secondary"

package/src/styles/text-colors.ts

@@ -87,22 +87,6 @@ const textColors: TextColorsType = {
     light: colors.success['600'],
     dark: colors.success['400'],
   },
-  'text-brand': {
-    light: colors.brand['600'],
-    dark: colors.brand['400'],
-  },
-  'text-brand_alt': {
-    light: colors.base.white,
-    dark: colors.base.white,
-  },
-  'text-error': {
-    light: colors.error['500'],
-    dark: colors.error['400'],
-  },
-  'text-success': {
-    light: colors.success['500'],
-    dark: colors.success['400'],
-  },
 };
 
 Object.entries(utilityColors).forEach(([key, value]) => {