@rn-components-dropdown/dropdown 1.0.0

package/src/components/svgButton/SvgButtonStyle.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { LIGHT_COLORS } from '../../style';
+
+export const useSvgButtonStyle = () => {
+  const { ...colors } = LIGHT_COLORS;
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      favIcon: {
+        width: 50,
+        right: 25,
+        height: 50,
+        bottom: 25,
+        borderRadius: 6,
+        position: 'absolute',
+        alignItems: 'center',
+        justifyContent: 'center',
+        backgroundColor: colors.green,
+      },
+    });
+  }, [colors]);
+
+  return {
+    styles,
+    colors,
+  };
+};

package/src/components/text/AppText.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Text, TextProps } from 'react-native';
+import { useAppTextStyle } from './AppTextStyle';
+import { ThemeColors } from '../../interface/colors.interface';
+
+interface props extends TextProps {
+  size?: number;
+  fontFamily?: any;
+  required?: boolean;
+  color?: keyof ThemeColors;
+  type?: 'error' | 'normal';
+}
+
+const AppText = ({
+  size,
+  style,
+  color,
+  children,
+  type = 'normal',
+  fontFamily = 'regular',
+  required,
+  ...props
+}: props) => {
+  const family = fontFamily;
+  const styles = useAppTextStyle({
+    style: {
+      fontFamily: family,
+    },
+    size,
+    color,
+    type,
+  });
+  return (
+    <Text allowFontScaling={false} style={[styles.container, style]} {...props}>
+      {children}
+      {required && <Text style={styles.require}>*</Text>}
+    </Text>
+  );
+};
+
+export default AppText;

package/src/components/text/AppTextStyle.ts

@@ -0,0 +1,40 @@
+import { useMemo } from 'react';
+import { LIGHT_COLORS } from '../../style';
+import { StyleSheet, TextStyle } from 'react-native';
+import { ThemeColors } from '../../interface/colors.interface';
+
+interface props {
+  size?: number;
+  style?: TextStyle;
+  color?: keyof ThemeColors;
+  type?: 'error' | 'normal';
+}
+
+export const useAppTextStyle = ({
+  size,
+  style,
+  color,
+  type = 'normal',
+}: props) => {
+  const { ...colors } = LIGHT_COLORS;
+
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        fontSize: size || 14,
+        color:
+          type === 'error'
+            ? colors.error
+            : color
+            ? colors[color]
+            : colors.primary,
+        ...style,
+      },
+      require: {
+        color: colors.error,
+      },
+    });
+  }, [size, colors, style, type, color]);
+
+  return styles;
+};

package/src/components/textInput/AppTextInput.tsx

@@ -0,0 +1,148 @@
+import {
+  View,
+  TextInput,
+  StyleProp,
+  TextStyle,
+  ViewStyle,
+  TextInputProps,
+} from 'react-native';
+import AppText from '../text/AppText';
+import SvgButton from '../svgButton/SvgButton';
+import React, { useCallback, useState } from 'react';
+import { useAppTextInputStyle } from './AppTextInputStyle';
+
+export interface AppTextProps extends TextInputProps {
+  label?: string;
+  inputRef?: any;
+  required?: boolean;
+  icon?: React.JSX.Element;
+  error?: string | undefined;
+  leftIcon?: React.JSX.Element;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+  labelStyle?: StyleProp<TextStyle>;
+  leftIconStyle?: StyleProp<ViewStyle>;
+  rightIconStyle?: StyleProp<ViewStyle>;
+  onIconPress?: () => Promise<void> | undefined | void;
+  type?: 'password' | 'number' | 'email' | 'phone' | 'text';
+  autoCapitalize?: 'characters' | 'words' | 'sentences' | 'none';
+}
+
+const AppTextInput = ({
+  icon,
+  type,
+  error,
+  label,
+  style,
+  value,
+  onBlur,
+  onFocus,
+  required,
+  leftIcon,
+  inputRef,
+  textStyle,
+  onPressIn,
+  labelStyle,
+  placeholder,
+  onIconPress,
+  autoCorrect,
+  onChangeText,
+  leftIconStyle,
+  rightIconStyle,
+  textContentType,
+  placeholderTextColor,
+  ...rest
+}: AppTextProps) => {
+  const { styles, colors } = useAppTextInputStyle({
+    type,
+    leftIcon,
+    editable: rest?.editable,
+  });
+  const [secureTextEntry, setSecureTextEntry] = useState<boolean>(
+    type === 'password',
+  );
+
+  const handlePasswordIcon = () => {
+    setSecureTextEntry(prev => !prev);
+  };
+
+  const getKeyboardType = () => {
+    switch (type) {
+      case 'email':
+        return 'email-address';
+      case 'number':
+        return 'numeric';
+      case 'phone':
+        return 'phone-pad';
+      default:
+        return 'default';
+    }
+  };
+
+  const renderIcon = useCallback(
+    (
+      rightIcon?: React.JSX.Element,
+      onPress?: () => void,
+    ) => (
+      <SvgButton
+        icon={rightIcon}
+        onPress={onPress}
+        style={[styles.rightIcon, rightIconStyle]}
+      />
+    ),
+    [styles, rightIconStyle],
+  );
+
+  return (
+    <>
+      {label ? (
+        <AppText style={[styles.label, labelStyle]}>
+          {label}
+          {required ? (
+            <AppText style={[styles.label, styles.required]}>*</AppText>
+          ) : null}
+        </AppText>
+      ) : null}
+      <View style={styles.margin}>
+        <View
+          style={[styles.container, style, error ? styles.errorWrapper : {}]}
+        >
+          {leftIcon ? (
+            <SvgButton
+              icon={leftIcon}
+              style={[styles.leftIcon, leftIconStyle]}
+            />
+          ) : null}
+          <TextInput
+            value={value}
+            ref={inputRef}
+            onBlur={onBlur}
+            onPressIn={onPressIn}
+            allowFontScaling={false}
+            placeholder={placeholder}
+            autoCorrect={autoCorrect}
+            onChangeText={onChangeText}
+            keyboardType={getKeyboardType()}
+            textContentType={textContentType}
+            secureTextEntry={secureTextEntry}
+            style={[styles.textInputStyles, textStyle]}
+            placeholderTextColor={placeholderTextColor || colors.gray}
+            onFocus={e => {
+              if (onFocus) {
+                onFocus(e);
+              }
+            }}
+            {...rest}
+          />
+          {type === 'password'
+            ? renderIcon(icon, handlePasswordIcon)
+            : null}
+          {icon && type !== 'password' ? renderIcon(icon, onIconPress) : null}
+        </View>
+        {error && <AppText style={styles.error}>{error}</AppText>}
+      </View>
+    </>
+  );
+};
+
+export default AppTextInput;

package/src/components/textInput/AppTextInputStyle.ts

@@ -0,0 +1,72 @@
+
+import { ReactNode, useMemo } from 'react';
+import { PressableStateCallbackType, StyleSheet } from 'react-native';
+import { DEFAULT_COLORS, LIGHT_COLORS, SHADOW, SPACING } from '../../style';
+
+interface props {
+  type?: any;
+  editable?: boolean;
+  leftIcon?: ReactNode | ((state: PressableStateCallbackType) => ReactNode);
+  rightIcon?: ReactNode | ((state: PressableStateCallbackType) => ReactNode);
+}
+
+export const useAppTextInputStyle = ({
+  type,
+  leftIcon,
+  editable = true,
+}: props) => {
+  const { ...colors } = LIGHT_COLORS;
+
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      container: {
+        width: '100%',
+        ...SHADOW.shadow1,
+        flexDirection: 'row',
+        alignItems: 'center',
+        opacity: !editable ? 0.5 : 1,
+        backgroundColor: DEFAULT_COLORS.white,
+      },
+      margin: {
+        marginBottom: SPACING.s10,
+      },
+      rightIcon: {
+        position: 'absolute',
+        right: SPACING.s20,
+      },
+      error: {
+        textAlign: 'left',
+        paddingTop: SPACING.s4,
+        alignSelf: 'flex-start',
+        color: colors.red,
+      },
+      label: {
+        color: colors.primary,
+        marginBottom: SPACING.s12,
+        alignSelf: 'flex-start',
+        marginTop: SPACING.s10,
+      },
+      required: {
+        color: colors.red,
+      },
+      errorWrapper: {
+        borderWidth: 0.8,
+        borderColor: colors.red,
+      },
+      textInputStyles: {
+        padding: 0,
+        height: 48,
+        width: '100%',
+        color: colors.primary,
+        paddingLeft: leftIcon ? SPACING.s45 : 16,
+        paddingRight: type === 'password' ? 50 : 16,
+      },
+      leftIcon: {
+        position: 'absolute',
+        left: SPACING.s14,
+      },
+    });
+  }, [editable, colors, leftIcon, type]);
+
+  return { styles, colors };
+};

package/src/controller/dropDownController/DropdownController.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { View } from 'react-native';
+import AppText from '../../components/text/AppText';
+import {
+  DropdownProps,
+  SelectionType,
+} from '../../components/dropdown/interface/DropdownInterface';
+import DropdownComponent from '../../components/dropdown/Dropdown';
+import { useDropdownControllerStyle } from './DropdownControllerStyle';
+import { Control, Controller, FieldValues, Path } from 'react-hook-form';
+
+type DropControllerProps<S, T extends SelectionType, U extends FieldValues> = {
+  control: Control<U>;
+  controller: Path<U>;
+  dropProps: DropdownProps<S, T>;
+};
+
+const AppDropdownController = <
+  S,
+  T extends SelectionType,
+  U extends FieldValues,
+>(
+  props: DropControllerProps<S, T, U>,
+) => {
+  const {
+    control,
+    controller,
+    dropProps: {
+      data,
+      label,
+      labelField,
+      valueField,
+      placeholder,
+      selectionType,
+      containerStyle,
+      ...rest
+    },
+  } = props;
+
+  const { styles } = useDropdownControllerStyle();
+
+  return (
+    <Controller
+      control={control}
+      name={controller}
+      render={({
+        fieldState: { error },
+        field: { onBlur, onChange, value },
+      }) => (
+        <View style={styles.mainContainer}>
+          <DropdownComponent
+            data={data}
+            value={value}
+            label={label}
+            onBlur={onBlur}
+            onChange={(selectValue: any, selectedItem: any) => {
+              if (selectionType === 'single') {
+                return onChange(selectValue);
+              }
+              return onChange(selectedItem);
+            }}
+            labelField={labelField}
+            valueField={valueField}
+            placeholder={placeholder}
+            selectionType={selectionType}
+            containerStyle={containerStyle}
+            labelTextStyle={styles.labelText}
+            itemTextStyle={styles.dropdownText}
+            placeholderStyle={styles.itemContainer}
+            selectedTextStyle={styles.selectionText}
+            style={[styles.dropdownContainer, error && styles.errorWrapper]}
+            {...rest}
+          />
+          {error && <AppText style={styles.error}>{error?.message}</AppText>}
+        </View>
+      )}
+    />
+  );
+};
+
+export default AppDropdownController;

package/src/controller/dropDownController/DropdownControllerStyle.ts

@@ -0,0 +1,47 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { LIGHT_COLORS, SPACING } from '../../style';
+
+export const useDropdownControllerStyle = () => {
+  const { ...colors } = LIGHT_COLORS;
+
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      mainContainer: {
+        width: '100%',
+        marginBottom: SPACING?.s4,
+      },
+      dropdownContainer: {
+        borderWidth: 1,
+        borderRadius: 6,
+        marginBottom: SPACING.s10,
+        borderColor: colors.border,
+        paddingHorizontal: SPACING.s10,
+      },
+      labelText: {
+        color: colors.gray,
+      },
+      errorWrapper: {
+        borderWidth: 0.8,
+        borderColor: colors.red,
+      },
+      dropdownText: {
+        fontSize: 14,
+        color: colors.gray,
+      },
+      itemContainer: {
+        fontSize: 14,
+        color: colors.gray,
+      },
+      selectionText: {
+        fontSize: 14,
+        color: colors.gray,
+      },
+      error: {
+        color: colors.red,
+      },
+    });
+  }, [colors]);
+
+  return { styles, colors };
+};

package/src/controller/textInputController/AppTextInputController.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import AppTextInput, {
+  AppTextProps,
+} from '../../components/textInput/AppTextInput';
+import { useInputController } from './InputControllerStyle';
+import { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { Controller, Control, FieldValues, Path } from 'react-hook-form';
+
+interface Props<T extends FieldValues> extends AppTextProps {
+  textStyle?: TextStyle;
+  controllerName: Path<T>;
+  containerStyle?: ViewStyle;
+  control: Control<T> | undefined;
+  labelStyle?: StyleProp<TextStyle>;
+}
+
+const AppTextControlInput = <T extends FieldValues>({
+  control,
+  textStyle,
+  labelStyle,
+  controllerName,
+  containerStyle,
+  ...rest
+}: Props<T>) => {
+  const { styles } = useInputController();
+
+  return (
+    <Controller
+      control={control}
+      name={controllerName}
+      render={({
+        fieldState: { error },
+        field: { onChange, value, onBlur },
+      }) => (
+        <AppTextInput
+          value={value}
+          onBlur={onBlur}
+          error={error?.message}
+          onChangeText={onChange}
+          textStyle={[styles.inputText, textStyle]}
+          labelStyle={[styles.labelText, labelStyle]}
+          style={[styles.inputControlContainer, containerStyle]}
+          {...rest}
+        />
+      )}
+    />
+  );
+};
+
+export default AppTextControlInput;

package/src/controller/textInputController/InputControllerStyle.ts

@@ -0,0 +1,28 @@
+import { useMemo } from 'react';
+import { StyleSheet } from 'react-native';
+import { LIGHT_COLORS, SPACING } from '../../style';
+
+export const useInputController = () => {
+  const { ...colors } = LIGHT_COLORS;
+
+  const styles = useMemo(() => {
+    return StyleSheet.create({
+      labelText: {
+        color: colors.gray,
+      },
+      inputControlContainer: {
+        height: 48,
+        borderWidth: 1,
+        borderRadius: 6,
+        alignItems: 'center',
+        marginVertical: SPACING.s2,
+        borderColor: colors.border,
+      },
+      inputText: {
+        color: colors.black,
+      },
+    });
+  }, [colors]);
+
+  return { styles, colors };
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export { default as AppText } from './components/text/AppText';
+export { default as Dropdown } from './components/dropdown/Dropdown';
+export { default as TextInput } from './components/textInput/AppTextInput';
+export { default as DropdownController }from './controller/dropDownController/DropdownController';
+export { default as TextInputController } from './controller/textInputController/AppTextInputController';

package/src/interface/colors.interface.ts

@@ -0,0 +1,22 @@
+export type ThemeColors = {
+  red: string;
+  blue: string;
+  gray: string;
+  white: string;
+  error: string;
+  black: string;
+  green: string;
+  border: string;
+  primary: string;
+  lightGray: string;
+  grayishBlue: string;
+};
+
+export type Theme = {
+  mode: string;
+  colors: ThemeColors;
+};
+
+export interface ThemeInterface {
+  [index: string]: Theme;
+}

package/src/style/colors.ts

@@ -0,0 +1,46 @@
+import { ThemeInterface } from "../interface/colors.interface";
+
+export const LIGHT_COLORS = {
+  blue: '#0000ff',
+  gray: '#5c5b5b',
+  error: '#dc3545',
+  green: '#2EB85C',
+  white: '#FFFFFF',
+  black: '#000000',
+  primary: '#3683BC',
+  lightGray: '#e0e0e0',
+  grayishBlue: '#C5C6C7',
+  red: 'rgba(205, 46, 49, 1)',
+  border: 'rgba(224, 224, 224, 1)',
+};
+
+export const DARK_COLORS = {
+  blue: '#0000ff',
+  gray: '#5c5b5b',
+  error: '#dc3545',
+  green: '#2EB85C',
+  white: '#FFFFFF',
+  black: '#000000',
+  primary: '#3683BC',
+  lightGray: '#e0e0e0',
+  grayishBlue: '#C5C6C7',
+  red: 'rgba(205, 46, 49, 1)',
+  border: 'rgba(224, 224, 224, 1)',
+};
+
+export const THEMES: ThemeInterface = {
+  light: {
+    mode: 'light',
+    colors: LIGHT_COLORS,
+  },
+  dark: {
+    mode: 'dark',
+    colors: DARK_COLORS,
+  },
+};
+
+export const DEFAULT_COLORS = {
+  blue: '#3683BC',
+  white: '#FFFFFF',
+  blackOpacity: 'rgba(0, 0, 0, 0.5)',
+};

package/src/style/index.ts

@@ -0,0 +1,14 @@
+export * from './colors';
+export * from './spacing';
+export * from './shadow';
+import { Dimensions, Platform } from 'react-native';
+
+export const addAlphaToHex = (color: string, opacity: number) => {
+  const _opacity = Math.round(Math.min(Math.max(opacity || 1, 0), 1) * 255);
+  return color + _opacity.toString(16).toUpperCase();
+};
+
+export const SCREEN_WIDTH = Dimensions.get('window').width;
+export const SCREEN_HEIGHT = Dimensions.get('window').height;
+export const MIN_DEVICE_WIDTH = Platform.OS === 'ios' ? 390 : 360;
+