Front: Typecheck

front/Navigation.tsx

@@ -96,7 +96,7 @@ const protectedRoutes = () =>
 			options: { title: 'Verify email', headerShown: false },
 			link: '/verify',
 		},
-	} as const);
+	}) as const;
 
 const publicRoutes = () =>
 	({
@@ -135,7 +135,7 @@ const publicRoutes = () =>
 			options: { title: 'Password reset form', headerShown: false },
 			link: '/forgot_password',
 		},
-	} as const);
+	}) as const;
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 type Route<Props = any> = {
@@ -161,14 +161,13 @@ const Stack = createNativeStackNavigator<AppRouteParams & { Loading: never }>();
 const RouteToScreen =
 	<T extends {}>(component: Route<T>['component']) =>
 	// eslint-disable-next-line react/display-name
-	(props: NativeStackScreenProps<T & ParamListBase>) =>
-		(
-			<>
-				{component({ ...props.route.params, route: props.route } as Parameters<
-					Route<T>['component']
-				>[0])}
-			</>
-		);
+	(props: NativeStackScreenProps<T & ParamListBase>) => (
+		<>
+			{component({ ...props.route.params, route: props.route } as Parameters<
+				Route<T>['component']
+			>[0])}
+		</>
+	);
 
 const routesToScreens = (routes: Partial<Record<keyof AppRouteParams, Route>>) =>
 	Object.entries(routes).map(([name, route], routeIndex) => (

front/app.json

@@ -11,9 +11,7 @@
 			"resizeMode": "cover",
 			"backgroundColor": "#ffffff"
 		},
-		"assetBundlePatterns": [
-			"**/*"
-		],
+		"assetBundlePatterns": ["**/*"],
 		"ios": {
 			"supportsTablet": true
 		},
@@ -40,4 +38,4 @@
 			]
 		]
 	}
-}
+}

front/babel.config.js

@@ -1,4 +1,4 @@
-module.exports = function(api) {
+module.exports = function (api) {
 	api.cache(true);
 	return {
 		presets: ['babel-preset-expo'],

front/components/BigActionButton.tsx

@@ -91,11 +91,11 @@ const BigActionButton = ({
 							<Box
 								style={{
 									position: 'absolute',
-									left: '0',
+									left: 0,
 									width: '100%',
 									height: '100%',
 									backgroundColor: isDark ? 'black' : 'white',
-									padding: '10px',
+									padding: 10,
 								}}
 							>
 								<Row>

front/components/GtkUI/RawElement.tsx

@@ -9,6 +9,7 @@ import {
 	getElementRangeNode,
 } from './ElementTypes';
 import { ArrowDown2 } from 'iconsax-react-native';
+import { useWindowDimensions } from 'react-native';
 
 type RawElementProps = {
 	element: ElementProps;
@@ -18,6 +19,7 @@ export const RawElement = ({ element }: RawElementProps) => {
 	const { title, icon, type, helperText, description, disabled, data } = element;
 	const screenSize = useBreakpointValue({ base: 'small', md: 'big' });
 	const isSmallScreen = screenSize === 'small';
+	const { width: screenWidth } = useWindowDimensions();
 	return (
 		<Column
 			style={{
@@ -97,7 +99,9 @@ export const RawElement = ({ element }: RawElementProps) => {
 								<Popover.Content
 									accessibilityLabel={`Additionnal information for ${title}`}
 									style={{
-										maxWidth: isSmallScreen ? '90vw' : '20vw',
+										maxWidth: isSmallScreen
+											? 0.9 * screenWidth
+											: 0.2 * screenWidth,
 									}}
 								>
 									<Popover.Arrow />

front/components/Loading.stories.tsx

@@ -1,3 +1,4 @@
+// @ts-expect-error Who does tests anyway?
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import Loading from './Loading';
 

front/components/V2/SongCardInfo.tsx

@@ -92,7 +92,6 @@ const SongCardInfo = (props: SongCardInfoProps) => {
 										display: 'flex',
 										flexDirection: 'row',
 										alignItems: 'center',
-										// @ts-expect-error gap isn't yet supported by react native
 										gap: 5,
 										paddingHorizontal: 10,
 									}}

front/components/V2/TabNavigation.tsx

@@ -96,13 +96,13 @@ const TabNavigation = () => {
 					setActiveTabID={setActiveTab}
 				>
 					<View
+						// @ts-expect-error Raw CSS
 						style={{
 							width: 'calc(100% - 5)',
 							height: '100%',
 							backgroundColor: 'rgba(16, 16, 20, 0.50)',
 							borderRadius: 12,
 							margin: 5,
-							// @ts-expect-error backDropFilter isn't yet supported by react native
 							backDropFilter: 'blur(2px)',
 							padding: 15,
 						}}
@@ -119,6 +119,7 @@ const TabNavigation = () => {
 					setIsCollapsed={setIsDesktopCollapsed}
 				>
 					<View
+						// @ts-expect-error Raw CSS
 						style={{
 							width: 'calc(100% - 10)',
 							height: '100%',
@@ -126,7 +127,6 @@ const TabNavigation = () => {
 							borderRadius: 12,
 							marginVertical: 10,
 							marginRight: 10,
-							// @ts-expect-error backDropFilter isn't yet supported by react native
 							backDropFilter: 'blur(2px)',
 							padding: 20,
 						}}

front/components/V2/TabNavigationButton.tsx

@@ -20,57 +20,57 @@ const TabNavigationButton = (props: TabNavigationButtonProps) => {
 				width: '100%',
 			}}
 		>
-			{({ isPressed, isHovered }) => (
-				<View
-					style={{
-						display: 'flex',
-						flexDirection: 'row',
-						alignSelf: 'stretch',
-						alignItems: 'center',
-						justifyContent: 'flex-start',
-						padding: '10px',
-						borderRadius: 8,
-						flexGrow: 0,
-						// @ts-expect-error BoxShadow is not in the types but I want it this may be a legitimate error on my part
-						boxShadow: (() => {
-							if (isHovered) {
-								return '0px 0px 16px 0px rgba(0, 0, 0, 0.25)';
-							} else if (props.isActive) {
-								return '0px 0px 8px 0px rgba(0, 0, 0, 0.25)';
-							} else {
-								return undefined;
-							}
-						})(),
-						backdropFilter: 'blur(2px)',
-						backgroundColor: (() => {
-							if (isPressed) {
-								return 'rgba(0, 0, 0, 0.1)';
-							} else if (isHovered) {
-								return 'rgba(231, 231, 232, 0.2)';
-							} else if (props.isActive) {
-								return 'rgba(16, 16, 20, 0.5)';
-							} else {
-								return 'transparent';
-							}
-						})(),
-					}}
-				>
-					{props.icon && (
-						<View
-							style={{
-								marginRight: props.isCollapsed ? undefined : '10px',
-							}}
-						>
-							{props.icon}
-						</View>
-					)}
-					{!props.isCollapsed && (
-						<Text numberOfLines={1} selectable={false}>
-							{props.label}
-						</Text>
-					)}
-				</View>
-			)}
+			{({ isPressed, isHovered }) => {
+				let boxShadow: string | undefined = undefined;
+				if (isHovered) {
+					boxShadow = '0px 0px 16px 0px rgba(0, 0, 0, 0.25)';
+				} else if (props.isActive) {
+					boxShadow = '0px 0px 8px 0px rgba(0, 0, 0, 0.25)';
+				}
+				return (
+					<View
+						style={{
+							display: 'flex',
+							flexDirection: 'row',
+							alignSelf: 'stretch',
+							alignItems: 'center',
+							justifyContent: 'flex-start',
+							padding: 10,
+							borderRadius: 8,
+							flexGrow: 0,
+							// @ts-expect-error boxShadow isn't yet supported by react native
+							boxShadow: boxShadow,
+							backdropFilter: 'blur(2px)',
+							backgroundColor: (() => {
+								if (isPressed) {
+									return 'rgba(0, 0, 0, 0.1)';
+								} else if (isHovered) {
+									return 'rgba(231, 231, 232, 0.2)';
+								} else if (props.isActive) {
+									return 'rgba(16, 16, 20, 0.5)';
+								} else {
+									return 'transparent';
+								}
+							})(),
+						}}
+					>
+						{props.icon && (
+							<View
+								style={{
+									marginRight: props.isCollapsed ? undefined : 10,
+								}}
+							>
+								{props.icon}
+							</View>
+						)}
+						{!props.isCollapsed && (
+							<Text numberOfLines={1} selectable={false}>
+								{props.label}
+							</Text>
+						)}
+					</View>
+				);
+			}}
 		</Pressable>
 	);
 };

front/components/V2/TabNavigationDesktop.tsx

@@ -50,16 +50,16 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 							alignItems: 'center',
 							justifyContent: 'flex-start',
 							flexShrink: 0,
-							padding: '10px',
+							padding: 10,
 						}}
 					>
 						<Image
 							source={{ uri: icon?.at(0)?.uri }}
 							style={{
 								aspectRatio: 1,
-								width: '40px',
+								width: 40,
 								height: 'auto',
-								marginRight: '10px',
+								marginRight: 10,
 							}}
 						/>
 						<Text fontSize={'2xl'} selectable={false}>
@@ -70,9 +70,9 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 				<View
 					style={{
 						display: 'flex',
-						width: '300px',
+						width: 300,
 						height: 'auto',
-						padding: '32px',
+						padding: 32,
 						flexDirection: 'column',
 						justifyContent: 'space-between',
 						alignItems: 'flex-start',
@@ -82,8 +82,7 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 					<TabNavigationList
 						style={{
 							flexShrink: 0,
-							// @ts-expect-error gap is not in the types because we have an old version of react-native
-							gap: '20px',
+							gap: 20,
 						}}
 					>
 						{buttons.map((button, index) => (
@@ -104,8 +103,8 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 							<Text
 								bold
 								style={{
-									paddingHorizontal: '16px',
-									paddingVertical: '10px',
+									paddingHorizontal: 16,
+									paddingVertical: 10,
 									fontSize: 20,
 								}}
 							>
@@ -114,8 +113,8 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 							{songHistory.length === 0 && (
 								<Text
 									style={{
-										paddingHorizontal: '16px',
-										paddingVertical: '10px',
+										paddingHorizontal: 16,
+										paddingVertical: 10,
 									}}
 								>
 									No songs played yet
@@ -133,8 +132,8 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 									<View
 										key={'tab-navigation-other-' + index}
 										style={{
-											paddingHorizontal: '16px',
-											paddingVertical: '10px',
+											paddingHorizontal: 16,
+											paddingVertical: 10,
 										}}
 									>
 										<Text numberOfLines={1}>{histoItem.name}</Text>
@@ -144,8 +143,7 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 						<Divider />
 						<TabNavigationList
 							style={{
-								// @ts-expect-error gap is not in the types because we have an old version of react-native
-								gap: '20px',
+								gap: 20,
 							}}
 						>
 							{([props.tabs.find((t) => t.id === 'settings')] as NaviTab[]).map(
@@ -166,6 +164,7 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => {
 				</View>
 			</View>
 			<ScrollView
+				// @ts-expect-error Raw CSS
 				style={{
 					height: '100%',
 					width: 'calc(100% - 300px)',

front/components/V2/TabNavigationList.tsx

@@ -15,8 +15,7 @@ const TabNavigationList = (props: TabNavigationListProps) => {
 					alignItems: 'flex-start',
 					alignSelf: 'stretch',
 					flexDirection: 'column',
-					// @ts-expect-error gap is not in the types because we have an old version of react-native
-					gap: '8px',
+					gap: 8,
 				},
 				props.style,
 			]}

front/components/V2/TabNavigationPhone.tsx

@@ -22,8 +22,8 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
 		>
 			<View
 				style={{
-					padding: '16px',
-					height: '90px',
+					padding: 16,
+					height: 90,
 					width: '100%',
 				}}
 			>
@@ -31,7 +31,7 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
 					<View
 						style={{
 							display: 'flex',
-							padding: '8px',
+							padding: 8,
 							justifyContent: 'space-evenly',
 							flexDirection: 'row',
 							alignItems: 'center',
@@ -56,6 +56,7 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => {
 				</Center>
 			</View>
 			<ScrollView
+				// @ts-expect-error Raw CSS
 				style={{
 					width: '100%',
 					height: 'calc(100% - 90px)',

front/components/VirtualPiano/Octave.tsx

@@ -79,6 +79,7 @@ const Octave = (props: OctaveProps) => {
 							bgHovered={isHighlighted ? highlightColor : whiteKeyBgHovered}
 							onKeyDown={() => onNoteDown(key)}
 							onKeyUp={() => onNoteUp(key)}
+							// @ts-expect-error Raw CSS
 							style={{
 								width: whiteKeyWidthExpr,
 								height: whiteKeyHeightExpr,
@@ -100,6 +101,7 @@ const Octave = (props: OctaveProps) => {
 							bgHovered={isHighlighted ? highlightColor : blackKeyBgHovered}
 							onKeyDown={() => onNoteDown(key)}
 							onKeyUp={() => onNoteUp(key)}
+							// @ts-expect-error Raw CSS
 							style={{
 								width: blackKeyWidthExpr,
 								height: blackKeyHeightExpr,
@@ -107,7 +109,7 @@ const Octave = (props: OctaveProps) => {
 								left: `calc(calc(${whiteKeyWidthExpr} * ${
 									i + ((i > 1) as unknown as number) + 1
 								}) - calc(${blackKeyWidthExpr} / 2))`,
-								top: '0px',
+								top: 0,
 							}}
 							text={{
 								color: 'white',

front/components/VirtualPiano/VirtualPiano.tsx

@@ -43,6 +43,7 @@ const VirtualPiano = ({
 			{octaveList.map((octaveNum) => {
 				return (
 					<Octave
+						// @ts-expect-error Raw CSS
 						style={{ width: octaveWidthExpr, height: '100%' }}
 						key={octaveNum}
 						number={octaveNum}

front/components/navigators/TabRowNavigator.tsx

@@ -103,6 +103,7 @@ function TabNavigator({
 				{(!isMobileView || isPanelView) && (
 					<View
 						style={[
+							// @ts-expect-error Raw CSS
 							{
 								display: 'flex',
 								flexDirection: 'row',
@@ -153,8 +154,8 @@ function TabNavigator({
 									}
 									style={{
 										justifyContent: 'flex-start',
-										padding: '10px',
-										height: '50px',
+										padding: 10,
+										height: 50,
 										width: '100%',
 									}}
 									leftIcon={
@@ -177,15 +178,13 @@ function TabNavigator({
 					</View>
 				)}
 				{(!isMobileView || !isPanelView) && (
-					<View
-						style={[{ flex: 1, width: isMobileView ? '100%' : '700px' }, contentStyle]}
-					>
+					<View style={[{ flex: 1, width: isMobileView ? '100%' : 700 }, contentStyle]}>
 						{isMobileView && (
 							<Button
 								style={{
 									position: 'absolute',
-									top: '10px',
-									left: '10px',
+									top: 10,
+									left: 10,
 									zIndex: 100,
 								}}
 								onPress={() => setIsPanelView(true)}

front/views/ProfileView.tsx

@@ -768,6 +768,7 @@ const ProfileView = () => {
 						</Text>
 						<ButtonBase
 							title="Modifier profil"
+							// @ts-expect-error Raw CSS
 							style={{ width: 'fit-content' }}
 							type={'filled'}
 							onPress={async () => navigation.navigate('Settings')}

front/views/StartPageView.tsx

@@ -91,9 +91,10 @@ const StartPageView = () => {
 					iconName="user"
 					iconProvider={FontAwesome5}
 					onPress={() => navigation.navigate('Login')}
+					// @ts-expect-error Raw CSS
 					style={{
 						width: isSmallScreen ? '90%' : 'clamp(100px, 33.3%, 600px)',
-						height: '300px',
+						height: 300,
 						margin: 'clamp(10px, 2%, 50px)',
 					}}
 				/>
@@ -116,9 +117,10 @@ const StartPageView = () => {
 							toast.show({ description: error as string });
 						}
 					}}
+					// @ts-expect-error Raw CSS
 					style={{
 						width: isSmallScreen ? '90%' : 'clamp(100px, 33.3%, 600px)',
-						height: '300px',
+						height: 300,
 						margin: 'clamp(10px, 2%, 50px)',
 					}}
 				/>
@@ -131,8 +133,9 @@ const StartPageView = () => {
 					iconProvider={FontAwesome5}
 					iconName="user-plus"
 					onPress={() => navigation.navigate('Signup')}
+					// @ts-expect-error Raw CSS
 					style={{
-						height: '150px',
+						height: 150,
 						width: isSmallScreen ? '90%' : 'clamp(150px, 50%, 600px)',
 					}}
 				/>

front/views/V2/HomeView.tsx

@@ -88,7 +88,7 @@ const HomeView = () => {
 				<View
 					style={{
 						alignSelf: 'stretch',
-						maxWidth: '1100px',
+						maxWidth: 1100,
 						alignItems: 'stretch',
 						flexDirection: isPhone ? 'column' : 'row',
 					}}
@@ -186,7 +186,6 @@ const HomeView = () => {
 						flexWrap: 'wrap',
 						justifyContent: 'flex-start',
 						alignItems: 'flex-start',
-						// @ts-expect-error - gap is not in the typings
 						gap: 16,
 					}}
 				>