autoryzacja działa zarówno na android jak i ios

working via zustand now + adding image from camera

ArtisanConnect/api/categories.jsx

@@ -0,0 +1,12 @@
+import axios from "axios";
+
+const API_URL = "https://hopp.zikor.pl/api/v1";
+
+export async function listCategories() {
+    try {
+        const response = await axios.get(`${API_URL}/vars/categories`);
+        return response.data;
+    } catch (err) {
+        console.error("Nie udało się pobrać listy kategorii.", err.response.status);
+    }
+}

ArtisanConnect/api/notices.jsx

@@ -1,16 +1,27 @@
-const API_URL = "https://testowe.zikor.pl/api/v1/notices/";
+import axios from "axios";
+import FormData from 'form-data'
+import {useAuthStore} from "@/store/authStore";
+
+// const API_URL = "https://testowe.zikor.pl/api/v1";
+
+const API_URL = "https://hopp.zikor.pl/api/v1";
 
 export async function listNotices() {
-    const response = await fetch(`${API_URL}get/all`);
+    const { token } = useAuthStore.getState();
+    const headers = token ? { 'Authorization': `Bearer ${token}` } : {};
+
+    const response = await fetch(`${API_URL}/notices/get/all`, {
+        headers: headers
+    });
     const data = await response.json();
     if (!response.ok) {
-        throw new Error("Error");
+        throw new Error(response.toString());
     }
     return data;
 }
 
 export async function getNoticeById(noticeId) {
-    const response = await fetch(`${API_URL}get/${noticeId}`);
+    const response = await fetch(`${API_URL}/notices/get/${noticeId}`);
 
     const data = await response.json();
     if (!response.ok) {
@@ -18,3 +29,94 @@ export async function getNoticeById(noticeId) {
     }
     return data;
 }
+
+export async function createNotice(notice) {
+    try {
+        const response = await axios.post(`${API_URL}/notices/add`, notice, {
+            headers: {
+                "Content-Type": "application/json",
+            },
+        });
+
+        if (response.data.noticeId !== null) {
+            for (const imageUri of notice.image) {
+                await uploadImage(response.data.noticeId, imageUri);
+            }
+        }
+
+        return response.data;
+    } catch (error) {
+        console.log("Error", error.response.data, error.response.status);
+        return null;
+    }
+}
+
+export async function getImageByNoticeId(noticeId) {
+    let imageUrl;
+    try {
+        const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
+
+        const imageName = listResponse.data[0];
+        imageUrl = `${API_URL}/images/get/${imageName}`;
+
+        return imageUrl;
+    } catch (err) {
+        console.log(`Zdjęcie nie istnieje dla notice o id: ${noticeId}`);
+        imageUrl = "https://http.cat/404.jpg";
+        return imageUrl;
+    }
+}
+
+export async function getAllImagesByNoticeId(noticeId) {
+    try {
+        const listResponse = await axios.get(`${API_URL}/images/list/${noticeId}`);
+
+        if (listResponse.data && listResponse.data.length > 0) {
+            return listResponse.data.map(imageName =>
+                `${API_URL}/images/get/${imageName}`
+            );
+        }
+
+        return ["https://http.cat/404.jpg"];
+    } catch (err) {
+        if(err.response.status === 404) {
+            console.info(`Ogłoszenie o id: ${noticeId} nie posiada zdjęć.`);
+            return ["https://http.cat/404.jpg"];
+        }
+        console.warn(`Nie udało się pobrać listy zdjęć dla ogłoszenia o id: ${noticeId}`, err);
+        return ["https://http.cat/404.jpg"];
+    }
+}
+
+export const uploadImage = async (noticeId, imageUri) => {
+    const formData = new FormData();
+
+    const filename = imageUri.split('/').pop();
+
+    const match = /\.(\w+)$/.exec(filename);
+    const type = match ? `image/${match[1]}` : 'image/jpeg';
+
+    formData.append('file', {
+        uri: imageUri,
+        name: filename,
+        type: type,
+    });
+
+    try {
+        const response = await axios.post(
+            `${API_URL}/images/upload/${noticeId}`,
+            formData,
+            {
+                headers: {
+                    'Content-Type': 'multipart/form-data',
+                },
+            }
+        );
+        console.info('Upload successful:', response.data);
+        return response.data;
+    } catch (error) {
+        console.log("imageURI:", imageUri);
+        console.error('Error uploading image:', error.response.data, error.response.status);
+        throw error;
+    }
+}

ArtisanConnect/app.json

@@ -2,7 +2,7 @@
   "expo": {
     "name": "ArtisanConnect",
     "slug": "ArtisanConnect",
-    "scheme": "Artisanconnect",
+    "scheme": "com.hamx.artisanconnect",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
@@ -14,19 +14,44 @@
       "backgroundColor": "#ffffff"
     },
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": true,
+      "bundleIdentifier": "com.hamx.artisanconnect"
     },
     "android": {
       "adaptiveIcon": {
         "foregroundImage": "./assets/adaptive-icon.png",
         "backgroundColor": "#ffffff"
-      }
+      },
+      "permissions": [
+        "android.permission.RECORD_AUDIO",
+        "android.permission.CAMERA"
+      ],
+      "package": "com.hamx.artisanconnect"
     },
     "web": {
       "favicon": "./assets/favicon.png"
     },
     "plugins": [
-      "expo-router"
-    ]
+      "expo-router",
+      [
+        "expo-image-picker",
+        {
+          "photosPermission": "The app accesses your photos to let you share them with your friends."
+        }
+      ],
+      [
+        "expo-camera",
+        {
+          "cameraPermission": "Please allow $(PRODUCT_NAME) to access your camera"
+        }
+      ],
+      "expo-web-browser"
+    ],
+    "extra": {
+      "router": {},
+      "eas": {
+        "projectId": "7a0d8bc8-938f-4d2a-babb-945faee13429"
+      }
+    }
   }
 }

ArtisanConnect/app/(tabs)/_layout.jsx

@@ -1,62 +1,75 @@
-import { Tabs } from "expo-router";
-import { Ionicons } from "@expo/vector-icons";
+import {Tabs} from "expo-router";
+import {Ionicons} from "@expo/vector-icons";
+
 export default function TabLayout() {
-  return (
-    <Tabs
-      screenOptions={{
-        tabBarActiveTintColor: "rgb(var(--color-primary-500))",
-      }}
-    >
-      <Tabs.Screen
-        name="index"
-        options={{
-          title: "Home",
-          tabBarLabel: "Home",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="home-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="notices"
-        options={{
-          title: "Ogłoszenia",
-          tabBarLabel: "Ogłoszenia",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="list-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="notice/create"
-        options={{
-          title: "Dodaj",
-          tabBarLabel: "Dodaj",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="add-circle-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="wishlist"
-        options={{
-          title: "Ulubione",
-          tabBarLabel: "Ulubione",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="heart-outline" size={size} color={color} />
-          ),
-        }}
-      />
-      <Tabs.Screen
-        name="account"
-        options={{
-          title: "Konto",
-          tabBarLabel: "Konto",
-          tabBarIcon: ({ color, size }) => (
-            <Ionicons name="person-outline" size={size} color={color} />
-          ),
-        }}
-      />
-    </Tabs>
-  );
+    return (
+        <Tabs
+            screenOptions={{
+                tabBarActiveTintColor: "rgb(var(--color-primary-500))",
+            }}
+        >
+            <Tabs.Screen
+                name="index"
+                options={{
+                    title: "Home",
+                    tabBarLabel: "Home",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="home-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="notices"
+                options={{
+                    title: "Ogłoszenia",
+                    tabBarLabel: "Ogłoszenia",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="list-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="notice/create"
+                options={{
+                    title: "Dodaj",
+                    tabBarLabel: "Dodaj",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="add-circle-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="wishlist"
+                options={{
+                    title: "Ulubione",
+                    tabBarLabel: "Ulubione",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="heart-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="login"
+                options={{
+                    headerShown: false, // Ukryj nagłówek dla Drawer
+                    title: "Authentication",
+                    tabBarLabel: "Authentication",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="key" size={size} color={color}/>
+                    ),
+                }}
+            />
+            <Tabs.Screen
+                name="dashboard"
+                options={{
+                    headerShown: false, // Ukryj nagłówek dla Drawer
+                    title: "Konto",
+                    tabBarLabel: "Konto",
+                    tabBarIcon: ({color, size}) => (
+                        <Ionicons name="person-outline" size={size} color={color}/>
+                    ),
+                }}
+            />
+        </Tabs>
+    );
 }

ArtisanConnect/app/(tabs)/dashboard/_layout.jsx

@@ -0,0 +1,24 @@
+import { Drawer } from "expo-router/drawer";
+
+export default function AccountDrawerLayout() {
+  return (
+    <Drawer
+      screenOptions={{
+        drawerActiveTintColor: "#1c1c1e",
+        drawerInactiveTintColor: "#8e8e8f",
+        drawerActiveBackgroundColor: "#f0f0f0",
+        drawerItemStyle: {
+          borderRadius: 8,
+          // backgroundColor: "transparent",
+        },
+        headerTintColor: "#1c1c1e",
+      }}
+    >
+      <Drawer.Screen name="account" options={{ title: "Konto" }} />
+      <Drawer.Screen
+        name="userNotices"
+        options={{ title: "Moje ogłoszenia" }}
+      />
+    </Drawer>
+  );
+}

ArtisanConnect/app/(tabs)/dashboard/userNotices.jsx

@@ -0,0 +1,4 @@
+import { Text } from "@/components/ui/text";
+export default function UserNotices() {
+  return <Text>Użytkownik</Text>;
+}

ArtisanConnect/app/(tabs)/login.jsx

@@ -0,0 +1,180 @@
+import React, {useEffect, useState} from 'react';
+import {StyleSheet, ActivityIndicator, SafeAreaView, View, Platform} from 'react-native';
+import {useAuthStore} from '@/store/authStore';
+import {useRouter, Link} from 'expo-router';
+
+import {Box} from "@/components/ui/box"
+import {Button, ButtonText, ButtonIcon} from "@/components/ui/button"
+import {Center} from "@/components/ui/center"
+import {Heading} from "@/components/ui/heading"
+import {Input, InputField} from "@/components/ui/input"
+import {Text} from "@/components/ui/text"
+import {VStack} from "@/components/ui/vstack"
+import {HStack} from "@/components/ui/hstack"
+import {ArrowRightIcon} from "@/components/ui/icon"
+import {Divider} from '@/components/ui/divider';
+import {Ionicons} from "@expo/vector-icons";
+
+import * as WebBrowser from 'expo-web-browser';
+import * as Google from "expo-auth-session/providers/google";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import {makeRedirectUri} from "expo-auth-session";
+
+import Constants from 'expo-constants';
+
+WebBrowser.maybeCompleteAuthSession();
+
+// client_id ios 936418008320-ohefdfcebd41f6oa2o8phh1mgj9s49sl.apps.googleusercontent.com
+// android 936418008320-d8dfjph5e4r28fcm1rbdfbh5phmbg03d.apps.googleusercontent.com
+
+export default function Login() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const {signIn, isLoading, signInWithGoogle} = useAuthStore();
+    const router = useRouter();
+
+    const [request, response, promptAsync] = Google.useAuthRequest({
+        androidClientId: "936418008320-d8dfjph5e4r28fcm1rbdfbh5phmbg03d.apps.googleusercontent.com",
+        iosClientId: "936418008320-ohefdfcebd41f6oa2o8phh1mgj9s49sl.apps.googleusercontent.com",
+        webClientId: "936418008320-btdngtlfnjac1p67guje72m9el5q59a7.apps.googleusercontent.com",
+        redirectUri:
+            Platform.OS === 'android'
+                ? makeRedirectUri({
+                    scheme: Constants.expoConfig.android.package,
+                    path: '/',
+                })
+                : undefined,
+    })
+
+    const handleInternalLogin = async () => {
+        if (!email || !password) {
+            alert('Proszę wprowadzić email i hasło.');
+            return;
+        }
+
+        try {
+            await signIn(email, password);
+            alert(`Zalogowano jako ${email}`);
+            router.replace('/');
+        } catch (e) {
+            alert("Błąd logowania: " + (e.response?.data?.message || e.message));
+        }
+    }
+
+    useEffect(() => {
+        handleGoogleLogin();
+    }, [response]);
+
+    const handleGoogleLogin = async () => {
+        // const user = await AsyncStorage.getItem("@user");
+        let user = null;
+        if (!user) {
+            if(response.type === "success") {
+                user = await getUserInfo(response.authentication.accessToken)
+                await signInWithGoogle(response.authentication.accessToken);
+                alert(`Zalogowano jako ${user.email}`);
+            }
+
+        } else {
+            console.info("Pobrano użytkownika z AsyncStorage:", JSON.parse(user));
+            alert(`Zalogowano jako ${user.email}`);
+        }
+    };
+
+    const getUserInfo = async (token) => {
+        if(!token) {
+            return
+        }
+        try {
+            const response = await fetch("https://www.googleapis.com/userinfo/v2/me",
+                {
+                    headers: {
+                        Authorization: `Bearer ${token}`
+                    },
+                }
+            );
+            const user = await response.json();
+            await AsyncStorage.setItem("@user", JSON.stringify(user));
+            return user;
+        } catch (error) {
+            console.error("Błąd podczas pobierania informacji o użytkowniku:", error);
+            throw error;
+        }
+    }
+
+    if (isLoading) {
+        return (
+            <View style={styles.container}>
+                <ActivityIndicator size="large"/>
+            </View>
+        );
+    }
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <Center>
+                <Box className="p-5 max-w-96 border border-background-300 rounded-lg">
+                    <VStack className="pb-4" space="xs">
+                        <Heading className="leading-[30px]">Logowanie</Heading>
+                        <Box className="flex flex-row">
+                            <Link href="/registration" asChild>
+                                <Button variant="link" size="sm" className="p-0">
+                                    <ButtonText style={styles.signupbutton}>Nie masz jeszcze konta? Załóz je
+                                        tutaj!</ButtonText>
+                                    <ButtonIcon className="mr-1" size="md" as={ArrowRightIcon}/>
+                                </Button>
+                            </Link>
+                        </Box>
+                    </VStack>
+                    <VStack space="xl" className="py-2">
+                        <Input>
+                            <InputField className="py-2" placeholder="Login" onChangeText={setEmail}/>
+                        </Input>
+                        <Input>
+                            <InputField type="password" className="py-2" placeholder="Hasło"
+                                        onChangeText={setPassword}/>
+                        </Input>
+                    </VStack>
+                    <VStack space="lg" className="pt-4">
+                        <Button size="sm" onPress={handleInternalLogin}>
+                            <ButtonText>Zaloguj się</ButtonText>
+                        </Button>
+                    </VStack>
+
+                    <HStack alignItems="center" space="sm" className="pt-6 pb-6">
+                        <Divider flex={1}/>
+                        <Text fontSize="$sm" className="text-gray-300">
+                            lub
+                        </Text>
+                        <Divider flex={1}/>
+                    </HStack>
+                    <Button size="sm" onPress={() => promptAsync()}>
+                        <Ionicons name="logo-google" color="#fff"/>
+                    </Button>
+                </Box>
+            </Center>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        padding: 20,
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 5,
+        marginBottom: 15,
+        padding: 10,
+    },
+    errorText: {
+        color: 'red',
+        marginBottom: 10,
+    },
+    signupbutton: {
+        fontWeight: '300',
+    },
+});

ArtisanConnect/app/(tabs)/notice/create.jsx

@@ -1,4 +1,256 @@
-import { Text } from "@/components/ui/text";
+import {useState, useEffect} from "react";
+import {Image, StyleSheet} from "react-native";
+import {Button, ButtonText} from "@/components/ui/button";
+import {FormControl} from "@/components/ui/form-control";
+import {Input, InputField} from "@/components/ui/input";
+import {Text} from "@/components/ui/text";
+import {VStack} from "@/components/ui/vstack";
+import {Textarea, TextareaInput} from "@/components/ui/textarea";
+import {ScrollView} from '@gluestack-ui/themed';
+import * as ImagePicker from 'expo-image-picker';
+import {
+    Select,
+    SelectTrigger,
+    SelectInput,
+    SelectIcon,
+    SelectPortal,
+    SelectBackdrop,
+    SelectContent,
+    SelectItem,
+    SelectScrollView,
+} from "@/components/ui/select";
+
+import {ChevronDownIcon} from "@/components/ui/icon";
+import {useNoticesStore} from "@/store/noticesStore";
+import {listCategories} from "@/api/categories";
+import {useRouter} from "expo-router";
+
 export default function CreateNotice() {
-  return <Text>Tworzenie ogłoszenia</Text>;
-}
+    const router = useRouter();
+    const {addNotice, fetchNotices} = useNoticesStore();
+    const [title, setTitle] = useState("");
+    const [description, setDescription] = useState("");
+    const [price, setPrice] = useState("");
+    const [category, setCategory] = useState("");
+    const [image, setImage] = useState([]);
+    const [selectItems, setSelectItems] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const fetchSelectItems = async () => {
+            try {
+                let data = await listCategories();
+                if (isMounted && Array.isArray(data)) {
+                    setSelectItems(data);
+                }
+            } catch (error) {
+                console.error('Error fetching select items:', error);
+            }
+        };
+
+        fetchSelectItems();
+
+        return () => {
+            isMounted = false;
+        };
+    }, []);
+
+    const [error, setError] = useState({
+        title: false,
+        description: false,
+        price: false,
+        category: false,
+    });
+
+    const styles = StyleSheet.create({
+        container: {
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+        },
+        image: {
+            width: 100,
+            height: 100,
+        },
+    });
+
+    const handleAddNotice = async () => {
+        setError({
+            title: !title,
+            description: !description,
+            price: !price,
+            category: !category,
+        });
+
+        if (!title || !description || !price || !category) {
+            console.log("Error in form");
+            return;
+        }
+
+        setIsLoading(true);
+        try {
+            const result = await addNotice({
+                title: title,
+                clientId: 1,
+                description: description,
+                price: price,
+                category: category,
+                status: "ACTIVE",
+                image: image
+            });
+
+            if (result) {
+                console.log("Notice created successfully with ID: ", result.noticeId);
+                await fetchNotices();
+                clearForm();
+                router.push("/(tabs)/notices");
+            }
+        } catch (error) {
+            console.error("Error creating notice. Error message: ", error.message);
+        } finally {
+            setIsLoading(false);
+        }
+    };
+
+    const takePicture = async () => {
+        const {status} = await ImagePicker.requestCameraPermissionsAsync();
+        if (status !== 'granted') {
+            return;
+        }
+        const result = await ImagePicker.launchCameraAsync({
+            allowsEditing: false,
+        });
+
+        if (!result.canceled && result.assets) {
+            setImage(result.assets.map(asset => asset.uri));
+        }
+    }
+
+    const pickImage = async () => {
+        let result = await ImagePicker.launchImageLibraryAsync({
+            mediaTypes: 'images',
+            selectionLimit: 8,
+            allowsEditing: false,
+            allowsMultipleSelection: true,
+            aspect: [4, 3],
+            quality: 0.5,
+        });
+
+        if (!result.canceled) {
+            setImage(result.assets.map(asset => asset.uri));
+        }
+    };
+
+    const clearForm = () => {
+        setTitle("");
+        setDescription("");
+        setPrice("");
+        setCategory("");
+        setImage([]);
+        setError({
+            title: false,
+            description: false,
+            price: false,
+            category: false,
+        })
+    }
+
+    return (
+        <ScrollView h="$80" w="$80">
+            <FormControl className="p-4 border rounded-lg border-outline-300">
+                <VStack space="xl">
+                    <VStack space="md">
+                        <Text className="text-typography-500">Zdjęcia</Text>
+                        <Button onPress={pickImage}>
+                            <ButtonText>
+                                Wybierz zdjęcia
+                            </ButtonText>
+                        </Button>
+                        <Button onPress={takePicture}>
+                            <ButtonText>Zrób zdjęcie</ButtonText>
+                        </Button>
+                        <Text size="sm"
+                              bold="true"
+                        >
+                            Pierwsze zdjęcie będzie zdjęciem głównym</Text>
+                        {image && image.length > 0 && (
+                            <VStack space="xs" className="flex-row flex-wrap">
+                                {image.map((img, index) => (
+                                    <Image key={index} source={{uri: img}} style={styles.image} className="m-1"/>
+                                ))}
+                            </VStack>
+                        )}
+                    </VStack>
+
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Tytuł</Text>
+                        <Input className="min-w-[250px]" isInvalid={error.title}>
+                            <InputField
+                                type="text"
+                                value={title}
+                                onChangeText={(value) => setTitle(value)}
+                            />
+                        </Input>
+                    </VStack>
+
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Opis</Text>
+                        <Textarea
+                            size="md"
+                            className="min-w-[250px] "
+                            isInvalid={error.description}
+                        >
+                            <TextareaInput
+                                placeholder="Opisz produkt"
+                                value={description}
+                                onChangeText={(value) => setDescription(value)}
+                            />
+                        </Textarea>
+                    </VStack>
+
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Cena</Text>
+                        <Input className="min-w-[250px]" isInvalid={error.price}>
+                            <InputField
+                                type="text"
+                                value={price}
+                                onChangeText={(value) => setPrice(value)}
+                            />
+                        </Input>
+                    </VStack>
+                    <VStack space="xs">
+                        <Text className="text-typography-500">Kategoria</Text>
+                        <Select
+                            onValueChange={(value) => setCategory(value)}
+                            isInvalid={error.category}
+                        >
+                            <SelectTrigger variant="outline" size="md">
+                                <SelectInput placeholder="Wybierz kategorię"/>
+                                <SelectIcon className="mr-3" as={ChevronDownIcon}/>
+                            </SelectTrigger>
+                            <SelectPortal>
+                                <SelectBackdrop/>
+                                <SelectContent style={{maxHeight: 400}}>
+                                    <SelectScrollView>
+                                        {selectItems.map((item) => (
+                                            <SelectItem key={item.value} label={item.label} value={item.value}/>
+                                        ))}
+                                    </SelectScrollView>
+                                </SelectContent>
+                            </SelectPortal>
+                        </Select>
+                    </VStack>
+                    <Button
+                        className="mt-5 w-full"
+                        onPress={handleAddNotice}
+                        disabled={isLoading}
+                    >
+                        <ButtonText className="text-typography-0">Dodaj</ButtonText>
+                    </Button>
+                </VStack>
+            </FormControl>
+        </ScrollView>
+    );
+}

ArtisanConnect/app/(tabs)/notices.jsx

@@ -1,30 +1,65 @@
-import { FlatList, Text, ActivityIndicator } from "react-native";
-import { listNotices } from "@/api/notices";
-import { useQuery } from "@tanstack/react-query";
-import { NoticeCard } from "@/components/NoticeCard";
+import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
+import {useState, useEffect} from "react";
+import {useNoticesStore} from "@/store/noticesStore";
+import {NoticeCard} from "@/components/NoticeCard";
 
 export default function Notices() {
-  const { data, isLoading, error } = useQuery({
-    queryKey: ["notices"],
-    queryFn: listNotices,
-  });
+    const {notices, fetchNotices} = useNoticesStore();
+    const [refreshing, setRefreshing] = useState(false);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
 
-  if (isLoading) {
-    return <ActivityIndicator />;
-  }
+    useEffect(() => {
+        loadData();
+    }, []);
 
-  if (error) {
-    return <Text>Błąd, spróbuj ponownie póżniej</Text>;
-  }
+    const loadData = async () => {
+        setIsLoading(true);
+        try {
+            await fetchNotices();
+            setError(null);
+        } catch (err) {
+            setError(err);
+        } finally {
+            setIsLoading(false);
+        }
+    };
 
-  return (
-    <FlatList
-      key={2}
-      data={data}
-      numColumns={2}
-      columnContainerClassName="m-2"
-      columnWrapperClassName="gap-2 m-2"
-      renderItem={({ item }) => <NoticeCard notice={item} />}
-    />
-  );
-}
+    const onRefresh = async () => {
+        setRefreshing(true);
+        try {
+            await fetchNotices();
+        } catch (err) {
+            setError(err);
+        } finally {
+            setRefreshing(false);
+        }
+    };
+
+    if (isLoading && !refreshing) {
+        return <ActivityIndicator/>;
+    }
+
+    if (error) {
+        return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
+    }
+
+    return (
+        <FlatList
+            key={2}
+            data={notices}
+            numColumns={2}
+            columnContainerClassName="m-2"
+            columnWrapperClassName="gap-2 m-2"
+            renderItem={({item}) => <NoticeCard notice={item}/>}
+            refreshControl={
+                <RefreshControl
+                    refreshing={refreshing}
+                    onRefresh={onRefresh}
+                    colors={["#3b82f6"]}
+                    tintColor="#3b82f6"
+                />
+            }
+        />
+    );
+}

ArtisanConnect/app/_layout.jsx

@@ -1,4 +1,4 @@
-import { Tabs, Stack } from "expo-router";
+import { Stack } from "expo-router";
 import "@/global.css";
 import { GluestackUIProvider } from "@/components/ui/gluestack-ui-provider";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

ArtisanConnect/app/notice/[id].jsx

@@ -1,67 +1,133 @@
-import { Stack, useLocalSearchParams } from "expo-router";
-import { Box } from "@/components/ui/box";
-import { Button, ButtonText } from "@/components/ui/button";
-import { Card } from "@/components/ui/card";
-import { Heading } from "@/components/ui/heading";
-import { Image } from "@/components/ui/image";
-import { Text } from "@/components/ui/text";
-import { VStack } from "@/components/ui/vstack";
-import { Icon, FavouriteIcon } from "@/components/ui/icon";
-import { useQuery } from "@tanstack/react-query";
-import { getNoticeById } from "@/api/notices";
-import { ActivityIndicator } from "react-native";
+import {Stack, useLocalSearchParams} from "expo-router";
+import {Box} from "@/components/ui/box";
+import {Card} from "@/components/ui/card";
+import {Heading} from "@/components/ui/heading";
+import {Image} from "@/components/ui/image";
+import {Text} from "@/components/ui/text";
+import {VStack} from "@/components/ui/vstack";
+import {Ionicons} from "@expo/vector-icons";
+import {ActivityIndicator} from "react-native";
+import {useEffect, useState} from "react";
+import {useNoticesStore} from "@/store/noticesStore";
+import {useWishlist} from "@/store/wishlistStore";
+import {Pressable} from "react-native";
 
 export default function NoticeDetails() {
-  const { id } = useLocalSearchParams();
+    const {id} = useLocalSearchParams();
+    const [image, setImage] = useState(null);
+    const [isImageLoading, setIsImageLoading] = useState(true);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const [notice, setNotice] = useState(null);
 
-  const {
-    data: notice,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["notices", id],
-    queryFn: () => getNoticeById(Number(id)),
-  });
+    const {getNoticeById, getAllImagesByNoticeId} = useNoticesStore();
+    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
+    const isInWishlist = useWishlist((state) =>
+        notice ? state.wishlistNotices.some((item) => item.noticeId === notice.noticeId) : false
+    );
 
-  if (isLoading) {
-    return <ActivityIndicator />;
-  }
+    useEffect(() => {
+        const fetchNotice = async () => {
+            setIsLoading(true);
+            try {
+                const noticeData = getNoticeById(Number(id));
+                if (noticeData) {
+                    setNotice(noticeData);
+                    setError(null);
+                } else {
+                    setError(new Error(`Notice with ID ${id} not found.`));
+                }
+            } catch (err) {
+                setError(err);
+            } finally {
+                setIsLoading(false);
+            }
+        };
 
-  if (error) {
-    return <Text>Błąd, spróbuj ponownie póżniej</Text>;
-  }
+        fetchNotice();
+    }, [id]);
 
-  return (
-    <Card className="p-0 rounded-lg  m-3 flex-1">
-      <Stack.Screen
-        options={{
-          title: notice.title,
-        }}
-      />
-      <Image
-        source={{
-          uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
-        }}
-        className=" h-auto w-full rounded-md aspect-[1/1]"
-        alt="image"
-        resizeMode="cover"
-      />
+    useEffect(() => {
+        const fetchImage = async () => {
+            setIsImageLoading(true);
+            if (notice) {
+                try {
+                    const images = await getAllImagesByNoticeId(notice.noticeId);
+                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
+                } catch (err) {
+                    console.error("Error while loading images:", err);
+                    setImage("https://http.cat/404.jpg");
+                } finally {
+                    setIsImageLoading(false);
+                }
+            }
+        };
 
-      <VStack className="p-2">
-        <Text className="text-sm font-normal mb-2 text-typography-700">
-          {notice.title}
-        </Text>
-        <Box className="flex-row items-center">
-          <Heading size="md" className="flex-1">
-            {notice.price}zł
-          </Heading>
-          <Icon
-            as={FavouriteIcon}
-            size="sm"
-            className="text-primary-500 w-6 h-6"
-          />
-        </Box>
-      </VStack>
-    </Card>
-  );
-}
+        if (notice) {
+            fetchImage();
+        }
+    }, [notice]);
+
+    if (isLoading) {
+        return <ActivityIndicator/>;
+    }
+
+    if (error) {
+        return <Text>Błąd, spróbuj ponownie póżniej: {error.message}</Text>;
+    }
+
+    if (!notice) {
+        return <Text>Nie znaleziono ogłoszenia</Text>;
+    }
+
+    return (
+        <Card className="p-0 rounded-lg m-3 flex-1">
+            <Stack.Screen
+                options={{
+                    title: notice.title,
+                }}
+            />
+            {isImageLoading ? (
+                <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
+                    <ActivityIndicator size="large" color="#3b82f6" />
+                </Box>
+            ) : (
+                <Image
+                    source={{
+                        uri: image,
+                    }}
+                    className="h-auto w-full rounded-md aspect-[1/1]"
+                    alt="image"
+                    resizeMode="cover"
+                />
+            )}
+
+            <VStack className="p-2">
+                <Text className="text-sm font-normal mb-2 text-typography-700">
+                    {notice.title}
+                </Text>
+                <Box className="flex-row items-center">
+                    <Heading size="md" className="flex-1">
+                        {notice.price}zł
+                    </Heading>
+                    <Pressable
+                        onPress={() => {
+                            if (isInWishlist) {
+                                removeNoticeFromWishlist(notice.noticeId);
+                            } else {
+                                addNoticeToWishlist(notice);
+                            }
+                        }}
+                    >
+                        <Ionicons
+                            name={isInWishlist ? "heart" : "heart-outline"}
+                            size={24}
+                            color={"primary-heading-500"}
+                        />
+                    </Pressable>
+                </Box>
+            </VStack>
+        </Card>
+    );
+}

ArtisanConnect/app/registration.jsx

@@ -0,0 +1,96 @@
+import React, {useState} from 'react';
+import {StyleSheet, ActivityIndicator, SafeAreaView, View} from 'react-native';
+import {useAuthStore} from '@/store/authStore';
+import {useRouter} from 'expo-router';
+
+import {Box} from "@/components/ui/box"
+import {Button, ButtonText} from "@/components/ui/button"
+import {Center} from "@/components/ui/center"
+import {Heading} from "@/components/ui/heading"
+import {Input, InputField} from "@/components/ui/input"
+import {VStack} from "@/components/ui/vstack"
+
+export default function Registration() {
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [firstName, setFirstName] = useState('');
+    const [lastName, setLastName] = useState('');
+    const {signUp, isLoading} = useAuthStore();
+    const router = useRouter();
+
+    const handleInternalRegistration = async () => {
+        if (!email || !password || !firstName || !lastName) {
+            alert('Proszę uzupełnić wszystkie pola');
+            return;
+        }
+
+        try {
+            await signUp({email, password, firstName, lastName});
+            alert(`Zalogowano jako ${email}`);
+            router.replace('/');
+        } catch (e) {
+            alert("Błąd logowania: " + (e.response?.data?.message || e.message));
+        }
+    }
+
+    if (isLoading) {
+        return (
+            <View style={styles.container}>
+                <ActivityIndicator size="large"/>
+            </View>
+        );
+    }
+
+    return (
+        <SafeAreaView style={styles.container}>
+            <Center>
+                <Box className="p-5 w-[80%] border border-background-300 rounded-lg">
+                    <VStack className="pb-4" space="xs">
+                        <Heading className="leading-[30px]">Rejestracja</Heading>
+                    </VStack>
+                    <VStack space="xl" className="py-2">
+                        <Input>
+                            <InputField type="email" className="py-2" placeholder="E-mail" onChangeText={setEmail}/>
+                        </Input>
+                        <Input>
+                            <InputField className="py-2" placeholder="Imię" onChangeText={setFirstName}/>
+                        </Input>
+                        <Input>
+                            <InputField className="py-2" placeholder="Nazwisko" onChangeText={setLastName}/>
+                        </Input>
+                        <Input>
+                            <InputField type="password" className="py-2" placeholder="Hasło"
+                                        onChangeText={setPassword}/>
+                        </Input>
+                    </VStack>
+                    <VStack space="lg" className="pt-4">
+                        <Button size="sm" onPress={handleInternalRegistration}>
+                            <ButtonText>Zarejestruj się</ButtonText>
+                        </Button>
+                    </VStack>
+                </Box>
+            </Center>
+        </SafeAreaView>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+    },
+    formContainer: {
+        width: '80%',
+    },
+    input: {
+        borderWidth: 1,
+        borderColor: '#ddd',
+        borderRadius: 5,
+        marginBottom: 15,
+        padding: 10,
+    },
+    errorText: {
+        color: 'red',
+        marginBottom: 10,
+    },
+});

ArtisanConnect/components/NoticeCard.jsx

@@ -1,62 +1,116 @@
-import { Box } from "@/components/ui/box";
-import { Card } from "@/components/ui/card";
-import { Heading } from "@/components/ui/heading";
-import { Image } from "@/components/ui/image";
-import { Text } from "@/components/ui/text";
-import { VStack } from "@/components/ui/vstack";
-import { Link } from "expo-router";
-import { Pressable } from "react-native";
-import { useWishlist } from "@/store/wishlistStore";
-import { Ionicons } from "@expo/vector-icons";
+import {Box} from "@/components/ui/box";
+import {Card} from "@/components/ui/card";
+import {Heading} from "@/components/ui/heading";
+import {Image} from "@/components/ui/image";
+import {Text} from "@/components/ui/text";
+import {VStack} from "@/components/ui/vstack";
+import {Link} from "expo-router";
+import {Pressable, ActivityIndicator, View} from "react-native";
+import {useWishlist} from "@/store/wishlistStore";
+import {useNoticesStore} from "@/store/noticesStore";
+import {Ionicons} from "@expo/vector-icons";
+import {useEffect, useState} from "react";
 
-export function NoticeCard({ notice }) {
-  const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
-  const removeNoticeFromWishlist = useWishlist(
-    (state) => state.removeNoticeFromWishlist
-  );
-  const isInWishlist = useWishlist((state) =>
-    state.wishlistNotices.some((item) => item.noticeId == notice.noticeId)
-  );
+export function NoticeCard({notice}) {
+    const noticeId = notice?.noticeId;
 
-  return (
-    <Link href={`/notice/${notice.noticeId}`} asChild>
-      <Pressable className="flex-1">
-        <Card className="p-0 rounded-lg max-w-[460px]  flex-1">
-          <Image
-            source={{
-              uri: "https://gluestack.github.io/public-blog-video-assets/saree.png",
-            }}
-            className=" h-auto w-full rounded-md aspect-[1/1]"
-            alt="image"
-            resizeMode="cover"
-          />
-          <VStack className="p-2">
-            <Text className="text-sm font-normal mb-2 text-typography-700">
-              {notice.title}
-            </Text>
-            <Box className="flex-row items-center">
-              <Heading size="md" className="flex-1">
-                {notice.price}zł
-              </Heading>
-              <Pressable
-                onPress={() => {
-                  if (isInWishlist) {
-                    removeNoticeFromWishlist(notice.noticeId); // Usuń z ulubionych
-                  } else {
-                    addNoticeToWishlist(notice); // Dodaj do ulubionych
-                  }
-                }}
-              >
-                <Ionicons
-                  name={isInWishlist ? "heart" : "heart-outline"} // Dynamiczna ikona
-                  size={24} // Rozmiar ikony
-                  color={"primary-heading-500"} // Kolor ikony
-                />
-              </Pressable>
-            </Box>
-          </VStack>
-        </Card>
-      </Pressable>
-    </Link>
-  );
-}
+    const addNoticeToWishlist = useWishlist((state) => state.addNoticeToWishlist);
+    const removeNoticeFromWishlist = useWishlist((state) => state.removeNoticeFromWishlist);
+    const isInWishlist = useWishlist((state) =>
+        noticeId ? state.wishlistNotices.some((item) => item.noticeId === noticeId) : false
+    );
+
+    const [image, setImage] = useState(null);
+    const [isLoading, setIsLoading] = useState(true);
+
+    const {getAllImagesByNoticeId} = useNoticesStore();
+
+    useEffect(() => {
+        let isMounted = true;
+
+        const fetchImage = async () => {
+            if (!noticeId) {
+                if (isMounted) {
+                    setImage("https://http.cat/404.jpg");
+                    setIsLoading(false);
+                }
+                return;
+            }
+
+            setIsLoading(true);
+            try {
+                const images = await getAllImagesByNoticeId(noticeId);
+                if (isMounted) {
+                    setImage(images && images.length > 0 ? images[0] : "https://http.cat/404.jpg");
+                }
+            } catch (error) {
+                console.error(`Error while loading image: ${error}`);
+                if (isMounted) {
+                    setImage("https://http.cat/404.jpg");
+                }
+            } finally {
+                if (isMounted) {
+                    setIsLoading(false);
+                }
+            }
+        };
+
+        fetchImage();
+
+        return () => {
+            isMounted = false;
+        };
+    }, [noticeId]);
+
+    if (!notice) {
+        return <View style={{flex: 1}} />;
+    }
+
+    return (
+        <Link href={`/notice/${noticeId}`} asChild>
+            <Pressable className="flex-1">
+                <Card className="p-0 rounded-lg max-w-[460px] flex-1">
+                    {isLoading ? (
+                        <Box className="h-auto w-full rounded-md aspect-[1/1] bg-gray-100 items-center justify-center">
+                            <ActivityIndicator size="large" color="#3b82f6" />
+                        </Box>
+                    ) : (
+                        <Image
+                            source={{
+                                uri: image,
+                            }}
+                            className="h-auto w-full rounded-md aspect-[1/1]"
+                            alt="image"
+                            resizeMode="cover"
+                        />
+                    )}
+                    <VStack className="p-2">
+                        <Text className="text-sm font-normal mb-2 text-typography-700">
+                            {notice.title}
+                        </Text>
+                        <Box className="flex-row items-center">
+                            <Heading size="md" className="flex-1">
+                                {notice.price}zł
+                            </Heading>
+                            <Pressable
+                                onPress={() => {
+                                    if (isInWishlist) {
+                                        removeNoticeFromWishlist(noticeId);
+                                    } else {
+                                        addNoticeToWishlist(notice);
+                                    }
+                                }}
+                            >
+                                <Ionicons
+                                    name={isInWishlist ? "heart" : "heart-outline"}
+                                    size={24}
+                                    color={"primary-heading-500"}
+                                />
+                            </Pressable>
+                        </Box>
+                    </VStack>
+                </Card>
+            </Pressable>
+        </Link>
+    );
+}

ArtisanConnect/components/ui/form-control/index.tsx

@@ -0,0 +1,468 @@
+'use client';
+import { Text, View } from 'react-native';
+import React from 'react';
+import { createFormControl } from '@gluestack-ui/form-control';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+
+const SCOPE = 'FORM_CONTROL';
+
+const formControlStyle = tva({
+  base: 'flex flex-col',
+  variants: {
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+    },
+  },
+});
+
+const formControlErrorIconStyle = tva({
+  base: 'text-error-700 fill-none',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+const formControlErrorStyle = tva({
+  base: 'flex flex-row justify-start items-center mt-1 gap-1',
+});
+
+const formControlErrorTextStyle = tva({
+  base: 'text-error-700',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+const formControlHelperStyle = tva({
+  base: 'flex flex-row justify-start items-center mt-1',
+});
+
+const formControlHelperTextStyle = tva({
+  base: 'text-typography-500',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-xs',
+      'md': 'text-sm',
+      'lg': 'text-base',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+const formControlLabelStyle = tva({
+  base: 'flex flex-row justify-start items-center mb-1',
+});
+
+const formControlLabelTextStyle = tva({
+  base: 'font-medium text-typography-900',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+const formControlLabelAstrickStyle = tva({
+  base: 'font-medium text-typography-900',
+  variants: {
+    isTruncated: {
+      true: 'web:truncate',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow-500',
+    },
+  },
+});
+
+type IFormControlLabelAstrickProps = React.ComponentPropsWithoutRef<
+  typeof Text
+> &
+  VariantProps<typeof formControlLabelAstrickStyle>;
+
+const FormControlLabelAstrick = React.forwardRef<
+  React.ComponentRef<typeof Text>,
+  IFormControlLabelAstrickProps
+>(function FormControlLabelAstrick({ className, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <Text
+      ref={ref}
+      className={formControlLabelAstrickStyle({
+        parentVariants: { size: parentSize },
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+export const UIFormControl = createFormControl({
+  Root: withStyleContext(View, SCOPE),
+  Error: View,
+  ErrorText: Text,
+  ErrorIcon: UIIcon,
+  Label: View,
+  LabelText: Text,
+  LabelAstrick: FormControlLabelAstrick,
+  Helper: View,
+  HelperText: Text,
+});
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: true,
+      stroke: true,
+    },
+  },
+});
+
+type IFormControlProps = React.ComponentProps<typeof UIFormControl> &
+  VariantProps<typeof formControlStyle>;
+
+const FormControl = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl>,
+  IFormControlProps
+>(function FormControl({ className, size = 'md', ...props }, ref) {
+  return (
+    <UIFormControl
+      ref={ref}
+      className={formControlStyle({ size, class: className })}
+      {...props}
+      context={{ size }}
+    />
+  );
+});
+
+type IFormControlErrorProps = React.ComponentProps<typeof UIFormControl.Error> &
+  VariantProps<typeof formControlErrorStyle>;
+
+const FormControlError = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Error>,
+  IFormControlErrorProps
+>(function FormControlError({ className, ...props }, ref) {
+  return (
+    <UIFormControl.Error
+      ref={ref}
+      className={formControlErrorStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlErrorTextProps = React.ComponentProps<
+  typeof UIFormControl.Error.Text
+> &
+  VariantProps<typeof formControlErrorTextStyle>;
+
+const FormControlErrorText = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Error.Text>,
+  IFormControlErrorTextProps
+>(function FormControlErrorText({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+  return (
+    <UIFormControl.Error.Text
+      className={formControlErrorTextStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type IFormControlErrorIconProps = React.ComponentProps<
+  typeof UIFormControl.Error.Icon
+> &
+  VariantProps<typeof formControlErrorIconStyle> & {
+    height?: number;
+    width?: number;
+  };
+
+const FormControlErrorIcon = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Error.Icon>,
+  IFormControlErrorIconProps
+>(function FormControlErrorIcon({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIFormControl.Error.Icon
+        ref={ref}
+        {...props}
+        className={formControlErrorIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIFormControl.Error.Icon
+        ref={ref}
+        {...props}
+        className={formControlErrorIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIFormControl.Error.Icon
+      className={formControlErrorIconStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlLabelProps = React.ComponentProps<typeof UIFormControl.Label> &
+  VariantProps<typeof formControlLabelStyle>;
+
+const FormControlLabel = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Label>,
+  IFormControlLabelProps
+>(function FormControlLabel({ className, ...props }, ref) {
+  return (
+    <UIFormControl.Label
+      ref={ref}
+      className={formControlLabelStyle({ class: className })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlLabelTextProps = React.ComponentProps<
+  typeof UIFormControl.Label.Text
+> &
+  VariantProps<typeof formControlLabelTextStyle>;
+
+const FormControlLabelText = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Label.Text>,
+  IFormControlLabelTextProps
+>(function FormControlLabelText({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIFormControl.Label.Text
+      className={formControlLabelTextStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type IFormControlHelperProps = React.ComponentProps<
+  typeof UIFormControl.Helper
+> &
+  VariantProps<typeof formControlHelperStyle>;
+
+const FormControlHelper = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Helper>,
+  IFormControlHelperProps
+>(function FormControlHelper({ className, ...props }, ref) {
+  return (
+    <UIFormControl.Helper
+      ref={ref}
+      className={formControlHelperStyle({
+        class: className,
+      })}
+      {...props}
+    />
+  );
+});
+
+type IFormControlHelperTextProps = React.ComponentProps<
+  typeof UIFormControl.Helper.Text
+> &
+  VariantProps<typeof formControlHelperTextStyle>;
+
+const FormControlHelperText = React.forwardRef<
+  React.ComponentRef<typeof UIFormControl.Helper.Text>,
+  IFormControlHelperTextProps
+>(function FormControlHelperText({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIFormControl.Helper.Text
+      className={formControlHelperTextStyle({
+        parentVariants: { size: parentSize },
+        size,
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+FormControl.displayName = 'FormControl';
+FormControlError.displayName = 'FormControlError';
+FormControlErrorText.displayName = 'FormControlErrorText';
+FormControlErrorIcon.displayName = 'FormControlErrorIcon';
+FormControlLabel.displayName = 'FormControlLabel';
+FormControlLabelText.displayName = 'FormControlLabelText';
+FormControlLabelAstrick.displayName = 'FormControlLabelAstrick';
+FormControlHelper.displayName = 'FormControlHelper';
+FormControlHelperText.displayName = 'FormControlHelperText';
+
+export {
+  FormControl,
+  FormControlError,
+  FormControlErrorText,
+  FormControlErrorIcon,
+  FormControlLabel,
+  FormControlLabelText,
+  FormControlLabelAstrick,
+  FormControlHelper,
+  FormControlHelperText,
+};

ArtisanConnect/components/ui/input/index.tsx

@@ -0,0 +1,217 @@
+'use client';
+import React from 'react';
+import { createInput } from '@gluestack-ui/input';
+import { View, Pressable, TextInput } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+
+const SCOPE = 'INPUT';
+
+const UIInput = createInput({
+  Root: withStyleContext(View, SCOPE),
+  Icon: UIIcon,
+  Slot: Pressable,
+  Input: TextInput,
+});
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const inputStyle = tva({
+  base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center',
+
+  variants: {
+    size: {
+      xl: 'h-12',
+      lg: 'h-11',
+      md: 'h-10',
+      sm: 'h-9',
+    },
+
+    variant: {
+      underlined:
+        'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700',
+
+      outline:
+        'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
+
+      rounded:
+        'rounded-full border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-indicator-error data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-indicator-error',
+    },
+  },
+});
+
+const inputIconStyle = tva({
+  base: 'justify-center items-center text-typography-400 fill-none',
+  parentVariants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+const inputSlotStyle = tva({
+  base: 'justify-center items-center web:disabled:cursor-not-allowed',
+});
+
+const inputFieldStyle = tva({
+  base: 'flex-1 text-typography-900 py-0 px-3 placeholder:text-typography-500 h-full ios:leading-[0px] web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+
+  parentVariants: {
+    variant: {
+      underlined: 'web:outline-0 web:outline-none px-0',
+      outline: 'web:outline-0 web:outline-none',
+      rounded: 'web:outline-0 web:outline-none px-4',
+    },
+
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+});
+
+type IInputProps = React.ComponentProps<typeof UIInput> &
+  VariantProps<typeof inputStyle> & { className?: string };
+const Input = React.forwardRef<React.ComponentRef<typeof UIInput>, IInputProps>(
+  function Input(
+    { className, variant = 'outline', size = 'md', ...props },
+    ref
+  ) {
+    return (
+      <UIInput
+        ref={ref}
+        {...props}
+        className={inputStyle({ variant, size, class: className })}
+        context={{ variant, size }}
+      />
+    );
+  }
+);
+
+type IInputIconProps = React.ComponentProps<typeof UIInput.Icon> &
+  VariantProps<typeof inputIconStyle> & {
+    className?: string;
+    height?: number;
+    width?: number;
+  };
+
+const InputIcon = React.forwardRef<
+  React.ComponentRef<typeof UIInput.Icon>,
+  IInputIconProps
+>(function InputIcon({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  if (typeof size === 'number') {
+    return (
+      <UIInput.Icon
+        ref={ref}
+        {...props}
+        className={inputIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    (props.height !== undefined || props.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UIInput.Icon
+        ref={ref}
+        {...props}
+        className={inputIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UIInput.Icon
+      ref={ref}
+      {...props}
+      className={inputIconStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+type IInputSlotProps = React.ComponentProps<typeof UIInput.Slot> &
+  VariantProps<typeof inputSlotStyle> & { className?: string };
+
+const InputSlot = React.forwardRef<
+  React.ComponentRef<typeof UIInput.Slot>,
+  IInputSlotProps
+>(function InputSlot({ className, ...props }, ref) {
+  return (
+    <UIInput.Slot
+      ref={ref}
+      {...props}
+      className={inputSlotStyle({
+        class: className,
+      })}
+    />
+  );
+});
+
+type IInputFieldProps = React.ComponentProps<typeof UIInput.Input> &
+  VariantProps<typeof inputFieldStyle> & { className?: string };
+
+const InputField = React.forwardRef<
+  React.ComponentRef<typeof UIInput.Input>,
+  IInputFieldProps
+>(function InputField({ className, ...props }, ref) {
+  const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UIInput.Input
+      ref={ref}
+      {...props}
+      className={inputFieldStyle({
+        parentVariants: {
+          variant: parentVariant,
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+Input.displayName = 'Input';
+InputIcon.displayName = 'InputIcon';
+InputSlot.displayName = 'InputSlot';
+InputField.displayName = 'InputField';
+
+export { Input, InputField, InputIcon, InputSlot };

ArtisanConnect/components/ui/select/index.tsx

@@ -0,0 +1,277 @@
+'use client';
+
+import React from 'react';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { createSelect } from '@gluestack-ui/select';
+import { cssInterop } from 'nativewind';
+import {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+  ActionsheetScrollView,
+  ActionsheetVirtualizedList,
+  ActionsheetFlatList,
+  ActionsheetSectionList,
+  ActionsheetSectionHeaderText,
+} from './select-actionsheet';
+import { Pressable, View, TextInput } from 'react-native';
+
+const SelectTriggerWrapper = React.forwardRef<
+  React.ComponentRef<typeof Pressable>,
+  React.ComponentProps<typeof Pressable>
+>(function SelectTriggerWrapper({ ...props }, ref) {
+  return <Pressable {...props} ref={ref} />;
+});
+
+const selectIconStyle = tva({
+  base: 'text-background-500 fill-none',
+  parentVariants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'h-[18px] w-[18px]',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+const selectStyle = tva({
+  base: '',
+});
+
+const selectTriggerStyle = tva({
+  base: 'border border-background-300 rounded flex-row items-center overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300',
+  variants: {
+    size: {
+      xl: 'h-12',
+      lg: 'h-11',
+      md: 'h-10',
+      sm: 'h-9',
+    },
+    variant: {
+      underlined:
+        'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
+      outline:
+        'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700',
+      rounded:
+        'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700',
+    },
+  },
+});
+
+const selectInputStyle = tva({
+  base: 'py-auto px-3 placeholder:text-typography-500 web:w-full h-full text-typography-900 pointer-events-none web:outline-none ios:leading-[0px]',
+  parentVariants: {
+    size: {
+      xl: 'text-xl',
+      lg: 'text-lg',
+      md: 'text-base',
+      sm: 'text-sm',
+    },
+    variant: {
+      underlined: 'px-0',
+      outline: '',
+      rounded: 'px-4',
+    },
+  },
+});
+
+const UISelect = createSelect(
+  {
+    Root: View,
+    Trigger: withStyleContext(SelectTriggerWrapper),
+    Input: TextInput,
+    Icon: UIIcon,
+  },
+  {
+    Portal: Actionsheet,
+    Backdrop: ActionsheetBackdrop,
+    Content: ActionsheetContent,
+    DragIndicator: ActionsheetDragIndicator,
+    DragIndicatorWrapper: ActionsheetDragIndicatorWrapper,
+    Item: ActionsheetItem,
+    ItemText: ActionsheetItemText,
+    ScrollView: ActionsheetScrollView,
+    VirtualizedList: ActionsheetVirtualizedList,
+    FlatList: ActionsheetFlatList,
+    SectionList: ActionsheetSectionList,
+    SectionHeaderText: ActionsheetSectionHeaderText,
+  }
+);
+
+cssInterop(UISelect, { className: 'style' });
+cssInterop(UISelect.Input, {
+  className: { target: 'style', nativeStyleToProp: { textAlign: true } },
+});
+cssInterop(SelectTriggerWrapper, { className: 'style' });
+
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+type ISelectProps = VariantProps<typeof selectStyle> &
+  React.ComponentProps<typeof UISelect> & { className?: string };
+
+const Select = React.forwardRef<
+  React.ComponentRef<typeof UISelect>,
+  ISelectProps
+>(function Select({ className, ...props }, ref) {
+  return (
+    <UISelect
+      className={selectStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type ISelectTriggerProps = VariantProps<typeof selectTriggerStyle> &
+  React.ComponentProps<typeof UISelect.Trigger> & { className?: string };
+
+const SelectTrigger = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Trigger>,
+  ISelectTriggerProps
+>(function SelectTrigger(
+  { className, size = 'md', variant = 'outline', ...props },
+  ref
+) {
+  return (
+    <UISelect.Trigger
+      className={selectTriggerStyle({
+        class: className,
+        size,
+        variant,
+      })}
+      ref={ref}
+      context={{ size, variant }}
+      {...props}
+    />
+  );
+});
+
+type ISelectInputProps = VariantProps<typeof selectInputStyle> &
+  React.ComponentProps<typeof UISelect.Input> & { className?: string };
+
+const SelectInput = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Input>,
+  ISelectInputProps
+>(function SelectInput({ className, ...props }, ref) {
+  const { size: parentSize, variant: parentVariant } = useStyleContext();
+  return (
+    <UISelect.Input
+      className={selectInputStyle({
+        class: className,
+        parentVariants: {
+          size: parentSize,
+          variant: parentVariant,
+        },
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+type ISelectIcon = VariantProps<typeof selectIconStyle> &
+  React.ComponentProps<typeof UISelect.Icon> & { className?: string };
+
+const SelectIcon = React.forwardRef<
+  React.ComponentRef<typeof UISelect.Icon>,
+  ISelectIcon
+>(function SelectIcon({ className, size, ...props }, ref) {
+  const { size: parentSize } = useStyleContext();
+  if (typeof size === 'number') {
+    return (
+      <UISelect.Icon
+        ref={ref}
+        {...props}
+        className={selectIconStyle({ class: className })}
+        size={size}
+      />
+    );
+  } else if (
+    //@ts-expect-error : web only
+    (props?.height !== undefined || props?.width !== undefined) &&
+    size === undefined
+  ) {
+    return (
+      <UISelect.Icon
+        ref={ref}
+        {...props}
+        className={selectIconStyle({ class: className })}
+      />
+    );
+  }
+  return (
+    <UISelect.Icon
+      className={selectIconStyle({
+        class: className,
+        size,
+        parentVariants: {
+          size: parentSize,
+        },
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+Select.displayName = 'Select';
+SelectTrigger.displayName = 'SelectTrigger';
+SelectInput.displayName = 'SelectInput';
+SelectIcon.displayName = 'SelectIcon';
+
+// Actionsheet Components
+const SelectPortal = UISelect.Portal;
+const SelectBackdrop = UISelect.Backdrop;
+const SelectContent = UISelect.Content;
+const SelectDragIndicator = UISelect.DragIndicator;
+const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper;
+const SelectItem = UISelect.Item;
+const SelectScrollView = UISelect.ScrollView;
+const SelectVirtualizedList = UISelect.VirtualizedList;
+const SelectFlatList = UISelect.FlatList;
+const SelectSectionList = UISelect.SectionList;
+const SelectSectionHeaderText = UISelect.SectionHeaderText;
+
+export {
+  Select,
+  SelectTrigger,
+  SelectInput,
+  SelectIcon,
+  SelectPortal,
+  SelectBackdrop,
+  SelectContent,
+  SelectDragIndicator,
+  SelectDragIndicatorWrapper,
+  SelectItem,
+  SelectScrollView,
+  SelectVirtualizedList,
+  SelectFlatList,
+  SelectSectionList,
+  SelectSectionHeaderText,
+};

ArtisanConnect/components/ui/select/select-actionsheet.tsx

@@ -0,0 +1,562 @@
+'use client';
+
+import { H4 } from '@expo/html-elements';
+import { createActionsheet } from '@gluestack-ui/actionsheet';
+import {
+  Pressable,
+  View,
+  Text,
+  ScrollView,
+  VirtualizedList,
+  FlatList,
+  SectionList,
+  ViewStyle,
+} from 'react-native';
+import { PrimitiveIcon, UIIcon } from '@gluestack-ui/icon';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext';
+import { cssInterop } from 'nativewind';
+import {
+  Motion,
+  AnimatePresence,
+  createMotionAnimatedComponent,
+  MotionComponentProps,
+} from '@legendapp/motion';
+
+import React from 'react';
+
+type IAnimatedPressableProps = React.ComponentProps<typeof Pressable> &
+  MotionComponentProps<typeof Pressable, ViewStyle, unknown, unknown, unknown>;
+
+const AnimatedPressable = createMotionAnimatedComponent(
+  Pressable
+) as React.ComponentType<IAnimatedPressableProps>;
+
+type IMotionViewProps = React.ComponentProps<typeof View> &
+  MotionComponentProps<typeof View, ViewStyle, unknown, unknown, unknown>;
+
+const MotionView = Motion.View as React.ComponentType<IMotionViewProps>;
+
+export const UIActionsheet = createActionsheet({
+  Root: View,
+  Content: withStyleContext(MotionView),
+  Item: withStyleContext(Pressable),
+  ItemText: Text,
+  DragIndicator: View,
+  IndicatorWrapper: View,
+  Backdrop: AnimatedPressable,
+  ScrollView: ScrollView,
+  VirtualizedList: VirtualizedList,
+  FlatList: FlatList,
+  SectionList: SectionList,
+  SectionHeaderText: H4,
+  Icon: UIIcon,
+  AnimatePresence: AnimatePresence,
+});
+
+cssInterop(UIActionsheet, { className: 'style' });
+cssInterop(UIActionsheet.Content, { className: 'style' });
+cssInterop(UIActionsheet.Item, { className: 'style' });
+cssInterop(UIActionsheet.ItemText, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicator, { className: 'style' });
+cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' });
+cssInterop(UIActionsheet.Backdrop, { className: 'style' });
+cssInterop(UIActionsheet.ScrollView, {
+  className: 'style',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.VirtualizedList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.FlatList, {
+  className: 'style',
+  ListFooterComponentClassName: 'ListFooterComponentStyle',
+  ListHeaderComponentClassName: 'ListHeaderComponentStyle',
+  columnWrapperClassName: 'columnWrapperStyle',
+  contentContainerClassName: 'contentContainerStyle',
+  indicatorClassName: 'indicatorStyle',
+});
+cssInterop(UIActionsheet.SectionList, { className: 'style' });
+cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' });
+cssInterop(PrimitiveIcon, {
+  className: {
+    target: 'style',
+    nativeStyleToProp: {
+      height: true,
+      width: true,
+      fill: true,
+      color: 'classNameColor',
+      stroke: true,
+    },
+  },
+});
+
+const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' });
+
+const actionsheetContentStyle = tva({
+  base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg',
+});
+
+const actionsheetItemStyle = tva({
+  base: 'w-full flex-row items-center p-3 rounded-sm data-[disabled=true]:opacity-40 data-[disabled=true]:web:pointer-events-auto data-[disabled=true]:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 data-[focus=true]:bg-background-100 web:data-[focus-visible=true]:bg-background-100 data-[checked=true]:bg-background-100',
+});
+
+const actionsheetItemTextStyle = tva({
+  base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '2xs': 'text-2xs',
+      'xs': 'text-xs',
+      'sm': 'text-sm',
+      'md': 'text-base',
+      'lg': 'text-lg',
+      'xl': 'text-xl',
+      '2xl': 'text-2xl',
+      '3xl': 'text-3xl',
+      '4xl': 'text-4xl',
+      '5xl': 'text-5xl',
+      '6xl': 'text-6xl',
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+});
+
+const actionsheetDragIndicatorStyle = tva({
+  base: 'w-16 h-1 bg-background-400 rounded-full',
+});
+
+const actionsheetDragIndicatorWrapperStyle = tva({
+  base: 'w-full py-1 items-center',
+});
+
+const actionsheetBackdropStyle = tva({
+  base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto',
+});
+
+const actionsheetScrollViewStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetVirtualizedListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetFlatListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionListStyle = tva({
+  base: 'w-full h-auto',
+});
+
+const actionsheetSectionHeaderTextStyle = tva({
+  base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase',
+  variants: {
+    isTruncated: {
+      true: '',
+    },
+    bold: {
+      true: 'font-bold',
+    },
+    underline: {
+      true: 'underline',
+    },
+    strikeThrough: {
+      true: 'line-through',
+    },
+    size: {
+      '5xl': 'text-5xl',
+      '4xl': 'text-4xl',
+      '3xl': 'text-3xl',
+      '2xl': 'text-2xl',
+      'xl': 'text-xl',
+      'lg': 'text-lg',
+      'md': 'text-base',
+      'sm': 'text-sm',
+      'xs': 'text-xs',
+    },
+
+    sub: {
+      true: 'text-xs',
+    },
+    italic: {
+      true: 'italic',
+    },
+    highlight: {
+      true: 'bg-yellow500',
+    },
+  },
+  defaultVariants: {
+    size: 'xs',
+  },
+});
+
+const actionsheetIconStyle = tva({
+  base: 'text-typography-900',
+  variants: {
+    size: {
+      '2xs': 'h-3 w-3',
+      'xs': 'h-3.5 w-3.5',
+      'sm': 'h-4 w-4',
+      'md': 'w-4 h-4',
+      'lg': 'h-5 w-5',
+      'xl': 'h-6 w-6',
+    },
+  },
+});
+
+type IActionsheetProps = VariantProps<typeof actionsheetStyle> &
+  React.ComponentProps<typeof UIActionsheet> & { className?: string };
+
+type IActionsheetContentProps = VariantProps<typeof actionsheetContentStyle> &
+  React.ComponentProps<typeof UIActionsheet.Content> & { className?: string };
+
+type IActionsheetItemProps = VariantProps<typeof actionsheetItemStyle> &
+  React.ComponentProps<typeof UIActionsheet.Item> & { className?: string };
+
+type IActionsheetItemTextProps = VariantProps<typeof actionsheetItemTextStyle> &
+  React.ComponentProps<typeof UIActionsheet.ItemText> & { className?: string };
+
+type IActionsheetDragIndicatorProps = VariantProps<
+  typeof actionsheetDragIndicatorStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.DragIndicator> & {
+    className?: string;
+  };
+
+type IActionsheetDragIndicatorWrapperProps = VariantProps<
+  typeof actionsheetDragIndicatorWrapperStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.DragIndicatorWrapper> & {
+    className?: string;
+  };
+
+type IActionsheetBackdropProps = VariantProps<typeof actionsheetBackdropStyle> &
+  React.ComponentProps<typeof UIActionsheet.Backdrop> & {
+    className?: string;
+  };
+
+type IActionsheetScrollViewProps = VariantProps<
+  typeof actionsheetScrollViewStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.ScrollView> & {
+    className?: string;
+  };
+
+type IActionsheetVirtualizedListProps = VariantProps<
+  typeof actionsheetVirtualizedListStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.VirtualizedList> & {
+    className?: string;
+  };
+
+type IActionsheetFlatListProps = VariantProps<typeof actionsheetFlatListStyle> &
+  React.ComponentProps<typeof UIActionsheet.FlatList> & {
+    className?: string;
+  };
+
+type IActionsheetSectionListProps = VariantProps<
+  typeof actionsheetSectionListStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.SectionList> & {
+    className?: string;
+  };
+
+type IActionsheetSectionHeaderTextProps = VariantProps<
+  typeof actionsheetSectionHeaderTextStyle
+> &
+  React.ComponentProps<typeof UIActionsheet.SectionHeaderText> & {
+    className?: string;
+  };
+
+type IActionsheetIconProps = VariantProps<typeof actionsheetIconStyle> &
+  React.ComponentProps<typeof UIActionsheet.Icon> & {
+    className?: string;
+    as?: React.ElementType;
+  };
+
+const Actionsheet = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet>,
+  IActionsheetProps
+>(function Actionsheet({ className, ...props }, ref) {
+  return (
+    <UIActionsheet
+      className={actionsheetStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetContent = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Content>,
+  IActionsheetContentProps & { className?: string }
+>(function ActionsheetContent({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Content
+      className={actionsheetContentStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItem = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Item>,
+  IActionsheetItemProps
+>(function ActionsheetItem({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Item
+      className={actionsheetItemStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetItemText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ItemText>,
+  IActionsheetItemTextProps
+>(function ActionsheetItemText(
+  { className, isTruncated, bold, underline, strikeThrough, size, ...props },
+  ref
+) {
+  return (
+    <UIActionsheet.ItemText
+      className={actionsheetItemTextStyle({
+        class: className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicator = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicator>,
+  IActionsheetDragIndicatorProps
+>(function ActionsheetDragIndicator({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicator
+      className={actionsheetDragIndicatorStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetDragIndicatorWrapper = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.DragIndicatorWrapper>,
+  IActionsheetDragIndicatorWrapperProps
+>(function ActionsheetDragIndicatorWrapper({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.DragIndicatorWrapper
+      className={actionsheetDragIndicatorWrapperStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetBackdrop = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Backdrop>,
+  IActionsheetBackdropProps
+>(function ActionsheetBackdrop({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.Backdrop
+      initial={{
+        opacity: 0,
+      }}
+      animate={{
+        opacity: 0.5,
+      }}
+      exit={{
+        opacity: 0,
+      }}
+      {...props}
+      className={actionsheetBackdropStyle({
+        class: className,
+      })}
+      ref={ref}
+    />
+  );
+});
+
+const ActionsheetScrollView = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.ScrollView>,
+  IActionsheetScrollViewProps
+>(function ActionsheetScrollView({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.ScrollView
+      className={actionsheetScrollViewStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetVirtualizedList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.VirtualizedList>,
+  IActionsheetVirtualizedListProps
+>(function ActionsheetVirtualizedList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.VirtualizedList
+      className={actionsheetVirtualizedListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetFlatList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.FlatList>,
+  IActionsheetFlatListProps
+>(function ActionsheetFlatList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.FlatList
+      className={actionsheetFlatListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionList = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionList>,
+  IActionsheetSectionListProps
+>(function ActionsheetSectionList({ className, ...props }, ref) {
+  return (
+    <UIActionsheet.SectionList
+      className={actionsheetSectionListStyle({
+        class: className,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetSectionHeaderText = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.SectionHeaderText>,
+  IActionsheetSectionHeaderTextProps
+>(function ActionsheetSectionHeaderText(
+  {
+    className,
+    isTruncated,
+    bold,
+    underline,
+    strikeThrough,
+    size,
+    sub,
+    italic,
+    highlight,
+    ...props
+  },
+  ref
+) {
+  return (
+    <UIActionsheet.SectionHeaderText
+      className={actionsheetSectionHeaderTextStyle({
+        class: className,
+        isTruncated,
+        bold,
+        underline,
+        strikeThrough,
+        size,
+        sub,
+        italic,
+        highlight,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+const ActionsheetIcon = React.forwardRef<
+  React.ComponentRef<typeof UIActionsheet.Icon>,
+  IActionsheetIconProps
+>(function ActionsheetIcon(
+  { className, as: AsComp, size = 'sm', ...props },
+  ref
+) {
+  if (AsComp) {
+    return (
+      <AsComp
+        className={actionsheetIconStyle({
+          class: className,
+          size,
+        })}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+  return (
+    <UIActionsheet.Icon
+      className={actionsheetIconStyle({
+        class: className,
+        size,
+      })}
+      ref={ref}
+      {...props}
+    />
+  );
+});
+
+export {
+  Actionsheet,
+  ActionsheetContent,
+  ActionsheetItem,
+  ActionsheetItemText,
+  ActionsheetDragIndicator,
+  ActionsheetDragIndicatorWrapper,
+  ActionsheetBackdrop,
+  ActionsheetScrollView,
+  ActionsheetVirtualizedList,
+  ActionsheetFlatList,
+  ActionsheetSectionList,
+  ActionsheetSectionHeaderText,
+  ActionsheetIcon,
+};

ArtisanConnect/components/ui/textarea/index.tsx

@@ -0,0 +1,93 @@
+'use client';
+import React from 'react';
+import { createTextarea } from '@gluestack-ui/textarea';
+import { View, TextInput } from 'react-native';
+import { tva } from '@gluestack-ui/nativewind-utils/tva';
+import {
+  withStyleContext,
+  useStyleContext,
+} from '@gluestack-ui/nativewind-utils/withStyleContext';
+import type { VariantProps } from '@gluestack-ui/nativewind-utils';
+
+const SCOPE = 'TEXTAREA';
+const UITextarea = createTextarea({
+  Root: withStyleContext(View, SCOPE),
+  Input: TextInput,
+});
+
+const textareaStyle = tva({
+  base: 'w-full h-[100px] border border-background-300 rounded data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:data-[hover=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:bg-background-50 data-[disabled=true]:data-[hover=true]:border-background-300',
+
+  variants: {
+    variant: {
+      default:
+        'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-indicator-primary data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-indicator-error data-[invalid=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:border-primary-700 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[focus=true]:data-[hover=true]:web:ring-indicator-primary data-[invalid=true]:data-[disabled=true]:data-[hover=true]:border-error-700 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-1 data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-inset data-[invalid=true]:data-[disabled=true]:data-[hover=true]:web:ring-indicator-error ',
+    },
+    size: {
+      sm: '',
+      md: '',
+      lg: '',
+      xl: '',
+    },
+  },
+});
+
+const textareaInputStyle = tva({
+  base: 'p-2 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed',
+  parentVariants: {
+    size: {
+      sm: 'text-sm',
+      md: 'text-base',
+      lg: 'text-lg',
+      xl: 'text-xl',
+    },
+  },
+});
+
+type ITextareaProps = React.ComponentProps<typeof UITextarea> &
+  VariantProps<typeof textareaStyle>;
+
+const Textarea = React.forwardRef<
+  React.ComponentRef<typeof UITextarea>,
+  ITextareaProps
+>(function Textarea(
+  { className, variant = 'default', size = 'md', ...props },
+  ref
+) {
+  return (
+    <UITextarea
+      ref={ref}
+      {...props}
+      className={textareaStyle({ variant, class: className })}
+      context={{ size }}
+    />
+  );
+});
+
+type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> &
+  VariantProps<typeof textareaInputStyle>;
+
+const TextareaInput = React.forwardRef<
+  React.ComponentRef<typeof UITextarea.Input>,
+  ITextareaInputProps
+>(function TextareaInput({ className, ...props }, ref) {
+  const { size: parentSize } = useStyleContext(SCOPE);
+
+  return (
+    <UITextarea.Input
+      ref={ref}
+      {...props}
+      className={textareaInputStyle({
+        parentVariants: {
+          size: parentSize,
+        },
+        class: className,
+      })}
+    />
+  );
+});
+
+Textarea.displayName = 'Textarea';
+TextareaInput.displayName = 'TextareaInput';
+
+export { Textarea, TextareaInput };

ArtisanConnect/eas.json

@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 16.8.0",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}

ArtisanConnect/package.json

@@ -11,36 +11,58 @@
   "dependencies": {
     "@expo/html-elements": "^0.4.2",
     "@expo/vector-icons": "^14.1.0",
+    "@gluestack-style/react": "^1.0.57",
+    "@gluestack-ui/actionsheet": "^0.2.53",
     "@gluestack-ui/button": "^1.0.14",
+    "@gluestack-ui/divider": "^0.1.10",
+    "@gluestack-ui/form-control": "^0.1.19",
+    "@gluestack-ui/hstack": "^0.1.17",
     "@gluestack-ui/icon": "^0.1.27",
     "@gluestack-ui/image": "^0.1.17",
+    "@gluestack-ui/input": "^0.1.38",
     "@gluestack-ui/nativewind-utils": "^1.0.26",
     "@gluestack-ui/overlay": "^0.1.22",
+    "@gluestack-ui/select": "^0.1.31",
+    "@gluestack-ui/textarea": "^0.1.25",
+    "@gluestack-ui/themed": "^1.1.73",
     "@gluestack-ui/toast": "^1.0.9",
+    "@legendapp/motion": "^2.4.0",
+    "@react-native-async-storage/async-storage": "2.1.2",
+    "@react-native-community/cli-link-assets": "^18.0.0",
+    "@react-navigation/drawer": "^7.3.11",
     "@tanstack/react-query": "^5.74.4",
-    "axios": "^1.8.4",
+    "axios": "^1.9.0",
     "babel-plugin-module-resolver": "^5.0.2",
-    "expo": "~52.0.46",
-    "expo-constants": "~17.0.8",
-    "expo-linking": "~7.0.5",
-    "expo-router": "~4.0.20",
-    "expo-status-bar": "~2.0.1",
+    "expo": "^53.0.0",
+    "expo-auth-session": "~6.1.5",
+    "expo-camera": "~16.1.6",
+    "expo-constants": "~17.1.6",
+    "expo-image-picker": "~16.1.4",
+    "expo-linking": "~7.1.4",
+    "expo-router": "~5.0.5",
+    "expo-status-bar": "~2.2.3",
+    "expo-web-browser": "~14.1.6",
+    "form-data": "^4.0.2",
+    "fs": "^0.0.1-security",
+    "lucide-react-native": "^0.511.0",
     "nativewind": "^4.1.23",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "react-native": "0.76.9",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-native": "0.79.2",
     "react-native-css-interop": "^0.1.22",
-    "react-native-reanimated": "^3.17.4",
-    "react-native-safe-area-context": "^5.4.0",
-    "react-native-screens": "~4.4.0",
-    "react-native-svg": "^15.2.0",
-    "react-native-web": "~0.19.13",
+    "react-native-gesture-handler": "~2.24.0",
+    "react-native-reanimated": "~3.17.4",
+    "react-native-safe-area-context": "5.4.0",
+    "react-native-screens": "~4.11.1",
+    "react-native-svg": "15.11.2",
+    "react-native-web": "~0.20.0",
     "tailwindcss": "^3.4.17",
-    "zustand": "^5.0.3"
+    "zustand": "^5.0.3",
+    "expo-crypto": "~14.1.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
-    "@types/react": "~18.3.12",
+    "@types/react": "~19.0.10",
     "jscodeshift": "^0.15.2"
   },
   "private": true

ArtisanConnect/store/authStore.jsx

@@ -0,0 +1,105 @@
+import {create} from "zustand";
+import {createJSONStorage, persist} from "zustand/middleware";
+import AsyncStorage from "@react-native-async-storage/async-storage";
+import axios from "axios";
+
+const API_URL = "https://hopp.zikor.pl/api/v1";
+
+export const useAuthStore = create(
+    persist(
+        (set) => ({
+            user_id: null,
+            token: null,
+            isLoading: false,
+            error: null,
+
+            signIn: async (email, password) => {
+                set({isLoading: true, error: null});
+                try {
+                    const response = await axios.post(`${API_URL}/auth/login`, {
+                        email,
+                        password
+                    });
+
+                    const user_id = response.data.user_id;
+                    const token = response.data.token;
+                    set({user_id: user_id, token: token, isLoading: false});
+
+                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+                } catch (error) {
+                    set({error: error.response?.data?.message || error.message, isLoading: false});
+                    throw error;
+                }
+            },
+
+            signUp: async (userData) => {
+                set({isLoading: true, error: null});
+                try {
+                    const response = await axios.post(`${API_URL}/auth/register`, userData, {
+                        headers: {'Content-Type': 'application/json'}
+                    });
+
+                    const user_id = response.data.user_id;
+                    const token = response.data.token;
+                    set({user_id: user_id, token: token, isLoading: false});
+
+                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+                } catch (error) {
+                    set({error: error.response?.data?.message || error.message, isLoading: false});
+                    throw error;
+                }
+            },
+
+            signInWithGoogle: async (googleToken) => {
+                set({isLoading: true, error: null});
+                try {
+                    const response = await axios.post(`${API_URL}/auth/google`, {googleToken: googleToken}, {
+                        headers: {'Content-Type': 'application/json'}
+                    });
+                    const user_id = response.data.user_id;
+                    const token = response.data.token;
+                    set({user_id: user_id, token: token, isLoading: false});
+
+                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+                } catch (error) {
+                    set({error: error.response?.data?.message || error.message, isLoading: false});
+                    throw error;
+                }
+            },
+
+            signOut: async () => {
+                try {
+                    await axios.post(`${API_URL}/auth/logout`);
+                } catch (error) {
+                    console.error("Logout error:", error);
+                } finally {
+                    delete axios.defaults.headers.common["Authorization"];
+                    set({user_id: null, token: null});
+                }
+            },
+
+            checkAuth: async () => {
+                const {token} = useAuthStore.getState();
+                if (!token) return null;
+
+                set({isLoading: true});
+                try {
+                    axios.defaults.headers.common["Authorization"] = `Bearer ${token}`;
+
+                    const response = await axios.get(`${API_URL}/auth/me`);
+
+                    set({user_id: response.data, isLoading: false});
+                    return response.data;
+                } catch (error) {
+                    delete axios.defaults.headers.common["Authorization"];
+                    set({user_id: null, token: null, isLoading: false});
+                    return null;
+                }
+            },
+        }),
+        {
+            name: "auth-storage",
+            storage: createJSONStorage(() => AsyncStorage),
+        }
+    )
+);

ArtisanConnect/store/noticesStore.jsx

@@ -0,0 +1,41 @@
+import {create} from "zustand";
+import * as api from "@/api/notices";
+
+export const useNoticesStore = create((set, get) => ({
+    notices: [],
+    fetchNotices: async () => {
+        set({error: null});
+        try {
+            const data = await api.listNotices();
+            set({notices: data});
+        } catch (error) {
+            set(error);
+        }
+    },
+
+    addNotice: async (notice) => {
+        try {
+            const newNotice = await api.createNotice(notice);
+            set((state) => ({
+                notices: [...state.notices, newNotice],
+            }));
+            return newNotice;
+        } catch (error) {
+            set({ error });
+            return null;
+        }
+    },
+
+    getNoticeById: (noticeId) => {
+        return get().notices.find((notice) => String(notice.noticeId) === String(noticeId));
+    },
+
+    getAllImagesByNoticeId: async (noticeId) => {
+        try {
+            return await api.getAllImagesByNoticeId(noticeId);
+        } catch (error) {
+            console.error("Error while getting images:", error);
+            return ["https://http.cat/404.jpg"];
+        }
+    }
+}));

ArtisanConnect/store/wishlistStore.jsx

@@ -9,7 +9,7 @@ export const useWishlist = create((set) => ({
   removeNoticeFromWishlist: (noticeId) =>
     set((state) => ({
       wishlistNotices: state.wishlistNotices.filter(
-        (item) => item.noticeId != noticeId
+        (item) => item.noticeId !== noticeId
       ),
     })),
 }));