@grupalia/rn-ui-kit 0.10.0 → 0.12.0

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]) => {