Skip to content

Commit

Permalink
Merge pull request #18 from SuperViz/chore/react-package
Browse files Browse the repository at this point in the history
chore: add react package
  • Loading branch information
carlossantos74 authored Sep 22, 2024
2 parents f71a641 + beebffd commit 9a3f9ab
Show file tree
Hide file tree
Showing 66 changed files with 4,670 additions and 1 deletion.
53 changes: 53 additions & 0 deletions .github/workflows/react.ci.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
name: React - Publish Package
on:
push:
branches:
- lab
- beta
- main
paths:
- 'packages/react/**'
- '.github/workflows/react.ci.yml'
jobs:
package:
runs-on: ubuntu-latest
strategy:
matrix:
node-version: [20]
steps:
- uses: actions/checkout@v4
- name: Install pnpm
uses: pnpm/action-setup@v4
with:
version: 9.10.0
- name: Use Node.js ${{ matrix.node-version }}
uses: actions/setup-node@v4
with:
node-version: ${{ matrix.node-version }}
cache: 'pnpm'
- name: Install dependencies
run: pnpm install --no-frozen-lockfile
env:
NPM_CONFIG_USERCONFIG: .npmrc.ci
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
- run: git config --global user.name SuperViz
- run: git config --global user.email [email protected]
- name: Publish npm package
run: npm whoami && pnpm run semantic-release --filter=@superviz/react-sdk
env:
NPM_CONFIG_USERCONFIG: .npmrc.ci
GITHUB_TOKEN: ${{ secrets.TOKEN_GITHUB }}
NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
slack:
needs: package
name: Slack Notification
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- name: Slack Notification
uses: rtCamp/action-slack-notify@v2
env:
SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}
SLACK_ICON: https://avatars.slack-edge.com/2020-11-18/1496892993975_af721d1c045bea2d5a46_48.png
MSG_MINIMAL: true
SLACK_USERNAME: Deploy react version ${{ github.ref_name }}
43 changes: 43 additions & 0 deletions packages/react/.eslintrc.json
Original file line number Diff line number Diff line change
@@ -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": {}
}
}
}
26 changes: 26 additions & 0 deletions packages/react/.gitignore
Original file line number Diff line number Diff line change
@@ -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
2 changes: 2 additions & 0 deletions packages/react/.npmrc.ci
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@superviz:registry=https://registry.npmjs.org/
//registry.npmjs.org/:_authToken=${NPM_TOKEN}
8 changes: 8 additions & 0 deletions packages/react/.prettierrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"semi": true,
"trailingComma": "all",
"arrowParens": "always",
"printWidth": 100,
"singleQuote": true,
"tabWidth": 2
}
14 changes: 14 additions & 0 deletions packages/react/.releaserc
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
{
"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-version-file",
"@semantic-release/github",
"@semantic-release/npm"
]
}
93 changes: 93 additions & 0 deletions packages/react/README.md
Original file line number Diff line number Diff line change
@@ -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 a suite of programmable low-code Collaboration and Communication components, all synchronized with an advanced Real-time Data Engine, enabling real-time and asynchronous collaboration and communication within any JavaScript-based application.

SuperViz offers a comprehensive suite of components, all synchronized with an advanced Real-time Data Engine, facilitating real-time collaboration in JavaScript-based applications. 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)

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).
75 changes: 75 additions & 0 deletions packages/react/eslint.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import react from "eslint-plugin-react";
import typescriptEslint from "@typescript-eslint/eslint-plugin";
import reactHooks from "eslint-plugin-react-hooks";
import prettier from "eslint-plugin-prettier";
import simpleImportSort from "eslint-plugin-simple-import-sort";
import { fixupPluginRules } from "@eslint/compat";
import globals from "globals";
import tsParser from "@typescript-eslint/parser";
import path from "node:path";
import { fileURLToPath } from "node:url";
import js from "@eslint/js";
import { FlatCompat } from "@eslint/eslintrc";

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const compat = new FlatCompat({
baseDirectory: __dirname,
recommendedConfig: js.configs.recommended,
allConfig: js.configs.all
});

export default [...compat.extends(
"eslint:recommended",
"plugin:react/recommended",
"plugin:@typescript-eslint/recommended",
"prettier",
), {
plugins: {
react,
"@typescript-eslint": typescriptEslint,
"react-hooks": fixupPluginRules(reactHooks),
prettier,
"simple-import-sort": simpleImportSort,
},

languageOptions: {
globals: {
...globals.browser,
},

parser: tsParser,
ecmaVersion: "latest",
sourceType: "module",

parserOptions: {
ecmaFeatures: {
tsx: true,
},
},
},

settings: {
"import/resolver": {
typescript: {},
},
},

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",
},
}];
Loading

0 comments on commit 9a3f9ab

Please sign in to comment.