@seamly/web-ui 20.8.1 → 21.0.1-beta.1

package/build/dist/lib/utils.min.js.LICENSE.txt

@@ -0,0 +1,48 @@
+/*!
+* focus-trap 7.1.0
+* @license MIT, https://github.com/focus-trap/focus-trap/blob/master/LICENSE
+*/
+
+/*!
+* tabbable 6.0.1
+* @license MIT, https://github.com/focus-trap/tabbable/blob/master/LICENSE
+*/
+
+/**
+ * @license React
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-shim/with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/** @license React v16.13.1
+ * react-is.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "20.8.1",
+  "version": "21.0.1-beta.1",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",
@@ -22,76 +22,78 @@
     "webpack/*"
   ],
   "dependencies": {
-    "@reduxjs/toolkit": "^1.8.5",
+    "@reduxjs/toolkit": "^1.8.6",
     "@ultraq/icu-message-formatter": "^0.12.0",
     "deep-keys": "^0.5.0",
-    "focus-trap": "^6.7.1",
+    "focus-trap": "^7.0.0",
     "include-media": "^1.4.10",
     "js-cookie": "^3.0.1",
-    "minivents": "^2.2.0",
-    "phoenix": "1.6.11",
-    "react-redux": "^8.0.2",
-    "superagent": "^7.1.2",
-    "xstream": "^11.14.0"
+    "minivents": "^2.2.1",
+    "phoenix": "1.6.15",
+    "react-redux": "^8.0.4",
+    "superagent": "^8.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.2",
-    "@babel/plugin-proposal-object-rest-spread": "^7.15.6",
+    "@babel/core": "^7.19.6",
+    "@babel/plugin-proposal-object-rest-spread": "^7.19.4",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/plugin-transform-classes": "^7.15.4",
-    "@babel/plugin-transform-react-jsx": "^7.14.9",
-    "@babel/plugin-transform-runtime": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
+    "@babel/plugin-transform-classes": "^7.19.0",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@babel/runtime-corejs3": "^7.18.3",
-    "@seamly/doc-site": "^1.0",
-    "@seamly/eslint-config": "^2.2.0",
-    "@seamly/prettier-config": "^2.1.0",
+    "@babel/runtime-corejs3": "^7.18.9",
+    "@seamly/doc-site": "^2.0.0",
+    "@seamly/eslint-config": "^2.3.0",
+    "@seamly/prettier-config": "^2.2.0",
     "@seamly/stylelint-config": "^2.0.0",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/preact": "^2.0.1",
-    "@types/jest": "^27.1.7",
-    "@typescript-eslint/eslint-plugin": "^5.35.1",
-    "@typescript-eslint/parser": "^5.35.1",
-    "babel-loader": "^8.2.2",
-    "copy-webpack-plugin": "^10.2.4",
-    "cypress": "^10.0.3",
+    "@testing-library/preact": "^3.2.2",
+    "@trivago/prettier-plugin-sort-imports": "^3.4.0",
+    "@types/jest": "^27.5.2",
+    "@types/phoenix": "^1.5.4",
+    "@typescript-eslint/eslint-plugin": "^5.42.0",
+    "@typescript-eslint/parser": "^5.42.0",
+    "babel-loader": "^9.0.1",
+    "babel-plugin-react-remove-properties": "^0.3.0",
+    "copy-webpack-plugin": "^11.0.0",
     "cypress-file-upload": "^5.0.8",
     "cypress-wait-until": "^1.7.2",
-    "debug": "^4.3.2",
-    "eslint": "^8.17.0",
+    "cypress": "^10.11.0",
+    "debug": "^4.3.4",
     "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-import-resolver-typescript": "^3.5.0",
+    "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^26.5.3",
+    "eslint-plugin-jest": "^27.1.3",
+    "eslint": "^8.27.0",
     "file-loader": "^6.2.0",
     "glob": "^8.0.3",
-    "husky": "^7.0.2",
+    "husky": "^8.0.1",
     "ignore-loader": "^0.1.2",
+    "jest-environment-jsdom": "^27.5.1",
     "jest": "^27.5.1",
-    "mini-css-extract-plugin": "^2.4.2",
+    "mini-css-extract-plugin": "^2.6.1",
     "postcss": "8",
-    "preact": "^10.10.6",
-    "prettier": "^2.4.1",
+    "preact": "^10.11.2",
+    "prettier": "^2.7.1",
     "raw-loader": "^4.0.2",
     "rimraf": "^3.0.2",
-    "sneakpeek-cli": "^0.2.1",
     "start-server-and-test": "^1.14.0",
-    "style-loader": "^3.3.0",
-    "stylelint": "14.9.0",
-    "ts-loader": "^9.3.1",
-    "typescript": "^4.7.4",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.14.0",
+    "ts-loader": "^9.4.1",
+    "typescript": "^4.8.4",
     "url-loader": "^4.1.1",
-    "webpack": "^5.58.2",
-    "webpack-bundle-analyzer": "^4.5.0",
-    "webpack-cli": "^4.9.1",
-    "webpack-dev-server": "^4.3.1",
-    "webpack-merge": "^5.8.0"
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
+    "webpack-merge": "^5.8.0",
+    "webpack": "^5.74.0"
   },
   "peerDependencies": {
-    "preact": "10.10.6"
+    "preact": "^10.11.2"
   },
   "scripts": {
     "build:clean": "rimraf build; mkdir -p build",
@@ -101,17 +103,18 @@
     "server": "webpack serve --node-env=development",
     "server:test": "webpack serve --node-env=development --env build=test",
     "lint:scss": "stylelint \"src/stylesheets/**/*.scss\" --formatter=verbose",
-    "lint:js": "eslint --fix --max-warnings 0 src webpack",
+    "lint:js": "yarn run check:eslint && yarn run check:code",
     "lint": "yarn run lint:js && yarn run lint:scss && yarn check:prettier",
-    "format:code": "prettier --write \"src/**/*.{js,scss}\"",
-    "format:tests": "prettier --write \"tests/**/*.{js,scss}\"",
-    "format:public": "prettier --write \"public/**/*.{js,scss,html}\"",
-    "format:webpack": "prettier --write \"webpack/**/*.{js,scss}\"",
+    "format:code": "yarn run check:eslint --fix && prettier --write \"src/**/*.{js,ts,tsx,scss}\"",
+    "format:tests": "prettier --write \"tests/**/*.{js,ts,tsx,scss}\"",
+    "format:public": "prettier --write \"public/**/*.{js,ts,tsx,scss,html}\"",
+    "format:webpack": "prettier --write \"webpack/**/*.{js,ts,tsx,scss}\"",
     "format": "yarn run format:code && yarn run format:tests && yarn run format:public && yarn run format:webpack",
-    "check:code": "prettier --check \"src/**/*.{js,scss}\"",
+    "check:code": "prettier --check \"src/**/*.{js,ts,tsx,scss}\"",
     "check:tests": "prettier --check \"tests/**/*.{js,scss}\"",
     "check:public": "prettier --check \"public/**/*.{js,scss,html}\"",
     "check:webpack": "prettier --check \"webpack/**/*.{js,scss,html}\"",
+    "check:eslint": "eslint --ext .js,.ts,.tsx src/ webpack/",
     "check:prettier": "yarn run check:code && yarn run check:tests && yarn run check:public && yarn run check:webpack",
     "test": "jest",
     "types:generate": "npx openapi-typescript schema.yaml --output src/javascripts/schema.ts",
@@ -121,6 +124,5 @@
     "test:e2e": "start-server-and-test server:test http-get://localhost:8080/tests/index.js cypress:open",
     "test:e2e:ci": "start-server-and-test server:test http-get://localhost:8080/tests/index.js cypress:run",
     "prepare": "husky install"
-  },
-  "prettier": "@seamly/prettier-config"
+  }
 }

package/src/icons/icon_check-16.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="16px"
+  height="16px"
+  x="0px"
+  y="0px"
+  viewBox="0 0 16 16"
+>
+  <path
+    fill="currentColor"
+    d="M11.6,4.3l-5,5L4.9,7.5C4.4,7,3.7,7,3.2,7.5l0,0C2.8,8,2.8,8.7,3.2,9.2l1.7,1.7l0,0l0.8,0.8
+	c0.5,0.5,1.2,0.5,1.7,0l0.8-0.8l5-5c0.5-0.5,0.5-1.2,0-1.7l0,0C12.8,3.8,12.1,3.8,11.6,4.3z"
+  />
+</svg>

package/src/icons/icon_check-32.svg

@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="32px"
+  height="32px"
+  x="0px"
+  y="0px"
+  viewBox="0 0 32 32"
+>
+  <path
+    fill="currentColor"
+    d="M22.9,9.3l-9.3,9.3l-3.2-3.2c-0.9-0.9-2.3-0.9-3.2,0l0,0c-0.9,0.9-0.9,2.3,0,3.2l3.2,3.2l0,0l1.6,1.6
+	c0.9,0.9,2.3,0.9,3.2,0l1.6-1.6l9.3-9.3c0.9-0.9,0.9-2.3,0-3.2l0,0C25.2,8.4,23.7,8.4,22.9,9.3z"
+  />
+</svg>

package/src/javascripts/api/conversation-connector.ts

@@ -0,0 +1,149 @@
+import { Channel, Socket } from 'phoenix'
+import { apiVersion } from 'config'
+import debug from 'lib/debug'
+import splitUrlParams from 'lib/split-url-params'
+
+const log = debug('seamly')
+
+type ConnectionState =
+  | 'socket_closed' // Socket is closed.
+  | 'channel_closed' // Channel is closed.
+  | 'channel_erred' // Errors received from joined channel.
+  | 'join_channel_succeeded' // Joined channel succesfully.
+  | 'join_channel_erred' // Error on joining channel. This is usefull when you want to restart a chat sessions.
+  | 'attach_channel_succeeded' // Attached channel to system.
+export default class ConversationConnector {
+  #connectionListeners = []
+
+  accessToken: string
+
+  channelName: string
+
+  channelTopic: string
+
+  url: string
+
+  socket: Socket
+
+  channel: Channel
+
+  async connect(
+    url: string,
+    channelName: string,
+    channelTopic: string,
+    accessToken: string,
+  ) {
+    this.url = url
+
+    this.accessToken = accessToken
+    this.channelName = channelName
+    this.channelTopic = channelTopic
+    const { url: splittedUrl, params } = splitUrlParams(this.url)
+
+    this.socket = new Socket(splittedUrl, {
+      params: { ...params, v: apiVersion },
+    })
+
+    this.socket.connect()
+
+    this.channel = this.socket.channel(this.channelTopic, {
+      authorization: `Bearer ${this.accessToken}`,
+      channelName: this.channelName,
+    })
+
+    this.start()
+
+    this.socket.onError((err) => {
+      log('[SOCKET][ERROR]', err)
+    })
+
+    this.socket.onOpen(() => {
+      log('[SOCKET]OPEN')
+    })
+
+    this.channel.on('system', (msg) => {
+      switch (msg.type) {
+        case 'attach_channel_succeeded':
+          this.#emitConnectionState('attach_channel_succeeded')
+          break
+      }
+    })
+
+    this.socket.onClose(() => {
+      log('[SOCKET]CLOSE')
+      this.#emitConnectionState('socket_closed')
+    })
+
+    this.channel.onClose(() => {
+      log('[CHANNEL]CLOSE')
+      this.#emitConnectionState('channel_closed')
+    })
+
+    this.channel.onError((msg) => {
+      log('[CHANNEL][ERROR]', msg)
+      this.#emitConnectionState('channel_erred')
+    })
+
+    this.#listenTo(
+      'ack',
+      'ui',
+      'error',
+      'participant',
+      'message',
+      'service_data',
+      'system',
+      'info',
+      'sync',
+    )
+  }
+
+  start() {
+    this.channel
+      .join()
+      .receive('ok', () => {
+        log('[CHANNEL][JOIN] OK')
+        this.#emitConnectionState('join_channel_succeeded')
+      })
+      .receive('error', (err) => {
+        log('[CHANNEL][JOIN] ERROR', err)
+        this.#emitConnectionState('join_channel_erred')
+        // @ts-ignore
+        this.channel.socket.disconnect()
+      })
+      .receive('timeout', () => {
+        log('[CHANEL][JOIN] Networking issue. Still waiting...')
+      })
+  }
+
+  disconnect() {
+    this.#connectionListeners = []
+    this.channel?.leave()
+    this.socket?.remove(this.channel)
+    this.socket?.disconnect()
+  }
+
+  #listenTo(...types: string[]) {
+    types.forEach((type) => {
+      this.channel.on(type, (msg) => {
+        log('[RECEIVE]', type, msg)
+      })
+    })
+  }
+
+  // eslint-disable-next-line no-unused-vars
+  onConnection(cb: (_payload: ConnectionState) => void) {
+    this.#connectionListeners.push(cb)
+  }
+
+  #emitConnectionState(payload: ConnectionState) {
+    this.#connectionListeners.forEach((cb) => cb(payload))
+  }
+
+  pushToChannel(
+    command: string,
+    payload: { type: string; error: unknown },
+    timeout = 10000,
+  ) {
+    this.channel.push(command, payload, timeout)
+  }
+}

package/src/javascripts/api/errors/seamly-base-error.js

@@ -1,4 +1,17 @@
+function parseOriginalErrMsg(str) {
+  try {
+    const json = JSON.parse(str)
+    return json.error
+  } catch (e) {
+    return str
+  }
+}
+
 export default class SeamlyBaseError extends Error {
+  action = ''
+
+  langKey = ''
+
   constructor(originalError, ...params) {
     super(...params)
 
@@ -6,11 +19,17 @@ export default class SeamlyBaseError extends Error {
       Error.captureStackTrace(this, Object.getPrototypeOf(this))
     }
     this.originalError = originalError
+
     if (originalError?.payload) {
       this.originalEvent = originalError
       this.originalError = originalError.payload.error
       this.message = `Event of type ${originalError.payload.type} encountered`
     }
+    if (!this.message && originalError?.message) {
+      const parsedOriginalMessage = parseOriginalErrMsg(originalError.message)
+      this.message = parsedOriginalMessage
+    }
+
     if (originalError?.error) {
       this.originalError = originalError.error
     }

package/src/javascripts/api/errors/seamly-unavailable-error.js

@@ -1,15 +1,13 @@
+import SeamlyBaseError from './seamly-base-error'
+
 /**
  * This error is used to alert the user that there's a problem with the connection
  * when initialising the application because of a connection issue on either the server
  * or the client side.
  */
-export default class SeamlyUnavailableError extends Error {
-  constructor(params) {
-    super(params)
-
-    if (Error.captureStackTrace) {
-      Error.captureStackTrace(this, SeamlyUnavailableError)
-    }
+export default class SeamlyUnavailableError extends SeamlyBaseError {
+  constructor(originalError, ...params) {
+    super(originalError, ...params)
 
     this.name = 'SeamlyUnavailableError'
     this.langKey = 'errors.seamlyUnavailable'