orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/catalog/CatalogHeader.README.md

@@ -1,136 +0,0 @@
-# CatalogHeader
-
-## English
-
-`CatalogHeader` opens a browsable panel from the public Application Load catalog.
-The main control shows public root categories. Roots marked `separate_menu` also
-receive their own shortcut controls. Selecting a category with public children
-opens that branch. Back returns to its parent, and each category in the
-breadcrumb trail opens that category page.
-Pointer hover previews a category's representative products, while keyboard
-focus selects the same preview.
-
-Inside `StorefrontHeader`, the open panel overlays the current page directly
-below the header without increasing the header height on an opaque surface,
-so the page underneath does not show through. When `CatalogHeader` is rendered by
-itself, the panel remains in the component's normal layout.
-
-The highlighted products come from `product_rep_1_id` and `product_rep_2_id` on
-the active category and retain their ordinary or featured collection. Every
-product, seller, variant, favorite and purchase callback is forwarded from the
-compact physical product card. `productDisabled` blocks product selection;
-`productActionsDisabled` blocks favorite and purchase actions.
-
-`categoryHref` creates real links for the active category and every category in
-the breadcrumb trail. A plain click closes the panel, restores focus and calls
-`onSelect` with the complete category while the link performs its native
-navigation. A modifier click retains browser navigation. Without
-`categoryHref`, the same actions are buttons. `productHref` does the same for
-the image and name of the category's products. `onToggle` reports actual
-open-state changes.
-`renderNavigation` receives `close` for adjacent navigation controls. Escape,
-focus leaving the component and a pointer press outside close the panel; product
-action overlays remain usable. `disabled` prevents opening, and an empty catalog
-disables the main control.
-
-### Props
-
-| Prop                                                                                                              | Meaning                                                                                                                                                                                                              |
-| ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `label?: string`                                                                                                  | Text of the catalog button and accessible name of the menu. Empty: «Catalog» in the storefront language.                                                                                                             |
-| `disabled?: boolean`                                                                                              | Disables the component controls and prevents new actions.                                                                                                                                                            |
-| `productDisabled?: boolean`                                                                                       | Disables selection of representative products.                                                                                                                                                                       |
-| `productActionsDisabled?: boolean`                                                                                | Disables cart, wishlist, subscription and preorder actions.                                                                                                                                                          |
-| `closeLabel?: string`                                                                                             | Accessible name and tooltip of the close button. Empty: «Close catalog» in the storefront language.                                                                                                                  |
-| `backLabel?: string`                                                                                              | Accessible name and tooltip of the button that returns to the parent category. Empty: «Back» in the storefront language.                                                                                             |
-| `viewCategoryLabel?: string`                                                                                      | Text of the link that opens the active category's page. Empty: «View» in the storefront language.                                                                                                                    |
-| `productsLabel?: string`                                                                                          | Caption above the active category's representative products. Empty: «Category highlights» in the storefront language.                                                                                                |
-| `emptyLabel?: string`                                                                                             | Message when the open level has no categories. Empty: «No categories available» in the storefront language.                                                                                                          |
-| `emptyProductsLabel?: string`                                                                                     | Message when the active category has no representative products to show. Empty: «No representative products» in the storefront language.                                                                             |
-| `categoryHref?: (categoryId: number) => string`                                                                   | Builds the category destination from the callback arguments.                                                                                                                                                         |
-| `productHref?: (productId: number) => string`                                                                     | Builds the product page address; the image and name of a product become links.                                                                                                                                       |
-| `renderNavigation?: (props: { close: (restoreFocus?: boolean) => void; }) => ReactNode`                           | Replaces the default navigation region; the renderer inputs are shown in its type.                                                                                                                                   |
-| `onToggle?: (open: boolean) => void`                                                                              | Passes `true` after expanding the catalog and `false` after closing it. The internal expanded state has already changed.                                                                                             |
-| `onSelect?: (category: ICategory) => void`                                                                        | Passes the selected category object after closing the expanded catalog. The application opens the category.                                                                                                          |
-| `onSelectProduct?: (product: IProduct) => void`                                                                   | Passes the selected product object after closing the catalog. The application opens the product.                                                                                                                     |
-| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Passes the displayed product’s seller object when the seller is selected. The application opens the seller page.                                                                                                     |
-| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Passes the previously displayed product ID in `product` and chosen primary variant in `variant`. An available variant product replaces the card; the application loads missing product data.                         |
-| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                 | Passes the product ID in `product`, product group ID in `productGroup` and primary variant in `variant` when its secondary variants need loading. The application loads them and supplies them to the product store. |
-| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Passes the previously displayed product ID in `product` and chosen secondary variant in `variant` after replacing the displayed product. The secondary-variant data remains available.                               |
-| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Passes the product ID in `product` and desired wishlist state in `selected` after the heart is pressed. The application confirms the change with a request and updates product data.                                 |
-| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                     | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data.               |
-| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                  | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data.                                           |
-| `onSubscribe?: (selection: ProductActionSelection) => void`                                                       | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state.                                   |
-| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                     | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state.                                                    |
-| `onPreorder?: (selection: ProductActionSelection) => void`                                                        | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request.                                                                         |
-
-## Русский
-
-`CatalogHeader` открывает панель публичного каталога из Application Load.
-Основная кнопка показывает публичные корневые категории. Корневые категории с
-`separate_menu` дополнительно получают отдельные кнопки быстрого доступа. Выбор
-категории с публичными дочерними категориями открывает следующую ветку; кнопка
-«Назад» возвращает к родительской категории, а каждая категория в цепочке
-открывает страницу этой категории. Наведение мыши
-показывает товары выбранной категории, фокус с клавиатуры выбирает тот же
-предпросмотр.
-
-Внутри `StorefrontHeader` открытая панель располагается поверх текущей страницы
-сразу под шапкой и не увеличивает её высоту. Фон панели непрозрачный, поэтому
-страница под ней не просвечивает. Если `CatalogHeader` используется
-самостоятельно, панель остаётся в обычной разметке компонента.
-
-Товары для предпросмотра задаются полями `product_rep_1_id` и
-`product_rep_2_id` активной категории и сохраняют принадлежность к обычной или
-рекомендованной подборке. Компонент передаёт события товара, продавца, вариантов,
-избранного и покупки из компактной физической карточки. `productDisabled`
-блокирует выбор товара, а `productActionsDisabled` — избранное и покупку.
-
-`categoryHref` создаёт настоящие ссылки для активной категории и каждой
-категории в цепочке. Обычное нажатие закрывает панель, возвращает фокус и
-вызывает `onSelect` с полной категорией, а ссылка выполняет обычный переход
-браузера. Нажатие с модификатором сохраняет переход браузера. Без
-`categoryHref` выводятся кнопки с теми же действиями. `productHref` так же
-делает ссылками фото и название товаров категории. `onToggle` сообщает только
-о фактической смене состояния. `renderNavigation` получает функцию `close` для
-соседних элементов
-навигации. Escape, уход фокуса и нажатие вне компонента закрывают панель;
-всплывающие элементы действий товара остаются доступными. `disabled` запрещает
-открытие, а при пустом каталоге основная кнопка недоступна.
-
-### Свойства
-
-| Свойство                                                                                                          | Назначение                                                                                                                                                                                                         |
-| ----------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `label?: string`                                                                                                  | Текст кнопки каталога и доступное название меню. Если пусто — «Каталог» на языке магазина.                                                                                                                         |
-| `disabled?: boolean`                                                                                              | Блокирует элементы компонента и новые действия.                                                                                                                                                                    |
-| `productDisabled?: boolean`                                                                                       | Блокирует выбор товаров-представителей.                                                                                                                                                                            |
-| `productActionsDisabled?: boolean`                                                                                | Блокирует корзину, избранное, подписку и предзаказ.                                                                                                                                                                |
-| `closeLabel?: string`                                                                                             | Доступное название и подсказка кнопки закрытия. Если пусто — «Закрыть каталог» на языке магазина.                                                                                                                  |
-| `backLabel?: string`                                                                                              | Доступное название и подсказка кнопки возврата к родительской категории. Если пусто — «Назад» на языке магазина.                                                                                                   |
-| `viewCategoryLabel?: string`                                                                                      | Текст ссылки на страницу активной категории. Если пусто — «Открыть» на языке магазина.                                                                                                                             |
-| `productsLabel?: string`                                                                                          | Подпись над товарами-представителями активной категории. Если пусто — «Товары категории» на языке магазина.                                                                                                        |
-| `emptyLabel?: string`                                                                                             | Сообщение, когда на открытом уровне нет категорий. Если пусто — «Нет доступных категорий» на языке магазина.                                                                                                       |
-| `emptyProductsLabel?: string`                                                                                     | Сообщение, когда у активной категории нет товаров-представителей для показа. Если пусто — «Нет товаров для показа» на языке магазина.                                                                              |
-| `categoryHref?: (categoryId: number) => string`                                                                   | Строит адрес ссылки категории из аргументов обработчика.                                                                                                                                                           |
-| `productHref?: (productId: number) => string`                                                                     | Строит адрес страницы товара; фото и название товара становятся ссылками.                                                                                                                                          |
-| `renderNavigation?: (props: { close: (restoreFocus?: boolean) => void; }) => ReactNode`                           | Заменяет стандартный блок навигации; входные данные функции указаны в её типе.                                                                                                                                     |
-| `onToggle?: (open: boolean) => void`                                                                              | Передаёт `true` после раскрытия каталога и `false` после закрытия. К этому моменту внутреннее состояние раскрытия уже изменено.                                                                                    |
-| `onSelect?: (category: ICategory) => void`                                                                        | Передаёт объект выбранной категории после закрытия раскрытого каталога. Приложение открывает категорию.                                                                                                            |
-| `onSelectProduct?: (product: IProduct) => void`                                                                   | Передаёт объект выбранного товара после закрытия каталога. Приложение открывает товар.                                                                                                                             |
-| `onSelectSeller?: (seller: IProductSeller) => void`                                                               | Передаёт объект продавца отображаемого товара при выборе продавца. Приложение открывает его страницу.                                                                                                              |
-| `onSelectVariant?: (selection: ProductActionSelection & { variant: IProductVariantValue; }) => void`              | Передаёт ID ранее отображаемого товара в `product` и выбранный основной вариант в `variant`. Доступный товар выбранного варианта заменяет карточку; отсутствующие данные загружает приложение.                     |
-| `onRequestSecondaryVariants?: (request: IProductSecondaryVariantRequest) => void`                                 | Передаёт ID товара в `product`, ID группы товаров в `productGroup` и основной вариант в `variant`, когда для него нужно загрузить дополнительные варианты. Приложение загружает и передаёт их в хранилище товаров. |
-| `onSelectSecondaryVariant?: (selection: ProductActionSelection & { variant: IProductSecondaryVariant; }) => void` | Передаёт ID ранее отображаемого товара в `product` и выбранный дополнительный вариант в `variant` после замены отображаемого товара. Выбор сохраняет данные дополнительных вариантов.                              |
-| `onToggleFavorite?: (selection: ProductActionSelection & { selected: boolean; }) => void`                         | Передаёт ID товара в `product` и желаемое состояние избранного в `selected` после нажатия сердца. Приложение подтверждает изменение запросом и обновляет данные товара.                                            |
-| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`                                     | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара.                        |
-| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void`                                  | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара.                                           |
-| `onSubscribe?: (selection: ProductActionSelection) => void`                                                       | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки.                                                   |
-| `onUnsubscribe?: (selection: ProductActionSelection) => void`                                                     | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки.                                                                    |
-| `onPreorder?: (selection: ProductActionSelection) => void`                                                        | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос.                                                                                       |
-
-## Category visibility / Видимость категорий
-
-Navigation omits categories with `exclude_from_tree: true` and all their descendants. The full published catalog remains available for product main-category names, links and breadcrumbs.
-
-В навигации скрываются категории с `exclude_from_tree: true` и все их подкатегории. Полный каталог опубликованных категорий сохраняется для названий, ссылок и цепочек основной категории товара.

package/templates/components/orionplace/catalog/CatalogHeader.module.css

@@ -1,387 +0,0 @@
-.catalog {
-  container-type: inline-size;
-  width: 100%;
-  min-width: 0;
-  color: inherit;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-.navigationRow {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: stretch;
-  column-gap: 1.5rem;
-}
-.navigationButton {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  flex-shrink: 0;
-  max-width: 100%;
-  height: 3rem;
-  padding: 1px 0;
-  border: 0;
-  border-block: 2px solid transparent;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-align: left;
-  text-transform: uppercase;
-  cursor: pointer;
-  transition:
-    color 150ms cubic-bezier(0.4, 0, 0.2, 1),
-    border-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
-}
-/* The catalog toggle is medium; category shortcuts keep the regular weight. */
-.navigationButton[data-catalog-toggle] {
-  font-weight: 500;
-}
-.navigationButton:focus-visible,
-.navigationButton.active {
-  border-bottom-color: currentColor;
-  outline: none;
-}
-@media (hover: hover) {
-  .navigationButton:hover {
-    border-bottom-color: currentColor;
-    outline: none;
-  }
-}
-.navigationButton:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-.navigationButton svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-}
-.navigationButton .shortcutChevron {
-  width: 0.875rem;
-  height: 0.875rem;
-  opacity: 0.6;
-}
-.shortcutImage {
-  width: 1.5rem;
-  height: 1.5rem;
-  flex-shrink: 0;
-}
-.truncate {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.emptyCaption {
-  margin: 0;
-  padding-block: 0.75rem;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  opacity: 0.7;
-}
-.panel {
-  z-index: 40;
-  overflow: hidden;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-}
-.panelHeader {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  gap: 0.75rem;
-  max-width: 90rem;
-  margin: 0 auto;
-  padding: 0.75rem 1rem;
-}
-.iconButton {
-  display: grid;
-  width: 2.5rem;
-  height: 2.5rem;
-  flex-shrink: 0;
-  place-items: center;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 1.25rem;
-  line-height: calc(1.75 / 1.25);
-  cursor: pointer;
-}
-.iconButton:focus-visible {
-  background: var(--orionplace-hover);
-  outline: none;
-}
-@media (hover: hover) {
-  .iconButton:hover {
-    background: var(--orionplace-hover);
-    outline: none;
-  }
-}
-.iconButton svg {
-  width: 1rem;
-  height: 1rem;
-}
-.breadcrumbs {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 0.25rem 0.5rem;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.breadcrumbs a,
-.breadcrumbs button {
-  max-width: 100%;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  border-bottom: 1px solid transparent;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: inherit;
-  letter-spacing: inherit;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  text-transform: inherit;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.breadcrumbs a:focus-visible,
-.breadcrumbs button:focus-visible {
-  border-bottom-color: currentColor;
-  outline: none;
-}
-@media (hover: hover) {
-  .breadcrumbs a:hover,
-  .breadcrumbs button:hover {
-    border-bottom-color: currentColor;
-    outline: none;
-  }
-}
-/* The catalog root is muted and darkens on hover, as on Nuxt and Svelte. */
-.breadcrumbs > button {
-  border-bottom: 0;
-  color: var(--orionplace-muted);
-}
-.breadcrumbs > button:focus-visible {
-  color: var(--orionplace-text);
-}
-@media (hover: hover) {
-  .breadcrumbs > button:hover {
-    color: var(--orionplace-text);
-  }
-}
-.crumb > [aria-hidden='true'] {
-  color: var(--orionplace-muted);
-}
-.crumb {
-  display: inline-flex;
-  min-width: 0;
-  align-items: center;
-  gap: 0.5rem;
-}
-.panelBody {
-  display: grid;
-  max-width: 90rem;
-  max-height: min(40rem, 70vh);
-  min-width: 0;
-  margin: 0 auto;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  border-top: 1px solid var(--orionplace-border);
-}
-.categoryNavigation {
-  min-width: 0;
-  padding-block: 0.75rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-.categoryNavigation ul {
-  display: grid;
-  gap: 0;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.categoryNavigation li {
-  min-width: 0;
-}
-.categoryButton {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  gap: 0.75rem;
-  width: 100%;
-  min-width: 0;
-  min-height: 2.75rem;
-  padding: 0.5rem 1rem;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-align: left;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-.categoryButton span:first-of-type {
-  min-width: 0;
-  flex: 1;
-  overflow-wrap: anywhere;
-}
-.categoryButton svg {
-  width: 1rem;
-  height: 1rem;
-  flex-shrink: 0;
-  color: var(--orionplace-muted);
-}
-.categoryButton:focus-visible,
-.categoryButton[aria-current="true"] {
-  background: var(--orionplace-hover);
-  outline: none;
-}
-@media (hover: hover) {
-  .categoryButton:hover {
-    background: var(--orionplace-hover);
-    outline: none;
-  }
-}
-.categoryImage {
-  width: 2rem;
-  height: 2rem;
-  flex-shrink: 0;
-}
-.representativeArea {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-  gap: 1.25rem;
-  padding: 1.25rem 1rem;
-}
-.representativeHeader {
-  display: flex;
-  width: 100%;
-  max-width: 45rem;
-  margin: 0;
-  flex-wrap: wrap;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-.representativeHeader p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.representativeHeader h2 {
-  margin: 0.25rem 0 0;
-  overflow-wrap: anywhere;
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-.representativeHeader a,
-.representativeHeader button {
-  padding: 0;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-decoration: none;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-.representativeHeader a:focus-visible,
-.representativeHeader button:focus-visible {
-  opacity: 0.7;
-  outline: none;
-}
-@media (hover: hover) {
-  .representativeHeader a:hover,
-  .representativeHeader button:hover {
-    opacity: 0.7;
-    outline: none;
-  }
-}
-.representatives {
-  display: grid;
-  width: 100%;
-  max-width: 45rem;
-  min-width: 0;
-  margin: 0;
-  grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 1rem) / 2)));
-  align-content: start;
-  justify-content: start;
-  gap: 2rem 1rem;
-}
-/*
- * From 592px of the menu's own width the representatives take 22rem
- * columns and line up their name, price and choices row by row.
- */
-@container (min-width: 592px) {
-  .representatives {
-    grid-template-columns: repeat(auto-fit, minmax(0, 22rem));
-  }
-  .representatives > [data-product-layout='compact'] {
-    grid-row: span 3;
-    grid-template-rows: subgrid;
-    align-content: normal;
-  }
-}
-@container header (min-width: 0px) {
-  .panel {
-    position: absolute;
-    inset-inline: 0;
-    top: 100%;
-    border-inline: 0;
-    border-top: 0;
-  }
-}
-@container (min-width: 600px) {
-  .panelBody {
-    grid-template-columns: minmax(15rem, 0.3fr) minmax(0, 1fr);
-  }
-  .categoryNavigation {
-    border-right: 1px solid var(--orionplace-border);
-    border-bottom: 0;
-  }
-  .representativeArea {
-    padding-inline: 1.5rem;
-  }
-}
-@container (min-width: 1024px) {
-  .panelHeader {
-    padding-inline: 2rem;
-  }
-  .panelBody {
-    padding-inline: 1rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .navigationButton {
-    transition: none;
-  }
-}