chore(example): example of non virtualized manual grid (#51)

* chore: example of non virtualized manual grid

* chore: default focus and fragment

* chore: dynamic program list for grid

* chore: non hardcoded colors

* chore: fix typos and namings

packages/example/App.tsx

@@ -13,6 +13,7 @@ import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/b
 import { ProgramInfo } from './src/modules/program/domain/programInfo';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import { ProgramDetail } from './src/pages/ProgramDetail';
+import { NonVirtualizedGridPage } from './src/pages/NonVirtualizedGridPage';
 
 const Stack = createNativeStackNavigator<RootStackParamList>();
 
@@ -21,6 +22,7 @@ const Tab = createBottomTabNavigator<RootTabParamList>();
 export type RootTabParamList = {
   Home: undefined;
   ProgramGridPage: undefined;
+  NonVirtualizedGridPage: undefined;
 };
 
 export type RootStackParamList = {
@@ -45,6 +47,7 @@ const TabNavigator = () => {
     >
       <Tab.Screen name="Home" component={Home} />
       <Tab.Screen name="ProgramGridPage" component={ProgramGridPage} />
+      <Tab.Screen name="NonVirtualizedGridPage" component={NonVirtualizedGridPage} />
     </Tab.Navigator>
   );
 };

packages/example/src/components/VirtualizedSpatialGrid.tsx

@@ -5,6 +5,7 @@ import { SpatialNavigationVirtualizedGrid } from 'react-tv-space-navigation';
 import { programInfos } from '../modules/program/infra/programInfos';
 import { ProgramNode } from '../modules/program/view/ProgramNode';
 import { scaledPixels } from '../design-system/helpers/scaledPixels';
+import { theme } from '../design-system/theme/theme';
 
 const NUMBER_OF_ROWS_VISIBLE_ON_SCREEN = 2;
 const NUMBER_OF_RENDERED_ROWS = NUMBER_OF_ROWS_VISIBLE_ON_SCREEN + 3;
@@ -43,7 +44,7 @@ export const VirtualizedSpatialGrid = ({
 const styles = StyleSheet.create({
   container: {
     height: scaledPixels(1000),
-    backgroundColor: '#222',
+    backgroundColor: theme.colors.background.mainHover,
     padding: scaledPixels(30),
     paddingLeft: scaledPixels(75),
     borderRadius: scaledPixels(20),

packages/example/src/pages/NonVirtualizedGridPage.tsx

@@ -0,0 +1,65 @@
+import { DefaultFocus, SpatialNavigationNode } from 'react-tv-space-navigation';
+import { Page } from '../components/Page';
+import '../components/configureRemoteControl';
+import { getPrograms } from '../modules/program/infra/programInfos';
+import { useNavigation } from '@react-navigation/native';
+import { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { RootStackParamList } from '../../App';
+import styled from '@emotion/native';
+import { scaledPixels } from '../design-system/helpers/scaledPixels';
+import { ProgramNode } from '../modules/program/view/ProgramNode';
+import chunk from 'lodash/chunk';
+import { ProgramInfo } from '../modules/program/domain/programInfo';
+import { theme } from '../design-system/theme/theme';
+
+const ROW_SIZE = 7;
+
+const renderProgramsList = (programsList: ProgramInfo[]) => <ProgramRow programs={programsList} />;
+
+export const NonVirtualizedGridPage = () => {
+  const programsLists = chunk(getPrograms(), ROW_SIZE);
+  return (
+    <Page>
+      <Container>
+        <SpatialNavigationNode alignInGrid>
+          <DefaultFocus>{programsLists.map(renderProgramsList)}</DefaultFocus>
+        </SpatialNavigationNode>
+      </Container>
+    </Page>
+  );
+};
+
+const ProgramRow = ({ programs }: { programs: ProgramInfo[] }) => {
+  const navigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>();
+  return (
+    <SpatialNavigationNode orientation="horizontal">
+      <ListContainer>
+        {programs.map((program) => {
+          return (
+            <ProgramNode
+              programInfo={program}
+              onSelect={() => navigation.push('ProgramDetail', { programInfo: program })}
+              key={program.id}
+            />
+          );
+        })}
+      </ListContainer>
+    </SpatialNavigationNode>
+  );
+};
+
+const ListContainer = styled.View(({ theme }) => ({
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  justifyContent: 'center',
+  gap: theme.spacings.$4,
+  padding: theme.spacings.$4,
+}));
+
+const Container = styled.View({
+  backgroundColor: theme.colors.background.mainHover,
+  margin: 'auto',
+  borderRadius: scaledPixels(20),
+  padding: scaledPixels(30),
+  alignItems: 'flex-start',
+});