orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/locale/MainLanguageSwitcher.tsx

@@ -0,0 +1,387 @@
+'use client';
+
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import {
+  useOrionplaceSelections,
+  useOrionplaceSelectionsStore,
+} from '@/providers/OrionplaceProvider';
+import type { IAppLoadCommonLocale } from '@/interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonLocale';
+import {
+  getAvailableNestedValueFromObject,
+  safePublicUrl,
+} from '@/lib/orionplace/presentation';
+import styles from './MainLanguageSwitcher.module.css';
+
+export interface MainLanguageSwitcherProps {
+  label?: string;
+  disabled?: boolean;
+  codeOnly?: boolean;
+  onChange?: (locale: IAppLoadCommonLocale) => void;
+}
+
+const NAVIGATION = [
+  'ArrowDown',
+  'ArrowUp',
+  'Home',
+  'End',
+  'PageDown',
+  'PageUp',
+];
+
+export function MainLanguageSwitcher({
+  label = 'Language',
+  disabled = false,
+  codeOnly = false,
+  onChange,
+}: MainLanguageSwitcherProps) {
+  const selections                    = useOrionplaceSelections((state) => state);
+  const store                         = useOrionplaceSelectionsStore();
+  const id                            = useId();
+  const root                          = useRef<HTMLDivElement>(null);
+  const trigger                       = useRef<HTMLButtonElement>(null);
+  const listbox                       = useRef<HTMLUListElement>(null);
+  const search                        = useRef('');
+  const lastSearchAt                  = useRef(0);
+  const [open, setOpen]               = useState(false);
+  const [highlighted, setHighlighted] = useState(0);
+  const [failedFlags, setFailedFlags] = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+  const [placement, setPlacement]     = useState({
+    above: false,
+    right: false,
+    width: 320,
+    height: 256,
+  });
+  const options                       = useMemo(() => {
+    const languages = Object.entries(selections.init?.locale ?? {}).flatMap(
+      ([key, locale]) => {
+        const code = locale.code?.trim() || key;
+        const name =
+          getAvailableNestedValueFromObject(
+            locale.locale,
+            selections.localeCode,
+            'name',
+          )?.trim() ||
+          locale.human_name?.trim() ||
+          code.toUpperCase();
+        const flag = safePublicUrl(locale.flag_img);
+        return code ? [{ code, name, flag, locale }] : [];
+      },
+    );
+    return languages.filter(
+      (option, index) =>
+        languages.findIndex((item) => item.code === option.code) === index,
+    );
+  }, [selections.init?.locale, selections.localeCode]);
+  const active                        =
+    options.find((option) => option.code === selections.localeCode) ??
+    options[0];
+  const selectedCode                  = active?.code ?? '';
+  const isDisabled                    = disabled || options.length === 0;
+  let caption                         = '—';
+  if (active) {
+    caption = codeOnly
+      ? active.code.toUpperCase()
+      : `${active.name} · ${active.code.toUpperCase()}`;
+  }
+
+  useEffect(() => {
+    setOpen(false);
+    search.current = '';
+  }, [options, isDisabled]);
+
+  useEffect(() => {
+    function outside(event: PointerEvent) {
+      if (
+        event.target instanceof Node &&
+        !root.current?.contains(event.target)
+      ) {
+        closeMenu();
+      }
+    }
+    document.addEventListener('pointerdown', outside, true);
+    return () => document.removeEventListener('pointerdown', outside, true);
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const menu   = listbox.current;
+    const option = menu?.children.item(highlighted) as HTMLElement | null;
+    if (!menu || !option) {
+      return;
+    }
+    const top    = option.offsetTop;
+    const bottom = top + option.offsetHeight;
+    if (top < menu.scrollTop) {
+      menu.scrollTop = top;
+    } else if (bottom > menu.scrollTop + menu.clientHeight) {
+      menu.scrollTop = bottom - menu.clientHeight;
+    }
+  }, [open, highlighted]);
+
+  function closeMenu() {
+    setOpen(false);
+    search.current = '';
+  }
+
+  function openMenu() {
+    if (isDisabled) {
+      return;
+    }
+    const bounds = trigger.current?.getBoundingClientRect();
+    if (bounds) {
+      const below      = window.innerHeight - bounds.bottom - 8;
+      const above      = bounds.top - 8;
+      const left       = bounds.right - 8;
+      const right      = window.innerWidth - bounds.left - 8;
+      const opensAbove = below < 256 && above > below;
+      setPlacement({
+        above: opensAbove,
+        right: left > right,
+        width: Math.max(bounds.width, left, right),
+        height: Math.max(48, Math.min(256, opensAbove ? above : below)),
+      });
+    }
+    setHighlighted(
+      Math.max(
+        0,
+        options.findIndex((option) => option.code === selectedCode),
+      ),
+    );
+    setOpen(true);
+  }
+
+  function selectLocale(index: number) {
+    const option = options[index];
+    if (!option || isDisabled) {
+      return;
+    }
+    store.getState().setLocale(option.code);
+    onChange?.(option.locale);
+    closeMenu();
+  }
+
+  function moveHighlight(index: number) {
+    setHighlighted(Math.max(0, Math.min(index, options.length - 1)));
+  }
+
+  function findByTyping(character: string, position: number) {
+    const now            = Date.now();
+    search.current       =
+      now - lastSearchAt.current < 700 ? search.current + character : character;
+    lastSearchAt.current = now;
+    const repeated       = [...search.current].every(
+      (letter) => letter === search.current[0],
+    );
+    const query          = repeated ? character : search.current;
+    const start          = repeated ? position + 1 : position;
+    for (let offset = 0; offset < options.length; offset += 1) {
+      const index  = (start + offset) % options.length;
+      const option = options[index];
+      if (
+        [option.name, option.code].some((text) =>
+          text.toLowerCase().startsWith(query),
+        )
+      ) {
+        moveHighlight(index);
+        return;
+      }
+    }
+  }
+
+  function onKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
+    if (isDisabled || event.ctrlKey || event.metaKey) {
+      return;
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      closeMenu();
+      return;
+    }
+    if (event.key === 'Tab') {
+      if (open) {
+        selectLocale(highlighted);
+      }
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (open) {
+        selectLocale(highlighted);
+      } else {
+        openMenu();
+      }
+      return;
+    }
+    const initial  = Math.max(
+      0,
+      options.findIndex((option) => option.code === selectedCode),
+    );
+    const position = open ? highlighted : initial;
+    if (NAVIGATION.includes(event.key)) {
+      event.preventDefault();
+      if (!open) {
+        openMenu();
+      }
+      switch (event.key) {
+        case 'Home':
+          moveHighlight(0);
+          break;
+        case 'End':
+          moveHighlight(options.length - 1);
+          break;
+        case 'ArrowDown':
+          if (open) {
+            moveHighlight(position + 1);
+          }
+          break;
+        case 'ArrowUp':
+          if (open) {
+            moveHighlight(position - 1);
+          }
+          break;
+        case 'PageDown':
+          moveHighlight(position + 10);
+          break;
+        case 'PageUp':
+          moveHighlight(position - 10);
+          break;
+      }
+      return;
+    }
+    if (event.key.length === 1 && !event.altKey) {
+      event.preventDefault();
+      if (!open) {
+        openMenu();
+      }
+      findByTyping(event.key.toLowerCase(), position);
+    }
+  }
+
+  function toggleMenu() {
+    if (open) {
+      closeMenu();
+    } else {
+      openMenu();
+    }
+  }
+
+  function flagImage(flag?: string) {
+    if (!flag || failedFlags.has(flag)) {
+      return null;
+    }
+    return (
+      <img
+        src={flag}
+        alt=""
+        width={22}
+        height={16}
+        className={styles.flag}
+        onError={() =>
+          setFailedFlags((previous) => new Set(previous).add(flag))
+        }
+      />
+    );
+  }
+
+  return (
+    <div
+      ref={root}
+      className={`${styles.root} ${codeOnly ? styles.compact : ''}`}
+    >
+      <label
+        id={`${id}-label`}
+        htmlFor={`${id}-control`}
+        className={styles.label}
+      >
+        {label}
+      </label>
+      <button
+        id={`${id}-control`}
+        ref={trigger}
+        type="button"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-labelledby={`${id}-label ${id}-value`}
+        aria-expanded={open}
+        aria-controls={`${id}-options`}
+        aria-activedescendant={open ? `${id}-option-${highlighted}` : undefined}
+        disabled={isDisabled}
+        className={styles.control}
+        onClick={toggleMenu}
+        onKeyDown={onKeyDown}
+        onBlur={closeMenu}
+      >
+        {flagImage(active?.flag)}
+        <span
+          id={`${id}-value`}
+          title={active?.name}
+          className={styles.value}
+        >
+          {caption}
+        </span>
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          aria-hidden="true"
+          className={`${styles.chevron} ${open ? styles.rotated : ''}`}
+        >
+          <path d="m5 7.5 5 5 5-5" />
+        </svg>
+      </button>
+      <ul
+        id={`${id}-options`}
+        ref={listbox}
+        role="listbox"
+        aria-labelledby={`${id}-label`}
+        hidden={!open}
+        style={{ maxHeight: placement.height, maxWidth: placement.width }}
+        className={`${styles.options} ${placement.above ? styles.above : styles.below} ${placement.right ? styles.right : styles.left}`}
+        onMouseDown={(event) => event.preventDefault()}
+      >
+        {options.map((option, index) => (
+          <li
+            id={`${id}-option-${index}`}
+            key={option.code}
+            role="option"
+            data-option-value={option.code}
+            aria-selected={option.code === selectedCode}
+            className={`${styles.option} ${index === highlighted ? styles.highlighted : ''}`}
+            onPointerMove={() => setHighlighted(index)}
+            onClick={() => selectLocale(index)}
+          >
+            <span
+              className={styles.flagSlot}
+              aria-hidden="true"
+            >
+              {flagImage(option.flag)}
+            </span>
+            <span
+              className={styles.value}
+              title={option.name}
+            >
+              {option.name}
+            </span>
+            <span className={styles.code}>{option.code.toUpperCase()}</span>
+            <svg
+              viewBox="0 0 20 20"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.5"
+              aria-hidden="true"
+              className={`${styles.check} ${option.code !== selectedCode ? styles.invisible : ''}`}
+            >
+              <path d="m4 10 4 4 8-8" />
+            </svg>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,83 @@
+# 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`      | Вызывается, когда покупатель выбирает производителя. Данные обработчика указаны в его типе.        |