@brightspot/ui 3.0.1-cms-ui-migration.3 → 3.0.1

package/src/legacy/tool-ui/src/rtc/index.ts

@@ -1,276 +0,0 @@
-import { BroadcastChannel, createLeaderElection } from 'broadcast-channel'
-import { v4 as uuidv4 } from 'uuid'
-import Socket from './Socket'
-import { JSONValue } from '../Types'
-
-const isV5Enabled = window.BRIGHTSPOT?.ui?.cms?.enableV5UI === true
-const autoUpdatesEnabled =
-  window.BRIGHTSPOT?.ui?.cms?.enableAutomaticUpdates === true
-
-// Events that will be blocked when automatic updates are disabled in V5 UI.
-// All other events will continue to be processed normally.
-const BLOCKED_EVENTS = [
-  'com.psddev.cms.tool.page.content.PublishBroadcast',
-  'com.psddev.assign.AssignmentRtcBroadcast',
-  'com.psddev.cms.conversation.PostBroadcast',
-  'brightspot.liveblog.LiveBlogPostRtcBroadcast',
-]
-
-let rtc: {
-  initialize: (state: string, data: JSONValue, callback: () => void) => void
-  restore: (state: string, data: JSONValue, callback: () => void) => void
-  receive: (broadcast: string, callback: (data: JSONValue) => void) => void
-  receiveOnce: (broadcast: string, callback: () => void) => void
-  execute: (action: string, data: JSONValue) => void
-}
-
-if (window.DISABLE_RTC || !document.documentElement.dataset.userId) {
-  // Fake methods that do nothing when the RTC is disabled.
-  rtc = {
-    initialize: function () {},
-    restore: function () {},
-    receive: function () {},
-    receiveOnce: function () {},
-    execute: function () {},
-  }
-} else {
-  const BROADCAST = 'broadcast'
-  const CALLBACK = 'callback'
-  const CONNECT = 'connect'
-  const DISCONNECT = 'connect'
-  const EXECUTE = 'execute'
-  const RESTORE = 'restore'
-
-  // End restoring state by triggering callbacks.
-  const broadcastCallbacks: {
-    [key: string]: ((data: JSONValue) => void)[]
-  } = {}
-
-  const triggerBroadcastCallbacks = (broadcast: string, data: JSONValue) => {
-    if (
-      isV5Enabled &&
-      !autoUpdatesEnabled &&
-      BLOCKED_EVENTS.includes(broadcast)
-    ) {
-      // Skip this blocked event when automatic updates are disabled
-      return
-    }
-
-    for (const callback of broadcastCallbacks[broadcast] ?? []) {
-      callback(data)
-    }
-  }
-
-  const endRestore = (
-    restoreCallback: (
-      broadcasts?: [{ broadcast: string; data: JSONValue }],
-    ) => void,
-    broadcasts: [{ broadcast: string; data: JSONValue }],
-  ) => {
-    for (const { broadcast, data } of broadcasts ?? []) {
-      triggerBroadcastCallbacks(broadcast, data)
-    }
-
-    if (restoreCallback) {
-      restoreCallback(broadcasts)
-    }
-  }
-
-  // Start restoring state when not a leader.
-  const callbackIdPrefix = `${uuidv4()}-`
-  let callbackIdIndex = 0
-  const channel = new BroadcastChannel('brightspot-rtc')
-
-  const startRestore = (
-    message: { type: string; [key: string]: unknown },
-    callback: () => void,
-  ) => {
-    const newCallbackId = callbackIdPrefix + ++callbackIdIndex
-
-    // [OC] Set up to trigger callbacks when the state restore is done.
-    const listener = ({
-      type,
-      callbackId,
-      broadcasts,
-    }: {
-      type: string
-      callbackId: string
-      broadcasts: [{ broadcast: string; data: JSONValue }]
-    }) => {
-      if (type === CALLBACK && callbackId === newCallbackId) {
-        channel.removeEventListener('message', listener)
-        endRestore(callback, broadcasts)
-      }
-    }
-
-    channel.addEventListener('message', listener)
-
-    // Trigger a send on the leader at [LS].
-    channel.postMessage({ type: RESTORE, message, callbackId: newCallbackId })
-  }
-
-  // Receive messages from the leader.
-  const restores: {
-    type: string
-    message: { type: string; className: string; data: JSONValue }
-    callback: () => void
-  }[] = []
-  const broadcastOnceCallbacks: {
-    [key: string]: ((data: JSONValue) => void)[]
-  } = {}
-
-  channel.addEventListener(
-    'message',
-    ({
-      type,
-      broadcast,
-      data,
-    }: {
-      type: string
-      broadcast: string
-      data: JSONValue
-    }) => {
-      if (type === CONNECT) {
-        // [OR] When the leader connects, restore states.
-        for (const { message, callback } of restores) {
-          startRestore(message, callback)
-        }
-      } else if (type === BROADCAST) {
-        // [OB] Trigger broadcast callbacks.
-        triggerBroadcastCallbacks(broadcast, data)
-      }
-    },
-  )
-
-  // Make sure that there's only one connection to the server.
-  let socket: Socket
-
-  const restore = (
-    message: { type: string; className: string; data: JSONValue },
-    callback: (broadcasts?: [{ broadcast: string; data: JSONValue }]) => void,
-  ) => {
-    socket.send(message, (broadcasts?: any) => {
-      endRestore(callback, broadcasts)
-    })
-  }
-
-  createLeaderElection(channel)
-    .awaitLeadership()
-    .then(() => {
-      socket = new Socket(`${window.ROOT_PATH}/_rtc`)
-
-      // [LS] Send a message on behalf of other windows.
-      channel.addEventListener('message', ({ type, message, callbackId }) => {
-        if (type === DISCONNECT || type === EXECUTE) {
-          socket.send(message)
-        } else if (type === RESTORE) {
-          socket.send(message, (broadcasts) => {
-            // Trigger a callback on other windows at [OC].
-            channel.postMessage({ type: CALLBACK, callbackId, broadcasts })
-          })
-        }
-      })
-
-      socket.connect({
-        onConnect: () => {
-          // Restore states on the other windows at [OR].
-          channel.postMessage({ type: CONNECT })
-
-          // Restore states on the leader.
-          for (const { message, callback } of restores) {
-            restore(message, callback)
-          }
-        },
-        onReceive: ({
-          broadcast,
-          data,
-        }: {
-          broadcast?: string
-          data?: JSONValue
-        }) => {
-          if (broadcast && data) {
-            // Broadcast to the other windows at [OB].
-            channel.postMessage({ type: BROADCAST, broadcast, data })
-
-            // Trigger broadcast callbacks on the leader.
-            triggerBroadcastCallbacks(broadcast, data)
-
-            // Check if this event should be blocked when automatic updates are disabled in V5 UI
-            if (
-              !(
-                isV5Enabled &&
-                !autoUpdatesEnabled &&
-                BLOCKED_EVENTS.includes(broadcast)
-              )
-            ) {
-              for (const callback of broadcastOnceCallbacks[broadcast] ?? []) {
-                callback(data)
-              }
-            }
-          }
-        },
-      })
-    })
-
-  rtc = {
-    initialize: function (
-      state: string,
-      data: JSONValue,
-      callback: () => void,
-    ) {
-      rtc.restore(state, data, callback)
-
-      window.addEventListener('unload', () => {
-        const message = {
-          type: 'disconnect',
-          className: state,
-          data: data,
-        }
-
-        if (socket) {
-          socket.send(message, callback, true)
-        } else {
-          // Send the action to the leader at [LS].
-          channel.postMessage({ type: DISCONNECT, message })
-        }
-      })
-    },
-
-    restore: function (state: string, data: JSONValue, callback: () => void) {
-      const message = { type: 'restore', className: state, data }
-
-      restores.push({ type: RESTORE, message, callback })
-
-      if (socket) {
-        restore(message, callback)
-      } else {
-        startRestore(message, callback)
-      }
-    },
-
-    receive: function (broadcast: string, callback: (data: JSONValue) => void) {
-      if (callback) {
-        ;(broadcastCallbacks[broadcast] ??= []).push(callback)
-      }
-    },
-
-    receiveOnce: function (broadcast: string, callback: () => void) {
-      if (callback) {
-        ;(broadcastOnceCallbacks[broadcast] ??= []).push(callback)
-      }
-    },
-
-    execute: function (action: string, data: JSONValue) {
-      const message = { type: 'execute', className: action, data }
-
-      if (socket) {
-        socket.send(message)
-      } else {
-        // Send the action to the leader at [LS].
-        channel.postMessage({ type: EXECUTE, message })
-      }
-    },
-  }
-}
-
-export default rtc

package/src/legacy/tool-ui/src/table/README.md

@@ -1,3 +0,0 @@
-# Table Web Component
-
-This is a web component that wraps a table and handles checkbox events.

package/src/legacy/tool-ui/src/table/index.ts

@@ -1,107 +0,0 @@
-import { LitElement, nothing } from 'lit'
-import { customElement, queryAsync } from 'lit/decorators.js'
-import { EventEmitterMixin } from '../EventEmitterMixin'
-import { WrappingMixin } from '../WrappingMixin'
-
-@customElement('btu-table')
-export default class Table extends EventEmitterMixin(
-  WrappingMixin(LitElement),
-) {
-  @queryAsync('table') _table!: Promise<HTMLTableElement>
-
-  connectedCallback(): void {
-    super.connectedCallback()
-
-    this._table.then((table) => {
-      const checkAll = table.querySelector<HTMLInputElement>(
-        ':scope th > input[type="checkbox"]',
-      )
-
-      checkAll?.addEventListener('click', this._updateCheckAll)
-
-      table
-        .querySelectorAll<HTMLInputElement>(
-          ':scope > tbody input[type="checkbox"]',
-        )
-        .forEach((c) => {
-          c.addEventListener('click', this._updateSelectAll)
-        })
-    })
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback()
-
-    this._table.then((table) => {
-      const checkAll = table.querySelector<HTMLInputElement>(
-        ':scope th > input[type="checkbox"]',
-      )
-
-      checkAll?.removeEventListener('click', this._updateCheckAll)
-
-      table
-        .querySelectorAll<HTMLInputElement>(
-          ':scope > tbody input[type="checkbox"]',
-        )
-        .forEach((c) => {
-          c.removeEventListener('click', this._updateSelectAll)
-        })
-    })
-  }
-
-  createRenderRoot() {
-    return this
-  }
-
-  // When all checkboxes are checked, the check all checkbox should be checked.
-  private _updateSelectAll = (e: Event) => {
-    this._table.then((table) => {
-      const checkAll = table.querySelector<HTMLInputElement>(
-        ':scope th > input[type="checkbox"]',
-      )
-      const checkboxes = table.querySelectorAll<HTMLInputElement>(
-        ':scope > tbody input[type="checkbox"]',
-      )
-
-      const checkedItems = table.querySelectorAll<HTMLInputElement>(
-        ':scope > tbody input[type="checkbox"]:checked',
-      )
-
-      if (checkAll) {
-        checkAll.checked =
-          checkboxes.length > 0 && checkedItems.length === checkboxes.length
-
-        this.emit('btu-table-checked-all')
-      }
-    })
-  }
-
-  // When check all checkbox is checked, check every other checkboxes.
-  private _updateCheckAll = (e: Event) => {
-    this._table.then((table) => {
-      const checkAll = e.target
-
-      if (checkAll instanceof HTMLInputElement) {
-        table
-          .querySelectorAll<HTMLInputElement>(
-            ':scope > tbody input[type="checkbox"]',
-          )
-          .forEach((c) => {
-            c.checked = checkAll.checked
-          })
-
-        this.emit('btu-table-checked-all')
-      }
-    })
-  }
-
-  render() {
-    return nothing
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'btu-table': Table
-  }
-}

package/src/legacy/tool-ui/src/theme/ColorRotator.ts

@@ -1,32 +0,0 @@
-import cc from 'color-convert'
-import getTheme from './index'
-
-const theme = getTheme()
-const colors = [
-  { v4: 'red', v5: 'darkorchid' },
-  { v4: 'orange', v5: 'green' },
-  { v4: 'yellow', v5: 'firebrick' },
-  { v4: 'green', v5: 'blue' },
-  { v4: 'blue', v5: 'purple' },
-  { v4: 'purple', v5: 'brown' },
-] as const
-
-export default class ColorRotator {
-  _index = 0
-
-  getNext() {
-    /* In v5 ui, the theme colors aren't present in the DOM as CSS variables, so we
-     * have to use hex values directly */
-    const colorEntry = colors[this._index % colors.length]
-    const color = window.BRIGHTSPOT?.ui.cms.enableV5UI
-      ? cc.keyword.hex(colorEntry.v5)
-      : theme.getColor(colorEntry.v4, 5)
-
-    const [h, s, l] = cc.hex.hsl(color)
-    return `#${cc.hsl.hex([
-      h + Math.floor(this._index++ / colors.length) * 20,
-      s,
-      l,
-    ])}`
-  }
-}