ikualo-ui-kit-mobile 0.0.4 → 0.0.7

package/assets/styles/elements/alert.ts

@@ -11,7 +11,6 @@ const styleAlerts = StyleSheet.create({
     width: '92%',
     borderRadius: 4,
     borderLeftWidth: 8,
-    minHeight: 102,
     padding: 16,
   },
   'alert--info': {
@@ -31,8 +30,8 @@ const styleAlerts = StyleSheet.create({
     borderLeftColor: theme.colors.darkRed,
   },
   'alert-container-text': { flexDirection: 'row', gap: 8 },
-  'alert-container-title': { fontSize: 14, fontFamily: 'MontserratBold', color: theme.colors.text },
+  'alert-container-title': { fontSize: 14, fontFamily: 'MontserratBold', color: theme.colors.text , alignSelf: 'center' },
   'alert-body': { marginTop: 8 },
 });
 
-export { styleAlerts };
+export { styleAlerts };

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/assets/styles/elements/cards.ts

@@ -40,8 +40,7 @@ export const stylesCards = StyleSheet.create({
     marginVertical: 4,
   },
   'card-interactive-icon': {
-    width: 24,
-    marginRight: 8,
+    marginRight: 16,
   },
   'card-interactive-info': {
     flexDirection: 'row',

package/assets/styles/elements/dropdown.ts

@@ -4,15 +4,14 @@ import { theme } from '../../../src/config/paper.config';
 const styleDropdown = StyleSheet.create({
   'dropdown-container': {
     width: 'auto',
-    marginRight: -42,
     flexDirection: 'row',
     justifyContent: 'flex-end',
+    marginTop:28
   },
   'dropdown-menu': { flexDirection: 'row', alignItems: 'center' },
+  'dropdown-content': { backgroundColor: 'white', borderRadius: 16, padding: 16 },
   'dropdown-label': { fontSize: 16, marginTop: 15 },
   'dropdown-label-content': { width: 70 },
-  'dropdown-label-arrow': { fontSize: 24 },
-  'dropdown-label-width': { width: 10 },
   'dropdown-overlay': {
     position: 'absolute',
     top: 0,
@@ -27,6 +26,12 @@ const styleDropdown = StyleSheet.create({
     fontSize: 14,
     color: theme.colors.boldBlack,
   },
+  'dropdown-color--primary': {
+    color: theme.colors.primary,
+  },
+  'dropdown-highlight-color': {
+    color: theme.colors.lightPrimary,
+  }
 });
 
 export { styleDropdown };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.0.4",
+  "version": "0.0.7",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -10,11 +10,10 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~3.2.1",
+    "@expo/vector-icons": "^14.0.3",
     "@react-navigation/bottom-tabs": "^6.5.20",
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^6.3.29",
-    "axios": "^1.7.2",
-    "crypto-js": "^4.2.0",
     "expo": "~51.0.8",
     "expo-application": "~5.9.1",
     "expo-constants": "^16.0.1",
@@ -27,21 +26,16 @@
     "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",
-    "react-native-crypto-js": "^1.0.0",
     "react-native-gesture-handler": "^2.16.2",
     "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",
@@ -53,4 +47,4 @@
     "metro-react-native-babel-preset": "^0.77.0",
     "typescript": "^5.1.3"
   }
-}
+}

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/alerts/Alert.tsx

@@ -5,7 +5,7 @@ import { styleAlerts } from '../../../assets/styles/elements/alert';
 import { icons } from '../../../assets/icons/_icons';
 interface IFAlertInfo {
   title: string;
-  text: JSX.Element;
+  text?: JSX.Element;
   type: 'info' | 'warning' | 'error' | 'success';
   onClose: () => void;
 }
@@ -24,8 +24,9 @@ export const Alert = (props: IFAlertInfo) => {
           <Image source={icons[type]} />
           <Text style={styleAlerts['alert-container-title']}>{title}</Text>
         </View>
-        <View style={styleAlerts['alert-body']}>{text}</View>
+        {text && <View style={styleAlerts['alert-body']}>{text}</View>}
+        
       </Animated.View>
     </Portal>
   );
-};
+}

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:21,color: active?stylesBtnLightSmall['btn-light-small--active'].borderColor: stylesBtnLightSmall['btn-light-small'].borderColor })}
+        <Text>{anything}</Text>
+      </View>
     </Button>
   );
 };

package/src/elements/cards/CardInteractive.tsx

@@ -1,10 +1,12 @@
-import { View, Image, Touchable, TouchableHighlight } from 'react-native';
+import { View } from 'react-native';
 import { Card, Text, TouchableRipple } from 'react-native-paper';
 import { stylesCards } from '../../../assets/styles/elements/cards';
-import { icons } from '../../../assets/icons/_icons';
-
+import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
+import { cloneElement } from 'react';
+import { theme } from '../../config/paper.config';
 interface IFCardInteractive {
-  iconSource?: any;
+  iconLeft?: JSX.Element;
+  iconRight?: JSX.Element;
   title: string;
   description?: string;
   onPress: () => void;
@@ -12,13 +14,13 @@ interface IFCardInteractive {
 }
 
 export const CardInteractive = (props: IFCardInteractive) => {
-  const { iconSource, title, description, onPress } = props;
+  const { iconLeft, title, description,iconRight, onPress } = props;
   return (
     <TouchableRipple onPress={onPress}>
       <Card style={stylesCards['card-interactive']}>
         <View style={stylesCards['card-interactive-info']}>
           <View style={stylesCards['card-interactive-container']}>
-            {iconSource && <Image source={iconSource} style={stylesCards['card-interactive-icon']} />}
+            {iconLeft ? cloneElement(iconLeft, { style: stylesCards['card-interactive-icon'],color:theme.colors.primary }) : ""}
             <View>
               <Text style={stylesCards['card-interactive-text']}>{title}</Text>
               <View style={stylesCards['card-interactive-description']}>
@@ -26,7 +28,7 @@ export const CardInteractive = (props: IFCardInteractive) => {
               </View>
             </View>
           </View>
-          <Image source={icons.arrowRight} style={stylesCards['card-interactive-arrow']} />
+          {iconRight??<FontAwesome6 name="chevron-right" size={15} color={theme.colors.blackText} />}
         </View>
       </Card>
     </TouchableRipple>

package/src/elements/dropdown/Dropdown.tsx

@@ -1,14 +1,16 @@
 import { useState } from 'react';
-import { View } from 'react-native';
+import { TouchableNativeFeedback, View } from 'react-native';
 import { Button, Divider, Menu, Portal } from 'react-native-paper';
 import { BtnIcon } from '../buttons/BtnIcon';
-import { icons } from '../../../assets/icons/_icons';
 import { styleDropdown } from '../../../assets/styles/elements/dropdown';
 import { theme } from '../../config/paper.config';
+import FontAwesome6 from '@expo/vector-icons/FontAwesome6';
+import { TouchableHighlight } from 'react-native-gesture-handler';
 interface IFDropdown {
   items: IFMenuItem[];
-  icon?: string;
-  label: string;
+  iconText?: string;
+  iconToShow?: JSX.Element;
+  label?: string;
   title?: string;
   onPress: (value: string) => void;
 }
@@ -19,34 +21,37 @@ interface IFMenuItem {
   divider?: boolean;
 }
 export const Dropdown = (props: IFDropdown) => {
-  const { items, icon, label, title, onPress } = props;
+  const { items, iconText, label, title, iconToShow, onPress } = props;
   const [visible, setVisible] = useState(false);
   const openMenu = () => setVisible(true);
   const closeMenu = () => setVisible(false);
-
   return (
     <View style={styleDropdown['dropdown-container']}>
       <Menu
         anchorPosition="bottom"
-        contentStyle={{ backgroundColor: 'white', borderRadius: 16, padding: 16 }}
+        contentStyle={styleDropdown['dropdown-content']}
         visible={visible}
         onDismiss={closeMenu}
         anchor={
-          <View style={styleDropdown['dropdown-menu']}>
-            <BtnIcon
-              labelStyle={styleDropdown['dropdown-label']}
-              contentStyle={styleDropdown['dropdown-label-content']}
-              icon={icon}
-              text={label}
-              direction={'left'}
-              onPress={openMenu}
-            />
-            <BtnIcon
-              labelStyle={styleDropdown['dropdown-label-arrow']}
-              contentStyle={styleDropdown['dropdown-label-width']}
-              icon={icons.arrowDropdown}
-              onPress={openMenu}
-            />
+          <View 
+           style={styleDropdown['dropdown-menu']}
+          >
+            {label &&
+              <BtnIcon
+                labelStyle={styleDropdown['dropdown-label']}
+                contentStyle={styleDropdown['dropdown-label-content']}
+                icon={iconText}
+                text={label}
+                direction={'left'}
+                onPress={openMenu}
+              />
+            }
+            <TouchableHighlight 
+              onPress={openMenu} 
+              underlayColor={styleDropdown['dropdown-highlight-color'].color}
+            >
+              {iconToShow ?? <FontAwesome6 name="chevron-down" size={15} color={styleDropdown['dropdown-color--primary'].color} />}
+            </TouchableHighlight>
           </View>
         }
       >
@@ -81,4 +86,4 @@ export const Dropdown = (props: IFDropdown) => {
       <Portal>{visible && <View style={styleDropdown['dropdown-overlay']} />}</Portal>
     </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();

package/src/elements/progressBar/ProgressBar.tsx

@@ -6,14 +6,15 @@ interface IfProgressBarComponent {
   title: string;
   progressValue: number;
   style?: object;
+  width: number;
   isActive: boolean;
 }
 
 export const ProgressBarComponent = (props: IfProgressBarComponent) => {
-  const { title, progressValue, style, isActive } = props;
+  const { title, progressValue, style, isActive,width } = props;
 
   return (
-    <View style={styleProgressBar['progress-bar-container']}>
+    <View style={{width: `${width}%`}}>
       {title && (
         <Text
           style={[

package/src/elements/progressBar/ProgressBarSteps.tsx

@@ -15,7 +15,7 @@ interface IFProgressBar {
 export const ProgressBarSteps = (props: IFProgressBarStepsProps) => {
   const { items, currentKey, children } = props;
   const currentItem: IFProgressBar | undefined = items.find((item) => item.key === currentKey);
-
+  const width = Math.round(100 / items.length);
   return (
     <>
       <View style={styleRegisterContent['progress-bar-container']}>
@@ -23,6 +23,7 @@ export const ProgressBarSteps = (props: IFProgressBarStepsProps) => {
           return (
             <ProgressBarComponent
               key={item.key}
+              width={width}
               title={item.title}
               progressValue={item.progress}
               isActive={item.progress > 0 || item.key === currentKey}
@@ -34,4 +35,4 @@ export const ProgressBarSteps = (props: IFProgressBarStepsProps) => {
       {currentItem?.child}
     </>
   );
-};
+};