ikualo-ui-kit-mobile 0.0.2 → 0.0.3

package/package.json

@@ -1,11 +1,9 @@
 {
   "name": "ikualo-ui-kit-mobile",
-  "version": "0.0.2",
-  "main": "dist/index.ts",
+  "version": "0.0.3",
+  "main": "src/index.ts",
   "scripts": {
     "start": "expo start",
-    "build": "babel src --out-dir dist",
-    "prepublishOnly": "npm run build",
     "android": "expo start --android",
     "ios": "expo start --ios",
     "web": "expo start --web"

package/src/config/paper.config.ts

@@ -0,0 +1,49 @@
+import { MD3DarkTheme as DefaultTheme } from 'react-native-paper';
+
+export const theme = {
+  ...DefaultTheme,
+  colors: {
+    ...DefaultTheme.colors,
+    primary: '#512BDA',
+    secondary: '#00F993',
+    dark: '#29292C',
+    light: '#FFFFFF',
+    error: '#F13A59',
+    disabled: '#E6E0E9',
+    black: '#000000',
+    white: '#FFFFFF',
+    text: '#0A0A0A',
+    lightPrimary: '#F3EEFC',
+    lightBlue: '#00BACA',
+    blackText: '#0B041F',
+    grayText: '#B4B4B4',
+    boldDark: '#0F042D',
+    lightBlack: '#1E1E1E',
+    lightBlueBorder: '#AAEBEC',
+    boldBlack: '#0A0A0A',
+    darkGray: '#949494',
+    lightGray: '#E8E8E8',
+    darkRed: '#B3261E',
+    lightRed: '#EFD0D1',
+    lightInfo: '#d7eaf8',
+    darkInfo: '#004173',
+    lightWarning: '#FFF8C6',
+    darkWarning: '#FE9800',
+    lightSuccess: '#DAEEDF',
+    darkSuccess: '#328F45',
+    darkBlue: '#0F042D',
+    background: '#FAFAFC',
+    lightGrayBackground: '#E6E0E9',
+    cardDsc: '#1A1A1A',
+    lightPurpleBorder: '#EEE7FB',
+    lightPurpleShadow: '#E2D5FF',
+    transparent: 'transparent',
+    purple: '#947CE8',
+    boldBlue: '#160440',
+    deepGray: '#3A3A3A',
+    lightGrayText: '#585858',
+    disabledButtonBackground: '#E8E8E8',
+    disabledButtonBorder: '#949494',
+  },
+  dark: false,
+};

package/src/elements/alerts/Alert.tsx

@@ -0,0 +1,31 @@
+import { View, Image, Animated } from 'react-native';
+import { Portal, Text } from 'react-native-paper';
+import { useEffect } from 'react';
+import { styleAlerts } from '../../../assets/styles/elements/alert';
+import { icons } from '../../../assets/icons/_icons';
+interface IFAlertInfo {
+  title: string;
+  text: JSX.Element;
+  type: 'info' | 'warning' | 'error' | 'success';
+  onClose: () => void;
+}
+export const Alert = (props: IFAlertInfo) => {
+  const { text, title, type, onClose } = props;
+
+  useEffect(() => {
+    setTimeout(() => {
+      onClose();
+    }, 10000);
+  }, []);
+  return (
+    <Portal>
+      <Animated.View style={[styleAlerts['alert'], styleAlerts[`alert--${type}`]]}>
+        <View style={styleAlerts['alert-container-text']}>
+          <Image source={icons[type]} />
+          <Text style={styleAlerts['alert-container-title']}>{title}</Text>
+        </View>
+        <View style={styleAlerts['alert-body']}>{text}</View>
+      </Animated.View>
+    </Portal>
+  );
+};

package/src/elements/buttons/BtnContained.tsx

@@ -0,0 +1,50 @@
+import { Button } from 'react-native-paper';
+import { Image } from 'react-native';
+
+import { stylesButtonContained } from '../../../assets/styles/elements/buttons';
+
+interface IfBtnContained {
+  color?: 'primary' | 'secondary' | 'dark' | 'light' | 'lightPrimary';
+  text?: string;
+  size?: 'sm' | 'md' | 'xl';
+  labelStyle?: any;
+  contentStyle?: any;
+  style?: any;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  onPress: () => void;
+  icon?: any;
+}
+
+export const BtnContained = (props: IfBtnContained) => {
+  const { color, text, size, contentStyle, labelStyle, style, isDisabled, isLoading, onPress, icon } = props;
+
+  return (
+    <>
+      <Button
+        disabled={isDisabled}
+        loading={isLoading}
+        labelStyle={[
+          stylesButtonContained['btn-contained-text'],
+          stylesButtonContained[`btn-contained--${size ?? 'md'}`],
+          stylesButtonContained[`btn-contained--${color ?? 'primary'}`],
+          isDisabled && stylesButtonContained[`btn-contained--disabled`],
+          labelStyle ?? '',
+        ]}
+        contentStyle={[
+          stylesButtonContained['btn-contained'],
+          stylesButtonContained[`btn-contained--${color ?? 'primary'}`],
+          stylesButtonContained[`btn-contained--${size ?? 'md'}`],
+          isDisabled && stylesButtonContained[`btn-contained--disabled`],
+          contentStyle ?? '',
+        ]}
+        style={[stylesButtonContained['btn-contained'], style ?? '']}
+        mode="contained"
+        onPress={onPress}
+      >
+        {icon && <Image source={icon} />}
+        {text}
+      </Button>
+    </>
+  );
+};

package/src/elements/buttons/BtnIcon.tsx

@@ -0,0 +1,49 @@
+import { Button } from 'react-native-paper';
+import { StyleSheet } from 'react-native';
+import { theme } from '../../config/paper.config';
+interface IFBtnIcon {
+  icon?: any;
+  text?: string;
+  contentStyle?: any;
+  labelStyle?: any;
+  style?: any;
+  direction?: 'left' | 'right';
+  isDisabled?: boolean;
+  onPress: () => void;
+}
+export const BtnIcon = (props: IFBtnIcon) => {
+  const { icon, text, onPress, isDisabled, direction, contentStyle, labelStyle, style } = props;
+  return (
+    <Button
+      disabled={isDisabled}
+      contentStyle={[stylesBtnIcon[`btn-icon--${direction ?? 'right'}`], contentStyle ?? '']}
+      labelStyle={[
+        stylesBtnIcon['btn-label'],
+        isDisabled && stylesBtnIcon['btn-label--disabled'],
+        labelStyle ?? '',
+      ]}
+      style={style}
+      icon={icon}
+      mode="text"
+      onPress={onPress}
+    >
+      {text}
+    </Button>
+  );
+};
+const stylesBtnIcon = StyleSheet.create({
+  'btn-icon--right': {
+    flexDirection: 'row-reverse',
+  },
+  'btn-icon--left': {
+    flexDirection: 'row',
+  },
+  'btn-label': {
+    color: theme.colors.primary,
+    fontFamily: 'MontserratBold',
+    fontSize: 12,
+  },
+  'btn-label--disabled': {
+    color: theme.colors.disabled,
+  },
+});

package/src/elements/buttons/BtnLightSmall.tsx

@@ -0,0 +1,31 @@
+import { Button, Text } from 'react-native-paper';
+import { stylesBtnLightSmall } from '../../../assets/styles/elements/buttons';
+
+interface IfBtnLightSmall {
+  onPress: () => void;
+  icon: any;
+  disabled?: boolean;
+}
+export const BtnLightSmall = (props: IfBtnLightSmall) => {
+  const { onPress, icon, disabled = false } = props;
+  const anything = '';
+
+  return (
+    <Button
+      style={[
+        stylesBtnLightSmall['btn-light-small'],
+        disabled && stylesBtnLightSmall['btn-light-small--disabled'],
+      ]}
+      contentStyle={stylesBtnLightSmall['btn-light-small-content']}
+      labelStyle={[
+        (stylesBtnLightSmall['btn-light-small-label'],
+        disabled && stylesBtnLightSmall['btn-light-small-label--disabled']),
+      ]}
+      onPress={onPress}
+      icon={icon}
+      disabled={disabled}
+    >
+      <Text>{anything}</Text>
+    </Button>
+  );
+};

package/src/elements/buttons/BtnOutlined.tsx

@@ -0,0 +1,43 @@
+import { Button } from 'react-native-paper';
+
+import { stylesButtonOutlined } from '../../../assets/styles/elements/buttons';
+
+interface IfBtnOutlined {
+  color?: 'primary' | 'secondary' | 'dark' | 'light';
+  text?: string;
+  size?: 'sm' | 'md' | 'xl';
+  customStyles?: object;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  onPress: () => void;
+}
+
+export const BtnOutlined = (props: IfBtnOutlined) => {
+  const { color, text, size, customStyles, isDisabled, isLoading, onPress } = props;
+
+  return (
+    <>
+      <Button
+        disabled={isDisabled}
+        loading={isLoading}
+        labelStyle={[
+          stylesButtonOutlined['btn-outlined-text'],
+          stylesButtonOutlined[`btn-outlined--${color ?? 'primary'}`],
+          stylesButtonOutlined[`btn-outlined--${size ?? 'md'}`],
+          isDisabled && stylesButtonOutlined[`btn-outlined--disabled`],
+        ]}
+        style={[
+          stylesButtonOutlined['btn-outlined'],
+          stylesButtonOutlined[`btn-outlined--${color ?? 'primary'}`],
+          stylesButtonOutlined[`btn-outlined--${size ?? 'md'}`],
+          isDisabled && stylesButtonOutlined[`btn-outlined--disabled`],
+          customStyles,
+        ]}
+        mode="outlined"
+        onPress={onPress}
+      >
+        {text}
+      </Button>
+    </>
+  );
+};

package/src/elements/buttons/BtnText.tsx

@@ -0,0 +1,34 @@
+import { Button } from 'react-native-paper';
+import { stylesButtonText } from '../../../assets/styles/elements/buttons';
+interface IFBtnText {
+  color: 'primary' | 'secondary' | 'dark' | 'light' | 'generic';
+  text: string;
+  style?: any;
+  contentStyle?: any;
+  labelStyle?: any;
+  isDisabled?: boolean;
+  isLoading?: boolean;
+  onPress: () => void;
+}
+
+export const BtnText = (props: IFBtnText) => {
+  const { color, text, style, contentStyle, labelStyle, isDisabled, isLoading, onPress } = props;
+  return (
+    <Button
+      disabled={isDisabled}
+      loading={isLoading}
+      labelStyle={[
+        stylesButtonText['btn-text'],
+        stylesButtonText[`btn-text--${color}`],
+        isDisabled && stylesButtonText[`btn-text--disabled`],
+        labelStyle ?? '',
+      ]}
+      contentStyle={[stylesButtonText['btn-text'], contentStyle ?? '']}
+      style={[stylesButtonText['btn-text'], style ?? '']}
+      mode="text"
+      onPress={onPress}
+    >
+      {text}
+    </Button>
+  );
+};

package/src/elements/cards/CardComponent.tsx

@@ -0,0 +1,62 @@
+import { Card } from 'react-native-paper';
+import { GestureResponderEvent } from 'react-native';
+import { stylesCards } from '../../../assets/styles/elements/cards';
+import { Text } from 'react-native-paper';
+
+interface IfCardComponent {
+  mode?: 'elevated' | 'outlined' | 'contained';
+  children: React.ReactNode;
+  onLongPress?: () => void;
+  onPress?: (e: GestureResponderEvent) => void;
+  onPressIn?: (e: GestureResponderEvent) => void;
+  onPressOut?: (e: GestureResponderEvent) => void;
+  delayLongPress?: number;
+  disabled?: boolean;
+  elevation?: number;
+  contentStyle?: object;
+  style?: object;
+  theme?: any;
+  testID?: string;
+  accessible?: boolean;
+  title?: string;
+  titleStyle?: object;
+}
+
+export const CardComponent = (props: IfCardComponent) => {
+  const {
+    mode = 'elevated',
+    children,
+    onLongPress,
+    onPress,
+    onPressIn,
+    onPressOut,
+    delayLongPress,
+    disabled,
+    contentStyle,
+    style,
+    theme,
+    accessible,
+    title,
+    titleStyle,
+  } = props;
+
+  return (
+    <Card
+      mode={mode}
+      onLongPress={onLongPress}
+      onPress={onPress}
+      onPressIn={onPressIn}
+      onPressOut={onPressOut}
+      delayLongPress={delayLongPress}
+      disabled={disabled}
+      contentStyle={contentStyle}
+      style={[stylesCards['card'], style]}
+      theme={theme}
+      accessible={accessible}
+    >
+      {title && <Text style={titleStyle}>{title}</Text>}
+
+      {children}
+    </Card>
+  );
+};

package/src/elements/cards/CardInteractive.tsx

@@ -0,0 +1,34 @@
+import { View, Image, Touchable, TouchableHighlight } from 'react-native';
+import { Card, Text, TouchableRipple } from 'react-native-paper';
+import { stylesCards } from '../../../assets/styles/elements/cards';
+import { icons } from '../../../assets/icons/_icons';
+
+interface IFCardInteractive {
+  iconSource?: any;
+  title: string;
+  description?: string;
+  onPress: () => void;
+ 
+}
+
+export const CardInteractive = (props: IFCardInteractive) => {
+  const { iconSource, title, description, 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']} />}
+            <View>
+              <Text style={stylesCards['card-interactive-text']}>{title}</Text>
+              <View style={stylesCards['card-interactive-description']}>
+                {description && <Text style={stylesCards['card-interactive-subtext']}>{description}</Text>}
+              </View>
+            </View>
+          </View>
+          <Image source={icons.arrowRight} style={stylesCards['card-interactive-arrow']} />
+        </View>
+      </Card>
+    </TouchableRipple>
+  );
+};

package/src/elements/cards/CardList.tsx

@@ -0,0 +1,39 @@
+import { Card } from 'react-native-paper';
+import { stylesCards } from '../../../assets/styles/elements/cards';
+import { View, Text, TouchableHighlight } from 'react-native';
+import { useState } from 'react';
+
+interface IfCardList {
+  options: { value: string }[];
+  children?: React.ReactNode;
+  onSelectOption: (value: string) => void;
+}
+
+export const CardList = (props: IfCardList) => {
+  const { options, onSelectOption } = props;
+  const [selectedOption, setSelectOption] = useState(0);
+
+  return (
+    <View>
+      {options.map((option, index) => (
+        <TouchableHighlight
+          key={index}
+          onPress={() => {
+            setSelectOption(index);
+            onSelectOption(option.value);
+          }}
+          style={stylesCards['card-list-item']}
+        >
+          <Card
+            style={[
+              stylesCards['card-list'],
+              selectedOption === index ? stylesCards['card-list-selected'] : null,
+            ]}
+          >
+            <Text style={stylesCards['card-list-txt']}>{option.value}</Text>
+          </Card>
+        </TouchableHighlight>
+      ))}
+    </View>
+  );
+};

package/src/elements/checkbox/CheckboxComponent.tsx

@@ -0,0 +1,14 @@
+import { TouchableWithoutFeedback, View, Image } from 'react-native';
+import { icons } from '../../../assets/icons/_icons';
+interface IFCheckboxComponent {
+  checked: boolean;
+  onChange: (value: boolean) => void;
+}
+export const CheckboxComponent = (props: IFCheckboxComponent) => {
+  const { checked, onChange } = props;
+  return (
+    <TouchableWithoutFeedback onPress={() => onChange(!checked)}>
+      <Image source={checked ? icons.checkbox : icons.checkboxOutline} />
+    </TouchableWithoutFeedback>
+  );
+};

package/src/elements/dialogs/DialogDown.tsx

@@ -0,0 +1,36 @@
+import { Button, Dialog, Icon, Portal } from 'react-native-paper';
+import { stylesDialog } from '../../../assets/styles/elements/dialog';
+import { ViewStyle, Image, ImageSourcePropType, View } from 'react-native';
+
+interface IFDialogDown {
+  isVisible: boolean;
+  title: string;
+  children: any;
+  onDismiss: () => void;
+  style?: ViewStyle;
+  image?: ImageSourcePropType;
+}
+
+export const DialogDown = (props: IFDialogDown) => {
+  const { isVisible, title, children, onDismiss, style, image } = props;
+  return (
+    <Portal>
+      <Dialog style={[stylesDialog['dialog-down'], style]} visible={isVisible} onDismiss={onDismiss}>
+        <View style={stylesDialog['dialog-img']}>{image && <Image source={image} />}</View>
+
+        <View>
+          <Dialog.Title style={[stylesDialog['dialog-title']]}>{title}</Dialog.Title>
+          <Button onPress={onDismiss} style={stylesDialog['dialog-down-close']}>
+            <Icon
+              source="close"
+              color={stylesDialog['dialog-down-close-icon'].color}
+              size={stylesDialog['dialog-down-close-icon'].width}
+            />
+          </Button>
+        </View>
+
+        <Dialog.Content>{children}</Dialog.Content>
+      </Dialog>
+    </Portal>
+  );
+};

package/src/elements/dialogs/DialogGeneral.tsx

@@ -0,0 +1,47 @@
+import { Dialog, Portal, Text } 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';
+
+interface IFDialogIcon {
+  isVisible: boolean;
+  icon: 'error' | 'warning' | 'info' | 'success';
+  title: string;
+  text: JSX.Element | string;
+  textOk?: string;
+  textCancel?: string;
+  onDismiss: () => void;
+  onConfirm: () => void;
+}
+
+export const DialogGeneral = (props: IFDialogIcon) => {
+  const { isVisible, title, text, textCancel, textOk, icon, onDismiss, onConfirm } = props;
+
+  return (
+    <Portal>
+      <Dialog style={stylesDialog['dialog']} visible={isVisible} onDismiss={onDismiss}>
+        <View style={stylesDialog['dialog-container-icon']}>
+          <Image style={stylesDialog['dialog-icon']} source={icons[icon]} />
+        </View>
+        <Dialog.Title style={stylesDialog['dialog-title']}>{title}</Dialog.Title>
+        <Dialog.Content>
+          <Text style={stylesDialog['dialog-text']}>{text}</Text>
+        </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}
+            />
+          )}
+        </Dialog.Actions>
+      </Dialog>
+    </Portal>
+  );
+};

package/src/elements/dropdown/Dropdown.tsx

@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { 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';
+interface IFDropdown {
+  items: IFMenuItem[];
+  icon?: string;
+  label: string;
+  title?: string;
+  onPress: (value: string) => void;
+}
+interface IFMenuItem {
+  title: string;
+  icon?: string;
+  value: string;
+  divider?: boolean;
+}
+export const Dropdown = (props: IFDropdown) => {
+  const { items, icon, label, title, 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 }}
+        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>
+        }
+      >
+        {title && (
+          <>
+            <Menu.Item titleStyle={styleDropdown['dropdown-menu-item']} title={title} />
+            <Divider
+              style={{
+                borderBottomColor: theme.colors.lightPrimary,
+                borderBottomWidth: 1,
+              }}
+            />
+          </>
+        )}
+        {items.map((item, index) => {
+          return (
+            <View key={index}>
+              <Menu.Item
+                titleStyle={styleDropdown['dropdown-menu-item']}
+                leadingIcon={item.icon}
+                onPress={() => {
+                  closeMenu();
+                  onPress(item.value);
+                }}
+                title={item.title}
+              />
+              {item.divider && <Divider />}
+            </View>
+          );
+        })}
+      </Menu>
+      <Portal>{visible && <View style={styleDropdown['dropdown-overlay']} />}</Portal>
+    </View>
+  );
+};

package/src/elements/headers/HeaderPage.tsx

@@ -0,0 +1,33 @@
+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;
+}
+export const HeaderPage = (props: IFHeaderPage) => {
+  const { navigateTo, title, onPress } = props;
+  const navigation = useNavigation();
+  const navigateToScreen = () => {
+    onPress && onPress();
+    navigateTo === 'Back' ? navigation.goBack() : navigation.navigate(navigateTo as never);
+  };
+  return (
+    <View style={stylesHeader['header']}>
+      <TouchableOpacity onPress={navigateToScreen} style={stylesHeader['header-back']}>
+        <Image source={icons.arrowBack} style={stylesHeader['header-back-icon']} />
+      </TouchableOpacity>
+
+      <Text variant="bodyMedium" style={stylesHeader['header-title']}>
+        {title}
+      </Text>
+
+      <Image source={images.logoSmallBlack} style={stylesHeader['header-logo']} />
+    </View>
+  );
+};