Refactor DocumentProvider and useDocument for improved type safety an…

…d clarity

examples/react-todomvc/src/App.tsx

@@ -11,10 +11,9 @@ import 'todomvc-app-css/index.css';
  * `App` is the root component of the application.
  */
 export default function App() {
-  const { root, update, loading, error } = useDocument<
-    { todos: JSONArray<Todo> },
-    any
-  >();
+  const { root, update, loading, error } = useDocument<{
+    todos: JSONArray<Todo>;
+  }>();
 
   if (loading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;

packages/react/src/DocumentProvider.tsx

@@ -15,22 +15,25 @@
  */
 
 import { createContext, useContext, useEffect, useState } from 'react';
-import { Document, Indexable } from '@yorkie-js/sdk';
+import { Document, Presence, Indexable } from '@yorkie-js/sdk';
 import { useYorkie } from './YorkieProvider';
 
-type DocumentContextType<R, P> = {
+type DocumentContextType<R, P extends Indexable = Indexable> = {
   root: R;
   presences: { clientID: string; presence: P }[];
   update: (callback: (root: R) => void) => void;
   loading: boolean;
   error: Error | undefined;
 };
 
-const DocumentContext = createContext<DocumentContextType<any, any> | null>(
-  null,
-);
+const DocumentContext = createContext<DocumentContextType<any> | null>(null);
 
-export const DocumentProvider = <R, P extends Indexable>({
+/**
+ * `DocumentProvider` is a component that provides a document to its children.
+ * This component must be under a `YorkieProvider` component to initialize the
+ * Yorkie client properly.
+ */
+export const DocumentProvider = <R, P extends Indexable = Indexable>({
   docKey,
   initialRoot,
   children,
@@ -85,7 +88,7 @@ export const DocumentProvider = <R, P extends Indexable>({
     };
   }, [client, docKey]);
 
-  const update = (callback: (root: any) => void) => {
+  const update = (callback: (root: R, presence: Presence<P>) => void) => {
     if (doc) {
       doc.update(callback);
     }
@@ -104,7 +107,7 @@ export const DocumentProvider = <R, P extends Indexable>({
  * `useDocument` is a custom hook that returns the root object and update function of the document.
  * This hook must be used within a `DocumentProvider`.
  */
-export const useDocument = <R, P extends Indexable>() => {
+export const useDocument = <R, P extends Indexable = Indexable>() => {
   const context = useContext(DocumentContext);
   if (!context) {
     throw new Error('useDocument must be used within a DocumentProvider');
@@ -133,12 +136,12 @@ export const useRoot = () => {
 };
 
 /**
- * `usePresence` is a custom hook that returns the presence of the document.
+ * `usePresences` is a custom hook that returns the presences of the document.
  */
-export const usePresence = () => {
+export const usePresences = () => {
   const context = useContext(DocumentContext);
   if (!context) {
-    throw new Error('usePresence must be used within a DocumentProvider');
+    throw new Error('usePresences must be used within a DocumentProvider');
   }
   return context.presences;
 };

packages/react/src/YorkieProvider.tsx

@@ -37,6 +37,7 @@ interface YorkieProviderProps {
 
 /**
  * `YorkieProvider` is a component that provides the Yorkie client to its children.
+ * It initializes the Yorkie client with the given API key and RPC address.
  */
 export const YorkieProvider: React.FC<
   PropsWithChildren<YorkieProviderProps>

packages/react/src/index.ts

@@ -22,7 +22,7 @@ import {
   DocumentProvider,
   useDocument,
   useRoot,
-  usePresence,
+  usePresences,
 } from './DocumentProvider';
 
 export type { JSONArray, JSONObject };
@@ -31,6 +31,6 @@ export {
   DocumentProvider,
   useDocument,
   useRoot,
-  usePresence,
+  usePresences,
   useYorkieDoc,
 };

packages/sdk/src/yorkie.ts

@@ -50,6 +50,7 @@ export {
   Document,
   type ChangeInfo,
 } from '@yorkie-js-sdk/src/document/document';
+export { Presence } from '@yorkie-js-sdk/src/document/presence/presence';
 export {
   type Observer,
   type Observable,