orionplace-react 0.7.8 → 0.8.0

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

@@ -1,182 +0,0 @@
-.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

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

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

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