@pgcorp/ui-kit 0.10.0 → 0.10.1

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

@@ -1,173 +0,0 @@
-<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 { useUiKitLocale } from '../../../composables/useUiKitLocale'
-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: undefined,
-})
-const { t } = useUiKitLocale()
-
-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 ?? t('navigation.wizardSteps'),
-))
-
-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

@@ -1,63 +0,0 @@
-<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.vue

@@ -1,365 +0,0 @@
-<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'
-import { useUiKitLocale } from '../../../composables/useUiKitLocale'
-
-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 { locale, t } = useUiKitLocale()
-
-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: t('persona.loadingCatalogs'),
-    emptyMessage: t('persona.chooseSearchArea'),
-  },
-))
-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(locale.value)
-  if (!query) return listing.value?.directories ?? []
-  return (listing.value?.directories ?? []).filter((directory) =>
-    `${directory.name} ${directory.displayPath}`.toLocaleLowerCase(locale.value).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()
-  ? t('persona.noMatches')
-  : t('persona.noNestedDirectories'))
-
-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 ? t('persona.active') : t('persona.open')
-  return selectedProject.value?.id === project.id ? t('persona.selected') : t('persona.select')
-}
-
-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="t('persona.pickerTitle')"
-    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="t('persona.connected')" :icon="FolderTree">
-          <SActionList :accessible-label="t('persona.connectedProjects')" 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 ? t('persona.active') : undefined"
-              status-severity="success"
-              :surface="{ mode: 'action', accessibleLabel: t('persona.openProject', { title: 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="t('persona.selectArea')"
-              :aria-label="t('persona.projectSearchArea')"
-              @update:model-value="selectRoot"
-            />
-          </div>
-          <SInputText
-            ref="searchInput"
-            v-model="filter"
-            size="sm"
-            :placeholder="t('persona.searchCurrentCatalog')"
-            :aria-label="t('persona.catalogSearch')"
-          />
-          <SButton
-            label=""
-            size="sm"
-            severity="secondary"
-            :leading-icon="RefreshCw"
-            icon-only
-            :title="t('persona.refreshCatalog')"
-            :aria-label="t('persona.refreshCatalog')"
-            @click="emit('refresh')"
-          />
-        </div>
-
-        <SBreadcrumbs
-          v-if="listing"
-          :items="breadcrumbs"
-          :aria-label="t('persona.catalogPath')"
-          @action="navigateBreadcrumb($event)"
-        />
-
-        <SAsyncState :state="pickerAsyncState">
-          <div v-if="listing" class="s-persona-project-picker__content">
-            <SActionList :accessible-label="t('persona.directoriesAndProjects')" 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="t('persona.personaProject')"
-                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' ? t('persona.noAccess') : directory.readiness === 'invalid' ? t('persona.projectError') : undefined"
-                status-severity="danger"
-                :trailing-icon="directory.isSelectable || directory.readiness === 'unreadable' || directory.readiness === 'invalid' ? undefined : ChevronRight"
-                :surface="{ mode: 'action', accessibleLabel: t('persona.openDirectory', { name: directory.name }) }"
-                @activate="emit('navigate', directory.relativePath)"
-                @action="projectAction(directory)"
-              />
-            </SActionList>
-
-            <SEmptyState
-              v-if="visibleDirectories.length === 0"
-              :title="emptyLabel"
-              :description="filter.trim() ? t('persona.adjustSearch') : t('persona.chooseAnotherArea')"
-              :icon="FolderSearch"
-              size="sm"
-            />
-            <SButton
-              v-if="state.status === 'ready' && state.pagination !== 'complete'"
-              severity="secondary"
-              :loading="state.pagination === 'loading-more'"
-              @click="emit('load-more')"
-            >
-              {{ t('persona.loadMore') }}
-            </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)">{{ t('persona.cancel') }}</SButton>
-      <SButton :disabled="!selectedProject" @click="confirmSelection">{{ t('persona.connectProject') }}</SButton>
-    </template>
-  </SModal>
-</template>
-
-<style lang="postcss" src="./SPersonaProjectPicker.css" scoped></style>