oneticket-sdk-vi 1.0.0

package/src/components/common/Cards/TypeCard.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { View, StyleSheet, Pressable, Image } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import { ms, mvs } from 'react-native-size-matters';
+import { CustomText } from '../Text/CustomText';
+import ChevronRightIcon from '../../../assets/icons/ChevronRightIcon';
+
+interface TypeCardProps {
+    style?: any;
+    imageSource: any;
+    title: string;
+    description?: string;
+    showArrow?: boolean;
+    onPress: () => void;
+}
+
+const TypeCard: React.FC<TypeCardProps> = ({
+    style,
+    imageSource,
+    title,
+    description,
+    showArrow = true,
+    onPress
+}) => {
+    const { theme } = useTheme();
+
+    return (
+        <Pressable
+            onPress={onPress}
+            style={({ pressed }) => [
+                styles.container,
+                {
+                    backgroundColor: theme.colors.primaryBackdrop,
+                    borderColor: pressed ? theme.colors.primary[500] : theme.colors.borderLight,
+                    shadowColor: theme.colors.shadow,
+                },
+                style
+            ]}
+        >
+            <View style={styles.content}>
+                <Image
+                    source={imageSource}
+                    style={styles.image}
+                    resizeMode="contain"
+                />
+
+                <View style={styles.textContainer}>
+                    <CustomText variant="labelLarge" style={styles.title}>
+                        {title}
+                    </CustomText>
+                    {description && (
+                        <CustomText variant="body2" style={{ color: theme.colors.textTertiary }}>
+                            {description}
+                        </CustomText>
+                    )}
+                </View>
+
+                {showArrow && (
+                    <ChevronRightIcon size={ms(20)} color={theme.colors.textTertiary} />
+                )}
+            </View>
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: ms(8),
+        borderWidth: 1,
+        padding: ms(16),
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 4,
+        elevation: 2,
+    },
+    content: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    image: {
+        width: ms(40),
+        height: ms(40),
+        marginRight: ms(12),
+    },
+    textContainer: {
+        flex: 1,
+    },
+    title: {
+        fontWeight: '600',
+        marginBottom: mvs(4),
+    },
+});
+
+export default React.memo(TypeCard);

package/src/components/common/Checkbox/Checkbox.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { TouchableOpacity, View, ViewStyle } from 'react-native';
+import { useTheme } from '../../../theme/ThemeProvider';
+import TickIcon from '../../../assets/icons/TickIcon';
+
+interface CheckboxProps {
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    color?: string;
+    size?: number;
+    style?: ViewStyle;
+    disabled?: boolean;
+}
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+    value,
+    onValueChange,
+    color,
+    size = 20,
+    style,
+    disabled = false,
+}) => {
+    const { theme } = useTheme();
+    const checkboxColor = color || theme.colors.primary[500];
+
+    return (
+        <TouchableOpacity
+            onPress={() => !disabled && onValueChange(!value)}
+            activeOpacity={0.7}
+            style={style}
+            disabled={disabled}
+        >
+            <View style={{
+                width: size,
+                height: size,
+                borderRadius: 4,
+                borderWidth: 1,
+                borderColor: value ? checkboxColor : disabled ? theme.colors.disabled : theme.colors.textTertiary,
+                backgroundColor: value ? checkboxColor : disabled ? theme.colors.gray[200] : 'transparent',
+                alignItems: 'center',
+                justifyContent: 'center',
+                opacity: disabled ? 0.6 : 1,
+            }}>
+                {value && (
+                    <TickIcon size={size - 8} color={theme.colors.white} />
+                )}
+            </View>
+        </TouchableOpacity>
+    );
+};

package/src/components/common/CustomInput/CustomInput.tsx

@@ -0,0 +1,523 @@
+import React, { useState, useEffect, useRef } from "react";
+import {
+  View,
+  StyleSheet,
+  TextInput,
+  Switch,
+  TouchableOpacity,
+  TouchableWithoutFeedback,
+  Animated,
+  Text,
+  Pressable,
+  ScrollView,
+  FlatList,
+  Modal
+} from "react-native";
+import { ms, mvs } from "react-native-size-matters";
+import { CustomText } from "../Text/CustomText";
+import { useTheme } from "../../../theme/ThemeProvider";
+import { Checkbox } from "../Checkbox/Checkbox";
+import { Button } from "../Button/Button";
+import ChevronDownIcon from "../../../assets/icons/ChevronDownIcon";
+import TickIcon from "../../../assets/icons/TickIcon";
+
+interface CustomInputProps {
+  type?:
+  | "password"
+  | "number"
+  | "text"
+  | "textarea"
+  | "radio"
+  | "switch"
+  | "select"
+  | "date";
+  // | "phone";
+  label?: string;
+  placeholder?: string;
+  required?: boolean;
+  error?: string;
+  maxDate?: Date;
+  minDate?: Date;
+  name: string;
+  onChange?: (value: any) => void;
+  value?: any;
+  options?: any[];
+  disabled?: boolean;
+  showError?: boolean;
+  maxLength?: number;
+  size?: "sm" | "md" | "lg";
+  floatingLabel?: boolean;
+  isReadOnly?: boolean;
+}
+
+const CustomInput: React.FC<CustomInputProps> = ({
+  type,
+  label,
+  placeholder,
+  error,
+  name,
+  value,
+  onChange,
+  required,
+  options,
+  disabled,
+  showError,
+  maxDate,
+  minDate,
+  maxLength,
+  size = "md",
+  isReadOnly,
+  floatingLabel = true,
+}) => {
+  const { theme } = useTheme();
+  const [phoneValue, setPhoneValue] = useState(value || "");
+  const [formattedPhoneValue, setFormattedPhoneValue] = useState("");
+  const [showPassword, setShowPassword] = useState(false);
+  const [date, setDate] = useState<Date | undefined>(undefined);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isSelectOpen, setIsSelectOpen] = useState(false);
+  const [selectedOption, setSelectedOption] = useState<any>(null);
+
+  const inputRef = useRef<TextInput>(null);
+  const animatedLabel = useRef(new Animated.Value(value ? 1 : 0)).current;
+
+  useEffect(() => {
+    Animated.timing(animatedLabel, {
+      toValue: isFocused || value ? 1 : 0,
+      duration: 200,
+      useNativeDriver: false,
+    }).start();
+  }, [isFocused, value]);
+
+  const labelStyle = {
+    position: "absolute" as const,
+    left: ms(14),
+    top: animatedLabel.interpolate({
+      inputRange: [0, 1],
+      outputRange: [mvs(13), mvs(-11)],
+    }),
+    backgroundColor: theme.colors.background,
+    zIndex: 1,
+    paddingLeft: ms(5),
+    paddingRight: ms(5),
+    fontSize: animatedLabel.interpolate({
+      inputRange: [0, 1],
+      outputRange: [ms(14), ms(14)],
+    }),
+    color: animatedLabel.interpolate({
+      inputRange: [0, 1],
+      outputRange: [theme.colors.textTertiary, theme.colors.text],
+    }),
+  };
+
+  const handleTogglePassword = () => {
+    setShowPassword(!showPassword);
+  };
+
+  const handleLabelPress = () => {
+    inputRef.current?.focus();
+  };
+
+  const handleSelectOption = (option: any) => {
+    setSelectedOption(option);
+    if (onChange) onChange(option.value);
+    setIsSelectOpen(false);
+  };
+
+  const getInputSize = () => {
+    switch (size) {
+      case "sm": return mvs(40);
+      case "lg": return mvs(50);
+      default: return mvs(48);
+    }
+  };
+
+  const renderInputComponent = () => {
+    switch (type) {
+      // case "phone":
+      //   return (
+      //     <PhoneInput
+      //       value={value}
+      //       defaultCode="IN"
+      //       layout="first"
+      //       textInputProps={{
+      //         maxLength: 10,
+      //         placeholderTextColor: theme.colors.textTertiary,
+      //         placeholder: floatingLabel ? undefined : placeholder
+      //       }}
+      //       disabled={disabled}
+      //       onChangeText={(text) => {
+      //         setPhoneValue(text);
+      //         if (onChange) onChange(text);
+      //       }}
+      //       containerStyle={[
+      //         styles.phoneContainer,
+      //         {
+      //           borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+      //           height: getInputSize()
+      //         }
+      //       ]}
+      //       textContainerStyle={[
+      //         styles.phoneInput,
+      //         { backgroundColor: theme.colors.surfaceVariant }
+      //       ]}
+      //       textInputStyle={[
+      //         styles.numberInput,
+      //         { color: theme.colors.text }
+      //       ]}
+      //       codeTextStyle={{
+      //         fontSize: ms(16),
+      //         fontWeight: '700',
+      //         color: theme.colors.text
+      //       }}
+      //     />
+      //   );
+      case "password":
+        return (
+          <View style={[
+            styles.inputGroup,
+            styles.focusedInput,
+            {
+              borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+              height: getInputSize()
+            }
+          ]}>
+            <TextInput
+              ref={inputRef}
+              secureTextEntry={!showPassword}
+              style={[
+                styles.input,
+                {
+                  color: theme.colors.text,
+                  flex: 1,
+                  height: '100%'
+                }
+              ]}
+              placeholder={floatingLabel ? undefined : placeholder}
+              placeholderTextColor={theme.colors.textTertiary}
+              value={value}
+              onChangeText={onChange}
+              onFocus={() => setIsFocused(true)}
+              onBlur={() => setIsFocused(false)}
+              editable={!disabled}
+              maxLength={maxLength}
+            />
+            <TouchableOpacity
+              onPress={handleTogglePassword}
+              style={styles.iconButton}
+            >
+              {/* Add your eye icon component here */}
+            </TouchableOpacity>
+          </View>
+        );
+      case "number":
+        return (
+          <TextInput
+            ref={inputRef}
+            style={[
+              styles.input,
+              styles.focusedInput,
+              {
+                borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                height: getInputSize(),
+                textAlign: 'center',
+                color: theme.colors.text
+              }
+            ]}
+            keyboardType="numeric"
+            placeholder={floatingLabel ? undefined : placeholder}
+            placeholderTextColor={theme.colors.textTertiary}
+            value={value}
+            onChangeText={onChange}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            editable={!disabled}
+            maxLength={maxLength}
+            autoComplete="cc-number"
+            autoCorrect={false}
+            autoCapitalize="none"
+          />
+        );
+      case "text":
+        return (
+          <TextInput
+            ref={inputRef}
+            style={[
+              styles.input,
+              styles.focusedInput,
+              {
+                borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                height: getInputSize(),
+                color: theme.colors.text
+              }
+            ]}
+            placeholder={floatingLabel ? undefined : placeholder}
+            placeholderTextColor={theme.colors.textTertiary}
+            value={value}
+            onChangeText={onChange}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            editable={!disabled && !isReadOnly}
+            maxLength={maxLength}
+            scrollEnabled={true}
+          />
+        );
+      case "textarea":
+        return (
+          <TextInput
+            ref={inputRef}
+            multiline
+            numberOfLines={4}
+            placeholder={floatingLabel ? undefined : placeholder}
+            placeholderTextColor={theme.colors.textTertiary}
+            value={value}
+            onChangeText={onChange}
+            style={[
+              styles.textarea,
+              {
+                borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                color: theme.colors.text
+              }
+            ]}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            maxLength={maxLength}
+            editable={!disabled}
+          />
+        );
+      case "radio":
+        return (
+          <View style={styles.radioGroup}>
+            {options?.map((opt) => (
+              <View key={`${name}-${opt.value}`} style={styles.radioOption}>
+                <Checkbox
+                  value={value === opt.value}
+                  onValueChange={() => !disabled && onChange && onChange(opt.value)}
+                  disabled={disabled}
+                  size={ms(18)}
+                />
+                <CustomText variant="body1" style={[
+                  styles.radioLabel,
+                  disabled && { borderColor: theme.colors.gray[200], backgroundColor: theme.colors.disabled }
+                ]}>
+                  {opt.label}
+                </CustomText>
+              </View>
+            ))}
+          </View>
+        );
+      case "switch":
+        return (
+          <Switch
+            value={value}
+            onValueChange={(val) => onChange && onChange(val)}
+            disabled={disabled}
+            trackColor={{
+              false: theme.colors.surfaceVariant,
+              true: theme.colors.primary[500]
+            }}
+            thumbColor={theme.colors.background}
+          />
+        );
+      case "select":
+        return (
+          <View>
+            <Pressable
+              onPress={() => !disabled && setIsSelectOpen(true)}
+              style={[
+                styles.selectInput,
+                {
+                  borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                  height: getInputSize()
+                }
+              ]}
+            >
+              <CustomText
+                variant="body1"
+                style={[
+                  styles.selectText,
+                  {
+                    color: selectedOption ? theme.colors.text : theme.colors.textTertiary
+                  }
+                ]}
+              >
+                {selectedOption?.label || placeholder}
+              </CustomText>
+              <ChevronDownIcon
+                size={ms(16)}
+                color={theme.colors.textTertiary}
+              />
+            </Pressable>
+
+            <Modal
+              visible={isSelectOpen}
+              transparent
+              animationType="fade"
+              onRequestClose={() => setIsSelectOpen(false)}
+            >
+              <View style={styles.modalOverlay}>
+                <View style={[
+                  styles.modalContent,
+                  { backgroundColor: theme.colors.background }
+                ]}>
+                  <FlatList
+                    data={options || []}
+                    keyExtractor={(item) => item.value}
+                    renderItem={({ item }) => (
+                      <Pressable
+                        style={styles.selectItem}
+                        onPress={() => handleSelectOption(item)}
+                      >
+                        <CustomText variant="body1">
+                          {item.label}
+                        </CustomText>
+                        {selectedOption?.value === item.value && (
+                          <TickIcon color={theme.colors.text} />
+                        )}
+                      </Pressable>
+                    )}
+                  />
+                </View>
+              </View>
+            </Modal>
+          </View>
+        );
+      default:
+        return (
+          <TextInput
+            ref={inputRef}
+            style={[
+              styles.input,
+              styles.focusedInput,
+              {
+                borderColor: isFocused ? theme.colors.primary[500] : theme.colors.borderDark,
+                height: getInputSize(),
+                color: theme.colors.text
+              }
+            ]}
+            placeholder={floatingLabel ? undefined : placeholder}
+            placeholderTextColor={theme.colors.textTertiary}
+            value={value}
+            onChangeText={onChange}
+            onFocus={() => setIsFocused(true)}
+            onBlur={() => setIsFocused(false)}
+            editable={!disabled}
+            maxLength={maxLength}
+          />
+        );
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      {floatingLabel && (
+        <TouchableWithoutFeedback onPress={handleLabelPress}>
+          <Animated.Text style={[labelStyle]}>
+            {label} {required && "*"}
+          </Animated.Text>
+        </TouchableWithoutFeedback>
+      )}
+      {renderInputComponent()}
+      {showError && error && (
+        <CustomText variant="caption" style={[styles.errorText, { color: theme.colors.error[500] }]}>
+          {error}
+        </CustomText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'relative',
+  },
+  inputGroup: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: ms(8),
+    paddingHorizontal: ms(14),
+  },
+  input: {
+    paddingHorizontal: ms(14),
+    fontSize: ms(14),
+    width: '100%',
+  },
+  phoneContainer: {
+    borderWidth: 1,
+    borderRadius: ms(8),
+    width: "100%",
+  },
+  phoneInput: {
+    borderRadius: ms(8),
+    padding: 0,
+  },
+  numberInput: {
+    padding: 0,
+    fontSize: ms(16),
+    fontWeight: '700',
+    marginLeft: ms(6),
+  },
+  textarea: {
+    paddingVertical: mvs(12),
+    paddingHorizontal: ms(14),
+    borderWidth: 1,
+    borderRadius: ms(8),
+    fontSize: ms(14),
+    height: mvs(100),
+    textAlignVertical: "top",
+    lineHeight: mvs(24),
+  },
+  radioGroup: {
+    gap: mvs(8),
+  },
+  radioOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: ms(8),
+  },
+  radioLabel: {
+    flex: 1,
+  },
+  focusedInput: {
+    borderWidth: 1,
+    borderRadius: ms(8),
+  },
+  errorText: {
+    marginTop: mvs(4),
+  },
+  iconButton: {
+    padding: ms(8),
+  },
+  selectInput: {
+    borderWidth: 1,
+    borderRadius: ms(8),
+    paddingHorizontal: ms(14),
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  selectText: {
+    flex: 1,
+  },
+  modalOverlay: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: 'rgba(0, 0, 0, 0.7)',
+  },
+  modalContent: {
+    width: '80%',
+    maxHeight: '60%',
+    borderRadius: ms(8),
+    padding: ms(16),
+  },
+  selectItem: {
+    paddingVertical: mvs(12),
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+});
+
+export default CustomInput;