[FCE-399] Remove create fn (#71)

## Description

Removes the create function and segregates the hooks in the `/hooks`
directory.

## Motivation and Context

We don't want to export our hooks through a function. The boundary of a
client is now managed by the FishjamProvider.

## Types of changes

- [ ] Bug fix (non-breaking change which fixes an issue)
- [x] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to
      not work as expected)

examples/react-client/minimal-react/src/components/App.tsx

@@ -1,14 +1,14 @@
 import VideoPlayer from "./VideoPlayer";
 import type { Client } from "@fishjam-cloud/react-client";
-import { SCREEN_SHARING_MEDIA_CONSTRAINTS } from "@fishjam-cloud/react-client";
-import { useState } from "react";
 import {
+  SCREEN_SHARING_MEDIA_CONSTRAINTS,
+  useClient,
   useConnect,
   useDisconnect,
-  useClient,
   useStatus,
   useTracks,
-} from "./client";
+} from "@fishjam-cloud/react-client";
+import { useState } from "react";
 
 const FISHJAM_URL = "ws://localhost:5002";
 

examples/react-client/minimal-react/src/main.tsx

@@ -1,12 +1,12 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { App } from "./components/App";
-import { FishjamContextProvider } from "./components/client";
+import { FishjamProvider } from "@fishjam-cloud/react-client";
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <FishjamContextProvider>
+    <FishjamProvider>
       <App />
-    </FishjamContextProvider>
+    </FishjamProvider>
   </React.StrictMode>,
 );

examples/react-client/use-camera-and-microphone/src/AdditionalControls.tsx

@@ -1,9 +1,13 @@
-import { useCamera, useMicrophone, useStatus } from "./fishjamSetup";
 import { DeviceControls } from "./DeviceControls";
 import { atomWithStorage } from "jotai/utils";
 import { useAtom } from "jotai";
 import VideoPlayer from "./VideoPlayer";
 import AudioVisualizer from "./AudioVisualizer";
+import {
+  useCamera,
+  useMicrophone,
+  useStatus,
+} from "@fishjam-cloud/react-client";
 
 const showAdditionalComponentAtom = atomWithStorage(
   "show-additional-component",

examples/react-client/use-camera-and-microphone/src/MainControls.tsx

@@ -1,5 +1,11 @@
+import VideoPlayer from "./VideoPlayer";
+import { DeviceSelector } from "./DeviceSelector";
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { ThreeStateRadio } from "./ThreeStateRadio";
+import AudioVisualizer from "./AudioVisualizer";
 import {
-  useAuthErrorReason,
+  AUDIO_TRACK_CONSTRAINTS,
   useCamera,
   useClient,
   useConnect,
@@ -9,21 +15,13 @@ import {
   useSelector,
   useSetupMedia,
   useStatus,
-} from "./fishjamSetup";
-import VideoPlayer from "./VideoPlayer";
-import { DeviceSelector } from "./DeviceSelector";
-import { useAtom } from "jotai";
-import { atomWithStorage } from "jotai/utils";
-import { ThreeStateRadio } from "./ThreeStateRadio";
-import AudioVisualizer from "./AudioVisualizer";
-import {
-  AUDIO_TRACK_CONSTRAINTS,
   VIDEO_TRACK_CONSTRAINTS,
 } from "@fishjam-cloud/react-client";
 import { Badge } from "./Badge";
 import { DeviceControls } from "./DeviceControls";
 import { Radio } from "./Radio";
 import { ScreenShareControls } from "./ScreenShareControls";
+import { useAuthErrorReason } from "./fishjamSetup";
 
 type OnDeviceChange = "remove" | "replace" | undefined;
 type OnDeviceStop = "remove" | "mute" | undefined;

examples/react-client/use-camera-and-microphone/src/ScreenShareControls.tsx

@@ -1,4 +1,4 @@
-import { useScreenShare } from "./fishjamSetup";
+import { useScreenShare } from "@fishjam-cloud/react-client";
 
 export const ScreenShareControls = () => {
   const screenShare = useScreenShare();

examples/react-client/use-camera-and-microphone/src/fishjamSetup.tsx

@@ -1,20 +1,6 @@
-import type { ClientEvents } from "@fishjam-cloud/react-client";
-import { create } from "@fishjam-cloud/react-client";
+import { useClient, type ClientEvents } from "@fishjam-cloud/react-client";
 import { useEffect, useState } from "react";
 
-export const {
-  useStatus,
-  useConnect,
-  useDisconnect,
-  FishjamContextProvider,
-  useSetupMedia,
-  useCamera,
-  useMicrophone,
-  useScreenShare,
-  useSelector,
-  useClient,
-} = create();
-
 export const useAuthErrorReason = () => {
   const client = useClient();
   const [authError, setAuthError] = useState<string | null>(null);

examples/react-client/use-camera-and-microphone/src/main.tsx

@@ -2,14 +2,14 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import MainControls from "./MainControls";
 import "./index.css";
-import { FishjamContextProvider } from "./fishjamSetup";
 import AdditionalControls from "./AdditionalControls";
+import { FishjamProvider } from "@fishjam-cloud/react-client";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <FishjamContextProvider>
+    <FishjamProvider>
       <MainControls />
       <AdditionalControls />
-    </FishjamContextProvider>
+    </FishjamProvider>
   </React.StrictMode>,
 );

examples/react-client/videoroom/src/App.tsx

@@ -1,9 +1,9 @@
 import { useEffect } from "react";
-import { useClient, useParticipants } from "./client";
 import { DevicePicker } from "./components/DevicePicker";
 import { RoomConnector } from "./components/RoomConnector";
 import { VideoTracks } from "./components/VideoTracks";
 import { AudioTracks } from "./components/AudioTracks";
+import { useClient, useParticipants } from "@fishjam-cloud/react-client";
 
 function App() {
   const client = useClient();

examples/react-client/videoroom/src/components/BlurToggle.tsx

@@ -1,6 +1,5 @@
-import { TrackMiddleware } from "@fishjam-cloud/react-client";
+import { TrackMiddleware, useCamera } from "@fishjam-cloud/react-client";
 import { useRef, useCallback } from "react";
-import { useCamera } from "../client";
 import { BlurProcessor } from "../utils/blur/BlurProcessor";
 import { Button } from "./Button";
 

examples/react-client/videoroom/src/components/DevicePicker.tsx

@@ -1,8 +1,14 @@
 import { FC } from "react";
 import AudioVisualizer from "./AudioVisualizer";
-import { useCamera, useMicrophone, useScreenShare, useStatus } from "../client";
 import VideoPlayer from "./VideoPlayer";
-import { TrackManager, UserMediaAPI } from "@fishjam-cloud/react-client";
+import {
+  TrackManager,
+  useCamera,
+  useMicrophone,
+  UserMediaAPI,
+  useScreenShare,
+  useStatus,
+} from "@fishjam-cloud/react-client";
 import { Button } from "./Button";
 import { BlurToggle } from "./BlurToggle";
 

examples/react-client/videoroom/src/components/RoomConnector.tsx

@@ -1,6 +1,10 @@
-import { Button } from "./Button";
-import { useConnect, useStatus, useDisconnect } from "../client";
+import {
+  useConnect,
+  useDisconnect,
+  useStatus,
+} from "@fishjam-cloud/react-client";
 
+import { Button } from "./Button";
 type FormProps = {
   roomName: string;
   userName: string;

examples/react-client/videoroom/src/main.tsx

@@ -2,12 +2,12 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import App from "./App.tsx";
 import "./index.css";
-import { FishjamContextProvider } from "./client.ts";
+import { FishjamProvider } from "@fishjam-cloud/react-client";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <FishjamContextProvider>
+    <FishjamProvider>
       <App />
-    </FishjamContextProvider>
+    </FishjamProvider>
   </React.StrictMode>,
 );

packages/react-client/src/Client.ts

@@ -264,7 +264,7 @@ export interface ClientEvents {
   ) => void;
 }
 
-export type ReactClientCreteConfig<PeerMetadata, TrackMetadata> = {
+export type ReactClientCreateConfig = {
   clientConfig?: CreateConfig<PeerMetadata, TrackMetadata>;
   deviceManagerDefaultConfig?: DeviceManagerConfig;
 };
@@ -291,7 +291,7 @@ export class Client extends (EventEmitter as new () => TypedEmitter<Required<Cli
   public audioDeviceManager: DeviceManager;
   private initialized: boolean = false;
 
-  constructor(config?: ReactClientCreteConfig<PeerMetadata, TrackMetadata>) {
+  constructor(config?: ReactClientCreateConfig) {
     super();
 
     this.tsClient = new FishjamClient<PeerMetadata, TrackMetadata>(config?.clientConfig);