orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/sellers/SellerPhotoGallery.module.css

@@ -1,314 +0,0 @@
-/*
- * The thumbnails follow the gallery's own width (720px, the container rule
- * of the Nuxt reference) and the photo viewer follows the viewer's width,
- * not the screen width.
- */
-.root {
-  display: grid;
-  min-width: 0;
-  gap: 1rem;
-  color: var(--orionplace-text);
-  container: seller-photos / inline-size;
-}
-
-.header {
-  display: flex;
-  min-height: 2rem;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-}
-
-.header h2 {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.header h2 span {
-  margin-left: 0.5rem;
-  color: var(--orionplace-muted);
-  font-weight: 400;
-  font-variant-numeric: tabular-nums;
-}
-
-.toggle {
-  min-height: 2rem;
-  padding: 0;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.toggle:focus-visible {
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .toggle:hover {
-    opacity: 0.7;
-  }
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.grid li {
-  min-width: 0;
-}
-
-.tile {
-  position: relative;
-  display: block;
-  width: 100%;
-  overflow: hidden;
-  aspect-ratio: 1;
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  cursor: pointer;
-  outline: none;
-}
-
-.tile:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .tile:hover {
-    border-color: var(--orionplace-text);
-  }
-}
-
-.tileImage {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  transition: transform 180ms ease;
-}
-
-@media (hover: hover) {
-  .tile:hover .tileImage {
-    transform: scale(1.03);
-  }
-}
-
-.dialog {
-  box-sizing: border-box;
-  width: calc(100vw - 2rem);
-  max-width: 75rem;
-  height: calc(100dvh - 2rem);
-  max-height: none;
-  margin: auto;
-  overflow: hidden;
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-}
-
-.dialog::backdrop {
-  background: rgb(0 0 0 / 35%);
-  backdrop-filter: blur(2px);
-}
-
-.viewer {
-  display: grid;
-  height: 100%;
-  grid-template-rows: auto minmax(0, 1fr) auto;
-  container: seller-photo-viewer / inline-size;
-}
-
-.viewerHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 1rem;
-  padding: 0.5rem 0.5rem 0.5rem 1rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.viewerHeader p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  font-variant-numeric: tabular-nums;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.viewerHeader button {
-  display: grid;
-  width: 2.5rem;
-  height: 2.5rem;
-  place-items: center;
-  padding: 0;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 1.5rem;
-  line-height: calc(2 / 1.5);
-}
-
-.viewerHeader button:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .viewerHeader button:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.stage {
-  position: relative;
-  display: flex;
-  min-height: 0;
-  align-items: center;
-  justify-content: center;
-  padding: 1rem;
-  touch-action: pan-y;
-  user-select: none;
-}
-
-.mainImage {
-  display: block;
-  width: 100%;
-  height: 100%;
-  max-height: 100%;
-  object-fit: contain;
-}
-
-.arrow {
-  position: absolute;
-  top: 50%;
-  display: grid;
-  width: 2.75rem;
-  height: 2.75rem;
-  place-items: center;
-  transform: translateY(-50%);
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 50%;
-  background: var(--orionplace-surface);
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 1.5rem;
-  line-height: calc(2 / 1.5);
-}
-
-.arrow:focus-visible {
-  border-color: var(--orionplace-text);
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .arrow:hover {
-    border-color: var(--orionplace-text);
-    background: var(--orionplace-hover);
-  }
-}
-
-.arrow svg {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.previous {
-  left: 0.75rem;
-}
-
-.next {
-  right: 0.75rem;
-}
-
-.thumbnails {
-  display: flex;
-  gap: 0.5rem;
-  overflow-x: auto;
-  margin: 0;
-  padding: 0.75rem 1rem;
-  border-top: 1px solid var(--orionplace-border);
-  list-style: none;
-}
-
-.thumbnails li {
-  flex: none;
-}
-
-.thumbnails button {
-  display: block;
-  width: 3.5rem;
-  height: 3.5rem;
-  overflow: hidden;
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  cursor: pointer;
-}
-
-.thumbnails button:focus-visible,
-.thumbnails button[aria-current='true'] {
-  border-color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .thumbnails button:hover {
-    border-color: var(--orionplace-text);
-  }
-}
-
-.thumbnails img,
-.thumbnails span {
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-}
-
-@container seller-photos (min-width: 720px) {
-  .grid {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}
-
-/* The viewer is the screen minus the 16px dialog margins and its 1px borders,
-   so 606px is its width on a 640px screen. */
-@container seller-photo-viewer (min-width: 606px) {
-  .stage {
-    padding-inline: 5rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tileImage {
-    transition: none;
-  }
-  @media (hover: hover) {
-    .tile:hover .tileImage {
-      transform: none;
-    }
-  }
-}

package/templates/components/orionplace/sellers/SellerPhotoGallery.tsx

@@ -1,335 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type KeyboardEvent,
-  type MouseEvent,
-  type PointerEvent,
-} from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { ISellerDirectoryImage } from '@/interfaces/orionplace/sellers/ISellerDirectory';
-import { directoryLabels } from '@/lib/orionplace/directoryLabels';
-import {
-  SELLER_PHOTO_LIMIT,
-  sellerGalleryImages,
-  sellerGalleryIndex,
-} from '@/lib/orionplace/sellerDirectory';
-import {
-  createPageScrollLock,
-  restoreFocus,
-} from '@/lib/orionplace/modalWindow';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import styles from './SellerPhotoGallery.module.css';
-
-export interface SellerPhotoGalleryProps {
-  images: ISellerDirectoryImage[];
-  name: string;
-  limit?: number;
-}
-
-export function SellerPhotoGallery({
-  images,
-  name,
-  limit = SELLER_PHOTO_LIMIT,
-}: SellerPhotoGalleryProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = directoryLabels(locale);
-  const id = useId();
-  const dialog = useRef<HTMLDialogElement>(null);
-  const grid = useRef<HTMLUListElement>(null);
-  const swipeStart = useRef<number | undefined>(undefined);
-  const focusIndex = useRef(0);
-  const photos = sellerGalleryImages(images);
-  const visibleLimit = Number.isFinite(limit)
-    ? Math.max(1, Math.floor(limit))
-    : SELLER_PHOTO_LIMIT;
-  const [expanded, setExpanded] = useState(false);
-  const [active, setActive] = useState(0);
-  const [viewerOpen, setViewerOpen] = useState(false);
-  const visible = expanded ? photos : photos.slice(0, visibleLimit);
-  const current = photos[active];
-  const hiddenCount = Math.max(0, photos.length - visibleLimit);
-
-  function photoLabel(index: number) {
-    return `${name}: ${labels.openPhoto} ${index + 1}`;
-  }
-
-  function tile(index: number) {
-    return grid.current?.querySelector<HTMLButtonElement>(
-      `[data-seller-photo-index="${index}"]`,
-    );
-  }
-
-  function open(index: number) {
-    setActive(index);
-    focusIndex.current = index;
-    setViewerOpen(true);
-  }
-
-  function close() {
-    focusIndex.current = active;
-    if (active >= visibleLimit) {
-      setExpanded(true);
-    }
-    setViewerOpen(false);
-  }
-
-  function select(index: number) {
-    if (photos[index]) {
-      setActive(index);
-      focusIndex.current = index;
-    }
-  }
-
-  function show(step: number) {
-    select(sellerGalleryIndex(active, step, photos.length));
-  }
-
-  function onKeyDown(event: KeyboardEvent<HTMLDialogElement>) {
-    const actions: Record<string, () => void> = {
-      ArrowLeft: () => show(-1),
-      ArrowRight: () => show(1),
-      Home: () => select(0),
-      End: () => select(photos.length - 1),
-    };
-    const action = actions[event.key];
-    if (action) {
-      event.preventDefault();
-      action();
-    }
-  }
-
-  function onDialogClick(event: MouseEvent<HTMLDialogElement>) {
-    const element = dialog.current;
-    if (!element || event.target !== element) {
-      return;
-    }
-    const bounds = element.getBoundingClientRect();
-    if (
-      event.clientX < bounds.left || event.clientX > bounds.right ||
-      event.clientY < bounds.top || event.clientY > bounds.bottom
-    ) {
-      close();
-    }
-  }
-
-  function onPointerDown(event: PointerEvent<HTMLDivElement>) {
-    swipeStart.current = event.clientX;
-  }
-
-  function onPointerUp(event: PointerEvent<HTMLDivElement>) {
-    const start = swipeStart.current;
-    swipeStart.current = undefined;
-    if (start === undefined) {
-      return;
-    }
-    const distance = event.clientX - start;
-    if (Math.abs(distance) >= 40) {
-      show(distance < 0 ? 1 : -1);
-    }
-  }
-
-  useEffect(() => {
-    if (active >= photos.length) {
-      setActive(Math.max(0, photos.length - 1));
-    }
-    if (!photos.length) {
-      setViewerOpen(false);
-    }
-  }, [active, photos.length]);
-
-  useEffect(() => {
-    const element    = dialog.current;
-    if (!viewerOpen || !element) {
-      return;
-    }
-    const pageScroll = createPageScrollLock();
-    pageScroll.lock();
-    element.showModal();
-
-    // Focus returns to the tile of the photo shown last. A close that
-    // expands the grid renders the new tiles in the same update, before this
-    // cleanup runs, so the tile is already on the page. The page scrolls
-    // just enough to show a tile that is out of view.
-    return () => {
-      element.close();
-      pageScroll.unlock();
-      restoreFocus(tile(focusIndex.current), { reveal: true });
-    };
-  }, [viewerOpen]);
-
-  if (!photos.length) {
-    return null;
-  }
-
-  return (
-    <section
-      className={styles.root}
-      aria-labelledby={`${id}-title`}
-      data-feature-part="SellerPhotoGallery"
-      data-seller-photos
-    >
-      <header className={styles.header}>
-        <h2 id={`${id}-title`}>
-          {labels.photos}{' '}
-          <span>{photos.length}</span>
-        </h2>
-        {hiddenCount ? (
-          <button
-            type="button"
-            className={styles.toggle}
-            aria-expanded={expanded}
-            aria-label={expanded
-              ? labels.showFewerPhotos
-              : labels.showAllPhotos}
-            data-seller-photos-toggle
-            onClick={() => setExpanded((currentValue) => !currentValue)}
-          >
-            {expanded ? labels.less : labels.more}
-          </button>
-        ) : null}
-      </header>
-      <ul
-        ref={grid}
-        className={styles.grid}
-      >
-        {visible.map((photo, index) => (
-          <li key={photo.id}>
-            <button
-              type="button"
-              className={styles.tile}
-              aria-label={photoLabel(index)}
-              aria-haspopup="dialog"
-              data-seller-photo
-              data-seller-photo-index={index}
-              onClick={() => open(index)}
-            >
-              <OrionplaceImage
-                src={photo.image}
-                alt=""
-                width={160}
-                height={160}
-                className={styles.tileImage}
-              />
-            </button>
-          </li>
-        ))}
-      </ul>
-
-      {viewerOpen ? (
-        <dialog
-          data-stable-modal="fixed"
-          ref={dialog}
-          className={styles.dialog}
-          aria-label={`${labels.sellerPhotos}: ${name}`}
-          data-seller-photo-viewer
-          onCancel={(event) => {
-            event.preventDefault();
-            close();
-          }}
-          onClick={onDialogClick}
-          onKeyDown={onKeyDown}
-        >
-          <div className={styles.viewer}>
-            <header className={styles.viewerHeader}>
-              <p aria-live="polite" data-seller-photo-position>
-                {active + 1} / {photos.length}
-              </p>
-              <button
-                type="button"
-                aria-label={labels.closePhoto}
-                data-seller-photo-close
-                onClick={close}
-              >
-                <span aria-hidden="true">×</span>
-              </button>
-            </header>
-            <div
-              className={styles.stage}
-              data-seller-photo-stage
-              onPointerDown={onPointerDown}
-              onPointerUp={onPointerUp}
-              onPointerCancel={() => {
-                swipeStart.current = undefined;
-              }}
-            >
-              {current ? (
-                <OrionplaceImage
-                  key={current.id}
-                  src={current.image}
-                  alt={`${name} ${active + 1}`}
-                  width={1200}
-                  height={900}
-                  className={styles.mainImage}
-                />
-              ) : null}
-              {photos.length > 1 ? (
-                <>
-                  <button
-                    type="button"
-                    className={`${styles.arrow} ${styles.previous}`}
-                    aria-label={labels.previous}
-                    data-seller-photo-previous
-                    onClick={() => show(-1)}
-                  >
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      aria-hidden="true"
-                    >
-                      <path d="m15 5-7 7 7 7" />
-                    </svg>
-                  </button>
-                  <button
-                    type="button"
-                    className={`${styles.arrow} ${styles.next}`}
-                    aria-label={labels.next}
-                    data-seller-photo-next
-                    onClick={() => show(1)}
-                  >
-                    <svg
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="1.5"
-                      aria-hidden="true"
-                    >
-                      <path d="m9 5 7 7-7 7" />
-                    </svg>
-                  </button>
-                </>
-              ) : null}
-            </div>
-            {photos.length > 1 ? (
-              <ol className={styles.thumbnails}>
-                {photos.map((photo, index) => (
-                  <li key={photo.id}>
-                    <button
-                      type="button"
-                      aria-label={photoLabel(index)}
-                      aria-current={index === active || undefined}
-                      data-seller-photo-thumbnail={index}
-                      onClick={() => select(index)}
-                    >
-                      <OrionplaceImage
-                        src={photo.image}
-                        alt=""
-                        width={56}
-                        height={56}
-                      />
-                    </button>
-                  </li>
-                ))}
-              </ol>
-            ) : null}
-          </div>
-        </dialog>
-      ) : null}
-    </section>
-  );
-}

package/templates/components/orionplace/sellers/SellerSummary.README.md

@@ -1,62 +0,0 @@
-# SellerSummary · React
-
-## English
-
-`SellerSummary` presents one entry from `sellers_get` →
-`page_data.sellers.data`. `seller` supplies the logo, name, seller rating,
-review count, selling start date, product count and localized description.
-The description is rendered as plain text. An invalid or missing logo becomes
-the shared image placeholder, and every image reserves its space while loading.
-
-`layout="card"` uses the compact directory presentation. When `href` is set,
-the seller name is a normal link covering the card, so modifier clicks retain
-the browser's link behavior. `layout="profile"` uses the seller name as the
-page heading and shows the full description.
-
-The rating is limited to the supported zero-to-five range before the stars and
-accessible rating text are calculated. `seller_feedbacks` is the review count;
-`seller_since.date` supplies the selling-since badge; `count` is the returned
-number of product variants.
-
-The component emits no events and makes no requests. Its source is
-`components/orionplace/sellers/SellerSummary.tsx`; its primary contract is
-`interfaces/orionplace/sellers/ISellerDirectory.ts`.
-
-### Props
-
-| Prop                            | Meaning                                        |
-| ------------------------------- | ---------------------------------------------- |
-| `seller: ISellerDirectoryEntry` | Seller displayed by the component.             |
-| `layout?: "card" \| "profile"`  | Selects the supported component layout.        |
-| `href?: string`                 | Destination used by the component’s main link. |
-
-## Русский
-
-`SellerSummary` показывает одного продавца из `sellers_get` →
-`page_data.sellers.data`. В `seller` находятся логотип, название, рейтинг
-продавца, число отзывов, дата начала продаж, число вариантов товаров и
-локализованное описание. Описание выводится обычным текстом. Если адрес
-логотипа отсутствует или не подходит для изображения, компонент показывает
-общую заглушку. Размер изображения зарезервирован до его загрузки.
-
-`layout="card"` включает компактный вид для списка продавцов. Если задан
-`href`, название становится обычной ссылкой на всю карточку, поэтому щелчок с
-модификатором сохраняет поведение браузера. `layout="profile"` показывает
-название заголовком страницы и выводит полное описание.
-
-Перед выводом звёзд и доступного названия рейтинг ограничивается диапазоном от
-нуля до пяти. `seller_feedbacks` содержит число отзывов,
-`seller_since.date` — дату для отметки о начале продаж, а `count` — полученное
-число вариантов товаров.
-
-Компонент не отправляет события и запросы. Исходный файл:
-`components/orionplace/sellers/SellerSummary.tsx`; основной контракт:
-`interfaces/orionplace/sellers/ISellerDirectory.ts`.
-
-### Свойства
-
-| Свойство                        | Назначение                                  |
-| ------------------------------- | ------------------------------------------- |
-| `seller: ISellerDirectoryEntry` | Продавец, которого показывает компонент.    |
-| `layout?: "card" \| "profile"`  | Выбирает поддерживаемый вариант компоновки. |
-| `href?: string`                 | Адрес основной ссылки компонента.           |