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

refactor: tweak cookbook (#1636)

* refactor: move files around

* refactor: simplify

* chore: remove custom fonts

* chore: tweak eslint

* chore: update yarn.lock

Author: vanGalilea

examples/cookbook/.eslintrc

@@ -1,3 +1,8 @@
 {
-  "extends": "@callstack"
+  "extends": "@callstack",
+  "rules": {
+    "react-native-a11y/has-valid-accessibility-ignores-invert-colors": "off",
+    "react-native/no-color-literals": "off",
+    "react-native-a11y/has-valid-accessibility-descriptors": "off",
+  }
 }

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

@@ -2,14 +2,15 @@
   "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
@@ -26,6 +27,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "plugins": ["expo-router"]
   }
 }

examples/cookbook/app.json

@@ -0,0 +1,22 @@
+import * as React from 'react';
+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/_layout.tsx

@@ -1,16 +1,24 @@
 import * as React from 'react';
-import { View, Text } from 'react-native';
+import { StyleSheet, 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={styles.container}>
       <Text>Hello {user ? user.name : 'Stranger'}</Text>
       <Text>Theme: {theme}</Text>
     </View>
   );
 }
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

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

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

examples/cookbook/custom-render/WelcomeScreen.test.tsx renamed to examples/cookbook/app/custom-render/__tests__/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/app/custom-render/__tests__/test-utils.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { UserProvider } from './providers/user-provider';
+import { ThemeProvider } from './providers/theme-provider';
+import WelcomeScreen from './WelcomeScreen';
+
+export default function Example() {
+  return (
+    <UserProvider.Provider value={null}>
+      <ThemeProvider.Provider value={'light'}>
+        <WelcomeScreen />
+      </ThemeProvider.Provider>
+    </UserProvider.Provider>
+  );
+}