frontend: reorganize sample/initial components/folders
Pedro Lucas Porcellis porcellis@eletrotupi.com · 6 months ago
f09fe617432639e002945e9e663a4f8e354a39c5 Browse filesParents
9c4943cChanged files
13
Additions
+19
Deletions
-41
frontend/app.json
1 1
{
2 2
"expo": {
3 3
"name": "orbit",
4 4
"slug": "orbit",
5 5
"version": "1.0.0",
6 6
"orientation": "portrait",
7 7
"icon": "./assets/images/icon.png",
8 8
"scheme": "orbit",
9 9
"userInterfaceStyle": "automatic",
10 10
"newArchEnabled": true,
11 -
"ios": {
12 -
"supportsTablet": true
13 -
},
14 11
"android": {
15 12
"adaptiveIcon": {
16 13
"backgroundColor": "#E6F4FE",
17 14
"foregroundImage": "./assets/images/android-icon-foreground.png",
18 15
"backgroundImage": "./assets/images/android-icon-background.png",
19 16
"monochromeImage": "./assets/images/android-icon-monochrome.png"
20 17
},
21 18
"edgeToEdgeEnabled": true,
22 19
"predictiveBackGestureEnabled": false
23 -
},
24 -
"web": {
25 -
"output": "static",
26 -
"favicon": "./assets/images/favicon.png"
27 20
},
28 21
"plugins": [
29 22
"expo-router",
30 23
[
31 24
"expo-splash-screen",
44 37
"typedRoutes": true,
45 38
"reactCompiler": true
46 39
}
47 40
}
48 41
}
frontend/app/(tabs)/_layout.tsx
1 1
import { Tabs } from 'expo-router';
2 2
import React from 'react';
3 3
4 -
import { HapticTab } from '@/components/haptic-tab';
4 +
import { HapticTab } from '@/components/misc/haptic-tab';
5 5
import { IconSymbol } from '@/components/ui/icon-symbol';
6 6
import { Colors } from '@/constants/theme';
7 7
import { useColorScheme } from '@/hooks/use-color-scheme';
8 8
9 9
export default function TabLayout() {
31 31
}}
32 32
/>
33 33
</Tabs>
34 34
);
35 35
}
frontend/app/(tabs)/explore.tsx
1 1
import { Image } from 'expo-image';
2 2
import { Platform, StyleSheet } from 'react-native';
3 3
4 4
import { Collapsible } from '@/components/ui/collapsible';
5 -
import { ExternalLink } from '@/components/external-link';
6 -
import ParallaxScrollView from '@/components/parallax-scroll-view';
7 -
import { ThemedText } from '@/components/themed-text';
8 -
import { ThemedView } from '@/components/themed-view';
5 +
import { ExternalLink } from '@/components/misc/external-link';
6 +
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
7 +
import { ThemedText } from '@/components/misc/themed-text';
8 +
import { ThemedView } from '@/components/misc/themed-view';
9 9
import { IconSymbol } from '@/components/ui/icon-symbol';
10 10
import { Fonts } from '@/constants/theme';
11 11
12 12
export default function TabTwoScreen() {
13 13
return (
108 108
titleContainer: {
109 109
flexDirection: 'row',
110 110
gap: 8,
111 111
},
112 112
});
frontend/app/(tabs)/index.tsx
1 1
import { Image } from 'expo-image';
2 2
import { Platform, StyleSheet } from 'react-native';
3 3
4 4
import { HelloWave } from '@/components/hello-wave';
5 -
import ParallaxScrollView from '@/components/parallax-scroll-view';
6 -
import { ThemedText } from '@/components/themed-text';
7 -
import { ThemedView } from '@/components/themed-view';
5 +
import ParallaxScrollView from '@/components/misc/parallax-scroll-view';
6 +
import { ThemedText } from '@/components/misc/themed-text';
7 +
import { ThemedView } from '@/components/misc/themed-view';
8 8
import { Link } from 'expo-router';
9 9
10 10
export default function HomeScreen() {
11 11
return (
12 12
<ParallaxScrollView
94 94
bottom: 0,
95 95
left: 0,
96 96
position: 'absolute',
97 97
},
98 98
});
frontend/app/modal.tsx
1 1
import { Link } from 'expo-router';
2 2
import { StyleSheet } from 'react-native';
3 3
4 -
import { ThemedText } from '@/components/themed-text';
5 -
import { ThemedView } from '@/components/themed-view';
4 +
import { ThemedText } from '@/components/misc/themed-text';
5 +
import { ThemedView } from '@/components/misc/themed-view';
6 6
7 7
export default function ModalScreen() {
8 8
return (
9 9
<ThemedView style={styles.container}>
10 10
<ThemedText type="title">This is a modal</ThemedText>
25 25
link: {
26 26
marginTop: 15,
27 27
paddingVertical: 15,
28 28
},
29 29
});
frontend/components/external-link.tsx → frontend/components/misc/external-link.tsx
1 1
import { Href, Link } from 'expo-router';
2 2
import { openBrowserAsync, WebBrowserPresentationStyle } from 'expo-web-browser';
3 3
import { type ComponentProps } from 'react';
4 4
5 5
type Props = Omit<ComponentProps<typeof Link>, 'href'> & { href: Href & string };
21 21
}
22 22
}}
23 23
/>
24 24
);
25 25
}
frontend/components/haptic-tab.tsx → frontend/components/misc/haptic-tab.tsx
1 1
import { BottomTabBarButtonProps } from '@react-navigation/bottom-tabs';
2 2
import { PlatformPressable } from '@react-navigation/elements';
3 3
import * as Haptics from 'expo-haptics';
4 4
5 5
export function HapticTab(props: BottomTabBarButtonProps) {
14 14
props.onPressIn?.(ev);
15 15
}}
16 16
/>
17 17
);
18 18
}
frontend/components/parallax-scroll-view.tsx → frontend/components/misc/parallax-scroll-view.tsx
1 1
import type { PropsWithChildren, ReactElement } from 'react';
2 2
import { StyleSheet } from 'react-native';
3 3
import Animated, {
4 4
interpolate,
5 5
useAnimatedRef,
6 6
useAnimatedStyle,
7 7
useScrollOffset,
8 8
} from 'react-native-reanimated';
9 9
10 -
import { ThemedView } from '@/components/themed-view';
10 +
import { ThemedView } from '@/components/misc/themed-view';
11 11
import { useColorScheme } from '@/hooks/use-color-scheme';
12 12
import { useThemeColor } from '@/hooks/use-theme-color';
13 13
14 14
const HEADER_HEIGHT = 250;
15 15
75 75
padding: 32,
76 76
gap: 16,
77 77
overflow: 'hidden',
78 78
},
79 79
});
frontend/components/themed-text.tsx → frontend/components/misc/themed-text.tsx
1 1
import { StyleSheet, Text, type TextProps } from 'react-native';
2 2
3 3
import { useThemeColor } from '@/hooks/use-theme-color';
4 4
5 5
export type ThemedTextProps = TextProps & {
56 56
lineHeight: 30,
57 57
fontSize: 16,
58 58
color: '#0a7ea4',
59 59
},
60 60
});
frontend/components/themed-view.tsx → frontend/components/misc/themed-view.tsx
1 1
import { View, type ViewProps } from 'react-native';
2 2
3 3
import { useThemeColor } from '@/hooks/use-theme-color';
4 4
5 5
export type ThemedViewProps = ViewProps & {
10 10
export function ThemedView({ style, lightColor, darkColor, ...otherProps }: ThemedViewProps) {
11 11
const backgroundColor = useThemeColor({ light: lightColor, dark: darkColor }, 'background');
12 12
13 13
return <View style={[{ backgroundColor }, style]} {...otherProps} />;
14 14
}
/dev/null → frontend/components/ui/buttons.tsx
1 +
const PrimaryButton = () => (
2 +
)
3 +
4 +
export {
5 +
PrimaryButton
6 +
}
frontend/components/ui/collapsible.tsx
1 1
import { PropsWithChildren, useState } from 'react';
2 2
import { StyleSheet, TouchableOpacity } from 'react-native';
3 3
4 -
import { ThemedText } from '@/components/themed-text';
5 -
import { ThemedView } from '@/components/themed-view';
4 +
import { ThemedText } from '@/components/misc/themed-text';
5 +
import { ThemedView } from '@/components/misc/themed-view';
6 6
import { IconSymbol } from '@/components/ui/icon-symbol';
7 7
import { Colors } from '@/constants/theme';
8 8
import { useColorScheme } from '@/hooks/use-color-scheme';
9 9
10 10
export function Collapsible({ children, title }: PropsWithChildren & { title: string }) {
41 41
content: {
42 42
marginTop: 6,
43 43
marginLeft: 24,
44 44
},
45 45
});
frontend/hooks/use-color-scheme.web.ts → /dev/null
1 -
import { useEffect, useState } from 'react';
2 -
import { useColorScheme as useRNColorScheme } from 'react-native';
3 -
4 -
/**
5 -
* To support static rendering, this value needs to be re-calculated on the client side for web
6 -
*/
7 -
export function useColorScheme() {
8 -
const [hasHydrated, setHasHydrated] = useState(false);
9 -
10 -
useEffect(() => {
11 -
setHasHydrated(true);
12 -
}, []);
13 -
14 -
const colorScheme = useRNColorScheme();
15 -
16 -
if (hasHydrated) {
17 -
return colorScheme;
18 -
}
19 -
20 -
return 'light';
21 -
}