orionplace-react 0.7.8 → 0.8.0

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

@@ -1,83 +0,0 @@
-# ManufacturerIndex · React
-
-## English
-
-`ManufacturerIndex` displays manufacturer groups that the application already
-loaded. `state.pending`, `state.error`, `state.loaded` and `state.groups`
-distinguish loading, failure, the initial Load action and a confirmed empty
-result. Load and Retry call `onLoad` and `onRetry`; this component does not make
-an API request.
-
-The initial alphabet is A–Z. Selecting A–Z, А–Я or 0–9 filters the loaded
-groups in the browser and calls `onSelectAlphabet` with `en`, `ru` or `num`.
-Selecting a letter calls `onSelectLetter` with that character. Selecting a logo
-or name calls `onSelectManufacturer` with its numeric manufacturer ID. The
-application can use those two selections with
-`manufactures_manufactures_get`; the component does not navigate.
-
-Groups and manufacturer names are sorted for the current storefront locale.
-The displayed total adds each group's `c_manufactures`, because a group's
-preview can contain fewer names than its total. Duplicate logo records are
-shown once by manufacturer ID. A logo uses `small_image`, then `image`, and the
-shared placeholder when no safe image works. Images reserve square space while
-loading. `disabled` blocks every action, and `headingLevel` defaults to `3`.
-
-Source is maintained in
-`components/orionplace/manufacturers/ManufacturerIndex.tsx`; its state and
-manufacturer records are defined in
-`interfaces/orionplace/catalog/ICatalogDirectory.ts`.
-
-### Props
-
-| Prop                                                           | Meaning                                                                                               |
-| -------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- |
-| `state: IManufacturerIndexState`                               | Current controlled data, loading state and request errors.                                            |
-| `disabled?: boolean`                                           | Disables the component controls and prevents new actions.                                             |
-| `headingLevel?: 1 \| 2 \| 3`                                   | HTML heading level used for the component title.                                                      |
-| `onLoad?: () => void`                                          | Called when the component needs its primary data. The callback has no payload.                        |
-| `onRetry?: () => void`                                         | Called when the visitor retries the failed request. The callback has no payload.                      |
-| `onSelectAlphabet?: (alphabet: TManufacturerAlphabet) => void` | Called when the visitor changes the manufacturer alphabet. The callback payload is shown in its type. |
-| `onSelectLetter?: (letter: string) => void`                    | Called when the visitor chooses a manufacturer letter. The callback payload is shown in its type.     |
-| `onSelectManufacturer?: (manufacturerId: number) => void`      | Called when the visitor chooses a manufacturer. The callback payload is shown in its type.            |
-
-## Русский
-
-`ManufacturerIndex` показывает группы производителей, которые
-приложение уже загрузило. `state.pending`, `state.error`, `state.loaded`
-и `state.groups` разделяют загрузку, ошибку, начальную кнопку
-«Загрузить» и подтверждённый пустой ответ. Кнопки загрузки и
-повтора вызывают `onLoad` и `onRetry`; сам компонент не отправляет
-запросы API.
-
-При открытии выбран алфавит A–Z. Кнопки A–Z, А–Я и 0–9
-фильтруют уже загруженные группы в браузере и вызывают
-`onSelectAlphabet` с `en`, `ru` или `num`. Буква передаёт символ в
-`onSelectLetter`, а логотип или название — числовой ID производителя
-в `onSelectManufacturer`. Приложение может передать этот выбор в
-`manufactures_manufactures_get`; компонент не меняет страницу.
-
-Группы и названия сортируются для текущего языка магазина. Общее
-число складывает `c_manufactures` всех групп, так как в предварительном
-списке группы может быть меньше названий. Повторный ID даёт один
-логотип. Для него используется `small_image`, затем `image`, а при
-отсутствии доступного изображения — общая заглушка. Для изображений
-зарезервирована квадратная область. `disabled` блокирует все действия,
-а `headingLevel` по умолчанию равен `3`.
-
-Исходный файл:
-`components/orionplace/manufacturers/ManufacturerIndex.tsx`; состояние и
-запись производителя описаны в
-`interfaces/orionplace/catalog/ICatalogDirectory.ts`.
-
-### Свойства
-
-| Свойство                                                       | Назначение                                                                                         |
-| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
-| `state: IManufacturerIndexState`                               | Текущие управляемые данные, загрузка и ошибки запросов.                                            |
-| `disabled?: boolean`                                           | Блокирует элементы компонента и новые действия.                                                    |
-| `headingLevel?: 1 \| 2 \| 3`                                   | Уровень HTML-заголовка названия компонента.                                                        |
-| `onLoad?: () => void`                                          | Вызывается, когда компоненту нужны основные данные. Обработчик не получает данные.                 |
-| `onRetry?: () => void`                                         | Вызывается, когда покупатель повторяет неудачный запрос. Обработчик не получает данные.            |
-| `onSelectAlphabet?: (alphabet: TManufacturerAlphabet) => void` | Вызывается, когда покупатель меняет алфавит производителей. Данные обработчика указаны в его типе. |
-| `onSelectLetter?: (letter: string) => void`                    | Вызывается, когда покупатель выбирает букву производителей. Данные обработчика указаны в его типе. |
-| `onSelectManufacturer?: (manufacturerId: number) => void`      | Вызывается, когда покупатель выбирает производителя. Данные обработчика указаны в его типе.        |

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

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

@@ -1,218 +0,0 @@
-'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>
-  );
-}