inital commit

src/components/BasicButton/BasicButton.tsx

@@ -0,0 +1,43 @@
+import {FC} from "react";
+import {StyleSheet, TouchableOpacity, Text, View, StyleProp, ViewStyle, GestureResponderEvent} from "react-native";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import DText from "../DText/DText";
+
+type Props = {
+    label: string;
+    style?: StyleProp<ViewStyle>;
+    isUnset?: boolean;
+    onPress?: (event: GestureResponderEvent) => void
+};
+
+const BasicButton: FC<Props> = ({label, onPress, style, isUnset = false}) => {
+    return (
+        <TouchableOpacity onPress={onPress}>
+            <View style={[styles.container, style]}>
+                <DText style={styles.text}>{label}</DText>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        alignContent: "center",
+        backgroundColor: '#2478F8',
+        borderRadius: responsiveWidth(1),
+        padding: responsiveWidth(2),
+        flex: 1,
+
+    },
+    text: {
+        color: "white",
+        fontSize: RFPercentage(2),
+        textAlignVertical:"center",
+    }
+});
+
+export default BasicButton;

src/components/DText/DText.tsx

@@ -0,0 +1,19 @@
+import React, {FC, ReactElement} from "react";
+import {StyleProp, StyleSheet, Text, TextStyle, View, ViewStyle} from 'react-native';
+import {RFPercentage} from "react-native-responsive-fontsize";
+
+type Props = {
+    children: string;
+    style?: StyleProp<TextStyle>;
+}
+const DText: FC<Props> = ({children, style}) => {
+    return (
+        <Text style={[styles.text, style]}>{children}</Text>
+    )
+}
+const styles = StyleSheet.create({
+    text: {
+        fontFamily: 'SF Pro Text',
+    }
+})
+export default DText;

src/components/SearchBar/ScanModal.tsx

@@ -0,0 +1,60 @@
+import {FC, useEffect, useRef} from "react";
+import {GestureResponderEvent, StyleSheet, Text, TextInput, View} from "react-native";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import Modal from "react-native-modal";
+import BasicButton from "../BasicButton/BasicButton";
+import DText from "../DText/DText";
+
+type Props = {
+    visible: boolean
+    onCancelButtonPress?: (event: GestureResponderEvent) => void,
+    onChanged: (text: string) => void
+}
+const ScanModal: FC<Props> = ({visible, onCancelButtonPress, onChanged}) => {
+    const inputRef = useRef<TextInput | null>(null);
+    useEffect(() => {
+        if (visible) inputRef.current?.focus();
+    }, [visible]);
+    return (
+        <Modal isVisible={visible}>
+            <View style={styles.container}>
+                <DText style={styles.text}>Наведите сканер на штрихкод товара или заказа</DText>
+                <BasicButton onPress={onCancelButtonPress} style={styles.cancelButton} label={"Отмена"}/>
+                <TextInput onEndEditing={(e) => {
+                    onChanged(e.nativeEvent.text);
+                }} style={styles.pseudoInput} ref={inputRef}/>
+            </View>
+        </Modal>
+    )
+}
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: responsiveWidth(1),
+        backgroundColor: "white",
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: responsiveWidth(18),
+        paddingVertical: responsiveHeight(10),
+        gap: responsiveHeight(3)
+    },
+    text: {
+        color: "#2B2D3A",
+        fontSize: RFPercentage(3),
+        textAlign: "center"
+    },
+    cancelButton: {
+        flex: 0,
+        width: responsiveWidth(30)
+    },
+    pseudoInput: {
+        backgroundColor: "red",
+        opacity: 0,
+        position: "absolute",
+        zIndex: -1
+    }
+})
+export default ScanModal;

src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,84 @@
+import React, {FC, useRef, useState} from "react";
+import {Image, StyleSheet, TextInput, TouchableOpacity, View} from "react-native";
+import {responsiveHeight, responsiveWidth} from "react-native-responsive-dimensions";
+import {RFPercentage} from "react-native-responsive-fontsize";
+import BasicButton from "../BasicButton/BasicButton";
+import ScanModal from "./ScanModal";
+import telegramAuthButton from "../TelegramAuthButton/TelegramAuthButton";
+
+type Props = {
+    onSearch: (text: string) => void;
+}
+const SearchBar: FC<Props> = ({onSearch}) => {
+    const [isScanModalVisible, setIsScanModalVisible] = useState<boolean>(false);
+    const [searchInput, setSearchInput] = useState<string>("");
+    const textInputRef = useRef<TextInput>(null);
+    return (
+        <View style={styles.container}>
+            <ScanModal
+                onChanged={(text) => {
+                    setIsScanModalVisible(false);
+                    onSearch(text);
+                }}
+                onCancelButtonPress={() => setIsScanModalVisible(false)}
+                visible={isScanModalVisible}/>
+            <BasicButton onPress={() => {
+                onSearch(searchInput);
+                if (textInputRef.current) {
+                    textInputRef.current.clear();
+                }
+            }} style={styles.scanButton} label={"Поиск"}/>
+            <View style={styles.scanImageWrapper}>
+                <TouchableOpacity onPress={() => setIsScanModalVisible(true)}>
+                    <Image style={styles.scanImage} source={require('assets/icons/scan.png')}/>
+                </TouchableOpacity>
+            </View>
+            <TextInput ref={textInputRef} onChangeText={(text) => {
+                setSearchInput(text);
+            }} style={styles.textInput} placeholder={"Введите запрос"}/>
+        </View>
+    )
+}
+
+const height = 6;
+const styles = StyleSheet.create({
+    container: {
+        display: "flex",
+        marginHorizontal: responsiveWidth(5),
+        flexDirection: "row-reverse",
+        height: responsiveHeight(height),
+        alignItems: "flex-end"
+    },
+    scanImage: {
+        height: responsiveHeight(5),
+        width: responsiveHeight(5),
+
+    },
+    scanButton: {
+        borderRadius: 0,
+        borderTopRightRadius: responsiveWidth(1),
+        borderBottomRightRadius: responsiveWidth(1),
+        width: responsiveWidth(25)
+    },
+    scanImageWrapper: {
+        paddingHorizontal: responsiveWidth(1),
+        height: responsiveHeight(height),
+        display: "flex",
+        justifyContent: "center",
+        borderWidth: 1,
+        borderColor: "#A5A5A5",
+    },
+    textInput: {
+        height: responsiveHeight(height),
+        flex: 1,
+        borderWidth: 1,
+        borderColor: "#A5A5A5",
+        borderTopLeftRadius: responsiveWidth(1),
+        borderBottomLeftRadius: responsiveWidth(1),
+        paddingLeft: responsiveHeight(2),
+        fontSize: RFPercentage(2),
+        fontFamily: 'SF Pro Text'
+    }
+})
+
+export default SearchBar

src/components/TelegramAuthButton/TelegramAuthButton.tsx

@@ -0,0 +1,49 @@
+import {FC, useCallback} from "react";
+import {
+    GestureResponderEvent,
+    Linking,
+    StyleSheet,
+    Text,
+    TextInput,
+    TouchableNativeFeedback,
+    TouchableOpacity,
+    View
+} from "react-native";
+import {RFPercentage} from "react-native-responsive-fontsize";
+
+type Props = {
+    onPress?: (event: GestureResponderEvent) => void
+}
+
+const TelegramAuthButton: FC<Props> = ({onPress}) => {
+    return (
+        <TouchableNativeFeedback onPress={onPress}>
+            <View style={styles.buttonContainer}>
+                <View style={styles.buttonContent}>
+                    <Text style={styles.buttonText}>Войти</Text>
+                </View>
+            </View>
+        </TouchableNativeFeedback>
+    );
+};
+
+const styles = StyleSheet.create({
+    buttonContainer: {
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    buttonContent: {
+        backgroundColor: '#0090c9',
+        borderRadius: RFPercentage(1),
+        paddingHorizontal: 50,
+        flexDirection: 'row', // Сохранено, так как возможно добавление иконки или другого элемента в будущем
+    },
+    buttonText: {
+        flex: 1,
+        fontSize: RFPercentage(3),
+        color: 'white',
+        textAlign: 'center',
+    },
+});
+
+export default TelegramAuthButton;