orionplace-react 0.1.0 → 0.2.0

package/templates/components/orionplace/shared/OrionplaceSelect.tsx

@@ -0,0 +1,439 @@
+'use client';
+
+import { hasFlag } from 'country-flag-icons';
+import 'country-flag-icons/3x2/flags.css';
+import { useEffect, useId, useRef, useState } from 'react';
+import type { KeyboardEvent } from 'react';
+import { safePublicUrl } from '@/lib/orionplace/presentation';
+import styles from './OrionplaceSelect.module.css';
+
+export interface OrionplaceSelectProps {
+  options: Record<string, string>;
+  label: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  onChange?: (value: string) => void;
+  disabled?: boolean;
+  compact?: boolean;
+  borderless?: boolean;
+  displayValue?: string;
+  required?: boolean;
+  countryCodes?: Record<string, string>;
+  icons?: Record<string, string | null | undefined>;
+}
+
+export function OrionplaceSelect({
+  options,
+  label,
+  value = '',
+  onValueChange,
+  onChange,
+  disabled = false,
+  compact = false,
+  borderless = false,
+  displayValue,
+  required = false,
+  countryCodes,
+  icons,
+}: OrionplaceSelectProps) {
+  const id                                      = useId();
+  const root                                    = useRef<HTMLDivElement>(null);
+  const trigger                                 = useRef<HTMLButtonElement>(null);
+  const listbox                                 = useRef<HTMLDivElement>(null);
+  const triggerIcon                             = useRef<HTMLImageElement>(null);
+  const search                                  = useRef('');
+  const lastSearchAt                            = useRef(0);
+  const [open, setOpen]                         = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(0);
+  const [showsHighlight, setShowsHighlight]     = useState(false);
+  const [placement, setPlacement]               = useState({
+    above: false,
+    right: false,
+    height: 256,
+    width: 320,
+  });
+  const [failedIcons, setFailedIcons]           = useState<ReadonlySet<string>>(
+    new Set(),
+  );
+
+  const entries                                 =
+    Object.entries(options).map(([optionValue, caption]) => ({
+    value: optionValue,
+    caption,
+  }));
+  const selected                                = Object.hasOwn(options, value)
+    ? value
+    : (entries[0]?.value ?? '');
+  const selectedCaption                         = options[selected] ?? '—';
+  const selectedIndex                           = Math.max(
+    0,
+    entries.findIndex((option) => option.value === selected),
+  );
+  const isDisabled                              = disabled || entries.length === 0;
+  const hasIcons                                = icons !== undefined;
+  // Parents often rebuild `options` on every render; compare its content so
+  // only a changed list closes the open menu.
+  const optionsKey                              = JSON.stringify(options);
+
+  useEffect(() => {
+    setOpen(false);
+    search.current = '';
+  }, [optionsKey, value, isDisabled]);
+
+  useEffect(() => {
+    function onOutsidePointer(event: PointerEvent) {
+      if (
+        event.target instanceof Node &&
+        !root.current?.contains(event.target)
+      ) {
+        closeMenu();
+      }
+    }
+
+    document.addEventListener('pointerdown', onOutsidePointer, true);
+    window.addEventListener('resize', closeMenu);
+
+    return () => {
+      document.removeEventListener('pointerdown', onOutsidePointer, true);
+      window.removeEventListener('resize', closeMenu);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+
+    const menu   = listbox.current;
+    const option = menu?.children.item(highlightedIndex) 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, highlightedIndex]);
+
+  useEffect(() => {
+    const image = triggerIcon.current;
+    if (image?.complete && image.naturalWidth === 0) {
+      markIconFailed(image.getAttribute('src') ?? '');
+    }
+  }, [selected, icons]);
+
+  function flag(optionValue: string): string {
+    const code = countryCodes?.[optionValue]?.toUpperCase() ?? '';
+    return hasFlag(code) ? code : '';
+  }
+
+  function iconUrl(optionValue: string): string {
+    const url = safePublicUrl(icons?.[optionValue]);
+    return failedIcons.has(url) ? '' : url;
+  }
+
+  function markIconFailed(url: string) {
+    if (url) {
+      setFailedIcons((previous) => new Set(previous).add(url));
+    }
+  }
+
+  function closeMenu() {
+    setOpen(false);
+    search.current = '';
+  }
+
+  function openMenu(fromKeyboard = false) {
+    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(left, right),
+        height: Math.max(48, Math.min(256, opensAbove ? above : below)),
+      });
+    }
+
+    setHighlightedIndex(selectedIndex);
+    setShowsHighlight(fromKeyboard);
+    setOpen(true);
+  }
+
+  function selectOption(index: number) {
+    const option = entries[index];
+    if (!option || isDisabled) {
+      return;
+    }
+
+    if (option.value !== selected) {
+      onValueChange?.(option.value);
+      onChange?.(option.value);
+    }
+    closeMenu();
+  }
+
+  function moveHighlight(index: number) {
+    setHighlightedIndex(Math.max(0, Math.min(index, entries.length - 1)));
+  }
+
+  function findByTyping(character: string, startIndex: 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          = startIndex + (repeated ? 1 : 0);
+
+    for (let offset = 0; offset < entries.length; offset++) {
+      const index = (start + offset) % entries.length;
+      if (entries[index]?.caption.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) {
+        selectOption(highlightedIndex);
+      }
+      return;
+    }
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      if (open) {
+        selectOption(highlightedIndex);
+      } else {
+        openMenu(true);
+      }
+      return;
+    }
+
+    const navigation = [
+      'ArrowDown',
+      'ArrowUp',
+      'Home',
+      'End',
+      'PageDown',
+      'PageUp',
+    ];
+    if (navigation.includes(event.key)) {
+      event.preventDefault();
+      const wasOpen                         = open;
+      const currentIndex                    = wasOpen ? highlightedIndex : selectedIndex;
+      setShowsHighlight(true);
+      if (!wasOpen) {
+        openMenu(true);
+      }
+      const targets: Record<string, number> = {
+        ArrowDown: currentIndex + (wasOpen ? 1 : 0),
+        ArrowUp: currentIndex - (wasOpen ? 1 : 0),
+        Home: 0,
+        End: entries.length - 1,
+        PageDown: currentIndex + 10,
+        PageUp: currentIndex - 10,
+      };
+      moveHighlight(targets[event.key]!);
+      return;
+    }
+
+    if (event.key.length === 1 && !event.altKey) {
+      event.preventDefault();
+      setShowsHighlight(true);
+      if (!open) {
+        openMenu(true);
+      }
+      findByTyping(
+        event.key.toLowerCase(),
+        open ? highlightedIndex : selectedIndex,
+      );
+    }
+  }
+
+  function optionIcon(optionValue: string, inTrigger: boolean) {
+    if (!hasIcons) {
+      return null;
+    }
+
+    const url = iconUrl(optionValue);
+    return (
+      <span
+        className={styles.optionIcon}
+        data-option-icon
+        aria-hidden="true"
+      >
+        {url ? (
+          <img
+            ref={inTrigger ? triggerIcon : undefined}
+            src={url}
+            alt=""
+            width={20}
+            height={20}
+            data-option-icon-image
+            onError={() => markIconFailed(url)}
+          />
+        ) : (
+          <svg
+            viewBox="0 0 20 20"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            data-option-icon-fallback
+          >
+            <rect
+              x="2.5"
+              y="4.5"
+              width="15"
+              height="11"
+            />
+            <path d="M2.5 8h15M5.5 12.5h3" />
+          </svg>
+        )}
+      </span>
+    );
+  }
+
+  function optionFlag(optionValue: string) {
+    const code = flag(optionValue);
+    return code ? (
+      <span
+        className={`${styles.flag} flag:${code}`}
+        aria-hidden="true"
+      />
+    ) : null;
+  }
+
+  return (
+    <div
+      ref={root}
+      className={`${styles.root} ${compact ? styles.compact : ''} ${borderless ? styles.borderless : ''}`.trim()}
+      data-feature-part="OrionplaceSelect"
+    >
+      <label
+        id={`${id}-label`}
+        htmlFor={`${id}-control`}
+        className={styles.label}
+      >
+        <span className={styles.labelText}>
+          {label}
+          {required && (
+            <span
+              className={styles.required}
+              aria-hidden="true"
+            >
+              *
+            </span>
+          )}
+        </span>
+      </label>
+      <button
+        id={`${id}-control`}
+        ref={trigger}
+        type="button"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-labelledby={`${id}-label ${id}-value`}
+        aria-expanded={open}
+        aria-required={required || undefined}
+        aria-controls={open ? `${id}-options` : undefined}
+        aria-activedescendant={
+          open ? `${id}-option-${highlightedIndex}` : undefined
+        }
+        disabled={isDisabled}
+        className={styles.control}
+        onClick={() => (open ? closeMenu() : openMenu())}
+        onKeyDown={onKeyDown}
+        onBlur={closeMenu}
+      >
+        {optionFlag(selected)}
+        {optionIcon(selected, true)}
+        <span
+          id={`${id}-value`}
+          className={styles.value}
+          title={selectedCaption}
+        >
+          {displayValue || selectedCaption}
+        </span>
+        <svg
+          viewBox="0 0 20 20"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          aria-hidden="true"
+          className={`${styles.chevron} ${open ? styles.chevronOpen : ''}`}
+        >
+          <path d="m5 7.5 5 5 5-5" />
+        </svg>
+      </button>
+      {open && (
+        <div
+          id={`${id}-options`}
+          ref={listbox}
+          role="listbox"
+          aria-labelledby={`${id}-label`}
+          style={{ maxHeight: placement.height, maxWidth: placement.width }}
+          className={`${styles.listbox} ${placement.above ? styles.above : styles.below} ${placement.right ? styles.right : styles.left}`}
+          onMouseDown={(event) => event.preventDefault()}
+        >
+          {entries.map((option, index) => (
+            <div
+              id={`${id}-option-${index}`}
+              key={option.value}
+              role="option"
+              data-option-value={option.value}
+              aria-selected={option.value === selected}
+              title={option.caption}
+              className={`${styles.option} ${showsHighlight && index === highlightedIndex ? styles.highlighted : ''}`}
+              onPointerMove={() => setHighlightedIndex(index)}
+              onClick={() => selectOption(index)}
+            >
+              {optionFlag(option.value)}
+              {optionIcon(option.value, false)}
+              <span className={styles.caption}>{option.caption}</span>
+              <svg
+                viewBox="0 0 20 20"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                aria-hidden="true"
+                className={`${styles.check} ${option.value === selected ? '' : styles.invisible}`}
+              >
+                <path d="m4 10 4 4 8-8" />
+              </svg>
+            </div>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/components/orionplace/shared/StorefrontErrorPage.README.md

@@ -0,0 +1,52 @@
+# StorefrontErrorPage
+
+## English
+
+Displays a localized page for an HTTP error. `404` and `410` show the
+missing-page message with Home and Catalog actions; other error statuses
+show Retry and Home. `statusCode` outside the HTTP error range displays
+`500`. The parent handles `onRetry`, `onSelectHome` and `onSelectCatalog`.
+Optional `details` appear in a closed disclosure. `pending` marks the page busy
+and disables Retry while the replacement request is running.
+
+### Props
+
+| Prop                           | Meaning                                                                          |
+| ------------------------------ | -------------------------------------------------------------------------------- |
+| `statusCode: number`           | HTTP status used to select the missing-page or failure presentation.             |
+| `locale: string`               | Locale used for the displayed labels.                              |
+| `details?: string`             | Optional development-only text in a closed details disclosure.                   |
+| `pending?: boolean`            | Marks the page busy and disables Retry while the request is running.             |
+| `onRetry?: () => void`         | Called when the visitor retries the failed request. The callback has no payload. |
+| `onSelectHome?: () => void`    | Called when the visitor opens the home page. The callback has no payload.        |
+| `onSelectCatalog?: () => void` | Called when the visitor opens the catalog. The callback has no payload.          |
+
+The supplied `app/not-found.tsx` route uses this component for missing pages.
+The error routes use it for failures. Home and Catalog preserve the selected
+locale; Retry reloads the current address. Page metadata follows the same locale.
+
+## Русский
+
+Показывает локализованную страницу ошибки HTTP. Для `404` и `410` выводятся
+сообщение об отсутствующей странице и кнопки «Главная» и «Каталог».
+Остальные ошибки показывают «Повторить» и «Главная». Если `statusCode`
+не содержит код ошибки HTTP, выводится `500`. Действия обрабатываются
+через `onRetry`, `onSelectHome` и `onSelectCatalog`. Необязательные
+`details` находятся в закрываемом блоке подробностей. `pending` отмечает страницу
+как занятую и блокирует кнопку «Повторить» до завершения запроса.
+
+### Свойства
+
+| Свойство                       | Назначение                                                                              |
+| ------------------------------ | --------------------------------------------------------------------------------------- |
+| `statusCode: number`           | HTTP-статус для выбора вида отсутствующей страницы или ошибки.                          |
+| `locale: string`               | Язык отображаемых надписей.                                     |
+| `details?: string`             | Необязательный текст только для разработки в закрытом блоке подробностей.             |
+| `pending?: boolean`            | Отмечает страницу как занятую и блокирует повтор запроса до его завершения.             |
+| `onRetry?: () => void`         | Вызывается, когда покупатель повторяет неудачный запрос. Обработчик не получает данные. |
+| `onSelectHome?: () => void`    | Вызывается, когда покупатель открывает главную страницу. Обработчик не получает данные. |
+| `onSelectCatalog?: () => void` | Вызывается, когда покупатель открывает каталог. Обработчик не получает данные.          |
+
+Страница `app/not-found.tsx` использует этот компонент для отсутствующих страниц,
+а страницы ошибок — для сбоев. «Главная» и «Каталог» сохраняют выбранный язык;
+«Повторить» перезагружает текущий адрес. Метаданные следуют тому же языку.

package/templates/components/orionplace/shared/StorefrontErrorPage.module.css

@@ -0,0 +1,141 @@
+/* The page frame follows its own width: a size container around <main>,
+   so the docs tabs and every placement show the same padding. */
+.page {
+  container: page / inline-size;
+  width: 100%;
+  min-width: 0;
+}
+
+.root {
+  box-sizing: border-box;
+  display: grid;
+  place-items: center;
+  width: 100%;
+  max-width: 1440px;
+  min-height: 60vh;
+  margin: 0 auto;
+  padding: 40px 16px;
+  color: var(--orionplace-text);
+  container-type: inline-size;
+}
+
+.content {
+  display: grid;
+  justify-items: center;
+  width: 100%;
+  max-width: 560px;
+}
+
+.status {
+  margin: 0 0 -32px;
+  font-size: 88px;
+  font-weight: 500;
+  line-height: 1;
+  letter-spacing: 0.02em;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+.action {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 128px;
+  height: 44px;
+  gap: 8px;
+  padding: 1px 24px;
+  border: 1px solid;
+  border-radius: 0;
+  font: inherit;
+  font-size: 12px;
+  line-height: 16px;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+}
+
+.primary {
+  border-color: var(--orionplace-accent);
+  background: var(--orionplace-accent);
+  color: var(--orionplace-surface);
+}
+.secondary {
+  border-color: var(--orionplace-text);
+  background: transparent;
+  color: var(--orionplace-text);
+}
+.primary:focus-visible {
+  opacity: 0.85;
+}
+@media (hover: hover) {
+  .primary:hover {
+    opacity: 0.85;
+  }
+}
+.secondary:focus-visible {
+  background: var(--orionplace-hover);
+}
+@media (hover: hover) {
+  .secondary:hover {
+    background: var(--orionplace-hover);
+  }
+}
+
+.action:disabled {
+  cursor: default;
+  opacity: 0.4;
+}
+
+@media (hover: hover) {
+  .action:disabled:hover {
+    cursor: default;
+    opacity: 0.4;
+  }
+}
+
+.details {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 12px 16px;
+  border: 1px solid var(--orionplace-border);
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 20px;
+  text-align: left;
+}
+.details summary {
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+.details pre {
+  margin: 12px 0 0;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+@container page (min-width: 640px) {
+  .root {
+    padding: 56px 24px;
+  }
+}
+/* The status number follows the page's own width, as in the other packages. */
+@container (min-width: 592px) {
+  .status {
+    font-size: 144px;
+  }
+}
+@container page (min-width: 1024px) {
+  .root {
+    padding-inline: 32px;
+  }
+}