orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,314 @@
+/*
+ * 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

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

@@ -0,0 +1,62 @@
+# 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`                 | Адрес основной ссылки компонента.           |