orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/manufacturers/ManufacturerIndex.module.css

@@ -0,0 +1,271 @@
+.root {
+  display: grid;
+  min-width: 0;
+  gap: 2rem;
+  color: var(--orionplace-text);
+  container-type: inline-size;
+}
+
+.title,
+.group header {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.root h1,
+.root h2,
+.root h3,
+.root h4 {
+  margin: 0;
+  font-size: 1.125rem;
+  font-weight: 500;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.root h1 {
+  font-size: 1.5rem;
+}
+
+/* The index's own width, as the other page titles. */
+@container (min-width: 592px) {
+  .root h1 {
+    font-size: 1.875rem;
+  }
+}
+
+.root header > span {
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.root button {
+  padding: 0.5rem 0.75rem;
+  border: 1px solid transparent;
+  border-radius: 0;
+  color: inherit;
+  background: transparent;
+  font: inherit;
+  cursor: pointer;
+}
+
+.root button:focus-visible {
+  background: var(--orionplace-hover);
+  outline: none;
+}
+
+@media (hover: hover) {
+  .root button:hover {
+    background: var(--orionplace-hover);
+    outline: none;
+  }
+}
+
+.root button:disabled {
+  cursor: default;
+  opacity: 0.5;
+}
+
+.state {
+  display: grid;
+  min-height: 6.25rem;
+  place-content: center;
+  justify-items: center;
+  gap: 1rem;
+  margin: 0;
+  color: var(--orionplace-muted);
+  text-align: center;
+}
+
+.state p {
+  margin: 0;
+}
+
+.state button {
+  min-height: 2.75rem;
+  padding: 0 1.5rem;
+  border-color: var(--orionplace-text);
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.error {
+  color: var(--orionplace-danger);
+}
+
+.logos {
+  display: grid;
+  max-height: 15rem;
+  grid-template-columns: repeat(8, minmax(0, 1fr));
+  gap: 0.5rem;
+  overflow: auto;
+}
+
+.logos button {
+  display: grid;
+  min-width: 0;
+  height: auto;
+  place-items: center;
+  aspect-ratio: 1 / 1;
+  padding: 1rem;
+  border-color: var(--orionplace-border);
+  background: var(--orionplace-surface);
+}
+
+.logos button:focus-visible {
+  border-color: var(--orionplace-text);
+  background: var(--orionplace-surface);
+}
+
+@media (hover: hover) {
+  .logos button:hover {
+    border-color: var(--orionplace-text);
+    background: var(--orionplace-surface);
+  }
+}
+
+.logos img,
+.logos [data-image-placeholder] {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+}
+
+.alphabet {
+  display: grid;
+  gap: 0.75rem;
+}
+
+.modes,
+.letters {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+}
+
+.modes button {
+  min-height: 2.25rem;
+  padding: 0 0.75rem;
+  border-color: var(--orionplace-border);
+  font-size: 0.75rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.modes button[aria-pressed='true'] {
+  border-color: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+  background: var(--orionplace-accent);
+}
+
+.letters button {
+  display: inline-flex;
+  width: 2.25rem;
+  height: 2.25rem;
+  align-items: center;
+  justify-content: center;
+  padding: 0;
+  border-color: var(--orionplace-border);
+  font-size: 0.8125rem;
+  font-weight: 500;
+  text-transform: uppercase;
+}
+
+.letters button:focus-visible {
+  border-color: var(--orionplace-text);
+  background: var(--orionplace-surface);
+}
+
+@media (hover: hover) {
+  .letters button:hover {
+    border-color: var(--orionplace-text);
+    background: var(--orionplace-surface);
+  }
+}
+
+.group {
+  display: grid;
+  gap: 0.75rem;
+  padding-top: 1.25rem;
+  border-top: 1px solid var(--orionplace-border);
+}
+
+.group header > button {
+  margin-left: auto;
+  padding: 0 0 0.125rem;
+  border: 0;
+  border-bottom: 1px solid currentColor;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.group header > button:focus-visible,
+.group li button:focus-visible {
+  color: var(--orionplace-muted);
+  background: transparent;
+}
+
+@media (hover: hover) {
+  .group header > button:hover,
+  .group li button:hover {
+    color: var(--orionplace-muted);
+    background: transparent;
+  }
+}
+
+.group ul {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+  gap: 0 0.75rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.group li,
+.group li button {
+  min-width: 0;
+  width: 100%;
+  box-sizing: border-box;
+  overflow-wrap: anywhere;
+  text-align: left;
+  font-size: 0.875rem;
+}
+
+.group li button {
+  padding: 0.5rem 0;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@container (max-width: 56.25rem) {
+  .logos {
+    grid-template-columns: repeat(6, minmax(0, 1fr));
+  }
+}
+
+@container (max-width: 38.75rem) {
+  .logos {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+
+  .group ul {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}

package/templates/components/orionplace/manufacturers/ManufacturerIndex.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type {
+  IManufacturerIndexState,
+  TManufacturerAlphabet,
+} from '@/interfaces/orionplace/catalog/ICatalogDirectory';
+import {
+  manufacturerAlphabet,
+  manufacturerIndexGroups,
+  manufacturerIndexLabels,
+  manufacturerIndexLogos,
+  manufacturerIndexTotal,
+} from '@/lib/orionplace/manufacturerIndex';
+import { safePublicUrl } from '@/lib/orionplace/presentation';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import styles from './ManufacturerIndex.module.css';
+
+export interface ManufacturerIndexProps {
+  state: IManufacturerIndexState;
+  disabled?: boolean;
+  headingLevel?: 1 | 2 | 3;
+  onLoad?: () => void;
+  onRetry?: () => void;
+  onSelectAlphabet?: (alphabet: TManufacturerAlphabet) => void;
+  onSelectLetter?: (letter: string) => void;
+  onSelectManufacturer?: (manufacturerId: number) => void;
+}
+
+const modes = [
+  { value: 'en', label: 'A–Z' },
+  { value: 'ru', label: 'А–Я' },
+  { value: 'num', label: '0–9' },
+] as const;
+
+export function ManufacturerIndex({
+  state,
+  disabled = false,
+  headingLevel = 3,
+  onLoad,
+  onRetry,
+  onSelectAlphabet,
+  onSelectLetter,
+  onSelectManufacturer,
+}: ManufacturerIndexProps) {
+  const locale = useOrionplaceSelections((snapshot) => snapshot.localeCode);
+  const labels = manufacturerIndexLabels(locale);
+  const [mode, setMode] = useState<TManufacturerAlphabet>('en');
+  const alphabet = manufacturerAlphabet(mode);
+  const groups = useMemo(
+    () => manufacturerIndexGroups(state.groups, locale),
+    [state.groups, locale],
+  );
+  const visibleGroups = groups.filter((group) =>
+    alphabet.includes(group.letter),
+  );
+  const logos = useMemo(
+    () => manufacturerIndexLogos(groups, locale),
+    [groups, locale],
+  );
+  const total = manufacturerIndexTotal(state.groups);
+  const Heading = `h${headingLevel}` as 'h1' | 'h2' | 'h3';
+  const GroupHeading = `h${headingLevel + 1}` as 'h2' | 'h3' | 'h4';
+
+  function selectAlphabet(value: TManufacturerAlphabet) {
+    if (disabled) {
+      return;
+    }
+    setMode(value);
+    onSelectAlphabet?.(value);
+  }
+
+  return (
+    <section
+      className={styles.root}
+      aria-busy={state.pending}
+      data-feature-part="ManufacturerIndex"
+    >
+      <header className={styles.title}>
+        <Heading>{labels.title}</Heading>
+        {state.loaded ? (
+          <span aria-label={`${labels.total}: ${total}`}>{total}</span>
+        ) : null}
+      </header>
+
+      {state.pending ? (
+        <p className={`${styles.state} op-feature-loading`} role="status">
+          <span className={styles.screenReaderOnly}>{labels.loading}</span>
+        </p>
+      ) : state.error ? (
+        <div className={styles.state} role="alert">
+          <p className={styles.error}>{state.error}</p>
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={() => onRetry?.()}
+          >
+            {labels.retry}
+          </button>
+        </div>
+      ) : !state.loaded ? (
+        <div className={styles.state}>
+          <button
+            type="button"
+            disabled={disabled}
+            onClick={() => onLoad?.()}
+          >
+            {labels.load}
+          </button>
+        </div>
+      ) : !groups.length ? (
+        <OrionplaceEmptyState
+          role="status"
+          kind="search"
+          message={labels.empty}
+        />
+      ) : (
+        <>
+          {logos.length ? (
+            <div className={styles.logos} aria-label={labels.logos}>
+              {logos.map((manufacturer) => (
+                <button
+                  key={manufacturer.id}
+                  type="button"
+                  title={manufacturer.name}
+                  aria-label={manufacturer.name}
+                  disabled={disabled}
+                  onClick={() => onSelectManufacturer?.(manufacturer.id)}
+                >
+                  <OrionplaceImage
+                    src={
+                      safePublicUrl(manufacturer.small_image) ||
+                      manufacturer.image
+                    }
+                    alt={manufacturer.name}
+                    width={160}
+                    height={160}
+                  />
+                </button>
+              ))}
+            </div>
+          ) : null}
+
+          <nav className={styles.alphabet} aria-label={labels.alphabet}>
+            <div className={styles.modes}>
+              {modes.map((item) => (
+                <button
+                  key={item.value}
+                  type="button"
+                  aria-pressed={mode === item.value}
+                  disabled={disabled}
+                  onClick={() => selectAlphabet(item.value)}
+                >
+                  {item.label}
+                </button>
+              ))}
+            </div>
+            <div className={styles.letters}>
+              {alphabet.map((letter) => (
+                <button
+                  key={letter}
+                  type="button"
+                  disabled={disabled}
+                  onClick={() => onSelectLetter?.(letter)}
+                >
+                  {letter}
+                </button>
+              ))}
+            </div>
+          </nav>
+
+          {!visibleGroups.length ? (
+            <OrionplaceEmptyState
+              role="status"
+              kind="search"
+              size="compact"
+              message={labels.emptyAlphabet}
+            />
+          ) : null}
+
+          {visibleGroups.map((group) => (
+            <section key={group.letter} className={styles.group}>
+              <header>
+                <GroupHeading>{group.letter}</GroupHeading>
+                <span>{group.c_manufactures}</span>
+                <button
+                  type="button"
+                  disabled={disabled}
+                  aria-label={`${labels.allOn} ${group.letter}`}
+                  onClick={() => onSelectLetter?.(group.letter)}
+                >
+                  {labels.all} <span aria-hidden="true">→</span>
+                </button>
+              </header>
+              <ul>
+                {group.manufactures.map((manufacturer) => (
+                  <li key={manufacturer.id}>
+                    <button
+                      type="button"
+                      disabled={disabled}
+                      onClick={() =>
+                        onSelectManufacturer?.(manufacturer.id)
+                      }
+                    >
+                      {manufacturer.name}
+                    </button>
+                  </li>
+                ))}
+              </ul>
+            </section>
+          ))}
+        </>
+      )}
+    </section>
+  );
+}

package/templates/components/orionplace/manufacturers/StorefrontManufacturers.README.md

@@ -0,0 +1,122 @@
+# StorefrontManufacturers · React
+
+## English
+
+`StorefrontManufacturers` combines the alphabetical index, a complete
+letter-prefix list and manufacturer details. The host implements two typed
+actions so a server page and a browser use the same API boundary.
+
+`onLoadIndex` receives `manufactures_manufactures_list_get`,
+`{ filters: {} }` and an `AbortSignal`. Its returned groups appear in
+`ManufacturerIndex`. Selecting a letter calls `onSearch` with
+`manufactures_manufactures_get`, `filters.name_starts`, page one and the
+component's page size. The search field changes that prefix and also returns to
+page one. Pagination sends the requested page while retaining the current
+prefix.
+
+Selecting a manufacturer calls `onSearch` with `filters.id` and shows the
+returned name, image and localized `brand_pitch` as plain text. The product link
+defaults to `/browse?manufacturer=<id>&locale=<locale>`. A normal click calls
+`onSelectProducts(manufacturer)` when supplied; modifier clicks retain browser
+navigation. Back returns to the index and loads it if the page opened directly
+on a manufacturer.
+
+With `onNavigate(view, replace)` a letter, a manufacturer and Back open their
+own address instead (`?prefix=D`, `?manufacturer=5`, the index); a name search
+replaces the letter's address. The caller remounts the component with the
+view's props, so the browser's Back steps back through the views.
+
+`initialIndexGroups`, `initialManufacturers` and `initialPagination` provide
+server-rendered data. `manufacturerId` or `initialPrefix` opens the matching
+browse view. When its initial data is absent, `loadOnMount` starts the relevant
+request after hydration; it defaults to `true`. Initial errors remain visible
+without an automatic duplicate request. A new request cancels the earlier
+request in the same view, and unmounting cancels both request types.
+
+Source is maintained in
+`components/orionplace/manufacturers/StorefrontManufacturers.tsx`; request and
+response interfaces are in
+`interfaces/orionplace/catalog/ICatalogDirectory.ts`.
+
+### Props
+
+| Prop                                                                                                                    | Meaning                                                                                                   |
+| ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
+| `manufacturerId?: number`                                                                                               | ID of the manufacturer handled by StorefrontManufacturers.                                                |
+| `initialPrefix?: string`                                                                                                | Server-provided initial prefix used for the first render and hydration.                                   |
+| `initialIndexGroups?: IManufacturerIndexGroup[]`                                                                        | Server-provided initial index groups used for the first render and hydration.                             |
+| `initialManufacturers?: IManufacturer[]`                                                                                | Server-provided initial manufacturers used for the first render and hydration.                            |
+| `initialPagination?: Partial<IApiPagination>`                                                                           | Server-provided initial pagination used for the first render and hydration.                               |
+| `initialIndexError?: string`                                                                                            | Server-provided initial index error used for the first render and hydration.                              |
+| `initialBrowseError?: string`                                                                                           | Server-provided initial browse error used for the first render and hydration.                             |
+| `loadOnMount?: boolean`                                                                                                 | Starts the load callback after hydration when server data was not supplied.                               |
+| `disabled?: boolean`                                                                                                    | Disables the component controls and prevents new actions.                                                 |
+| `productsHref?: (manufacturerId: number, locale: string) => string`                                                     | Builds the products destination from the callback arguments.                                              |
+| `onLoadIndex: (action: ManufacturerIndexLoadAction) => Promise<IManufacturerIndexGroup[]> \| IManufacturerIndexGroup[]` | Called when the manufacturer index must be loaded. The callback payload is shown in its type.             |
+| `onSearch: (action: ManufacturerSearchAction) => Promise<ManufacturerSearchData> \| ManufacturerSearchData`             | Called when the visitor submits search text. The callback payload is shown in its type.                   |
+| `onSelectProducts?: (manufacturer: IManufacturer) => void`                                                              | Called when the visitor opens products for the current record. The callback payload is shown in its type. |
+| `onNavigate?: (view: ManufacturerView, replace: boolean) => void`                                                       | Opens a letter, a manufacturer or the index by its address; the caller remounts the component.            |
+| `onIndexChange?: (groups: IManufacturerIndexGroup[]) => void`                                                           | Called when the manufacturer index data changes. The callback payload is shown in its type.               |
+| `onResultsChange?: (data: ManufacturerSearchData) => void`                                                              | Called when the confirmed result data changes. The callback payload is shown in its type.                 |
+
+## Русский
+
+`StorefrontManufacturers` объединяет алфавитный указатель, полный
+список на выбранную букву и данные одного производителя. Родитель
+выполняет два типизированных действия, чтобы серверная страница и
+браузер использовали один контракт API.
+
+`onLoadIndex` получает `manufactures_manufactures_list_get`,
+`{ filters: {} }` и `AbortSignal`. Возвращённые группы показывает
+`ManufacturerIndex`. Буква вызывает `onSearch` с
+`manufactures_manufactures_get`, `filters.name_starts`, первой страницей и
+размером страницы компонента. Поиск меняет этот префикс и также
+возвращается на первую страницу. Пагинация передаёт нужную страницу и
+сохраняет текущий префикс.
+
+Выбор производителя вызывает `onSearch` с `filters.id` и показывает
+возвращённые название, изображение и локализованный `brand_pitch` без
+HTML-разметки. Ссылка на товары по умолчанию ведёт на
+`/browse?manufacturer=<id>&locale=<locale>`. Обычный щелчок вызывает
+`onSelectProducts(manufacturer)`, если этот обработчик передан. Щелчок с
+модификатором сохраняет переход браузера. Кнопка «Назад» открывает
+указатель и загружает его, если страница сразу открылась для одного
+производителя.
+
+С `onNavigate(view, replace)` буква, производитель и «Назад» открывают свой
+адрес (`?prefix=D`, `?manufacturer=5`, указатель); поиск по названию заменяет
+адрес буквы. Вызывающий пересоздаёт компонент с параметрами вида, поэтому
+«Назад» в браузере проходит по видам обратно.
+
+`initialIndexGroups`, `initialManufacturers` и `initialPagination` передают
+данные для серверного HTML. `manufacturerId` или `initialPrefix` сразу
+открывает соответствующий список. Если начальных данных нет, `loadOnMount`
+запускает нужный запрос после гидратации; по умолчанию он включён.
+Начальная ошибка остаётся видимой без повторного автоматического запроса.
+Новый запрос отменяет предыдущий в том же режиме, а размонтирование
+отменяет оба типа запросов.
+
+Исходный файл:
+`components/orionplace/manufacturers/StorefrontManufacturers.tsx`; интерфейсы запросов
+и ответов находятся в `interfaces/orionplace/catalog/ICatalogDirectory.ts`.
+
+### Свойства
+
+| Свойство                                                                                                                | Назначение                                                                                            |
+| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `manufacturerId?: number`                                                                                               | ID производителя, с которым работает StorefrontManufacturers.                                         |
+| `initialPrefix?: string`                                                                                                | Начальное значение префикса, полученное на сервере для первого рендера и гидратации.                  |
+| `initialIndexGroups?: IManufacturerIndexGroup[]`                                                                        | Начальное значение групп указателя, полученное на сервере для первого рендера и гидратации.           |
+| `initialManufacturers?: IManufacturer[]`                                                                                | Начальное значение производителей, полученное на сервере для первого рендера и гидратации.            |
+| `initialPagination?: Partial<IApiPagination>`                                                                           | Начальное значение пагинации, полученное на сервере для первого рендера и гидратации.                 |
+| `initialIndexError?: string`                                                                                            | Начальное значение ошибки указателя, полученное на сервере для первого рендера и гидратации.          |
+| `initialBrowseError?: string`                                                                                           | Начальное значение ошибки поиска, полученное на сервере для первого рендера и гидратации.             |
+| `loadOnMount?: boolean`                                                                                                 | Запускает загрузку после гидратации, если серверные данные не переданы.                               |
+| `disabled?: boolean`                                                                                                    | Блокирует элементы компонента и новые действия.                                                       |
+| `productsHref?: (manufacturerId: number, locale: string) => string`                                                     | Строит адрес ссылки товаров из аргументов обработчика.                                                |
+| `onLoadIndex: (action: ManufacturerIndexLoadAction) => Promise<IManufacturerIndexGroup[]> \| IManufacturerIndexGroup[]` | Вызывается, когда нужно загрузить указатель производителей. Данные обработчика указаны в его типе.    |
+| `onSearch: (action: ManufacturerSearchAction) => Promise<ManufacturerSearchData> \| ManufacturerSearchData`             | Вызывается, когда покупатель отправляет поисковый текст. Данные обработчика указаны в его типе.       |
+| `onSelectProducts?: (manufacturer: IManufacturer) => void`                                                              | Вызывается, когда покупатель открывает товары текущей записи. Данные обработчика указаны в его типе.  |
+| `onNavigate?: (view: ManufacturerView, replace: boolean) => void`                                                       | Открывает букву, производителя или указатель по адресу; вызывающий пересоздаёт компонент.             |
+| `onIndexChange?: (groups: IManufacturerIndexGroup[]) => void`                                                           | Вызывается, когда изменяются данные указателя производителей. Данные обработчика указаны в его типе.  |
+| `onResultsChange?: (data: ManufacturerSearchData) => void`                                                              | Вызывается, когда изменяются подтверждённые данные результата. Данные обработчика указаны в его типе. |