orionplace-react 0.1.0 → 0.2.1

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

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

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

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

@@ -0,0 +1,123 @@
+'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>
+  );
+}