diff --git a/ArtisanConnect/app/+not-found.tsx b/ArtisanConnect/app/+not-found.tsx new file mode 100644 index 0000000..963b04f --- /dev/null +++ b/ArtisanConnect/app/+not-found.tsx @@ -0,0 +1,32 @@ +import { Link, Stack } from 'expo-router'; +import { StyleSheet } from 'react-native'; + +import { ThemedText } from '@/components/ThemedText'; +import { ThemedView } from '@/components/ThemedView'; + +export default function NotFoundScreen() { + return ( + <> + + + This screen doesn't exist. + + Go to home screen! + + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + padding: 20, + }, + link: { + marginTop: 15, + paddingVertical: 15, + }, +}); diff --git a/ArtisanConnect/app/_layout.tsx b/ArtisanConnect/app/_layout.tsx index d2a8b0b..1d5185c 100644 --- a/ArtisanConnect/app/_layout.tsx +++ b/ArtisanConnect/app/_layout.tsx @@ -1,5 +1,17 @@ import { Stack } from "expo-router"; +import { Appearance } from "react-native"; +import {Colors} from "@/constants/Colors" export default function RootLayout() { - return ; + const colorScheme = Appearance.getColorScheme(); + + const theme = colorScheme === 'dark' ? Colors.dark : + Colors.light; + return + + + +; } diff --git a/ArtisanConnect/app/index.jsx b/ArtisanConnect/app/index.jsx new file mode 100644 index 0000000..fabc90b --- /dev/null +++ b/ArtisanConnect/app/index.jsx @@ -0,0 +1,14 @@ +import { Text, View, Pressable } from "react-native"; +import { Link } from "expo-router"; +export default function Index() { + return ( + + + + + Notices + + + + ); +} diff --git a/ArtisanConnect/app/index.tsx b/ArtisanConnect/app/index.tsx deleted file mode 100644 index 866b635..0000000 --- a/ArtisanConnect/app/index.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Text, View } from "react-native"; - -export default function Index() { - return ( - - Edit app/index.tsx to edit this screen. - - ); -} diff --git a/ArtisanConnect/app/notices.jsx b/ArtisanConnect/app/notices.jsx new file mode 100644 index 0000000..89b9f4d --- /dev/null +++ b/ArtisanConnect/app/notices.jsx @@ -0,0 +1,27 @@ +import { Appearance, StyleSheet, Platform, + SafeAreaView,FlatList, ScrollView, View, Text } from "react-native"; + +import { Colors } from "@/constants/Colors"; +import { MENU_ITEMS } from "@/constants/NoticeItems"; + +export default function MenuScreen(){ + const colorScheme = Appearance.getColorScheme(); + + const theme = colorScheme === 'dark' ? Colors.dark : Colors.light; + + const Container = Platform.OS === 'web' ? ScrollView : SafeAreaView; + + return( + + item.id.toString()} + renderItem={({ item }) => ( + + {item.title} + + )} + > + + ) +} \ No newline at end of file diff --git a/ArtisanConnect/components/Collapsible.tsx b/ArtisanConnect/components/Collapsible.tsx new file mode 100644 index 0000000..55bff2f --- /dev/null +++ b/ArtisanConnect/components/Collapsible.tsx @@ -0,0 +1,45 @@ +import { PropsWithChildren, useState } from 'react'; +import { StyleSheet, TouchableOpacity } from 'react-native'; + +import { ThemedText } from '@/components/ThemedText'; +import { ThemedView } from '@/components/ThemedView'; +import { IconSymbol } from '@/components/ui/IconSymbol'; +import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +export function Collapsible({ children, title }: PropsWithChildren & { title: string }) { + const [isOpen, setIsOpen] = useState(false); + const theme = useColorScheme() ?? 'light'; + + return ( + + setIsOpen((value) => !value)} + activeOpacity={0.8}> + + + {title} + + {isOpen && {children}} + + ); +} + +const styles = StyleSheet.create({ + heading: { + flexDirection: 'row', + alignItems: 'center', + gap: 6, + }, + content: { + marginTop: 6, + marginLeft: 24, + }, +}); diff --git a/ArtisanConnect/components/ExternalLink.tsx b/ArtisanConnect/components/ExternalLink.tsx new file mode 100644 index 0000000..8f05675 --- /dev/null +++ b/ArtisanConnect/components/ExternalLink.tsx @@ -0,0 +1,24 @@ +import { Link } from 'expo-router'; +import { openBrowserAsync } from 'expo-web-browser'; +import { type ComponentProps } from 'react'; +import { Platform } from 'react-native'; + +type Props = Omit, 'href'> & { href: string }; + +export function ExternalLink({ href, ...rest }: Props) { + return ( + { + if (Platform.OS !== 'web') { + // Prevent the default behavior of linking to the default browser on native. + event.preventDefault(); + // Open the link in an in-app browser. + await openBrowserAsync(href); + } + }} + /> + ); +} diff --git a/ArtisanConnect/components/HapticTab.tsx b/ArtisanConnect/components/HapticTab.tsx new file mode 100644 index 0000000..7f3981c --- /dev/null +++ b/ArtisanConnect/components/HapticTab.tsx @@ -0,0 +1,18 @@ +import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs'; +import { PlatformPressable } from '@react-navigation/elements'; +import * as Haptics from 'expo-haptics'; + +export function HapticTab(props: BottomTabBarButtonProps) { + return ( + { + if (process.env.EXPO_OS === 'ios') { + // Add a soft haptic feedback when pressing down on the tabs. + Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light); + } + props.onPressIn?.(ev); + }} + /> + ); +} diff --git a/ArtisanConnect/components/HelloWave.tsx b/ArtisanConnect/components/HelloWave.tsx new file mode 100644 index 0000000..9b4bc31 --- /dev/null +++ b/ArtisanConnect/components/HelloWave.tsx @@ -0,0 +1,40 @@ +import { useEffect } from 'react'; +import { StyleSheet } from 'react-native'; +import Animated, { + useSharedValue, + useAnimatedStyle, + withTiming, + withRepeat, + withSequence, +} from 'react-native-reanimated'; + +import { ThemedText } from '@/components/ThemedText'; + +export function HelloWave() { + const rotationAnimation = useSharedValue(0); + + useEffect(() => { + rotationAnimation.value = withRepeat( + withSequence(withTiming(25, { duration: 150 }), withTiming(0, { duration: 150 })), + 4 // Run the animation 4 times + ); + }, []); + + const animatedStyle = useAnimatedStyle(() => ({ + transform: [{ rotate: `${rotationAnimation.value}deg` }], + })); + + return ( + + šŸ‘‹ + + ); +} + +const styles = StyleSheet.create({ + text: { + fontSize: 28, + lineHeight: 32, + marginTop: -6, + }, +}); diff --git a/ArtisanConnect/components/ParallaxScrollView.tsx b/ArtisanConnect/components/ParallaxScrollView.tsx new file mode 100644 index 0000000..5df1d75 --- /dev/null +++ b/ArtisanConnect/components/ParallaxScrollView.tsx @@ -0,0 +1,82 @@ +import type { PropsWithChildren, ReactElement } from 'react'; +import { StyleSheet } from 'react-native'; +import Animated, { + interpolate, + useAnimatedRef, + useAnimatedStyle, + useScrollViewOffset, +} from 'react-native-reanimated'; + +import { ThemedView } from '@/components/ThemedView'; +import { useBottomTabOverflow } from '@/components/ui/TabBarBackground'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +const HEADER_HEIGHT = 250; + +type Props = PropsWithChildren<{ + headerImage: ReactElement; + headerBackgroundColor: { dark: string; light: string }; +}>; + +export default function ParallaxScrollView({ + children, + headerImage, + headerBackgroundColor, +}: Props) { + const colorScheme = useColorScheme() ?? 'light'; + const scrollRef = useAnimatedRef(); + const scrollOffset = useScrollViewOffset(scrollRef); + const bottom = useBottomTabOverflow(); + const headerAnimatedStyle = useAnimatedStyle(() => { + return { + transform: [ + { + translateY: interpolate( + scrollOffset.value, + [-HEADER_HEIGHT, 0, HEADER_HEIGHT], + [-HEADER_HEIGHT / 2, 0, HEADER_HEIGHT * 0.75] + ), + }, + { + scale: interpolate(scrollOffset.value, [-HEADER_HEIGHT, 0, HEADER_HEIGHT], [2, 1, 1]), + }, + ], + }; + }); + + return ( + + + + {headerImage} + + {children} + + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + }, + header: { + height: HEADER_HEIGHT, + overflow: 'hidden', + }, + content: { + flex: 1, + padding: 32, + gap: 16, + overflow: 'hidden', + }, +}); diff --git a/ArtisanConnect/components/ThemedText.tsx b/ArtisanConnect/components/ThemedText.tsx new file mode 100644 index 0000000..c0e1a78 --- /dev/null +++ b/ArtisanConnect/components/ThemedText.tsx @@ -0,0 +1,60 @@ +import { Text, type TextProps, StyleSheet } from 'react-native'; + +import { useThemeColor } from '@/hooks/useThemeColor'; + +export type ThemedTextProps = TextProps & { + lightColor?: string; + darkColor?: string; + type?: 'default' | 'title' | 'defaultSemiBold' | 'subtitle' | 'link'; +}; + +export function ThemedText({ + style, + lightColor, + darkColor, + type = 'default', + ...rest +}: ThemedTextProps) { + const color = useThemeColor({ light: lightColor, dark: darkColor }, 'text'); + + return ( + + ); +} + +const styles = StyleSheet.create({ + default: { + fontSize: 16, + lineHeight: 24, + }, + defaultSemiBold: { + fontSize: 16, + lineHeight: 24, + fontWeight: '600', + }, + title: { + fontSize: 32, + fontWeight: 'bold', + lineHeight: 32, + }, + subtitle: { + fontSize: 20, + fontWeight: 'bold', + }, + link: { + lineHeight: 30, + fontSize: 16, + color: '#0a7ea4', + }, +}); diff --git a/ArtisanConnect/components/ThemedView.tsx b/ArtisanConnect/components/ThemedView.tsx new file mode 100644 index 0000000..4d2cb09 --- /dev/null +++ b/ArtisanConnect/components/ThemedView.tsx @@ -0,0 +1,14 @@ +import { View, type ViewProps } from 'react-native'; + +import { useThemeColor } from '@/hooks/useThemeColor'; + +export type ThemedViewProps = ViewProps & { + lightColor?: string; + darkColor?: string; +}; + +export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) { + const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background'); + + return ; +} diff --git a/ArtisanConnect/components/__tests__/ThemedText-test.tsx b/ArtisanConnect/components/__tests__/ThemedText-test.tsx new file mode 100644 index 0000000..1ac3225 --- /dev/null +++ b/ArtisanConnect/components/__tests__/ThemedText-test.tsx @@ -0,0 +1,10 @@ +import * as React from 'react'; +import renderer from 'react-test-renderer'; + +import { ThemedText } from '../ThemedText'; + +it(`renders correctly`, () => { + const tree = renderer.create(Snapshot test!).toJSON(); + + expect(tree).toMatchSnapshot(); +}); diff --git a/ArtisanConnect/components/__tests__/__snapshots__/ThemedText-test.tsx.snap b/ArtisanConnect/components/__tests__/__snapshots__/ThemedText-test.tsx.snap new file mode 100644 index 0000000..b68e53e --- /dev/null +++ b/ArtisanConnect/components/__tests__/__snapshots__/ThemedText-test.tsx.snap @@ -0,0 +1,24 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`renders correctly 1`] = ` + + Snapshot test! + +`; diff --git a/ArtisanConnect/components/ui/IconSymbol.ios.tsx b/ArtisanConnect/components/ui/IconSymbol.ios.tsx new file mode 100644 index 0000000..9177f4d --- /dev/null +++ b/ArtisanConnect/components/ui/IconSymbol.ios.tsx @@ -0,0 +1,32 @@ +import { SymbolView, SymbolViewProps, SymbolWeight } from 'expo-symbols'; +import { StyleProp, ViewStyle } from 'react-native'; + +export function IconSymbol({ + name, + size = 24, + color, + style, + weight = 'regular', +}: { + name: SymbolViewProps['name']; + size?: number; + color: string; + style?: StyleProp; + weight?: SymbolWeight; +}) { + return ( + + ); +} diff --git a/ArtisanConnect/components/ui/IconSymbol.tsx b/ArtisanConnect/components/ui/IconSymbol.tsx new file mode 100644 index 0000000..f1fabd4 --- /dev/null +++ b/ArtisanConnect/components/ui/IconSymbol.tsx @@ -0,0 +1,43 @@ +// This file is a fallback for using MaterialIcons on Android and web. + +import MaterialIcons from '@expo/vector-icons/MaterialIcons'; +import { SymbolWeight } from 'expo-symbols'; +import React from 'react'; +import { OpaqueColorValue, StyleProp, ViewStyle } from 'react-native'; + +// Add your SFSymbol to MaterialIcons mappings here. +const MAPPING = { + // See MaterialIcons here: https://icons.expo.fyi + // See SF Symbols in the SF Symbols app on Mac. + 'house.fill': 'home', + 'paperplane.fill': 'send', + 'chevron.left.forwardslash.chevron.right': 'code', + 'chevron.right': 'chevron-right', +} as Partial< + Record< + import('expo-symbols').SymbolViewProps['name'], + React.ComponentProps['name'] + > +>; + +export type IconSymbolName = keyof typeof MAPPING; + +/** + * An icon component that uses native SFSymbols on iOS, and MaterialIcons on Android and web. This ensures a consistent look across platforms, and optimal resource usage. + * + * Icon `name`s are based on SFSymbols and require manual mapping to MaterialIcons. + */ +export function IconSymbol({ + name, + size = 24, + color, + style, +}: { + name: IconSymbolName; + size?: number; + color: string | OpaqueColorValue; + style?: StyleProp; + weight?: SymbolWeight; +}) { + return ; +} diff --git a/ArtisanConnect/components/ui/TabBarBackground.ios.tsx b/ArtisanConnect/components/ui/TabBarBackground.ios.tsx new file mode 100644 index 0000000..6668e78 --- /dev/null +++ b/ArtisanConnect/components/ui/TabBarBackground.ios.tsx @@ -0,0 +1,22 @@ +import { useBottomTabBarHeight } from '@react-navigation/bottom-tabs'; +import { BlurView } from 'expo-blur'; +import { StyleSheet } from 'react-native'; +import { useSafeAreaInsets } from 'react-native-safe-area-context'; + +export default function BlurTabBarBackground() { + return ( + + ); +} + +export function useBottomTabOverflow() { + const tabHeight = useBottomTabBarHeight(); + const { bottom } = useSafeAreaInsets(); + return tabHeight - bottom; +} diff --git a/ArtisanConnect/components/ui/TabBarBackground.tsx b/ArtisanConnect/components/ui/TabBarBackground.tsx new file mode 100644 index 0000000..70d1c3c --- /dev/null +++ b/ArtisanConnect/components/ui/TabBarBackground.tsx @@ -0,0 +1,6 @@ +// This is a shim for web and Android where the tab bar is generally opaque. +export default undefined; + +export function useBottomTabOverflow() { + return 0; +} diff --git a/ArtisanConnect/constants/Colors.ts b/ArtisanConnect/constants/Colors.ts new file mode 100644 index 0000000..14e6784 --- /dev/null +++ b/ArtisanConnect/constants/Colors.ts @@ -0,0 +1,26 @@ +/** + * Below are the colors that are used in the app. The colors are defined in the light and dark mode. + * There are many other ways to style your app. For example, [Nativewind](https://www.nativewind.dev/), [Tamagui](https://tamagui.dev/), [unistyles](https://reactnativeunistyles.vercel.app), etc. + */ + +const tintColorLight = '#0a7ea4'; +const tintColorDark = '#fff'; + +export const Colors = { + light: { + text: '#11181C', + background: '#fff', + tint: tintColorLight, + icon: '#687076', + tabIconDefault: '#687076', + tabIconSelected: tintColorLight, + }, + dark: { + text: '#ECEDEE', + background: '#151718', + tint: tintColorDark, + icon: '#9BA1A6', + tabIconDefault: '#9BA1A6', + tabIconSelected: tintColorDark, + }, +}; diff --git a/ArtisanConnect/constants/NoticeItems.js b/ArtisanConnect/constants/NoticeItems.js new file mode 100644 index 0000000..7c6a5f2 --- /dev/null +++ b/ArtisanConnect/constants/NoticeItems.js @@ -0,0 +1,10 @@ +export const MENU_ITEMS = [ + { + "id" : 1, + "title": "Home", + }, + { + "id" : 2, + "title" : "Notices" + } +] \ No newline at end of file diff --git a/ArtisanConnect/hooks/useColorScheme.ts b/ArtisanConnect/hooks/useColorScheme.ts new file mode 100644 index 0000000..17e3c63 --- /dev/null +++ b/ArtisanConnect/hooks/useColorScheme.ts @@ -0,0 +1 @@ +export { useColorScheme } from 'react-native'; diff --git a/ArtisanConnect/hooks/useColorScheme.web.ts b/ArtisanConnect/hooks/useColorScheme.web.ts new file mode 100644 index 0000000..7eb1c1b --- /dev/null +++ b/ArtisanConnect/hooks/useColorScheme.web.ts @@ -0,0 +1,21 @@ +import { useEffect, useState } from 'react'; +import { useColorScheme as useRNColorScheme } from 'react-native'; + +/** + * To support static rendering, this value needs to be re-calculated on the client side for web + */ +export function useColorScheme() { + const [hasHydrated, setHasHydrated] = useState(false); + + useEffect(() => { + setHasHydrated(true); + }, []); + + const colorScheme = useRNColorScheme(); + + if (hasHydrated) { + return colorScheme; + } + + return 'light'; +} diff --git a/ArtisanConnect/hooks/useThemeColor.ts b/ArtisanConnect/hooks/useThemeColor.ts new file mode 100644 index 0000000..0608e73 --- /dev/null +++ b/ArtisanConnect/hooks/useThemeColor.ts @@ -0,0 +1,21 @@ +/** + * Learn more about light and dark modes: + * https://docs.expo.dev/guides/color-schemes/ + */ + +import { Colors } from '@/constants/Colors'; +import { useColorScheme } from '@/hooks/useColorScheme'; + +export function useThemeColor( + props: { light?: string; dark?: string }, + colorName: keyof typeof Colors.light & keyof typeof Colors.dark +) { + const theme = useColorScheme() ?? 'light'; + const colorFromProps = props[theme]; + + if (colorFromProps) { + return colorFromProps; + } else { + return Colors[theme][colorName]; + } +} diff --git a/ArtisanConnect/scripts/reset-project.js b/ArtisanConnect/scripts/reset-project.js new file mode 100644 index 0000000..51dff15 --- /dev/null +++ b/ArtisanConnect/scripts/reset-project.js @@ -0,0 +1,112 @@ +#!/usr/bin/env node + +/** + * This script is used to reset the project to a blank state. + * It deletes or moves the /app, /components, /hooks, /scripts, and /constants directories to /app-example based on user input and creates a new /app directory with an index.tsx and _layout.tsx file. + * You can remove the `reset-project` script from package.json and safely delete this file after running it. + */ + +const fs = require("fs"); +const path = require("path"); +const readline = require("readline"); + +const root = process.cwd(); +const oldDirs = ["app", "components", "hooks", "constants", "scripts"]; +const exampleDir = "app-example"; +const newAppDir = "app"; +const exampleDirPath = path.join(root, exampleDir); + +const indexContent = `import { Text, View } from "react-native"; + +export default function Index() { + return ( + + Edit app/index.tsx to edit this screen. + + ); +} +`; + +const layoutContent = `import { Stack } from "expo-router"; + +export default function RootLayout() { + return ; +} +`; + +const rl = readline.createInterface({ + input: process.stdin, + output: process.stdout, +}); + +const moveDirectories = async (userInput) => { + try { + if (userInput === "y") { + // Create the app-example directory + await fs.promises.mkdir(exampleDirPath, { recursive: true }); + console.log(`šŸ“ /${exampleDir} directory created.`); + } + + // Move old directories to new app-example directory or delete them + for (const dir of oldDirs) { + const oldDirPath = path.join(root, dir); + if (fs.existsSync(oldDirPath)) { + if (userInput === "y") { + const newDirPath = path.join(root, exampleDir, dir); + await fs.promises.rename(oldDirPath, newDirPath); + console.log(`āž”ļø /${dir} moved to /${exampleDir}/${dir}.`); + } else { + await fs.promises.rm(oldDirPath, { recursive: true, force: true }); + console.log(`āŒ /${dir} deleted.`); + } + } else { + console.log(`āž”ļø /${dir} does not exist, skipping.`); + } + } + + // Create new /app directory + const newAppDirPath = path.join(root, newAppDir); + await fs.promises.mkdir(newAppDirPath, { recursive: true }); + console.log("\nšŸ“ New /app directory created."); + + // Create index.tsx + const indexPath = path.join(newAppDirPath, "index.tsx"); + await fs.promises.writeFile(indexPath, indexContent); + console.log("šŸ“„ app/index.tsx created."); + + // Create _layout.tsx + const layoutPath = path.join(newAppDirPath, "_layout.tsx"); + await fs.promises.writeFile(layoutPath, layoutContent); + console.log("šŸ“„ app/_layout.tsx created."); + + console.log("\nāœ… Project reset complete. Next steps:"); + console.log( + `1. Run \`npx expo start\` to start a development server.\n2. Edit app/index.tsx to edit the main screen.${ + userInput === "y" + ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.` + : "" + }` + ); + } catch (error) { + console.error(`āŒ Error during script execution: ${error.message}`); + } +}; + +rl.question( + "Do you want to move existing files to /app-example instead of deleting them? (Y/n): ", + (answer) => { + const userInput = answer.trim().toLowerCase() || "y"; + if (userInput === "y" || userInput === "n") { + moveDirectories(userInput).finally(() => rl.close()); + } else { + console.log("āŒ Invalid input. Please enter 'Y' or 'N'."); + rl.close(); + } + } +); diff --git a/ArtisanConnect/tsconfig.json b/ArtisanConnect/tsconfig.json index 909e901..c85ac78 100644 --- a/ArtisanConnect/tsconfig.json +++ b/ArtisanConnect/tsconfig.json @@ -11,7 +11,9 @@ "include": [ "**/*.ts", "**/*.tsx", + "**/*.jsx", ".expo/types/**/*.ts", "expo-env.d.ts" + ] }