feat: Setup Zustand counter store

apps/web/package.json

@@ -120,7 +120,8 @@
     "use-stick-to-bottom": "^1.1.1",
     "usehooks-ts": "^3.1.1",
     "xstate": "^5.24.0",
-    "zod": "^4.1.5"
+    "zod": "^4.1.5",
+    "zustand": "^5.0.8"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",

apps/web/src/app/providers.tsx

@@ -7,6 +7,7 @@ import { NuqsAdapter } from "nuqs/adapters/next/app";
 import { jotaiStore } from "@/atoms/store";
 import { ThemeProvider } from "@/components/ui/theme-provider";
 import { TRPCReactProvider } from "@/lib/trpc/client";
+import { CounterStoreProvider } from "@/stores/counter-store-provider";
 
 export function Providers(props: Readonly<{ children: ReactNode }>) {
   return (
@@ -18,7 +19,9 @@ export function Providers(props: Readonly<{ children: ReactNode }>) {
         disableTransitionOnChange
       >
         <JotaiProvider store={jotaiStore}>
-          <TRPCReactProvider>{props.children}</TRPCReactProvider>
+          <CounterStoreProvider>
+            <TRPCReactProvider>{props.children}</TRPCReactProvider>
+          </CounterStoreProvider>
         </JotaiProvider>
       </ThemeProvider>
     </NuqsAdapter>

apps/web/src/stores/counter-store-provider.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import { type ReactNode, createContext, useRef, useContext } from "react";
+import { useStore } from "zustand";
+
+import {
+  type CounterStore,
+  createCounterStore,
+  defaultInitState,
+} from "@/stores/counter-store";
+
+export type CounterStoreApi = ReturnType<typeof createCounterStore>;
+
+export const CounterStoreContext = createContext<CounterStoreApi | undefined>(
+  undefined
+);
+
+export interface CounterStoreProviderProps {
+  children: ReactNode;
+}
+
+export const CounterStoreProvider = ({ children }: CounterStoreProviderProps) => {
+  const storeRef = useRef<CounterStoreApi | null>(null);
+  if (storeRef.current === null) {
+    storeRef.current = createCounterStore(defaultInitState);
+  }
+
+  return (
+    <CounterStoreContext.Provider value={storeRef.current}>
+      {children}
+    </CounterStoreContext.Provider>
+  );
+};
+
+export const useCounterStore = <T,>(selector: (store: CounterStore) => T): T => {
+  const counterStoreContext = useContext(CounterStoreContext);
+
+  if (!counterStoreContext) {
+    throw new Error("useCounterStore must be used within CounterStoreProvider");
+  }
+
+  return useStore(counterStoreContext, selector);
+};

apps/web/src/stores/counter-store.ts

@@ -0,0 +1,24 @@
+import { createStore } from "zustand/vanilla";
+
+export type CounterState = {
+  count: number;
+};
+
+export type CounterActions = {
+  decrementCount: () => void;
+  incrementCount: () => void;
+};
+
+export type CounterStore = CounterState & CounterActions;
+
+export const defaultInitState: CounterState = {
+  count: 0,
+};
+
+export const createCounterStore = (initState: CounterState = defaultInitState) => {
+  return createStore<CounterStore>()((set) => ({
+    ...initState,
+    decrementCount: () => set((state) => ({ count: state.count - 1 })),
+    incrementCount: () => set((state) => ({ count: state.count + 1 })),
+  }));
+};