docs: tictactoe usecase add

Author: chungheon_yi

apps/docs/stories/scope/tictactoe/App.tsx

@@ -1,12 +1,18 @@
 import { ComposeProviders } from '@lodado/react-namespace'
 import { useCallback } from 'react'
 
-import { BoardProvider, createUser1Scope, createUser2Scope, RepositoryProvider } from './components/Provider'
+import {
+  BoardProvider,
+  createUser1Scope,
+  createUser2Scope,
+  RepositoryProvider,
+  ScopeContainerProvider,
+} from './components/Provider'
 import TicTacToeGame from './components/TicTacToeGame'
 import PlayerRepository from './models/PlayerRepository'
 import TicTacToe from './models/TicTacToe'
 
-export const App = () => {
+export const TicTacToeExample = () => {
   const game = useCallback(() => new TicTacToe(), [])
   const player1Repo = useCallback(() => new PlayerRepository('🔵'), [])
   const player2Repo = useCallback(() => new PlayerRepository('❌'), [])
@@ -18,16 +24,15 @@ export const App = () => {
     <ComposeProviders
       providers={[
         <BoardProvider overwriteStore={game} />,
+        <ScopeContainerProvider value={{ user1, user2 }} />,
+
         <RepositoryProvider scope={user1.__scopeTicTacToeRepository} overwriteStore={player1Repo} />,
         <RepositoryProvider scope={user2.__scopeTicTacToeRepository} overwriteStore={player2Repo} />,
       ]}
     >
       <div className="App">
         <h1>TicTacToe example</h1>
-        <TicTacToeGame
-          player1Scope={user1.__scopeTicTacToeRepository}
-          player2Scope={user2.__scopeTicTacToeRepository}
-        />
+        <TicTacToeGame />
       </div>
     </ComposeProviders>
   )

apps/docs/stories/scope/tictactoe/TicTacToegame.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable max-classes-per-file */
 
-import { App } from './App'
+import { TicTacToeExample } from './App'
 
 const meta = {
   title: 'scope/TicTacToeExample',
@@ -12,5 +12,5 @@ const meta = {
 export default meta
 
 export const Example = () => {
-  return <App />
+  return <TicTacToeExample />
 }

apps/docs/stories/scope/tictactoe/components/Provider.tsx

@@ -1,4 +1,4 @@
-import { createNamespaceContext, createNamespaceScope } from '@lodado/react-namespace'
+import { createNamespaceContext, createNamespaceScope, createScopeContainer, Scope } from '@lodado/react-namespace'
 
 import PlayerRepository from '../models/PlayerRepository'
 import TicTacToe from '../models/TicTacToe'
@@ -14,6 +14,12 @@ export const {
 export const createUser1Scope = createRepositoryScope()
 export const createUser2Scope = createRepositoryScope()
 
-export const { Provider: BoardProvider, useNamespaceContext: useBoardContext } = createNamespaceContext({
+export const {
+  Provider: BoardProvider,
+  useNamespaceStores: useBoardNamespaceStores,
+  useNamespaceContext: useBoardNamespaceContext,
+} = createNamespaceContext({
   globalStore: () => new TicTacToe(),
 })
+
+export const { ScopeContainerProvider, useScopeContainer } = createScopeContainer<'user1' | 'user2'>()

apps/docs/stories/scope/tictactoe/components/TicTacToeGame.tsx

@@ -1,28 +1,26 @@
-import { Scope } from '@lodado/react-namespace'
-import { useCallback, useMemo, useState } from 'react'
-
-import TicTacToe from '../models/TicTacToe'
 import { TicTacToeUseCase } from '../models/TicTacToeUsecase'
-import { useBoardContext, useRepositoryContext } from './Provider'
+import { useBoardNamespaceContext, useBoardNamespaceStores, useRepositoryContext, useScopeContainer } from './Provider'
+
+const TicTacToeGame = () => {
+  const { user1: player1Scope, user2: player2Scope } = useScopeContainer()
 
-const TicTacToeGame = ({ player1Scope, player2Scope }: { player1Scope: Scope<any>; player2Scope: Scope<any> }) => {
-  const [turn, setTurn] = useState(0)
+  const { turn, board } = useBoardNamespaceStores((state) => {
+    return { turn: state.turn, board: state.board }
+  })
 
   // you can swap scope whatever you want
   const currentUserScope = turn % 2 === 0 ? player1Scope : player2Scope
 
-  const game = useBoardContext()!
-  const repository = useRepositoryContext(currentUserScope)!
+  const game = useBoardNamespaceContext()!
+  const repository = useRepositoryContext(currentUserScope.__scopeTicTacToeRepository)!
   const useCase = new TicTacToeUseCase(game, repository)
 
   const handleMove = async (row: number, col: number) => {
     await useCase.play({ row, col })
-    setTurn(turn + 1)
   }
 
   const resetGame = async () => {
     await useCase.resetGame()
-    setTurn(turn + 1)
   }
 
   return (
@@ -32,7 +30,7 @@ const TicTacToeGame = ({ player1Scope, player2Scope }: { player1Scope: Scope<any
 
       {game.getWinner() && <p>Winner: {game.getWinner()}</p>}
       <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 100px)' }}>
-        {game.getBoard().map((row, rowIndex) =>
+        {board.map((row, rowIndex) =>
           row.map((cell, colIndex) => (
             <button
               type="button"

apps/docs/stories/scope/tictactoe/models/TicTacToe.ts

@@ -6,13 +6,15 @@ import { NamespaceStore } from '@lodado/namespace-core'
 export default class TicTacToe extends NamespaceStore<{
   board: (string | null)[][]
   winner: string | 'Draw' | null
+  turn: number
 }> {
   constructor() {
     super({
       board: Array(3)
         .fill(null)
         .map(() => Array(3).fill(null)),
       winner: null,
+      turn: 0,
     })
   }
 
@@ -45,16 +47,18 @@ export default class TicTacToe extends NamespaceStore<{
 
     this.state.board[row][col] = icon
     this.checkWinner(icon)
+    this.state.turn += 1
+  }
+
+  updateTurn(): void {
+    this.state.turn += 1
   }
 
   /**
    * Reset the game to its initial state.
    */
   reset(): void {
-    this.state.board = Array(3)
-      .fill(null)
-      .map(() => Array(3).fill(null))
-    this.state.winner = null
+    this.reset()
   }
 
   /**

apps/react-namespace/src/components/providerHelper/ScopeContainerProvider.tsx

@@ -0,0 +1,30 @@
+'use client'
+
+import { createContext, FC, ReactNode, useContext, useMemo } from 'react'
+
+import { JSON_KEY_TYPE, Scope } from '../../type'
+
+export type ScopeContainer<KEY_TYPE extends JSON_KEY_TYPE> = {
+  [key in KEY_TYPE]: { [__scopeProp in JSON_KEY_TYPE]: Scope<any> }
+}
+
+export function createScopeContainer<T extends JSON_KEY_TYPE>() {
+  const ScopeContext = createContext<ScopeContainer<T> | null>(null)
+
+  const ScopeContainerProvider: FC<{
+    value: ScopeContainer<T>
+    children?: ReactNode
+  }> = ({ value, children }) => {
+    return <ScopeContext.Provider value={useMemo(() => value, Object.keys(value))}>{children}</ScopeContext.Provider>
+  }
+
+  const useScopeContainer = () => {
+    const context = useContext(ScopeContext)
+    if (context === null) {
+      throw new Error('useScope must be used within a ScopeProvider')
+    }
+    return context
+  }
+
+  return { ScopeContainerProvider, useScopeContainer }
+}

apps/react-namespace/src/components/providerHelper/index.tsx

@@ -2,5 +2,6 @@ import ComposeProviders from './ComposeProviders'
 import WithComposeProviders from './WithComposeProvider'
 
 export * from './ComposeProviders'
+export * from './ScopeContainerProvider'
 export * from './WithComposeProvider'
 export { ComposeProviders, WithComposeProviders }

apps/react-namespace/src/createNamespaceContext.test.tsx

@@ -180,7 +180,7 @@ describe('TestComponent with NamespaceContext', () => {
 })
 
 describe('TestComponent with only overwriteStore', () => {
-  const { Provider, useNamespaceStores } = createNamespaceContext<TestStore['state'], TestStore>({})
+  const { Provider, useNamespaceStores } = createNamespaceContext<TestStore>({})
 
   const TestComponent2 = () => {
     const { count, increment, decrement, reset } = useNamespaceStores((state) => ({ count: state.count }))

apps/react-namespace/src/createNamespaceContext.tsx

@@ -7,15 +7,15 @@ import { createContext, FC, ReactNode, useContext, useMemo } from 'react'
 import { StoreOption } from './type'
 import { createNamespaceHooks } from './utils/createNamespaceHooks'
 
-export function createNamespaceContext<
-  State extends Record<string | symbol, any>,
-  StoreType extends NamespaceStore<State>,
->({ globalStore: globalStoreDIP, localStore }: StoreOption<State, StoreType>) {
+export function createNamespaceContext<StoreType extends NamespaceStore<Record<string | symbol, any>>>({
+  globalStore: globalStoreDIP,
+  localStore,
+}: StoreOption<StoreType['state'], StoreType>) {
   const Context = createContext<StoreType | undefined>(undefined)
   const globalStore = globalStoreDIP && typeof globalStoreDIP === 'function' ? globalStoreDIP() : globalStoreDIP
 
   const { useNamespaceStores, useNamespaceAction, useNamespaceContext } = createNamespaceHooks<
-    State,
+    StoreType['state'],
     StoreType,
     undefined
   >(() => useContext(Context))

apps/react-namespace/src/createNamespaceScope.tsx

@@ -1,19 +1,12 @@
 /* eslint-disable no-shadow */
 import { NamespaceStore } from '@lodado/namespace-core'
 import { isNil } from 'lodash-es'
-import React, { Context, createContext, FC, ReactNode, useContext, useMemo } from 'react'
+import { createContext, FC, ReactNode, useContext, useMemo } from 'react'
 
 import { createNamespaceContext } from './createNamespaceContext'
-import { StoreOption } from './type'
+import { CreateScope, Scope, StoreOption } from './type'
 import { createNamespaceHooks } from './utils/createNamespaceHooks'
 
-export type Scope<C = any> = { [scopeName: string]: Context<C>[] } | undefined
-export type ScopeHook = (scope: Scope) => { [__scopeProp: string]: Scope }
-export interface CreateScope {
-  scopeName: string
-  (): ScopeHook
-}
-
 export function composeContextScopes(...scopes: CreateScope[]) {
   const baseScope = scopes[0]
   if (scopes.length === 1) return baseScope