orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,182 @@
+.root {
+  position: relative;
+  display: grid;
+  min-width: 0;
+  gap: 1rem;
+  color: var(--orionplace-text);
+}
+
+.card {
+  grid-template-columns: 4.5rem minmax(0, 1fr);
+}
+
+.profile {
+  grid-template-columns: 1fr;
+}
+
+.logo {
+  box-sizing: border-box;
+  width: 100%;
+  aspect-ratio: 1;
+  padding: 0.5rem;
+  border: 1px solid var(--orionplace-border);
+  background: var(--orionplace-surface);
+  object-fit: contain;
+}
+
+.profile .logo {
+  max-width: 10rem;
+  padding: 1rem;
+}
+
+.content {
+  display: grid;
+  min-width: 0;
+  align-content: start;
+  gap: 0.75rem;
+}
+
+.profileTitle,
+.cardTitle,
+.count,
+.pitch {
+  margin: 0;
+}
+
+/*
+ * Nuxt's text-2xl, then text-3xl once the sellers page is 592px wide:
+ * 24px on a 32px line, 30px on 36px. The profile follows the width of the
+ * sellers page around it (its `sellers` container), not the screen width;
+ * 592px is the width the full-width page of the Nuxt reference gives it on
+ * a 640px screen.
+ */
+.profileTitle {
+  overflow-wrap: anywhere;
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 2rem;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+@container sellers (min-width: 592px) {
+  .profileTitle {
+    font-size: 1.875rem;
+    line-height: 2.25rem;
+  }
+}
+
+.cardTitle {
+  overflow-wrap: anywhere;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.link {
+  color: inherit;
+  text-decoration: none;
+  outline: none;
+}
+
+.link::after {
+  position: absolute;
+  inset: 0;
+  content: '';
+}
+
+.link:focus-visible {
+  opacity: 0.7;
+}
+
+@media (hover: hover) {
+  .link:hover {
+    opacity: 0.7;
+  }
+}
+
+.ratingRow {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem 0.75rem;
+}
+
+.rating {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-variant-numeric: tabular-nums;
+}
+
+.stars {
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+  letter-spacing: 0.12em;
+}
+
+.emptyStars {
+  color: var(--orionplace-border);
+}
+
+.filledStars {
+  position: absolute;
+  inset-block: 0;
+  left: 0;
+  overflow: hidden;
+  color: var(--orionplace-text);
+  white-space: nowrap;
+}
+
+.muted,
+.count {
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: calc(1 / 0.75);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.since {
+  display: inline-flex;
+  align-items: center;
+  padding: 0.125rem 0.5rem;
+  background: var(--orionplace-inverse-surface);
+  color: var(--orionplace-inverse-text);
+  font-size: 0.6875rem;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.count {
+  font-variant-numeric: tabular-nums;
+}
+
+.pitch {
+  color: var(--orionplace-muted);
+  font-size: 0.875rem;
+  line-height: 1.5rem;
+}
+
+.clampedPitch {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+
+.fullPitch {
+  max-width: 48rem;
+}
+
+@container sellers (min-width: 592px) {
+  .profile {
+    grid-template-columns: 10rem minmax(0, 1fr);
+    gap: 2rem;
+  }
+}

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

@@ -0,0 +1,107 @@
+'use client';
+
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import type { ISellerDirectoryEntry } from '@/interfaces/orionplace/sellers/ISellerDirectory';
+import { directoryLabels } from '@/lib/orionplace/directoryLabels';
+import {
+  getAvailableNestedValueFromObject,
+  plainText,
+} from '@/lib/orionplace/presentation';
+import {
+  SELLER_RATING_MAXIMUM,
+  sellerLogo,
+  sellerRating,
+  sellerRatingPercent,
+} from '@/lib/orionplace/sellerDirectory';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import styles from './SellerSummary.module.css';
+
+export interface SellerSummaryProps {
+  seller: ISellerDirectoryEntry;
+  layout?: 'card' | 'profile';
+  href?: string;
+}
+
+export function SellerSummary({
+  seller,
+  layout = 'card',
+  href,
+}: SellerSummaryProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = directoryLabels(locale);
+  const profile = layout === 'profile';
+  const rating = sellerRating(seller).toFixed(1);
+  const ratingLabel =
+    `${labels.rating}: ${rating} ${labels.outOf} ${SELLER_RATING_MAXIMUM}`;
+  const pitch = plainText(
+    getAvailableNestedValueFromObject(
+      seller.locale,
+      locale,
+      'seller_pitch',
+    ),
+  );
+  const imageSize = profile ? 160 : 72;
+
+  return (
+    <article
+      className={`${styles.root} ${profile ? styles.profile : styles.card}`}
+      data-feature-part="SellerSummary"
+      data-seller-layout={layout}
+    >
+      <OrionplaceImage
+        src={sellerLogo(seller)}
+        alt={seller.seller_name}
+        width={imageSize}
+        height={imageSize}
+        className={styles.logo}
+      />
+      <div className={styles.content}>
+        {profile ? (
+          <h1 className={styles.profileTitle}>{seller.seller_name}</h1>
+        ) : (
+          <h2 className={styles.cardTitle}>
+            {href ? (
+              <a href={href} className={styles.link}>
+                {seller.seller_name}
+              </a>
+            ) : seller.seller_name}
+          </h2>
+        )}
+        <div className={styles.ratingRow} data-seller-rating>
+          <span
+            role="img"
+            aria-label={ratingLabel}
+            className={styles.rating}
+          >
+            <span className={styles.stars} aria-hidden="true">
+              <span className={styles.emptyStars}>★★★★★</span>
+              <span
+                className={styles.filledStars}
+                style={{ width: `${sellerRatingPercent(seller)}%` }}
+              >
+                ★★★★★
+              </span>
+            </span>
+            <span aria-hidden="true">{rating}</span>
+          </span>
+          <span className={styles.muted}>
+            {labels.reviews}: {seller.seller_feedbacks ?? 0}
+          </span>
+          {seller.seller_since?.date ? (
+            <span className={styles.since} data-seller-since>
+              {labels.since} {seller.seller_since.date}
+            </span>
+          ) : null}
+        </div>
+        <p className={styles.count} data-seller-count>
+          {labels.productsCount}: {seller.count}
+        </p>
+        {pitch ? (
+          <p className={`${styles.pitch} ${profile ? styles.fullPitch : styles.clampedPitch}`}>
+            {pitch}
+          </p>
+        ) : null}
+      </div>
+    </article>
+  );
+}

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

@@ -0,0 +1,120 @@
+# StorefrontSellers · React
+
+## English
+
+`StorefrontSellers` loads the seller directory or one seller profile through
+`onLoad`. Every call identifies the `sellers_get` endpoint and includes the
+exact request and an abort signal. Pass a server response through `initial` to
+render confirmed sellers in the initial HTML. Without it, `loadOnMount` starts
+the request after hydration. `initialError` presents a server-side failure with
+Retry and prevents an automatic duplicate request.
+
+Without `sellerId`, the component sends the current name, minimum rating,
+category IDs and rating order. Empty narrowing fields are omitted. Changing a
+filter or sorting restarts page one and cancels an unfinished request; page
+controls request the selected page. `onFiltersChange(filters)` receives the
+complete next filter value before that request, and `onPageChange(page)`
+receives the selected page.
+
+Category choices come from `page_data.selects.cats` on a confirmed first page
+without narrowing filters. The IDs are matched to localized public categories
+from the catalog store. Later filtered pages do not replace those choices. The
+result count uses `selected_count`, then `total_count`, then the number of
+returned sellers. Each list entry uses `SellerSummary`; `sellerHref(seller,
+locale)` supplies its normal profile link.
+
+With `sellerId`, the request sends that ID and the component shows the first
+returned seller through the profile layout and `SellerPhotoGallery`.
+`onLoaded(seller)` receives that seller after a confirmed response, or `null`
+when the ID has no result. The missing profile state and the all-sellers link
+remain localized. Changing `sellerId` cancels the old request and resets the
+previous profile before using a matching `initial` response or loading again.
+
+`disabled` prevents new requests and editable actions. An error leaves any
+previously confirmed list or profile visible, and Retry repeats the current
+page and scope.
+
+Source is maintained in
+`components/orionplace/sellers/StorefrontSellers.tsx`; the request and response
+contract is `interfaces/orionplace/sellers/ISellerDirectory.ts`.
+
+### Props
+
+| Prop                                                                                                                      | Meaning                                                                                       |
+| ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- |
+| `sellerId?: number`                                                                                                       | ID of the seller handled by StorefrontSellers.                                                |
+| `initial?: { sellers: { data: ISellerDirectoryEntry[]; rpag: IApiPagination \| null; }; selects?: { cats: number[]; }; }` | Server-provided initial data used for the first render and hydration.                         |
+| `initialError?: string`                                                                                                   | Server-provided initial error used for the first render and hydration.                        |
+| `loadOnMount?: boolean`                                                                                                   | Starts the load callback after hydration when server data was not supplied.                   |
+| `disabled?: boolean`                                                                                                      | Disables the component controls and prevents new actions.                                     |
+| `sellerHref?: (seller: ISellerDirectoryEntry, locale: string) => string`                                                  | Builds the seller destination from the callback arguments.                                    |
+| `allSellersHref?: (locale: string) => string`                                                                             | Builds the all sellers destination from the callback arguments.                               |
+| `onLoad: (action: SellersLoadAction) => Promise<SellerPage> \| SellerPage`                                                | Called when the component needs its primary data. The callback payload is shown in its type.  |
+| `onLoaded?: (seller: ISellerDirectoryEntry \| null) => void`                                                              | Called when the requested data loads successfully. The callback payload is shown in its type. |
+| `onFiltersChange?: (filters: ISellerDirectoryFilters) => void`                                                            | Called when the seller filters change. The callback payload is shown in its type.             |
+| `onPageChange?: (page: number) => void`                                                                                   | Called when the visitor requests another page. The callback payload is shown in its type.     |
+
+
+When Application Load reports `init.visual_settings.single_seller_mode: true`, StorefrontSellers renders no directory and sends no seller-directory requests. The generated storefront redirects direct `/sellers` visits to the catalog while preserving the locale.
+
+## Русский
+
+`StorefrontSellers` загружает каталог продавцов или профиль одного продавца
+через `onLoad`. Каждый вызов указывает метод `sellers_get` и передаёт точный
+запрос и сигнал отмены. Ответ сервера можно передать через `initial`, чтобы
+подтверждённые продавцы вошли в первоначальный HTML. Без него `loadOnMount`
+запускает запрос после гидратации. `initialError` показывает ошибку серверной
+загрузки с кнопкой повтора и не создаёт повторный автоматический запрос.
+
+Без `sellerId` компонент отправляет текущее название, минимальный рейтинг, ID
+категорий и порядок по рейтингу. Пустые ограничивающие поля не попадают в
+запрос. Изменение фильтра или сортировки снова запрашивает первую страницу и
+отменяет незавершённый запрос; пагинация запрашивает выбранную страницу.
+`onFiltersChange(filters)` перед этим получает всё новое значение фильтров, а
+`onPageChange(page)` — выбранную страницу.
+
+Категории берутся из `page_data.selects.cats` подтверждённой первой страницы
+без ограничивающих фильтров. Их ID сопоставляются с локализованными публичными
+категориями из хранилища каталога. Следующие ответы с фильтрами не заменяют эти
+варианты. Для числа результатов сначала используется `selected_count`, затем
+`total_count`, затем число полученных продавцов. Каждый элемент списка выводит
+`SellerSummary`; обычную ссылку профиля задаёт `sellerHref(seller, locale)`.
+
+С `sellerId` запрос содержит этот ID, а компонент показывает первого
+полученного продавца в виде профиля вместе с `SellerPhotoGallery`.
+`onLoaded(seller)` получает подтверждённого продавца или `null`, если продавца
+с таким ID нет. Пустое состояние и ссылка на всех продавцов локализованы.
+Изменение `sellerId` отменяет старый запрос и очищает прежний профиль, после
+чего компонент использует подходящий ответ `initial` или загружает данные.
+
+`disabled` запрещает новые запросы и редактируемые действия. При ошибке ранее
+подтверждённый список или профиль остаётся видимым, а кнопка повтора повторяет
+текущую страницу с теми же условиями.
+
+Исходный файл:
+`components/orionplace/sellers/StorefrontSellers.tsx`; контракт запроса и
+ответа: `interfaces/orionplace/sellers/ISellerDirectory.ts`.
+
+### Свойства
+
+| Свойство                                                                                                                  | Назначение                                                                                     |
+| ------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
+| `sellerId?: number`                                                                                                       | ID продавца, с которым работает StorefrontSellers.                                             |
+| `initial?: { sellers: { data: ISellerDirectoryEntry[]; rpag: IApiPagination \| null; }; selects?: { cats: number[]; }; }` | Начальные данные с сервера для первого рендера и гидратации.                                   |
+| `initialError?: string`                                                                                                   | Начальное значение ошибки, полученное на сервере для первого рендера и гидратации.             |
+| `loadOnMount?: boolean`                                                                                                   | Запускает загрузку после гидратации, если серверные данные не переданы.                        |
+| `disabled?: boolean`                                                                                                      | Блокирует элементы компонента и новые действия.                                                |
+| `sellerHref?: (seller: ISellerDirectoryEntry, locale: string) => string`                                                  | Строит адрес ссылки продавца из аргументов обработчика.                                        |
+| `allSellersHref?: (locale: string) => string`                                                                             | Строит адрес ссылки всех продавцов из аргументов обработчика.                                  |
+| `onLoad: (action: SellersLoadAction) => Promise<SellerPage> \| SellerPage`                                                | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.     |
+| `onLoaded?: (seller: ISellerDirectoryEntry \| null) => void`                                                              | Вызывается, когда запрошенные данные успешно загружены. Данные обработчика указаны в его типе. |
+| `onFiltersChange?: (filters: ISellerDirectoryFilters) => void`                                                            | Вызывается, когда изменяются фильтры продавцов. Данные обработчика указаны в его типе.         |
+| `onPageChange?: (page: number) => void`                                                                                   | Вызывается, когда покупатель открывает другую страницу. Данные обработчика указаны в его типе. |
+
+При `init.visual_settings.single_seller_mode: true` каталог продавцов скрыт и не отправляет запросы. Прямой переход на `/sellers` открывает каталог с выбранным языком.
+
+## Category visibility / Видимость категорий
+
+Navigation omits categories with `exclude_from_tree: true` and all their descendants. The full published catalog remains available for product main-category names, links and breadcrumbs.
+
+В навигации скрываются категории с `exclude_from_tree: true` и все их подкатегории. Полный каталог опубликованных категорий сохраняется для названий, ссылок и цепочек основной категории товара.

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

@@ -0,0 +1,147 @@
+/*
+ * The directory, the profile and their parts (SellerFilters, SellerSummary)
+ * follow the width of this component, not of the screen. The 660px and
+ * 880px rules below are the container rules of the Nuxt reference.
+ */
+.root {
+  composes: feature from '../shared/features.module.css';
+  display: grid;
+  /* op-feature-stack: 20px between the parts, as in the other packages. */
+  gap: 1.25rem;
+  container: sellers / inline-size;
+}
+
+.title {
+  composes: title from '../shared/features.module.css';
+}
+
+.back {
+  width: fit-content;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  letter-spacing: 0.08em;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.back:focus-visible {
+  color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .back:hover {
+    color: var(--orionplace-text);
+  }
+}
+
+.error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.875rem 1rem;
+  border: 1px solid var(--orionplace-danger);
+  color: var(--orionplace-danger);
+}
+
+.error button {
+  min-height: 2.5rem;
+  padding: 0 1rem;
+  border: 1px solid currentColor;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+}
+
+.error button:disabled {
+  cursor: wait;
+  opacity: 0.6;
+}
+
+.directory {
+  display: grid;
+  min-width: 0;
+  gap: 1.5rem;
+}
+
+.directory aside,
+.results {
+  min-width: 0;
+}
+
+.results {
+  display: grid;
+  align-content: start;
+  gap: 1.25rem;
+}
+
+.resultsHeader {
+  box-sizing: border-box;
+  display: flex;
+  min-height: 3rem;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding-bottom: 0.5rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.resultsHeader p {
+  margin: 0;
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.list {
+  display: grid;
+  gap: 2rem 1.5rem;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.list li {
+  min-width: 0;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid var(--orionplace-border);
+}
+
+.dimmed {
+  opacity: 0.6;
+}
+
+.profile {
+  display: grid;
+  gap: 2.5rem;
+}
+
+.screenReaderOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@container sellers (min-width: 660px) {
+  .list {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@container sellers (min-width: 880px) {
+  .directory {
+    grid-template-columns: 15rem minmax(0, 1fr);
+    gap: 2.5rem;
+  }
+}