@brightspot/ui 3.0.0 → 3.0.1-cms-ui-migration.1

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

@@ -0,0 +1,90 @@
+# `<btu-toggleable>`
+
+## Examples
+
+HTML
+
+```html
+<btu-toggleable>
+  <select>
+    <option data-hide=".hide" ...>No element shown</option>
+    <option data-hide=".hide" data-show=".show1" ...>
+      Show first toggleable element
+    </option>
+    <option data-hide=".hide" data-show=".show2" ...>
+      Show second toggleable element
+    </option>
+  </select>
+</btu-toggleable>
+<!--demo elements that toggle-->
+<div class="hide show1">...</div>
+<div class="hide show2">...</div>
+```
+
+Javascript
+
+```javascript
+import Toggleable from 'Toggleable'
+
+const toggleable = new Toggleable()
+const select = `<select>
+                  <option data-hide=".hide">No element shown</option>
+                  <option data-hide=".hide" data-show=".show1">Show first toggleable element</option>
+                  <option data-hide=".hide" data-show=".show2">Show second toggleable element</option>
+                </select>`
+const showDiv1 = `<div class="hide show1"></div>`
+const showDiv2 = `<div class="hide show2"></div>`
+
+toggleable.append(select)
+document.body.append(toggleable)
+document.body.append(showDiv1)
+document.body.append(showDiv2)
+```
+
+## Properties
+
+| Name           | Default | Description                                                                                                                                                                                                                                                                                                                             | Attribute       | Legacy                    |
+| -------------- | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------- |
+| `rootSelector` | `null`  | An optional CSS selector string used to query for the `root` of the Toggleable component. The `root` is used as the base element for the query selector that retrieves the elements that will be shown or hidden depending on the value selected. The `root` defaults to the document body if the `rootSelector` is missing or invalid. | `root-selector` | `data-root` on `<select>` |
+
+## Private Properties
+
+| Name                    | Placement          | Description         | Required?                                                                       |
+| ----------------------- | ------------------ | ------------------- | ------------------------------------------------------------------------------- |
+| `data-show`             | `<option>`         | CSS selector string | yes, to toggle visibility of an element (omit if option is hiding all elements) |
+| `data-hidden`           | `<option>`         | CSS selector string | yes, to toggle hidden state of element(s)                                       |
+| `data-form-fields-url`  | `.toggleable-form` | string              | only to fetch toggled content                                                   |
+| `data-form-fields-data` | `.toggleable-form` | string              | only to fetch toggled content with data in request                              |
+
+## How to Toggle
+
+Toggleable adds functionality to `<select>` elements by conditionally displaying and hiding content based on the selected `<option>`. Each `<option>` can have `data-hide` and `data-show` attributes whose values are CSS selectors that match the elements to hide or show, respectively, when that `<option>` is selected.
+
+## Working with Forms
+
+A toggleable element can have its content dynamically loaded when it has a direct child with the class `toggleable-form` and attributes `data-form-fields-url` and `data-form-fields-data`. On selection of the option associated with this element, a fetch request will be made to the url from the attribute, and the `body` of that request will be the encoded value of the -data attribute. The response is then loaded into the toggled element.
+
+```html
+<btu-toggleable>
+  <select>
+    <option data-hide=".hide" ...>Default</option>
+    <option data-hide=".hide" data-show="show1" ...>
+      Option to trigger fetch
+    </option>
+    ...
+  </select>
+</btu-toggleable>
+<div class="hide show1">
+  <div
+    class="toggleable-form"
+    data-form-fields-data="{'_id':'123','_type':'456'}"
+    data-form-fields-url="/some/url?params=789"
+  ></div>
+</div>
+```
+
+## Deprecated
+
+| Name     | Type  |
+| -------- | ----- |
+| `toggle` | Event |

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

@@ -0,0 +1,230 @@
+import Cookies from 'js-cookie'
+import { LitElement, PropertyValues } from 'lit'
+import { customElement, property } from 'lit/decorators.js'
+import { EventEmitterMixin } from '../EventEmitterMixin'
+import { WrappingMixin } from '../WrappingMixin'
+
+interface Form {
+  element: HTMLElement
+  fieldData: string
+  fieldUrl: string
+}
+
+@customElement('btu-toggleable')
+export default class Toggleable extends EventEmitterMixin(
+  WrappingMixin(LitElement),
+) {
+  static get tagName() {
+    return 'btu-toggleable'
+  }
+
+  private _forms: Form[]
+  private _root: HTMLElement
+  private _select?: HTMLSelectElement
+
+  @property({ attribute: 'root-selector' })
+  rootSelector?: string
+
+  // Overrides #find in superclass.
+  find() {
+    return this.querySelector<HTMLSelectElement>(':scope > select')
+  }
+
+  set child(_c: HTMLSelectElement) {
+    super._child = _c
+    this._select = _c
+    this.addEventListener('change', this._handleChange)
+    this._handleChange()
+  }
+
+  constructor() {
+    super()
+    this._forms = []
+    this._root = window.document.body
+  }
+
+  createRenderRoot() {
+    return this
+  }
+
+  disconnectedCallback(): void {
+    this.removeEventListener('change', this._handleChange)
+  }
+
+  willUpdate(changedProperties: PropertyValues<this>) {
+    if (changedProperties.has('rootSelector')) {
+      if (this.rootSelector && typeof this.rootSelector === 'string') {
+        const root = this._select?.closest(this.rootSelector)
+        if (root instanceof HTMLElement) {
+          this._root = root
+        } else {
+          console.error(
+            'Querying for the rootSelector did not return a valid HTML element.',
+          )
+        }
+      } else if (this.rootSelector != null) {
+        console.error(
+          'An invalid rootSelector was provided. Expected non-empty string.',
+        )
+      }
+    }
+  }
+
+  private _handleChange() {
+    if (this._select?.matches('[disabled]')) return
+
+    const selectedOption = this._select?.options[this._select.selectedIndex]
+
+    const convertId = this._select?.dataset.selectedId
+    const convertType = this._select?.dataset.selectedType
+
+    let convertData = ''
+    let formData = ''
+
+    if (convertId) {
+      const objectForm = document.querySelector(
+        '.objectInputs[data-id="' + convertId + '"]',
+      )
+
+      if (objectForm) {
+        objectForm.querySelectorAll('[name]').forEach((input, key) => {
+          if (
+            input instanceof HTMLInputElement ||
+            input instanceof HTMLTextAreaElement ||
+            input instanceof HTMLSelectElement
+          ) {
+            const { name, value } = input
+            formData +=
+              (key === 0 ? '' : '&') +
+              encodeURIComponent(name) +
+              '=' +
+              encodeURIComponent(value)
+          }
+        })
+
+        if (convertType) {
+          convertData =
+            '&convert=true&convertType=' +
+            encodeURIComponent(convertType) +
+            '&convertId=' +
+            encodeURIComponent(convertId)
+        }
+      }
+    }
+
+    this._toggle(selectedOption?.dataset.hide, true, null, null)
+    this._toggle(selectedOption?.dataset.show, false, convertData, formData)
+
+    if (selectedOption) this._setSelected(selectedOption)
+  }
+
+  private _toggle(
+    selector: string | undefined,
+    disable: boolean,
+    convertData: string | null,
+    newObjData: string | null,
+  ) {
+    let divsToToggle: NodeListOf<HTMLDivElement>
+    const inputs: Array<HTMLElement> = []
+
+    if (selector) {
+      selector = ':scope ' + selector.replaceAll(', ', ', :scope ')
+      selector = selector.replaceAll(':scope :scope ', ':scope ')
+      divsToToggle = this._root.querySelectorAll(selector)
+
+      if (!disable) {
+        const toggleableForms: HTMLElement[] = []
+        divsToToggle.forEach((div) => {
+          const forms = div.querySelectorAll<HTMLElement>(
+            ':scope > .toggleable-form[data-form-fields-url]',
+          )
+          forms?.forEach((el) => toggleableForms.push(el))
+        })
+
+        toggleableForms?.forEach((element) => {
+          const form: Form = {
+            element,
+            fieldData: element.dataset.formFieldsData || '',
+            fieldUrl: element.dataset.formFieldsUrl || '',
+          }
+
+          const url = form.fieldUrl
+          let data = 'data=' + encodeURIComponent(form.fieldData)
+
+          if (convertData) data += convertData
+          if (newObjData) data += '&' + newObjData
+
+          const fetchData = async () => {
+            const response = await fetch(url, {
+              method: 'POST',
+              credentials: 'include',
+              headers: {
+                'Brightspot-CSRF': Cookies.get('bsp.csrf') || '',
+                'Content-Type':
+                  'application/x-www-form-urlencoded;charset=UTF-8',
+              },
+              cache: 'no-cache',
+              body: data,
+            })
+
+            form.element.innerHTML = await response.text()
+            if (response.ok) {
+              delete form.element.dataset.formFieldsUrl
+              delete form.element.dataset.formFieldsData
+
+              form.element.dispatchEvent(
+                new CustomEvent('create', { bubbles: true }),
+              )
+              form.element.dispatchEvent(new Event('load'))
+              form.element.dispatchEvent(new UIEvent('resize'))
+            } else {
+              form.element.dispatchEvent(
+                new CustomEvent('error', {
+                  bubbles: true,
+                  detail: { message: response.text(), code: response.status },
+                }),
+              )
+            }
+          }
+          fetchData()
+
+          this._forms.push(form)
+        })
+      }
+
+      divsToToggle.forEach((el) => {
+        el.querySelectorAll<HTMLElement>(
+          'input, textarea, select, button',
+        ).forEach((input) => {
+          inputs.push(input)
+        })
+
+        if (el.matches('input, textarea, select, button')) {
+          inputs.push(el)
+        }
+
+        el.setAttribute('style', disable ? 'display: none;' : '')
+        el
+          .querySelector('.toggleable')
+          ?.dispatchEvent(new CustomEvent('create', { bubbles: true }))
+        el.dispatchEvent(new UIEvent('resize'))
+      })
+
+      inputs.forEach((input) => {
+        input.toggleAttribute('disabled', disable)
+      })
+    }
+  }
+
+  private _setSelected(selectedOption: HTMLOptionElement) {
+    if (!this._select) return
+    this._select.dataset.selectedId = selectedOption.value
+    this._select.dataset.selectedType = selectedOption.dataset.type || ''
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'btu-toggleable': Toggleable
+  }
+}

package/src/legacy/tool-ui/src/Translation.css

@@ -0,0 +1,115 @@
+.Widget[data-internal-name='com.psddev.translation.page.TranslationTab']
+  > .inputContainer {
+  @apply p-4;
+
+  .inputLabel {
+    @apply mb-1.5 text-sm font-semibold;
+  }
+}
+
+.Widget[data-internal-name='com.psddev.translation.page.TranslationTab'] > br {
+  @apply hidden;
+}
+
+/* Actions dropdown menus */
+.TranslationsTab-actionsToggle {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon before:btu-icon-ellipsis;
+}
+
+.TranslationsTab-actionsToggle.is-active {
+  @apply btu-button-pressed before:btu-icon before:btu-icon-x;
+}
+
+.TranslationsTab-actions {
+  @apply Dropdown;
+}
+
+.TranslationsTab-actions [role='menuitem'] {
+  @apply Dropdown-item;
+}
+
+.TranslationsTab-actions.is-open {
+  @apply Dropdown-is-open;
+}
+
+/* Translation frame, filters, & controls */
+.TranslationFrame {
+  @apply flex flex-col border-t;
+}
+
+.TranslationFrame-controls {
+  @apply flex gap-2 overflow-x-auto p-4;
+}
+
+.TranslationFrame-filters {
+  @apply order-1 flex shrink-0;
+}
+
+.TranslationFrame-filters > .ComboInput:not(:last-child) {
+  @apply me-2;
+}
+
+/* Bulk actions three dot menu */
+.TranslationFrame-controls [name='BulkActions'] {
+  @apply order-2;
+
+  .TranslationsTab-actionsToggle {
+    @apply btu-button-outline;
+  }
+}
+
+/* Make table scrollable horizontally */
+.TranslationFrame-controls + .NestedForm {
+  @apply mb-4 overflow-x-auto;
+}
+
+/* Source Modified status */
+.TranslationTable-updated > b {
+  @apply font-normal text-warning-600;
+}
+
+/* Error status */
+.TranslationTable-errors {
+  @apply text-error-600;
+
+  a {
+    @apply text-error-600;
+  }
+}
+
+.TranslationTable-errorLabel,
+.TranslationTable-sourceLabel,
+.TranslationTable-statusLabel {
+  @apply italic;
+}
+
+.TranslationTable-sourceLabel + a {
+  @apply text-sm text-gray-700 no-underline hover:text-gray-900 hover:underline focus:text-gray-700;
+}
+
+.TranslationReadOnlyTargetLocales > li {
+  @apply pb-2;
+}
+
+/* Styles specific to Translations being in the right rail */
+.ContentEdit-right .TranslationFrame .LinkTable {
+  @apply mt-0;
+}
+
+/* Styles specific to Translations being a tab */
+.Tab[data-tab='Translations'] {
+  @apply -mx-[var(--space)] w-[calc(100%_+_var(--space)_*_2)];
+
+  .inputContainer {
+    @apply m-4;
+  }
+
+  > br {
+    @apply hidden;
+  }
+}
+
+/* "Translate This..." popup */
+.ActionBar .Button.is-btu-button-gray {
+  @apply !btu-button-gray;
+}

package/src/legacy/tool-ui/src/Translation.ts

@@ -0,0 +1,20 @@
+import onFind from './dom/onFind'
+import { setupMenuForAria, toggleMenu } from './dom/popupMenu'
+
+onFind('.TranslationsTab-actionsToggle', (button: HTMLElement) => {
+  const actionWrapper = button.closest('.TranslationsTab-actionsWrapper')
+
+  if (actionWrapper) {
+    const actions = actionWrapper.querySelector<HTMLElement>(
+      '.TranslationsTab-actions',
+    )
+
+    if (actions) {
+      setupMenuForAria(actions, button)
+
+      button.addEventListener('click', (e) => {
+        toggleMenu(actions, button)
+      })
+    }
+  }
+})

package/src/legacy/tool-ui/src/TreeList.css

@@ -0,0 +1,45 @@
+.TreeList {
+  @apply text-sm;
+
+  .TreeList {
+    @apply ml-[0.5625rem] pl-[0.9375rem] shadow-[-1px_0_0_theme(colors.gray.300)];
+  }
+
+  li {
+    @apply my-4 font-normal text-gray-500 [&:not(.TreeList-group)]:first:mt-2;
+  }
+
+  .TreeList-group {
+    @apply font-medium text-gray-700;
+
+    .TreeList-group {
+      @apply mt-6 first:mt-4;
+    }
+
+    + .TreeList-radio {
+      @apply pl-[0.0625rem];
+    }
+  }
+
+  .TreeList-group.is-insertable {
+    .TreeList-group {
+      @apply ml-[0.5625rem] pl-[0.9375rem] shadow-[-1px_0_0_theme(colors.gray.300)];
+    }
+
+    .TreeList.is-insertable {
+      @apply mt-4;
+    }
+
+    .TreeList-radio.is-insertable {
+      @apply relative top-2 ml-6 border-t border-gray-300;
+
+      &:not(:has(+ .TreeList-group)) {
+        @apply pb-4;
+      }
+
+      input[type='radio']:not(:scope + label) {
+        @apply absolute -left-6 -top-2;
+      }
+    }
+  }
+}

package/src/legacy/tool-ui/src/Types.ts

@@ -0,0 +1,44 @@
+export type CSSAbsUnit = 'cm' | 'mm' | 'Q' | 'in' | 'pc' | 'pt' | 'px'
+export type CSSRelUnit =
+  | 'em'
+  | 'ex'
+  | 'ch'
+  | 'rem'
+  | 'lh'
+  | 'rlh'
+  | 'vw'
+  | 'vh'
+  | 'vmin'
+  | 'vmax'
+  | 'vb'
+  | 'vi'
+  | 'svw'
+  | 'svh'
+  | 'lvw'
+  | 'lvh'
+  | 'dvw'
+  | 'dvh'
+
+export type CSSUnit = `${number}${CSSAbsUnit | CSSRelUnit}`
+export type UnknownFunction = (...args: unknown[]) => unknown
+export type JSONValue =
+  | JSONObject
+  | JSONArray
+  | string
+  | number
+  | boolean
+  | null
+export interface JSONObject {
+  [key: string]: JSONValue
+}
+export type JSONArray = Array<JSONValue>
+
+// Temporary fix for jQuery plugins
+declare global {
+  interface JQuery {
+    popup(
+      action?: 'container' | 'open' | 'close' | 'source',
+      container?: JQuery,
+    ): JQuery
+  }
+}

package/src/legacy/tool-ui/src/Utilities.css

@@ -0,0 +1,7 @@
+.visible-if-focused {
+  @apply fixed;
+}
+
+.visible-if-focused:not(:focus, :hover) {
+  @apply translate-y-[-100vh] opacity-0;
+}

package/src/legacy/tool-ui/src/ViewMirror.css

@@ -0,0 +1,7 @@
+.ViewMirror-content .Message {
+  @apply justify-center rounded-none border-t-0;
+}
+
+.ViewMirror-controls {
+  @apply hidden;
+}

package/src/legacy/tool-ui/src/ViewPreview.css

@@ -0,0 +1,59 @@
+.PreviewFrame {
+  @apply grid size-full [grid-template:"title"_auto_"banner"_auto_"controls"_min-content_"content"_1fr];
+}
+
+.PreviewFrame-types {
+  @apply [grid-area:controls];
+}
+
+.PreviewFrame-typeFrame {
+  @apply contents;
+}
+
+.PreviewFrame-moreActions {
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray ms-2 before:btu-icon before:btu-icon-sliders-horizontal;
+}
+
+.PreviewFrame-moreActions[aria-expanded] {
+  @apply btu-button-pressed before:btu-icon-x;
+}
+
+.PreviewFrame-typeActions {
+  @apply flex items-center gap-2;
+
+  .action-share {
+    @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray ms-2 before:btu-icon before:btu-icon-external-link;
+  }
+
+  .action-refresh {
+    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-sm before:btu-icon before:btu-icon-refresh-cw;
+  }
+}
+
+.PreviewFrame-typeDisplay {
+  @apply relative grid size-full overflow-clip rounded-2xl border border-gray-200 bg-white [grid-area:content] after:btu-loader before:absolute before:inset-0 before:z-[1] before:bg-white before:opacity-100 before:transition-all before:[transition-behavior:allow-discrete] after:absolute after:left-[50%] after:top-[50%] after:z-[2] after:size-[--iconSize-l] after:translate-x-[-50%] after:translate-y-[-50%];
+}
+
+.PreviewFrame-typeDisplay > iframe[name*='PreviewFrame'] {
+  @apply inset-0 z-10 size-full;
+}
+
+.PreviewFrame-previewToEditToggle {
+  @apply me-auto mt-4 flex whitespace-nowrap;
+
+  & input {
+    @apply Checkbox-toggle;
+  }
+}
+
+.PreviewFrame:has(.PreviewFrame-previewToEditToggle input:not(:checked))
+  .Preview-overlayFrame {
+  @apply hidden;
+}
+
+/*
+  Matches the state of preview iframe when it is loaded and hides the loading indicator/ui
+*/
+.PreviewFrame-typeDisplay:not(:has(iframe[name='PreviewFrame-preview'])) {
+  @apply before:hidden before:opacity-0 before:transition-all before:duration-[2000ms] after:hidden;
+}

package/src/legacy/tool-ui/src/ViewWatchers.css

@@ -0,0 +1,69 @@
+.ViewWatchers-content.fixedScrollable {
+  @apply [grid-column:fullbleed-start_/_fullbleed-end];
+}
+
+/************ "Add Watcher" dropdown ************/
+.ViewWatchers-addForm {
+  @apply border-b;
+}
+
+.ViewWatchers-addForm .CIG {
+  @apply py-[--CIG-padding];
+}
+
+.ViewWatchers-addForm .CIG-row {
+  @apply mt-0 pt-0 after:hidden;
+}
+
+.ViewWatchers-addForm .CIG-small {
+  @apply mt-0;
+}
+
+.ViewWatchers-addForm
+  :is(
+    .CIG-label,
+    .ContentSelector-search,
+    .ContentSelector-edit,
+    .ContentSelector-clear
+  ) {
+  @apply hidden;
+}
+
+.ViewWatchers-addForm .ComboInput {
+  @apply rounded-r-lg;
+}
+
+/************ "Search Watchers" Input ************/
+.ViewWatchers-search {
+  @apply py-[--space] pb-4;
+}
+
+.ViewWatchers-search label {
+  @apply mt-8;
+}
+
+/************ Watchers Table ************/
+.ViewWatchers-table {
+  @apply pb-6;
+}
+
+.ViewWatchers-table .ViewWatchers-item {
+  @apply max-h-none gap-3 py-3 hover:bg-transparent [&:not(:last-child)]:border-b;
+}
+
+.ViewWatchers-item-avatar {
+  @apply flex-shrink-0;
+}
+
+/* Keeps default bg color on hover of non-interactive avatar */
+.ViewWatchers-item-avatar .ToolUserAvatar {
+  @apply hover:bg-purple-600;
+}
+
+.ViewWatchers-item-name {
+  @apply flex-grow truncate;
+}
+
+.ViewWatchers-remove {
+  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-error flex-shrink-0 before:btu-icon before:btu-icon-minus;
+}