@pgcorp/ui-kit 0.9.0 → 0.10.0

package/src/components/shared/data-display/_internal/SCodeTokenLine.css

@@ -0,0 +1,72 @@
+@reference "../../../../styles/reference.css";
+
+.s-code-token-line {
+  display: block;
+  min-width: max-content;
+  color: var(--color-text);
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  line-height: var(--s-diff-row-block-size);
+  tab-size: 2;
+  white-space: pre;
+}
+
+.s-code-token-line[data-wrap='true'] {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  white-space: pre-wrap;
+}
+
+.s-code-token-line[data-variant='code-block'] {
+  font-size: 0.875rem;
+  line-height: 1.5;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: var(--s-code-token-comment);
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst,
+.hljs-built_in,
+.hljs-type {
+  color: var(--s-code-token-keyword);
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id,
+.hljs-selector-class {
+  color: var(--s-code-token-title);
+  font-weight: 600;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attribute {
+  color: var(--s-code-token-literal);
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-bullet,
+.hljs-addition {
+  color: var(--s-code-token-string);
+}
+
+.hljs-meta,
+.hljs-link,
+.hljs-name,
+.hljs-tag,
+.hljs-deletion {
+  color: var(--s-code-token-meta);
+}
+
+.hljs-emphasis { font-style: italic; }
+.hljs-strong { font-weight: 700; }

package/src/components/shared/data-display/_internal/SCodeTokenLine.vue

@@ -0,0 +1,79 @@
+<template>
+  <code
+    class="s-code-token-line"
+    :data-highlight-state="highlightState"
+    :data-wrap="validatedWrap"
+    :data-variant="validatedVariant"
+  ><TokenContent /></code>
+</template>
+
+<script setup lang="ts">
+import { Fragment, computed, h, onBeforeUnmount, ref, watch, type VNodeChild } from 'vue'
+
+import { validateBoolean } from '../../../../internal/runtimeContract'
+import type { SDiffLanguage } from '../diff'
+
+defineOptions({ inheritAttrs: false })
+
+interface Props {
+  text: string
+  language?: SDiffLanguage
+  wrap?: boolean
+  variant?: 'diff' | 'code-block'
+}
+
+type RenderToken = string | {
+  readonly className: string | null
+  readonly children: readonly RenderToken[]
+}
+
+const props = withDefaults(defineProps<Props>(), { language: undefined, wrap: false, variant: 'diff' })
+const tokens = ref<readonly RenderToken[]>([props.text])
+const highlightState = ref<'plain' | 'loading' | 'highlighted'>('plain')
+const validatedWrap = computed(() => validateBoolean('SCodeTokenLine', 'wrap', props.wrap))
+const validatedVariant = computed(() => {
+  if (props.variant === 'diff' || props.variant === 'code-block') return props.variant
+  throw new TypeError('SCodeTokenLine: variant must be diff or code-block.')
+})
+let generation = 0
+
+function renderToken(token: RenderToken, index: number): VNodeChild {
+  if (typeof token === 'string') return token
+  return h('span', { key: index, class: token.className }, token.children.map(renderToken))
+}
+
+const TokenContent = () => h(Fragment, tokens.value.map(renderToken))
+
+watch(
+  () => [props.text, props.language] as const,
+  async ([text, language]) => {
+    const currentGeneration = generation += 1
+    if (language === undefined) {
+      tokens.value = [text]
+      highlightState.value = 'plain'
+      return
+    }
+    highlightState.value = 'loading'
+    const highlighter = await import('../../../../internal/codeHighlight')
+    const toRenderToken = (token: Awaited<ReturnType<typeof highlighter.highlightCodeToTokens>>[number]): RenderToken => (
+      typeof token === 'string'
+        ? token
+        : Object.freeze({
+            className: token.scope === null ? null : highlighter.highlightScopeClass(token.scope),
+            children: Object.freeze(token.children.map(toRenderToken)),
+          })
+    )
+    const nextTokens = highlighter.highlightCodeToTokens(text, language).map(toRenderToken)
+    if (currentGeneration !== generation) return
+    tokens.value = Object.freeze(nextTokens)
+    highlightState.value = 'highlighted'
+  },
+  { immediate: true },
+)
+
+onBeforeUnmount(() => {
+  generation += 1
+})
+</script>
+
+<style lang="postcss" src="./SCodeTokenLine.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichBlockNode.css

@@ -0,0 +1,85 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-document__paragraph {
+  min-width: 0;
+  margin: 0;
+}
+
+.s-rich-document__heading {
+  @apply font-semibold text-surface-950 dark:text-surface-50;
+  min-width: 0;
+  margin: 0;
+  line-height: 1.25;
+}
+
+h1.s-rich-document__heading { @apply text-3xl; }
+h2.s-rich-document__heading { @apply text-2xl; }
+h3.s-rich-document__heading { @apply text-xl; }
+h4.s-rich-document__heading { @apply text-lg; }
+h5.s-rich-document__heading,
+h6.s-rich-document__heading { @apply text-base; }
+
+.s-rich-document__list {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  margin: 0;
+  padding-inline-start: 1.5rem;
+}
+
+ul.s-rich-document__list { list-style: disc; }
+ol.s-rich-document__list { list-style: decimal; }
+
+.s-rich-document__quote {
+  @apply border-l-4 border-primary-300 text-surface-600 dark:border-primary-700 dark:text-surface-300;
+  display: grid;
+  gap: var(--s-space-content-gap);
+  margin: 0;
+  padding-inline-start: var(--s-space-section-gap);
+}
+
+.s-rich-document__divider {
+  @apply border-0 border-t border-surface-200 dark:border-surface-700;
+  width: 100%;
+  margin: 0;
+}
+
+.s-rich-document__figure {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  min-width: 0;
+  margin: 0;
+}
+
+.s-rich-document__image {
+  @apply rounded-lg border border-surface-200 bg-surface-50 dark:border-surface-700 dark:bg-surface-900;
+  display: block;
+  width: auto;
+  max-width: 100%;
+  height: auto;
+  margin-inline: auto;
+}
+
+.s-rich-document__caption,
+.s-rich-document__resource-description {
+  @apply text-sm text-surface-500 dark:text-surface-400;
+}
+
+.s-rich-document__caption {
+  text-align: center;
+}
+
+.s-rich-document__resource {
+  @apply flex min-w-0 flex-wrap items-center;
+  gap: var(--s-space-content-gap);
+}
+
+.s-rich-document__callout-content {
+  display: grid;
+  gap: var(--s-space-content-gap);
+  min-width: 0;
+}
+
+.s-rich-document__actions {
+  @apply flex min-w-0 flex-wrap items-center;
+  gap: var(--s-space-content-gap);
+}

package/src/components/shared/data-display/_internal/SRichBlockNode.vue

@@ -0,0 +1,282 @@
+<template>
+  <p v-if="node.type === 'paragraph'" class="s-rich-document__paragraph">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </p>
+  <component :is="`h${node.level}`" v-else-if="node.type === 'heading'" class="s-rich-document__heading">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </component>
+  <component
+    :is="node.ordered ? 'ol' : 'ul'"
+    v-else-if="node.type === 'list'"
+    class="s-rich-document__list"
+    :start="node.ordered ? node.start : undefined"
+  >
+    <li v-for="(item, itemIndex) in node.children" :key="itemIndex">
+      <SRichBlockNode
+        v-for="(child, childIndex) in item.children"
+        :key="childIndex"
+        :node="child"
+        :resources="resources"
+        :document-id="documentId"
+        :path="`${path}.children[${itemIndex}].children[${childIndex}]`"
+        @link-activate="emit('link-activate', $event)"
+        @resource-activate="emit('resource-activate', $event)"
+        @action="emit('action', $event)"
+      />
+    </li>
+  </component>
+  <blockquote v-else-if="node.type === 'quote'" class="s-rich-document__quote">
+    <SRichBlockNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :resources="resources"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+      @resource-activate="emit('resource-activate', $event)"
+      @action="emit('action', $event)"
+    />
+  </blockquote>
+  <hr v-else-if="node.type === 'divider'" class="s-rich-document__divider" />
+  <figure v-else-if="node.type === 'image'" class="s-rich-document__figure">
+    <img
+      class="s-rich-document__image"
+      :src="imageResource(node.resourceId).url"
+      :alt="imageResource(node.resourceId).alt"
+      :title="imageResource(node.resourceId).title"
+      loading="lazy"
+      decoding="async"
+    />
+    <figcaption v-if="node.caption" class="s-rich-document__caption">
+      <SRichInlineNode
+        v-for="(child, index) in node.caption"
+        :key="index"
+        :node="child"
+        :document-id="documentId"
+        :path="`${path}.caption[${index}]`"
+        @link-activate="emit('link-activate', $event)"
+      />
+    </figcaption>
+  </figure>
+  <div v-else-if="node.type === 'resource'" class="s-rich-document__resource">
+    <SButton
+      :label="node.label"
+      severity="secondary"
+      appearance="soft"
+      size="sm"
+      @click="activateResource(node.resourceId)"
+    />
+    <span v-if="node.description" class="s-rich-document__resource-description">{{ node.description }}</span>
+  </div>
+  <AsyncSCodeBlock
+    v-else-if="node.type === 'codeBlock'"
+    :code="node.code"
+    :language="{ mode: 'explicit', id: node.language ?? 'text' }"
+    presentation="highlighted"
+    :show-header="node.language !== undefined || node.label !== undefined"
+    :show-line-numbers="node.showLineNumbers ?? true"
+    read-only
+    viewport="document"
+    :aria-label="node.label ?? t('editor.codeBlock')"
+  />
+  <AsyncSRichMath
+    v-else-if="node.type === 'mathBlock'"
+    :source="node.source"
+    :label="node.label"
+    display="block"
+  />
+  <STable
+    v-else-if="node.type === 'table'"
+    :columns="tableColumns"
+    :data="node.rows"
+    :get-row-key="rowKey"
+    :aria-label="node.label"
+    surface="plain"
+    density="compact"
+    min-width="content"
+  >
+    <template #cell="{ row, column }">
+      <SRichInlineNode
+        v-for="(child, index) in tableCell(row, column.field).children"
+        :key="index"
+        :node="child"
+        :document-id="documentId"
+        :path="`${path}.rows[${tableRowIndex(row)}].cells[${tableColumnIndex(column.field)}].children[${index}]`"
+        @link-activate="emit('link-activate', $event)"
+      />
+    </template>
+  </STable>
+  <SPanel
+    v-else-if="node.type === 'callout' && node.tone === 'neutral'"
+    :title="node.title"
+    :heading-level="3"
+    surface-tone="subtle"
+    content-layout="stack"
+    content-gap="content"
+  >
+    <SRichBlockNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :resources="resources"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+      @resource-activate="emit('resource-activate', $event)"
+      @action="emit('action', $event)"
+    />
+  </SPanel>
+  <SMessage
+    v-else-if="node.type === 'callout'"
+    :severity="calloutSeverity(node.tone)"
+    :title="node.title"
+    live="off"
+  >
+    <div class="s-rich-document__callout-content">
+      <SRichBlockNode
+        v-for="(child, index) in node.children"
+        :key="index"
+        :node="child"
+        :resources="resources"
+        :document-id="documentId"
+        :path="`${path}.children[${index}]`"
+        @link-activate="emit('link-activate', $event)"
+        @resource-activate="emit('resource-activate', $event)"
+        @action="emit('action', $event)"
+      />
+    </div>
+  </SMessage>
+  <div v-else-if="node.type === 'actionGroup'" class="s-rich-document__actions" role="group" :aria-label="node.label">
+    <SButton
+      v-for="action in node.actions"
+      :key="action.id"
+      :label="action.label"
+      :severity="actionSeverity(action.appearance)"
+      :appearance="action.appearance === 'primary' ? 'solid' : 'soft'"
+      :disabled="action.disabled"
+      size="sm"
+      @click="activateAction(action.id)"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineAsyncComponent } from 'vue'
+
+import { useUiKitLocale } from '../../../../composables/useUiKitLocale'
+import SPanel from '../../containers/SPanel.vue'
+import SButton, { type SButtonSeverity } from '../../controls/SButton.vue'
+import SMessage, { type Severity as SMessageSeverity } from '../SMessage.vue'
+import STable from '../STable.vue'
+import type { STableColumn } from '../table'
+import type {
+  SRichActionAppearance,
+  SRichBlockNode,
+  SRichCalloutTone,
+  SRichDocumentActionIntent,
+  SRichDocumentImageResource,
+  SRichDocumentLinkActivate,
+  SRichDocumentResource,
+  SRichDocumentResourceActivate,
+  SRichTableCell,
+  SRichTableRow,
+} from '../richDocument'
+import SRichInlineNode from './SRichInlineNode.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  node: SRichBlockNode
+  resources: readonly SRichDocumentResource[]
+  documentId: string
+  path: string
+}>()
+
+const emit = defineEmits<{
+  'link-activate': [payload: SRichDocumentLinkActivate]
+  'resource-activate': [payload: SRichDocumentResourceActivate]
+  action: [payload: SRichDocumentActionIntent]
+}>()
+
+const { t } = useUiKitLocale()
+const AsyncSCodeBlock = defineAsyncComponent(() => import('../SCodeBlock.vue'))
+const AsyncSRichMath = defineAsyncComponent(() => import('./SRichMath.vue'))
+const tableColumns = computed<readonly STableColumn<SRichTableRow, string>[]>(() => {
+  if (props.node.type !== 'table') return []
+  return Object.freeze(props.node.columns.map((column, index) => Object.freeze({
+    field: column.id,
+    header: column.header,
+    headerPresentation: column.headerPresentation,
+    align: column.align,
+    content: 'value' as const,
+    value: (row: SRichTableRow) => row.cells[index],
+  })))
+})
+
+function rowKey(row: SRichTableRow): string {
+  return row.id
+}
+
+function tableColumnIndex(field: string): number {
+  if (props.node.type !== 'table') throw new Error('SRichBlockNode: table column outside table node.')
+  const index = props.node.columns.findIndex((column) => column.id === field)
+  if (index < 0) throw new Error(`SRichBlockNode: unknown table column ${JSON.stringify(field)}.`)
+  return index
+}
+
+function tableRowIndex(row: SRichTableRow): number {
+  if (props.node.type !== 'table') throw new Error('SRichBlockNode: table row outside table node.')
+  const index = props.node.rows.findIndex((candidate) => candidate.id === row.id)
+  if (index < 0) throw new Error(`SRichBlockNode: unknown table row ${JSON.stringify(row.id)}.`)
+  return index
+}
+
+function tableCell(row: SRichTableRow, field: string): SRichTableCell {
+  const cell = row.cells[tableColumnIndex(field)]
+  if (!cell) throw new Error(`SRichBlockNode: missing table cell for ${JSON.stringify(field)}.`)
+  return cell
+}
+
+function imageResource(id: string): SRichDocumentImageResource {
+  const resource = props.resources.find((candidate) => candidate.id === id)
+  if (resource?.kind !== 'image') throw new Error(`SRichBlockNode: image resource ${JSON.stringify(id)} is unavailable.`)
+  return resource
+}
+
+function activateResource(resourceId: string): void {
+  emit('resource-activate', Object.freeze({ documentId: props.documentId, path: props.path, resourceId }))
+}
+
+function activateAction(actionId: string): void {
+  emit('action', Object.freeze({ documentId: props.documentId, path: props.path, actionId }))
+}
+
+function calloutSeverity(tone: SRichCalloutTone): SMessageSeverity {
+  if (tone === 'information' || tone === 'neutral') return 'info'
+  if (tone === 'warning') return 'warn'
+  return tone
+}
+
+function actionSeverity(appearance: SRichActionAppearance | undefined): SButtonSeverity {
+  if (appearance === 'danger') return 'danger'
+  if (appearance === 'secondary') return 'secondary'
+  return 'primary'
+}
+</script>
+
+<style lang="postcss" src="./SRichBlockNode.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichInlineNode.css

@@ -0,0 +1,6 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-document__inline-code {
+  @apply rounded bg-surface-100 px-1 py-0.5 font-mono text-sm text-surface-800;
+  @apply dark:bg-surface-800 dark:text-surface-100;
+}

package/src/components/shared/data-display/_internal/SRichInlineNode.vue

@@ -0,0 +1,76 @@
+<template>
+  <template v-if="node.type === 'text'">{{ node.value }}</template>
+  <strong v-else-if="node.type === 'strong'">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </strong>
+  <em v-else-if="node.type === 'emphasis'">
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </em>
+  <code v-else-if="node.type === 'inlineCode'" class="s-rich-document__inline-code">{{ node.code }}</code>
+  <SLink
+    v-else-if="node.type === 'link'"
+    :href="node.href"
+    :title="node.title"
+    :active="node.current"
+    variant="document"
+    wrap="anywhere"
+    @click.prevent="activateLink"
+  >
+    <SRichInlineNode
+      v-for="(child, index) in node.children"
+      :key="index"
+      :node="child"
+      :document-id="documentId"
+      :path="`${path}.children[${index}]`"
+      @link-activate="emit('link-activate', $event)"
+    />
+  </SLink>
+  <AsyncSRichMath v-else-if="node.type === 'mathInline'" :source="node.source" display="inline" />
+</template>
+
+<script setup lang="ts">
+import { defineAsyncComponent } from 'vue'
+
+import SLink from '../../controls/SLink.vue'
+import type { SRichDocumentLinkActivate, SRichInlineNode } from '../richDocument'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<{
+  node: SRichInlineNode
+  documentId: string
+  path: string
+}>()
+
+const emit = defineEmits<{
+  'link-activate': [payload: SRichDocumentLinkActivate]
+}>()
+
+const AsyncSRichMath = defineAsyncComponent(() => import('./SRichMath.vue'))
+
+function activateLink(): void {
+  if (props.node.type !== 'link') return
+  emit('link-activate', Object.freeze({
+    documentId: props.documentId,
+    path: props.path,
+    href: props.node.href,
+    ...(props.node.title === undefined ? {} : { title: props.node.title }),
+  }))
+}
+</script>
+
+<style lang="postcss" src="./SRichInlineNode.css" scoped></style>

package/src/components/shared/data-display/_internal/SRichMath.css

@@ -0,0 +1,42 @@
+@reference "../../../../styles/reference.css";
+
+.s-rich-math {
+  min-width: 0;
+}
+
+.s-rich-math[data-display='block'] {
+  max-width: 100%;
+  overflow-x: auto;
+  padding-block: var(--s-space-content-gap);
+  text-align: center;
+}
+
+.s-rich-math__surface:empty {
+  display: none;
+}
+
+.s-rich-math__fallback,
+.s-rich-math__error code {
+  @apply rounded bg-surface-100 px-1 py-0.5 font-mono text-sm text-surface-700;
+  @apply dark:bg-surface-800 dark:text-surface-200;
+}
+
+.s-rich-math__error {
+  @apply inline-flex min-w-0 flex-wrap items-baseline gap-2 text-danger-700 dark:text-danger-300;
+}
+
+.s-rich-math__assistive {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.s-rich-math .katex-display {
+  margin: 0;
+}