Initial commit

Author: alZyad

.gitignore

@@ -0,0 +1,38 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo
+
+android
+ios

App.tsx

@@ -0,0 +1,108 @@
+import './src/components/configureRemoteControl';
+import { ThemeProvider } from '@emotion/react';
+import { NavigationContainer } from '@react-navigation/native';
+import { useWindowDimensions } from 'react-native';
+import { theme } from './src/design-system/theme/theme';
+import { Home } from './src/pages/Home';
+import { ProgramGridPage } from './src/pages/ProgramGridPage';
+import { Menu } from './src/components/Menu/Menu';
+import { MenuProvider } from './src/components/Menu/MenuContext';
+import styled from '@emotion/native';
+import { useFonts } from './src/hooks/useFonts';
+import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+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';
+import { GridWithLongNodesPage } from './src/pages/GridWithLongNodesPage';
+import { useTVPanEvent } from './src/components/PanEvent/useTVPanEvent';
+import { SpatialNavigationDeviceTypeProvider } from '../lib/src/spatial-navigation/context/DeviceContext';
+import { ListWithVariableSize } from './src/pages/ListWithVariableSize';
+import { AsynchronousContent } from './src/pages/AsynchronousContent';
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+const Tab = createBottomTabNavigator<RootTabParamList>();
+
+export type RootTabParamList = {
+  Home: undefined;
+  ProgramGridPage: undefined;
+  NonVirtualizedGridPage: undefined;
+  GridWithLongNodesPage: undefined;
+  ListWithVariableSize: undefined;
+  AsynchronousContent: undefined;
+};
+
+export type RootStackParamList = {
+  TabNavigator: undefined;
+  ProgramDetail: { programInfo: ProgramInfo };
+};
+
+const RenderMenu = (props: BottomTabBarProps) => <Menu {...props} />;
+
+const TabNavigator = () => {
+  return (
+    <MenuProvider>
+      <Tab.Navigator
+        screenOptions={{
+          headerShown: false,
+        }}
+        initialRouteName="Home"
+        tabBar={RenderMenu}
+        sceneContainerStyle={{
+          marginLeft: theme.sizes.menu.closed,
+          backgroundColor: theme.colors.background.main,
+        }}
+      >
+        <Tab.Screen name="Home" component={Home} />
+        <Tab.Screen name="ProgramGridPage" component={ProgramGridPage} />
+        <Tab.Screen name="NonVirtualizedGridPage" component={NonVirtualizedGridPage} />
+        <Tab.Screen name="GridWithLongNodesPage" component={GridWithLongNodesPage} />
+        <Tab.Screen name="ListWithVariableSize" component={ListWithVariableSize} />
+        <Tab.Screen name="AsynchronousContent" component={AsynchronousContent} />
+      </Tab.Navigator>
+    </MenuProvider>
+  );
+};
+
+function App() {
+  useTVPanEvent();
+  const { height, width } = useWindowDimensions();
+  const areFontsLoaded = useFonts();
+
+  if (!areFontsLoaded) {
+    return null;
+  }
+
+  return (
+    <NavigationContainer>
+      <ThemeProvider theme={theme}>
+        <SpatialNavigationDeviceTypeProvider>
+          <Container width={width} height={height}>
+            <Stack.Navigator
+              screenOptions={{
+                headerShown: false,
+                contentStyle: {
+                  backgroundColor: theme.colors.background.main,
+                },
+              }}
+              initialRouteName="TabNavigator"
+            >
+              <Stack.Screen name="TabNavigator" component={TabNavigator} />
+              <Stack.Screen name="ProgramDetail" component={ProgramDetail} />
+            </Stack.Navigator>
+          </Container>
+        </SpatialNavigationDeviceTypeProvider>
+      </ThemeProvider>
+    </NavigationContainer>
+  );
+}
+
+export default App;
+
+const Container = styled.View<{ width: number; height: number }>(({ width, height }) => ({
+  width,
+  height,
+  flexDirection: 'row-reverse',
+  backgroundColor: theme.colors.background.main,
+}));

README.md

@@ -0,0 +1,74 @@
+# Hoppix
+
+## Description
+
+Hoppix is a project that aims to provide an example TVOS application built using React Native. It includes features such as navigation, state management, and integration with web development.
+
+## Installation
+
+To install the project, follow these steps:
+
+1. Install the required dependencies:
+
+   ```
+   yarn install
+   ```
+
+2. Prebuild the app with expo before running:
+   ```
+   yarn prebuild
+   ```
+
+## Usage
+
+### Running the TVOS Application on Apple TV or Android TV
+
+You can run this demo application on AppleTV or AndroidTV
+To start the TV application, use one of the following commands:
+
+```
+yarn start
+yarn ios
+yarn android
+```
+
+This will initiate the TV application using React Native's Metro bundler.
+
+Make sure you have set up the necessary emulator/device configurations on XCode or Android Studio to run the project on AppleTV or Android TV.
+
+### tvOS troubleshooting
+
+If you get the error
+
+```
+CommandError: Failed to build iOS project. "xcodebuild" exited with error code 65.
+To view more error logs, try building the app with Xcode directly, by opening /Users/thomasrenaud/Desktop/SpaceNavigation/react-tv-space-navigation/packages/example/ios/hoppixTv.xcworkspace.
+
+Command line invocation:
+    /Applications/Xcode.app/Contents/Developer/usr/bin/xcodebuild -workspace /Users/thomasrenaud/Desktop/SpaceNavigation/react-tv-space-navigation/packages/example/ios/hoppixTv.xcworkspace -configuration Debug -scheme hoppixTv -destination id=B14D0E77-99C4-486F-8096-6584A23C9476
+
+User defaults from command line:
+    IDEPackageSupportUseBuiltinSCM = YES
+```
+
+please delete the .xcode.env.local in your ios directory, and run the `yarn ios` command again.
+
+### Running the Web Application
+
+Hoppix also supports running as a web application. To run the web version of the project, use the following command:
+
+```
+yarn web
+```
+
+This will start a development server using Webpack and serve the application in your default web browser.
+
+## Handling Remote Control
+
+In order to use Spatial Navigation in the Web Application or TV Application, you must configure the remoteControlManager to map your keyboard or remote keys to LRUD Directions.
+
+See [Remote Control](./src/components/remote-control/) for how to manage Platform Specific remote controls.
+
+## Contributing
+
+Contributions to Hoppix are welcome! If you find any issues or want to enhance the project, please submit a pull request or open an issue on the repository.

__tests__/App-test.tsx

@@ -0,0 +1,13 @@
+/**
+ * @format
+ */
+
+import 'react-native';
+import App from '../App';
+
+// Note: test renderer must be required after react-native.
+import renderer from 'react-test-renderer';
+
+it('renders correctly', () => {
+  renderer.create(<App />);
+});

app.json

@@ -0,0 +1,53 @@
+{
+  "expo": {
+    "name": "hoppixTv",
+    "slug": "hoppixTv",
+    "version": "1.0.0",
+    "orientation": "portrait",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "assetBundlePatterns": ["**/*"],
+    "ios": {
+      "supportsTablet": true,
+      "bundleIdentifier": "com.reactTvSpaceNavigation.hoppixTv"
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      },
+      "package": "com.reactTvSpaceNavigation.hoppixTv"
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "experiments": {
+      "baseUrl": "/react-tv-space-navigation"
+    },
+    "plugins": [
+      "@bam.tech/react-native-keyevent-expo-config-plugin",
+      [
+        "@react-native-tvos/config-tv",
+        {
+          "showVerboseWarnings": true
+        }
+      ],
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/Montserrat-Bold.ttf",
+            "./assets/fonts/Montserrat-Regular.ttf",
+            "./assets/fonts/Montserrat-SemiBold.ttf",
+            "./assets/fonts/Montserrat-Medium.ttf"
+          ]
+        }
+      ]
+    ]
+  }
+}

assets/adaptive-icon.png

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

assets/bunny_favicon.png

@@ -0,0 +1,26 @@
+// This is only used by jest
+module.exports = {
+  sourceMaps: 'inline',
+  presets: [
+    'module:metro-react-native-babel-preset',
+    '@babel/preset-env',
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+    '@babel/preset-typescript',
+  ],
+  plugins: [
+    [
+      'module-resolver',
+      {
+        alias: {
+          'react-tv-space-navigation': '../lib/src/index.ts',
+        },
+      },
+    ],
+    ['@babel/plugin-proposal-class-properties', { loose: false }],
+  ],
+};

assets/favicon.ico

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

assets/favicon.png

@@ -0,0 +1,53 @@
+// @ts-check
+
+/**
+ * Code in the react-native ecosystem if often shipped untransformed, with flow or typescript in files
+ * App code also needs to be transformed (it's TypeScript), but the rest of node_modules doesn't need to.
+ * Transforming the minimum amount of code makes tests run much faster
+ *
+ * If encountering a syntax error during tests with a new package, add it to this list
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require('path');
+
+const packagesToTransform = [
+  'react-native',
+  'react-native-(.*)',
+  '@react-native',
+  '@react-native-community',
+  '@react-native-tvos',
+  '@react-navigation',
+];
+
+/** @type {import('@jest/types').Config.InitialOptions} */
+const config = {
+  preset: '@testing-library/react-native',
+  /*
+   * What the preset provides:
+   * - a transformer to handle media assets (png, video)
+   */
+  // test environment setup
+  setupFiles: ['./src/testing/jest-setup.ts'],
+  setupFilesAfterEnv: ['./src/testing/jest-setupAfterEnv.ts'],
+  clearMocks: true,
+  // module resolution
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  testRegex: '\\.test\\.[jt]sx?$',
+  transform: {
+    '\\.[jt]sx?$': [
+      'babel-jest',
+      { configFile: path.resolve(__dirname, './babel.jest.config.js') },
+    ],
+  },
+  transformIgnorePatterns: [`node_modules/(?!(${packagesToTransform.join('|')})/)`],
+  cacheDirectory: '.cache/jest',
+  // coverage
+  collectCoverageFrom: ['src/**/*.{js,jsx,ts,tsx}'],
+  coveragePathIgnorePatterns: ['/node_modules/'],
+  // tools
+  watchPlugins: ['jest-watch-typeahead/filename', 'jest-watch-typeahead/testname'],
+  reporters: ['default', 'github-actions'], // Remove this line if your CI is not on Github actions
+};
+
+module.exports = config;