orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/address/StorefrontAddresses.tsx

@@ -1,438 +0,0 @@
-'use client';
-
-import { hasFlag } from 'country-flag-icons';
-import 'country-flag-icons/3x2/flags.css';
-import { useEffect, useId, useRef, useState, type KeyboardEvent } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type {
-  IUserAddress,
-  IUserAddressListRequest,
-  IUserAddressShippingRequest,
-} from '@/interfaces/orionplace/address/IUserAddress';
-import {
-  addressCountryName,
-  addressSummary,
-} from '@/lib/orionplace/addressPresentation';
-import { fieldErrorText, OrionplaceApiError } from '@/lib/orionplace/api';
-import { canShipTo } from '@/lib/orionplace/cartAddress';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import {
-  AddressForm,
-  type AddressFormProps,
-} from '@/components/orionplace/address/AddressForm';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import styles from './StorefrontAddresses.module.css';
-
-export interface StorefrontAddressesProps {
-  addresses?: readonly IUserAddress[];
-  loaded?: boolean;
-  pending?: boolean;
-  error?: string;
-  loadOnMount?: boolean;
-  form?: Omit<AddressFormProps, 'address' | 'onSaved' | 'onCancel' | 'onDone'>;
-  onLoad?: (request: IUserAddressListRequest) => Promise<void> | void;
-  onSetDefault?: (
-    request: IUserAddressShippingRequest,
-    address: IUserAddress,
-  ) => Promise<void> | void;
-  onDelete?: (address: IUserAddress) => Promise<void> | void;
-  onSaved?: (addresses: IUserAddress[]) => void;
-}
-
-type Editor = IUserAddress | null | undefined;
-type AddressActionKey = 'edit' | 'default' | 'delete';
-
-// An address abroad can not become the default; clearing stays possible.
-function blockedDefault(address: IUserAddress) {
-  return !address.is_default_for_shipping && !canShipTo(address);
-}
-
-export function StorefrontAddresses({
-  addresses = [],
-  loaded = false,
-  pending = false,
-  error = '',
-  loadOnMount = true,
-  form,
-  onLoad,
-  onSetDefault,
-  onDelete,
-  onSaved,
-}: StorefrontAddressesProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = featureLabels(locale);
-  const copy = labels.addresses;
-  const menuId = useId();
-  const requested = useRef(false);
-  const roots = useRef(new Map<number, HTMLDivElement>());
-  const triggers = useRef(new Map<number, HTMLButtonElement>());
-  const menuItems = useRef<HTMLButtonElement[]>([]);
-  const [editor, setEditor] = useState<Editor>(undefined);
-  const [confirmation, setConfirmation] = useState<number | undefined>();
-  const [openMenuId, setOpenMenuId] = useState<number | undefined>();
-  const [actionPending, setActionPending] = useState(false);
-  const [actionError, setActionError] = useState('');
-  const busy = pending || actionPending;
-  const notice = actionError || error;
-
-  useEffect(() => {
-    if (!requested.current && loadOnMount) {
-      requested.current = true;
-      void onLoad?.({ filters: {} });
-    }
-  }, [loadOnMount]);
-
-  useEffect(() => {
-    function outside(event: PointerEvent) {
-      const root =
-        openMenuId === undefined ? undefined : roots.current.get(openMenuId);
-      if (
-        root &&
-        event.target instanceof Node &&
-        !root.contains(event.target)
-      ) {
-        closeMenu(false);
-      }
-    }
-    document.addEventListener('pointerdown', outside, true);
-    return () => document.removeEventListener('pointerdown', outside, true);
-  }, [openMenuId]);
-
-  function enabledItems() {
-    return menuItems.current.filter((item) => item && !item.disabled);
-  }
-
-  function focusItem(position: 'first' | 'last') {
-    requestAnimationFrame(() => {
-      const items = enabledItems();
-      (position === 'first' ? items[0] : items.at(-1))?.focus();
-    });
-  }
-
-  function openMenu(address: IUserAddress, position: 'first' | 'last') {
-    menuItems.current = [];
-    setOpenMenuId(address.id);
-    focusItem(position);
-  }
-
-  function closeMenu(returnFocus: boolean) {
-    const addressId = openMenuId;
-    setOpenMenuId(undefined);
-    if (returnFocus && addressId !== undefined) {
-      requestAnimationFrame(() => triggers.current.get(addressId)?.focus());
-    }
-  }
-
-  function toggleMenu(address: IUserAddress) {
-    if (openMenuId === address.id) {
-      closeMenu(false);
-    } else {
-      openMenu(address, 'first');
-    }
-  }
-
-  function triggerKeyDown(
-    event: KeyboardEvent<HTMLButtonElement>,
-    address: IUserAddress,
-  ) {
-    if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
-      event.preventDefault();
-      openMenu(address, event.key === 'ArrowDown' ? 'first' : 'last');
-    }
-  }
-
-  function menuKeyDown(event: KeyboardEvent<HTMLButtonElement>) {
-    const items = enabledItems();
-    const current = items.indexOf(event.currentTarget);
-    const positions: Record<string, number> = {
-      ArrowDown: (current + 1) % items.length,
-      ArrowUp: (current - 1 + items.length) % items.length,
-      Home: 0,
-      End: items.length - 1,
-    };
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      closeMenu(true);
-    } else if (event.key === 'Tab') {
-      closeMenu(false);
-    } else if (Object.hasOwn(positions, event.key)) {
-      event.preventDefault();
-      items[positions[event.key]!]?.focus();
-    }
-  }
-
-  // The backend's field messages, or the localized fallback (as the Nuxt
-  // task shows them).
-  function failure(reason: unknown) {
-    const fields = reason instanceof OrionplaceApiError ? reason.fields : {};
-    return fieldErrorText(fields) || labels.failed;
-  }
-
-  function reload() {
-    setActionError('');
-    void onLoad?.({ filters: {} });
-  }
-
-  async function setDefault(address: IUserAddress) {
-    if (!onSetDefault || busy) {
-      return;
-    }
-    setActionPending(true);
-    setActionError('');
-    try {
-      await onSetDefault(
-        { is_default_for_shipping: !address.is_default_for_shipping },
-        address,
-      );
-      await onLoad?.({ filters: {} });
-    } catch (reason) {
-      setActionError(failure(reason));
-    } finally {
-      setActionPending(false);
-    }
-  }
-
-  async function remove(address: IUserAddress) {
-    if (!onDelete || busy) {
-      return;
-    }
-    setActionPending(true);
-    setActionError('');
-    try {
-      await onDelete(address);
-      setConfirmation(undefined);
-      await onLoad?.({ filters: {} });
-    } catch (reason) {
-      setActionError(failure(reason));
-    } finally {
-      setActionPending(false);
-    }
-  }
-
-  function choose(key: AddressActionKey, address: IUserAddress) {
-    closeMenu(true);
-    if (key === 'edit') {
-      setEditor(address);
-    } else if (key === 'default') {
-      void setDefault(address);
-    } else {
-      setConfirmation(address.id);
-    }
-  }
-
-  return (
-    <section
-      className={styles.section}
-      data-feature-part="StorefrontAddresses"
-      aria-busy={busy}
-    >
-      <div className={styles.heading}>
-        <div>
-          <h1>{copy.title}</h1>
-          <p>{copy.description}</p>
-        </div>
-        <button
-          type="button"
-          className={styles.primary}
-          data-address-add
-          disabled={busy || editor !== undefined}
-          aria-label={copy.add}
-          onClick={() => setEditor(null)}
-        >
-          + {labels.add}
-        </button>
-      </div>
-      {notice ? (
-        <div
-          className={styles.error}
-          role="alert"
-        >
-          <span>{notice}</span>
-          <button
-            type="button"
-            disabled={busy}
-            onClick={reload}
-          >
-            {labels.retry}
-          </button>
-        </div>
-      ) : null}
-      {editor !== undefined ? (
-        <AddressForm
-          key={editor?.id ?? 'new'}
-          {...form}
-          address={editor ?? undefined}
-          onSaved={(saved) => {
-            // The form stays open on the saved address until it is closed.
-            onSaved?.(saved);
-            void onLoad?.({ filters: {} });
-          }}
-          onDone={() => setEditor(undefined)}
-          onCancel={() => setEditor(undefined)}
-        />
-      ) : null}
-      {busy && !loaded ? (
-        <p
-          className="op-feature-loading"
-          role="status"
-        >
-          <span className={styles.screenReaderOnly}>{labels.loading}</span>
-        </p>
-      ) : null}
-      {loaded && !addresses.length && editor === undefined ? (
-        <OrionplaceEmptyState
-          kind="addresses"
-          message={copy.empty}
-        />
-      ) : null}
-      <ul className={styles.records}>
-        {addresses.map((address) => {
-          const country = addressCountryName(address.country, locale);
-          const code = address.country?.iso_3166_1_a2?.toUpperCase() ?? '';
-          const flag = hasFlag(code) ? code : '';
-          const menuOpen = openMenuId === address.id;
-          return (
-            <li
-              key={address.id}
-              className={styles.record}
-              data-address={address.id}
-            >
-              <div className={styles.recordContent}>
-                <div
-                  className={styles.title}
-                  data-address-title
-                >
-                  {flag ? (
-                    <span
-                      className={`flag:${flag} ${styles.flag}`}
-                      role="img"
-                      aria-label={country}
-                      title={country}
-                      data-address-flag
-                    />
-                  ) : null}
-                  <span className={styles.label}>{address.address_label}</span>
-                </div>
-                <p>{addressSummary(address, locale)}</p>
-                {address.is_default_for_shipping ? (
-                  <span className={styles.default}>{copy.default}</span>
-                ) : null}
-                {canShipTo(address) ? null : (
-                  <p
-                    className={styles.noShipping}
-                    data-address-no-shipping
-                  >
-                    {copy.noShipping}
-                  </p>
-                )}
-                {confirmation === address.id ? (
-                  <div className={styles.confirmation}>
-                    <p>{copy.deleteQuestion}</p>
-                    <div className={styles.confirmationActions}>
-                      <button
-                        type="button"
-                        disabled={busy}
-                        data-address-confirm-delete
-                        onClick={() => void remove(address)}
-                      >
-                        {labels.delete}
-                      </button>
-                      <button
-                        type="button"
-                        disabled={busy}
-                        onClick={() => setConfirmation(undefined)}
-                      >
-                        {labels.cancel}
-                      </button>
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-              <div
-                ref={(element) => {
-                  if (element) roots.current.set(address.id, element);
-                  else roots.current.delete(address.id);
-                }}
-                className={styles.menuRoot}
-              >
-                <button
-                  ref={(element) => {
-                    if (element) triggers.current.set(address.id, element);
-                    else triggers.current.delete(address.id);
-                  }}
-                  type="button"
-                  className={styles.menuTrigger}
-                  data-address-menu
-                  aria-haspopup="menu"
-                  aria-expanded={menuOpen}
-                  aria-controls={
-                    menuOpen ? `${menuId}-menu-${address.id}` : undefined
-                  }
-                  aria-label={`${copy.actions}: ${address.address_label}`}
-                  disabled={busy}
-                  onClick={() => toggleMenu(address)}
-                  onKeyDown={(event) => triggerKeyDown(event, address)}
-                >
-                  <svg
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    aria-hidden="true"
-                  >
-                    <path d="M4 7h16M4 12h16M4 17h16" />
-                  </svg>
-                </button>
-                {menuOpen ? (
-                  <div
-                    id={`${menuId}-menu-${address.id}`}
-                    role="menu"
-                    aria-label={`${copy.actions}: ${address.address_label}`}
-                    className={styles.menu}
-                  >
-                    {(
-                      [
-                        ['edit', labels.edit, '', busy || editor !== undefined],
-                        [
-                          'default',
-                          address.is_default_for_shipping
-                            ? copy.clearDefault
-                            : copy.makeDefault,
-                          address.is_default_for_shipping
-                            ? copy.clearDefaultHint
-                            : blockedDefault(address)
-                              ? copy.noShippingDefault
-                              : copy.makeDefaultHint,
-                          busy || blockedDefault(address),
-                        ],
-                        ['delete', labels.delete, '', busy],
-                      ] as [AddressActionKey, string, string, boolean][]
-                    ).map(([key, label, hint, disabled], index) => (
-                      <button
-                        key={key}
-                        ref={(element) => {
-                          if (element) menuItems.current[index] = element;
-                        }}
-                        type="button"
-                        role="menuitem"
-                        tabIndex={-1}
-                        data-address-action={key}
-                        disabled={disabled}
-                        aria-label={hint || undefined}
-                        data-danger={key === 'delete' || undefined}
-                        onClick={() => choose(key, address)}
-                        onKeyDown={menuKeyDown}
-                      >
-                        {label}
-                      </button>
-                    ))}
-                  </div>
-                ) : null}
-              </div>
-            </li>
-          );
-        })}
-      </ul>
-    </section>
-  );
-}

package/templates/components/orionplace/banners/MainBanner.README.md

@@ -1,65 +0,0 @@
-# MainBanner
-
-## English
-
-`MainBanner` displays every image from the current locale's main banners as an
-ordered carousel. `format="auto"` selects mobile, tablet, wide or desktop media
-from the browser width after hydration; the server and first client render use
-desktop media. An explicit format stays fixed. When that format has no valid
-public image, the component checks desktop, wide, tablet and mobile images in
-that order. A loaded picture keeps its own shape, so nothing is cut off;
-until it loads, or when it fails, the box has the chosen format's usual shape
-(`bannerFormatSizes`: desktop 1240×500, wide 1024×500, tablet 768×500, mobile
-480×525).
-
-The previous and next buttons wrap around the slides. Slides never advance on a
-timer. A locale, format or Application Load change returns to the first slide.
-`label` supplies the carousel's accessible name and image description; localized
-storefront text is used when it is empty.
-
-A banner with no `category` is not interactive. A banner with a category renders
-as a button and calls `onSelect(banner)`. When `categoryHref(categoryId)` returns
-a safe public path, it renders as a real link: a plain click still calls
-`onSelect`, while modifier clicks retain the browser's new-tab behavior.
-
-### Props
-
-| Prop                                                | Meaning                                                                                                  |
-| --------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `label?: string`                                    | Visible or accessible name for the component’s main control or region.                                   |
-| `format?: TBannerFormats \| "auto"`                 | Image format selected for the current viewport.                                                          |
-| `categoryHref?: (categoryId: number) => string`     | Builds the category destination from the callback arguments.                                             |
-| `onSelect?: (banner: IAppLoadCommonBanner) => void` | Passes the complete selected banner object when it has a `category`. The application handles navigation to that category. |
-
-## Русский
-
-`MainBanner` показывает каждое изображение главных баннеров текущего языка как
-отдельный слайд в порядке ответа. При `format="auto"` после запуска страницы в
-браузере выбирается мобильное, планшетное, широкое или настольное изображение по
-ширине окна; сервер и первый клиентский рендер используют настольный формат.
-Явно переданный формат не меняется. Если у него нет допустимого общедоступного
-изображения, компонент по очереди проверяет настольный, широкий, планшетный и
-мобильный наборы. Загруженное изображение сохраняет свою форму и не обрезается;
-до загрузки или при ошибке блок имеет обычную форму выбранного формата
-(`bannerFormatSizes`: настольный 1240×500, широкий 1024×500, планшетный 768×500,
-мобильный 480×525).
-
-Кнопки назад и вперёд переходят по слайдам по кругу. Автоматического
-переключения нет. Смена языка, формата или данных Application Load возвращает к
-первому слайду. `label` задаёт доступное название карусели и описание
-изображения; если он пустой, используется локализованный текст магазина.
-
-Баннер без `category` не реагирует на нажатие. Баннер с категорией отображается
-кнопкой и вызывает `onSelect(banner)`. Если `categoryHref(categoryId)` возвращает
-допустимый общедоступный путь, баннер становится настоящей ссылкой: обычное
-нажатие по-прежнему вызывает `onSelect`, а нажатие с модификатором сохраняет
-открытие ссылки средствами браузера, например в новой вкладке.
-
-### Свойства
-
-| Свойство                                            | Назначение                                                                                                |
-| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `label?: string`                                    | Видимое или доступное название основного элемента компонента.                                             |
-| `format?: TBannerFormats \| "auto"`                 | Формат изображения, выбранный для текущей ширины экрана.                                                  |
-| `categoryHref?: (categoryId: number) => string`     | Строит адрес ссылки категории из аргументов обработчика.                                                  |
-| `onSelect?: (banner: IAppLoadCommonBanner) => void` | Передаёт полный объект выбранного баннера, если у него указан `category`. Приложение обрабатывает переход к этой категории. |

package/templates/components/orionplace/banners/MainBanner.module.css

@@ -1,112 +0,0 @@
-.root {
-  position: relative;
-  min-width: 0;
-  container-type: inline-size;
-}
-
-.banner {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  border-radius: 0;
-  outline: none;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  text-decoration: none;
-  cursor: default;
-}
-
-.interactive {
-  cursor: pointer;
-}
-
-/* A loaded picture sets the height by its own shape; the format's shape only
-   holds the place while there is no picture. */
-.banner:has(> img) {
-  aspect-ratio: auto !important;
-}
-
-.banner > img {
-  height: auto;
-}
-
-.interactive:focus-visible {
-  opacity: 0.9;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.controls {
-  position: absolute;
-  right: 16px;
-  bottom: 16px;
-  display: flex;
-  align-items: center;
-  gap: 1px;
-  color: var(--orionplace-text);
-  font-size: 12px;
-  line-height: calc(16 / 12);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.counter,
-.control {
-  display: flex;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  border: 0;
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-}
-
-.counter {
-  box-sizing: border-box;
-  padding: 0 12px;
-}
-
-.control {
-  width: 40px;
-  padding: 0;
-  outline: none;
-  /* The arrows keep Nuxt's text-sm, not the counter's 12px medium text. */
-  font: inherit;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  cursor: pointer;
-}
-
-.control:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .control:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-/* The banner's own width (it spans the page, so the former screen widths). */
-@container (min-width: 640px) {
-  .controls {
-    right: 24px;
-    bottom: 24px;
-  }
-}
-
-@container (min-width: 1024px) {
-  .controls {
-    right: 32px;
-  }
-}