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

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

@@ -1,123 +0,0 @@
-/* AI Inline Container */
-.ProseMirrorAIInline-container {
-  @apply relative end-0 z-50 order-5 overflow-hidden border-t bg-white px-4 pb-0 pt-4;
-
-  &.collapsed,
-  &.is-loading,
-  &.has-suggestions {
-    @apply hidden;
-  }
-}
-
-/* Input Container */
-.ProseMirrorAIInline-container-inputContainer {
-  @apply flex items-center gap-2 pb-2;
-}
-
-.ProseMirrorAIInline-container-inputContainer-submitButton {
-  @apply btu-button btu-button-text-hidden btu-button-primary before:btu-icon before:btu-icon-send-horizontal;
-
-  &.is-loading {
-    @apply btu-button-fill-none btu-button-error bg-error-50 before:btu-icon-circle-stop;
-  }
-}
-
-/* Accept/Reject Container */
-.ProseMirrorAIInline-container-acceptRejectContainer {
-  @apply Dropdown;
-
-  &:not([hidden]) {
-    @apply Dropdown-is-open;
-  }
-
-  &[hidden] {
-    @apply hidden;
-  }
-}
-
-/* Actions Menu */
-.ProseMirrorAIInline-container-actions {
-  @apply flex flex-col;
-
-  > li {
-    @apply m-0 p-0;
-
-    > button {
-      @apply flex w-full cursor-pointer items-center gap-1 rounded px-3 py-2 text-start text-sm text-gray-900 hover:bg-gray-100;
-    }
-  }
-}
-
-.ProseMirrorAIInline-container-actions-accept-icon {
-  @apply me-1 before:btu-icon before:btu-icon-check;
-}
-
-.ProseMirrorAIInline-container-actions-rejectAll-icon {
-  @apply me-1 before:btu-icon before:btu-icon-x;
-}
-
-.ProseMirrorAIInline-container-actions-tryAgain-icon {
-  @apply me-1 before:btu-icon before:btu-icon-refresh-cw;
-}
-
-/* Suggestions Dropdown */
-.ProseMirrorAIInline-container-suggestions-dropdown {
-  @apply -mx-4 mt-2 w-[calc(100%+2rem)] border-t border-gray-200;
-}
-
-.ProseMirrorAIInline-container-suggestions-title {
-  @apply mx-4 mb-2 mt-4 text-sm text-gray-500;
-}
-
-.ProseMirrorAIInline-container-suggestions-list {
-  @apply flex flex-col;
-}
-
-.ProseMirrorAIInline-container-suggestions-list-item {
-  @apply p-0;
-
-  > button {
-    all: unset;
-    @apply box-border block w-full cursor-pointer text-start;
-
-    &:disabled,
-    &.is-disabled {
-      @apply cursor-default opacity-50;
-    }
-  }
-
-  &.is-empty {
-    @apply pointer-events-none cursor-default px-4 py-2;
-  }
-}
-
-.ProseMirrorAIInline-container-suggestion-item {
-  @apply cursor-pointer border-0 bg-transparent px-4 py-2 text-start text-sm text-gray-900 transition-colors duration-200 hover:bg-gray-300;
-}
-
-/* Loading Overlay */
-.ProseMirrorAIInline-loadingOverlay {
-  @apply order-5 flex-col border-t bg-white px-4 pb-0 pt-4;
-
-  display: none;
-
-  &.is-loading {
-    display: flex;
-  }
-}
-
-.ProseMirrorAIInline-loadingOverlay-prompt {
-  @apply mb-2 text-sm text-gray-400;
-}
-
-.ProseMirrorAIInline-loadingOverlay-spinner {
-  @apply flex py-2;
-}
-
-.ProseMirrorAIInline-loadingOverlay-spinner-icon {
-  @apply mt-0 h-5 w-5 animate-spin before:btu-icon before:btu-icon-loader;
-}
-
-.ProseMirrorAIInline-loadingOverlay-spinner-text {
-  @apply my-0 me-4 ms-2 text-sm text-gray-500;
-}

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

@@ -1,41 +0,0 @@
-/** Action Bar default styles
-  * Alignment:
-    1. All the action items are aligned to the right by default.
-    2. .Link.is-red actions are aligned to the left of action bar.
-    3. To align any other action items to the left use TW utility `me-auto`.
-
-  * Colors:
-    1. By default all buttons (that are not .Link) are styled as btu-button-primary.
-    2. Actions with class .action-cancel or .icon-action-cancel are styled as gray secondary buttons.
-    3. To style any other button as a secondary gray, use TW utility !btu-button-gray.
-*/
-
-.ActionBar {
-  @apply sticky bottom-0 z-10 flex items-center justify-end gap-3 border-y border-gray-200 bg-white px-[var(--Widget-padding,_theme(spacing.6))] py-3;
-
-  button,
-  .Button {
-    @apply btu-button btu-button-md;
-  }
-}
-
-.ActionBar:not(.is-top)
-  > button:not(.Link, .action-cancel, .icon-action-cancel),
-.ActionBar:not(.is-top)
-  > .Button:not(.Link, .action-cancel, .icon-action-cancel) {
-  @apply btu-button-primary;
-}
-
-.ActionBar .action-save,
-.ActionBar [name='action-upload'] {
-  @apply disabled:opacity-50;
-}
-
-.ActionBar .Link.is-red:not(.icon-action-cancel, .action-cancel) {
-  @apply -order-1 me-auto focus-visible:ring-error-100 focus:text-error-700 focus-visible:ring-4 focus-visible:ring-offset-error-600;
-}
-
-.ActionBar .action-cancel,
-.ActionBar .icon-action-cancel {
-  @apply btu-button btu-button-gray btu-button-md -order-1;
-}

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

@@ -1,258 +0,0 @@
-.Admin :where(.Widget-controls) {
-  .IconButton {
-    @apply btu-button-fill-none;
-  }
-
-  :where(.icon:not(.IconButton)) {
-    @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray before:btu-icon;
-  }
-
-  .icon-action-search {
-    @apply before:btu-icon-search;
-  }
-}
-
-/* Admin areas side nav styling */
-.Admin-nav {
-  @apply bg-gray-50;
-
-  > h2,
-  > .Widget:only-of-type > .Widget-title {
-    @apply btu-heading-4 sticky top-0 z-[12] border-b bg-gray-50 px-4 py-[18px] text-gray-900;
-
-    ~ .Widget .Widget-title,
-    ~ .Widget .Widget-controls {
-      @apply top-[65px];
-    }
-  }
-
-  .Widget {
-    @apply border-b bg-gray-50;
-
-    .SearchInput input {
-      @apply border-gray-300 bg-white;
-    }
-
-    > .Widget-title + *:not(.Widget-controls, .Widget-heading),
-    > .Widget-controls + *:not(.Widget-heading) {
-      @apply mt-4;
-    }
-
-    > .Message + form {
-      @apply mt-2;
-    }
-
-    /* These content selectors should just appear as normal ComboInputs */
-    > form > .ContentSelector-select + .ComboInput {
-      @apply rounded-lg pe-4;
-
-      &:not([aria-expanded='true'], :focus-visible) {
-        @apply border-gray-300;
-      }
-    }
-
-    > form > *,
-    > .frame:last-child,
-    > form:last-child {
-      @apply mb-2;
-    }
-
-    > .LinkTable:last-child,
-    > .LinkTable:has(+ .Widget-heading) {
-      @apply mb-4;
-    }
-
-    > *:has(.Pagination) {
-      @apply flex flex-col;
-    }
-
-    .Message {
-      @apply mt-0;
-    }
-  }
-
-  .Widget-title {
-    @apply bg-gray-50 py-4 text-sm font-semibold;
-  }
-
-  .Widget-controls .IconButton,
-  .Widget-controls .icon {
-    @apply btu-button-xs touch-device:btu-button-sm;
-  }
-
-  .Widget-heading {
-    @apply relative pb-2 pt-4 text-xs font-medium text-gray-600 before:absolute before:-left-[--space] before:-right-[--space] before:top-0 before:h-[1px] before:bg-gray-200;
-
-    &:not(:first-of-type) {
-      @apply before:absolute before:-left-[--space] before:-right-[--space] before:top-0 before:h-[1px] before:bg-gray-200;
-    }
-  }
-
-  .Widget-title + .Widget-heading {
-    @apply before:content-none;
-  }
-
-  /* Form filters (search input & comboinputs) */
-  .ContentForm-create {
-    @apply flex items-center gap-2;
-
-    .ComboInput {
-      --comboinput-w: calc(100% - theme(size.9) - theme(spacing.2));
-      @apply w-[--comboinput-w];
-    }
-    button.action-create {
-      @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray bg-white before:btu-icon before:btu-icon-plus;
-    }
-  }
-
-  .ContentSelector-select + .ComboInput {
-    @apply w-auto max-w-none;
-  }
-
-  /* Admin nav results */
-  .LinkTable {
-    @apply mb-2 empty:hidden;
-
-    &:has(+ .LinkTable:empty) {
-      @apply mb-4;
-    }
-  }
-
-  .LinkTable > li {
-    &.new > a {
-      @apply flex gap-2 before:btu-icon before:btu-icon-plus;
-    }
-
-    &.new.selected > a {
-      @apply before:text-primary-800 before:more-contrast:text-white;
-    }
-
-    &.selected {
-      @apply rounded-lg bg-primary-50 more-contrast:bg-primary-900;
-
-      a {
-        @apply font-semibold text-gray-900 more-contrast:text-white;
-      }
-    }
-
-    &:not(:first-child) {
-      @apply mt-2;
-    }
-
-    a:hover {
-      @apply text-gray-900;
-    }
-  }
-
-  .Pagination {
-    @apply order-2 mb-2 self-end;
-  }
-}
-
-.Admin-main {
-  > .Widget {
-    @apply min-h-full content-start @container/admin-widget;
-
-    &:where(:has(> .Widget-title + *:where(.Widget-controls) + form)),
-    &:where(:has(> .Widget-title + form)) {
-      @apply grid-rows-[auto_1fr];
-    }
-
-    &:where(:has(> .Widget-title + .Widget-controls + *:not(form) + form)) {
-      @apply grid-rows-[auto_auto_1fr];
-    }
-
-    > .Widget-title {
-      @apply btu-heading-4 py-[18px];
-    }
-
-    > form:has(> .CIG:not(.is-empty) ~ .ActionBar) {
-      @apply content-between;
-    }
-
-    > form > .ActionBar {
-      @apply self-end py-3;
-    }
-
-    > form > .ActionBar > button[name='action-trash'] {
-      @apply -ml-lg before:btu-icon before:btu-icon-trash;
-    }
-  }
-}
-
-/* Tailwind: sm */
-@media (min-width: 577px) {
-  .Admin {
-    --Admin-navWidth: 240px;
-    @apply relative grid h-full w-full [grid-template:_'nav_main'_/_var(--Admin-navWidth)_1fr];
-  }
-
-  .Admin-nav {
-    @apply overflow-auto border-r border-r-gray-200 [grid-area:nav];
-  }
-
-  .Admin-main {
-    @apply overflow-auto [grid-area:main];
-  }
-
-  /* Found in Admin -> Developer -> View APIs */
-  .Admin-main.is-miller {
-    --Admin-millerColumns: 1;
-    --miller-columns-w: calc(100% / var(--Admin-millerColumns));
-
-    @apply flex;
-
-    > .Widget {
-      @apply min-w-[--miller-columns-w] grow overflow-auto [grid-auto-rows:max-content];
-
-      &:not(:first-child) {
-        @apply border-l border-solid border-gray-100;
-      }
-
-      h1.Widget-title {
-        @apply py-5;
-      }
-
-      h2.Widget-title {
-        @apply relative z-0 py-3.5 text-sm;
-      }
-
-      h1.Widget-title + h2.Widget-title {
-        @apply mt-2;
-      }
-
-      &:not(.Widget-title) {
-        @apply break-all;
-      }
-
-      > p {
-        @apply py-2 text-sm text-gray-900;
-      }
-
-      > .BulletedList {
-        @apply [&:not(:empty)]:my-2;
-      }
-    }
-  }
-}
-
-/* Tailwind: md */
-@media (min-width: 769px) {
-  .Admin-main.is-miller {
-    --Admin-millerColumns: 2;
-  }
-}
-
-/* Tailwind: lg */
-@media (min-width: 993px) {
-  .Admin {
-    --Admin-navWidth: 240px;
-  }
-}
-
-/* Tailwind: xl */
-@media (min-width: 1201px) {
-  .Admin-main.is-miller {
-    --Admin-millerColumns: 3;
-  }
-}

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

@@ -1,3 +0,0 @@
-.HasAdobeLicense {
-  @apply absolute left-4 top-4 flex size-[28px] items-center justify-center rounded-full bg-success-50 before:btu-icon before:btu-icon-award before:text-success-500 before:btu-icon-xs;
-}

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

@@ -1,34 +0,0 @@
-.AnalyticsWidget {
-  /* Highchart color overrides */
-  --color-blue6: theme(colors.primary.500);
-  --color-gray6: theme(colors.gray.500);
-  --color-green6: theme(colors.success.500);
-  --color-red6: theme(colors.error.500);
-  --color-yellow6: theme(colors.warning.500);
-
-  @apply mt-4 rounded-lg border border-gray-200 px-0 pb-2 shadow-md;
-}
-
-.AnalyticsWidget-loading {
-  @apply mb-6 flex items-center justify-center gap-3 before:btu-loader before:size-[--Loader-size];
-}
-
-.AnalyticsWidget-content > .numbersPeriod {
-  @apply opacity-0 transition-opacity duration-300;
-}
-
-.AnalyticsWidget-content > .numbersPeriod.chart-loaded {
-  @apply opacity-100;
-}
-
-.AnalyticsWidget-controls {
-  @apply flex items-center justify-end border-b border-b-gray-200 px-6 py-[0.88rem];
-}
-
-.AnalyticsWidget-display {
-  @apply mt-6 overflow-hidden px-6;
-}
-
-.AnalyticsWidget .Chart {
-  @apply flex justify-center;
-}

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

@@ -1,158 +0,0 @@
-import $ from 'jquery'
-import onFind from './dom/onFind'
-
-const ANALYTICS_DATA_PATH =
-  window.BRIGHTSPOT?.web?.pagePaths[
-    'com.psddev.analytics.ui.AnalyticsDataToolPage'
-  ]
-
-interface AnalyticsData {
-  periodLabel: string
-  chartData: string
-}
-
-interface AnalyticsError {
-  error: string
-}
-
-type AnalyticsResponse = AnalyticsData | AnalyticsError
-
-export default class AnalyticsWidget {
-  private readonly element: HTMLElement
-  private readonly contentId: string
-  private readonly analyticsUrl: string | undefined
-  private isLoaded = false
-  private cache: Record<string, AnalyticsData> = {}
-  private currentPeriod = 'hours'
-
-  private readonly loadingElement: HTMLElement | null
-  private readonly contentElement: HTMLElement | null
-  private readonly errorElement: HTMLElement | null
-  private readonly periodSelector: HTMLSelectElement | null
-
-  constructor(element: HTMLElement) {
-    this.element = element
-    this.contentId = element.dataset.contentId || ''
-    this.analyticsUrl = ANALYTICS_DATA_PATH
-
-    this.loadingElement = element.querySelector('.AnalyticsWidget-loading')
-    this.contentElement = element.querySelector('.AnalyticsWidget-content')
-    this.errorElement = element.querySelector('.AnalyticsWidget-error')
-    this.periodSelector = element.querySelector(
-      '.AnalyticsWidget-periodSelector',
-    )
-
-    this.init()
-  }
-
-  private init(): void {
-    // Listen for tab activation
-    $(this.element)
-      .closest('[data-tab]')
-      .on('tabbedShow', () => {
-        // Only load if tab is actually selected/visible, not just during initial setup
-        const tabElement = this.element.closest<HTMLElement>('[data-tab]')
-        if (
-          !this.isLoaded &&
-          !tabElement?.classList.contains('TC-unselected')
-        ) {
-          this.loadAnalyticsData()
-        }
-      })
-
-    // Listen for period selector changes
-    if (this.periodSelector) {
-      this.periodSelector.addEventListener('change', (e: Event) => {
-        const target = e.target
-        if (target !== null && target instanceof HTMLSelectElement) {
-          this.currentPeriod = target.value
-          this.loadAnalyticsData()
-        }
-      })
-    }
-  }
-
-  private async loadAnalyticsData(): Promise<void> {
-    const period = this.currentPeriod
-
-    // Check cache first
-    if (this.cache[period]) {
-      this.displayData(this.cache[period])
-      return
-    }
-
-    // Check if analytics URL is available
-    if (!this.analyticsUrl) {
-      console.error('Analytics data endpoint not found in pagePaths')
-      this.showError()
-      return
-    }
-
-    this.showLoading()
-
-    try {
-      const response = await fetch(
-        `${this.analyticsUrl}?id=${this.contentId}&period=${period}`,
-      )
-
-      if (!response.ok) {
-        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
-      }
-
-      const data: AnalyticsResponse = await response.json()
-
-      if ('error' in data) {
-        throw new Error(data.error)
-      }
-
-      // Cache the result
-      this.cache[period] = data
-      this.displayData(data)
-      this.isLoaded = true
-    } catch (error) {
-      console.error('Failed to load analytics data:', error)
-      this.showError()
-    }
-  }
-
-  private showLoading(): void {
-    if (this.loadingElement) this.loadingElement.hidden = false
-    if (this.contentElement) this.contentElement.hidden = true
-    if (this.errorElement) this.errorElement.hidden = true
-  }
-
-  private showError(): void {
-    if (this.loadingElement) this.loadingElement.hidden = true
-    if (this.contentElement) this.contentElement.hidden = true
-    if (this.errorElement) this.errorElement.hidden = false
-  }
-
-  private displayData(data: AnalyticsData): void {
-    if (this.loadingElement) this.loadingElement.hidden = true
-    if (this.errorElement) this.errorElement.hidden = true
-    if (this.contentElement) this.contentElement.hidden = false
-
-    if (!this.contentElement) return
-
-    // Clear previous content
-    this.contentElement.innerHTML = ''
-
-    // Create chart container with the period class for compatibility
-    const chartContainer = document.createElement('div')
-    chartContainer.className = `numbersPeriod numbersPeriod-${data.periodLabel}`
-    chartContainer.addEventListener('highchart-loaded', () => {
-      chartContainer.classList.add('chart-loaded')
-    })
-
-    // Insert the chart data (HTML from the server)
-    if (data.chartData) {
-      chartContainer.innerHTML = data.chartData
-    }
-
-    this.contentElement.appendChild(chartContainer)
-  }
-}
-
-onFind('.AnalyticsWidget', (element: HTMLElement) => {
-  new AnalyticsWidget(element)
-})

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

@@ -1,31 +0,0 @@
-.ApiKey-apiKey {
-  @apply flex gap-2;
-}
-
-.ApiKey-value {
-  @apply text-sm font-medium text-gray-700;
-}
-
-.ApiKey-copyConfirmed,
-.ApiKeyConfig-value.CIG-row {
-  @apply hidden;
-}
-
-/* Hides the read-only field/method that only exists to display a better/friendlier note */
-.CIG[data-type='com.psddev.cms.api.ApiClient']
-  > .CIG-row[data-field-name='getClientId']
-  > .CIG-small {
-  @apply hidden;
-}
-
-/* Hides the add button on the deprecated API Keys field */
-.CIG[data-type='com.psddev.cms.api.ApiClient']
-  > .CIG-row[data-field='keys']
-  > .RCIG
-  > .RCIG-controls {
-  @apply hidden;
-}
-
-.CIG-note:has(.ApiKey-value) {
-  @apply basis-full;
-}

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

@@ -1,58 +0,0 @@
-/* Controls container */
-.AppetizeIo-controls form > * {
-  @apply me-0;
-}
-
-/* Display controls */
-.AppetizeIo-displayControls {
-  @apply flex items-center;
-}
-
-/* Input container */
-.AppetizeIo-inputContainer {
-  @apply flex items-center py-3;
-
-  input[type='radio'] {
-    @apply hidden;
-  }
-
-  input[type='radio'] + label {
-    @apply inline-block cursor-pointer bg-primary-500 px-2 py-1 text-white;
-  }
-
-  input[type='radio']:checked + label {
-    @apply bg-primary-700;
-  }
-}
-
-/* Embedded iframe */
-iframe[name='AppetizeIoEmbedded'] {
-  @apply h-[5000px] w-full bg-white p-4;
-}
-
-/* Scale container */
-.AppetizeIo-scale {
-  @apply flex items-center;
-
-  input {
-    @apply w-[80px];
-  }
-
-  span {
-    @apply px-2 pr-3 text-sm;
-  }
-}
-
-/* Rotate and restore page buttons */
-.AppetizeIo-rotate,
-.AppetizeIo-restorePage {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none ps-2 before:btu-icon;
-}
-
-.AppetizeIo-restorePage {
-  @apply before:btu-icon-rotate-ccw;
-}
-
-.AppetizeIo-rotate {
-  @apply before:btu-icon-proportions;
-}