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

Author: stevegalili

examples/cookbook/jotai/TodoList.test.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import { render, screen, userEvent } from '@testing-library/react-native';
+import { TodoItem, TodoList, todosAtom } from './TodoList';
+import { renderWithAtoms } from './test-utils';
+
+jest.useFakeTimers();
+test('renders an empty to do list', () => {
+  render(<TodoList />);
+  expect(screen.getByText(/no todos, start by adding one/i)).toBeOnTheScreen();
+});
+
+const INITIAL_TODOS: TodoItem[] = [{ id: '1', text: 'Buy bread' }];
+
+test('renders a to do list with 1 items initially, and adds a new item', async () => {
+  renderWithAtoms<TodoItem[]>(<TodoList />, {
+    initialValues: [
+      [todosAtom, INITIAL_TODOS],
+      // optional: add any other Jotai atoms and their corresponding initial values
+    ],
+  });
+  expect(screen.getByText(/buy bread/i)).toBeOnTheScreen();
+  expect(screen.getAllByLabelText('todo-item')).toHaveLength(1);
+
+  const user = userEvent.setup();
+  const addTodoButton = screen.getByRole('button', { name: /add a random to-do/i });
+  await user.press(addTodoButton);
+
+  expect(screen.getByText(/buy almond milk/i)).toBeOnTheScreen();
+  expect(screen.getAllByLabelText('todo-item')).toHaveLength(2);
+});

examples/cookbook/jotai/TodoList.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { FlatList, Pressable, Text, View } from 'react-native';
+import { atom, useAtom } from 'jotai';
+
+export type TodoItem = {
+  id: string;
+  text: string;
+};
+
+export const todosAtom = atom<TodoItem[]>([]);
+
+export function TodoList() {
+  const [todos, setTodos] = useAtom(todosAtom);
+
+  const handleAddTodo = () =>
+    setTodos((prev) => [
+      ...prev,
+      {
+        id: Math.random().toString(36).slice(2, 11),
+        text: 'Buy almond milk',
+      },
+    ]);
+
+  if (!todos.length) {
+    return <Text>No todos, start by adding one...</Text>;
+  }
+
+  return (
+    <View>
+      <FlatList
+        data={todos}
+        renderItem={({ item }: { item: TodoItem }) => (
+          <Text key={item.id} accessibilityLabel={'todo-item'}>
+            {item.text}
+          </Text>
+        )}
+      />
+      <Pressable accessibilityRole="button" onPress={handleAddTodo}>
+        <Text>Add a random to-do</Text>
+      </Pressable>
+    </View>
+  );
+}

examples/cookbook/jotai/test-utils.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import {Suspense} from 'react';
+import {render} from '@testing-library/react-native';
+import {ActivityIndicator} from "react-native";
+import {useHydrateAtoms} from "jotai/utils";
+import {IHydrateAtomsProps, InitialValue, InitialValues, IRenderWithAtomsOptions} from "./types";
+import {Provider} from "jotai";
+
+const HydrateAtoms = <T, >({initialValues, children}: IHydrateAtomsProps<T>) => {
+  useHydrateAtoms(initialValues as unknown as InitialValues);
+  return children;
+};
+
+export default function JotaiTestProvider<T>({
+                                               initialValues,
+                                               children,
+                                             }: IHydrateAtomsProps<T>) {
+  return (
+    <Provider>
+      <Suspense fallback={<ActivityIndicator/>}>
+        <HydrateAtoms initialValues={initialValues}>{children}</HydrateAtoms>
+      </Suspense>
+    </Provider>
+  );
+}
+
+const getWrapper =
+  <T, >(initialValues: Array<InitialValue<T>>) =>
+    ({children}: { children: React.JSX.Element }) => (
+      <JotaiTestProvider initialValues={initialValues}>
+        {children}
+      </JotaiTestProvider>
+    );
+
+/**
+ * Renders a React component with Jotai atoms for testing purposes.
+ *
+ * @template T - The type of the initial values for the atoms.
+ * @param component - The React component to render.
+ * @param options - The render options including the initial atom values.
+ * @returns The render result from `@testing-library/react-native`.
+ */
+export const renderWithAtoms = <T, >(
+  component: React.ReactElement,
+  options: IRenderWithAtomsOptions<T>,
+) => {
+  const {initialValues} = options;
+  return render(component, {
+    wrapper: getWrapper(initialValues),
+    ...options,
+  });
+};

examples/cookbook/jotai/types.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+import { PrimitiveAtom } from 'jotai/vanilla/atom';
+import { useHydrateAtoms } from 'jotai/utils';
+import { RenderOptions as RntlRenderOptions } from '@testing-library/react-native';
+
+type WithInitialValue<Value> = {
+  init: Value;
+};
+type UseHydrateAtomsParams = Parameters<typeof useHydrateAtoms>;
+export type InitialValues = UseHydrateAtomsParams[0];
+export type InitialValue<Value> = [PrimitiveAtom<Value> & WithInitialValue<Value>, Value];
+
+export interface IRenderWithAtomsOptions<T> extends RntlRenderOptions {
+  initialValues: Array<InitialValue<T>>;
+}
+
+export interface IHydrateAtomsProps<T> {
+  initialValues: Array<InitialValue<T>>;
+  children: React.JSX.Element;
+}

examples/cookbook/package.json

@@ -13,6 +13,7 @@
   "dependencies": {
     "expo": "^50.0.4",
     "expo-status-bar": "~1.11.1",
+    "jotai": "^2.8.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.73.2",