@superviz/react

apps/playground/package.json

@@ -19,6 +19,7 @@
     "@superviz/sdk": "workspace:*",
     "@superviz/threejs-plugin": "workspace:*",
     "@superviz/yjs": "workspace:*",
+    "@superviz/react": "workspace:*",
     "@types/three": "^0.167.1",
     "lib0": "^0.2.98",
     "lodash": "^4.17.21",

apps/playground/src/pages/superviz-react-room.tsx

@@ -0,0 +1,74 @@
+
+import { RoomProvider, useRoom } from '@superviz/react'
+import { VideoConference } from '@superviz/sdk';
+import { getConfig } from '../config';
+
+import { v4 as generateId } from "uuid";
+import { useEffect } from 'react';
+const SUPERVIZ_KEY = getConfig<string>("keys.superviz");
+const SUPERVIZ_ROOM_PREFIX = getConfig<string>("roomPrefix");
+const componentName = "new-room-react";
+const uuid = generateId();
+
+export const Children = () => {
+  const { room, joinRoom, leaveRoom, addComponent } = useRoom({
+    onMyParticipantJoined: (participant) => console.log('Component: My participant joined', participant),
+    onMyParticipantLeft: (participant) => console.log('Component: My participant left', participant),
+    onMyParticipantUpdated: (participant) => console.log('Component: My participant updated', participant),
+    onParticipantJoined: (participant) => console.log('Component: Participant joined', participant),
+    onParticipantLeft: (participant) => console.log('Component: Participant left', participant),
+    onParticipantUpdated: (participant) => console.log('Component: Participant updated', participant),
+    onRoomUpdated: (data) => console.log('Component: Room updated', data),
+    onError: (error) => console.error('Component: Room error', error),
+  });
+
+  const handleJoin = async () => {
+    await joinRoom({
+      participant: {
+        id: uuid,
+        name: "Participant Name",
+        email: '[email protected]',
+        avatar: { 
+          model3DUrl: 'https://production.storage.superviz.com/readyplayerme/1.glb',
+          imageUrl: 'https://production.cdn.superviz.com/static/default-avatars/1.png',
+        }
+      },
+      group: {
+        name: SUPERVIZ_ROOM_PREFIX,
+        id: SUPERVIZ_ROOM_PREFIX,
+      },
+      roomId: `${SUPERVIZ_ROOM_PREFIX}-${componentName}`,
+      debug: true, 
+      environment: 'dev',
+    });
+
+    const video = new VideoConference({ 
+      collaborationMode: { enabled: false }, 
+      participantType: 'host'
+    });
+
+    addComponent(video);
+  };
+
+  useEffect(() => { 
+    handleJoin();
+
+    return () => leaveRoom();
+  }, [])
+
+  return (
+    <div>
+      <button disabled={!!room} onClick={handleJoin}>Join Room</button>
+      <br />
+      <button disabled={!room} onClick={leaveRoom}>Leave Room</button>
+    </div>
+  );
+};
+
+export function SupervizReactRoom() {
+  return (
+    <RoomProvider developerToken={SUPERVIZ_KEY}>
+      <Children />
+    </RoomProvider>
+  )
+}

apps/playground/src/router/router.tsx

@@ -32,6 +32,7 @@ import { MousePointersWithNewRoom } from "../pages/mouse-pointers-with-new-room.
 import { MousePointersWithNewRoomHTML } from "../pages/mouse-pointers-with-new-room-html.tsx";
 import { CommentsHtmlCasesWithNewRoom } from "../pages/comments-html-cases-with-new-room.tsx";
 import { VideoWithNewRoom } from "../pages/video-with-new-room.tsx";
+import { SupervizReactRoom } from "../pages/superviz-react-room.tsx";
 
 export const routeList: RouteObject[] = [
   {
@@ -164,6 +165,10 @@ export const routeList: RouteObject[] = [
       { 
         path: 'video-with-new-room',
         element: <VideoWithNewRoom /> 
+      },
+      {
+        path: 'superviz-react-room', 
+        element: <SupervizReactRoom />
       }
     ],
   },

package.json

@@ -5,7 +5,7 @@
     "build": "turbo build",
     "dev": "turbo dev",
     "lint": "turbo lint",
-    "watch": "turbo run watch --concurrency=11",
+    "watch": "turbo run watch --concurrency=12",
     "semantic-release": "turbo run semantic-release",
     "test:unit": "turbo run test:unit",
     "test:unit:watch": "turbo run test:unit:watch",

packages/react-room/.eslintrc.json

@@ -0,0 +1,43 @@
+{
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "eslint:recommended",
+      "plugin:react/recommended",
+      "plugin:@typescript-eslint/recommended",
+      "prettier"
+    ],
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+      "ecmaFeatures": {
+        "tsx": true
+      },
+      "ecmaVersion": "latest",
+      "sourceType": "module"
+    },
+    "plugins": ["react", "@typescript-eslint", "react-hooks", "prettier","simple-import-sort"],
+    "rules": {
+      "camelcase": "error",
+      "no-duplicate-imports": "error",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-explicit-any":"off",
+      "react/react-in-jsx-scope":"off",
+      "no-console": "off",
+      "no-alert": "error",
+      "react-hooks/exhaustive-deps": "off",
+      "react/prop-types": 0,
+      "react/display-name": 0,
+      "simple-import-sort/imports": "error",
+      "simple-import-sort/exports": "error",
+      "@typescript-eslint/no-empty-function":"off",
+      "react/no-unknown-property":"off",
+      "react/no-unescaped-entities ":"off"
+    },
+    "settings": {
+      "import/resolver": {
+        "typescript": {}
+      }
+    }
+  }

packages/react-room/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+public/vendor
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+.env

packages/react-room/.npmrc.ci

@@ -0,0 +1,2 @@
+@superviz:registry=https://registry.npmjs.org/
+//registry.npmjs.org/:_authToken=${NPM_TOKEN}

packages/react-room/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "arrowParens": "always",
+  "printWidth": 100,
+  "singleQuote": true,
+  "tabWidth": 2
+}

packages/react-room/.releaserc

@@ -0,0 +1,47 @@
+{
+  "branches": [
+    "main",
+    {
+      "name": "beta",
+      "channel": "beta",
+      "prerelease": true
+    },
+    {
+      "name": "lab",
+      "channel": "lab",
+      "prerelease": true
+    }
+  ],
+  "tagFormat": "@superviz/react/${version}",
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "angular",
+        "parserOpts": {
+          "noteKeywords": [
+            "BREAKING CHANGE",
+            "BREAKING CHANGES",
+            "BREAKING"
+          ]
+        },
+        "writerOpts": {
+          "commitsSort": [
+            "subject",
+            "scope"
+          ]
+        }
+      }
+    ],
+    "@anolilab/semantic-release-pnpm",
+    [
+      "@semantic-release/github",
+      {
+        "successComment": ":tada: This issue has been resolved in version @superviz/react/${nextRelease.version} :tada:\n\nThe release is available on [GitHub release](<github_release_url>)"
+      } 
+    ]
+
+  ],
+  "preset": "angular"
+}

packages/react-room/README.md

@@ -0,0 +1,93 @@
+<p align="center">
+  <a href="https://superviz.com/" target="blank"><img src="https://avatars.githubusercontent.com/u/56120553?s=200&v=4" width="120" alt="SuperViz Logo" /></a>
+</p>
+
+<p align="center">
+	<img alt="Discord" src="https://img.shields.io/discord/1171797567223378002">
+	<img alt="GitHub issues" src="https://img.shields.io/github/issues-raw/superviz/sdk">
+	<img alt="GitHub pull requests" src="https://img.shields.io/github/issues-pr/superviz/sdk">
+	<img alt="npm type definitions" src="https://img.shields.io/npm/types/@superviz/react-sdk">
+	<img alt="Downloads" src="https://img.shields.io/npm/dw/@superviz/react-sdk">
+</p>
+
+SuperViz provides powerful SDKs and APIs that enable developers to easily integrate real-time features into web applications. Our platform accelerates development across various industries with robust, scalable infrastructure and a low-code approach. SuperViz SDK enables you to use one of our components:
+
+- Contextual Comments
+  - [Contextual Comments for HTML](https://docs.superviz.com/react-sdk/contextual-comments/HTML)
+  - [Contextual Comments for Canvas element](https://docs.superviz.com/react-sdk/contextual-comments/canvas)
+  - [Contextual Comments for Autodesk](https://docs.superviz.com/react-sdk/contextual-comments/autodesk)
+  - [Contextual Comments for Matterport](https://docs.superviz.com/react-sdk/contextual-comments/matterport)
+- Presence
+  - [Real-time Mouse Pointers](https://docs.superviz.com/react-sdk/presence/mouse-pointers)
+  - [Real-time Data Engine](https://docs.superviz.com/react-sdk/presence/real-time-data-engine)
+  - [Who-is-Online](https://docs.superviz.com/react-sdk/presence/who-is-online)
+  - [Presence in Autodesk](https://docs.superviz.com/react-sdk/presence/AutodeskPresence)
+  - [Presence in Matterport](https://docs.superviz.com/react-sdk/presence/MatterportPresence)
+  - [Presence in ThreeJS](https://docs.superviz.com/react-sdk/presence/ThreeJsPresence)
+- [Video Conference](https://docs.superviz.com/react-sdk/video/video-conference)
+- [YJS Provider](https://docs.superviz.com/collaboration/api-reference/superviz-sdk-react/yjs)
+
+You can also combine components to create a custom solution for your application.
+
+How to start coding with SuperViz? After installing this package, you’ll need to [create an account](https://dashboard.superviz.com/) to retrieve a SuperViz Token and start coding.
+
+## Quickstart
+
+### 1. Installation
+
+Install SuperViz SDK in your React app with the npm package:
+
+```bash
+npm install --save @superviz/react-sdk
+```
+
+Or, with yarn:
+
+```bash
+yarn add @superviz/react-sdk
+```
+
+### 2. Import the SDK
+
+Once installed, import the SDK to your code:
+
+```jsx
+import { SuperVizRoomProvider } from "@superviz/react-sdk";
+```
+
+### 3. Initialize the SDK
+
+After importing the SDK, you can initialize our provider by passing your `DEVELOPER_KEY` and important information about the participant. You can see details for the options object on the [React Initialization page](https://docs.superviz.com/react-sdk/initialization).
+
+The SuperVizRoomProvider is your primary gateway to access all SDK features, offering the essential methods to add its components.
+
+```jsx
+<SuperVizRoomProvider
+  developerKey="DEVELOPER_KEY"
+  group={{
+    id: "<group-id>",
+    name: "<group-name>",
+  }}
+  participant={{
+    id: "<user-id>",
+    name: "<user-name>",
+  }}
+  roomId="<room-id>"
+>
+  <h1>This is a room</h1>
+</SuperVizRoomProvider>
+```
+
+## Documentation
+
+You can find the complete documentation for every component and how to initialize them on the [SuperViz SDK Documentation page](https://docs.superviz.com/react-sdk/initialization).
+
+You can also find the complete changelog on the [Release Notes page](https://docs.superviz.com/releases).
+
+## Contributing
+
+If you are interested in contributing to SuperViz SDK, the best place to get involved with the community is through the [Discord server](https://discord.gg/weZ3Bfv6WZ), there you can find the latest news, ask questions, and share your experiences with SuperViz SDK.
+
+## License
+
+SuperViz SDK is licensed under the [BSD 2-Clause License](LICENSE).