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

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

@@ -0,0 +1,41 @@
+/** 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

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

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

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

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

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

@@ -0,0 +1,58 @@
+/* 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;
+}

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

@@ -0,0 +1,68 @@
+.Widget.is-associatedContentWidget {
+  @apply m-4 overflow-clip rounded-lg border border-gray-200 shadow-md;
+}
+
+.AssociatedContent {
+  @apply @container/associated-content;
+}
+
+.AssociatedContent-carousel {
+  @apply mb-2 mt-6;
+
+  .LinkCarousel {
+    @apply pb-4;
+  }
+}
+
+/* When the carousel is present, the controls should display a divider line between and gap accordingly.  */
+.AssociatedContent-carousel + .AssociatedContent-controls {
+  @apply relative mt-2 pt-6 before:absolute before:left-[calc(theme(spacing.6)_*_-1)] before:top-0 before:h-[1px] before:w-[calc(2_*_theme(spacing.6)_+_100%)] before:bg-gray-200;
+}
+
+.AssociatedContent-controls {
+  /* At large enough breakpoints search, sorts, and refresh appear in the same row */
+  @apply mb-2 mt-6 grid grid-cols-[1fr_auto] items-center [grid-column-gap:theme(spacing.2)] [grid-row-gap:theme(spacing.4)] @[570px]:grid-cols-[1fr_auto_auto];
+}
+
+.AssociatedContent-controls .SearchInput {
+  @apply min-w-[25%] @[570px]:max-w-[30cqi];
+}
+
+.AssociatedContent-sorts {
+  @apply col-span-full @[570px]:[grid-column:2];
+}
+
+.AssociatedContent-filters,
+.AssociatedContent-sorts {
+  @apply flex items-center;
+}
+
+.AssociatedContent-filters {
+  @apply gap-2 overflow-auto overflow-y-hidden pb-4 [grid-column:1/-1] [grid-row:3] @[570px]:[grid-row:2];
+}
+
+.AssociatedContent-refresh {
+  @apply btu-button btu-button-text-hidden btu-button-outline btu-button-fill-none btu-button-gray btu-button-sm [grid-column:2] [grid-row:1] before:btu-icon before:btu-icon-refresh-cw @[570px]:[grid-column:3];
+}
+
+/* Don't show these elements in this context. */
+.AssociatedContent-results {
+  :is(
+      .SearchWidget-controlsToggle,
+      .SearchResult-fields,
+      .SearchResult-limit,
+      .SearchResult-sorts,
+      .SearchResult-actions-wrapper
+    ) {
+    @apply hidden;
+  }
+
+  .SearchResult-views {
+    --controls-opacity: 1;
+  }
+}
+
+/* SearchWidget's CSS grid shouldn't be used in this context */
+.Widget.is-associatedContentWidget .SearchWidget-result {
+  @apply [grid-area:unset] [grid-column:content-start/content-end];
+}

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

@@ -0,0 +1,33 @@
+.AutoExpand {
+  --_grid-area: 1 / 1 / 2 / 2;
+
+  @apply grid w-full grid-cols-[100%];
+
+  &::before {
+    @apply TextInput invisible my-0 whitespace-pre-wrap break-words content-[attr(data-value)_'_'];
+  }
+
+  &::before,
+  > :where(.AutoExpand-shim, textarea, btu-textarea-input) {
+    grid-area: var(--_grid-area);
+  }
+
+  > :where(textarea, btu-textarea-input > textarea) {
+    @apply overflow-hidden;
+  }
+
+  /* Prevent the textarea from collapsing below one row when empty.
+     The min-block-size replicates the single-row height of .TextInput:
+     1lh (line height) + 1rem (py-2 top+bottom padding) + 2px (1px border top+bottom). */
+  > textarea,
+  > btu-textarea-input > textarea {
+    @apply my-0 h-full [field-sizing:content] [min-block-size:calc(1lh_+_1rem_+_2px)];
+  }
+
+  &.is-noShim {
+    &::before,
+    > .AutoExpand-shim {
+      @apply hidden;
+    }
+  }
+}