movie-web/native-app
1
0
Fork 0
mirror of https://github.com/movie-web/native-app.git synced 2025-09-13 11:33:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

first setup

Browse Source
This commit is contained in:
Jorrin
2024-01-22 22:43:19 +01:00
parent 910c3f4b3b
commit 8a48a1cce4
25 changed files with 460 additions and 350 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/mobile/app/(tabs)/_layout.tsx
View File

@@ -1,7 +1,7 @@
import { Tabs } from 'expo-router';
import Colors from '../../constants/Colors';
import TabBarIcon from '../../components/TabBarIcon';
import Colors from '../../constants/Colors.js';
import { globalStyles } from '../../styles/global';
export default function TabLayout() {
@@ -12,9 +12,9 @@ export default function TabLayout() {
}}
screenOptions={{
headerShown: false,
tabBarActiveTintColor: Colors.dark.purple100,
tabBarActiveTintColor: Colors.purple[100],
tabBarStyle: {
backgroundColor: Colors.dark.shade700,
backgroundColor: Colors.shade[700],
borderTopColor: 'transparent',
borderTopRightRadius: 20,
borderTopLeftRadius: 20,
@@ -65,7 +65,7 @@ export default function TabLayout() {
style={{
position: 'relative',
top: -1,
backgroundColor: Colors.dark.purple400,
backgroundColor: Colors.purple[400],
display: 'flex',
alignItems: 'center',
justifyContent: 'center',

26
apps/mobile/app/(tabs)/about.tsx
View File

@@ -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 { RegularText } 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?"
>
<RegularText style={globalStyles.textWhite}>
<RegularText className="text-white">
No content is served from movie-web directly and movie web does not host
anything.
</RegularText>
</ScreenLayout>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
});

9
apps/mobile/app/(tabs)/account.tsx
View File

@@ -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 { RegularText } from '../../components/ui/Text';
export default function AccountScreen() {
return (
@@ -10,7 +7,7 @@ export default function AccountScreen() {
title="Account"
subtitle="Manage your movie web account from here"
>
<RegularText style={globalStyles.textWhite}>
<RegularText className="text-white">
Hey Bro! what are you up to?
</RegularText>
</ScreenLayout>

7
apps/mobile/app/(tabs)/index.tsx
View File

@@ -1,11 +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 { RegularText } from '../../components/ui/Text';
export default function HomeScreen() {
return (
<ScreenLayout title="Home" subtitle="This is where all magic happens">
<RegularText style={globalStyles.textWhite}>
<RegularText className="text-white">
Movies will be listed here
</RegularText>
</ScreenLayout>

41
apps/mobile/app/(tabs)/search/Searchbar.tsx
View File

@@ -1,10 +1,11 @@
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 Colors from '../../../constants/Colors.js';
import { globalStyles } from '../../../styles/global';
import Colors from '../../../constants/Colors';
import { useFocusEffect } from 'expo-router';
export default function Searchbar() {
const [keyword, setKeyword] = useState('');
@@ -24,41 +25,19 @@ export default function Searchbar() {
);
return (
<View
style={{
...globalStyles.flexRow,
...globalStyles.itemsCenter,
...globalStyles.border,
...globalStyles.roundedFull,
marginTop: 14,
marginBottom: 24,
}}
>
<View
style={{
...globalStyles.justifyCenter,
...globalStyles.itemsCenter,
width: 48,
marginLeft: 4,
}}
>
<FontAwesome5 name="search" size={18} color={Colors.dark.shade200} />
<View className="mb-6 mt-4 flex-row items-center rounded-full border">
<View className="ml-1 w-12 items-center justify-center">
<FontAwesome5 name="search" size={18} color={Colors.shade[200]} />
</View>
<TextInput
value={keyword}
autoFocus={true}
autoFocus
onChangeText={(text) => setKeyword(text)}
ref={inputRef}
placeholder="What are you looking for?"
placeholderTextColor={Colors.dark.shade200}
style={[
globalStyles.input,
globalStyles.fOpenSansRegular,
{
width: '100%',
},
]}
></TextInput>
placeholderTextColor={Colors.shade[200]}
className="rounded-3xl py-3 pr-5 text-white"
/>
</View>
);
}

34
apps/mobile/app/(tabs)/search/_layout.tsx
View File

@@ -1,37 +1,37 @@
import { Dimensions, ScrollView, View } from 'react-native';
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 { useCallback, useEffect, useRef, useState } from 'react';
import { Dimensions, ScrollView, View } from 'react-native';
import { TextInput } from 'react-native-gesture-handler';
import Searchbar from './Searchbar';
import styles from './styles';
import Item from '../../../components/item/item';
import ScreenLayout from '../../../components/layout/ScreenLayout';
import { BoldText } from '../../../components/ui/Text';
import { globalStyles } from '../../../styles/global';
export default function SearchScreen() {
return (
<ScrollView>
<ScreenLayout
title={
<View
style={{ ...globalStyles.flexRow, ...globalStyles.itemsCenter }}
>
<BoldText style={globalStyles.sectionTitle}>Search</BoldText>
<View className="flex-row items-center">
<BoldText className="text-2xl font-bold text-white">
Search
</BoldText>
</View>
}
subtitle="Looking for something?"
>
<Searchbar />
<View style={styles.items}>
<View style={styles.itemOuter}>
<View className="flex w-full flex-1 flex-row flex-wrap justify-start">
<View className="basis-1/2 px-3 pb-3">
<Item />
</View>
<View style={styles.itemOuter}>
<View className="basis-1/2 px-3 pb-3">
<Item />
</View>
<View style={styles.itemOuter}>
<View className="basis-1/2 px-3 pb-3">
<Item />
</View>
</View>

8
apps/mobile/app/(tabs)/settings.tsx
View File

@@ -1,12 +1,10 @@
import { RegularText } from '../../components/Styled';
import ScreenLayout from '../../components/layout/screenLayout';
import { globalStyles } from '../../styles/global';
import { StyleSheet, Text } from 'react-native';
import ScreenLayout from '../../components/layout/ScreenLayout';
import { RegularText } from '../../components/ui/Text';
export default function SettingsScreen() {
return (
<ScreenLayout title="Settings" subtitle="Need to change something?">
<RegularText style={globalStyles.textWhite}>
<RegularText className="text-white">
Settings would be listed in here. Coming soon
</RegularText>
</ScreenLayout>

36
apps/mobile/app/[...missing].tsx
View File

@@ -1,41 +1,23 @@
import { Link, Stack } from 'expo-router';
import { StyleSheet, View } from 'react-native';
import { BoldText, RegularText } from '../components/Styled';
import { View } from 'react-native';
import { BoldText, RegularText } from '../components/ui/Text';
export default function NotFoundScreen() {
return (
<>
<Stack.Screen options={{ title: 'Oops!' }} />
<View style={styles.container}>
<BoldText style={styles.title}>
<View className="flex-1 items-center justify-center p-5">
<BoldText className="text-lg font-bold">
This screen doesn&apos;t exist.
</BoldText>
<Link href="/" style={styles.link}>
<RegularText style={styles.linkText}>Go to home screen!</RegularText>
<Link href="/" className="mt-4 py-4">
<RegularText className="text-sm text-sky-500">
Go to home screen!
</RegularText>
</Link>
</View>
</>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
padding: 20,
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
link: {
marginTop: 15,
paddingVertical: 15,
},
linkText: {
fontSize: 14,
color: '#2e78b7',
},
});

7
apps/mobile/app/_layout.tsx
View File

@@ -1,3 +1,4 @@
/* eslint-disable global-require */
import FontAwesome from '@expo/vector-icons/FontAwesome';
import {
DarkTheme,
@@ -9,7 +10,7 @@ import { SplashScreen, Stack } from 'expo-router';
import { useEffect } from 'react';
import { useColorScheme } from 'react-native';
import Colors from '../constants/Colors';
import Colors from '../constants/Colors.js';
export {
// Catch any errors thrown by the Layout component.
@@ -27,7 +28,6 @@ SplashScreen.preventAutoHideAsync();
export default function RootLayout() {
const [loaded, error] = useFonts({
// eslint-disable-next-line global-require
OpenSansRegular: require('../assets/fonts/OpenSans-Regular.ttf'),
OpenSansLight: require('../assets/fonts/OpenSans-Light.ttf'),
OpenSansMedium: require('../assets/fonts/OpenSans-Medium.ttf'),
@@ -65,12 +65,11 @@ function RootLayoutNav() {
gestureEnabled: true,
headerShown: false,
contentStyle: {
backgroundColor: Colors.dark.shade900,
backgroundColor: Colors.shade[900],
},
}}
>
<Stack.Screen name="(tabs)" options={{ headerShown: false }} />
<Stack.Screen name="modal" options={{ presentation: 'modal' }} />
</Stack>
</ThemeProvider>
);

33
apps/mobile/app/modal.tsx
View File

@@ -1,33 +0,0 @@
import { StatusBar } from 'expo-status-bar';
import { Platform, StyleSheet, View } from 'react-native';
import { BoldText, RegularText } from '../components/Styled';
export default function ModalScreen() {
return (
<View style={styles.container}>
<BoldText style={styles.title}>Modal</BoldText>
<View style={styles.separator} />
<RegularText>Modal?!</RegularText>
{/* Use a light status bar on iOS to account for the black space above the modal */}
<StatusBar style={Platform.OS === 'ios' ? 'light' : 'auto'} />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
title: {
fontSize: 20,
fontWeight: 'bold',
},
separator: {
marginVertical: 30,
height: 1,
width: '80%',
},
});

9
apps/mobile/babel.config.js
View File

@@ -2,9 +2,10 @@ module.exports = function (api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [
// Required for expo-router
'expo-router/babel',
],
plugins: [
// Required for expo-router
'expo-router/babel',
'nativewind/babel',
],
};
};

1
apps/mobile/components/ExternalLink.tsx
View File

@@ -13,7 +13,6 @@ export function ExternalLink(
target: '_blank',
}}
{...props}
// @ts-expect-error: External URLs are not typed.
href={props.href}
onPress={(e) => {
if (Platform.OS !== 'web') {

7
apps/mobile/components/TabBarIcon.tsx
View File

@@ -1,5 +1,6 @@
import { FontAwesome } from '@expo/vector-icons';
import Colors from '../constants/Colors';
import Colors from '../constants/Colors.js';
type Props = {
focused?: boolean;
@@ -7,13 +8,13 @@ type Props = {
} & React.ComponentProps<typeof FontAwesome>;
export default function TabBarIcon({
color = Colors.dark.shade300,
color = Colors.shade[300],
focused,
...rest
}: Props) {
return (
<FontAwesome
color={color || (focused ? Colors.dark.purple300 : Colors.dark.shade300)}
color={color || (focused ? Colors.purple[300] : Colors.shade[300])}
size={24}
{...rest}
/>

27
apps/mobile/components/item/item.tsx
View File

@@ -1,30 +1,25 @@
import { globalStyles } from '../../styles/global';
import { Image, Text, View } from 'react-native';
import styles from './styles';
import { BoldText, RegularText } from '../Styled';
import { Image, View } from 'react-native';
import { TMDB_POSTER_PATH } from '../../constants/General';
import { BoldText, RegularText } from '../ui/Text';
export default function Item() {
return (
<View style={styles.wrapper}>
<View style={styles.imageWrapper}>
<View className="w-full">
<View className="mb-2 aspect-[9/14] w-full overflow-hidden rounded-2xl">
<Image
source={{
uri: `${TMDB_POSTER_PATH}/w342//gdIrmf2DdY5mgN6ycVP0XlzKzbE.jpg`,
width: 200,
}}
style={styles.image}
className="h-full w-full object-cover"
/>
</View>
<BoldText style={globalStyles.textWhite}>Hamilton</BoldText>
<View style={styles.meta}>
<RegularText style={[globalStyles.textMuted, styles.smallText]}>
Movie
</RegularText>
<View style={[globalStyles.dotSeperator]}></View>
<RegularText style={[globalStyles.textMuted, styles.smallText]}>
2023
</RegularText>
<BoldText className="text-white">Hamilton</BoldText>
<View className="flex-row items-center gap-3">
<RegularText className="text-xs text-gray-600">Movie</RegularText>
<View className="h-1 w-1 rounded-3xl bg-gray-600" />
<RegularText className="text-sm text-gray-600">2023</RegularText>
</View>
</View>
);

31
apps/mobile/components/item/styles.tsx
View File

@@ -1,31 +0,0 @@
import Colors from '../../constants/Colors';
import { StyleSheet } from 'react-native';
const styles = StyleSheet.create({
wrapper: {
width: '100%',
},
imageWrapper: {
borderRadius: 16,
aspectRatio: 9 / 14,
width: '100%',
overflow: 'hidden',
position: 'relative',
marginBottom: 6,
},
image: {
width: '100%',
height: '100%',
resizeMode: 'cover',
},
meta: {
flexDirection: 'row',
gap: 6,
alignItems: 'center',
},
smallText: {
fontSize: 12,
},
});
export default styles;

19
apps/mobile/components/layout/screenLayout.tsx
View File

@@ -1,7 +1,6 @@
import { View } from 'react-native';
import { globalStyles } from '../../styles/global';
import { styles } from './styles';
import { BoldText, RegularText } from '../Styled';
import { BoldText, RegularText } from '../ui/Text';
type Props = {
title?: React.ReactNode | string;
@@ -11,21 +10,15 @@ type Props = {
export default function ScreenLayout({ title, subtitle, children }: Props) {
return (
<View
style={[
globalStyles.pageContainer,
globalStyles.container,
styles.container,
]}
>
<View className="bg-shade-900 flex-1 py-12">
{typeof title === 'string' && (
<BoldText style={globalStyles.sectionTitle}>{title}</BoldText>
<BoldText className="text-2xl font-bold text-white">{title}</BoldText>
)}
{typeof title !== 'string' && title}
<RegularText style={[{ marginTop: 4 }, globalStyles.sectionSubtitle]}>
<RegularText className="text-shade-200 mt-1 text-sm">
{subtitle}
</RegularText>
<View style={styles.children}>{children}</View>
<View className="py-3">{children}</View>
</View>
);
}

88
apps/mobile/components/Styled.tsx → apps/mobile/components/ui/Text.tsx
View File

@@ -1,44 +1,44 @@
import { Text } from 'react-native';
export const RegularText = ({ style, children, ...rest }: Text['props']) => {
return (
<Text style={[{ fontFamily: 'OpenSansRegular' }, style]} {...rest}>
{children}
</Text>
);
};
export const BoldText = ({ style, children, ...rest }: Text['props']) => {
return (
<Text style={[{ fontFamily: 'OpenSansBold' }, style]} {...rest}>
{children}
</Text>
);
};
export const SemiBoldText = ({ style, children, ...rest }: Text['props']) => {
return (
<Text style={[{ fontFamily: 'OpenSansSemiBold' }, style]} {...rest}>
{children}
</Text>
);
};
export const MediumText = ({ style, children, ...rest }: Text['props']) => {
return (
<Text style={[{ fontFamily: 'OpenSansMedium' }, style]} {...rest}>
{children}
</Text>
);
};
export const ExtraBoldText = ({ style, children, ...rest }: Text['props']) => {
return (
<Text style={[{ fontFamily: 'OpenSansExtraBold' }, style]} {...rest}>
{children}
</Text>
);
};
export const LightText = ({ style, children, ...rest }: Text['props']) => {
return (
<Text style={[{ fontFamily: 'OpenSansLight' }, style]} {...rest}>
{children}
</Text>
);
};
import { Text } from 'react-native';
export function RegularText({ style, children, ...rest }: Text['props']) {
return (
<Text style={[{ fontFamily: 'OpenSansRegular' }, style]} {...rest}>
{children}
</Text>
);
}
export function BoldText({ style, children, ...rest }: Text['props']) {
return (
<Text style={[{ fontFamily: 'OpenSansBold' }, style]} {...rest}>
{children}
</Text>
);
}
export function SemiBoldText({ style, children, ...rest }: Text['props']) {
return (
<Text style={[{ fontFamily: 'OpenSansSemiBold' }, style]} {...rest}>
{children}
</Text>
);
}
export function MediumText({ style, children, ...rest }: Text['props']) {
return (
<Text style={[{ fontFamily: 'OpenSansMedium' }, style]} {...rest}>
{children}
</Text>
);
}
export function ExtraBoldText({ style, children, ...rest }: Text['props']) {
return (
<Text style={[{ fontFamily: 'OpenSansExtraBold' }, style]} {...rest}>
{children}
</Text>
);
}
export function LightText({ style, children, ...rest }: Text['props']) {
return (
<Text style={[{ fontFamily: 'OpenSansLight' }, style]} {...rest}>
{children}
</Text>
);
}

55
apps/mobile/constants/Colors.ts
View File

@@ -1,27 +1,42 @@
const tintColorLight = '#2f95dc';
const tintColorDark = '#fff';
// export default {
// light: {
// text: '#000',
// background: '#fff',
// tint: tintColorLight,
// tabIconDefault: '#ccc',
// tabIconSelected: tintColorLight,
// },
// dark: {
// text: '#fff',
// background: '#000',
// tint: tintColorDark,
// tabIconDefault: '#ccc',
// tabIconSelected: tintColorDark,
// purple100: '#C082FF',
// purple300: '#8D44D6',
// purple400: '#7831BF',
// shade50: '#676790',
// shade200: '#3F3F60',
// shade300: '#32324F',
// shade700: '#131322',
// shade900: '#0A0A12',
// },
// };
export default {
light: {
text: '#000',
background: '#fff',
tint: tintColorLight,
tabIconDefault: '#ccc',
tabIconSelected: tintColorLight,
purple: {
100: '#C082FF',
300: '#8D44D6',
400: '#7831BF',
},
dark: {
text: '#fff',
background: '#000',
tint: tintColorDark,
tabIconDefault: '#ccc',
tabIconSelected: tintColorDark,
purple100: '#C082FF',
purple300: '#8D44D6',
purple400: '#7831BF',
shade50: '#676790',
shade200: '#3F3F60',
shade300: '#32324F',
shade700: '#131322',
shade900: '#0A0A12',
shade: {
50: '#676790',
200: '#3F3F60',
300: '#32324F',
700: '#131322',
900: '#0A0A12',
},
};

19
apps/mobile/package.json
View File

@@ -12,8 +12,13 @@
"@expo/vector-icons": "^13.0.0",
"@nx/expo": "*",
"@react-navigation/native": "^6.1.9",
"@rnx-kit/metro-config": "*",
"@rnx-kit/metro-resolver-symlinks": "*",
"@testing-library/jest-native": "*",
"@testing-library/react-native": "*",
"@types/react": "*",
"eslint-plugin-react": "*",
"eslint-plugin-react-hooks": "*",
"expo": "*",
"expo-font": "^11.4.0",
"expo-linking": "^5.0.2",
@@ -22,7 +27,10 @@
"expo-status-bar": "*",
"expo-system-ui": "^2.6.0",
"expo-web-browser": "^12.5.0",
"jest": "*",
"jest-expo": "*",
"metro-config": "*",
"nativewind": "^2.0.11",
"pod-install": "*",
"react": "*",
"react-dom": "18.2.0",
@@ -33,15 +41,9 @@
"react-native-svg": "*",
"react-native-svg-transformer": "*",
"react-native-web": "^0.19.10",
"@rnx-kit/metro-config": "*",
"@rnx-kit/metro-resolver-symlinks": "*",
"@types/react": "*",
"eslint-plugin-react": "*",
"eslint-plugin-react-hooks": "*",
"jest": "*",
"jest-expo": "*",
"react-test-renderer": "*",
"typescript": "*"
"typescript": "*",
"tailwindcss": "*"
},
"scripts": {
"eas-build-pre-install": "cd ../../ && node tools/scripts/eas-build-pre-install.mjs . apps/mobile && cp pnpm-lock.yaml apps/mobile",
@@ -63,6 +65,7 @@
"jest-expo": "~49.0.0",
"pod-install": "^0.1.39",
"react-test-renderer": "18.2.0",
"tailwindcss": "^3.4.1",
"typescript": "~5.2.2"
},
"overrides": {

53
apps/mobile/styles/global.tsx
View File

@@ -1,50 +1,6 @@
import { StyleSheet } from 'react-native';
import Colors from '../constants/Colors';
export const globalStyles = StyleSheet.create({
pageContainer: {
flex: 1,
backgroundColor: Colors.dark.shade900,
paddingVertical: 48,
},
container: {
padding: 24,
},
sectionTitle: {
color: '#FFF',
letterSpacing: -1.5,
fontWeight: 'bold',
fontSize: 28,
},
sectionSubtitle: {
color: Colors.dark.shade200,
fontSize: 14,
},
textWhite: {
color: '#FFF',
},
flexRow: {
flexDirection: 'row',
},
itemsCenter: {
alignItems: 'center',
},
justifyCenter: {
justifyContent: 'center',
},
input: {
borderRadius: 24,
paddingRight: 18,
paddingVertical: 12,
color: '#FFF',
},
border: {
borderWidth: 1,
borderColor: 'rgba(255,255,255,.1)',
},
roundedFull: {
borderRadius: 34,
},
fOpenSansLight: {
fontFamily: 'OpenSansLight',
},
@@ -63,13 +19,4 @@ export const globalStyles = StyleSheet.create({
fOpenSansRegular: {
fontFamily: 'OpenSansRegular',
},
textMuted: {
color: '#5F5F7A',
},
dotSeperator: {
width: 4,
height: 4,
backgroundColor: '#5F5F7A',
borderRadius: 50,
},
});

13
apps/mobile/tailwind.config.ts Normal file
View File

@@ -0,0 +1,13 @@
import type { Config } from 'tailwindcss';
import colors from './constants/Colors';
export default {
content: [],
theme: {
extend: {
colors,
},
},
plugins: [],
} satisfies Config;

3
apps/mobile/tsconfig.app.json
View File

@@ -1,6 +1,7 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"composite": true,
"outDir": "../../dist/out-tsc",
"types": ["node"]
},
@@ -11,5 +12,5 @@
"**/*.spec.tsx",
"test-setup.ts"
],
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"]
"include": ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx", "constants/Colors.ts", "tailwind.config.mjs"]
}

1
apps/mobile/tsconfig.spec.json
View File

@@ -1,6 +1,7 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"composite": true,
"outDir": "../../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]