ikualo-ui-kit-mobile 0.0.3 → 0.0.6

package/.expo/README.md

@@ -0,0 +1,8 @@
+> Why do I have a folder named ".expo" in my project?
+The ".expo" folder is created when an Expo project is started using "expo start" command.
+> What do the files contain?
+- "devices.json": contains information about devices that have recently opened this project. This is used to populate the "Development sessions" list in your development builds.
+- "settings.json": contains the server configuration that is used to serve the application manifest.
+> Should I commit the ".expo" folder?
+No, you should not share the ".expo" folder. It does not contain any information that is relevant for other developers working on the project, it is specific to your machine.
+Upon project creation, the ".expo" folder is already added to your ".gitignore" file.

package/assets/images/_images.ts

@@ -45,4 +45,9 @@ export const images = {
   },
   validateIdentity: require('./validateIdentity.png'),
   validationFailed: require('./validationFailed.png'),
+  header:{
+    back: require('./headerBack.png'),
+    close: require('./headerClose.png'),
+    help: require('./headerInfo.png'),
+  }
 };

package/assets/styles/elements/buttons.ts

@@ -156,6 +156,7 @@ const stylesBtnLightSmall = StyleSheet.create({
     minHeight: 48,
     width: 48,
     height: 48,
+    position: 'relative',
   },
   'btn-light-small-content': {
     alignSelf: 'center',
@@ -166,7 +167,6 @@ const stylesBtnLightSmall = StyleSheet.create({
     minHeight: 48,
     width: 48,
     height: 48,
-    marginLeft: 12,
   },
   'btn-light-small-label': {
     fontSize: 24,
@@ -183,8 +183,23 @@ const stylesBtnLightSmall = StyleSheet.create({
     width: 48,
     height: 48,
   },
+  'btn-light-small--active': {
+    backgroundColor: theme.colors.secondaryLight,
+    borderColor: theme.colors.secondary,
+    borderRadius: 8,
+    borderWidth: 1,
+    maxWidth: 48,
+    minWidth: 48,
+    maxHeight: 48,
+    minHeight: 48,
+    width: 48,
+    height: 48,
+  },
   'btn-light-small-label--disabled': {
     color: theme.colors.disabledButtonBorder,
   },
+  'btn-light-small-label--active': {
+    color: theme.colors.secondary,
+  },
 });
 export { stylesButtonContained, stylesButtonOutlined, stylesButtonText, stylesBtnLightSmall };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -27,11 +27,9 @@
     "expo-secure-store": "~13.0.2",
     "expo-status-bar": "~1.12.1",
     "expo-updates": "^0.25.14",
-    "i18next": "^23.11.5",
     "p-retry": "^6.2.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-i18next": "^14.1.2",
     "react-native": "0.74.1",
     "react-native-asset": "^2.1.1",
     "react-native-country-flag": "^2.0.2",
@@ -40,8 +38,7 @@
     "react-native-paper": "^5.12.3",
     "react-native-safe-area-context": "^4.10.1",
     "react-native-screens": "^3.31.1",
-    "react-native-web": "~0.19.10",
-    "zustand": "^4.5.2"
+    "react-native-web": "~0.19.10"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.8",

package/src/config/paper.config.ts

@@ -5,7 +5,8 @@ export const theme = {
   colors: {
     ...DefaultTheme.colors,
     primary: '#512BDA',
-    secondary: '#00F993',
+    secondary: '#05CFD6',
+    secondaryLight: '#DDF7F7',    
     dark: '#29292C',
     light: '#FFFFFF',
     error: '#F13A59',

package/src/elements/buttons/BtnLightSmall.tsx

@@ -1,31 +1,38 @@
+
 import { Button, Text } from 'react-native-paper';
 import { stylesBtnLightSmall } from '../../../assets/styles/elements/buttons';
+import { View } from 'react-native';
+import { cloneElement } from 'react';
 
 interface IfBtnLightSmall {
   onPress: () => void;
-  icon: any;
+  icon: JSX.Element;
   disabled?: boolean;
+  active?: boolean;
 }
 export const BtnLightSmall = (props: IfBtnLightSmall) => {
-  const { onPress, icon, disabled = false } = props;
+  const { onPress, icon, disabled = false,active } = props;
   const anything = '';
-
   return (
     <Button
       style={[
         stylesBtnLightSmall['btn-light-small'],
+        active && stylesBtnLightSmall['btn-light-small--active'],
         disabled && stylesBtnLightSmall['btn-light-small--disabled'],
       ]}
       contentStyle={stylesBtnLightSmall['btn-light-small-content']}
       labelStyle={[
         (stylesBtnLightSmall['btn-light-small-label'],
+        active && stylesBtnLightSmall['btn-light-small-label--active'],
         disabled && stylesBtnLightSmall['btn-light-small-label--disabled']),
       ]}
       onPress={onPress}
-      icon={icon}
       disabled={disabled}
     >
-      <Text>{anything}</Text>
+      <View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>        
+        {cloneElement(icon, { size:24,color: active?stylesBtnLightSmall['btn-light-small--active'].borderColor: stylesBtnLightSmall['btn-light-small'].borderColor })}
+        <Text>{anything}</Text>
+      </View>
     </Button>
   );
 };

package/src/elements/cards/CardList.tsx

@@ -2,9 +2,10 @@ import { Card } from 'react-native-paper';
 import { stylesCards } from '../../../assets/styles/elements/cards';
 import { View, Text, TouchableHighlight } from 'react-native';
 import { useState } from 'react';
+import { ScrollView } from 'react-native-gesture-handler';
 
 interface IfCardList {
-  options: { value: string }[];
+  options: { value: string | JSX.Element, id: string }[];
   children?: React.ReactNode;
   onSelectOption: (value: string) => void;
 }
@@ -14,13 +15,13 @@ export const CardList = (props: IfCardList) => {
   const [selectedOption, setSelectOption] = useState(0);
 
   return (
-    <View>
+    <ScrollView>
       {options.map((option, index) => (
         <TouchableHighlight
           key={index}
           onPress={() => {
             setSelectOption(index);
-            onSelectOption(option.value);
+            onSelectOption(option.id);
           }}
           style={stylesCards['card-list-item']}
         >
@@ -34,6 +35,6 @@ export const CardList = (props: IfCardList) => {
           </Card>
         </TouchableHighlight>
       ))}
-    </View>
+    </ScrollView>
   );
 };

package/src/elements/headers/HeaderPage.tsx

@@ -2,32 +2,52 @@ import { Text } from 'react-native-paper';
 import { Image, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { stylesHeader } from '../../../assets/styles/elements/header';
-import { icons } from '../../../assets/icons/_icons';
 import { images } from '../../../assets/images/_images';
 
 interface IFHeaderPage {
   title: string;
-  navigateTo: string;
-  onPress?: () => void;
+  navigateTo: 'Back' | string;
+  onPressBack?: () => void;
+  onPressRight?: () => void;
+  right: 'icon' | 'close' | 'help' | ''
 }
 export const HeaderPage = (props: IFHeaderPage) => {
-  const { navigateTo, title, onPress } = props;
-  const navigation = useNavigation();
+  const { navigateTo, title, onPressBack, onPressRight, right } = props;
+  const { navigate, goBack } = useNavigation();
   const navigateToScreen = () => {
-    onPress && onPress();
-    navigateTo === 'Back' ? navigation.goBack() : navigation.navigate(navigateTo as never);
+    onPressBack && onPressBack();
+    navigateTo === 'Back' ? goBack() : navigate(navigateTo as never);
   };
+  const actionsRight = [
+    {
+      name: 'icon',
+      component: <Image source={images.logoSmallBlack} style={stylesHeader['header-logo']} />
+    },
+    {
+      name: 'close',
+      component: <TouchableOpacity onPress={()=>onPressRight && onPressRight()}>
+        <Image source={images.header.close} style={stylesHeader['header-logo']} />
+      </TouchableOpacity>
+
+    },
+    {
+      name: 'help',
+      component: <TouchableOpacity onPress={()=>onPressRight && onPressRight()}>
+        <Image source={images.header.help} style={stylesHeader['header-logo']} />
+      </TouchableOpacity>
+    },
+  ]
   return (
     <View style={stylesHeader['header']}>
-      <TouchableOpacity onPress={navigateToScreen} style={stylesHeader['header-back']}>
-        <Image source={icons.arrowBack} style={stylesHeader['header-back-icon']} />
+      <TouchableOpacity onPress={navigateToScreen}>
+        <Image source={images.header.back} style={stylesHeader['header-logo']} />
       </TouchableOpacity>
-
-      <Text variant="bodyMedium" style={stylesHeader['header-title']}>
-        {title}
-      </Text>
-
-      <Image source={images.logoSmallBlack} style={stylesHeader['header-logo']} />
+      <View style={{ flex: 1, alignItems: 'center' }}>
+        <Text variant="bodyMedium" style={stylesHeader['header-title']}>
+          {title}
+        </Text>
+      </View>
+      {actionsRight.find(x => x.name === right)?.component ?? ""}
     </View>
   );
 };

package/src/elements/inputs/Input.tsx

@@ -28,10 +28,13 @@ interface IfInputText {
   isValid?: boolean;
   msgHelper?: string;
   msgError?: string;
+  required?: boolean;
+  msgErrorRequired?: string;
 }
 
 export const Input = (props: IfInputText) => {
   const [isFocus, setIsFocus] = useState<boolean>(false);
+  const [errorRequired, setErrorRequired] = useState<boolean>(false);
   const {
     label,
     isDisabled,
@@ -53,15 +56,22 @@ export const Input = (props: IfInputText) => {
     type,
     placeholder,
     pattern,
+    required,
+    msgErrorRequired
   } = props;
   const patternNumber = /^[0-9]*$/;
   const patternAlphanumeric = /^[a-zA-Z0-9]*$/;
+  const patternLettersWithAccentsAndSpaces = /^[a-zA-ZáéíóúÁÉÍÓÚñÑ\s]*$/;
   const onChangeText = (text: string) => {
     onChange(text);
+    setErrorRequired(false);
     if (type === 'number' && !patternNumber.test(text)) {
       onInvalid && onInvalid();
     } else if (type === 'alphanumeric' && !patternAlphanumeric.test(text)) {
       onInvalid && onInvalid();
+    }
+    else if (type === 'text' && !patternLettersWithAccentsAndSpaces.test(text)) {
+      onInvalid && onInvalid();
     } else if (pattern && !pattern.test(text)) {
       onInvalid && onInvalid();
     }
@@ -69,15 +79,17 @@ export const Input = (props: IfInputText) => {
   return (
     <View>
       <TextInput
-        label={!isFocus && placeholder && value.trim() !== '' ? placeholder : label}
+        label={!isFocus && placeholder && value?.trim() !== '' ? placeholder : label}
         mode={mode ?? 'flat'}
         disabled={isDisabled}
         value={value}
         onChangeText={onChangeText}
         maxLength={maxLength}
+        selectionColor={!errorRequired ?styleInput['input'].borderBottomColor:styleInput['input-txt-error'].borderBottomColor}
         theme={{
           colors: {
-            onSurfaceVariant: styleInput['input-txt'].color,
+            onSurfaceVariant: !errorRequired ?styleInput['input'].borderBottomColor:styleInput['input-txt-error'].borderBottomColor,
+            error: styleInput['input-txt-error'].borderBottomColor,
           },
         }}
         onFocus={() => {
@@ -87,44 +99,56 @@ export const Input = (props: IfInputText) => {
         onBlur={() => {
           setIsFocus(false);
           onBlur && onBlur();
+          if (value?.trim() === '' && required) {
+            setErrorRequired(true);
+            onInvalid && onInvalid();
+          }
         }}
-        error={error}
+        error={error || errorRequired}
         textColor={textColor}
         style={[styleInput['input-label'], style ?? []]}
         contentStyle={[
           styleInput['input-label'],
           isFocus && isValid && styleInput['input-text--focused'],
-          !isValid && value.trim() !== '' && styleInput['input-error-focused'],
-          !isValid && !isFocus && value.trim() !== '' && styleInput['input-txt-error'],
+          !isValid && value?.trim() !== '' && styleInput['input-error-focused'],
+          !isValid && !isFocus && value?.trim() !== '' && styleInput['input-txt-error'],
+          errorRequired && styleInput['input-txt-error'],
+          errorRequired && isFocus && styleInput['input-error-focused'],
           style ?? [],
         ]}
         underlineColor={
           underlineColor
             ? underlineColor
-            : isValid
-            ? styleInput['input-text-underline'].color
-            : styleInput['input-txt-error'].borderBottomColor
+            : isValid && !errorRequired
+              ? styleInput['input-text-underline'].color
+              : styleInput['input-txt-error'].borderBottomColor
         }
         activeUnderlineColor={
           activeUnderlineColor
             ? activeUnderlineColor
-            : !isValid && value.trim() !== ''
-            ? styleInput['input-text--activeUnderline'].color
-            : ''
+            : !isValid && value?.trim() !== ''
+              ? styleInput['input-text--activeUnderline'].color
+              : errorRequired ? styleInput['input-txt-error'].color:''
         }
         keyboardType={type === 'number' ? 'numeric' : 'default'}
       />
-      {isValid && (
+      {isValid && !errorRequired && (
         <HelperText type="info" style={styleInput['input-password-helper']} visible={true}>
           {msgHelper}
         </HelperText>
       )}
-      {!isValid && msgError !== undefined && value.trim() !== '' && (
+      {!isValid && msgError !== undefined && value?.trim() !== '' && !errorRequired && (
         <View style={styleInput['input-helper--error-text']}>
           <Image style={styleInput['input-helper--error-image']} source={icons.error} />
           <Text style={styleInput['input-password-helper--error-text']}>{msgError}</Text>
         </View>
       )}
+      {errorRequired && (
+        <View style={styleInput['input-helper--error-text']}>
+          <Image style={styleInput['input-helper--error-image']} source={icons.error} />
+          <Text style={styleInput['input-password-helper--error-text']}>{msgErrorRequired}</Text>
+        </View>
+      )}
     </View>
   );
 };

package/src/elements/inputs/InputPassword.tsx

@@ -25,6 +25,7 @@ interface IfInputPassword {
   msgHelper?: string;
   msgError?: string;
   pattern?: RegExp;
+  readonly?: boolean;
 }
 
 export const InputPassword = (props: IfInputPassword) => {
@@ -49,6 +50,7 @@ export const InputPassword = (props: IfInputPassword) => {
     msgError,
     pattern,
     onInvalid,
+    readonly
   } = props;
   const patternPasswordDefault = pattern ?? /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d#?!@$%^&*-]{8,}$/;
 
@@ -67,6 +69,7 @@ export const InputPassword = (props: IfInputPassword) => {
         disabled={isDisabled}
         value={value}
         onChangeText={validateText}
+        readOnly={readonly}
         onFocus={() => {
           setIsFocus(true);
           onFocus && onFocus();