From b68e7bbd44b9b194869497d3497b0319099aaa3a Mon Sep 17 00:00:00 2001 From: Pierre Poupin Date: Fri, 13 Sep 2024 16:58:24 +0200 Subject: [PATCH] chore(example): fix typescript checks not running on the example (#152) * chore(example): fix expo start command * chore(example): make ts work on the example * chore(example): fix incorrect program row on page with variable size * chore(example): fix/ignore remaining ts errors --- packages/example/App.tsx | 2 +- packages/example/package.json | 6 ++++-- packages/example/src/components/Menu/Menu.tsx | 2 ++ .../src/components/PanEvent/PanEvent.ts | 2 +- .../src/components/PanEvent/PanEvent.utils.ts | 6 +++++- .../src/components/VirtualizedSpatialGrid.tsx | 5 ++++- .../remote-control/CustomEventEmitter.ts | 4 ++++ packages/example/src/hooks/useKey.ts | 2 ++ .../src/modules/header/view/Header.tsx | 1 + .../src/modules/program/view/ProgramList.tsx | 15 ++++++++----- .../program/view/ProgramListWithTitle.tsx | 2 +- .../example/src/pages/AsynchronousContent.tsx | 4 ++-- .../src/pages/GridWithLongNodesPage.tsx | 18 ++++++++-------- .../src/pages/ListWithVariableSize.tsx | 5 ++--- packages/example/src/utils/throttle.ts | 7 +++++-- packages/example/tsconfig.json | 6 +++++- yarn.lock | 21 +++++++++++++++++++ 17 files changed, 79 insertions(+), 29 deletions(-) diff --git a/packages/example/App.tsx b/packages/example/App.tsx index e9ae33ef..c2b1d96f 100644 --- a/packages/example/App.tsx +++ b/packages/example/App.tsx @@ -64,7 +64,7 @@ const TabNavigator = () => { ); }; -function App(): JSX.Element { +function App() { useTVPanEvent(); const { height, width } = useWindowDimensions(); const areFontsLoaded = useFonts(); diff --git a/packages/example/package.json b/packages/example/package.json index fa037fda..2b198602 100644 --- a/packages/example/package.json +++ b/packages/example/package.json @@ -3,11 +3,12 @@ "version": "1.0.0", "main": "index.js", "scripts": { - "start": "expo start", + "start": "EXPO_NO_CLIENT_ENV_VARS=1 EXPO_TV=1 expo start", "android": "EXPO_NO_CLIENT_ENV_VARS=1 EXPO_TV=1 expo run:android", "ios": "EXPO_NO_CLIENT_ENV_VARS=1 EXPO_TV=1 expo run:ios", "web": "EXPO_NO_CLIENT_ENV_VARS=1 expo start --web", "build:web": "expo export -p web", + "test:types": "tsc", "prebuild": "EXPO_TV=1 expo prebuild --clean" }, "dependencies": { @@ -32,7 +33,8 @@ "react-native-safe-area-context": "4.10.1", "react-native-screens": "3.31.1", "react-native-svg": "15.2.0", - "react-test-renderer": "^18.2.0" + "react-test-renderer": "^18.2.0", + "typescript": "^5.6.2" }, "devDependencies": { "@babel/core": "^7.24.0", diff --git a/packages/example/src/components/Menu/Menu.tsx b/packages/example/src/components/Menu/Menu.tsx index d8bf1bd2..d37eb88a 100644 --- a/packages/example/src/components/Menu/Menu.tsx +++ b/packages/example/src/components/Menu/Menu.tsx @@ -112,7 +112,9 @@ export const Menu = ({ state, navigation }: BottomTabBarProps) => { return ( { diff --git a/packages/example/src/components/PanEvent/PanEvent.utils.ts b/packages/example/src/components/PanEvent/PanEvent.utils.ts index b40325ab..b689dff7 100644 --- a/packages/example/src/components/PanEvent/PanEvent.utils.ts +++ b/packages/example/src/components/PanEvent/PanEvent.utils.ts @@ -4,7 +4,11 @@ import { SupportedKeys } from '../remote-control/SupportedKeys'; import PanEvent from './PanEvent'; import { EMIT_KEY_DOWN_INTERVAL, GRID_SIZE, NUMBER_OF_COLUMNS } from './PanEvent.constants'; -export const getGridCoordinates = (x: number, y: number, panEvent: PanEvent): number => { +export const getGridCoordinates = ( + x: number, + y: number, + panEvent: PanEvent, +): number | undefined => { const gridElementSize = GRID_SIZE / NUMBER_OF_COLUMNS; const xIndex = Math.floor((x + gridElementSize / 2) / gridElementSize); diff --git a/packages/example/src/components/VirtualizedSpatialGrid.tsx b/packages/example/src/components/VirtualizedSpatialGrid.tsx index a0b2903b..2dd89175 100644 --- a/packages/example/src/components/VirtualizedSpatialGrid.tsx +++ b/packages/example/src/components/VirtualizedSpatialGrid.tsx @@ -8,6 +8,7 @@ import { scaledPixels } from '../design-system/helpers/scaledPixels'; import { theme } from '../design-system/theme/theme'; import { Header } from '../modules/header/view/Header'; import { BottomArrow, TopArrow } from '../design-system/components/Arrows'; +import { ProgramInfo } from '../modules/program/domain/programInfo'; const NUMBER_OF_ROWS_VISIBLE_ON_SCREEN = 2; const NUMBER_OF_RENDERED_ROWS = NUMBER_OF_ROWS_VISIBLE_ON_SCREEN + 5; @@ -16,7 +17,9 @@ const INFINITE_SCROLL_ROW_THRESHOLD = 2; export const VirtualizedSpatialGrid = ({ containerStyle }: { containerStyle?: ViewStyle }) => { const renderItem = useCallback( - ({ item, index }) => , + ({ item, index }: { item: ProgramInfo; index: number }) => ( + + ), [], ); diff --git a/packages/example/src/components/remote-control/CustomEventEmitter.ts b/packages/example/src/components/remote-control/CustomEventEmitter.ts index 5aec4d7f..d6c9267c 100644 --- a/packages/example/src/components/remote-control/CustomEventEmitter.ts +++ b/packages/example/src/components/remote-control/CustomEventEmitter.ts @@ -29,14 +29,18 @@ export default class CustomEventEmitter(eventType: Key, handler?: Handler) => { this.handlers.set( eventType, + // @ts-expect-error TODO fix the type error this.handlers.get(eventType).filter((h) => h !== handler), ); }; emit = (eventType: Key, evt?: Events[Key]) => { const eventTypeHandlers = this.handlers.get(eventType); + // @ts-expect-error TODO fix the type error for (let index = eventTypeHandlers.length - 1; index >= 0; index--) { + // @ts-expect-error TODO fix the type error const handler = eventTypeHandlers[index]; + // @ts-expect-error TODO fix the type error if (handler(evt)) { return; } diff --git a/packages/example/src/hooks/useKey.ts b/packages/example/src/hooks/useKey.ts index 0c0ba780..e47f2381 100644 --- a/packages/example/src/hooks/useKey.ts +++ b/packages/example/src/hooks/useKey.ts @@ -13,7 +13,9 @@ export const useKey = (key: SupportedKeys, callback: (pressedKey: SupportedKeys) if (actualKey !== key) return; return callback(key); }; + // @ts-expect-error TODO fix the type error RemoteControlManager.addKeydownListener(remoteControlListener); + // @ts-expect-error TODO fix the type error return () => RemoteControlManager.removeKeydownListener(remoteControlListener); }, [key, callback]); }; diff --git a/packages/example/src/modules/header/view/Header.tsx b/packages/example/src/modules/header/view/Header.tsx index 578a9547..d1356bb8 100644 --- a/packages/example/src/modules/header/view/Header.tsx +++ b/packages/example/src/modules/header/view/Header.tsx @@ -25,6 +25,7 @@ interface HeaderProps { } export const Header = ({ title, description, verticalSize }: HeaderProps) => { + // @ts-expect-error TODO fix type error const imageSource = images[Math.floor(Math.random() * 9)]; return ( diff --git a/packages/example/src/modules/program/view/ProgramList.tsx b/packages/example/src/modules/program/view/ProgramList.tsx index d4c0e401..6025e853 100644 --- a/packages/example/src/modules/program/view/ProgramList.tsx +++ b/packages/example/src/modules/program/view/ProgramList.tsx @@ -33,7 +33,7 @@ type ProgramListProps = { data?: ProgramInfo[]; listSize?: number; variant?: 'normal' | 'variable-size'; - parentRef?: MutableRefObject; + parentRef?: MutableRefObject; isActive: boolean; }; @@ -45,7 +45,7 @@ export const ProgramList = React.forwardRef( ({ orientation, containerStyle, data, parentRef, isActive, variant, listSize = 1000 }, ref) => { const navigation = useNavigation>(); const theme = useTheme(); - const listRef = useRef(null); + const listRef = useRef(null); const renderItem = useCallback( ({ item, index }: { item: ProgramInfo; index: number }) => ( @@ -80,13 +80,13 @@ export const ProgramList = React.forwardRef( (pressedKey: SupportedKeys) => { const isBackKey = pressedKey === SupportedKeys.Back; const isRowActive = isActive && isScreenFocused; - const isFirstElementFocused = listRef.current.currentlyFocusedItemIndex === 0; + const isFirstElementFocused = listRef.current?.currentlyFocusedItemIndex === 0; if (!isBackKey || !isRowActive || isFirstElementFocused) { return false; } - listRef.current.focus(0); + listRef.current?.focus(0); return true; }, [isActive, isScreenFocused, listRef], @@ -104,8 +104,10 @@ export const ProgramList = React.forwardRef( numberOfRenderedItems={WINDOW_SIZE} numberOfItemsVisibleOnScreen={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN} onEndReachedThresholdItemsNumber={NUMBER_OF_ITEMS_VISIBLE_ON_SCREEN} + // @ts-expect-error TODO change the type from ReactElement to ReactNode in the core descendingArrow={isActive ? : null} descendingArrowContainerStyle={styles.leftArrowContainer} + // @ts-expect-error TODO change the type from ReactElement to ReactNode in the core ascendingArrow={isActive ? : null} ascendingArrowContainerStyle={styles.rightArrowContainer} ref={(elementRef) => { @@ -124,11 +126,13 @@ export const ProgramsRow = ({ variant = 'normal', listSize, parentRef, + data, }: { containerStyle?: object; variant?: 'normal' | 'variable-size'; listSize?: number; - parentRef?: MutableRefObject; + parentRef?: MutableRefObject; + data?: ProgramInfo[]; }) => { const theme = useTheme(); return ( @@ -143,6 +147,7 @@ export const ProgramsRow = ({ listSize={listSize} parentRef={parentRef} isActive={isActive} + data={data} /> )} diff --git a/packages/example/src/modules/program/view/ProgramListWithTitle.tsx b/packages/example/src/modules/program/view/ProgramListWithTitle.tsx index e1d50b04..3289b719 100644 --- a/packages/example/src/modules/program/view/ProgramListWithTitle.tsx +++ b/packages/example/src/modules/program/view/ProgramListWithTitle.tsx @@ -8,7 +8,7 @@ import { SpatialNavigationVirtualizedListRef } from '../../../../../lib/src/spat type Props = { title: string; listSize?: number; - parentRef?: MutableRefObject; + parentRef?: MutableRefObject; }; export const ProgramListWithTitle = ({ title, parentRef, listSize }: Props) => { diff --git a/packages/example/src/pages/AsynchronousContent.tsx b/packages/example/src/pages/AsynchronousContent.tsx index b5d69e23..44038a99 100644 --- a/packages/example/src/pages/AsynchronousContent.tsx +++ b/packages/example/src/pages/AsynchronousContent.tsx @@ -8,7 +8,7 @@ import { useState } from 'react'; import { ActivityIndicator } from 'react-native'; import styled from '@emotion/native'; -function sleep(ms) { +function sleep(ms: number) { return new Promise((resolve) => setTimeout(resolve, ms)); } @@ -49,7 +49,7 @@ export const AsynchronousContent = () => {