@pgcorp/ui-kit 0.1.0

package/src/components/shared/navigation/SWizardSteps.vue

@@ -0,0 +1,171 @@
+<template>
+  <nav
+    v-bind="ownedAttrs.bindings()"
+    class="s-wizard-steps"
+    :aria-label="validatedAriaLabel"
+    :data-columns="validatedColumns"
+    :data-density="validatedDensity"
+  >
+    <ol class="s-wizard-steps__list">
+      <li
+        v-for="record in stepRecords"
+        :key="record.token"
+        class="s-wizard-steps__item"
+        :data-state="record.state"
+      >
+        <SButton
+          :severity="record.state === 'completed' ? 'success' : record.state === 'current' ? 'primary' : 'secondary'"
+          :appearance="record.state === 'current' ? 'soft' : 'ghost'"
+          :size="validatedDensity === 'compact' ? 'sm' : 'md'"
+          shape="row"
+          width="full"
+          content-align="start"
+          :disabled="record.step.disabled"
+          :aria-current="record.state === 'current' ? 'step' : undefined"
+          :data-state="record.state"
+          @click="selectStep(record.step)"
+        >
+          <span class="s-wizard-steps__marker" aria-hidden="true">{{ record.index + 1 }}</span>
+          <span class="s-wizard-steps__title">{{ record.step.title }}</span>
+        </SButton>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script lang="ts">
+import type { SelectionKey as PublicSelectionKey } from '../_internal/useSelectionRoving'
+
+/** Один типизированный шаг мастера. / One typed wizard step. */
+export interface WizardStepOption<T extends PublicSelectionKey = string | number> {
+  /** Стабильная identity шага. / Stable step identity. */
+  id: T
+  /** Пользовательская метка шага. / User-facing step label. */
+  title: string
+  /** Запрещает активацию шага и исключает его из последовательности Tab. / Prevents step activation and removes it from the Tab sequence. */
+  disabled?: boolean
+}
+
+/** Публичный controlled contract ordered step navigation. / Public controlled contract for ordered step navigation. */
+export interface Props<T extends PublicSelectionKey = string | number> {
+  /** Текущий шаг. / Current step. */
+  modelValue: T
+  /** Полный ordered набор шагов. / Complete ordered step collection. */
+  steps: readonly WizardStepOption<T>[]
+  /** Ширина колонок; auto сохраняет одну scrollable строку. / Column-width policy; auto keeps one scrollable row. */
+  columns?: 'auto' | '2' | '3' | '4'
+  /** Плотность hitbox canonical action owner. / Canonical action-owner hitbox density. */
+  density?: 'default' | 'compact'
+  /** Accessible name step navigation landmark. / Accessible name of the step-navigation landmark. */
+  ariaLabel?: string
+}
+</script>
+
+<script setup lang="ts" generic="T extends SelectionKey = string | number">
+import { computed } from 'vue'
+import { validateBoolean, validateExactString, validateNonEmptyString } from '../../../internal/runtimeContract'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+import SButton from '../controls/SButton.vue'
+import {
+  selectionKeyToken,
+  validateSelectionIdentities,
+} from '../_internal/useSelectionRoving'
+import type { SelectionKey } from '../_internal/useSelectionRoving'
+
+defineOptions({ inheritAttrs: false })
+
+type WizardStepState = 'current' | 'completed' | 'upcoming'
+
+interface WizardStepRecord<TStep extends SelectionKey> {
+  readonly index: number
+  readonly state: WizardStepState
+  readonly step: WizardStepOption<TStep>
+  readonly token: string
+}
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  columns: 'auto',
+  density: 'default',
+  ariaLabel: 'Шаги мастера',
+})
+
+const emit = defineEmits<{
+  'update:modelValue': [value: T]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SWizardSteps', owner: 'ordered wizard navigation' })
+const STEP_KEYS = new Set(['id', 'title', 'disabled'])
+
+function assertStepRecord(value: unknown, coordinate: string): asserts value is WizardStepOption<T> {
+  if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+    throw new TypeError(`SWizardSteps: ${coordinate} must be a step object`)
+  }
+  for (const key of Reflect.ownKeys(value)) {
+    if (typeof key !== 'string' || !STEP_KEYS.has(key)) {
+      throw new TypeError(`SWizardSteps: ${coordinate} has unsupported field '${String(key)}'`)
+    }
+    const descriptor = Object.getOwnPropertyDescriptor(value, key)
+    if (!descriptor?.enumerable || !('value' in descriptor)) {
+      throw new TypeError(`SWizardSteps: ${coordinate}.${key} must be an enumerable data property`)
+    }
+  }
+}
+
+const validatedColumns = computed(() => validateExactString(
+  'SWizardSteps',
+  'columns',
+  props.columns,
+  ['auto', '2', '3', '4'] as const,
+))
+const validatedDensity = computed(() => validateExactString(
+  'SWizardSteps',
+  'density',
+  props.density,
+  ['default', 'compact'] as const,
+))
+const validatedAriaLabel = computed(() => validateNonEmptyString(
+  'SWizardSteps',
+  'ariaLabel',
+  props.ariaLabel,
+))
+
+const stepRecords = computed<readonly WizardStepRecord<T>[]>(() => {
+  void validatedColumns.value
+  void validatedDensity.value
+  void validatedAriaLabel.value
+  if (!Array.isArray(props.steps) || props.steps.length === 0) {
+    throw new TypeError('SWizardSteps: steps must be a non-empty array')
+  }
+
+  const tokens: string[] = []
+  for (const [index, step] of props.steps.entries()) {
+    const coordinate = `steps[${index}]`
+    assertStepRecord(step, coordinate)
+    validateNonEmptyString('SWizardSteps', `${coordinate}.title`, step.title)
+    if (step.disabled !== undefined) {
+      validateBoolean('SWizardSteps', `${coordinate}.disabled`, step.disabled)
+    }
+    tokens.push(selectionKeyToken('SWizardSteps', step.id, `${coordinate}.id`))
+  }
+  validateSelectionIdentities('SWizardSteps', props.steps.map((step, index) => ({
+    key: step.id,
+    coordinate: `steps[${index}].id`,
+  })))
+
+  const modelToken = selectionKeyToken('SWizardSteps', props.modelValue, 'modelValue')
+  const currentIndex = tokens.indexOf(modelToken)
+  if (currentIndex < 0) throw new Error('SWizardSteps: modelValue does not match any step')
+
+  return props.steps.map((step, index) => ({
+    index,
+    state: index === currentIndex ? 'current' : index < currentIndex ? 'completed' : 'upcoming',
+    step,
+    token: tokens[index]!,
+  }))
+})
+
+function selectStep(step: WizardStepOption<T>): void {
+  if (!step.disabled) emit('update:modelValue', step.id)
+}
+</script>
+
+<style lang="postcss" src="./SWizardSteps.css" scoped></style>

package/src/components/shared/navigation/_internal/SCatalogNavigatorGroup.vue

@@ -0,0 +1,63 @@
+<template>
+  <section class="s-catalog-navigator__group">
+    <header class="s-catalog-navigator__group-header">
+      <SButton
+        :id="triggerId"
+        :label="`${label} (${count})`"
+        size="sm"
+        severity="secondary"
+        appearance="ghost"
+        shape="row"
+        width="full"
+        content-align="start"
+        data-testid="catalog-group-toggle"
+        :disabled="disabled"
+        :disclosure="{ expanded: isOpen, controls: panelId, iconPlacement: 'leading' }"
+        @click="toggle"
+      />
+    </header>
+    <div
+      v-if="isOpen"
+      :id="panelId"
+      role="list"
+      :aria-labelledby="triggerId"
+    >
+      <slot />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+import SButton from '../../controls/SButton.vue'
+import { useDisclosure } from '../../../../composables/useDisclosure'
+
+const props = withDefaults(defineProps<{
+  id: string
+  label: string
+  count: number
+  defaultOpen?: boolean
+  disabled?: boolean
+}>(), { defaultOpen: true, disabled: false })
+
+const { isOpen, triggerId, panelId, toggle } = useDisclosure({
+  id: props.id,
+  defaultOpen: props.defaultOpen,
+  disabled: () => props.disabled,
+})
+</script>
+
+<style lang="postcss" scoped>
+@reference "../../../../styles/reference.css";
+
+.s-catalog-navigator__group-header {
+  position: sticky;
+  z-index: var(--s-layer-content);
+  top: 0;
+  padding: 0;
+  background: var(--color-surface);
+  color: var(--color-text-muted);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+
+</style>

package/src/components/shared/persona/SPersonaProjectPicker.css

@@ -0,0 +1,36 @@
+@reference "../../../styles/reference.css";
+
+.s-persona-project-picker {
+  @apply grid min-h-[32rem] min-w-0 gap-4 lg:grid-cols-[minmax(14rem,0.32fr)_minmax(0,1fr)];
+}
+
+.s-persona-project-picker__connected {
+  @apply min-w-0 self-start;
+}
+
+.s-persona-project-picker__browser {
+  @apply grid min-h-0 min-w-0 content-start gap-3;
+}
+
+.s-persona-project-picker__toolbar {
+  @apply grid min-w-0 gap-2 sm:grid-cols-[minmax(12rem,0.42fr)_minmax(14rem,1fr)_auto];
+}
+
+.s-persona-project-picker__content {
+  @apply grid min-h-0 gap-3;
+}
+
+@media (max-width: 639px) {
+  .s-persona-project-picker {
+    @apply min-h-0;
+  }
+
+  .s-persona-project-picker__toolbar {
+    @apply grid-cols-[minmax(0,1fr)_auto];
+  }
+
+  .s-persona-project-picker__root-selector {
+    @apply col-span-2;
+  }
+
+}

package/src/components/shared/persona/SPersonaProjectPicker.vue

@@ -0,0 +1,361 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+import { Check, ChevronRight, Folder, FolderSearch, FolderTree, RefreshCw } from '../../icons/sputnigUiIcons'
+import SModal from '../containers/SModal.vue'
+import SPanel from '../containers/SPanel.vue'
+import SButton from '../controls/SButton.vue'
+import SInputText from '../controls/SInputText.vue'
+import SSelect from '../controls/SSelect.vue'
+import SBreadcrumbs from '../navigation/SBreadcrumbs.vue'
+import SActionList from '../data-display/SActionList.vue'
+import SActionListItem from '../data-display/SActionListItem.vue'
+import SBadge from '../data-display/SBadge.vue'
+import SEmptyState from '../data-display/SEmptyState.vue'
+import SAsyncState from '../feedback/SAsyncState.vue'
+import type {
+  PersonaProjectPickerConnected,
+  PersonaProjectPickerEntry,
+  PersonaProjectPickerRoot,
+  PersonaProjectPickerState,
+} from './types'
+import {
+  assertPersonaInventory,
+  findExactPersonaInventoryItem,
+  resolvePersonaProjectPickerAsyncState,
+} from './_internal/inventory'
+import { useOwnedAttrs } from '../../../internal/ownedAttrs'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    open: boolean
+    roots: PersonaProjectPickerRoot[]
+    state: PersonaProjectPickerState
+    selectedRootId?: string | null
+    connectedProjects?: PersonaProjectPickerConnected[]
+  }>(),
+  {
+    selectedRootId: null,
+    connectedProjects: () => [],
+  },
+)
+
+const emit = defineEmits<{
+  'update:open': [open: boolean]
+  'select-root': [rootId: string]
+  navigate: [relativePath: string]
+  refresh: []
+  'load-more': []
+  confirm: [project: PersonaProjectPickerEntry]
+  'activate-connected': [bindingId: string]
+}>()
+const ownedAttrs = useOwnedAttrs({ component: 'SPersonaProjectPicker', owner: 'project-picker modal surface' })
+
+const filter = ref('')
+const selectedProjectId = ref<string | null>(null)
+const searchInput = ref<InstanceType<typeof SInputText> | null>(null)
+const rootBreadcrumbId = 'persona-project-picker:root'
+
+const validatedRoots = computed(() => assertPersonaInventory('SPersonaProjectPicker.roots', props.roots))
+const validatedConnectedProjects = computed(() => {
+  const projects = assertPersonaInventory(
+    'SPersonaProjectPicker.connectedProjects',
+    props.connectedProjects,
+  )
+  const projectIds = new Set<string>()
+  for (const [index, project] of projects.entries()) {
+    if (typeof project.projectId !== 'string' || project.projectId.length === 0) {
+      throw new TypeError(
+        `SPersonaProjectPicker.connectedProjects[${index}].projectId должен быть непустой строкой. `
+        + `/ SPersonaProjectPicker.connectedProjects[${index}].projectId must be a non-empty string.`,
+      )
+    }
+    if (projectIds.has(project.projectId)) {
+      throw new TypeError(
+        `SPersonaProjectPicker.connectedProjects содержит duplicate projectId ${JSON.stringify(project.projectId)}. `
+        + `/ SPersonaProjectPicker.connectedProjects contains duplicate projectId ${JSON.stringify(project.projectId)}.`,
+      )
+    }
+    projectIds.add(project.projectId)
+  }
+  return projects
+})
+const rootOptions = computed(() => validatedRoots.value.map((root) => ({ label: root.label, value: root.id, title: root.path })))
+const resolvedSelectedRootId = computed(() => {
+  const selectedRoot = findExactPersonaInventoryItem(
+    'SPersonaProjectPicker.roots',
+    validatedRoots.value,
+    props.selectedRootId,
+  )
+  return selectedRoot === null ? null : selectedRoot.id
+})
+const listing = computed(() => {
+  if (props.state.status !== 'ready' || props.state.listing === null) return null
+  const candidate = props.state.listing
+  if (!validatedRoots.value.some((root) => root.id === candidate.root.id)) {
+    throw new TypeError(
+      `SPersonaProjectPicker.state: listing.root.id ${JSON.stringify(candidate.root.id)} отсутствует в roots inventory. `
+      + `/ SPersonaProjectPicker.state: listing.root.id ${JSON.stringify(candidate.root.id)} is absent from the roots inventory.`,
+    )
+  }
+  if (candidate.root.id !== resolvedSelectedRootId.value) {
+    throw new TypeError(
+      `SPersonaProjectPicker.state: listing.root.id ${JSON.stringify(candidate.root.id)} не совпадает с selectedRootId ${JSON.stringify(resolvedSelectedRootId.value)}. `
+      + `/ SPersonaProjectPicker.state: listing.root.id ${JSON.stringify(candidate.root.id)} does not match selectedRootId ${JSON.stringify(resolvedSelectedRootId.value)}.`,
+    )
+  }
+  const entries = assertPersonaInventory(
+    'SPersonaProjectPicker.state.listing',
+    [candidate.current, ...candidate.directories],
+  )
+  const invalidRootEntry = entries.find((entry) => entry.rootId !== candidate.root.id)
+  if (invalidRootEntry) {
+    throw new TypeError(
+      `SPersonaProjectPicker.state: entry ${JSON.stringify(invalidRootEntry.id)} ссылается на rootId ${JSON.stringify(invalidRootEntry.rootId)} вместо ${JSON.stringify(candidate.root.id)}. `
+      + `/ SPersonaProjectPicker.state: entry ${JSON.stringify(invalidRootEntry.id)} references rootId ${JSON.stringify(invalidRootEntry.rootId)} instead of ${JSON.stringify(candidate.root.id)}.`,
+    )
+  }
+  return candidate
+})
+const pickerAsyncState = computed(() => resolvePersonaProjectPickerAsyncState(
+  props.state,
+  {
+    loadingMessage: 'Загрузка каталогов',
+    emptyMessage: 'Выберите область поиска',
+  },
+))
+const projectInventory = computed(() => {
+  const currentListing = listing.value
+  return currentListing ? [currentListing.current, ...currentListing.directories] : []
+})
+const selectedProject = computed(() => {
+  const project = findExactPersonaInventoryItem(
+    'SPersonaProjectPicker.state.listing',
+    projectInventory.value,
+    selectedProjectId.value,
+  )
+  return project?.isSelectable ? project : null
+})
+const visibleDirectories = computed(() => {
+  const query = filter.value.trim().toLocaleLowerCase('ru-RU')
+  if (!query) return listing.value?.directories ?? []
+  return (listing.value?.directories ?? []).filter((directory) =>
+    `${directory.name} ${directory.displayPath}`.toLocaleLowerCase('ru-RU').includes(query),
+  )
+})
+const breadcrumbs = computed(() => {
+  const currentListing = listing.value
+  if (!currentListing) return []
+  const parts = currentListing.current.relativePath.split('/').filter(Boolean)
+  const result = [{
+    id: rootBreadcrumbId,
+    label: currentListing.root.label,
+    kind: parts.length === 0 ? 'current' as const : 'action' as const,
+  }]
+  let relativePath = ''
+  for (const [index, part] of parts.entries()) {
+    relativePath = relativePath ? `${relativePath}/${part}` : part
+    result.push({
+      label: part,
+      id: relativePath,
+      kind: index === parts.length - 1 ? 'current' : 'action',
+    })
+  }
+  return result
+})
+const emptyLabel = computed(() => filter.value.trim() ? 'Совпадений не найдено' : 'В каталоге нет вложенных директорий')
+
+watch(
+  () => props.open,
+  async (open) => {
+    if (!open) return
+    filter.value = ''
+    selectedProjectId.value = null
+    await nextTick()
+    searchInput.value?.focus()
+  },
+)
+
+watch(
+  () => listing.value?.root.id,
+  () => {
+    selectedProjectId.value = null
+    filter.value = ''
+  },
+)
+
+function selectRoot(value: unknown): void {
+  if (typeof value === 'string' && value) emit('select-root', value)
+}
+
+function navigateBreadcrumb(id: string): void {
+  emit('navigate', id === rootBreadcrumbId ? '' : id)
+}
+
+function selectProject(project: PersonaProjectPickerEntry): void {
+  if (project.isSelectable) selectedProjectId.value = project.id
+}
+
+function connectedProject(project: PersonaProjectPickerEntry): PersonaProjectPickerConnected | undefined {
+  return validatedConnectedProjects.value.find((connected) => connected.projectId === project.id)
+}
+
+function projectActionLabel(project: PersonaProjectPickerEntry): string | undefined {
+  if (!project.isSelectable) return undefined
+  const connected = connectedProject(project)
+  if (connected) return connected.active ? 'Активен' : 'Открыть'
+  return selectedProject.value?.id === project.id ? 'Выбран' : 'Выбрать'
+}
+
+function projectAction(project: PersonaProjectPickerEntry): void {
+  const connected = connectedProject(project)
+  if (connected) {
+    if (!connected.active) emit('activate-connected', connected.id)
+    return
+  }
+  selectProject(project)
+}
+
+function confirmSelection(): void {
+  if (selectedProject.value) emit('confirm', selectedProject.value)
+}
+</script>
+
+<template>
+  <SModal
+    v-bind="ownedAttrs.bindings()"
+    :open="open"
+    title="Выбор Persona-проекта"
+    size="wide"
+    @update:open="emit('update:open', $event)"
+  >
+    <div class="s-persona-project-picker">
+      <div v-if="validatedConnectedProjects.length > 0" class="s-persona-project-picker__connected">
+        <SPanel title="Подключённые" :icon="FolderTree">
+          <SActionList accessible-label="Подключённые Persona-проекты" max-height="md">
+            <SActionListItem
+              v-for="project in validatedConnectedProjects"
+              :key="project.id"
+              :title="project.title"
+              :description="project.path"
+              :icon="FolderTree"
+              :selected="project.active"
+              :status-label="project.active ? 'Активен' : undefined"
+              status-severity="success"
+              :surface="{ mode: 'action', accessibleLabel: `Открыть проект ${project.title}` }"
+              @activate="emit('activate-connected', project.id)"
+            />
+          </SActionList>
+        </SPanel>
+      </div>
+
+      <section class="s-persona-project-picker__browser">
+        <div class="s-persona-project-picker__toolbar">
+          <div class="s-persona-project-picker__root-selector">
+            <SSelect
+              :model-value="resolvedSelectedRootId"
+              :options="rootOptions"
+              placeholder="Выберите область"
+              aria-label="Область поиска проектов"
+              @update:model-value="selectRoot"
+            />
+          </div>
+          <SInputText
+            ref="searchInput"
+            v-model="filter"
+            size="sm"
+            placeholder="Найти в текущем каталоге"
+            aria-label="Поиск каталога"
+          />
+          <SButton
+            label=""
+            size="sm"
+            severity="secondary"
+            :leading-icon="RefreshCw"
+            icon-only
+            title="Обновить каталог"
+            aria-label="Обновить каталог"
+            @click="emit('refresh')"
+          />
+        </div>
+
+        <SBreadcrumbs
+          v-if="listing"
+          :items="breadcrumbs"
+          aria-label="Путь к каталогу"
+          @action="navigateBreadcrumb($event)"
+        />
+
+        <SAsyncState :state="pickerAsyncState">
+          <div v-if="listing" class="s-persona-project-picker__content">
+            <SActionList accessible-label="Директории и Persona-проекты" max-height="lg">
+              <SActionListItem
+                v-if="listing.current.isSelectable"
+                :title="listing.current.projectName || listing.current.name"
+                :description="listing.current.displayPath"
+                :icon="FolderTree"
+                tone="success"
+                :selected="selectedProject?.id === listing.current.id"
+                :action-label="projectActionLabel(listing.current)"
+                :action-icon="connectedProject(listing.current)?.active ? Check : undefined"
+                :action-disabled="connectedProject(listing.current)?.active"
+                action-severity="success"
+                status-label="Persona-проект"
+                status-severity="success"
+                :surface="{ mode: 'static' }"
+                @action="projectAction(listing.current)"
+              />
+              <SActionListItem
+                v-for="directory in visibleDirectories"
+                :key="directory.id"
+                :title="directory.projectName || directory.name"
+                :description="directory.diagnosticMessage || directory.displayPath"
+                :icon="directory.isSelectable ? FolderTree : Folder"
+                :selected="selectedProject?.id === directory.id"
+                :tone="directory.readiness === 'invalid' || directory.readiness === 'unreadable' ? 'danger' : directory.isSelectable ? 'success' : 'default'"
+                :action-label="projectActionLabel(directory)"
+                :action-icon="connectedProject(directory)?.active || selectedProject?.id === directory.id ? Check : undefined"
+                :action-disabled="connectedProject(directory)?.active"
+                :action-severity="connectedProject(directory)?.active || selectedProject?.id === directory.id ? 'success' : 'secondary'"
+                :status-label="directory.readiness === 'unreadable' ? 'Нет доступа' : directory.readiness === 'invalid' ? 'Ошибка проекта' : undefined"
+                status-severity="danger"
+                :trailing-icon="directory.isSelectable || directory.readiness === 'unreadable' || directory.readiness === 'invalid' ? undefined : ChevronRight"
+                :surface="{ mode: 'action', accessibleLabel: `Открыть ${directory.name}` }"
+                @activate="emit('navigate', directory.relativePath)"
+                @action="projectAction(directory)"
+              />
+            </SActionList>
+
+            <SEmptyState
+              v-if="visibleDirectories.length === 0"
+              :title="emptyLabel"
+              :description="filter.trim() ? 'Измените запрос или перейдите в другой каталог.' : 'Вернитесь на уровень выше или выберите другую область.'"
+              :icon="FolderSearch"
+              size="sm"
+            />
+            <SButton
+              v-if="state.status === 'ready' && state.pagination !== 'complete'"
+              severity="secondary"
+              :loading="state.pagination === 'loading-more'"
+              @click="emit('load-more')"
+            >
+              Загрузить ещё
+            </SButton>
+          </div>
+        </SAsyncState>
+      </section>
+    </div>
+
+    <template #footer-start>
+      <SBadge v-if="selectedProject" severity="info">{{ selectedProject.displayPath }}</SBadge>
+    </template>
+    <template #footer-end>
+      <SButton severity="secondary" @click="emit('update:open', false)">Отмена</SButton>
+      <SButton :disabled="!selectedProject" @click="confirmSelection">Подключить проект</SButton>
+    </template>
+  </SModal>
+</template>
+
+<style lang="postcss" src="./SPersonaProjectPicker.css" scoped></style>