@brightspot/ui 3.0.1 → 5.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspot/ui",
-  "version": "3.0.1",
+  "version": "5.0.1",
   "type": "module",
   "license": "UNLICENSED",
   "description": "A UI library for building Brightspot CMS components.",
@@ -21,13 +21,14 @@
     "cem:watch": "cem analyze --litelement --watch",
     "cem:docs": "yarn cem && node scripts/generate-docs.mjs",
     "build": "yarn clean && tsc --noEmitOnError && yarn cem && node scripts/copy-component-css.mjs && shx cp ./src/*.ts ./dist && shx rm ./dist/tailwind.storybook.config* && shx rm -Rf ./dist/stories",
-    "prepack": "yarn build && yarn build-storybook",
+    "prepack": "yarn build && yarn build-storybook && (cd src/legacy/tool-ui && yarn build)",
     "storybook": "yarn cem && storybook dev -p 6006",
     "build-storybook": "yarn cem && storybook build -o ./dist/storybook",
     "test:storybook": "vitest --project=storybook",
     "check:conventions": "yarn cem && node scripts/check-conventions-all.mjs",
     "check:conventions:fast": "node scripts/check-conventions.mjs",
-    "prepare": "husky"
+    "prepare": "husky && (cd src/legacy/tool-ui && yarn install)",
+    "prepublishOnly": "yarn install --frozen-lockfile && (cd src/legacy/tool-ui && yarn install --frozen-lockfile)"
   },
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
@@ -90,7 +91,22 @@
   ],
   "files": [
     "dist/**/*",
-    "docs/**/*"
+    "docs/**/*",
+    "src/legacy/tool-ui/src/**/*",
+    "!src/legacy/tool-ui/src/main/webapp/WEB-INF",
+    "!src/legacy/tool-ui/src/main/resources",
+    "!src/legacy/tool-ui/src/main/webapp/v4/__mocks__",
+    "!src/legacy/tool-ui/src/main/webapp/v4/__tests__",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.js",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.ts",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.d.ts",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.md",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.jpeg",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.jpg",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.png",
+    "!src/legacy/tool-ui/src/main/webapp/v4/**/*.gif",
+    "!src/legacy/tool-ui/src/main/webapp/script/**/*.js",
+    "!src/legacy/tool-ui/src/main/webapp/script/**/*.d.ts"
   ],
   "lint-staged": {
     "src/components/**/*.ts": [

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

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

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