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

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

@@ -1,71 +0,0 @@
-.SharePreview,
-.ViewMirror {
-  @apply grid h-[100dvh] w-[100vw] bg-gray-50 [grid-template:"title_title"_auto_"type_controls"_auto_"content_content"_1fr_/_auto_1fr];
-}
-
-.SharePreview-title,
-.ViewMirror-title {
-  @apply flex items-center justify-between border-b border-gray-200 bg-gray-50 px-6 py-[0.38rem] text-sm font-medium [grid-area:title];
-  a {
-    @apply text-black;
-  }
-}
-
-.SharePreview-info {
-  @apply grow truncate;
-}
-
-.SharePreview-content,
-.ViewMirror-content {
-  @apply contents;
-}
-
-.SharePreviewExpiration {
-  @apply flex items-center gap-2;
-}
-
-@scope (.SharePreview, .ViewMirror) {
-  & .PreviewFrame,
-  .PreviewFrame-typeFrame,
-  .PreviewFrame-typeControlsContainer,
-  .PreviewFrame-typeControlsContainer > form {
-    @apply contents;
-  }
-
-  & .PreviewFrame-types {
-    @apply border-b bg-white py-4 pe-2 ps-6 [grid-area:type];
-  }
-
-  /* When there's no preview type options, have the other controls span both columns */
-  &
-    .PreviewFrame-types[style*='display: none']
-    + .PreviewFrame-typeFrame
-    .PreviewFrame-iFrameControlsForm {
-    @apply col-span-full ps-6;
-  }
-
-  & .PreviewFrame-typeDisplay {
-    @apply relative m-4 mt-2 grid [grid-area:content] [grid:subgrid/subgrid];
-
-    iframe {
-      @apply col-span-full;
-    }
-  }
-
-  & .PreviewFrame-iFrameControlsForm {
-    @apply flex flex-wrap gap-2 border-b border-b-gray-200 bg-white py-4 pe-6 [grid-area:controls];
-  }
-
-  & .PreviewFrame-typeControls,
-  & .PreviewFrame-moreActions {
-    @apply hidden;
-  }
-
-  & .PreviewFrame-typeControls:has(select) {
-    @apply flex items-center gap-2;
-  }
-
-  & .ComboInput {
-    @apply max-w-[25dvw];
-  }
-}

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

@@ -1,23 +0,0 @@
-.SkipLinks {
-  @apply absolute left-0 top-0 z-[10000] m-4 flex w-[343px] flex-col items-start rounded-lg bg-white shadow-lg transition-[transform,opacity] duration-150 ease-in-out;
-}
-
-.SkipLinks:not(:focus-within) {
-  @apply -translate-y-[200%] opacity-0;
-}
-
-.SkipLinks-heading {
-  @apply btu-heading-5 px-4 py-2 text-gray-900;
-}
-
-.SkipLinks-note {
-  @apply border-t border-t-gray-200 px-4 pb-2 pt-4 text-sm text-gray-500;
-}
-
-.SkipLinks-list {
-  @apply flex w-full list-none flex-col gap-2 px-4 pb-4;
-}
-
-.SkipLinks-link {
-  @apply btu-button btu-button-fill-none btu-button-primary w-full justify-start bg-white;
-}

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

@@ -1,112 +0,0 @@
-import './SkipLinks.css'
-import onFind from './dom/onFind'
-import { focusRegionManager } from './FocusRegions'
-import create from './dom/create'
-import { localizeShortcut } from './platform'
-
-onFind('.aria--skiptoContent', (originalButton: HTMLElement) => {
-  let nav: HTMLElement | null = null
-  let list: HTMLElement | null = null
-  let note: HTMLElement | null = null
-  let lastRegionKey = ''
-
-  const skipToPrefix = window.BRIGHTSPOT?.ui.tooltips.skipLinks.heading
-
-  originalButton.addEventListener('focus', () => {
-    const layer = focusRegionManager.getTopLayer()
-    const regions = focusRegionManager.getVisibleRegions(layer)
-
-    // Grab the visible regions and filter for those with labels
-    const labeledRegions = regions
-      .map((config) => ({
-        config,
-        label: focusRegionManager.getRegionLabel(config),
-      }))
-      .filter(
-        (entry): entry is { config: typeof entry.config; label: string } =>
-          entry.label !== null,
-      )
-
-    // No labeled regions — leave the original button as-is
-    if (labeledRegions.length === 0) return
-
-    // Skip rebuild if the set of visible labeled regions hasn't changed
-    const regionKey = labeledRegions
-      .map((r) => `${r.config.id}:${r.label}`)
-      .join('|')
-    const needsRebuild = regionKey !== lastRegionKey
-
-    // Build the panel shell once
-    if (!nav) {
-      nav = create('nav', {
-        className: 'SkipLinks',
-        'aria-label': skipToPrefix,
-      })
-
-      const heading = create('h2', {
-        className: 'SkipLinks-heading',
-        textContent: skipToPrefix,
-      })
-
-      const rawSkipNote = window.BRIGHTSPOT?.ui.tooltips.skipLinks.note
-      const skipNote = rawSkipNote ?? ''
-      note = create('p', {
-        className: 'SkipLinks-note',
-        textContent: localizeShortcut(skipNote),
-      })
-
-      list = create('ul', {
-        className: 'SkipLinks-list',
-      })
-
-      nav.append(heading, note, list)
-      originalButton.insertAdjacentElement('beforebegin', nav)
-    }
-
-    // Rebuild links only when regions have changed
-    if (needsRebuild && list) {
-      lastRegionKey = regionKey
-      list.innerHTML = ''
-
-      for (const { config, label } of labeledRegions) {
-        const li = create('li')
-        const link = create('button', {
-          className: 'SkipLinks-link',
-          type: 'button',
-          textContent: label,
-          'aria-label': `${skipToPrefix} ${label}`,
-        })
-        link.addEventListener('click', () => {
-          if (!config.element.isConnected) return
-          focusRegionManager.focusRegion(config, document.body)
-        })
-        li.append(link)
-        list.append(li)
-      }
-    }
-
-    // Hide the original button and move focus to the first link
-    originalButton.hidden = true
-    nav.removeAttribute('aria-hidden')
-    const firstLink = nav.querySelector<HTMLElement>('.SkipLinks-link')
-    firstLink?.focus()
-  })
-
-  // Dismiss with Escape key
-  document.addEventListener('keydown', (e) => {
-    if (!nav || e.key !== 'Escape') return
-    if (nav.contains(document.activeElement)) {
-      originalButton.hidden = false
-      originalButton.focus()
-    }
-  })
-
-  // When focus leaves the panel, re-show the original button for next time
-  document.addEventListener('focusin', (e) => {
-    if (!nav) return
-    if (!nav.contains(e.target as Node)) {
-      originalButton.hidden = false
-      nav.setAttribute('aria-hidden', 'true')
-    }
-  })
-})

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

@@ -1,9 +0,0 @@
-.SlackAuthContainer {
-  > div > form {
-    @apply flex gap-2;
-  }
-
-  .ComboInput {
-    @apply min-w-[50%];
-  }
-}

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

@@ -1,50 +0,0 @@
-/* Border & color animation on item placed in new spot */
-.Sortable-item.is-added {
-  --border-from: theme(colors.primary.600);
-  --border-to: theme(colors.gray.300);
-  --bg-from: theme(colors.primary.25);
-  --bg-to: theme(colors.white.DEFAULT);
-
-  @apply animate-sortable-added;
-}
-
-.Sortable-item.is-added *,
-.Sortable-item.is-added *::before {
-  --bg-start: theme(colors.primary.25);
-  --bg-end: theme(colors.white.DEFAULT);
-
-  @apply animate-sortable-added-bg;
-}
-
-.Sortable-drag.Sortable-selected,
-.Sortable-drag.Sortable-chosen {
-  --drag-count: 1;
-
-  @apply flex items-center justify-center rounded-lg !border !border-solid border-primary-600 bg-primary-25 content-[--drag-label] before:text-sm before:font-semibold before:!text-gray-700 before:!no-underline before:content-["Move_"_counter(count)_"_item"_attr(item-suffix)] before:[counter-reset:count_var(--drag-count)];
-
-  > * {
-    @apply !hidden;
-  }
-}
-
-/* Override opacity 0.8 style coming from Sortablejs. */
-.Sortable-drag {
-  @apply animate-sortable-drag !opacity-100;
-}
-
-.Sortable-ghost {
-  @apply scale-x-95 !border !border-dashed !border-primary-600 !bg-primary-25 before:!hidden after:!hidden;
-}
-
-.MultiSortable-buttonToggle {
-  @apply btu-button btu-button-text-hidden btu-button-gray btu-button-xs bg-white before:btu-icon before:btu-icon-list-end touch-device:btu-button-sm;
-}
-
-.Sortable-selected .MultiSortable-buttonToggle {
-  @apply !bg-primary-50 before:text-primary-800;
-}
-
-/* RCIGs do not get this cursor because they use handles and the whole thing isn't draggable */
-.MultiSortable:not(.RCIG-item) {
-  @apply hover:cursor-move;
-}

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

@@ -1,34 +0,0 @@
-.ProseMirror {
-  &.is-typing {
-    .problem {
-      @apply no-underline;
-    }
-  }
-
-  .problem {
-    @apply underline decoration-error-700 decoration-wavy decoration-1 [text-decoration-skip-ink:none] [text-underline-position:under];
-  }
-
-  .problem[data-suggestions] {
-    @apply cursor-pointer;
-  }
-}
-
-.ProseMirror-spellcheck-suggestions {
-  @apply Dropdown min-w-[148px] [--Page-headerBottom:var(--page-header-h)];
-
-  &.is-opening:not(.is-removing) {
-    @apply Dropdown-is-open;
-  }
-
-  > li {
-    @apply Dropdown-item;
-  }
-}
-
-/* Highlight misspelled text in blue when suggestions are open */
-.Page:has(> .ProseMirror-spellcheck-suggestions.is-opening) {
-  .problem[data-suggestions]::selection {
-    @apply bg-primary-50 text-primary-900;
-  }
-}

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

@@ -1,62 +0,0 @@
-.StyleEmbeddedContent {
-  @apply relative flex h-[calc(100dvh_-_1px_-_4rem_-_var(--gap)_*_2)] flex-col;
-}
-
-.StyleEmbeddedContent-heading {
-  @apply pb-4 pt-6 text-md font-semibold text-gray-900;
-}
-
-.StyleEmbeddedContent-content {
-  @apply h-full overflow-auto md:grid md:grid-cols-[17.5rem_1fr];
-}
-
-.StyleEmbeddedContent-nav {
-  @apply w-full border-b border-r border-gray-200 bg-gray-50 md:overflow-y-auto md:border-b-0;
-}
-
-.StyleEmbeddedContent-search {
-  @apply relative block;
-}
-
-.StyleEmbeddedContent-search input {
-  @apply m-4 w-[calc(100%_-_theme(spacing.8))] border-transparent bg-gray-100 !ps-[calc(theme(iconSize.md)+theme(spacing.6))];
-}
-
-.StyleEmbeddedContent-search label {
-  @apply pointer-events-none absolute bottom-0 left-8 top-0 z-10 my-auto size-5 overflow-hidden before:btu-icon before:btu-icon-search;
-}
-
-.StyleEmbeddedContent-nav ul {
-  @apply grid gap-2 border-t p-4;
-}
-
-.StyleEmbeddedContent-nav li > a {
-  @apply block rounded-lg p-2 text-sm font-semibold text-gray-700 no-underline;
-
-  &:hover {
-    @apply bg-gray-100 text-gray-900;
-  }
-}
-
-.StyleEmbeddedContent-nav li.is-selected a {
-  @apply bg-primary-50 text-gray-900;
-}
-
-.StyleEmbeddedContent-main {
-  @apply bg-gray-100 p-6 pt-0 md:overflow-y-auto;
-}
-
-.StyleEmbeddedContent-items {
-  @apply !grid grid-cols-[repeat(auto-fill,_minmax(250px,_1fr))] gap-4;
-  li {
-    @apply flex;
-  }
-}
-
-.LinkTable.StyleEmbeddedContent-items {
-  @apply grid-cols-1;
-}
-
-.StyleEmbeddedContent-warning {
-  @apply hidden;
-}

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

@@ -1,53 +0,0 @@
-.Suggestions {
-  @apply py-4;
-}
-
-.Suggestions-refresh button {
-  @apply btu-button btu-button-outline btu-button-fill-none btu-button-gray mb-4 w-full before:btu-icon before:btu-icon-refresh-cw;
-}
-
-.Suggestions-refresh button.is-refreshing {
-  @apply opacity-50 before:animate-spin;
-}
-
-.Suggestions-list {
-  @apply border-t border-gray-200;
-}
-
-.Suggestions-list > .Widget-title {
-  @apply !border-b-0 !bg-gray-50;
-}
-
-.Suggestions-list-add {
-  @apply flex flex-wrap gap-2 py-4 !pe-2 pt-2;
-}
-
-.Suggestion-add {
-  @apply btu-badge-primary btu-badge-sm cursor-pointer hover:bg-primary-100 hover:text-primary-800;
-}
-
-.Suggestion-add.is-added {
-  @apply btu-badge-gray pointer-events-none text-gray-400 mix-blend-multiply dark:bg-gray-100 dark:mix-blend-normal;
-}
-
-.Suggestions-list-create {
-  @apply flex-col;
-}
-
-.Suggestion-create {
-  @apply py-2;
-}
-
-.Suggestion-create a {
-  @apply text-sm;
-}
-
-.Suggestion-create:not(:first-child),
-.Suggestions-list-create-item:not(:first-child) {
-  @apply border-t border-gray-200;
-}
-
-/* Error message (AWS Comprehend job failed) */
-.Suggestions .Message.is-error {
-  @apply mb-4;
-}

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

@@ -1,209 +0,0 @@
-import onFind from './dom/onFind'
-import Cookies from 'js-cookie'
-import rtc from './rtc'
-
-interface PublishBroadcastData {
-  mainObjectId: string
-  contentId: string
-}
-
-// Updates the list of suggestions added to fields
-function updateAddedSuggestions(): void {
-  const addedSuggestions = new Set<string>()
-  const selected = document.getElementsByClassName('ContentSelector-select')
-
-  Array.from(selected)
-    .filter((list) => list.firstChild !== null)
-    .forEach((list) => {
-      const firstChild = list.firstChild as HTMLElement
-      const id = firstChild?.getAttribute('value')
-      const parentNode = list.parentNode as HTMLElement
-      if (id && !parentNode.classList.contains('is-removing')) {
-        addedSuggestions.add(id)
-      }
-    })
-  updateSuggestionsVisibility(addedSuggestions)
-}
-
-// Updates the visibility of added suggestions
-function updateSuggestionsVisibility(
-  addedSuggestionsArray2: Set<string>,
-): void {
-  const addedClassName = 'is-added'
-  document
-    .querySelectorAll<HTMLElement>('.Suggestion-add')
-    .forEach((suggestion) => {
-      if (suggestion !== null) {
-        const id = suggestion.dataset.suggestionId
-        if (id && addedSuggestionsArray2.has(id)) {
-          suggestion.classList.add(addedClassName)
-        } else {
-          suggestion.classList.remove(addedClassName)
-        }
-      }
-    })
-}
-
-// Add suggestions to the correct field when clicked
-onFind('.Suggestion-add', (item: HTMLElement) => {
-  item.addEventListener('click', () => {
-    if (item.dataset.label) {
-      addItem(item, item.dataset.label)
-      updateAddedSuggestions()
-    }
-  })
-})
-
-// Post to the servlet for new suggestions, sending the form so changes can be recognized
-onFind('button[data-suggestions-url]', (element: HTMLButtonElement) => {
-  const url = element.dataset.suggestionsUrl
-  if (!url) return
-
-  element.addEventListener('click', async () => {
-    if (element.classList.contains('is-refreshing')) {
-      return
-    }
-
-    try {
-      const frame = element.closest<HTMLElement>('.frame')
-      if (!frame) return
-
-      // Show spinner while waiting on response
-      element.classList.add('is-refreshing')
-
-      const form = frame.closest<HTMLFormElement>('form')
-      if (!form) return
-
-      const data = new FormData(form)
-      const headers = new Headers()
-      const csrf = Cookies.get('bsp.csrf')
-      if (csrf) {
-        headers.append('Brightspot-CSRF', csrf)
-      }
-
-      const response = await fetch(url, {
-        method: 'POST',
-        headers: headers,
-        body: data,
-      })
-      const itemHtml = await response.text()
-
-      // Response received, remove spinner
-      element.classList.remove('is-refreshing')
-
-      frame.innerHTML = itemHtml
-    } catch (error) {
-      console.error(error)
-    }
-  })
-
-  // Set suggestions to inactive or active after page load
-  updateAddedSuggestions()
-})
-
-// Receive publish broadcasts for new Suggestion items and add the item to the field
-onFind('.Suggestions-list-add', (suggestionsList: HTMLElement) => {
-  const suggestionIds = Array.from(
-    suggestionsList.querySelectorAll<HTMLElement>(
-      '.Suggestion-add[data-suggestion-id]',
-    ),
-  )
-    .map((el) => el.dataset.suggestionId)
-    .filter((id): id is string => id !== undefined)
-
-  // Hide collapsible with empty suggestions results
-  if (
-    suggestionsList.childNodes.length === 0 &&
-    suggestionsList.parentNode instanceof HTMLElement
-  ) {
-    suggestionsList.parentNode.style.display = 'none'
-  }
-
-  rtc.receive(
-    'com.psddev.cms.tool.page.content.PublishBroadcast',
-    (data: unknown) => {
-      const publishData = data as PublishBroadcastData
-      const contentId = publishData.mainObjectId || publishData.contentId
-      if (suggestionIds.indexOf(contentId) === -1) {
-        setTimeout(() => {
-          const refresh = document.querySelector<HTMLButtonElement>(
-            'button[data-suggestions-url]',
-          )
-          if (refresh) {
-            refresh.click()
-          }
-        }, 2000)
-      }
-    },
-  )
-})
-
-// Add a suggestion to the correct field and scroll to it
-function addItem(item: HTMLElement, label: string): void {
-  const form = item.closest<HTMLFormElement>('form[data-content-id]')
-  if (!form) return
-
-  const fieldName = item.dataset.fieldName
-  if (!fieldName) return
-
-  const fieldDiv = form.querySelector<HTMLElement>(
-    `div[data-field-name="${fieldName}"]`,
-  )
-  if (!fieldDiv) return
-
-  const addButton = fieldDiv.querySelector<HTMLElement>('.addButton')
-  let fieldInput: HTMLInputElement | null
-
-  if (addButton) {
-    addButton.click()
-    const repeatableObjectId = fieldDiv.querySelector<HTMLElement>(
-      '.repeatableObjectId',
-    )
-    const addToTop = repeatableObjectId?.classList.contains('addToTop')
-    fieldInput = addToTop
-      ? fieldDiv.querySelector<HTMLInputElement>(
-          ':first-child > input.objectId',
-        )
-      : fieldDiv.querySelector<HTMLInputElement>(':last-child > input.objectId')
-  } else {
-    fieldInput = fieldDiv.querySelector<HTMLInputElement>('input.objectId')
-  }
-
-  if (!fieldInput) return
-
-  fieldInput.setAttribute('data-label', label)
-  fieldInput.setAttribute('data-label-html', label)
-
-  const suggestionId = item.dataset.suggestionId
-  if (suggestionId) {
-    fieldInput.value = suggestionId
-  }
-
-  if (addButton) {
-    const sourceContainer = fieldInput.closest<HTMLLIElement>('li')
-    if (sourceContainer) {
-      const typeId = item.dataset.typeId
-      if (typeId) {
-        sourceContainer.setAttribute('data-sortable-item-type', typeId)
-      }
-
-      onFind(
-        sourceContainer,
-        ':scope .ComboInput[aria-expanded=true]',
-        (dropDown: HTMLElement) => {
-          dropDown.click()
-        },
-      )
-    }
-  } else {
-    fieldDiv.querySelectorAll<HTMLElement>('.is-removing').forEach((el) => {
-      el.classList.remove('is-removing')
-    })
-  }
-
-  const event = document.createEvent('HTMLEvents')
-  event.initEvent('change', true, false)
-  fieldInput.dispatchEvent(event)
-
-  fieldDiv.scrollIntoView()
-}