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

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

@@ -1,90 +0,0 @@
-# `<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

@@ -1,230 +0,0 @@
-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

@@ -1,115 +0,0 @@
-.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

@@ -1,20 +0,0 @@
-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

@@ -1,45 +0,0 @@
-.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

@@ -1,44 +0,0 @@
-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

@@ -1,7 +0,0 @@
-.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

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

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

@@ -1,59 +0,0 @@
-.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

@@ -1,69 +0,0 @@
-.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;
-}