diff --git a/.eslintrc.js b/.eslintrc.js
index fc76cab..b9cc24e 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -17,7 +17,7 @@ module.exports = {
settings: {
'import/resolver': {
typescript: {
- project: './tsconfig.json',
+ project: ['./tsconfig.base.json', './apps/*/tsconfig.json'],
},
},
},
diff --git a/.prettierrc b/.prettierrc
index 3baced4..d55c115 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,4 +1,5 @@
{
"singleQuote": true,
- "endOfLine": "auto"
+ "endOfLine": "auto",
+ "plugins": ["prettier-plugin-tailwindcss"]
}
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 08ad711..4290e96 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -7,5 +7,14 @@
},
"[typescriptreact]": {
"editor.defaultFormatter": "esbenp.prettier-vscode"
- }
+ },
+ "typescript.tsdk": "node_modules\\typescript\\lib",
+ "tailwindCSS.experimental.classRegex": [
+ ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"],
+ ["cn\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
+ ],
+ "typescript.preferences.autoImportFileExcludePatterns": [
+ // Should import Text from UI components instead
+ "react-native/Libraries/Text/Text.d.ts"
+ ]
}
diff --git a/apps/mobile/app.d.ts b/apps/mobile/app.d.ts
new file mode 100644
index 0000000..a13e313
--- /dev/null
+++ b/apps/mobile/app.d.ts
@@ -0,0 +1 @@
+///
diff --git a/apps/mobile/app.json b/apps/mobile/app.json
index 74f4d26..7869822 100644
--- a/apps/mobile/app.json
+++ b/apps/mobile/app.json
@@ -4,20 +4,19 @@
"slug": "mw-mobile",
"version": "1.0.0",
"orientation": "portrait",
- "scheme":"dev.movieweb.app",
+ "scheme": "dev.movieweb.app",
+ "userInterfaceStyle": "automatic",
"icon": "./assets/images/icon.png",
"splash": {
"image": "./assets/images/splash.png",
"resizeMode": "contain",
"backgroundColor": "#ffffff"
},
- "jsEngine": "jsc",
+ "jsEngine": "jsc",
"updates": {
"fallbackToCacheTimeout": 0
},
- "assetBundlePatterns": [
- "**/*"
- ],
+ "assetBundlePatterns": ["**/*"],
"ios": {
"supportsTablet": true,
"bundleIdentifier": "dev.movieweb.app"
@@ -34,20 +33,17 @@
"bundler": "metro"
},
"plugins": [
- "expo-router",
+ "expo-router",
[
"@config-plugins/detox",
{
"skipProguard": false,
- "subdomains": [
- "10.0.2.2",
- "localhost"
- ]
+ "subdomains": ["10.0.2.2", "localhost"]
}
]
],
- "experiments": {
- "typedRoutes": true
- }
+ "experiments": {
+ "typedRoutes": true
+ }
}
}
diff --git a/apps/mobile/app/(tabs)/_layout.tsx b/apps/mobile/app/(tabs)/_layout.tsx
index b37f63d..19dbec3 100644
--- a/apps/mobile/app/(tabs)/_layout.tsx
+++ b/apps/mobile/app/(tabs)/_layout.tsx
@@ -1,20 +1,19 @@
import { Tabs } from 'expo-router';
-import Colors from '../../constants/Colors';
-import TabBarIcon from '../../components/TabBarIcon';
-import { globalStyles } from '../../styles/global';
+import TabBarIcon from '@/components/TabBarIcon';
+import Colors from '@/constants/Colors';
export default function TabLayout() {
return (
@@ -55,26 +53,9 @@ export default function TabLayout() {
options={{
title: 'Search',
tabBarLabel: '',
- tabBarShowLabel: false,
- tabBarLabelStyle: {
- display: 'none',
- },
- tabBarIconStyle: {},
tabBarIcon: () => (
diff --git a/apps/mobile/app/(tabs)/about.tsx b/apps/mobile/app/(tabs)/about.tsx
index fc530b8..9075450 100644
--- a/apps/mobile/app/(tabs)/about.tsx
+++ b/apps/mobile/app/(tabs)/about.tsx
@@ -1,8 +1,5 @@
-import { StyleSheet } from 'react-native';
-
-import ScreenLayout from '../../components/layout/screenLayout';
-import { globalStyles } from '../../styles/global';
-import { RegularText } from '../../components/Styled';
+import ScreenLayout from '@/components/layout/ScreenLayout';
+import { Text } from '@/components/ui/Text';
export default function AboutScreen() {
return (
@@ -10,27 +7,10 @@ export default function AboutScreen() {
title="About"
subtitle="What is movie-web and how content is served?"
>
-
+
No content is served from movie-web directly and movie web does not host
anything.
-
+
);
}
-
-const styles = StyleSheet.create({
- container: {
- flex: 1,
- alignItems: 'center',
- justifyContent: 'center',
- },
- title: {
- fontSize: 20,
- fontWeight: 'bold',
- },
- separator: {
- marginVertical: 30,
- height: 1,
- width: '80%',
- },
-});
diff --git a/apps/mobile/app/(tabs)/account.tsx b/apps/mobile/app/(tabs)/account.tsx
index e28c546..5216bc5 100644
--- a/apps/mobile/app/(tabs)/account.tsx
+++ b/apps/mobile/app/(tabs)/account.tsx
@@ -1,8 +1,5 @@
-import { StyleSheet, Text } from 'react-native';
-
-import { globalStyles } from '../../styles/global';
-import ScreenLayout from '../../components/layout/screenLayout';
-import { RegularText } from '../../components/Styled';
+import ScreenLayout from '@/components/layout/ScreenLayout';
+import { Text } from '@/components/ui/Text';
export default function AccountScreen() {
return (
@@ -10,9 +7,7 @@ export default function AccountScreen() {
title="Account"
subtitle="Manage your movie web account from here"
>
-
- Hey Bro! what are you up to?
-
+ Hey Bro! what are you up to?
);
}
diff --git a/apps/mobile/app/(tabs)/index.tsx b/apps/mobile/app/(tabs)/index.tsx
index 58d9f6b..6759149 100644
--- a/apps/mobile/app/(tabs)/index.tsx
+++ b/apps/mobile/app/(tabs)/index.tsx
@@ -1,13 +1,10 @@
-import { RegularText } from '../../components/Styled';
-import ScreenLayout from '../../components/layout/screenLayout';
-import { globalStyles } from '../../styles/global';
+import ScreenLayout from '@/components/layout/ScreenLayout';
+import { Text } from '@/components/ui/Text';
export default function HomeScreen() {
return (
-
- Movies will be listed here
-
+ Movies will be listed here
);
}
diff --git a/apps/mobile/app/(tabs)/search/Searchbar.tsx b/apps/mobile/app/(tabs)/search/Searchbar.tsx
index 73fd655..107ec03 100644
--- a/apps/mobile/app/(tabs)/search/Searchbar.tsx
+++ b/apps/mobile/app/(tabs)/search/Searchbar.tsx
@@ -1,10 +1,10 @@
import { FontAwesome5 } from '@expo/vector-icons';
+import { useFocusEffect } from 'expo-router';
import { useCallback, useRef, useState } from 'react';
import { View } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
-import { globalStyles } from '../../../styles/global';
-import Colors from '../../../constants/Colors';
-import { useFocusEffect } from 'expo-router';
+
+import Colors from '@/constants/Colors';
export default function Searchbar() {
const [keyword, setKeyword] = useState('');
@@ -24,41 +24,19 @@ export default function Searchbar() {
);
return (
-
-
-
+
+
+
setKeyword(text)}
ref={inputRef}
placeholder="What are you looking for?"
- placeholderTextColor={Colors.dark.shade200}
- style={[
- globalStyles.input,
- globalStyles.fOpenSansRegular,
- {
- width: '100%',
- },
- ]}
- >
+ placeholderTextColor={Colors.secondary[200]}
+ className="w-full rounded-3xl py-3 pr-5 text-white focus-visible:outline-none"
+ />
);
}
diff --git a/apps/mobile/app/(tabs)/search/_layout.tsx b/apps/mobile/app/(tabs)/search/_layout.tsx
index 5fc46d9..5cf0f9b 100644
--- a/apps/mobile/app/(tabs)/search/_layout.tsx
+++ b/apps/mobile/app/(tabs)/search/_layout.tsx
@@ -1,13 +1,9 @@
-import { Dimensions, ScrollView, View } from 'react-native';
+import { ScrollView, View } from 'react-native';
+
+import Item from '@/components/item/item';
+import ScreenLayout from '@/components/layout/ScreenLayout';
+import { Text } from '@/components/ui/Text';
-import { globalStyles } from '../../../styles/global';
-import ScreenLayout from '../../../components/layout/screenLayout';
-import { TextInput } from 'react-native-gesture-handler';
-import styles from './styles';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useFocusEffect } from 'expo-router';
-import { BoldText } from '../../../components/Styled';
-import Item from '../../../components/item/item';
import Searchbar from './Searchbar';
export default function SearchScreen() {
@@ -15,23 +11,21 @@ export default function SearchScreen() {
- Search
+
+ Search
}
subtitle="Looking for something?"
>
-
-
+
+