chore(example): fix typescript checks not running on the example (#152)

Pierre Poupin · web-flow · commit b68e7bbd44b9 · 2024-09-13T16:58:24.000+02:00
* 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
diff --git 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
@@ -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
@@ -112,7 +112,9 @@ export const Menu = ({ state, navigation }: BottomTabBarProps) => {
                   return (
                     <Fragment key={route.key}>
                       <MenuItem
+                        // @ts-expect-error TODO fix this type error
                         label={menuItems[route.name].label}
+                        // @ts-expect-error TODO fix this type error
                         icon={menuItems[route.name].icon}
                         isMenuOpen={isMenuOpen}
                         isActive={state.index === index}
diff --git a/packages/example/src/components/PanEvent/PanEvent.ts b/packages/example/src/components/PanEvent/PanEvent.ts
@@ -1,7 +1,7 @@
 import { getGridCoordinates, moveFocus } from './PanEvent.utils';
 
 class PanEvent {
-  private orientation = undefined;
+  private orientation: string | undefined = undefined;
   private lastIndex = 0;
 
   reset = () => {
diff --git 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
@@ -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 }) => <ProgramNode programInfo={item} label={index?.toString?.()} />,
+    ({ item, index }: { item: ProgramInfo; index: number }) => (
+      <ProgramNode programInfo={item} label={index?.toString?.()} />
+    ),
     [],
   );
 
diff --git 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<Events extends Record<EventType, unknown
   off = <Key extends keyof Events>(eventType: Key, handler?: Handler<Events[keyof Events]>) => {
     this.handlers.set(
       eventType,
+      // @ts-expect-error TODO fix the type error
       this.handlers.get(eventType).filter((h) => h !== handler),
     );
   };
 
   emit = <Key extends keyof Events>(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
@@ -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
@@ -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 (
     <SpatialNavigationNode orientation="horizontal">
diff --git 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<SpatialNavigationVirtualizedListRef>;
+  parentRef?: MutableRefObject<SpatialNavigationVirtualizedListRef | null>;
   isActive: boolean;
 };
 
@@ -45,7 +45,7 @@ export const ProgramList = React.forwardRef<View, ProgramListProps>(
   ({ orientation, containerStyle, data, parentRef, isActive, variant, listSize = 1000 }, ref) => {
     const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
     const theme = useTheme();
-    const listRef = useRef<SpatialNavigationVirtualizedListRef>(null);
+    const listRef = useRef<SpatialNavigationVirtualizedListRef | null>(null);
 
     const renderItem = useCallback(
       ({ item, index }: { item: ProgramInfo; index: number }) => (
@@ -80,13 +80,13 @@ export const ProgramList = React.forwardRef<View, ProgramListProps>(
       (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<View, ProgramListProps>(
           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 ? <LeftArrow /> : null}
           descendingArrowContainerStyle={styles.leftArrowContainer}
+          // @ts-expect-error TODO change the type from ReactElement to ReactNode in the core
           ascendingArrow={isActive ? <RightArrow /> : 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<SpatialNavigationVirtualizedListRef>;
+  parentRef?: MutableRefObject<SpatialNavigationVirtualizedListRef | null>;
+  data?: ProgramInfo[];
 }) => {
   const theme = useTheme();
   return (
@@ -143,6 +147,7 @@ export const ProgramsRow = ({
           listSize={listSize}
           parentRef={parentRef}
           isActive={isActive}
+          data={data}
         />
       )}
     </SpatialNavigationNode>
diff --git 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<SpatialNavigationVirtualizedListRef>;
+  parentRef?: MutableRefObject<SpatialNavigationVirtualizedListRef | null>;
 };
 
 export const ProgramListWithTitle = ({ title, parentRef, listSize }: Props) => {
diff --git 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 = () => {
         <StyledNavigationRow direction="horizontal">
           <Button label="First button" />
           <SpatialNavigationNode>
-            {shouldShow && <Button label="Second button (asynchronously showed)" />}
+            {shouldShow ? <Button label="Second button (asynchronously showed)" /> : <></>}
           </SpatialNavigationNode>
           <Button label="Third button" />
         </StyledNavigationRow>
diff --git a/packages/example/src/pages/GridWithLongNodesPage.tsx b/packages/example/src/pages/GridWithLongNodesPage.tsx
@@ -23,9 +23,9 @@ import { BottomArrow, TopArrow } from '../design-system/components/Arrows';
 const HEADER_SIZE = scaledPixels(400);
 
 export const GridWithLongNodesPage = () => {
-  const firstItemRef = useRef<SpatialNavigationNodeRef>(null);
-  const lastItemRef = useRef<SpatialNavigationNodeRef>(null);
-  const parentRef = useRef<SpatialNavigationVirtualizedListRef>(null);
+  const firstItemRef = useRef<SpatialNavigationNodeRef | null>(null);
+  const lastItemRef = useRef<SpatialNavigationNodeRef | null>(null);
+  const parentRef = useRef<SpatialNavigationVirtualizedListRef | null>(null);
 
   return (
     <Page>
@@ -56,13 +56,13 @@ export const GridWithLongNodesPage = () => {
               <Button
                 label="Go to first"
                 onSelect={() => {
-                  parentRef.current.focus(0);
+                  parentRef.current?.focus(0);
                 }}
               />
               <Button
                 label="Go to last"
                 onSelect={() => {
-                  parentRef.current.focus(999);
+                  parentRef.current?.focus(999);
                 }}
               />
             </Row>
@@ -118,14 +118,14 @@ const ButtonRow = ({
   firstItemRef,
   lastItemRef,
 }: {
-  firstItemRef: MutableRefObject<SpatialNavigationNodeRef>;
-  lastItemRef: MutableRefObject<SpatialNavigationNodeRef>;
+  firstItemRef: MutableRefObject<SpatialNavigationNodeRef | null>;
+  lastItemRef: MutableRefObject<SpatialNavigationNodeRef | null>;
 }) => {
   return (
     <SpatialNavigationNode orientation="horizontal">
       <ListContainer>
-        <Button label="Go to first item" onSelect={() => firstItemRef.current.focus()} />
-        <Button label="Go to last item" onSelect={() => lastItemRef.current.focus()} />
+        <Button label="Go to first item" onSelect={() => firstItemRef.current?.focus()} />
+        <Button label="Go to last item" onSelect={() => lastItemRef.current?.focus()} />
       </ListContainer>
     </SpatialNavigationNode>
   );
diff --git a/packages/example/src/pages/ListWithVariableSize.tsx b/packages/example/src/pages/ListWithVariableSize.tsx
@@ -8,7 +8,7 @@ import { SpatialNavigationNode } from '../../../lib/src/spatial-navigation/compo
 import { Spacer } from '../design-system/components/Spacer';
 import { Button } from '../design-system/components/Button';
 import { useState } from 'react';
-import { ProgramList } from '../modules/program/view/ProgramList';
+import { ProgramsRow } from '../modules/program/view/ProgramList';
 import { useTheme } from '@emotion/react';
 
 const ROW_PADDING = scaledPixels(70);
@@ -48,9 +48,8 @@ export const ListWithVariableSize = () => {
         <Container>
           <SpatialNavigationNode orientation="horizontal">
             <ListContainer>
-              <ProgramList
+              <ProgramsRow
                 data={programs}
-                listRef={null}
                 containerStyle={{ height: theme.sizes.program.portrait.height + ROW_PADDING }}
               />
             </ListContainer>
diff --git a/packages/example/src/utils/throttle.ts b/packages/example/src/utils/throttle.ts
@@ -1,7 +1,10 @@
-export const throttle = (callback, delay) => {
+export const throttle = (
+  callback: { (): void; (...arg0: unknown[]): void },
+  delay: number | undefined,
+) => {
   let wait = false;
 
-  return (...args) => {
+  return (...args: unknown[]) => {
     if (wait) {
       return;
     }
diff --git a/packages/example/tsconfig.json b/packages/example/tsconfig.json
@@ -4,5 +4,9 @@
       "react-tv-space-navigation": ["../lib/src/index"]
     }
   },
-  "extends": "expo/tsconfig.base"
+  "include": [
+    "../lib/src/**/*",
+    "../example/src/**/*"
+  ],
+  "extends": "../../tsconfig.base"
 }
diff --git a/yarn.lock b/yarn.lock
@@ -8629,6 +8629,7 @@ __metadata:
     react-native-screens: 3.31.1
     react-native-svg: 15.2.0
     react-test-renderer: ^18.2.0
+    typescript: ^5.6.2
   languageName: unknown
   linkType: soft
 
@@ -14974,6 +14975,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@npm:^5.6.2":
+  version: 5.6.2
+  resolution: "typescript@npm:5.6.2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: 48777e1dabd9044519f56cd012b0296e3b72bafe12b7e8e34222751d45c67e0eba5387ecdaa6c14a53871a29361127798df6dc8d1d35643a0a47cb0b1c65a33a
+  languageName: node
+  linkType: hard
+
 "typescript@npm:~5.3.3":
   version: 5.3.3
   resolution: "typescript@npm:5.3.3"
@@ -14994,6 +15005,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"typescript@patch:typescript@^5.6.2#~builtin<compat/typescript>":
+  version: 5.6.2
+  resolution: "typescript@patch:typescript@npm%3A5.6.2#~builtin<compat/typescript>::version=5.6.2&hash=77c9e2"
+  bin:
+    tsc: bin/tsc
+    tsserver: bin/tsserver
+  checksum: c084ee1ab865f108c787e6233a5f63c126c482c0c8e87ec998ac5288a2ad54b603e1ea8b8b272355823b833eb31b9fabb99e8c6152283e1cb47e3a76bd6faf6c
+  languageName: node
+  linkType: hard
+
 "typescript@patch:typescript@~5.3.3#~builtin<compat/typescript>":
   version: 5.3.3
   resolution: "typescript@patch:typescript@npm%3A5.3.3#~builtin<compat/typescript>::version=5.3.3&hash=77c9e2"

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,7 @@ interface HeaderProps {`
`25`	`25`	`}`
`26`	`26`
`27`	`27`	`export const Header = ({ title, description, verticalSize }: HeaderProps) => {`
	`28`	`+ // @ts-expect-error TODO fix type error`
`28`	`29`	`const imageSource = images[Math.floor(Math.random() * 9)];`
`29`	`30`	`return (`
`30`	`31`	`<SpatialNavigationNode orientation="horizontal">`