feat: add @100mslive/hms-whiteboard package

examples/prebuilt-react-integration/src/main.css

@@ -1,3 +1,5 @@
+@import url('@100mslive/roomkit-react/index.css');
+
 html,
 body,
 #root {
@@ -17,3 +19,7 @@ body {
   width: 100%;
   margin: 0;
 }
+
+.tl-container {
+  border-radius: 0.75rem;
+}

packages/hms-whiteboard/.eslintrc

@@ -0,0 +1,87 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:import/recommended",
+    "plugin:import/typescript",
+    "react-app",
+    "react-app/jest"
+  ],
+  "plugins": ["prettier", "simple-import-sort"],
+  "rules": {
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-unused-vars": "error",
+    "no-nested-ternary": 1,
+    "no-unused-vars": [
+      "error",
+      {
+        "vars": "all",
+        "args": "none",
+        "ignoreRestSiblings": false
+      }
+    ],
+    "react/react-in-jsx-scope": "error",
+    "react/jsx-curly-brace-presence": [
+      2,
+      {
+        "props": "never"
+      }
+    ],
+    "react/self-closing-comp": [
+      "error",
+      {
+        "component": true,
+        "html": false
+      }
+    ],
+    "prettier/prettier": [
+      "error",
+      {
+        "endOfLine": "auto" // This is need to handle different end-of-line in windows/mac
+      }
+    ],
+    "import/first": "error",
+    "import/namespace": [2, { "allowComputed": true }],
+    "import/no-duplicates": "error",
+    "simple-import-sort/imports": [
+      "error",
+      {
+        "groups": [
+          [
+            // Packages `react` related packages come first.
+            "^react",
+            "^@?\\w",
+            // Internal packages.
+            "^@100mslive/react-sdk",
+            "^@100mslive/react-icons",
+            // Side effect imports.
+            "^\\u0000",
+
+            "(components)",
+            // Other relative imports. Put same-folder imports and `.`.
+            "^\\./(?=.*/)(?!/?$)",
+            "^\\.(?!/?$)",
+            "^\\./?$",
+            "(plugins)",
+            "(components)?(.*)(/use.*)",
+            ".*(hooks)",
+            "(common)",
+            "(services)",
+            "(utils)",
+            "(constants)",
+            // Style imports.
+            "^.+\\.?(css)$"
+          ]
+        ]
+      }
+    ]
+  },
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
+  "ignorePatterns": ["src/*.css", "src/images/*", "src/grpc/*", "dist/**"]
+}

packages/hms-whiteboard/proto/sessionstore.proto

@@ -0,0 +1,129 @@
+syntax = "proto3";
+
+package sessionstorepb;
+
+option go_package = "./internal;sessionstorepb";
+
+import "google/protobuf/timestamp.proto";
+
+service Api {
+  rpc Hello(HelloRequest) returns (HelloResponse) {}
+  rpc Subscribe(SubscribeRequest) returns (stream Event) {}
+}
+
+message HelloRequest {
+  string name = 1;
+}
+
+message HelloResponse {
+  string response = 1;
+}
+
+message SubscribeRequest {
+  string name = 1;
+  int64 offset = 2;
+}
+
+message Event {
+  string message = 1;
+  int64 sequence = 2;
+}
+
+// metadata token -> session id, room id, user id, username
+
+// open is used for presence
+
+// change stream will return all keys in order of oldest to newsest.
+
+// max number of keys -> 5000
+// max size per key -> 10240 Bytes
+
+service Store {
+  // open - start listening to updates in keys with provided match patterns
+  // provide change_id as last received ID to resume updates
+  rpc open(OpenRequest) returns (stream ChangeStream) {}
+
+  // get last stored value in given key
+  rpc get(GetRequest) returns (GetResponse) {}
+
+  // set key value
+  rpc set(SetRequest) returns (SetResponse) {}
+
+  // delete key from store
+  rpc delete (DeleteRequest) returns (DeleteResponse) {}
+
+  // count get count of keys
+  rpc count(CountRequest) returns (CountResponse) {}
+}
+
+// define new structure for value based on client needs and add support in
+// following message
+message Value {
+  enum Type {
+    NONE = 0;
+    BYTES = 1;
+    STRING = 2;
+    INTEGER = 3;
+    FLOAT = 4;
+  }
+  Type type = 1;
+  oneof Data {
+    int64 number = 2;
+    float float = 3;
+    string str = 4;
+    bytes raw_bytes = 5;
+  }
+}
+
+message GetRequest {
+  string key = 1;
+}
+
+message GetResponse {
+  string key = 1;
+  string namespace = 2;
+  Value value = 3;
+}
+
+message DeleteRequest {
+  string key = 1;
+}
+
+message DeleteResponse {}
+
+message SetRequest {
+  string key = 1;
+  Value value = 3;
+}
+
+message SetResponse {}
+
+message ChangeStream {
+  string change_id = 1;
+  string key = 2;
+  string namespace = 3;
+  Value value = 4;
+  string from_id = 5;
+}
+
+message Select {
+  oneof match {
+    string all = 1;     // match all keys
+    string key = 2;     // match key
+    string prefix = 3;  // match keys with given prefix
+    string suffix = 4;  // match keys with given suffix
+  }
+}
+
+message OpenRequest {
+  // last received change_id for reconnection, "" if first connection
+  string change_id = 1;
+  repeated Select select = 3;
+}
+
+message CountRequest {}
+
+message CountResponse {
+  int64 count = 1;
+}
+

packages/hms-whiteboard/rollup.config.js

@@ -0,0 +1,31 @@
+import resolve from '@rollup/plugin-node-resolve';
+import typescript from '@rollup/plugin-typescript';
+import esbuild from 'rollup-plugin-esbuild';
+import { terser } from 'rollup-plugin-terser';
+import pkg from './package.json';
+import commonjs from '@rollup/plugin-commonjs';
+import css from 'rollup-plugin-import-css';
+
+const isProduction = process.env.NODE_ENV === 'production';
+
+const deps = Object.keys(pkg.dependencies || {});
+const peerDeps = Object.keys(pkg.peerDependencies || {});
+
+const config = {
+  input: 'src/index.ts',
+  external: [...deps, ...peerDeps],
+  output: [
+    { file: pkg.main, format: 'cjs', sourcemap: true },
+    { dir: 'dist', format: 'esm', preserveModules: true, preserveModulesRoot: 'src', sourcemap: true },
+  ],
+  plugins: [
+    commonjs(),
+    css({ output: 'index.css' }),
+    esbuild({ format: 'esm' }),
+    resolve(),
+    isProduction && terser(),
+    typescript({ sourceMap: true }),
+  ],
+};
+
+export default config;