orionplace-react 0.1.0 → 0.2.1

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

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

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

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

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

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

@@ -0,0 +1,118 @@
+.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;
+  }
+}