@nuxtseo/design-system 0.0.0-stage → 0.1.0

package/app/components/container/UiWidgetState.vue

@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import type { UiIcon as UiIconName } from '../../shared/ui-icons'
+import type { ViewState } from '../../shared/view-state'
+import type { WidgetFailure } from '../../shared/widget-failure'
+import { computed, onMounted, ref } from 'vue'
+import { UiButton, UiEmptyState, UiIcon, UiSkeleton } from '#components'
+import { toWidgetFailure, WIDGET_FAILURE_COPY } from '../../shared/widget-failure'
+
+const {
+  state,
+  status = 'idle',
+  error,
+  empty,
+  skeletonLines = 5,
+  skeletonType = 'text',
+  emptyIcon = 'inbox',
+  emptyTitle = 'No data',
+  emptyMessage = 'There is no data to display',
+  showLoadingBeforeHydration = false,
+  retainContentOnError = false,
+} = defineProps<{
+  /**
+   * The read behind the region, built with `viewState` or `listViewState`.
+   * When set, it decides the branch and `status`, `error` and `empty` are
+   * ignored. Only an `empty` state shows the empty copy, so a failed read can
+   * never say "No data".
+   */
+  state?: ViewState<unknown>
+  /** The read's lifecycle. Ignored when `state` is set. */
+  status?: 'idle' | 'pending' | 'success' | 'error'
+  /**
+   * The caught value, for classification only. Typed `unknown` on purpose: the
+   * template can read no string off it, so a wire message has no route to the
+   * screen. Pass the raw query error — wrapping it in `new Error(humanCopy)`
+   * throws away the status code this needs and buys nothing.
+   */
+  error?: unknown
+  empty?: boolean
+  skeletonLines?: number
+  skeletonType?: 'text' | 'bar' | 'circle'
+  emptyIcon?: UiIconName
+  emptyTitle?: string
+  emptyMessage?: string
+  /**
+   * Render a deterministic loading slot during SSR and hydration. Use only for
+   * explicitly client-only reads whose payload cannot resolve before hydration.
+   */
+  showLoadingBeforeHydration?: boolean
+  /** The caller has usable content owned by the current query scope. */
+  retainContentOnError?: boolean
+}>()
+
+const emit = defineEmits<{
+  retry: []
+}>()
+
+defineSlots<{
+  /**
+   * `data` is the answer of a `state` in its `data` branch. It is `unknown`
+   * here; read the typed answer from the state you passed.
+   */
+  default?: (props: { data: unknown }) => unknown
+  loading?: () => unknown
+  empty?: () => unknown
+  error?: (props: { failure: WidgetFailure, retry: () => void }) => unknown
+}>()
+
+// Suppress loading skeletons until after hydration so server and client
+// render the same branch. Lazy fetches transfer data via the SSR payload,
+// making status jump from pending→success between render and hydrate.
+const hydrated = ref(false)
+onMounted(() => {
+  hydrated.value = true
+})
+// A `state` needs no hydration gate: a read with no answer yet is `loading`
+// on the server and on the client, so both render the same branch.
+const isLoading = computed(() => state
+  ? state._tag === 'loading'
+  : (showLoadingBeforeHydration || hydrated.value) && (status === 'pending' || status === 'idle'))
+// `status` alone decides the branch. It used to also require a truthy `error`,
+// which meant a caller that mapped its own failure to `status="error"` without
+// threading an error object fell past this branch AND past the empty branch,
+// into the default slot: a heading over an empty box. Half the call sites did
+// exactly that, so the error object is no longer a gate.
+const isError = computed(() => state ? state._tag === 'error' : status === 'error')
+const isEmpty = computed(() => state ? state._tag === 'empty' : status === 'success' && empty)
+const failure = computed(() => toWidgetFailure(state?._tag === 'error' ? state.error : error))
+const data = computed(() => state?._tag === 'data' ? state.data : undefined)
+// A refresh failed while an earlier answer is still on screen. The content
+// stays and a notice says the refresh failed.
+const refreshFailure = computed(() => state?._tag === 'data' && state.refreshError ? WIDGET_FAILURE_COPY[toWidgetFailure(state.refreshError)._tag] : null)
+const failureCopy = computed(() => WIDGET_FAILURE_COPY[failure.value._tag])
+</script>
+
+<template>
+  <div data-ui="UiWidgetState" :aria-busy="isLoading">
+    <slot v-if="isLoading" name="loading">
+      <span class="sr-only" role="status" aria-live="polite">Loading…</span>
+      <UiSkeleton v-if="skeletonType === 'text'" :lines="skeletonLines" />
+      <div v-else-if="skeletonType === 'bar'" class="flex items-end gap-1 h-40">
+        <UiSkeleton v-for="i in skeletonLines" :key="i" type="bar" :index="i" />
+      </div>
+      <UiSkeleton v-else type="circle" :base="skeletonLines" />
+    </slot>
+    <slot v-else-if="isError" name="error" :failure="failure" :retry="() => emit('retry')">
+      <div class="flex flex-col items-center justify-center py-8 px-4 text-center" role="alert">
+        <div class="size-10 rounded-xl bg-error/10 flex items-center justify-center mb-3">
+          <UiIcon name="caution" class="size-5 text-error" aria-hidden="true" />
+        </div>
+        <p class="text-sm font-medium text-default mb-1">
+          {{ failureCopy.title }}
+        </p>
+        <p class="text-xs text-muted mb-3 max-w-xs text-balance">
+          {{ failureCopy.body }}
+        </p>
+        <UiButton v-if="failureCopy.retryable" size="xs" purpose="secondary" icon="refresh" @click="emit('retry')">
+          Retry
+        </UiButton>
+      </div>
+    </slot>
+    <slot v-else-if="isEmpty" name="empty">
+      <UiEmptyState :icon="emptyIcon" :title="emptyTitle" :description="emptyMessage" compact />
+    </slot>
+    <template v-else>
+      <div
+        v-if="refreshFailure"
+        role="alert"
+        data-ui="UiWidgetState-refresh-error"
+        class="mb-3 flex items-start gap-2.5 rounded-lg border border-default px-3 py-2"
+      >
+        <UiIcon name="caution" class="mt-0.5 size-4 shrink-0 text-error" aria-hidden="true" />
+        <p class="min-w-0 flex-1 text-sm text-muted">
+          <span class="font-medium text-default">{{ refreshFailure.title }}.</span> {{ refreshFailure.body }}
+        </p>
+        <UiButton v-if="refreshFailure.retryable" purpose="secondary" size="xs" icon="refresh" @click="emit('retry')">
+          Retry
+        </UiButton>
+      </div>
+      <slot :data="data" />
+    </template>
+    <slot v-if="isError && retainContentOnError" :data="data" />
+  </div>
+</template>

package/app/components/container/ui-nav-drawer.ts

@@ -0,0 +1,48 @@
+import type { InjectionKey } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import { inject } from 'vue'
+
+/**
+ * Controls for UiAppShell's mobile nav drawer, provided by the shell to slot
+ * content rendered inside it. Absent a provider this no-ops, so a consumer
+ * stays renderable outside the shell (sandbox pages, tests).
+ */
+export interface UiNavDrawer {
+  /**
+   * Keep the drawer open across the navigation to `target`. Arms exactly one
+   * route change: landing on `target` keeps the drawer open, any other route
+   * change closes it as usual. For in-drawer pane switches (the sidebar mode
+   * tabs) — not for links, which navigate and close.
+   */
+  keepOpenFor: (target: RouteLocationRaw) => void
+}
+
+export const uiNavDrawerKey: InjectionKey<UiNavDrawer> = Symbol('ui-nav-drawer')
+
+const noop: UiNavDrawer = { keepOpenFor: () => {} }
+
+export function useNavDrawer(): UiNavDrawer {
+  return inject(uiNavDrawerKey, noop)
+}
+
+/**
+ * Pure core of the drawer's close-on-navigation rule. The shell consults the
+ * decider on EVERY route change (its watcher keys on fullPath) so the arm is
+ * consumed the first time the route moves, whatever moves it. The drawer then
+ * closes only when the route path changed and the change was not the exact
+ * navigation an in-drawer pane switch armed.
+ */
+export function navDrawerCloseDecider() {
+  let armedFullPath: string | null = null
+  return {
+    arm(fullPath: string) {
+      armedFullPath = fullPath
+    },
+    /** Returns whether the drawer should close for this route change. */
+    shouldCloseOnRouteChange(fullPath: string): boolean {
+      const keep = armedFullPath === fullPath
+      armedFullPath = null
+      return !keep
+    },
+  }
+}

package/app/components/data/ActionRail.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import type { RouteLocationRaw } from 'vue-router'
+import type { RelatedFixRow } from './UiRelatedFixes.vue'
+import { computed } from 'vue'
+import { RailPanel, UiButton, UiChip, UiIcon, UiRelatedFixes, UiSyncDot } from '#components'
+
+export interface ActionRailSuggestion {
+  id: string
+  action: string
+  label: string
+  sourceLabel?: string
+  icon?: string
+}
+
+const {
+  rows,
+  suggestions,
+  to,
+  loaded = false,
+  failed = false,
+  title = 'Do next',
+  contextLabel,
+  icon = 'sparkle',
+  moreCount = 0,
+  emptyLabel,
+  loadingLabel = 'Checking next actions...',
+  errorLabel = 'Could not load next actions.',
+  hideWhenEmpty = true,
+} = defineProps<{
+  rows: RelatedFixRow[]
+  suggestions: ActionRailSuggestion[]
+  to: RouteLocationRaw
+  loaded?: boolean
+  failed?: boolean
+  title?: string
+  contextLabel?: string
+  icon?: string
+  moreCount?: number
+  emptyLabel?: string
+  loadingLabel?: string
+  errorLabel?: string
+  hideWhenEmpty?: boolean
+}>()
+
+const emit = defineEmits<{
+  select: [row: RelatedFixRow]
+  retry: []
+}>()
+
+const status = computed(() => failed ? 'error' : loaded ? 'success' : 'pending')
+const empty = computed(() => !rows.length && !suggestions.length)
+const showViewAll = computed(() => rows.length > 0 || moreCount > 0)
+const visibleSuggestionCount = computed(() => Math.min(suggestions.length, 4))
+const visibleCount = computed(() => rows.length + visibleSuggestionCount.value)
+const totalCount = computed(() => rows.length + suggestions.length + moreCount)
+const countLabel = computed(() => {
+  if (!totalCount.value)
+    return null
+  return totalCount.value > visibleCount.value ? `${visibleCount.value}+` : visibleCount.value
+})
+const showGroupLabels = computed(() => rows.length > 0 && suggestions.length > 0)
+</script>
+
+<template>
+  <RailPanel
+    :title="title"
+    :count="countLabel"
+    :icon="icon"
+    :status="status"
+    :empty="empty"
+    :empty-label="emptyLabel"
+    :loading-label="loadingLabel"
+    :error-label="errorLabel"
+    :hide-when-empty="hideWhenEmpty"
+  >
+    <template #meta>
+      <UiChip
+        v-if="contextLabel"
+        purpose="tag"
+        size="xs"
+        icon="target"
+      >
+        {{ contextLabel }}
+      </UiChip>
+      <UiButton
+        v-if="showViewAll"
+        label="View all"
+        size="xs"
+        purpose="quiet"
+        trailing-icon="next"
+        :to="to"
+      />
+    </template>
+
+    <template #error>
+      <div class="px-4 py-6 text-sm text-muted">
+        <p>{{ errorLabel }}</p>
+        <UiButton label="Retry" icon="refresh" size="xs" purpose="quiet" class="mt-2" @click="emit('retry')" />
+      </div>
+    </template>
+
+    <div class="space-y-2 p-2">
+      <div v-if="rows.length" class="space-y-1">
+        <div v-if="showGroupLabels" class="flex items-center gap-2 px-1 pt-0.5">
+          <UiChip purpose="count" size="xs" tabular>
+            {{ rows.length }}
+          </UiChip>
+          <span class="text-mini font-medium uppercase text-muted">Queued work</span>
+        </div>
+
+        <UiRelatedFixes
+          :rows="rows"
+          :to="to"
+          loaded
+          :more-count="moreCount"
+          :show-header="false"
+          @select="emit('select', $event)"
+        />
+      </div>
+
+      <div v-if="suggestions.length" class="space-y-1">
+        <div v-if="showGroupLabels" class="flex items-center justify-between gap-2 px-1 pt-1">
+          <UiSyncDot status="syncing" label="Fresh signals" size="1.5" />
+          <UiChip purpose="count" size="xs" tabular>
+            {{ suggestions.length }}
+          </UiChip>
+        </div>
+
+        <ul class="divide-y divide-default overflow-hidden rounded-lg border border-default bg-default/60">
+          <li
+            v-for="suggestion in suggestions.slice(0, 4)"
+            :key="suggestion.id"
+            class="flex items-start gap-2.5 px-3 py-2.5"
+          >
+            <span class="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md border border-default bg-elevated text-dimmed">
+              <UiIcon :name="suggestion.icon ?? 'sparkle'" class="size-3.5" />
+            </span>
+            <span class="min-w-0 flex-1 space-y-1">
+              <span class="block text-sm text-default">
+                <span class="font-medium text-highlighted">{{ suggestion.action }}</span>
+                <span class="text-muted"> · {{ suggestion.label }}</span>
+              </span>
+              <UiChip purpose="tag" size="xs" icon="activity">
+                {{ suggestion.sourceLabel ?? 'Recent activity' }}
+              </UiChip>
+            </span>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </RailPanel>
+</template>

package/app/components/data/FacetStrip.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts" generic="T extends string = string">
+import type { UiTabItem, UiTabLink } from '../element/UiTabs.vue'
+import UiTabs from '../element/UiTabs.vue'
+
+/**
+ * A visible, counted set of related facets. `UiTabs` keeps ownership of each
+ * segmented run's selection, keyboard, focus, and horizontal overflow behavior;
+ * this primitive owns the repeated group-label layout and count presentation.
+ */
+export interface FacetStripItem<T extends string = string> extends UiTabItem<T> {
+  count: string | number
+  magnitude?: number
+}
+
+export interface FacetStripGroup<T extends string = string> {
+  label: string
+  items: FacetStripItem<T>[]
+}
+
+const { groups, ariaLabel = 'Facets', wrapOnMobile = false } = defineProps<{
+  groups: FacetStripGroup<T>[]
+  ariaLabel?: string
+  wrapOnMobile?: boolean
+}>()
+
+const model = defineModel<T>({ required: true })
+
+function itemCount(link: UiTabLink | UiTabItem<T>): string | number | undefined {
+  return 'value' in link ? (link as FacetStripItem<T>).count : undefined
+}
+
+function itemMagnitude(link: UiTabLink | UiTabItem<T>): number | undefined {
+  if (!('value' in link))
+    return undefined
+  const magnitude = (link as FacetStripItem<T>).magnitude
+  return typeof magnitude === 'number' && Number.isFinite(magnitude)
+    ? Math.min(100, Math.max(0, magnitude))
+    : undefined
+}
+
+function magnitudeStyle(link: UiTabLink | UiTabItem<T>): Record<string, string> | undefined {
+  const magnitude = itemMagnitude(link)
+  if (magnitude == null)
+    return undefined
+  return { '--facet-magnitude': `${magnitude}%` }
+}
+</script>
+
+<template>
+  <div
+    data-ui="FacetStrip"
+    role="group"
+    :aria-label="ariaLabel"
+    class="grid gap-2"
+  >
+    <div
+      v-for="group in groups"
+      :key="group.label"
+      class="grid min-w-0 gap-1 sm:grid-cols-[4.5rem_minmax(0,1fr)] sm:items-center sm:gap-2"
+    >
+      <span class="text-sm font-strong text-muted">{{ group.label }}</span>
+      <div class="min-w-0">
+        <UiTabs
+          v-model="model"
+          class="w-full!"
+          :class="wrapOnMobile ? 'max-sm:flex-wrap! max-sm:overflow-visible!' : ''"
+          kind="subnav"
+          :items="group.items"
+          :aria-label="`${group.label}, ${ariaLabel}`"
+        >
+          <template #trailing="{ link }">
+            <span class="relative isolate overflow-hidden rounded-sm px-1 numerals-display tabular-nums">
+              <span
+                v-if="(itemMagnitude(link) ?? 0) > 0"
+                class="facet-strip__magnitude absolute inset-y-0 left-0 -z-10 rounded-sm bg-accented"
+                :data-facet-magnitude="itemMagnitude(link)"
+                :style="magnitudeStyle(link)"
+                aria-hidden="true"
+              />
+              <span>{{ itemCount(link) }}</span>
+            </span>
+          </template>
+        </UiTabs>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.facet-strip__magnitude {
+  width: var(--facet-magnitude);
+}
+</style>

package/app/components/data/UiBarCell.vue

@@ -0,0 +1,37 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+/**
+ * Bar-filled metric cell: a relative container with an absolute-positioned bar
+ * fill behind slotted content.
+ *
+ * Keep `barClass` opacity at /10 or above — a /5 fill is invisible against the
+ * dashboard's near-black surface, and a bar you can't see isn't a bar.
+ */
+const { percent, barClass = 'bg-muted/40' } = defineProps<{
+  /** Bar fill width as 0-100 */
+  percent: number
+  /** Tailwind bg class for the bar fill (e.g. from barColorMap or cwvBarColorMap) */
+  barClass?: string
+}>()
+
+const clampedPercent = computed(() => Math.min(100, Math.max(0, Number.isFinite(percent) ? percent : 0)))
+</script>
+
+<template>
+  <div class="relative flex items-center gap-3 px-2 py-1">
+    <!-- The fill is presentation only. It stays static across filter changes so
+         magnitude does not appear to morph between unrelated populations. -->
+    <div
+      v-if="clampedPercent > 0"
+      class="absolute inset-y-0 left-0 w-full overflow-hidden rounded-md"
+    >
+      <div
+        data-bar-fill
+        class="h-full w-full origin-left"
+        :class="barClass"
+        :style="{ transform: `scaleX(${clampedPercent / 100})` }"
+      />
+    </div>
+    <slot />
+  </div>
+</template>