Merge branch 'main' into beta

SuperViz · Jun 15, 2024 · cedbb2b · cedbb2b
2 parents b6c18cf + dd8a307
commit cedbb2b
Show file tree

Hide file tree

Showing 70 changed files with 10,200 additions and 1 deletion.
diff --git a/js/cdn/forms-editor/.codesandbox/tasks.json b/js/cdn/forms-editor/.codesandbox/tasks.json
@@ -0,0 +1,30 @@
+{
+	// These tasks will run in order when initializing your CodeSandbox project.
+	"setupTasks": [
+		{
+			"name": "Install Dependencies",
+			"command": "yarn install"
+		}
+	],
+	// These tasks can be run from CodeSandbox. Running one will open a log in the app.
+	"tasks": {
+		"start": {
+			"name": "start",
+			"command": "yarn start",
+			"runAtStart": true,
+			"preview": {
+				"port": 5173
+			}
+		},
+		"build": {
+			"name": "build",
+			"command": "yarn build",
+			"runAtStart": false
+		},
+		"preview": {
+			"name": "preview",
+			"command": "yarn preview",
+			"runAtStart": false
+		}
+	}
+}
diff --git a/js/cdn/forms-editor/.codesandbox/template.json b/js/cdn/forms-editor/.codesandbox/template.json
@@ -0,0 +1,14 @@
+{
+  "title": "Sample Room for Mouse Pointers (CDN/JS)",
+  "description": "The Real-time Mouse Pointers feature enables real-time tracking of participants' cursor movements, allowing seamless collaboration within the same room. This is part of the SuperViz SDK.",
+  "iconUrl": "https://superviz.com/wp-content/uploads/2022/10/superviz-1-80x80.png",
+  "tags": [
+    "react",
+    "javascript",
+    "typescript",
+    "superviz",
+    "real-time",
+    "collaboration"
+  ],
+  "published": true
+}
diff --git a/js/cdn/forms-editor/.gitignore b/js/cdn/forms-editor/.gitignore
@@ -0,0 +1,2 @@
+env.js
+node_modules
diff --git a/js/cdn/forms-editor/package.json b/js/cdn/forms-editor/package.json
@@ -0,0 +1,14 @@
+{
+  "name": "superviz-forms-editor-cdn-js",
+  "version": "1.0.0",
+  "description": "This is a sample project for the Forms Editor, based on cdn (js), for more information, go to docs.superviz.com",
+  "scripts": {
+    "dev": "npx live-server public/ --host=localhost",
+    "start": "npx live-server public/ --host=localhost"
+  },
+  "dependencies": {
+    "live-server": "^1.2.2"
+  },
+  "author": "",
+  "license": "ISC"
+}
diff --git a/js/cdn/forms-editor/public/env.example.js b/js/cdn/forms-editor/public/env.example.js
@@ -0,0 +1 @@
+export const DEVELOPER_KEY = "";
diff --git a/js/cdn/forms-editor/public/favicon.svg b/js/cdn/forms-editor/public/favicon.svg
diff --git a/js/cdn/forms-editor/public/index.html b/js/cdn/forms-editor/public/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="favicon.svg" />
+    <title>SuperViz SDK</title>
+
+    <!-- SuperViz SDK -->
+    <script type="module" src="https://unpkg.com/@superviz/sdk@latest"></script>
+
+    <!-- Main script, after SDK -->
+    <script type="module" src="/scripts/main.js"></script>
+    <link rel="stylesheet" href="/styles/main.css" />
+  </head>
+  <body>
+    <div class="formelements">
+			<h1>Generic Form</h1>
+			<label>
+				Name: <br />
+				<input type="text" id="name" name="name" />
+			</label>
+			<label>
+				Email: <br />
+				<input type="email" id="email" name="email" />
+			</label>
+			<label>
+				What is your kind of pet?
+				<div className="radio-option">
+					<span> <input type="radio" name="pet" value="cat" id="cat" /> Cat </span>
+					<span> <input type="radio" name="pet" value="dog" id="dog" /> Dog </span>
+					<span> <input type="radio" name="pet" value="fish" id="fish" /> Fish </span>
+				</div>
+			</label>
+		</div>
+  </body>
+</html>
diff --git a/js/cdn/forms-editor/public/projectInfo.js b/js/cdn/forms-editor/public/projectInfo.js
@@ -0,0 +1 @@
+export const sampleInfo = { id: 'superviz-forms-editor-cdn-js', name: 'Forms Editor (Cdn/JavaScript)' };
diff --git a/js/cdn/forms-editor/public/scripts/main.js b/js/cdn/forms-editor/public/scripts/main.js
@@ -0,0 +1,30 @@
+import { DEVELOPER_KEY } from "../env.js";
+import { sampleInfo } from "../projectInfo.js";
+
+const participant = Math.floor(Math.random() * 100);
+const groupId = sampleInfo.id;
+const groupName = sampleInfo.name;
+
+async function initializeSuperVizRoom() {
+  const room = await window.SuperVizRoom.init(DEVELOPER_KEY, {
+    roomId: groupId,
+    group: {
+      id: groupId,
+      name: groupName,
+    },
+    participant: {
+      id: participant.toString(),
+      name: "John " + participant,
+    },
+  });
+
+  const formElements = new window.SuperVizRoom.FormElements({
+		fields: ['name', 'email', 'dog', 'cat', 'fish'],
+	})
+
+	room.addComponent(formElements)
+
+  return room;
+}
+
+initializeSuperVizRoom();
diff --git a/js/cdn/forms-editor/public/styles/main.css b/js/cdn/forms-editor/public/styles/main.css
@@ -0,0 +1,41 @@
+body {
+	margin: 0;
+	min-height: 100vh;
+}
+
+.formelements {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	gap: 1rem;
+	background: #c9c4d1;
+	border-radius: 6px;
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+	padding: 1rem 1.5rem;
+	align-items: center;
+	justify-content: center;
+	color: #333;
+}
+
+.formelements h1 {
+	margin: 0;
+}
+
+.formelements input {
+	padding: 0.5rem;
+	margin: 0.5rem 0 0;
+	border-radius: 6px;
+	width: 320px;
+}
+
+.formelements input[type='radio'] {
+	width: auto;
+}
+
+.formelements .radio-option {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	width: 340px;
+	margin-top: 0.5rem;
+}
diff --git a/js/cdn/forms-editor/readme.md b/js/cdn/forms-editor/readme.md
@@ -0,0 +1,27 @@
+# Sample for Forms Editor (Cdn/JavaScript)
+
+### SuperViz SDK
+
+This project hosts samples for SuperViz SDK. To find out more about the SDK itself, please visit [the documentation](https://docs.superviz.com/).
+
+The SDK documentation has extensive sections about [getting started](https://docs.superviz.com/getting-started/quickstart), setting up the SDK, as well as the process of acquiring the required developer key.
+
+## Build and run the samples
+
+You can run this sample with npm:
+
+```bash
+npm install
+npm start
+```
+
+or with Yarn:
+
+```bash
+yarn install
+yarn start
+```
+
+Just make sure that you have the required developer keys in the `.env` file. For that copy the `.env.example` file to `.env` and fill in the values.
+
+You will need Developer Key keys to run the samples on your machines, you therefore should [follow the instructions on these pages](https://docs.superviz.com/getting-started/setting-account) before continuing.