orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/catalog/StorefrontCatalog.tsx

@@ -1,304 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type MouseEvent,
-} from 'react';
-import {
-  useOrionplaceCatalog,
-  useOrionplaceCatalogStore,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { ICategory } from '@/interfaces/orionplace/category/ICategory';
-import type { ICatalogLoadResponse } from '@/interfaces/orionplace/catalog/ICatalogDirectory';
-import {
-  catalogCategoryPath,
-  catalogCategoryTrail,
-  navigationCatalogCategories,
-} from '@/lib/orionplace/catalog';
-import { directoryLabels } from '@/lib/orionplace/directoryLabels';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import {
-  getAvailableNestedValueFromObject,
-  safePublicUrl,
-} from '@/lib/orionplace/presentation';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import styles from './StorefrontCatalog.module.css';
-import { apiErrorMessage } from '@/lib/orionplace/api';
-
-type CatalogData = NonNullable<ICatalogLoadResponse['page_data']>;
-
-export interface StorefrontCatalogLoadAction {
-  endpoint: 'catalog_load';
-  request: Record<string, never>;
-  signal: AbortSignal;
-}
-
-export interface StorefrontCatalogProps {
-  initialData?: CatalogData;
-  initialError?: string;
-  loadOnMount?: boolean;
-  disabled?: boolean;
-  categoryHref?: (categoryId: number, locale: string) => string;
-  onLoad: (
-    action: StorefrontCatalogLoadAction,
-  ) => Promise<CatalogData> | CatalogData;
-  onSelectCategory?: (category: ICategory) => void;
-  onDataChange?: (data: CatalogData) => void;
-  /** The open category level when the page keeps it (with `onOpenBranch`). */
-  branch?: number;
-  /** Opens a level (no id: all categories); the page stores it, e.g. in the address. */
-  onOpenBranch?: (categoryId?: number) => void;
-}
-
-function catalogData(value: unknown): CatalogData {
-  if (
-    !value ||
-    typeof value !== 'object' ||
-    !('tree' in value) ||
-    !Array.isArray(value.tree)
-  ) {
-    throw new Error('The catalog response does not contain a category tree.');
-  }
-
-  return value as CatalogData;
-}
-
-export function StorefrontCatalog({
-  initialData,
-  initialError = '',
-  loadOnMount,
-  disabled = false,
-  categoryHref = (categoryId, locale) =>
-    `/category/${categoryId}?locale=${encodeURIComponent(locale)}`,
-  onLoad,
-  onSelectCategory,
-  onDataChange,
-  branch,
-  onOpenBranch,
-}: StorefrontCatalogProps) {
-  const storeCatalog = useOrionplaceCatalog((state) => state.catalog);
-  const catalogStore = useOrionplaceCatalogStore();
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = directoryLabels(locale);
-  const common = featureLabels(locale);
-  const automaticLoad = loadOnMount ?? initialData === undefined;
-  const request = useRef<AbortController | undefined>(undefined);
-  const loadRef = useRef(onLoad);
-  const [snapshot, setSnapshot] = useState(initialData?.tree);
-  const [trailIds, setTrailIds] = useState<number[]>([]);
-  const [loaded, setLoaded] = useState(initialData !== undefined);
-  const [pending, setPending] = useState(
-    automaticLoad && initialData === undefined,
-  );
-  const [error, setError] = useState(initialError);
-  loadRef.current = onLoad;
-
-  const tree       = snapshot ?? storeCatalog;
-  const roots      = useMemo(() => navigationCatalogCategories(tree), [tree]);
-  const trail      = useMemo(
-    () => onOpenBranch
-      ? branch ? catalogCategoryPath(roots, branch) : []
-      : catalogCategoryTrail(roots, trailIds),
-    [roots, trailIds, branch, Boolean(onOpenBranch)],
-  );
-  const categories = navigationCatalogCategories(
-    trail.at(-1)?.childs ?? roots,
-  );
-  const busy       = disabled || pending;
-
-  function title(category: ICategory) {
-    return getAvailableNestedValueFromObject(
-      category.locale,
-      locale,
-      'cg_name',
-    ) || String(category.id);
-  }
-
-  async function load() {
-    if (request.current || disabled) {
-      return;
-    }
-    const controller = new AbortController();
-    request.current = controller;
-    setPending(true);
-    setError('');
-    try {
-      const result = catalogData(await loadRef.current({
-        endpoint: 'catalog_load',
-        request: {},
-        signal: controller.signal,
-      }));
-      if (controller.signal.aborted) {
-        return;
-      }
-      setSnapshot(result.tree);
-      setTrailIds([]);
-      setLoaded(true);
-      catalogStore.getState().setCatalogTree(result.tree);
-      onDataChange?.(result);
-    } catch (reason) {
-      if (!(reason instanceof Error && reason.name === 'AbortError')) {
-        setError(
-          apiErrorMessage(reason) || common.failed,
-        );
-      }
-    } finally {
-      if (request.current === controller) {
-        request.current = undefined;
-        setPending(false);
-      }
-    }
-  }
-
-  function openBranch(category?: ICategory) {
-    // A new level starts at the top, as a new page does.
-    window.scrollTo({ top: 0, behavior: 'instant' });
-    if (onOpenBranch) {
-      onOpenBranch(category?.id);
-    } else {
-      setTrailIds(
-        category ? catalogCategoryPath(roots, category.id).map((item) => item.id) : [],
-      );
-    }
-  }
-
-  function selectCategory(
-    event: MouseEvent<HTMLAnchorElement>,
-    category: ICategory,
-  ) {
-    const modified = event.button > 0 || event.metaKey || event.ctrlKey ||
-      event.shiftKey || event.altKey;
-    if (modified || !onSelectCategory) {
-      return;
-    }
-    event.preventDefault();
-    onSelectCategory(category);
-  }
-
-  useEffect(() => {
-    if (initialData) {
-      catalogStore.getState().setCatalogTree(initialData.tree);
-    }
-    if (automaticLoad) {
-      void load();
-    }
-
-    return () => request.current?.abort();
-  }, []);
-
-  useEffect(() => {
-    const normalized = catalogCategoryTrail(roots, trailIds)
-      .map((category) => category.id);
-    if (normalized.join(',') !== trailIds.join(',')) {
-      setTrailIds(normalized);
-    }
-  }, [roots, trailIds]);
-
-  return (
-    <section
-      className={styles.root}
-      aria-busy={pending}
-      data-feature-part="StorefrontCatalog"
-    >
-      <header className={styles.heading}>
-        <h1>{labels.catalog}</h1>
-        <button
-          type="button"
-          className={styles.button}
-          disabled={busy}
-          onClick={() => void load()}
-        >
-          {labels.refresh}
-        </button>
-      </header>
-
-      <nav className={styles.trail} aria-label={labels.categories}>
-        <button
-          type="button"
-          className={styles.button}
-          disabled={busy}
-          aria-current={!trail.length ? 'page' : undefined}
-          onClick={() => openBranch()}
-        >
-          {common.all}
-        </button>
-        {trail.map((category, index) => (
-          <button
-            key={category.id}
-            type="button"
-            className={styles.button}
-            disabled={busy}
-            aria-current={index === trail.length - 1 ? 'page' : undefined}
-            onClick={() => openBranch(category)}
-          >
-            {title(category)}
-          </button>
-        ))}
-      </nav>
-
-      {error ? <p className={styles.error} role="alert">{error}</p> : null}
-      {pending ? (
-        <p className="op-feature-loading" role="status">
-          <span className={styles.screenReaderOnly}>{common.loading}</span>
-        </p>
-      ) : null}
-
-      {categories.length ? (
-        <ul className={styles.grid}>
-          {categories.map((category) => {
-            const children = navigationCatalogCategories(category.childs);
-            const href = safePublicUrl(categoryHref(category.id, locale));
-
-            return (
-              <li key={category.id} data-catalog-category={category.id}>
-                {category.menu_image || category.logo_image ? (
-                  <OrionplaceImage
-                    src={category.menu_image || category.logo_image}
-                    alt={title(category)}
-                    width={400}
-                    height={300}
-                    className={styles.image}
-                  />
-                ) : null}
-                <h2>{title(category)}</h2>
-                {children.length ? (
-                  <button
-                    type="button"
-                    className={styles.button}
-                    disabled={busy}
-                    data-catalog-branch={category.id}
-                    onClick={() => openBranch(category)}
-                  >
-                    {labels.categories} <span aria-hidden="true">→</span>
-                  </button>
-                ) : null}
-                <a
-                  href={href || undefined}
-                  className={`${styles.button} ${styles.primary}`}
-                  aria-disabled={busy || !href || undefined}
-                  data-catalog-products={category.id}
-                  onClick={(event) => {
-                    if (busy || !href) {
-                      event.preventDefault();
-                      return;
-                    }
-                    selectCategory(event, category);
-                  }}
-                >
-                  {labels.products} <span aria-hidden="true">→</span>
-                </a>
-              </li>
-            );
-          })}
-        </ul>
-      ) : loaded && !pending ? (
-        <OrionplaceEmptyState kind="generic" message={common.empty} />
-      ) : null}
-    </section>
-  );
-}

package/templates/components/orionplace/categories/CategoryGroup.README.md

@@ -1,68 +0,0 @@
-# CategoryGroup
-
-## English
-
-`CategoryGroup` displays public category tiles from the catalog store with each
-category's localized `cg_name` and `logo_image`. Missing images use the shared
-placeholder. Clicking an available tile calls `onSelect(category)` with the
-complete category object.
-
-Without `parentId`, the component applies Application Load's home-category
-settings. `front_categories_ordering="order"` sorts public root categories by
-`ordering`. `views` includes public descendants and sorts by `c_views`.
-`do_not_show` returns no tiles. The configured direction and positive count are
-then applied. With `parentId`, the component instead displays that public
-category's immediate public children in catalog order.
-
-Tiles are unavailable until Application Load succeeds and whenever `disabled`
-is true. Supplying `categoryHref(categoryId)` makes valid paths real links for
-server rendering and search engines. A plain click still calls `onSelect`, while
-a modifier click retains the browser's link behavior. Without `onSelect`, a
-plain link navigates directly. Disabled links prevent both navigation and
-selection.
-
-### Props
-
-| Prop                                            | Meaning                                                                                                  |
-| ----------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `disabled?: boolean`                            | Disables the component controls and prevents new actions.                                                |
-| `parentId?: number`                             | Parent category ID used to select direct child categories.                                               |
-| `categoryHref?: (categoryId: number) => string` | Builds the category destination from the callback arguments.                                             |
-| `onSelect?: (category: ICategory) => void`      | Passes the available category object when its tile is selected. The application handles navigation. |
-
-## Русский
-
-`CategoryGroup` показывает плитки публичных категорий из хранилища каталога с
-локализованным названием `cg_name` и изображением `logo_image`. При отсутствии
-изображения используется общая заглушка. Нажатие на доступную плитку вызывает
-`onSelect(category)` с полным объектом категории.
-
-Без `parentId` компонент применяет настройки категорий главной страницы из
-Application Load. `front_categories_ordering="order"` сортирует публичные
-корневые категории по `ordering`. Значение `views` добавляет публичных потомков
-и сортирует их по `c_views`. `do_not_show` скрывает все плитки. После этого
-применяются выбранное направление и положительное ограничение количества. При
-наличии `parentId` показываются только непосредственные публичные потомки этой
-публичной категории в порядке каталога.
-
-Плитки недоступны до успешного завершения Application Load и при
-`disabled=true`. Если передать `categoryHref(categoryId)`, допустимые пути
-становятся настоящими ссылками в серверном HTML. Обычное нажатие по-прежнему
-вызывает `onSelect`, а нажатие с модификатором сохраняет поведение браузера.
-Без `onSelect` обычная ссылка открывается напрямую. Недоступная ссылка не
-выполняет переход и не сообщает о выборе.
-
-### Свойства
-
-| Свойство                                        | Назначение                                                                                                |
-| ----------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `disabled?: boolean`                            | Блокирует элементы компонента и новые действия.                                                           |
-| `parentId?: number`                             | ID родительской категории для выбора непосредственных подкатегорий.                                       |
-| `categoryHref?: (categoryId: number) => string` | Строит адрес ссылки категории из аргументов обработчика.                                                  |
-| `onSelect?: (category: ICategory) => void`      | Передаёт объект доступной категории при выборе её плитки. Приложение обрабатывает переход. |
-
-## 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/categories/CategoryGroup.module.css

@@ -1,110 +0,0 @@
-.root {
-  container: categories / inline-size;
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 8px;
-}
-
-.tile {
-  box-sizing: border-box;
-  display: flex;
-  min-width: 0;
-  height: 64px;
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  outline: none;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font: inherit;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  transition: border-color 150ms;
-}
-
-.tile:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .tile:hover {
-    border-color: var(--orionplace-text);
-  }
-}
-
-.tile:disabled,
-.tile[aria-disabled='true'] {
-  cursor: default;
-  opacity: 0.5;
-}
-
-.image {
-  box-sizing: border-box;
-  width: 48px;
-  height: 48px;
-  flex-shrink: 0;
-  padding: 4px;
-  border-radius: 0;
-  background: transparent;
-}
-
-.name {
-  display: -webkit-box;
-  min-width: 0;
-  flex: 1;
-  overflow: hidden;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  hyphens: auto;
-  font-size: 11px;
-  font-weight: 500;
-  line-height: 16px;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-@container categories (min-width: 560px) {
-  .grid {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-
-  .tile {
-    height: 80px;
-    gap: 12px;
-    padding-right: 12px;
-  }
-
-  .image {
-    width: 64px;
-    height: 64px;
-  }
-
-  .name {
-    font-size: 12px;
-    letter-spacing: 0.08em;
-  }
-}
-
-@container categories (min-width: 900px) {
-  .grid {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}
-
-@container categories (min-width: 1200px) {
-  .grid {
-    grid-template-columns: repeat(6, minmax(0, 1fr));
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .tile {
-    transition: none;
-  }
-}

package/templates/components/orionplace/categories/CategoryGroup.tsx

@@ -1,123 +0,0 @@
-'use client';
-
-import { useMemo } from 'react';
-import type { MouseEvent } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceCatalog,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit, selectStatus } from '@/stores/orionplace';
-import type { ICategory } from '@/interfaces/orionplace';
-import {
-  findNavigationCategory,
-  navigationCatalogCategories,
-} from '@/lib/orionplace/catalog';
-import { homeCategories } from '@/lib/orionplace/homeContent';
-import { homeLabels } from '@/lib/orionplace/homeLabels';
-import {
-  getAvailableNestedValueFromObject,
-  safePublicUrl,
-} from '@/lib/orionplace/presentation';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import styles from './CategoryGroup.module.css';
-
-export interface CategoryGroupProps {
-  disabled?: boolean;
-  parentId?: number;
-  categoryHref?: (categoryId: number) => string;
-  onSelect?: (category: ICategory) => void;
-}
-
-export function CategoryGroup({
-  disabled = false,
-  parentId,
-  categoryHref,
-  onSelect,
-}: CategoryGroupProps) {
-  const status      = useOrionplace(selectStatus);
-  const init        = useOrionplace(selectInit);
-  const catalog     = useOrionplaceCatalog((state) => state.catalog);
-  const locale      = useOrionplaceSelections((state) => state.localeCode);
-  const unavailable = disabled || status !== 'success';
-  const categories  = useMemo(() => {
-    if (parentId === undefined) {
-      return homeCategories(catalog, init?.visual_settings);
-    }
-
-    return navigationCatalogCategories(
-      findNavigationCategory(catalog, parentId)?.childs,
-    );
-  }, [catalog, init?.visual_settings, parentId]);
-
-  function name(category: ICategory) {
-    return getAvailableNestedValueFromObject(
-      category.locale,
-      locale,
-      'cg_name',
-    ) || `${homeLabels(locale).category} ${category.id}`;
-  }
-
-  function selectCategory(
-    event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>,
-    category: ICategory,
-    href: string,
-  ) {
-    const modified = event.button > 0 || event.metaKey || event.ctrlKey ||
-      event.shiftKey || event.altKey;
-    if (href && !unavailable && (modified || !onSelect)) {
-      return;
-    }
-
-    event.preventDefault();
-    if (!unavailable) {
-      onSelect?.(category);
-    }
-  }
-
-  return (
-    <div className={styles.root} data-category-group>
-      <div className={styles.grid}>
-        {categories.map((category) => {
-          const href = safePublicUrl(categoryHref?.(category.id));
-          const content = (
-            <>
-              <OrionplaceImage
-                src={category.logo_image}
-                alt={name(category)}
-                width={1}
-                height={1}
-                className={styles.image}
-              />
-              <span className={styles.name}>{name(category)}</span>
-            </>
-          );
-
-          return href ? (
-            <a
-              key={category.id}
-              href={href}
-              data-category-id={category.id}
-              aria-disabled={unavailable || undefined}
-              className={styles.tile}
-              onClick={(event) => selectCategory(event, category, href)}
-            >
-              {content}
-            </a>
-          ) : (
-            <button
-              key={category.id}
-              type="button"
-              data-category-id={category.id}
-              disabled={unavailable}
-              className={styles.tile}
-              onClick={(event) => selectCategory(event, category, '')}
-            >
-              {content}
-            </button>
-          );
-        })}
-      </div>
-    </div>
-  );
-}