orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/storefront/StorefrontAccount.tsx

@@ -1,303 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type FocusEvent,
-  type KeyboardEvent,
-  type ReactNode,
-} from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import {
-  selectIsAuthenticated,
-  selectIsReady,
-  selectProfile,
-} from '@/stores/orionplace';
-import { accountLabels } from '@/lib/orionplace/accountLabels';
-import { WalletBalance } from '@/components/orionplace/wallet/WalletBalance';
-import styles from './StorefrontAccount.module.css';
-
-export interface StorefrontAccountBalanceRenderProps {
-  label: string;
-  compact: true;
-}
-
-export interface StorefrontAccountProps {
-  disabled?: boolean;
-  onSignIn?: () => void;
-  onSignOut?: () => void;
-  onSelectProfile?: () => void;
-  onSelectWallet?: () => void;
-  renderBalance?: (props: StorefrontAccountBalanceRenderProps) => ReactNode;
-}
-
-const MENU_KEYS = ['ArrowDown', 'ArrowUp', 'Home', 'End'];
-
-export function StorefrontAccount({
-  disabled = false,
-  onSignIn,
-  onSignOut,
-  onSelectProfile,
-  onSelectWallet,
-  renderBalance,
-}: StorefrontAccountProps) {
-  const ready               = useOrionplace(selectIsReady);
-  const authenticated       = useOrionplace(selectIsAuthenticated);
-  const profile             = useOrionplace(selectProfile);
-  const locale              = useOrionplaceSelections((state) => state.localeCode);
-  const labels              = accountLabels(locale);
-  const unavailable         = disabled || !ready;
-  const fullName            = [profile?.first_name, profile?.last_name]
-    .filter(Boolean)
-    .join(' ')
-    .trim();
-  const name                = authenticated ? fullName || labels.profile : '';
-  const rootRef             = useRef<HTMLDivElement>(null);
-  const triggerRef          = useRef<HTMLButtonElement>(null);
-  const menuRef             = useRef<HTMLDivElement>(null);
-  const focusTarget         = useRef<'first' | 'last'>('first');
-  const [opened, setOpened] = useState(false);
-  const menuId              = useId();
-  const balanceProps        = { label: labels.wallet, compact: true } as const;
-
-  function balance() {
-    return renderBalance?.(balanceProps) ?? <WalletBalance {...balanceProps} />;
-  }
-
-  function menuItems() {
-    return Array.from(
-      menuRef.current?.querySelectorAll<HTMLButtonElement>(
-        '[role="menuitem"]',
-      ) ?? [],
-    );
-  }
-
-  function close(restoreFocus = false) {
-    setOpened(false);
-
-    if (restoreFocus) {
-      triggerRef.current?.focus();
-    }
-  }
-
-  function openMenu(last = false) {
-    if (unavailable || !authenticated) {
-      return;
-    }
-
-    focusTarget.current = last ? 'last' : 'first';
-    setOpened(true);
-  }
-
-  function activate() {
-    if (unavailable) {
-      return;
-    }
-
-    if (!authenticated) {
-      onSignIn?.();
-    } else if (opened) {
-      close();
-    } else {
-      openMenu();
-    }
-  }
-
-  function select(action: 'profile' | 'wallet' | 'signOut') {
-    close(true);
-
-    if (unavailable || !authenticated) {
-      return;
-    }
-
-    if (action === 'profile') {
-      onSelectProfile?.();
-    } else if (action === 'wallet') {
-      onSelectWallet?.();
-    } else {
-      onSignOut?.();
-    }
-  }
-
-  function onKeyDown(event: KeyboardEvent<HTMLDivElement>) {
-    if (event.key === 'Escape' && opened) {
-      event.preventDefault();
-      event.stopPropagation();
-      close(true);
-      return;
-    }
-
-    if (!MENU_KEYS.includes(event.key) || !authenticated || unavailable) {
-      return;
-    }
-
-    event.preventDefault();
-
-    if (!opened) {
-      openMenu(event.key === 'ArrowUp' || event.key === 'End');
-      return;
-    }
-
-    const items = menuItems();
-    const index = items.findIndex((item) => item === document.activeElement);
-    let next    = index + (event.key === 'ArrowUp' ? -1 : 1);
-
-    if (event.key === 'Home') {
-      next = 0;
-    }
-
-    if (event.key === 'End') {
-      next = items.length - 1;
-    }
-
-    items[(next + items.length) % items.length]?.focus();
-  }
-
-  function onBlur(event: FocusEvent<HTMLDivElement>) {
-    const target = event.relatedTarget;
-
-    if (!target || !rootRef.current?.contains(target)) {
-      close();
-    }
-  }
-
-  useEffect(() => {
-    if (!opened) {
-      return;
-    }
-
-    const items = menuItems();
-
-    items[focusTarget.current === 'last' ? items.length - 1 : 0]?.focus();
-  }, [opened]);
-
-  useEffect(() => {
-    close();
-  }, [authenticated, unavailable]);
-
-  useEffect(() => {
-    function outside(event: PointerEvent) {
-      const target = event.target;
-
-      if (target instanceof Node && !rootRef.current?.contains(target)) {
-        close();
-      }
-    }
-
-    document.addEventListener('pointerdown', outside);
-
-    return () => document.removeEventListener('pointerdown', outside);
-  }, []);
-
-  return (
-    <div
-      ref={rootRef}
-      className={styles.account}
-      data-storefront-account
-      onKeyDown={onKeyDown}
-      onBlur={onBlur}
-    >
-      <button
-        ref={triggerRef}
-        type="button"
-        disabled={unavailable}
-        aria-label={
-          authenticated ? `${labels.profile}: ${name}` : labels.signIn
-        }
-        aria-haspopup={authenticated ? 'menu' : undefined}
-        aria-expanded={authenticated ? opened : undefined}
-        aria-controls={opened ? menuId : undefined}
-        className={styles.trigger}
-        data-account-trigger
-        onClick={activate}
-      >
-        <svg
-          viewBox="0 0 24 24"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          aria-hidden="true"
-          className={styles.accountIcon}
-        >
-          <circle
-            cx="12"
-            cy="8"
-            r="3.5"
-          />
-          <path d="M4.5 21v-2.5a7.5 7.5 0 0 1 15 0V21" />
-        </svg>
-        <span className={styles.summary}>
-          <span className={styles.name}>
-            {authenticated ? name : labels.signIn}
-          </span>
-          {authenticated && (
-            <span className={styles.balance}>
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                aria-hidden="true"
-                className={styles.walletIcon}
-              >
-                <path d="M20 8H5a2 2 0 0 1 0-4h13v4M4 6v13a1 1 0 0 0 1 1h15V8h-4a3 3 0 0 0 0 6h4M16 11h1" />
-              </svg>
-              {balance()}
-            </span>
-          )}
-        </span>
-      </button>
-      {opened && authenticated && !unavailable && (
-        <div
-          id={menuId}
-          ref={menuRef}
-          role="menu"
-          aria-label={labels.account}
-          className={styles.menu}
-        >
-          <button
-            type="button"
-            role="menuitem"
-            className={styles.menuItem}
-            onClick={() => select('profile')}
-          >
-            {labels.profile}
-            <span aria-hidden="true">↗</span>
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            className={`${styles.menuItem} ${styles.divided} ${styles.wallet}`}
-            onClick={() => select('wallet')}
-          >
-            <span>{labels.wallet}</span>
-            {balance()}
-          </button>
-          <button
-            type="button"
-            role="menuitem"
-            className={`${styles.menuItem} ${styles.divided} ${styles.danger}`}
-            onClick={() => select('signOut')}
-          >
-            {labels.signOut}
-            <svg
-              viewBox="0 0 24 24"
-              fill="none"
-              stroke="currentColor"
-              strokeWidth="1.5"
-              aria-hidden="true"
-              className={styles.signOutIcon}
-            >
-              <path d="M10 4H4v16h6m5-12 4 4-4 4m-8-4h12" />
-            </svg>
-          </button>
-        </div>
-      )}
-    </div>
-  );
-}

package/templates/components/orionplace/storefront/StorefrontCartButton.README.md

@@ -1,47 +0,0 @@
-# StorefrontCartButton
-
-## English
-
-`StorefrontCartButton` shows the current number of cart positions and reports a
-cart selection through `onSelect`. Application Load supplies the initial count
-in `init.variables.c_cart_positions`. Cart and product actions can replace that
-value through `setProductCounters`; the replacement remains active across an
-Application Load refresh and is cleared when the product store resets. A dash
-is shown while no count is available.
-
-`label` replaces the localized Cart caption. `compact` visually hides the
-caption while keeping it in the accessible name. `disabled` prevents selection.
-The callback has no payload because the application only needs to open its
-current cart.
-
-### Props
-
-| Prop                    | Meaning                                                                                    |
-| ----------------------- | ------------------------------------------------------------------------------------------ |
-| `label?: string`        | Visible or accessible name for the component’s main control or region.                     |
-| `compact?: boolean`     | Uses the compact component presentation.                                                   |
-| `disabled?: boolean`    | Disables the component controls and prevents new actions.                                  |
-| `onSelect?: () => void` | Pressing the cart button calls the handler without arguments. The application opens the cart. |
-
-## Русский
-
-`StorefrontCartButton` показывает текущее количество позиций в корзине и
-сообщает о выборе корзины через `onSelect`. Начальное значение приходит из
-`init.variables.c_cart_positions` в Application Load. Действия с корзиной и
-товарами могут заменить его через `setProductCounters`; это значение сохраняется
-при обновлении Application Load и очищается при сбросе хранилища товаров. Пока
-значение неизвестно, компонент показывает тире.
-
-`label` заменяет локализованную подпись «Корзина». `compact` визуально скрывает
-подпись, но сохраняет её в доступном имени. `disabled` блокирует выбор. У
-`onSelect` нет данных события: приложению требуется только открыть текущую
-корзину.
-
-### Свойства
-
-| Свойство                | Назначение                                                                                        |
-| ----------------------- | ------------------------------------------------------------------------------------------------- |
-| `label?: string`        | Видимое или доступное название основного элемента компонента.                                     |
-| `compact?: boolean`     | Включает компактное представление компонента.                                                     |
-| `disabled?: boolean`    | Блокирует элементы компонента и новые действия.                                                   |
-| `onSelect?: () => void` | Нажатие кнопки корзины вызывает обработчик без аргументов. Приложение открывает корзину. |

package/templates/components/orionplace/storefront/StorefrontCartButton.module.css

@@ -1,88 +0,0 @@
-.button {
-  position: relative;
-  display: inline-flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  gap: 0.5rem;
-  min-width: 2.5rem;
-  height: 2.5rem;
-  padding: 0 0.5rem;
-  border: 0;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  cursor: pointer;
-  outline: none;
-}
-
-.withCaption {
-  padding-right: 1.5rem;
-}
-
-.button:focus-visible {
-  background: color-mix(in srgb, currentColor 10%, transparent);
-}
-
-@media (hover: hover) {
-  .button:hover:not(:disabled) {
-    background: color-mix(in srgb, currentColor 10%, transparent);
-  }
-}
-
-.button:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
-.icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.captionLine {
-  white-space: nowrap;
-}
-
-.count {
-  position: absolute;
-  top: 0.125rem;
-  right: 0.125rem;
-  box-sizing: border-box;
-  min-width: 1rem;
-  height: 1rem;
-  padding: 0 0.25rem;
-  border-radius: 9999px;
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  font-size: 0.625rem;
-  font-variant-numeric: tabular-nums;
-  line-height: 1rem;
-  letter-spacing: normal;
-  text-align: center;
-}
-
-/* Inside the dark header the count uses the header's inverse colors. */
-@container header (min-width: 0px) {
-  .count {
-    background: var(--orionplace-inverse-text);
-    color: var(--orionplace-inverse-surface);
-  }
-}
-
-.visuallyHidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}

package/templates/components/orionplace/storefront/StorefrontCartButton.tsx

@@ -1,54 +0,0 @@
-'use client';
-
-import { useOrionplaceProducts, useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import { headerLabels } from '@/lib/orionplace/headerLabels';
-import styles from './StorefrontCartButton.module.css';
-
-export interface StorefrontCartButtonProps {
-  label?: string;
-  compact?: boolean;
-  disabled?: boolean;
-  onSelect?: () => void;
-}
-
-export function StorefrontCartButton({
-  label    = '',
-  compact  = false,
-  disabled = false,
-  onSelect,
-}: StorefrontCartButtonProps) {
-  const locale  = useOrionplaceSelections((state) => state.localeCode);
-  const count   = useOrionplaceProducts((state) =>
-    state.productCounters.c_cart_positions ??
-    state.init?.variables?.c_cart_positions ??
-    '—'
-  );
-  const caption = label || headerLabels(locale).cart;
-
-  return (
-    <button
-      type="button"
-      disabled={disabled}
-      aria-label={`${caption} · ${count}`}
-      className={`${styles.button} ${compact ? '' : styles.withCaption}`.trim()}
-      onClick={() => onSelect?.()}
-    >
-      <svg
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        aria-hidden="true"
-        className={styles.icon}
-      >
-        <path d="M5 7h14l1 14H4L5 7Zm3 0V6a4 4 0 0 1 8 0v1" />
-      </svg>
-      <span className={styles.captionLine}>
-        <span className={compact ? styles.visuallyHidden : undefined}>
-          {caption} ·
-        </span>
-        <span className={styles.count}>{count}</span>
-      </span>
-    </button>
-  );
-}

package/templates/components/orionplace/storefront/StorefrontFooter.README.md

@@ -1,55 +0,0 @@
-# StorefrontFooter
-
-## English
-
-`StorefrontFooter` shows Application Load branding and social links, the first
-available public root categories, storefront destinations, available home
-product sections and the company copyright. The company legal name is used when
-available, followed by the company name. `year` defaults to the current year.
-
-Every internal destination keeps the selected locale. Ordinary clicks on those
-links call `onNavigate` with the complete path and prevent browser navigation.
-Modifier and non-primary clicks retain normal browser behavior. Social links
-open externally and do not call `onNavigate`. Featured products link to their
-own page; ordinary, discounted and new product sections link to their home-page
-anchors. Sections without products are omitted.
-
-### Props
-
-| Prop                                  | Meaning                                                                                             |
-| ------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `year?: number`                       | Year shown in the footer copyright.                                                                 |
-| `onNavigate?: (path: string) => void` | Called when the visitor chooses a component destination. The callback payload is shown in its type. |
-
-
-When Application Load reports `init.visual_settings.single_seller_mode: true`, StorefrontFooter hides the Sellers link. The generated storefront redirects direct `/sellers` visits to the catalog while preserving the locale.
-
-## Русский
-
-`StorefrontFooter` показывает логотипы и социальные ссылки из Application Load,
-первые доступные публичные корневые категории, разделы магазина, доступные
-подборки товаров главной страницы и сведения об авторских правах. Для названия
-компании сначала используется юридическое наименование, затем обычное название.
-`year` по умолчанию равен текущему году.
-
-Каждая внутренняя ссылка сохраняет выбранный язык. Обычное нажатие вызывает
-`onNavigate` с полным путём и отменяет переход браузера. Нажатие с модификатором
-или другой кнопкой мыши сохраняет обычное поведение браузера. Внешние социальные
-ссылки не вызывают `onNavigate`. Рекомендуемые товары ведут на отдельную
-страницу; обычные товары, скидки и новинки — к соответствующим разделам главной
-страницы. Подборки без товаров не выводятся.
-
-### Свойства
-
-| Свойство                              | Назначение                                                                                          |
-| ------------------------------------- | --------------------------------------------------------------------------------------------------- |
-| `year?: number`                       | Год в строке авторских прав футера.                                                                 |
-| `onNavigate?: (path: string) => 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/storefront/StorefrontFooter.module.css

@@ -1,118 +0,0 @@
-.footer {
-  margin-top: auto;
-  container-type: inline-size;
-  background: var(--orionplace-inverse-surface);
-  color: var(--orionplace-inverse-text);
-}
-
-.content {
-  display: grid;
-  box-sizing: border-box;
-  width: 100%;
-  max-width: 90rem;
-  margin: 0 auto;
-  padding: 3.5rem 1rem 2rem;
-  gap: 3rem;
-}
-
-.columns {
-  display: grid;
-  gap: 2.5rem;
-}
-
-.brandColumn,
-.navigation {
-  display: grid;
-  align-content: start;
-}
-
-.brandColumn {
-  gap: 1.25rem;
-}
-
-.navigation {
-  gap: 0.75rem;
-}
-
-.brandLink {
-  display: flex;
-  width: fit-content;
-  align-items: center;
-  padding: 0.5rem 0.75rem;
-  background: var(--orionplace-inverse-text);
-  text-decoration: none;
-}
-
-.brandLink:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-  opacity: 0.7;
-}
-
-.navigation h2 {
-  margin: 0;
-  color: var(--orionplace-inverse-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.navigationLink {
-  width: fit-content;
-  color: var(--orionplace-inverse-text);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  text-decoration: none;
-}
-
-.navigationLink:focus-visible {
-  color: var(--orionplace-inverse-muted);
-  outline: none;
-}
-
-@media (hover: hover) {
-  .navigationLink:hover {
-    color: var(--orionplace-inverse-muted);
-    outline: none;
-  }
-}
-
-.copyright {
-  margin: 0;
-  padding-top: 1.5rem;
-  border-top: 1px solid color-mix(
-    in srgb,
-    var(--orionplace-inverse-text) 15%,
-    transparent
-  );
-  color: var(--orionplace-inverse-muted);
-  font-size: 0.75rem;
-  letter-spacing: 0.08em;
-  line-height: 1.5rem;
-  text-transform: uppercase;
-}
-
-/* The footer's own width (it spans the window: the former screen widths). */
-@container (min-width: 640px) {
-  .content {
-    padding-right: 1.5rem;
-    padding-left: 1.5rem;
-  }
-
-  .columns {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container (min-width: 1024px) {
-  .content {
-    padding-right: 2rem;
-    padding-left: 2rem;
-  }
-
-  .columns {
-    grid-template-columns: 1.6fr 1fr 1fr;
-  }
-}