Skip to content

Commit

Permalink
Improved readme (#10)
Browse files Browse the repository at this point in the history 
* update scripts

* testing script

* update permission

* update working-directory

* Raised quality bar

* improved performance

* update script

* update error code

* Raised the bar

* Update conditional

* Fixed type error

* Update beta

* cdn autodesk

* cdn autodesk comments

* comments canvas

* html comments

* matterport comments

* threejs comments

* cdn matterport

* cdn mouse

* cdn real time

* cdn three

* video cdn

* cdn wio

* Update CDN Projects

* update version

* update type

* Added Form Elements to samples

* Fixed project infos

* Fixed type check

* Improved read-me links
  • Loading branch information
@vtnorton
vtnorton authored Jun 15, 2024
0 parents commit fe18df3
Show file tree
Hide file tree
Showing 15 changed files with 2,813 additions and 0 deletions.
30 changes: 30 additions & 0 deletions .codesandbox/tasks.json
Original file line number Diff line number Diff line change
@@ -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
}
}
}
14 changes: 14 additions & 0 deletions .codesandbox/template.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"title": "Sample Room for Mouse Pointers (React/TS)",
"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
}
2 changes: 2 additions & 0 deletions .env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
VITE_DEVELOPER_KEY=
VITE_MATTERPORT_KEY=
3 changes: 3 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
node_modules
dist
.env
13 changes: 13 additions & 0 deletions index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SuperViz SDK</title>
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
22 changes: 22 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "superviz-forms-editor-react-js",
"version": "1.0.0",
"description": "This is a sample project for the Forms Editor, based on react (js), for more information, go to docs.superviz.com",
"type": "module",
"scripts": {
"start": "vite",
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"@superviz/react-sdk": "1.7.0",
"uuid": "^9.0.1"
},
"devDependencies": {
"@vitejs/plugin-react": "^4.2.0",
"vite": "^5.0.0"
}
}
4 changes: 4 additions & 0 deletions public/favicon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
27 changes: 27 additions & 0 deletions readme.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
# Sample for Forms Editor (React/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.
53 changes: 53 additions & 0 deletions src/App.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { FormElements, SuperVizRoomProvider } from "@superviz/react-sdk";
import { sampleInfo } from "./projectInfo";

const DEVELOPER_KEY = import.meta.env.VITE_DEVELOPER_KEY;
const groupId = sampleInfo.id;
const groupName = sampleInfo.name;
const participant = Math.floor(Math.random() * 100);

function App() {
return (
<SuperVizRoomProvider
developerKey={DEVELOPER_KEY}
group={{
id: groupId,
name: groupName,
}}
participant={{
id: participant.toString(),
name: "John " + participant,
}}
roomId={groupId}
>
<div className="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>
<FormElements fields={['name', 'email', 'dog', 'cat', 'fish']} />
</SuperVizRoomProvider>
);
}

export default App;
47 changes: 47 additions & 0 deletions src/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
body {
margin: 0;
min-height: 100vh;
}

#root {
background: #e9e5ef;
margin: 0;
height: 100%;
}

.formelements {
display: flex;
flex-direction: column;
gap: 1rem;
height: 100%;
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;
}
10 changes: 10 additions & 0 deletions src/main.jsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";

ReactDOM.createRoot(document.getElementById("root")).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
1 change: 1 addition & 0 deletions src/projectInfo.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const sampleInfo = { id: 'superviz-forms-editor-react-js', name: 'Forms Editor (React/JavaScript)' };
7 changes: 7 additions & 0 deletions vite.config.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
})
Loading

0 comments on commit fe18df3

Please sign in to comment.