From 76d70f3edd9cf1864ae9072ba0ea5aa739d424f1 Mon Sep 17 00:00:00 2001 From: Arthur Jamet Date: Sat, 30 Sep 2023 11:05:08 +0200 Subject: [PATCH] Front: Typecheck --- front/Navigation.tsx | 19 ++-- front/app.json | 6 +- front/babel.config.js | 2 +- front/components/BigActionButton.tsx | 4 +- front/components/GtkUI/RawElement.tsx | 6 +- front/components/Loading.stories.tsx | 1 + front/components/V2/SongCardInfo.tsx | 1 - front/components/V2/TabNavigation.tsx | 4 +- front/components/V2/TabNavigationButton.tsx | 102 +++++++++--------- front/components/V2/TabNavigationDesktop.tsx | 29 +++-- front/components/V2/TabNavigationList.tsx | 3 +- front/components/V2/TabNavigationPhone.tsx | 7 +- front/components/VirtualPiano/Octave.tsx | 4 +- .../components/VirtualPiano/VirtualPiano.tsx | 1 + .../components/navigators/TabRowNavigator.tsx | 13 ++- front/views/ProfileView.tsx | 1 + front/views/StartPageView.tsx | 9 +- front/views/V2/HomeView.tsx | 3 +- 18 files changed, 110 insertions(+), 105 deletions(-) diff --git a/front/Navigation.tsx b/front/Navigation.tsx index 37da679..b40b398 100644 --- a/front/Navigation.tsx +++ b/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 = { @@ -161,14 +161,13 @@ const Stack = createNativeStackNavigator(); const RouteToScreen = (component: Route['component']) => // eslint-disable-next-line react/display-name - (props: NativeStackScreenProps) => - ( - <> - {component({ ...props.route.params, route: props.route } as Parameters< - Route['component'] - >[0])} - - ); + (props: NativeStackScreenProps) => ( + <> + {component({ ...props.route.params, route: props.route } as Parameters< + Route['component'] + >[0])} + + ); const routesToScreens = (routes: Partial>) => Object.entries(routes).map(([name, route], routeIndex) => ( diff --git a/front/app.json b/front/app.json index 3d2ab96..15639c9 100644 --- a/front/app.json +++ b/front/app.json @@ -11,9 +11,7 @@ "resizeMode": "cover", "backgroundColor": "#ffffff" }, - "assetBundlePatterns": [ - "**/*" - ], + "assetBundlePatterns": ["**/*"], "ios": { "supportsTablet": true }, @@ -40,4 +38,4 @@ ] ] } -} \ No newline at end of file +} diff --git a/front/babel.config.js b/front/babel.config.js index ff90a0d..34f7fe4 100644 --- a/front/babel.config.js +++ b/front/babel.config.js @@ -1,4 +1,4 @@ -module.exports = function(api) { +module.exports = function (api) { api.cache(true); return { presets: ['babel-preset-expo'], diff --git a/front/components/BigActionButton.tsx b/front/components/BigActionButton.tsx index b268972..ad98b10 100644 --- a/front/components/BigActionButton.tsx +++ b/front/components/BigActionButton.tsx @@ -91,11 +91,11 @@ const BigActionButton = ({ diff --git a/front/components/GtkUI/RawElement.tsx b/front/components/GtkUI/RawElement.tsx index 8dc43cf..8bd2fd9 100644 --- a/front/components/GtkUI/RawElement.tsx +++ b/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 ( { diff --git a/front/components/Loading.stories.tsx b/front/components/Loading.stories.tsx index 7addaa2..78e799c 100644 --- a/front/components/Loading.stories.tsx +++ b/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'; diff --git a/front/components/V2/SongCardInfo.tsx b/front/components/V2/SongCardInfo.tsx index 8057815..f02143e 100644 --- a/front/components/V2/SongCardInfo.tsx +++ b/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, }} diff --git a/front/components/V2/TabNavigation.tsx b/front/components/V2/TabNavigation.tsx index 3cdb6bc..3935545 100644 --- a/front/components/V2/TabNavigation.tsx +++ b/front/components/V2/TabNavigation.tsx @@ -96,13 +96,13 @@ const TabNavigation = () => { setActiveTabID={setActiveTab} > { setIsCollapsed={setIsDesktopCollapsed} > { borderRadius: 12, marginVertical: 10, marginRight: 10, - // @ts-expect-error backDropFilter isn't yet supported by react native backDropFilter: 'blur(2px)', padding: 20, }} diff --git a/front/components/V2/TabNavigationButton.tsx b/front/components/V2/TabNavigationButton.tsx index dcb217c..d074553 100644 --- a/front/components/V2/TabNavigationButton.tsx +++ b/front/components/V2/TabNavigationButton.tsx @@ -20,57 +20,57 @@ const TabNavigationButton = (props: TabNavigationButtonProps) => { width: '100%', }} > - {({ isPressed, isHovered }) => ( - { - 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 && ( - - {props.icon} - - )} - {!props.isCollapsed && ( - - {props.label} - - )} - - )} + {({ 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 ( + { + 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 && ( + + {props.icon} + + )} + {!props.isCollapsed && ( + + {props.label} + + )} + + ); + }} ); }; diff --git a/front/components/V2/TabNavigationDesktop.tsx b/front/components/V2/TabNavigationDesktop.tsx index c211a5f..3fc055a 100644 --- a/front/components/V2/TabNavigationDesktop.tsx +++ b/front/components/V2/TabNavigationDesktop.tsx @@ -50,16 +50,16 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => { alignItems: 'center', justifyContent: 'flex-start', flexShrink: 0, - padding: '10px', + padding: 10, }} > @@ -70,9 +70,9 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => { { {buttons.map((button, index) => ( @@ -104,8 +103,8 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => { @@ -114,8 +113,8 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => { {songHistory.length === 0 && ( No songs played yet @@ -133,8 +132,8 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => { {histoItem.name} @@ -144,8 +143,7 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => { {([props.tabs.find((t) => t.id === 'settings')] as NaviTab[]).map( @@ -166,6 +164,7 @@ const TabNavigationDesktop = (props: TabNavigationDesktopProps) => { { 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, ]} diff --git a/front/components/V2/TabNavigationPhone.tsx b/front/components/V2/TabNavigationPhone.tsx index 85f2161..852ad34 100644 --- a/front/components/V2/TabNavigationPhone.tsx +++ b/front/components/V2/TabNavigationPhone.tsx @@ -22,8 +22,8 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => { > @@ -31,7 +31,7 @@ const TabNavigationPhone = (props: TabNavigationPhoneProps) => { { { 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', diff --git a/front/components/VirtualPiano/VirtualPiano.tsx b/front/components/VirtualPiano/VirtualPiano.tsx index 3552f4f..e5e45a1 100644 --- a/front/components/VirtualPiano/VirtualPiano.tsx +++ b/front/components/VirtualPiano/VirtualPiano.tsx @@ -43,6 +43,7 @@ const VirtualPiano = ({ {octaveList.map((octaveNum) => { return ( )} {(!isMobileView || !isPanelView) && ( - + {isMobileView && (