chore: Zustand wip

Author: mdjastrzebski

examples/cookbook/app/state/zustand/TaskList.tsx

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Pressable, StyleSheet, Text, TextInput, View } from 'react-native';
+import { generateId } from '../../utils';
+import { useTasksStore } from './state';
+
+export default function TaskList() {
+  const tasks = useTasksStore((state) => state.tasks);
+  const addTask = useTasksStore((state) => state.addTask);
+  const [newTaskTitle, setNewTaskTitle] = React.useState('');
+
+  const handleAddTask = () => {
+    addTask({
+      id: generateId(),
+      title: newTaskTitle,
+    });
+    setNewTaskTitle('');
+  };
+
+  return (
+    <View style={styles.screen}>
+      {tasks.map((task) => (
+        <Text key={task.id} testID="task-item">
+          {task.title}
+        </Text>
+      ))}
+
+      {!tasks.length ? <Text>No tasks, start by adding one...</Text> : null}
+
+      <TextInput
+        accessibilityLabel="New Task"
+        placeholder="New Task..."
+        value={newTaskTitle}
+        onChangeText={(text) => setNewTaskTitle(text)}
+      />
+
+      <Pressable accessibilityRole="button" onPress={handleAddTask}>
+        <Text>Add Task</Text>
+      </Pressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  screen: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

examples/cookbook/app/state/zustand/__tests__/TaskList.test.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { render, screen, userEvent } from '@testing-library/react-native';
+import TaskList from '../TaskList';
+import { addTask, getAllTasks, newTaskTitleAtom, store, tasksAtom } from '../state';
+
+jest.useFakeTimers();
+
+test('renders an empty task list', () => {
+  render(<TaskList />);
+  expect(screen.getByText(/no tasks, start by adding one/i)).toBeOnTheScreen();
+});
+
+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 () => {
+  renderWithAtoms(<TaskList />, {
+    initialValues: [
+      [tasksAtom, INITIAL_TASKS],
+      [newTaskTitleAtom, ''],
+    ],
+  });
+
+  expect(screen.getByText(/buy bread/i)).toBeOnTheScreen();
+  expect(screen.getAllByTestId('task-item')).toHaveLength(1);
+
+  const user = userEvent.setup();
+  await user.type(screen.getByPlaceholderText(/new task/i), 'Buy almond milk');
+  await user.press(screen.getByRole('button', { name: /add task/i }));
+
+  expect(screen.getByText(/buy almond milk/i)).toBeOnTheScreen();
+  expect(screen.getAllByTestId('task-item')).toHaveLength(2);
+});
+
+test('modify store outside of components', () => {
+  // Set the initial to do items in the store
+  store.set(tasksAtom, INITIAL_TASKS);
+  expect(getAllTasks()).toEqual(INITIAL_TASKS);
+
+  const NEW_TASK = { id: '2', title: 'Buy almond milk' };
+  addTask(NEW_TASK);
+  expect(getAllTasks()).toEqual([...INITIAL_TASKS, NEW_TASK]);
+});

examples/cookbook/app/state/zustand/state.ts

@@ -0,0 +1,12 @@
+import { create } from 'zustand';
+import { Task } from './types';
+
+export interface TasksState {
+  tasks: Task[];
+  addTask: (task: Task) => void;
+}
+
+export const useTasksStore = create<TasksState>((set) => ({
+  tasks: [],
+  addTask: (task: Task) => set((state) => ({ tasks: [...state.tasks, task] })),
+}));

examples/cookbook/app/state/zustand/test-utils.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { render } from '@testing-library/react-native';
+import { TasksState } from './state';
+
+export interface RenderWithState {
+  initialState: Partial<TasksState>;
+}
+
+/**
+ * Renders a React component with Jotai atoms for testing purposes.
+ *
+ * @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 renderWithState = <T,>(component: React.ReactElement, options: RenderWithState) => {
+  return render(
+    <HydrateAtomsWrapper initialValues={options.initialValues}>{component}</HydrateAtomsWrapper>,
+  );
+};

examples/cookbook/app/state/zustand/types.ts

@@ -0,0 +1,4 @@
+export type Task = {
+  id: string;
+  title: string;
+};

examples/cookbook/app/utils.ts

@@ -0,0 +1,6 @@
+import 'react-native-get-random-values';
+import { nanoid } from 'nanoid';
+
+export function generateId() {
+  return nanoid();
+}

examples/cookbook/package.json

@@ -25,7 +25,8 @@
     "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"
+    "react-native-web": "~0.19.6",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

examples/cookbook/yarn.lock

@@ -10332,6 +10332,7 @@ __metadata:
     react-native-web: "npm:~0.19.6"
     react-test-renderer: "npm:18.2.0"
     typescript: "npm:^5.3.0"
+    zustand: "npm:^4.5.4"
   languageName: unknown
   linkType: soft
 
@@ -11680,6 +11681,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"use-sync-external-store@npm:1.2.0":
+  version: 1.2.0
+  resolution: "use-sync-external-store@npm:1.2.0"
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.0 || ^18.0.0
+  checksum: 10c0/ac4814e5592524f242921157e791b022efe36e451fe0d4fd4d204322d5433a4fc300d63b0ade5185f8e0735ded044c70bcf6d2352db0f74d097a238cebd2da02
+  languageName: node
+  linkType: hard
+
 "util-deprecate@npm:^1.0.1, util-deprecate@npm:~1.0.1":
   version: 1.0.2
   resolution: "util-deprecate@npm:1.0.2"
@@ -12182,3 +12192,23 @@ __metadata:
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
   linkType: hard
+
+"zustand@npm:^4.5.4":
+  version: 4.5.4
+  resolution: "zustand@npm:4.5.4"
+  dependencies:
+    use-sync-external-store: "npm:1.2.0"
+  peerDependencies:
+    "@types/react": ">=16.8"
+    immer: ">=9.0.6"
+    react: ">=16.8"
+  peerDependenciesMeta:
+    "@types/react":
+      optional: true
+    immer:
+      optional: true
+    react:
+      optional: true
+  checksum: 10c0/479af491ffa1f1eb2c38b3ba25dc4e14339e8b35a60033d3f6c165b22f8be8163f7e1370015ded9c6e28548cd25af84a73fb40b5fad0bd7882d16ddd5ed613c6
+  languageName: node
+  linkType: hard