orionplace-react 0.7.8 → 0.8.0

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

@@ -1,360 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceCatalog,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import type {
-  ISellerDirectoryEntry,
-  ISellerDirectoryFilters,
-  ISellerDirectoryRequest,
-  ISellerDirectoryResponse,
-} from '@/interfaces/orionplace/sellers/ISellerDirectory';
-import { findNavigationCategory, navigationCatalogCategories } from '@/lib/orionplace/catalog';
-import { directoryLabels } from '@/lib/orionplace/directoryLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { mergePagination } from '@/lib/orionplace/featureData';
-import {
-  emptySellerFilters,
-  hasSellerFilters,
-  sellerCategoryOptions,
-  sellerDirectoryRequest,
-  sellerProfileRequest,
-} from '@/lib/orionplace/sellerDirectory';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { OrionplaceSelect } from '@/components/orionplace/shared/OrionplaceSelect';
-import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
-import { SellerFilters } from './SellerFilters';
-import { SellerPhotoGallery } from './SellerPhotoGallery';
-import { SellerSummary } from './SellerSummary';
-import styles from './StorefrontSellers.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-type SellerPage = NonNullable<ISellerDirectoryResponse['page_data']>;
-
-export interface SellersLoadAction {
-  endpoint: 'sellers_get';
-  request: ISellerDirectoryRequest;
-  signal: AbortSignal;
-}
-
-export interface StorefrontSellersProps {
-  sellerId?: number;
-  initial?: SellerPage;
-  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;
-}
-
-export function StorefrontSellers({
-  sellerId,
-  initial,
-  initialError = '',
-  loadOnMount = true,
-  disabled = false,
-  sellerHref = (seller, locale) =>
-    `/sellers?seller=${seller.id}&locale=${encodeURIComponent(locale)}`,
-  allSellersHref = (locale) => `/sellers?locale=${encodeURIComponent(locale)}`,
-  onLoad,
-  onLoaded,
-  onFiltersChange,
-  onPageChange,
-}: StorefrontSellersProps) {
-  const init                          = useOrionplace(selectInit);
-  const singleSeller                  = Boolean(init?.visual_settings?.single_seller_mode);
-  const locale                        = useOrionplaceSelections((state) => state.localeCode);
-  const catalog                       = useOrionplaceCatalog((state) => state.catalog);
-  const labels                        = directoryLabels(locale);
-  const common                        = featureLabels(locale);
-  const initialAutomatic              = loadOnMount && !initial && !initialError;
-  const [filters, setFilters]         =
-    useState<ISellerDirectoryFilters>(emptySellerFilters);
-  const [sellers, setSellers]         = useState<ISellerDirectoryEntry[]>(
-    initial?.sellers.data ?? [],
-  );
-  const [pagination, setPagination]   = useState<Partial<IApiPagination>>(
-    initial?.sellers.rpag ?? {},
-  );
-  const [categoryIds, setCategoryIds] = useState<number[]>(
-    sellerId ? [] : (initial?.selects?.cats ?? []),
-  );
-  const [loaded, setLoaded]           = useState(Boolean(initial));
-  const [pending, setPending]         = useState(initialAutomatic);
-  const [error, setError]             = useState(initialError);
-  const activeRequest                 = useRef<AbortController | undefined>(undefined);
-  const requested                     = useRef(false);
-  const previousSellerId              = useRef(sellerId);
-  const callbacks                     = useRef({ onLoad, onLoaded });
-  callbacks.current                   = { onLoad, onLoaded };
-  const profile                       = sellerId ? sellers[0] : undefined;
-  const filtered                      = hasSellerFilters(filters);
-  const total                         =
-    pagination.selected_count ?? pagination.total_count ?? sellers.length;
-  const categories                    = sellerCategoryOptions(
-    categoryIds,
-    (id) => findNavigationCategory(navigationCatalogCategories(catalog), id),
-    locale,
-  );
-  const orderingOptions               = {
-    '-seller_raiting': labels.ratingHigh,
-    seller_raiting: labels.ratingLow,
-  };
-
-  async function load(
-    page = 1,
-    nextFilters = filters,
-    nextSellerId = sellerId,
-  ) {
-    if (disabled || singleSeller) {
-      return;
-    }
-    activeRequest.current?.abort();
-    const controller      = new AbortController();
-    activeRequest.current = controller;
-    setPending(true);
-    setError('');
-
-    try {
-      const data = await callbacks.current.onLoad({
-        endpoint: 'sellers_get',
-        request: nextSellerId
-          ? sellerProfileRequest(nextSellerId)
-          : sellerDirectoryRequest(nextFilters, page),
-        signal: controller.signal,
-      });
-      if (controller.signal.aborted) {
-        return;
-      }
-      if (!data.sellers) {
-        throw new Error('Missing seller list');
-      }
-
-      if (
-        !nextSellerId &&
-        page === 1 &&
-        !hasSellerFilters(nextFilters) &&
-        data.selects?.cats
-      ) {
-        setCategoryIds(data.selects.cats);
-      }
-      setSellers(data.sellers.data);
-      setPagination((previous) =>
-        mergePagination(page === 1 ? {} : previous, data.sellers.rpag),
-      );
-      setLoaded(true);
-      if (nextSellerId) {
-        callbacks.current.onLoaded?.(data.sellers.data[0] ?? null);
-      }
-    } catch (reason) {
-      if (!controller.signal.aborted) {
-        setError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (activeRequest.current === controller) {
-        activeRequest.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  function changeFilters(nextFilters: ISellerDirectoryFilters) {
-    setFilters(nextFilters);
-    onFiltersChange?.(nextFilters);
-    void load(1, nextFilters);
-  }
-
-  function changeOrdering(ordering: string) {
-    if (ordering !== '-seller_raiting' && ordering !== 'seller_raiting') {
-      return;
-    }
-    changeFilters({ ...filters, ordering });
-  }
-
-  function changePage(page: number) {
-    onPageChange?.(page);
-    void load(page);
-  }
-
-  useEffect(() => {
-    if (singleSeller) {
-      activeRequest.current?.abort();
-      requested.current = false;
-      return;
-    }
-    if (initial && sellerId) {
-      callbacks.current.onLoaded?.(initial.sellers.data[0] ?? null);
-    }
-    if (!requested.current && initialAutomatic) {
-      requested.current = true;
-      void load();
-    }
-    return () => {
-      activeRequest.current?.abort();
-      activeRequest.current = undefined;
-      requested.current     = false;
-    };
-  }, [singleSeller]);
-
-  useEffect(() => {
-    if (previousSellerId.current === sellerId) {
-      return;
-    }
-    previousSellerId.current = sellerId;
-    activeRequest.current?.abort();
-    activeRequest.current    = undefined;
-    const nextFilters        = emptySellerFilters();
-    setFilters(nextFilters);
-    setSellers(initial?.sellers.data ?? []);
-    setPagination(initial?.sellers.rpag ?? {});
-    setCategoryIds(sellerId ? [] : (initial?.selects?.cats ?? []));
-    setLoaded(Boolean(initial));
-    setPending(false);
-    setError(initialError);
-    if (initial && sellerId) {
-      callbacks.current.onLoaded?.(initial.sellers.data[0] ?? null);
-    } else if (loadOnMount && !initial && !initialError) {
-      void load(1, nextFilters, sellerId);
-    }
-  }, [sellerId]);
-
-  if (singleSeller) {
-    return null;
-  }
-
-  return (
-    <section
-      className={styles.root}
-      data-feature-part="StorefrontSellers"
-    >
-      {sellerId ? (
-        <a
-          className={styles.back}
-          href={allSellersHref(locale)}
-        >
-          ← {labels.allSellers}
-        </a>
-      ) : (
-        <h1 className={styles.title}>{labels.sellers}</h1>
-      )}
-
-      {error ? (
-        <div
-          className={styles.error}
-          role="alert"
-        >
-          <span>{error}</span>
-          <button
-            type="button"
-            disabled={pending || disabled}
-            onClick={() => void load(pagination.page ?? 1)}
-          >
-            {common.retry}
-          </button>
-        </div>
-      ) : null}
-      {pending ? (
-        <p
-          className="op-feature-loading"
-          role="status"
-        >
-          <span className={styles.screenReaderOnly}>{common.loading}</span>
-        </p>
-      ) : null}
-
-      {sellerId ? (
-        profile ? (
-          <div
-            className={styles.profile}
-            data-seller-profile
-          >
-            <SellerSummary
-              seller={profile}
-              layout="profile"
-            />
-            <SellerPhotoGallery
-              images={profile.images}
-              name={profile.seller_name}
-            />
-          </div>
-        ) : loaded && !pending ? (
-          <OrionplaceEmptyState
-            kind="stores"
-            size="large"
-            message={labels.sellerMissing}
-            description={labels.sellerMissingHint}
-          />
-        ) : null
-      ) : (
-        <div className={styles.directory}>
-          <aside aria-label={labels.filters}>
-            <SellerFilters
-              value={filters}
-              categories={categories}
-              disabled={disabled}
-              onChange={changeFilters}
-            />
-          </aside>
-          <div
-            className={styles.results}
-            aria-busy={pending || undefined}
-          >
-            <header className={styles.resultsHeader}>
-              <p data-seller-total>
-                {labels.results}: {total}
-              </p>
-              <div data-seller-sort>
-                <OrionplaceSelect
-                  value={filters.ordering}
-                  options={orderingOptions}
-                  label={labels.sort}
-                  compact
-                  disabled={disabled}
-                  onValueChange={changeOrdering}
-                />
-              </div>
-            </header>
-            {sellers.length ? (
-              <ul className={`${styles.list} ${pending ? styles.dimmed : ''}`}>
-                {sellers.map((seller) => (
-                  <li key={seller.id}>
-                    <SellerSummary
-                      seller={seller}
-                      href={sellerHref(seller, locale)}
-                    />
-                  </li>
-                ))}
-              </ul>
-            ) : loaded && !pending && filtered ? (
-              <OrionplaceEmptyState
-                kind="search"
-                message={labels.noMatches}
-              />
-            ) : loaded && !pending ? (
-              <OrionplaceEmptyState
-                kind="stores"
-                message={common.empty}
-              />
-            ) : null}
-            <StorefrontPagination
-              pagination={pagination}
-              pending={pending || disabled}
-              onChange={changePage}
-            />
-          </div>
-        </div>
-      )}
-    </section>
-  );
-}

package/templates/components/orionplace/shared/OrionplaceAvatar.README.md

@@ -1,35 +0,0 @@
-# OrionplaceAvatar
-
-## English
-
-`components/orionplace/shared/OrionplaceAvatar.tsx` shows a person's image or
-initials. If the image fails, the initials replace it. Changing `src` retries
-the image. The initial image or initials are included in server HTML.
-
-### Props
-
-| Prop                                     | Meaning                                                                                              |
-| ---------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| `src?: string \| null`                   | Photo URL. `null` (default) or an empty value shows initials.                                        |
-| `name?: string`                          | User name: the photo's alternative text and the source of the initials. Defaults to an empty string. |
-| `size?: "small" \| "regular" \| "large"` | `small`, `regular` (default) or `large`; each one sets the diameter of the circle.                   |
-
-Initials are the first letters of the first two words in `name`, for example
-"CB" for "Customer B"; without `name` the circle shows a neutral mark.
-
-## Русский
-
-`OrionplaceAvatar` показывает изображение человека или его инициалы. Если
-изображение не загрузилось, его заменяют инициалы. При смене `src` компонент
-повторяет загрузку. Начальное изображение или инициалы входят в HTML сервера.
-
-### Свойства
-
-| Свойство                                 | Назначение                                                                                    |
-| ---------------------------------------- | --------------------------------------------------------------------------------------------- |
-| `src?: string \| null`                   | Адрес фото. При `null` (по умолчанию) или пустом значении выводятся инициалы.                 |
-| `name?: string`                          | Имя пользователя: альтернативный текст фото и источник инициалов. По умолчанию пустая строка. |
-| `size?: "small" \| "regular" \| "large"` | `small`, `regular` (по умолчанию) или `large`; каждое значение задаёт диаметр круга.          |
-
-Инициалы — первые буквы первых двух слов `name`, например «CB» для
-«Customer B»; без `name` в круге выводится нейтральный знак.

package/templates/components/orionplace/shared/OrionplaceAvatar.module.css

@@ -1,35 +0,0 @@
-.root {
-  box-sizing: content-box;
-  display: inline-grid;
-  width: 2.5rem;
-  height: 2.5rem;
-  flex-shrink: 0;
-  place-items: center;
-  overflow: hidden;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 50%;
-  background: var(--orionplace-muted-surface);
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.root[data-avatar-size='small'] {
-  width: 2rem;
-  height: 2rem;
-  font-size: 0.6875rem;
-}
-
-.root[data-avatar-size='large'] {
-  width: 6rem;
-  height: 6rem;
-  font-size: 1.75rem;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}

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

@@ -1,61 +0,0 @@
-'use client';
-
-import { useEffect, useState } from 'react';
-import styles from './OrionplaceAvatar.module.css';
-
-export interface OrionplaceAvatarProps {
-  src?: string | null;
-  name?: string;
-  size?: 'small' | 'regular' | 'large';
-}
-
-function initials(name: string): string {
-  const letters = name
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, 2)
-    .map((word) => word[0]);
-
-  return letters.join('').toUpperCase() || '○';
-}
-
-export function OrionplaceAvatar({
-  src = null,
-  name = '',
-  size = 'regular',
-}: OrionplaceAvatarProps) {
-  const [failed, setFailed] = useState(false);
-
-  useEffect(() => {
-    setFailed(false);
-  }, [src]);
-
-  return (
-    <span
-      data-orionplace-avatar
-      data-avatar-size={size}
-      className={styles.root}
-    >
-      {src && !failed ? (
-        <img
-          src={src}
-          alt={name}
-          width={1}
-          height={1}
-          loading="lazy"
-          decoding="async"
-          className={styles.image}
-          onError={() => setFailed(true)}
-        />
-      ) : (
-        <span
-          role={name ? 'img' : undefined}
-          aria-label={name || undefined}
-          aria-hidden={name ? undefined : true}
-        >
-          {initials(name)}
-        </span>
-      )}
-    </span>
-  );
-}

package/templates/components/orionplace/shared/OrionplaceBreadcrumbs.README.md

@@ -1,33 +0,0 @@
-# OrionplaceBreadcrumbs
-
-## English
-
-`components/orionplace/shared/OrionplaceBreadcrumbs.tsx` shows the current
-page's path. The first Home link uses the selected locale from the React
-selection store. The final entry is always current-page text, even when its
-`to` address is supplied. The initial path renders in server HTML.
-
-### Props
-
-| Prop                   | Meaning                                                                |
-| ---------------------- | ---------------------------------------------------------------------- |
-| `items: IBreadcrumb[]` | Entries rendered by the component in their supplied order.             |
-| `home?: boolean`       | Includes the localized Home entry at the beginning of the path.        |
-| `label?: string`       | Visible or accessible name for the component’s main control or region. |
-| `loading?: boolean`    | Controls native image loading priority.                                |
-
-## Русский
-
-`OrionplaceBreadcrumbs` показывает путь к текущей странице. Первая ссылка
-«Главная» сохраняет выбранный язык из React-хранилища. Последний пункт всегда
-показан как текст текущей страницы, даже если для него передан адрес `to`.
-Начальный путь входит в HTML ответа сервера.
-
-### Свойства
-
-| Свойство               | Назначение                                                    |
-| ---------------------- | ------------------------------------------------------------- |
-| `items: IBreadcrumb[]` | Записи, которые компонент показывает в переданном порядке.    |
-| `home?: boolean`       | Добавляет локализованную «Главную» в начало пути.             |
-| `label?: string`       | Видимое или доступное название основного элемента компонента. |
-| `loading?: boolean`    | Управляет нативным приоритетом загрузки изображения.          |

package/templates/components/orionplace/shared/OrionplaceBreadcrumbs.module.css

@@ -1,81 +0,0 @@
-.root {
-  min-width: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.list,
-.placeholder {
-  display: flex;
-  min-width: 0;
-  flex-wrap: wrap;
-  align-items: center;
-  column-gap: 0.5rem;
-  row-gap: 0.25rem;
-}
-
-.list {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.item {
-  display: flex;
-  min-width: 0;
-  align-items: center;
-  column-gap: 0.5rem;
-}
-
-.current,
-.plain,
-.link {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.current {
-  color: var(--orionplace-text);
-}
-
-.link {
-  color: inherit;
-  text-decoration: none;
-}
-
-.link:focus-visible {
-  color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .link:hover {
-    color: var(--orionplace-text);
-  }
-}
-
-.placeholder {
-  animation: breadcrumb-pulse 1.5s ease-in-out infinite;
-}
-
-.placeholderPart {
-  display: flex;
-  height: 1rem;
-  align-items: center;
-}
-
-.placeholderPart span {
-  width: 100%;
-  height: 0.75rem;
-  background: var(--orionplace-border);
-}
-
-@keyframes breadcrumb-pulse {
-  50% { opacity: 0.5; }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .placeholder { animation: none; }
-}

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

@@ -1,91 +0,0 @@
-'use client';
-
-import { StorefrontLink as Link } from '@/lib/orionplace/navigation';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { IBreadcrumb } from '@/interfaces/orionplace/shared/IBreadcrumb';
-import styles from './OrionplaceBreadcrumbs.module.css';
-
-export interface OrionplaceBreadcrumbsProps {
-  items: IBreadcrumb[];
-  home?: boolean;
-  label?: string;
-  loading?: boolean;
-}
-
-function labels(locale: string) {
-  return locale.toLowerCase().startsWith('ru')
-    ? { path: 'Путь к странице', home: 'Главная' }
-    : locale.toLowerCase().startsWith('es') ? { path: 'Ruta de la página', home: 'Inicio' } : { path: 'Page path', home: 'Home' };
-}
-
-export function OrionplaceBreadcrumbs({
-  items,
-  home = true,
-  label = '',
-  loading = false,
-}: OrionplaceBreadcrumbsProps) {
-  const localeCode = useOrionplaceSelections((state) => state.localeCode);
-  const copy = labels(localeCode);
-  const start: IBreadcrumb[] = home
-    ? [{
-        id: 'home',
-        label: copy.home,
-        to: { path: '/', query: { locale: localeCode } },
-      }]
-    : [];
-  const path = [...start, ...items];
-
-  if (!loading && path.length === 0) {
-    return null;
-  }
-
-  return (
-    <nav
-      aria-label={label || copy.path}
-      aria-busy={loading || undefined}
-      data-feature-part="OrionplaceBreadcrumbs"
-      data-orionplace-breadcrumbs
-      className={styles.root}
-    >
-      {loading ? (
-        <div
-          aria-hidden="true"
-          data-breadcrumbs-placeholder
-          className={styles.placeholder}
-        >
-          {[3, 5, 7, 10].map((width) => (
-            <span
-              key={width}
-              className={styles.placeholderPart}
-              style={{ width: `${width}rem` }}
-            >
-              <span />
-            </span>
-          ))}
-        </div>
-      ) : (
-        <ol className={styles.list}>
-          {path.map((item, index) => (
-            <li key={item.id} className={styles.item}>
-              {index > 0 && <span aria-hidden="true">/</span>}
-              {index === path.length - 1 ? (
-                <span aria-current="page" className={styles.current}>
-                  {item.label}
-                </span>
-              ) : item.to ? (
-                <Link
-                  href={{ pathname: item.to.path, query: item.to.query }}
-                  className={styles.link}
-                >
-                  {item.label}
-                </Link>
-              ) : (
-                <span className={styles.plain}>{item.label}</span>
-              )}
-            </li>
-          ))}
-        </ol>
-      )}
-    </nav>
-  );
-}