feat: add composeProviders, withComposeProviders

Author: chungheon_yi

apps/docs/package.json

@@ -11,10 +11,10 @@
     "storybook": "storybook dev -p 6006"
   },
   "dependencies": {
-    "@lodado/react-namespace": "workspace:*",
     "@lodado/namespace-core": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "@lodado/react-namespace": "workspace:*",
+    "react": "^18.2.37",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.24.5",
@@ -38,7 +38,8 @@
     "@storybook/react": "^8.2.6",
     "@storybook/react-vite": "^8.2.6",
     "@storybook/test": "^8.2.6",
-    "@types/react": "18.2.37",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^1.3.2",
     "chromatic": "^6.24.1",
     "eslint-config-react-namespace": "workspace:*",

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

@@ -0,0 +1,34 @@
+import { ComposeProviders } from '@lodado/react-namespace'
+import { useCallback } from 'react'
+
+import { BoardProvider, createUser1Scope, createUser2Scope, RepositoryProvider } from './components/Provider'
+import TicTacToeGame from './components/TicTacToeGame'
+import PlayerRepository from './models/PlayerRepository'
+import TicTacToe from './models/TicTacToe'
+
+export const App = () => {
+  const game = useCallback(() => new TicTacToe(), [])
+  const player1Repo = useCallback(() => new PlayerRepository('🔵'), [])
+  const player2Repo = useCallback(() => new PlayerRepository('❌'), [])
+
+  const user1 = createUser1Scope({})
+  const user2 = createUser2Scope({})
+
+  return (
+    <ComposeProviders
+      providers={[
+        <BoardProvider overwriteStore={game} />,
+        <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}
+        />
+      </div>
+    </ComposeProviders>
+  )
+}

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

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

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

@@ -0,0 +1,19 @@
+import { createNamespaceContext, createNamespaceScope } from '@lodado/react-namespace'
+
+import PlayerRepository from '../models/PlayerRepository'
+import TicTacToe from '../models/TicTacToe'
+
+export const [createRepositoryProvider, createRepositoryScope] = createNamespaceScope('TicTacToeRepository')
+
+export const {
+  Provider: RepositoryProvider,
+  useNamespaceStores: useRepositoryStores,
+  useNamespaceContext: useRepositoryContext,
+} = createRepositoryProvider<PlayerRepository>('repository', {})
+
+export const createUser1Scope = createRepositoryScope()
+export const createUser2Scope = createRepositoryScope()
+
+export const { Provider: BoardProvider, useNamespaceContext: useBoardContext } = createNamespaceContext({
+  globalStore: () => new TicTacToe(),
+})

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

@@ -0,0 +1,58 @@
+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'
+
+const TicTacToeGame = ({ player1Scope, player2Scope }: { player1Scope: Scope<any>; player2Scope: Scope<any> }) => {
+  const [turn, setTurn] = useState(0)
+
+  // you can swap scope whatever you want
+  const currentUserScope = turn % 2 === 0 ? player1Scope : player2Scope
+
+  const game = useBoardContext()!
+  const repository = useRepositoryContext(currentUserScope)!
+  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 (
+    <div>
+      <h2>Tic Tac Toe</h2>
+      <span>current Player : {repository?.getIcon()}</span>
+
+      {game.getWinner() && <p>Winner: {game.getWinner()}</p>}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 100px)' }}>
+        {game.getBoard().map((row, rowIndex) =>
+          row.map((cell, colIndex) => (
+            <button
+              type="button"
+              // this is just simple example, so i just ignore the key warning
+              // eslint-disable-next-line react/no-array-index-key
+              key={`${rowIndex}-${colIndex}`}
+              style={{ width: '100px', height: '100px', fontSize: '24px' }}
+              onClick={() => handleMove(rowIndex, colIndex)}
+              disabled={!!cell || !!game.getWinner()}
+            >
+              {cell}
+            </button>
+          )),
+        )}
+      </div>
+      <button type="button" onClick={resetGame}>
+        Reset
+      </button>
+    </div>
+  )
+}
+
+export default TicTacToeGame

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

@@ -0,0 +1,24 @@
+import { NamespaceStore } from '@lodado/namespace-core'
+
+/**
+ * TicTacToe Player Repository handles player-specific data.
+ */
+export default class PlayerRepository extends NamespaceStore<{ icon: string }> {
+  constructor(icon: string) {
+    super({ icon })
+  }
+
+  /**
+   * Get the player's icon.
+   */
+  getIcon(): string {
+    return this.state.icon
+  }
+
+  /**
+   * Perform additional player-specific actions if needed (e.g., logging moves).
+   */
+  logMove(row: number, col: number): void {
+    // console.log(`Player ${this.state.icon} moved to (${row}, ${col})`)
+  }
+}

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

@@ -0,0 +1,91 @@
+import { NamespaceStore } from '@lodado/namespace-core'
+
+/**
+ * Represents the state of a Tic Tac Toe game.
+ */
+export default class TicTacToe extends NamespaceStore<{
+  board: (string | null)[][]
+  winner: string | 'Draw' | null
+}> {
+  constructor() {
+    super({
+      board: Array(3)
+        .fill(null)
+        .map(() => Array(3).fill(null)),
+      winner: null,
+    })
+  }
+
+  /**
+   * Get the game board.
+   */
+  getBoard(): (string | null)[][] {
+    return this.state.board
+  }
+
+  /**
+   * Get the winner.
+   */
+  getWinner(): string | 'Draw' | null {
+    return this.state.winner
+  }
+
+  /**
+   * Make a move at the specified row and column for the given player's icon.
+   */
+  makeMove(row: number, col: number, icon: string): void {
+    if (this.state.winner) {
+      alert('game is already over!')
+      return
+    }
+    if (this.state.board[row][col]) {
+      alert('Cell is already occupied!')
+      return
+    }
+
+    this.state.board[row][col] = icon
+    this.checkWinner(icon)
+  }
+
+  /**
+   * 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
+  }
+
+  /**
+   * Check if there's a winner or if the game is a draw.
+   */
+  private checkWinner(icon: string): void {
+    const { board } = this.state
+
+    // Check rows, columns, and diagonals for a winner.
+    const lines = [
+      ...board,
+      ...board[0].map((_, col) => board.map((row) => row[col])),
+      [board[0][0], board[1][1], board[2][2]],
+      [board[0][2], board[1][1], board[2][0]],
+    ]
+
+    if (
+      lines.some((line) => {
+        if (line.every((cell) => cell === icon)) {
+          this.state.winner = icon
+          return true
+        }
+
+        return false
+      })
+    )
+      return
+
+    // Check for draw.
+    if (board.flatMap((ele) => ele).every((cell) => cell)) {
+      this.state.winner = 'Draw'
+    }
+  }
+}

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

@@ -0,0 +1,43 @@
+import PlayerRepository from './PlayerRepository'
+import TicTacToe from './TicTacToe'
+
+/**
+ * TicTacToe UseCase orchestrates game logic and player interactions.
+ *
+ * use case should be 3 usecases, but i am too lazy to make 3 example usecases for now..
+ */
+export class TicTacToeUseCase {
+  private game: TicTacToe
+  private playerRepo: PlayerRepository
+
+  constructor(game: TicTacToe, playerRepo: PlayerRepository) {
+    this.game = game
+    this.playerRepo = playerRepo
+  }
+
+  /**
+   * Make a move in the game for the given player.
+   */
+  async play({ row, col }: { row: number; col: number }): Promise<void> {
+    const repo = this.playerRepo
+
+    const icon = repo.getIcon()
+
+    this.game.makeMove(row, col, icon)
+    repo.logMove(row, col)
+  }
+
+  /**
+   * Reset the game.
+   */
+  async resetGame(): Promise<void> {
+    this.game.reset()
+  }
+
+  /**
+   * Get the current game state.
+   */
+  async getGameState(): Promise<TicTacToe> {
+    return this.game
+  }
+}

apps/react-namespace/package.json

@@ -27,7 +27,6 @@
   "devDependencies": {
     "@types/lodash-es": "^4.17.12",
     "@types/node": "^20.12.7",
-    "@types/react": "^18.3.12",
     "babel-jest": "29.5.0",
     "eslint": "^8.57.0",
     "eslint-config-react-namespace": "workspace:*",
@@ -41,7 +40,9 @@
   },
   "peerDependencies": {
     "react": "^18.0",
-    "@lodado/namespace-core": "workspace:*"
+    "@lodado/namespace-core": "workspace:*",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {

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

@@ -0,0 +1 @@
+export * from './providerHelper'