@pgcorp/ui-kit 0.1.0

package/src/components/shared/data-display/SDocBlock.vue

@@ -0,0 +1,358 @@
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    ref="rootRef"
+    class="s-doc-block"
+    :class="{
+      's-doc-block--radius-none': contract.surfaceRadius === 'none',
+    }"
+  >
+    <div v-if="contract.showHeader && (filename || renderMode)" class="s-doc-block-header">
+      <div class="s-doc-block-info">
+        <span v-if="filename" class="s-doc-block-filename">{{ filename }}</span>
+        <span v-if="renderMode" class="s-doc-block-language">{{ headerLabel }}</span>
+      </div>
+      <div class="s-doc-block-actions" v-if="contract.showActions">
+        <SButton appearance="text" severity="secondary" size="xs" icon-only :leading-icon="Copy" @click="copyContent" title="Копировать" aria-label="Копировать" />
+      </div>
+    </div>
+
+    <SAsyncState
+      v-if="contract.errorMessage !== undefined"
+      :state="{ status: 'error', message: contract.errorMessage }"
+      presentation="block"
+    />
+
+    <div
+      v-else-if="renderMode === 'markdown' || renderMode === 'html'"
+      class="s-doc-block__content prose dark:prose-invert max-w-none"
+    >
+      <SDocumentContent
+        :html="sanitizedDocumentHtml"
+        @link-click="handleDocumentLinkClick"
+      />
+    </div>
+
+    <pre v-else-if="renderMode === 'plaintext'" class="fallback-pre">{{ contract.content }}</pre>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, defineComponent, h, ref, type Component, type PropType, type VNodeChild } from 'vue';
+import { useOwnedAttrs } from '../../../internal/ownedAttrs';
+import { useInteractiveLeafRegistration } from '../../../internal/passiveContentContract';
+import { validateBoolean, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract';
+import SButton from '../controls/SButton.vue';
+import SLink from '../controls/SLink.vue';
+import SAsyncState from '../feedback/SAsyncState.vue';
+import { Copy } from '../../icons/sputnigUiIcons';
+import { useNotifier } from '../../../composables/useNotifier';
+import { useClipboard } from '../../../composables/useClipboard';
+
+// Markdown rendering with highlight.js similar to MessageBubble
+import { marked } from 'marked';
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import dockerfile from 'highlight.js/lib/languages/dockerfile';
+import javascript from 'highlight.js/lib/languages/javascript';
+import makefile from 'highlight.js/lib/languages/makefile';
+import nginx from 'highlight.js/lib/languages/nginx';
+import powershell from 'highlight.js/lib/languages/powershell';
+import python from 'highlight.js/lib/languages/python';
+import typescript from 'highlight.js/lib/languages/typescript';
+import xml from 'highlight.js/lib/languages/xml';
+import yaml from 'highlight.js/lib/languages/yaml';
+import { resolveHighlightLanguageKey } from '../codeLanguages';
+import {
+  SANITIZED_DOCUMENT_RENDER_ATTRIBUTES,
+  SANITIZED_DOCUMENT_TAGS,
+  sanitizeDocumentHtml,
+} from '../markdown';
+
+defineOptions({ inheritAttrs: false });
+
+hljs.registerLanguage('bash', bash);
+hljs.registerLanguage('dockerfile', dockerfile);
+hljs.registerLanguage('javascript', javascript);
+hljs.registerLanguage('makefile', makefile);
+hljs.registerLanguage('nginx', nginx);
+hljs.registerLanguage('powershell', powershell);
+hljs.registerLanguage('python', python);
+hljs.registerLanguage('typescript', typescript);
+hljs.registerLanguage('xml', xml);
+hljs.registerLanguage('yaml', yaml);
+
+const ownedAttrs = useOwnedAttrs({ component: 'SDocBlock', owner: 'document block root' });
+
+useInteractiveLeafRegistration({ owner: 'SDocBlock' });
+
+function escapeHighlightedCode(code: string): string {
+  return code
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+function escapeHtmlAttribute(value: string): string {
+  return value
+    .replaceAll('&', '&amp;')
+    .replaceAll('<', '&lt;')
+    .replaceAll('>', '&gt;')
+    .replaceAll('"', '&quot;')
+    .replaceAll("'", '&#39;');
+}
+
+const markdownRenderer = new marked.Renderer();
+markdownRenderer.code = ({ text, lang }) => {
+  const rawLanguage = (lang || '').match(/\S+/)?.[0] ?? '';
+  const normalizedLanguage = rawLanguage
+    ? resolveHighlightLanguageKey({ mode: 'explicit', id: rawLanguage })
+    : null;
+  const languageClass = rawLanguage ? `language-${escapeHtmlAttribute(rawLanguage.toLowerCase())}` : '';
+  const isSupportedLanguage = normalizedLanguage !== null && Boolean(hljs.getLanguage(normalizedLanguage));
+
+  const highlightedCode = isSupportedLanguage
+    ? hljs.highlight(text, { language: normalizedLanguage, ignoreIllegals: true }).value
+    : escapeHighlightedCode(text);
+  const classNames = [languageClass, isSupportedLanguage ? 'hljs' : ''].filter(Boolean).join(' ');
+  const classAttribute = classNames ? ` class="${classNames}"` : '';
+
+  return `<pre><code${classAttribute}>${highlightedCode}</code></pre>\n`;
+};
+
+interface Props {
+  content: string;
+  mode: 'markdown' | 'html' | 'plaintext';
+  linkPolicy?: 'open' | 'emit';
+  filename?: string;
+  showHeader?: boolean;
+  showActions?: boolean;
+  surfaceRadius?: 'default' | 'none';
+  errorMessage?: string;
+}
+const props = withDefaults(defineProps<Props>(), {
+  linkPolicy: 'open',
+  filename: undefined,
+  showHeader: true,
+  showActions: true,
+  surfaceRadius: 'default',
+  errorMessage: undefined,
+});
+const emit = defineEmits<{
+  'link-click': [{
+    href: string;
+    text: string;
+    title: string | null;
+    isExternal: boolean;
+  }];
+}>();
+
+const notifier = useNotifier();
+const { copyText } = useClipboard();
+const rootRef = ref<HTMLElement | null>(null);
+
+const contract = computed(() => {
+  if (typeof props.content !== 'string') {
+    throw new TypeError(
+      'SDocBlock: content должен быть строкой. / SDocBlock: content must be a string',
+    );
+  }
+  return {
+    content: props.content,
+    mode: validateExactString(
+      'SDocBlock', 'mode', props.mode, ['markdown', 'html', 'plaintext'] as const,
+    ),
+    linkPolicy: validateExactString(
+      'SDocBlock', 'linkPolicy', props.linkPolicy, ['open', 'emit'] as const,
+    ),
+    showHeader: validateBoolean('SDocBlock', 'showHeader', props.showHeader),
+    showActions: validateBoolean('SDocBlock', 'showActions', props.showActions),
+    surfaceRadius: validateExactString(
+      'SDocBlock', 'surfaceRadius', props.surfaceRadius, ['default', 'none'] as const,
+    ),
+    errorMessage: props.errorMessage === undefined
+      ? undefined
+      : validateNonEmptyString('SDocBlock', 'errorMessage', props.errorMessage),
+  };
+});
+
+const renderMode = computed<'markdown' | 'html' | 'plaintext'>(() => {
+  return contract.value.mode;
+});
+
+const headerLabel = computed(() => {
+  switch (renderMode.value) {
+    case 'markdown': return 'Markdown';
+    case 'html': return 'HTML';
+    default: return 'Текст';
+  }
+});
+
+const renderedMarkdown = computed(() => marked.parse(contract.value.content, {
+  gfm: true,
+  breaks: true,
+  renderer: markdownRenderer,
+}) as string);
+
+const sanitizedMarkdown = computed(() => {
+  const html = renderedMarkdown.value;
+  return sanitizeDocumentHtml(html);
+});
+
+const sanitizedHtml = computed(() => {
+  return sanitizeDocumentHtml(contract.value.content);
+});
+
+const sanitizedDocumentHtml = computed(() => {
+  if (renderMode.value === 'markdown') return sanitizedMarkdown.value;
+  if (renderMode.value === 'html') return sanitizedHtml.value;
+  throw new Error('SDocBlock: document renderer доступен только для markdown/html mode. / SDocBlock: the document renderer is available only in markdown/html mode.');
+});
+
+interface DocumentLinkPayload {
+  href: string;
+  text: string;
+  title: string | null;
+  isExternal: boolean;
+}
+
+type DocumentLinkHandler = (event: MouseEvent, payload: DocumentLinkPayload) => void;
+const sanitizedTagSet = new Set<string>(SANITIZED_DOCUMENT_TAGS);
+const sanitizedAttributeSet = new Set<string>(SANITIZED_DOCUMENT_RENDER_ATTRIBUTES);
+const documentLinkComponent: Component = SLink;
+
+function renderSanitizedNode(node: Node, handleLink: DocumentLinkHandler): VNodeChild {
+  if (node.nodeType === Node.TEXT_NODE) return node.textContent ?? '';
+  if (node.nodeType === Node.COMMENT_NODE) return null;
+  if (!(node instanceof HTMLElement)) {
+    throw new TypeError(`SDocBlock: unsupported sanitized node type ${node.nodeType}.`);
+  }
+
+  const tag = node.tagName.toLowerCase();
+  if (!sanitizedTagSet.has(tag)) {
+    throw new TypeError(`SDocBlock: sanitized renderer получил недопустимый tag <${tag}>. / SDocBlock: sanitized renderer received unsupported tag <${tag}>.`);
+  }
+  const attributes: Record<string, string> = {};
+  for (const attribute of node.attributes) {
+    if (!sanitizedAttributeSet.has(attribute.name)) {
+      throw new TypeError(`SDocBlock: sanitized renderer получил недопустимый attribute ${attribute.name}. / SDocBlock: sanitized renderer received unsupported attribute ${attribute.name}.`);
+    }
+    attributes[attribute.name] = attribute.value;
+  }
+  const children = [...node.childNodes].map((child) => renderSanitizedNode(child, handleLink));
+
+  if (tag === 'a') {
+    const href = attributes.href?.trim();
+    if (!href) {
+      throw new TypeError('SDocBlock: sanitized <a> требует href. / SDocBlock: sanitized <a> requires href.');
+    }
+    if (!href.startsWith('#') && !URL.canParse(href, window.location.href)) {
+      throw new TypeError(`SDocBlock: href ${JSON.stringify(href)} не является допустимым URL. / SDocBlock: href ${JSON.stringify(href)} is not a valid URL.`);
+    }
+    const payload: DocumentLinkPayload = {
+      href,
+      text: node.textContent?.trim() || href,
+      title: attributes.title ?? null,
+      isExternal: /^(https?:\/\/|mailto:|tel:|file:\/\/)/i.test(href),
+    };
+    return h(documentLinkComponent, {
+      href,
+      title: payload.title ?? undefined,
+      variant: 'document',
+      underline: 'always',
+      wrap: 'anywhere',
+      external: payload.isExternal,
+      onClick: (event: MouseEvent) => handleLink(event, payload),
+    }, { default: () => children });
+  }
+
+  return h(tag, attributes, children);
+}
+
+const SDocumentContent = defineComponent({
+  name: 'SDocumentContent',
+  props: {
+    html: { type: String as PropType<string>, required: true },
+  },
+  emits: {
+    'link-click': (event: MouseEvent, payload: DocumentLinkPayload) => (
+      event instanceof MouseEvent && typeof payload.href === 'string'
+    ),
+  },
+  setup(rendererProps, { emit: emitDocument }) {
+    return () => {
+      const template = document.createElement('template');
+      template.innerHTML = rendererProps.html;
+      return [...template.content.childNodes].map((node) => renderSanitizedNode(
+        node,
+        (event, payload) => emitDocument('link-click', event, payload),
+      ));
+    };
+  },
+});
+
+const copyContent = async () => {
+  const text = contract.value.content;
+  if (!text) return;
+  const result = await copyText(text);
+  if (result.status === 'copied') {
+    notifier.success({ message: 'Содержимое скопировано' });
+    return;
+  }
+  notifier.danger({
+    message: result.status === 'unavailable'
+      ? 'Буфер обмена недоступен в этом браузере.'
+      : result.status === 'empty'
+        ? 'Нет содержимого для копирования.'
+        : `Не удалось скопировать. ${result.error.message}`,
+  });
+};
+
+const openExternalHref = (href: string) => {
+  if (/^(mailto:|tel:)/i.test(href)) {
+    window.location.href = href;
+    return;
+  }
+
+  window.open(href, '_blank', 'noopener,noreferrer');
+};
+
+const scrollToAnchor = (href: string) => {
+  const anchorId = href.slice(1);
+  if (!anchorId) return;
+  const target = [...(rootRef.value?.querySelectorAll<HTMLElement>('[data-s-doc-anchor]') ?? [])]
+    .find((element) => element.dataset.sDocAnchor === anchorId);
+  target?.scrollIntoView({ block: 'start', behavior: 'smooth' });
+};
+
+const handleDocumentLinkClick = (event: MouseEvent, payload: DocumentLinkPayload) => {
+  event.preventDefault();
+  event.stopPropagation();
+
+  if (payload.href.startsWith('#')) {
+    scrollToAnchor(payload.href);
+    return;
+  }
+
+  emit('link-click', payload);
+
+  if (contract.value.linkPolicy === 'emit') {
+    return;
+  }
+
+  if (payload.isExternal) {
+    openExternalHref(payload.href);
+    return;
+  }
+
+  try {
+    openExternalHref(new URL(payload.href, window.location.href).toString());
+  } catch {
+    notifier.danger({ message: `Не удалось открыть ссылку: ${payload.href}` });
+  }
+};
+</script>
+
+<style lang="postcss" src="./SDocBlock.css" scoped></style>

package/src/components/shared/data-display/SEmptyState.css

@@ -0,0 +1,42 @@
+@reference "../../../styles/reference.css";
+
+.s-empty-state {
+  @apply grid min-w-0 place-items-center content-center gap-2;
+}
+
+.s-empty-state[data-presentation='panel'] {
+  @apply rounded-md border border-dashed border-surface-300 p-6 text-center;
+  @apply dark:border-surface-700;
+}
+
+.s-empty-state[data-presentation='panel'][data-size='md'] {
+  @apply min-h-40;
+}
+
+.s-empty-state[data-presentation='panel'][data-size='sm'] {
+  @apply min-h-24;
+}
+
+.s-empty-state[data-presentation='inline'] {
+  @apply flex w-full items-center justify-start text-left;
+}
+
+.s-empty-state[data-presentation='inline'] .s-empty-state__title {
+  @apply text-xs font-normal text-surface-500 dark:text-surface-400;
+}
+
+.s-empty-state__icon {
+  @apply h-8 w-8 text-surface-400;
+}
+
+.s-empty-state__title {
+  @apply text-sm font-semibold text-surface-800 dark:text-surface-200;
+}
+
+.s-empty-state__description {
+  @apply max-w-lg text-xs text-surface-500 dark:text-surface-400;
+}
+
+.s-empty-state__actions {
+  @apply mt-2 flex flex-wrap items-center justify-center gap-2;
+}

package/src/components/shared/data-display/SEmptyState.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { computed, watchEffect, type Component, type VNodeChild } from 'vue'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import { PassiveContentBoundary, type PassiveContentContract } from '../../../internal/passiveContentContract'
+import { validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(defineProps<{
+  title?: string
+  description?: string
+  icon?: Component
+  size?: 'sm' | 'md'
+  presentation?: 'panel' | 'inline'
+}>(), {
+  title: undefined,
+  description: undefined,
+  icon: undefined,
+  size: 'md',
+  presentation: 'panel',
+})
+const slots = defineSlots<{
+  title?: () => VNodeChild
+  actions?: () => VNodeChild
+}>()
+
+const ownedAttrs = useOwnedAttrs({ component: 'SEmptyState', owner: 'empty state root' })
+const validatedSize = computed(() => validateExactString(
+  'SEmptyState', 'size', props.size, ['sm', 'md'] as const,
+))
+const validatedPresentation = computed(() => validateExactString(
+  'SEmptyState', 'presentation', props.presentation, ['panel', 'inline'] as const,
+))
+const validatedTitle = computed(() => props.title === undefined
+  ? undefined
+  : validateNonEmptyString('SEmptyState', 'title', props.title))
+const validatedDescription = computed(() => props.description === undefined
+  ? undefined
+  : validateNonEmptyString('SEmptyState', 'description', props.description))
+const passiveTitleContract: PassiveContentContract = {
+  owner: 'SEmptyState',
+  region: 'empty-state title',
+  guidance: 'Передайте действия через actions slot. / Pass actions through the actions slot.',
+}
+
+watchEffect(() => {
+  const hasTitleProp = validatedTitle.value !== undefined
+  const hasTitleSlot = Boolean(slots.title)
+  if (hasTitleProp === hasTitleSlot) {
+    throw new Error(
+      'SEmptyState: требуется ровно один источник title — prop или title slot. '
+      + '/ SEmptyState: exactly one title source is required: the prop or the title slot.',
+    )
+  }
+})
+</script>
+
+<template>
+  <div
+    v-bind="ownedAttrs.bindings()"
+    class="s-empty-state"
+    :data-size="validatedSize"
+    :data-presentation="validatedPresentation"
+    role="status"
+  >
+    <component :is="icon" v-if="icon" class="s-empty-state__icon" aria-hidden="true" />
+    <div class="s-empty-state__title">
+      <PassiveContentBoundary :contract="passiveTitleContract">
+        <slot name="title">{{ validatedTitle }}</slot>
+      </PassiveContentBoundary>
+    </div>
+    <span v-if="validatedDescription" class="s-empty-state__description">{{ validatedDescription }}</span>
+    <div v-if="$slots.actions" class="s-empty-state__actions">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" src="./SEmptyState.css" scoped></style>