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 <steve.galili@mywheels.nl>

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 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 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 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 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>

examples/cookbook/app/custom-render/_layout.tsx

@@ -0,0 +1,105 @@
+import React, {useCallback, useEffect} from 'react';
+import { FlatList, Image, Pressable, StyleSheet, Text, View } from 'react-native';
+import { useRouter } from 'expo-router';
+import * as SplashScreen from 'expo-splash-screen';
+import { useFonts } from 'expo-font';
+import theme from '../theme';
+
+void SplashScreen.preventAutoHideAsync();
+
+export default function Home() {
+  const router = useRouter();
+  const [loaded, error] = useFonts({
+    'OpenSans-Bold': require('../assets/fonts/OpenSans-Bold.ttf'),
+    'OpenSans-Regular': require('../assets/fonts/OpenSans-Regular.ttf'),
+  });
+
+  useEffect(() => {
+    if (loaded || error) {
+      void SplashScreen.hideAsync();
+    }
+  }, [loaded, error]);
+
+  if (!loaded && !error) {
+    return null;
+  }
+  const renderItem = useCallback(({ item }: {item: Recipe}) => (
+    <Pressable style={styles.pressable} onPress={() => router.push(item.path)}>
+      <Text style={styles.pressableText}>{item.title}</Text>
+    </Pressable>
+  ),[]);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.bannerContainer}>
+        <Image source={require('../assets/icon.png')} style={styles.logo} />
+        <Image
+          resizeMode={'contain'}
+          source={require('../assets/gradientRNBanner.png')}
+          style={styles.banner}
+        />
+        <Text style={styles.title}>Testing Library</Text>
+        <Text style={styles.subTitle}>Cookbook App</Text>
+      </View>
+      <FlatList<Recipe>
+        data={recipes}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.id.toString()}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: '#F5F5F5',
+    paddingVertical: 20,
+  },
+  bannerContainer: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  title: {
+    fontSize: 20,
+    fontFamily: 'OpenSans-Bold',
+    color: theme.colors.black,
+  },
+  subTitle: {
+    fontSize: 14,
+    fontFamily: 'OpenSans-Regular',
+    color: theme.colors.gray,
+  },
+  banner: {
+    height: 40,
+  },
+  logo: {
+    width: 80,
+    height: 80,
+    marginBottom: 20,
+  },
+  pressable: {
+    backgroundColor: '#9b6dff',
+    padding: 12,
+    marginBottom: 8,
+    borderRadius: 16,
+  },
+  pressableText: {
+    color: '#fff',
+    fontSize: 14,
+    fontFamily: 'OpenSans-Bold',
+    textAlign: 'center',
+  },
+});
+
+type Recipe = {
+  id: number;
+  title: string;
+  path: string;
+};
+const recipes: Recipe[] = [
+  { id: 2, title: 'Welcome Screen with Custom Render', path: 'custom-render/' },
+  { id: 1, title: 'Task List with Jotai', path: 'jotai/' },
+];

examples/cookbook/custom-render/WelcomeScreen.tsx examples/cookbook/app/custom-render/index.tsx

@@ -1,10 +1,11 @@
+import 'react-native-get-random-values';
+import { nanoid } from 'nanoid';
 import * as React from 'react';
 import { Pressable, Text, TextInput, View } from 'react-native';
 import { useAtom } from 'jotai';
-import { nanoid } from 'nanoid';
 import { newTaskTitleAtom, tasksAtom } from './state';
 
-export function TaskList() {
+export default function TaskList() {
   const [tasks, setTasks] = useAtom(tasksAtom);
   const [newTaskTitle, setNewTaskTitle] = useAtom(newTaskTitleAtom);
 
@@ -20,7 +21,7 @@ export function TaskList() {
   };
 
   return (
-    <View>
+    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
       {tasks.map((task) => (
         <Text key={task.id} testID="task-item">
           {task.title}

examples/cookbook/custom-render/providers/theme-provider.tsx examples/cookbook/app/custom-render/providers/theme-provider.tsx

@@ -2,4 +2,5 @@ module.exports = {
   preset: '@testing-library/react-native',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   setupFilesAfterEnv: ['./jest-setup.ts'],
+  testMatch: ['**/*.test.{ts,tsx}'],
 };

examples/cookbook/custom-render/providers/user-provider.tsx examples/cookbook/app/custom-render/providers/user-provider.tsx

@@ -1,5 +1,5 @@
 {
-  "main": "node_modules/expo/AppEntry.js",
+  "main": "expo-router/entry",
   "scripts": {
     "start": "expo start",
     "android": "expo start --android",
@@ -12,20 +12,29 @@
   },
   "dependencies": {
     "expo": "^50.0.4",
+    "expo-constants": "~15.4.6",
+    "expo-font": "~11.10.3",
+    "expo-linking": "~6.2.2",
+    "expo-router": "~3.4.10",
     "expo-status-bar": "~1.11.1",
     "jotai": "^2.8.4",
     "nanoid": "^3.3.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.2",
+    "react-native-get-random-values": "~1.8.0",
+    "react-native-safe-area-context": "4.8.2",
+    "react-native-screens": "~3.29.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@expo/metro-runtime": "~3.1.3",
     "@testing-library/react-native": "^12.4.0",
     "@types/eslint": "^8.56.10",
     "@types/jest": "^29.5.12",
     "@types/react": "~18.2.45",
+    "@types/react-native-get-random-values": "^1",
     "eslint": "^8.57.0",
     "jest": "^29.7.0",
     "react-test-renderer": "18.2.0",

examples/cookbook/app/index.tsx

@@ -0,0 +1,8 @@
+export default {
+  colors: {
+    primary: '#9b6dff',
+    secondary: '#58baad',
+    black: '#323232',
+    gray: '#5b5a5b',
+  },
+};

examples/cookbook/jotai/TaskList.tsx examples/cookbook/app/jotai/index.tsx

@@ -26,7 +26,7 @@ export function renderWithProviders<T>(
 }
 ```
 
-```tsx title=WelcomeScreen.test.tsx
+```tsx title=custom-render/index.test.tsx
 import { screen } from '@testing-library/react-native';
 import { renderWithProviders } from '../test-utils';
 // ...

examples/cookbook/jotai/state.ts examples/cookbook/app/jotai/state.ts

@@ -12,7 +12,7 @@ the developer experience.
 Let's assume we have a simple task list component that uses Jotai for state management. The
 component has a list of tasks, a text input for typing new task name and a button to add a new task to the list.
 
-```tsx title=TaskList.tsx
+```tsx title=jotai/index.test.tsx
 import * as React from 'react';
 import { Pressable, Text, TextInput, View } from 'react-native';
 import { useAtom } from 'jotai';
@@ -65,7 +65,7 @@ We can test our `TaskList` component using React Native Testing Library's (RNTL)
 function. Although it is sufficient to test the empty state of the `TaskList` component, it is not
 enough to test the component with initial tasks present in the list.
 
-```tsx title=TaskList.test.tsx
+```tsx title=jotai/index.test.tsx
 import * as React from 'react';
 import { render, screen, userEvent } from '@testing-library/react-native';
 import { renderWithAtoms } from './test-utils';
@@ -144,7 +144,8 @@ We can now use the `renderWithAtoms` function to render the `TaskList` component
 In our test, we populated only one atom and its initial value, but you can add other Jotai atoms and their corresponding values to the initialValues array as needed.
 :::
 
-```tsx title=TaskList.test.tsx
+```tsx title=jotai/index.test.tsx
+=======
 const INITIAL_TASKS: Task[] = [{ id: '1', title: 'Buy bread' }];
 
 test('renders a to do list with 1 items initially, and adds a new item', async () => {
@@ -200,7 +201,7 @@ the initial to-do items in the store and then checking if the functions work as
 No special setup is required to test these functions, as `store.set` is available by default by
 Jotai.
 
-```tsx title=TaskList.test.tsx
+```tsx title=jotai/index.test.tsx
 import { addTask, getAllTasks, store, tasksAtom } from './state';
 
 //...