ikualo-ui-kit-mobile 0.1.0 → 0.1.2

package/assets/styles/elements/buttons.ts

@@ -10,12 +10,17 @@ const stylesButtonContained = StyleSheet.create({
   'btn-contained-text': {
     fontFamily: 'MontserratBold',
     textAlign: 'center',
-    fontSize: 16,
+    fontSize: 16
+
   },
   'btn-contained--primary': {
     backgroundColor: theme.colors.primary,
     color: theme.colors.white,
   },
+  'btn-contained--error': {
+    backgroundColor: theme.colors.darkRed,
+    color: theme.colors.white,
+  },
   'btn-contained--lightPrimary': {
     backgroundColor: theme.colors.lightPrimary,
     color: theme.colors.boldBlack,
@@ -41,7 +46,7 @@ const stylesButtonContained = StyleSheet.create({
 
   'btn-contained--sm': {
     padding: 0,
-    width: 70,
+    width: 158,
   },
   'btn-contained--md': {
     paddingVertical: 3,
@@ -57,7 +62,7 @@ const stylesButtonOutlined = StyleSheet.create({
   'btn-outlined-text': {
     fontFamily: 'MontserratBold',
     textAlign: 'center',
-    fontSize: 16,
+    fontSize: 16
   },
   'btn-outlined': {
     borderRadius: 8,
@@ -69,6 +74,10 @@ const stylesButtonOutlined = StyleSheet.create({
     borderColor: theme.colors.primary,
     color: theme.colors.primary,
   },
+  'btn-outlined--error': {
+    borderColor: theme.colors.darkRed,
+    color: theme.colors.darkRed,
+  },
   'btn-outlined--secondary': {
     borderColor: theme.colors.secondary,
     color: theme.colors.secondary,
@@ -87,7 +96,8 @@ const stylesButtonOutlined = StyleSheet.create({
   },
   'btn-outlined--sm': {
     paddingVertical: 3,
-    paddingHorizontal: 10,
+    width: 158,
+    // paddingHorizontal: 10,
   },
   'btn-outlined--md': {
     paddingVertical: 3,
@@ -201,5 +211,34 @@ const stylesBtnLightSmall = StyleSheet.create({
   'btn-light-small-label--active': {
     color: theme.colors.secondary,
   },
+
+});
+const stylesButtonCircle = StyleSheet.create({
+  'btn-circle': {
+    borderRadius: 19,
+    backgroundColor: theme.colors.lightPurpleBorder,
+    paddingHorizontal: 8,
+    paddingTop: 4,
+  },
+  'btn-circle__icon': {
+    fontSize: 14,
+    color: theme.colors.primary,
+  },
+  'btn-circle__image': {
+    width: 24,
+    height: 24,
+  },
+  'btn-circle__content': {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
+  },
+
+  'btn-circle__text': {
+    fontSize: 14,
+    color: theme.colors.primary,
+    fontFamily: 'MontserratSemiBold',
+  },
 });
-export { stylesButtonContained, stylesButtonOutlined, stylesButtonText, stylesBtnLightSmall };
+export { stylesButtonContained, stylesButtonOutlined, stylesButtonText, stylesBtnLightSmall, stylesButtonCircle };

package/assets/styles/elements/cards.ts

@@ -102,3 +102,47 @@ export const stylesCards = StyleSheet.create({
     borderRadius: 4,
   },
 });
+export const styleCardAbout = StyleSheet.create({
+  'card-about': {
+    backgroundColor: theme.colors.white,
+    borderTopStartRadius: 8,
+    borderBottomLeftRadius: 8,
+  },
+
+  'card-about__image': {
+    borderBottomRightRadius: 8,
+    borderTopRightRadius: 8,
+    height: '100%',
+    objectFit: 'contain',
+    backgroundColor: theme.colors.lightPurpleBorder,
+  },
+  'card-about__title': {
+    fontFamily: 'MontserratSemiBold',
+    fontSize: 14,
+    lineHeight: 21,
+    color: theme.colors.cardDsc,
+  },
+  'card-about__vertical-line': {
+    width: 8,
+    backgroundColor: theme.colors.mediumPurple,
+    borderTopStartRadius: 8,
+    borderBottomStartRadius: 30,
+    borderBottomEndRadius: 8,
+  },
+  'card-about__container': {
+    flexDirection: 'row',
+  },
+  'card-about__text__container': {
+    flex: 1,
+    marginTop: 16,
+    marginBottom: 16,
+    paddingLeft: 8,
+  },
+  'card-about__text-dsc': {
+    marginVertical: 10,
+  },
+
+  'card-about__full-width': {
+    paddingRight: 16,
+  },
+});

package/assets/styles/elements/dialog.ts

@@ -3,18 +3,18 @@ import { theme } from '../../../src/config/paper.config';
 export const stylesDialog = StyleSheet.create({
   dialog: {
     backgroundColor: theme.colors.white,
+    marginHorizontal: 16,
   },
-  'dialog-icon': {
-    width: 24,
-    height: 24,
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-  },
+  'dialog-icon': { borderRadius: 100, backgroundColor: theme.colors.lightRed, width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
+  'dialog-icon--error': { backgroundColor: theme.colors.lightRed },
+  'dialog-icon--warning': { backgroundColor: theme.colors.lightWarning },
+  'dialog-icon--info': { backgroundColor: theme.colors.lightInfo },
+  'dialog-icon--success': { backgroundColor: theme.colors.lightSuccess },
   'dialog-title': {
     fontSize: 16,
     color: theme.colors.text,
     textAlign: 'center',
+    lineHeight: 24,
     fontFamily: 'MontserratSemiBold',
   },
   'dialog-select-title': {
@@ -75,4 +75,11 @@ export const stylesDialog = StyleSheet.create({
     alignItems: 'center',
     marginBottom: 16,
   },
-});
+  'dialog-general-close': {
+    position: 'absolute',
+    left: 10,
+    top: 20,
+    justifyContent: 'space-evenly',
+  },
+
+});

package/assets/styles/elements/header.ts

@@ -24,4 +24,6 @@ export const stylesHeader = StyleSheet.create({
     fontFamily: 'MontserratSemiBold',
   },
   'header-logo': { height: 32, width: 32, resizeMode: 'contain' },
-});
+  'header-icon-back': { borderRadius: 100, backgroundColor: theme.colors.lightPrimary, width: 32, height: 32, alignItems: 'center', justifyContent: 'center' },
+
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "main": "src/index.ts",
   "scripts": {
     "start": "expo start",
@@ -28,7 +28,7 @@
     "expo-updates": "^0.25.14",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-native": "0.74.1",
+    "react-native": "^0.74.1",
     "react-native-asset": "^2.1.1",
     "react-native-country-flag": "^2.0.2",
     "react-native-gesture-handler": "^2.16.2",

package/src/config/paper.config.ts

@@ -46,6 +46,9 @@ export const theme = {
     disabledButtonBackground: '#E8E8E8',
     disabledButtonBorder: '#949494',
     grayDisabled: '#6C6C6C',
+    mediumPurple: '#7B5EE3',
+    softGray: '#F2F2F2',
+
   },
   dark: false,
 };

package/src/elements/buttons/BtnCircle.tsx

@@ -0,0 +1,63 @@
+import { Button, Text } from 'react-native-paper';
+import { stylesButtonText, stylesButtonCircle } from '../../../assets/styles/elements/buttons';
+import { cloneElement } from 'react';
+import { View, Image } from 'react-native';
+import { theme } from '../../config/paper.config';
+
+interface IfBtnCircle {
+    onPress: () => void;
+    icon?: JSX.Element;
+    disabled?: boolean;
+    text?: string;
+    contentStyle?: object;
+    image?: any;
+    customBackgroundColor?: string;
+    customTextColor?: string;
+    customButtonRadius?: number;
+    customFontStyle?: object;
+}
+
+export const BtnCircle = (props: IfBtnCircle) => {
+    const {
+        onPress,
+        icon,
+        disabled,
+        text,
+        image,
+        customBackgroundColor,
+        customTextColor,
+        customButtonRadius,
+        customFontStyle,
+        contentStyle,
+    } = props;
+
+    return (
+        <Button
+            onPress={onPress}
+            disabled={disabled}
+            style={[
+                stylesButtonCircle['btn-circle'],
+                customBackgroundColor ? { backgroundColor: customBackgroundColor } : undefined,
+                customButtonRadius ? { borderRadius: customButtonRadius } : undefined,
+                contentStyle,
+            ]}
+            contentStyle={contentStyle}
+        >
+            <View style={stylesButtonCircle['btn-circle__content']}>
+                {image && <Image source={image} style={stylesButtonCircle['btn-circle__image']} />}
+                {text && (
+                    <Text
+                        style={[
+                            stylesButtonCircle['btn-circle__text'],
+                            { color: customTextColor || theme.colors.primary },
+                            customFontStyle,
+                        ]}
+                    >
+                        {text}
+                    </Text>
+                )}
+                {icon && cloneElement(icon, { style: stylesButtonCircle['btn-circle__icon'] })}
+            </View>
+        </Button>
+    );
+};

package/src/elements/buttons/BtnContained.tsx

@@ -4,7 +4,7 @@ import { Image } from 'react-native';
 import { stylesButtonContained } from '../../../assets/styles/elements/buttons';
 
 interface IfBtnContained {
-  color?: 'primary' | 'secondary' | 'dark' | 'light' | 'lightPrimary';
+  color?: 'primary' | 'secondary' | 'dark' | 'light' | 'lightPrimary' | 'error';
   text?: string;
   size?: 'sm' | 'md' | 'xl';
   labelStyle?: any;
@@ -47,4 +47,4 @@ export const BtnContained = (props: IfBtnContained) => {
       </Button>
     </>
   );
-};
+};

package/src/elements/buttons/BtnOutlined.tsx

@@ -3,7 +3,7 @@ import { Button } from 'react-native-paper';
 import { stylesButtonOutlined } from '../../../assets/styles/elements/buttons';
 
 interface IfBtnOutlined {
-  color?: 'primary' | 'secondary' | 'dark' | 'light';
+  color?: 'primary' | 'secondary' | 'dark' | 'light' | 'error';
   text?: string;
   size?: 'sm' | 'md' | 'xl';
   customStyles?: object;

package/src/elements/cards/CardAbout.tsx

@@ -0,0 +1,32 @@
+import { View, Image, ImageRequireSource } from 'react-native';
+import { Card, TouchableRipple, Text } from 'react-native-paper';
+import { styleCardAbout } from '../../../assets/styles/elements/cards';
+
+interface IfCardAbout {
+    image?: ImageRequireSource;
+    children: any;
+    style?: object;
+}
+
+export const CardAbout = (props: IfCardAbout) => {
+    const { image, children } = props;
+    return (
+        <TouchableRipple onPress={() => { }}>
+            <Card style={styleCardAbout['card-about']}>
+                <View style={styleCardAbout['card-about__container']}>
+                    <View style={styleCardAbout['card-about__vertical-line']} />
+
+                    <View
+                        style={[
+                            styleCardAbout['card-about__text__container'],
+                            !image && styleCardAbout['card-about__full-width'],
+                        ]}
+                    >
+                        {children}
+                    </View>
+                    {image && <Image style={styleCardAbout['card-about__image']} source={image} />}
+                </View>
+            </Card>
+        </TouchableRipple>
+    );
+};

package/src/elements/dialogs/DialogGeneral.tsx

@@ -1,47 +1,96 @@
-import { Dialog, Portal, Text } from 'react-native-paper';
+import { Dialog, Portal, Text, Button, Icon } from 'react-native-paper';
 import { BtnOutlined, BtnContained } from '../../';
 import { stylesDialog } from '../../../assets/styles/elements/dialog';
-import { Image, View } from 'react-native';
-import { icons } from '../../../assets/icons/_icons';
-
+import { StyleProp, TextStyle, View, ViewStyle } from 'react-native';
+import React from 'react';
+import { MaterialIcons, FontAwesome } from '@expo/vector-icons';
+import { theme } from '../../config/paper.config';
 interface IFDialogIcon {
   isVisible: boolean;
-  icon: 'error' | 'warning' | 'info' | 'success';
-  title: string;
+  icon?: 'error' | 'warning' | 'info' | 'success' | '';
+  title?: string;
+  showClose?: boolean;
   text: JSX.Element | string;
+  additionalText?: JSX.Element | string;
   textOk?: string;
   textCancel?: string;
   onDismiss: () => void;
   onConfirm: () => void;
+  textStyle?: TextStyle;
+  additionalTextStyle?: TextStyle;
+  children?: JSX.Element;
+  isDisabled?: boolean;
+  styleBtnContainer?: StyleProp<ViewStyle>;
+
 }
 
 export const DialogGeneral = (props: IFDialogIcon) => {
-  const { isVisible, title, text, textCancel, textOk, icon, onDismiss, onConfirm } = props;
+  const { isVisible, title, text, textCancel, textOk, icon, onDismiss, onConfirm, textStyle, additionalTextStyle, additionalText, isDisabled, children, styleBtnContainer, showClose } = props;
+  const icons = {
+    error: <MaterialIcons name="delete-forever" size={24} color={theme.colors.darkRed} />,
+    warning: <FontAwesome name="warning" size={24} color={theme.colors.darkWarning} />,
+    info: <MaterialIcons name="info-outline" size={24} color={theme.colors.darkBlue} />,
+    success: <MaterialIcons name="check-circle" size={24} color={theme.colors.darkSuccess} />
+  }
+  const IconDelete = <View style={[stylesDialog['dialog-icon'], icon ? stylesDialog[`dialog-icon--${icon}`] : null]}>
+    {icon && icons[icon]}
+  </View>
 
   return (
     <Portal>
       <Dialog style={stylesDialog['dialog']} visible={isVisible} onDismiss={onDismiss}>
-        <View style={stylesDialog['dialog-container-icon']}>
-          <Image style={stylesDialog['dialog-icon']} source={icons[icon]} />
+        {icon && (
+          <View style={stylesDialog['dialog-container-icon']}>
+            {IconDelete}
+          </View>
+        )}
+        <View>
+          <Dialog.Title style={[stylesDialog['dialog-title']]}>{title}</Dialog.Title>
+          {showClose &&
+            <Button onPress={onDismiss} style={stylesDialog['dialog-general-close']}>
+              <Icon
+                source="close"
+                color={stylesDialog['dialog-down-close-icon'].color}
+                size={stylesDialog['dialog-down-close-icon'].width}
+              />
+            </Button>
+          }
         </View>
-        <Dialog.Title style={stylesDialog['dialog-title']}>{title}</Dialog.Title>
         <Dialog.Content>
-          <Text style={stylesDialog['dialog-text']}>{text}</Text>
+          <Text style={textStyle || stylesDialog['dialog-text']}>
+            {text}
+          </Text>
+          {additionalText && (
+            <Text style={additionalTextStyle ? [stylesDialog['dialog-text'], additionalTextStyle] : undefined}>
+              {additionalText}
+            </Text>
+          )}
+          {children && (
+            <View>
+              {children}
+            </View>
+          )}
         </Dialog.Content>
         <Dialog.Actions style={stylesDialog['dialog-actions']}>
           {textCancel && (
-            <BtnOutlined color="primary" size={!textOk ? 'xl' : 'sm'} onPress={onDismiss} text={textCancel} />
-          )}
-          {textOk && (
-            <BtnContained
-              color="primary"
-              size={!textCancel ? 'xl' : 'sm'}
-              onPress={onConfirm}
-              text={textOk}
-            />
+            <BtnOutlined color={icon === 'error' ? 'error' : 'primary'}
+              size='sm'
+              onPress={onDismiss} text={textCancel} />
           )}
+          <View style={styleBtnContainer} >
+            {textOk && (
+              <BtnContained
+                color={icon === 'error' ? 'error' : 'primary'}
+                size='sm'
+                onPress={onConfirm}
+                text={textOk}
+                isDisabled={isDisabled}
+              />
+            )}
+          </View>
+
         </Dialog.Actions>
       </Dialog>
     </Portal>
   );
-};
+};

package/src/elements/headers/HeaderPage.tsx

@@ -3,6 +3,8 @@ import { Image, TouchableOpacity, View } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
 import { stylesHeader } from '../../../assets/styles/elements/header';
 import { images } from '../../../assets/images/_images';
+import { FontAwesome6, Ionicons, MaterialIcons } from '@expo/vector-icons';
+import { theme } from '../../config/paper.config';
 
 interface IFHeaderPage {
   title: string;
@@ -28,21 +30,25 @@ export const HeaderPage = (props: IFHeaderPage) => {
     {
       name: 'close',
       component: <TouchableOpacity onPress={() => onPressRight && onPressRight()}>
-        <Image source={images.header.close} style={stylesHeader['header-logo']} />
+        <View style={stylesHeader['header-icon-back']}>
+          <Ionicons name="close" size={24} color={theme.colors.primary} />
+        </View>
       </TouchableOpacity>
 
     },
     {
       name: 'help',
       component: <TouchableOpacity onPress={() => onPressRight && onPressRight()}>
-        <Image source={images.header.help} style={stylesHeader['header-logo']} />
+        <MaterialIcons name="help-outline" size={28} color={theme.colors.primary} />
       </TouchableOpacity>
     },
   ]
   return (
     <View style={stylesHeader['header']}>
       <TouchableOpacity onPress={navigateToScreen}>
-        <Image source={images.header.back} style={stylesHeader['header-logo']} />
+        <View style={stylesHeader['header-icon-back']}>
+          <FontAwesome6 name="chevron-left" size={16} color={theme.colors.primary} />
+        </View>
       </TouchableOpacity>
       <View style={{ flex: 1, alignItems: 'center' }}>
         <Text variant="bodyMedium" style={stylesHeader['header-title']}>
@@ -52,4 +58,4 @@ export const HeaderPage = (props: IFHeaderPage) => {
       {actionsRight.find(x => x.name === right)?.component ?? ""}
     </View>
   );
-};
+};

package/src/elements/inputs/Input.tsx

@@ -3,7 +3,7 @@ import { styleInput } from '../../../assets/styles/elements/inputs';
 import { useState } from 'react';
 import { Image, View } from 'react-native';
 import { icons } from '../../../assets/icons/_icons';
-import { theme } from 'ikualo-ui-kit-mobile/src/config/paper.config';
+import { theme } from '../../config/paper.config';
 
 interface IfInputText {
   label?: string;
@@ -32,6 +32,7 @@ interface IfInputText {
   required?: boolean;
   readonly?: boolean;
   msgErrorRequired?: string;
+  selection?: any
   icon?: any;
 }
 
@@ -61,6 +62,7 @@ export const Input = (props: IfInputText) => {
     pattern,
     required,
     msgErrorRequired,
+    selection,
     readonly,
     icon
   } = props;
@@ -143,6 +145,7 @@ export const Input = (props: IfInputText) => {
         keyboardType={type === 'number' ? 'numeric' : 'default'}
         right={icon && <TextInput.Icon color={theme.colors.primary} icon={icon ?? ''} />}
         readOnly={isDisabled || readonly}
+        selection={selection}
       />
       {!isDisabled &&
         <>

package/src/elements/inputs/InputOtp.tsx

@@ -10,10 +10,11 @@ interface IFInputOtp {
   onChangeText: (otp: string) => void;
   onFocus: () => void;
   onBlur: () => void;
+  onKeyPress: (e: any) => void;
 }
 
 export const InputOtp = (props: IFInputOtp) => {
-  const { onChangeText, value, focus, onBlur, onFocus, isValid, someFocus } = props;
+  const { onChangeText, value, focus, onBlur, onFocus, isValid, someFocus, onKeyPress } = props;
   const inputRef = React.useRef<any>(null);
   React.useEffect(() => {
     if (focus) {
@@ -42,6 +43,7 @@ export const InputOtp = (props: IFInputOtp) => {
         onFocus={onFocus}
         placeholderTextColor={theme.colors.text}
         keyboardType="numeric"
+        onKeyPress={(e) => { onKeyPress && onKeyPress(e) }}
       />
     </>
   );

package/src/elements/inputs/InputPassword.tsx

@@ -41,7 +41,6 @@ export const InputPassword = (props: IfInputPassword) => {
     underlineColor,
     activeUnderlineColor,
     style,
-    theme,
     textColor,
     value,
     isValid,
@@ -54,7 +53,8 @@ export const InputPassword = (props: IfInputPassword) => {
     readonly,
     nonValidate,
   } = props;
-  const patternPasswordDefault = pattern ?? /^(?=.\d)(?=.[\u0021-\u002b\u003c-\u0040])(?=.[A-Z])(?=.[a-z])\S{8,16}$/;
+  const patternPasswordDefault = pattern ?? /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[!@#$%^&*]).{8,}$/
+
 
   const validateText = (text: string) => {
     onChange(text);
@@ -132,4 +132,4 @@ export const InputPassword = (props: IfInputPassword) => {
       )}
     </View>
   );
-};
+};

package/src/elements/pages/PageBasic.tsx

@@ -9,13 +9,13 @@ interface IFPageBasic {
 }
 
 export const PageBasic = (props: IFPageBasic) => {
-  const { color, children, customStyles } = props;
+  const { children, customStyles } = props;
 
   return (
-    <>
-      <SafeAreaView style={[stylePages['page-basic'], { backgroundColor: color }]}>
+    <View style={[stylePages['page-basic']]}>
+      <SafeAreaView style={[stylePages['page-basic']]}>
         <View style={[stylePages['page-basic-view'], customStyles]}>{children}</View>
       </SafeAreaView>
-    </>
+    </View>
   );
-};
+};

package/src/elements/pages/PageTouchable.tsx

@@ -1,8 +1,6 @@
 import { View, KeyboardAvoidingView, TouchableWithoutFeedback, Keyboard } from 'react-native';
 import { theme } from '../../config/paper.config';
 import { SafeAreaView } from 'react-native-safe-area-context';
-
-
 interface IFPageTouchable {
   children: React.ReactNode;
   customStyles?: object;
@@ -12,7 +10,7 @@ export const PageTouchable = (props: IFPageTouchable) => {
   const { children, customStyles } = props;
 
   return (
-    <>
+    <View style={{ backgroundColor: theme.colors.background, flex: 1 }}>
       <KeyboardAvoidingView style={{ flex: 1 }} behavior="height">
         <TouchableWithoutFeedback onPress={() => Keyboard.dismiss()}>
           <SafeAreaView style={{ flex: 1 }}>
@@ -22,6 +20,6 @@ export const PageTouchable = (props: IFPageTouchable) => {
           </SafeAreaView>
         </TouchableWithoutFeedback>
       </KeyboardAvoidingView>
-    </>
+    </View>
   );
 };

package/src/index.ts

@@ -6,6 +6,7 @@ export * from './elements/buttons/BtnOutlined';
 export * from './elements/buttons/BtnText';
 export * from './elements/buttons/BtnIcon';
 export * from './elements/buttons/BtnLightSmall';
+export * from './elements/buttons/BtnCircle';
 
 export * from './elements/inputs/InputOtp';
 export * from './elements/inputs/InputPassword';
@@ -22,6 +23,7 @@ export * from './elements/dialogs/DialogDown';
 export * from './elements/cards/CardInteractive';
 export * from './elements/cards/CardComponent';
 export * from './elements/cards/CardList';
+export * from './elements/cards/CardAbout';
 
 export * from './elements/headers/HeaderPage';
 

package/%ProgramData%/Microsoft/Windows/UUS/State/_active.uusver

@@ -1 +0,0 @@
-1308.2407.15042.0