Skip to content

Commit d5a9ce3

Browse files
eszlamczykeszlamczyk
committed
refactor: separated pages content + created home button commponent
1 parent c6e0f46 commit d5a9ce3

9 files changed

Lines changed: 151 additions & 114 deletions

File tree

‎apps/example/src/App.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { NavigationContainer } from '@react-navigation/native';
22
import { Stack } from './navigation/Stack';
3-
import HomeScreen from './screens/HomeScreen';
4-
import PlaygroundScreen from './screens/PlaygroundScreen';
5-
import TextScreen from './screens/TextScreen';
6-
import InputScreen from './screens/InputScreen';
7-
import StreamingMarkdownSimulator from './screens/StreamingMarkdownSimulator';
3+
import HomeScreen from './screens/home/HomeScreen';
4+
import PlaygroundScreen from './screens/playground/PlaygroundScreen';
5+
import TextScreen from './screens/text/TextScreen';
6+
import InputScreen from './screens/input/InputScreen';
7+
import StreamingMarkdownSimulator from './screens/streaming/StreamingMarkdownSimulator';
88

99
export default function App() {
1010
return (

‎apps/example/src/screens/HomeScreen.tsx‎

Lines changed: 0 additions & 104 deletions
This file was deleted.

apps/example/src/LinkModal.tsx renamed to apps/example/src/screens/common/LinkModal.tsx

File renamed without changes.

‎apps/example/src/screens/home/HomeScreen.tsx‎

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
import { View, Text, StyleSheet } from 'react-native';
2+
import { HomeScreenButton } from './HomeScreenButton';
3+
import type {
4+
RootStackParamList,
5+
RootStackScreenProps,
6+
} from '../../navigation/types';
7+
8+
type Props = RootStackScreenProps<'Home'>;
9+
10+
type ScreenItem = {
11+
route: Exclude<keyof RootStackParamList, 'Home'>;
12+
label: string;
13+
subtext: string;
14+
testID: string;
15+
color: string;
16+
};
17+
18+
const SCREENS: ScreenItem[] = [
19+
{
20+
route: 'Playground',
21+
label: 'Playground',
22+
subtext: 'live editor with preview',
23+
testID: 'home-block-playground',
24+
color: '#007AFF',
25+
},
26+
{
27+
route: 'Text',
28+
label: 'Text',
29+
subtext: 'static markdown rendering',
30+
testID: 'home-block-text',
31+
color: '#34C759',
32+
},
33+
{
34+
route: 'Input',
35+
label: 'Input',
36+
subtext: 'chat-style rich text input',
37+
testID: 'home-block-input',
38+
color: '#FF9500',
39+
},
40+
{
41+
route: 'Stream',
42+
label: 'Stream',
43+
subtext: 'streaming markdown with tables',
44+
testID: 'home-block-stream',
45+
color: '#AF52DE',
46+
},
47+
];
48+
49+
export default function HomeScreen({ navigation }: Props) {
50+
return (
51+
<View style={styles.container} testID="home-screen">
52+
<Text style={styles.title}>Enriched Markdown Examples</Text>
53+
<Text style={styles.subtitle}>
54+
Explore different markdown rendering and input capabilities
55+
</Text>
56+
57+
{SCREENS.map(({ route, label, subtext, testID, color }) => (
58+
<HomeScreenButton
59+
key={route}
60+
label={label}
61+
subtext={subtext}
62+
testID={testID}
63+
color={color}
64+
onPress={() => navigation.navigate(route)}
65+
/>
66+
))}
67+
</View>
68+
);
69+
}
70+
71+
const styles = StyleSheet.create({
72+
container: {
73+
flex: 1,
74+
justifyContent: 'center',
75+
alignItems: 'center',
76+
padding: 20,
77+
backgroundColor: '#f5f5f5',
78+
},
79+
title: {
80+
fontSize: 28,
81+
fontWeight: 'bold',
82+
marginBottom: 10,
83+
textAlign: 'center',
84+
},
85+
subtitle: {
86+
fontSize: 16,
87+
color: '#666',
88+
marginBottom: 40,
89+
textAlign: 'center',
90+
},
91+
});

‎apps/example/src/screens/home/HomeScreenButton.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import { Text, StyleSheet, TouchableOpacity } from 'react-native';
2+
3+
type Props = {
4+
label: string;
5+
subtext: string;
6+
testID: string;
7+
color: string;
8+
onPress: () => void;
9+
};
10+
11+
export function HomeScreenButton({
12+
label,
13+
subtext,
14+
testID,
15+
color,
16+
onPress,
17+
}: Props) {
18+
return (
19+
<TouchableOpacity
20+
style={[styles.button, { backgroundColor: color }]}
21+
onPress={onPress}
22+
testID={testID}
23+
>
24+
<Text style={styles.buttonText}>{label}</Text>
25+
<Text style={styles.buttonSubtext}>{subtext}</Text>
26+
</TouchableOpacity>
27+
);
28+
}
29+
30+
const styles = StyleSheet.create({
31+
button: {
32+
paddingHorizontal: 30,
33+
paddingVertical: 15,
34+
borderRadius: 10,
35+
marginVertical: 10,
36+
minWidth: 250,
37+
},
38+
buttonText: {
39+
color: 'white',
40+
fontSize: 16,
41+
fontWeight: '600',
42+
textAlign: 'center',
43+
},
44+
buttonSubtext: {
45+
color: 'rgba(255,255,255,0.8)',
46+
fontSize: 12,
47+
textAlign: 'center',
48+
marginTop: 2,
49+
},
50+
});

apps/example/src/screens/InputScreen.tsx renamed to apps/example/src/screens/input/InputScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import {
1717
type EnrichedMarkdownTextInputInstance,
1818
type StyleState,
1919
} from 'react-native-enriched-markdown';
20-
import { LinkModal } from '../LinkModal';
20+
import { LinkModal } from '../common/LinkModal';
2121

2222
interface Message {
2323
id: number;

apps/example/src/screens/PlaygroundScreen.tsx renamed to apps/example/src/screens/playground/PlaygroundScreen.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ import {
1616
type EnrichedMarkdownTextInputInstance,
1717
type StyleState,
1818
} from 'react-native-enriched-markdown';
19-
import { LinkModal } from '../LinkModal';
19+
import { LinkModal } from '../common/LinkModal';
2020

2121
const MARKDOWN_STYLE = {
2222
link: { color: '#2563EB', underline: true as const },

apps/example/src/screens/StreamingMarkdownSimulator.tsx renamed to apps/example/src/screens/streaming/StreamingMarkdownSimulator.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
View,
88
} from 'react-native';
99
import { EnrichedMarkdownText } from 'react-native-enriched-markdown';
10-
import { customMarkdownStyle } from '../markdownStyles';
10+
import { customMarkdownStyle } from '../../markdownStyles';
1111

1212
const STREAM_SOURCE = `Here is a longer streamed answer used to stress GitHub-flavored markdown streaming on iOS.
1313

apps/example/src/screens/TextScreen.tsx renamed to apps/example/src/screens/text/TextScreen.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import {
44
EnrichedMarkdownText,
55
type LinkPressEvent,
66
} from 'react-native-enriched-markdown';
7-
import { sampleMarkdown } from '../sampleMarkdown';
8-
import { customMarkdownStyle } from '../markdownStyles';
7+
import { sampleMarkdown } from '../../sampleMarkdown';
8+
import { customMarkdownStyle } from '../../markdownStyles';
99

1010
export default function TextScreen() {
1111
const markdownStyle = useMemo(() => customMarkdownStyle, []);

0 commit comments

Comments
 (0)
⚡