chore: revamp the cookbook app (#1635)

* create a Jotai examples dir in cookbook with related utils, add state management recipes dir

* add docs with examples

* extract state from component to state, utils, simplify types and custom render func.

* refactor: tweaks & cleanup

* make cookbook app runnable

* update yarn.lock file

* fix TS issue and spelling

* remove duplicate files and adjust testMatch in config to ensure no utils test run

---------

Co-authored-by: stevegalili <[email protected]>

Author: vanGalilea

examples/cookbook/App.tsx

@@ -1,8 +1,10 @@
 # RNTL Cookbook
 
-This example app gathers recipes from the [RNTL Cookbook](https://callstack.github.io/react-native-testing-library/cookbook).
+This example app gathers recipes from
+the [RNTL Cookbook](https://callstack.github.io/react-native-testing-library/cookbook).
 
-Each recipe described in the Cookbook should have a corresponding code example in this repo.
+Each recipe described in the Cookbook should have a corresponding code example screen in this repo.
 
 Note:
-Since examples will showcase usage of different dependencies, the dependencies in `package.json` fill will grow much larger that in an normal React Native. This is fine 🐶☕️🔥.
+Since examples will showcase usage of different dependencies, the dependencies in `package.json`
+file will grow much larger that in a normal React Native. This is fine 🐶☕️🔥.

examples/cookbook/README.md

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { screen } from '@testing-library/react-native';
 import { renderWithProviders } from './test-utils';
-import { WelcomeScreen } from './WelcomeScreen';
+import WelcomeScreen from "../../../app/custom-render";
 
 test('renders WelcomeScreen in light theme', () => {
   renderWithProviders(<WelcomeScreen />, { theme: 'light' });

examples/cookbook/custom-render/WelcomeScreen.test.tsx renamed to examples/cookbook/__tests__/app/custom-render/index.test.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { render } from '@testing-library/react-native';
-import { User, UserProvider } from './providers/user-provider';
-import { Theme, ThemeProvider } from './providers/theme-provider';
+import { User, UserProvider } from '../../../app/custom-render/providers/user-provider';
+import { Theme, ThemeProvider } from '../../../app/custom-render/providers/theme-provider';
 
 interface RenderWithProvidersProps {
   user?: User | null;

examples/cookbook/custom-render/test-utils.tsx renamed to examples/cookbook/__tests__/app/custom-render/test-utils.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { render, screen, userEvent } from '@testing-library/react-native';
+import TaskList from '../../../app/jotai';
 import { renderWithAtoms } from './test-utils';
-import { TaskList } from './TaskList';
-import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from './state';
-import { Task } from './types';
+import { Task } from '../../../app/jotai/types';
+import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../../../app/jotai/state';
 
 jest.useFakeTimers();
 

examples/cookbook/jotai/TaskList.test.tsx renamed to examples/cookbook/__tests__/app/jotai/index.test.tsx

@@ -2,19 +2,22 @@
   "expo": {
     "name": "RNTL Cookbook App",
     "slug": "rntl-cookbook",
+    "scheme": "rntlcookbook",
     "version": "1.0.0",
     "orientation": "portrait",
     "icon": "./assets/icon.png",
     "userInterfaceStyle": "light",
     "splash": {
       "image": "./assets/splash.png",
-      "resizeMode": "contain",
-      "backgroundColor": "#ffffff"
+      "resizeMode": "cover",
+      "backgroundColor": "#FFFFFF"
     },
     "updates": {
       "fallbackToCacheTimeout": 0
     },
-    "assetBundlePatterns": ["**/*"],
+    "assetBundlePatterns": [
+      "**/*"
+    ],
     "ios": {
       "supportsTablet": true
     },
@@ -26,6 +29,18 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": [
+      "expo-router",
+      [
+        "expo-font",
+        {
+          "fonts": [
+            "./assets/fonts/OpenSans-Regular.ttf",
+            "./assets/fonts/OpenSans-Bold.ttf"
+          ]
+        }
+      ]
+    ]
   }
 }

examples/cookbook/jotai/test-utils.tsx renamed to examples/cookbook/__tests__/app/jotai/test-utils.tsx

@@ -0,0 +1,21 @@
+import { Stack } from 'expo-router';
+import theme from '../theme';
+
+export default function RootLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: theme.colors.primary,
+        },
+        headerTintColor: '#fff',
+        headerTitleStyle: {
+          fontWeight: 'bold',
+        },
+        headerBackTitleVisible: false,
+      }}
+    >
+      <Stack.Screen name="index" options={{ headerTitle: '' }} />
+    </Stack>
+  );
+}

examples/cookbook/app.json

@@ -0,0 +1,13 @@
+import { Slot } from 'expo-router';
+import { UserProvider } from './providers/user-provider';
+import { ThemeProvider } from './providers/theme-provider';
+
+export default function CustomRenderLayout() {
+  return (
+    <UserProvider.Provider value={null}>
+      <ThemeProvider.Provider value={'light'}>
+        <Slot />
+      </ThemeProvider.Provider>
+    </UserProvider.Provider>
+  );
+}

examples/cookbook/app/_layout.tsx

@@ -1,14 +1,14 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { Text, View } from 'react-native';
 import { useUser } from './providers/user-provider';
 import { useTheme } from './providers/theme-provider';
 
-export function WelcomeScreen() {
+export default function WelcomeScreen() {
   const theme = useTheme();
   const user = useUser();
 
   return (
-    <View>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       <Text>Hello {user ? user.name : 'Stranger'}</Text>
       <Text>Theme: {theme}</Text>
     </View>