orionplace-react 0.7.7 → 0.8.0

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

@@ -1,439 +0,0 @@
-'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

@@ -1,52 +0,0 @@
-# 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

@@ -1,141 +0,0 @@
-/* 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;
-  }
-}