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

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;
-}

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

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

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

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

@@ -1,31 +0,0 @@
-.avatar {
-  @apply ring-primary-100 grid size-[--avatar-size] place-content-center items-center rounded-full bg-[var(--avatar-bg-color)] text-center font-medium uppercase text-white [--avatar-bg-color:oklch(var(--btu-theme-purple-600))] hover:bg-[oklch(from_var(--avatar-bg-color)_calc(l_*_0.8)_c_h)] @avatar-xs/avatar:text-xs @avatar-xs:font-bold @avatar-sm/avatar:text-sm @avatar-md/avatar:text-md @avatar-lg/avatar:text-md @avatar-xl/avatar:text-lg @avatar-xxl/avatar:text-xl;
-
-  img {
-    @apply aspect-square size-full rounded-full object-cover;
-  }
-
-  /* Stack all the children. If an avatar isn't provided the user's initials will show through. */
-  > *,
-  &::before {
-    grid-area: 1 / 1;
-  }
-}
-
-.ToolUserAvatar-container {
-  /*
-    Avatar size:
-    Defined in the tailwind.config.
-    To change the size in some other context you can do it like:
-    --avatar-size: theme('avatar.size.xs')
-  */
-  @apply relative size-[--avatar-size] flex-nowrap @container/avatar [--avatar-size:theme('avatar.size.sm')] md:[--avatar-size:theme('avatar.size.md')];
-}
-
-.ToolUserAvatar-name {
-  @apply hidden truncate;
-}
-
-.ToolUserAvatar {
-  @apply avatar shrink-0;
-}

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

@@ -1,29 +0,0 @@
-.BackgroundTasks {
-  @apply relative mx-4 my-6 overflow-clip rounded-lg border border-gray-300 bg-gray-50 shadow-lg;
-
-  .TaskDisplay {
-    @apply flex justify-between px-6 py-3 ![grid-column:fullbleed-start/fullbleed-end];
-  }
-
-  .TaskDisplay h2 {
-    @apply btu-heading-5 content-center;
-  }
-
-  .TaskDisplay form {
-    @apply flex gap-2;
-  }
-
-  .TaskDisplay button {
-    @apply btu-button btu-button-outline btu-button-gray btu-button-sm bg-white before:btu-icon;
-
-    &:where([value='PauseAll']) {
-      @apply before:btu-icon-circle-pause;
-    }
-    &:where([value='ResumeAll']) {
-      @apply before:btu-icon-circle-play;
-    }
-    &:where([value='StopAll']) {
-      @apply before:btu-icon-circle-stop;
-    }
-  }
-}

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

@@ -1,80 +0,0 @@
-@font-face {
-  font-family: 'Noto Sans';
-  font-style: normal;
-  font-weight: 400 600;
-  font-stretch: 100%;
-  font-display: swap;
-  src: url(https://fonts.gstatic.com/s/notosans/v38/o-0bIpQlx3QUlC5A4PNB6Ryti20_6n1iPHjc5a7du3mhPy0.woff2)
-    format('woff2');
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
-    U+2212, U+2215, U+FEFF, U+FFFD;
-}
-
-html {
-  @apply h-full scroll-smooth leading-4 antialiased [view-transition-name:none];
-}
-
-html[data-preview-overlay='true'] {
-  @apply fixed size-full overflow-hidden bg-transparent bg-none;
-}
-
-.screen-reader-only {
-  @apply !sr-only;
-}
-
-/* Adds a glow effect to the focused region target */
-.is-focusRegionTarget {
-  @apply !ring-offset-1 outline-none !ring-4 !ring-primary-300 !ring-offset-primary-700 transition-[box-shadow] duration-500;
-}
-
-/* Smoothly transitions out of the glow effect above */
-.was-focusRegionTarget {
-  @apply transition-[box-shadow] duration-500 ease-out;
-}
-
-[hidden],
-.hide {
-  @apply !hidden;
-}
-
-@supports (interpolate-size: allow-keywords) {
-  :root {
-    interpolate-size: allow-keywords;
-  }
-}
-
-/* Hide native selects to reduce the amount of repainting and visual changes while custom ComboInput is rendered. */
-select {
-  @apply min-h-[38px] w-auto min-w-[25cqw] appearance-none opacity-0;
-}
-
-/* Hide frames which are in a loaded state but empty... weird... this should probably be part of frame styles proper. */
-.frame.loaded:empty {
-  @apply !hidden;
-}
-
-/* Hides Theme until we decide what to do with it. */
-.themeColorContainer {
-  @apply !hidden;
-}
-
-/*
-  For a11y, we need to ensure that the font size is not too small on smaller screens
-  otherwise some browsers will auto-zoom when the input is focused.
-*/
-input,
-select,
-textarea,
-.ComboInput-label,
-.ComboInput-option {
-  @apply max-md:!text-[1rem]; /* assumes 16px base font size */
-}
-
-form {
-  &.is-submitting {
-    button.is-clicked {
-      @apply btu-button-disabled before:btu-loader before:block before:size-[1.2rem];
-    }
-  }
-}

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

@@ -1,160 +0,0 @@
-.SearchResult:has(.is-muuri) {
-  --column-gap-x: 8px; /* the horizontal space between each board column */
-
-  @apply grid-rows-[var(--search-controls-h)_minmax(0px,1fr)] after:content-none;
-}
-
-.SearchResult-board {
-  @apply relative h-full select-none opacity-100 transition-opacity duration-[2400ms];
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-.SearchResult-board-column {
-  --BoardColumn-minWidth: 270px;
-  --BoardColumn-maxWidth: 400px;
-  --BoardColumn-calcWidth: clamp(
-    var(--BoardColumn-minWidth),
-    calc(100% / var(--columnCount)),
-    var(--BoardColumn-maxWidth)
-  );
-
-  @apply absolute left-0 top-0 z-[1] flex min-h-full w-[--BoardColumn-calcWidth];
-}
-
-.SearchResult-board-columnContent {
-  @apply flex w-full flex-col gap-2;
-}
-
-/* Overrides standard search styles, establishes grid layout */
-.SearchResult-items.is-muuri .SearchResult-boardContainer {
-  @apply relative left-[calc(1rem_-_var(--column-gap-x))] h-full w-[calc(100%_-_var(--column-gap-x))] overflow-x-auto overscroll-x-contain [grid-area:results];
-
-  .moreCards-button,
-  .moreColumns-button {
-    @apply hidden;
-  }
-
-  > .Message {
-    @apply me-4 ms-1.5;
-  }
-}
-
-h2.BoardView-title {
-  @apply relative me-2.5 ms-1.5 flex h-12 items-center rounded-lg bg-gray-100 px-4 text-sm font-semibold capitalize text-gray-900 after:ms-[0.5ch] after:[content:'('_attr(data-count)_')'];
-}
-
-.BoardView-listContainer {
-  @apply relative grow overflow-y-auto;
-}
-
-.BoardView-list {
-  @apply absolute min-h-full w-[calc(100%_-_(2_*_var(--column-gap-x)))];
-}
-
-.BoardView-card {
-  @apply absolute z-10 mx-1.5 mb-2 min-w-full list-none rounded-lg bg-white shadow-sm hover:cursor-grab hover:bg-gray-100;
-}
-
-/* When releasing a dragged card, this style helps smooth out the transition-in
-  of the the newly added card to the DOM, before the Muuri grid positions it. */
-.BoardView-card.muuri-item {
-  @apply opacity-100 transition-opacity duration-500;
-  @starting-style {
-    opacity: 0;
-  }
-}
-
-.BoardView-card .ContentSummary-row:has(~ .ContentSummary-row) {
-  @apply mb-2;
-}
-
-/* If the row has viewers displayed, add a margin */
-.BoardView-card [data-rtc-edit-field-update-viewers]:not(:empty) {
-  @apply mt-2;
-}
-
-.BoardView-card .ContentSummary-row {
-  @apply mb-0 flex-wrap;
-
-  .ContentSummary-subtitle {
-    @apply min-w-full max-w-full basis-full text-xs font-medium text-gray-500;
-  }
-
-  .ContentSummary-link {
-    @apply flex-1 text-sm font-medium text-gray-900;
-  }
-
-  .ContentSummary-link > a {
-    @apply hyphens-auto text-inherit no-underline hover:text-gray-900 hover:underline;
-  }
-
-  .ContentSummary-description {
-    @apply text-xs font-medium text-gray-900;
-  }
-}
-
-/* These seem like empty placeholders? Hiding for now. */
-.BoardView-card .SearchResult-summary {
-  @apply hidden;
-}
-
-.BoardView-card .ContentSummary-content {
-  @apply overflow-clip p-4;
-}
-
-.BoardView-card.is-saving {
-  @apply pointer-events-none grid place-items-center before:btu-loader before:absolute before:size-[--loader-size];
-}
-
-.BoardView-card.is-saving .ContentSummary-content {
-  @apply !opacity-50;
-}
-
-/* The dragging styles. */
-.SearchResult-dragContainer {
-  @apply fixed left-0 top-0 z-[var(--BoardContainer-zIndex,_10000)];
-}
-
-.BoardView-card.muuri-item-dragging {
-  @apply z-[12] cursor-grabbing border border-primary-500 shadow-xl;
-}
-
-.BoardView-card.muuri-item-releasing {
-  @apply z-[11];
-}
-
-.BoardView-card.muuri-item-hidden {
-  @apply z-[8];
-}
-
-.BoardView-card.muuri-item-placeholder {
-  @apply z-[9] m-0 border border-dashed border-primary-500 bg-primary-25;
-}
-
-.BoardView-card.muuri-item-placeholder > * {
-  @apply hidden;
-}
-
-.SearchResult-board-fields {
-  @apply ms-1 flex gap-2 self-center;
-}
-
-.SearchResult-board-fields .SearchResult-sorts {
-  @apply m-0;
-}
-
-.SearchResult-board-fields .SearchResult-fields {
-  @apply order-last mx-0;
-}
-
-/* TODO: Once Message CSS is complete, revisit this style. Hopefully we can remove it;  */
-.SearchResult-board-errors {
-  @apply fixed bottom-0 right-0 z-[100] max-h-[50%] max-w-[--BoardColumn-minWidth] overflow-auto;
-}
-
-/* TODO: Once Message CSS is complete, revisit this style. Hopefully we can remove it;  */
-.SearchResult-board-errors-close {
-  @apply btu-button btu-button-text-hidden btu-button-fill-none btu-button-gray btu-button-xs absolute right-2 top-2 z-[100] bg-transparent before:btu-icon before:btu-icon-x touch-device:btu-button-sm;
-}