orionplace-react 0.7.7 → 0.8.0

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

@@ -1,103 +0,0 @@
-'use client';
-
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import {
-  errorPageLabels,
-  storefrontErrorKind,
-  storefrontErrorStatus,
-} from '@/lib/orionplace/errorPageLabels';
-import styles from '@/components/orionplace/shared/StorefrontErrorPage.module.css';
-
-export interface StorefrontErrorPageProps {
-  statusCode: number;
-  locale: string;
-  details?: string;
-  pending?: boolean;
-  onRetry?: () => void;
-  onSelectHome?: () => void;
-  onSelectCatalog?: () => void;
-}
-
-export function StorefrontErrorPage({
-  statusCode,
-  locale,
-  details = '',
-  pending = false,
-  onRetry,
-  onSelectHome,
-  onSelectCatalog,
-}: StorefrontErrorPageProps) {
-  const status    = storefrontErrorStatus(statusCode);
-  const kind      = storefrontErrorKind(status);
-  const labels    = errorPageLabels(locale);
-  const copy      = labels[kind];
-  const homeStyle = kind === 'notFound' ? styles.primary : styles.secondary;
-
-  return (
-    <div className={styles.page}>
-      <main
-        className={styles.root}
-        data-storefront-error
-        data-error-kind={kind}
-        aria-busy={pending || undefined}
-      >
-        <div className={styles.content}>
-          <p
-            className={styles.status}
-            data-error-status
-          >
-            <span className={styles.srOnly}>{labels.code}</span>
-            {status}
-          </p>
-          <OrionplaceEmptyState
-            kind={kind === 'notFound' ? 'notFound' : 'error'}
-            size="large"
-            messageTag="h1"
-            message={copy.title}
-            description={copy.text}
-            role={kind === 'error' ? 'alert' : undefined}
-          >
-            {kind === 'error' && (
-              <button
-                type="button"
-                className={`${styles.action} ${styles.primary}`}
-                data-error-action="retry"
-                disabled={pending}
-                onClick={() => onRetry?.()}
-              >
-                {labels.retry}
-              </button>
-            )}
-            <button
-              type="button"
-              className={`${styles.action} ${homeStyle}`}
-              data-error-action="home"
-              onClick={() => onSelectHome?.()}
-            >
-              {labels.home}
-            </button>
-            {kind === 'notFound' && (
-              <button
-                type="button"
-                className={`${styles.action} ${styles.secondary}`}
-                data-error-action="catalog"
-                onClick={() => onSelectCatalog?.()}
-              >
-                {labels.catalog}
-              </button>
-            )}
-          </OrionplaceEmptyState>
-          {details && (
-            <details
-              className={styles.details}
-              data-error-details
-            >
-              <summary>{labels.details}</summary>
-              <pre>{details}</pre>
-            </details>
-          )}
-        </div>
-      </main>
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-# StorefrontPagination
-
-## English
-
-Shows the current page and previous/next actions from `pagination`. Selecting
-an available page calls `onChange(page)` and moves the list into view.
-`scrollTarget` identifies the list by element or CSS selector; `null` keeps
-the current scroll position. Without a target, the nearest section, article
-or main container is used. `pending` disables both actions. `compact` shows
-arrow buttons with accessible names. With `linked`, Previous and Next are
-links to the list's `?page=` addresses, so search engines reach every page;
-a click still changes the page in place.
-
-### Props
-
-| Prop                                    | Meaning                                                                                  |
-| --------------------------------------- | ---------------------------------------------------------------------------------------- |
-| `pagination: Partial<IApiPagination>`   | Current API pagination values.                                                           |
-| `onChange: (page: number) => void`      | Called when the visitor confirms a new value. The callback payload is shown in its type. |
-| `pending?: boolean`                     | Shows the loading state and blocks duplicate actions.                                    |
-| `scrollTarget?: PaginationScrollTarget` | Element or selector used as the pagination scroll destination.                           |
-| `compact?: boolean`                     | Uses the compact component presentation.                                                 |
-| `linked?: boolean`                      | Previous and Next become links to the list's `?page=` addresses (lists that keep their page in the address). |
-
-## Русский
-
-Показывает текущую страницу и кнопки перехода по данным `pagination`.
-Выбор доступной страницы вызывает `onChange(page)` и прокручивает страницу
-к списку. `scrollTarget` задаёт элемент списка или CSS-селектор; `null`
-оставляет прокрутку на месте. Без этого параметра используется ближайший
-контейнер section, article или main. `pending` блокирует кнопки. `compact`
-показывает стрелки с доступными названиями. С `linked` «Назад» и «Далее» —
-ссылки на адреса списка с `?page=`, поэтому поисковые системы доходят до
-каждой страницы; по клику страница по-прежнему меняется на месте.
-
-### Свойства
-
-| Свойство                                | Назначение                                                                                       |
-| --------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `pagination: Partial<IApiPagination>`   | Текущие данные пагинации API.                                                                    |
-| `onChange: (page: number) => void`      | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |
-| `pending?: boolean`                     | Показывает загрузку и блокирует повторные действия.                                              |
-| `scrollTarget?: PaginationScrollTarget` | Элемент или селектор для прокрутки после смены страницы.                                         |
-| `compact?: boolean`                     | Включает компактное представление компонента.                                                    |
-| `linked?: boolean`                      | «Назад» и «Далее» становятся ссылками на адреса списка с `?page=` (для списков, хранящих страницу в адресе). |

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

@@ -1,69 +0,0 @@
-.root {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 12px 0;
-  color: var(--orionplace-text);
-}
-
-.button {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 44px;
-  gap: 8px;
-  padding: 8px 20px;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  background: transparent;
-  color: var(--orionplace-text);
-  font: inherit;
-  font-size: 12px;
-  font-weight: 500;
-  line-height: 16px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-}
-
-.button:focus-visible {
-  border-color: var(--orionplace-text);
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .button:hover {
-    border-color: var(--orionplace-text);
-    background: var(--orionplace-hover);
-  }
-}
-.button:disabled {
-  opacity: 0.6;
-  cursor: default;
-}
-.button svg {
-  width: 16px;
-  height: 16px;
-}
-.count {
-  font-variant-numeric: tabular-nums;
-}
-.compact {
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  color: var(--orionplace-muted);
-  font-size: 12px;
-  line-height: 16px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-.compact .button {
-  min-height: 36px;
-  width: 36px;
-  padding: 0;
-}

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

@@ -1,158 +0,0 @@
-'use client';
-
-import { useRef, type MouseEvent, type ReactNode } from 'react';
-import { usePathname, useSearchParams } from 'next/navigation';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import { scrollToPaginatedList } from '@/lib/orionplace/paginationScroll';
-import { storefrontPageHref } from '@/lib/orionplace/pageSeo';
-import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
-import type { PaginationScrollTarget } from '@/lib/orionplace/paginationScroll';
-import styles from './StorefrontPagination.module.css';
-
-export interface StorefrontPaginationProps {
-  pagination: Partial<IApiPagination>;
-  onChange: (page: number) => void;
-  pending?: boolean;
-  scrollTarget?: PaginationScrollTarget;
-  compact?: boolean;
-  /**
-   * The list keeps its page number in the address (`?page=`): previous and
-   * next are links to those addresses, so search engines reach every page.
-   * A click still changes the page in place.
-   */
-  linked?: boolean;
-}
-
-export function StorefrontPagination({
-  pagination,
-  onChange,
-  pending = false,
-  scrollTarget,
-  compact = false,
-  linked = false,
-}: StorefrontPaginationProps) {
-  const pathname   = usePathname() ?? '/';
-  const search     = useSearchParams()?.toString() ?? '';
-  const localeCode = useOrionplaceSelections((state) => state.localeCode);
-  const labels = localeCode.toLowerCase().startsWith('ru')
-    ? { page: 'Страница', previous: 'Назад', next: 'Далее' }
-    : localeCode.toLowerCase().startsWith('es') ? { page: 'Página', previous: 'Anterior', next: 'Siguiente' } : { page: 'Page', previous: 'Previous', next: 'Next' };
-  const page = pagination.page ?? 1;
-  const nav = useRef<HTMLElement>(null);
-
-  if (!pagination.has_other_pages && !pagination.has_next && !pagination.has_previous) {
-    return null;
-  }
-
-  function change(nextPage: number) {
-    onChange(nextPage);
-    scrollToPaginatedList(nav.current, scrollTarget);
-  }
-
-  const previousPage = pagination.previous_page_number || page - 1;
-  const nextPage     = typeof pagination.next_page_number === 'number'
-    ? pagination.next_page_number
-    : page + 1;
-
-  // A link while that page exists (linked lists), else a button.
-  function control(
-    target: number,
-    available: boolean,
-    rel: 'prev' | 'next',
-    label: string,
-    content: ReactNode,
-  ) {
-    const common = {
-      className: styles.button,
-      'aria-label': compact ? label : undefined,
-      title: compact ? label : undefined,
-    };
-    if (linked && available && !pending) {
-      return (
-        <a
-          {...common}
-          href={storefrontPageHref(pathname, search, target)}
-          rel={rel}
-          onClick={(event: MouseEvent<HTMLAnchorElement>) => {
-            // A link opened in a new tab or window keeps its default.
-            if (
-              event.button !== 0 ||
-              event.metaKey ||
-              event.ctrlKey ||
-              event.shiftKey ||
-              event.altKey
-            ) {
-              return;
-            }
-            event.preventDefault();
-            change(target);
-          }}
-        >
-          {content}
-        </a>
-      );
-    }
-    return (
-      <button
-        {...common}
-        type="button"
-        disabled={pending || !available}
-        onClick={() => change(target)}
-      >
-        {content}
-      </button>
-    );
-  }
-
-  return (
-    <nav
-      ref={nav}
-      aria-label={labels.page}
-      className={`${styles.root} ${compact ? styles.compact : ''}`.trim()}
-      data-feature-part="StorefrontPagination"
-    >
-      {control(
-        previousPage,
-        Boolean(pagination.has_previous),
-        'prev',
-        labels.previous,
-        compact ? (
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.6"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="m15 5-7 7 7 7" />
-          </svg>
-        ) : labels.previous,
-      )}
-      <span className={styles.count}>
-        {labels.page} {page}
-        {pagination.pages ? ` / ${pagination.pages}` : ''}
-      </span>
-      {control(
-        nextPage,
-        Boolean(pagination.has_next),
-        'next',
-        labels.next,
-        compact ? (
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.6"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            aria-hidden="true"
-          >
-            <path d="m9 5 7 7-7 7" />
-          </svg>
-        ) : labels.next,
-      )}
-    </nav>
-  );
-}

package/templates/components/orionplace/shared/dialogs.css

@@ -1,36 +0,0 @@
-/* A modal keeps its frame while its content changes. Inline previews stay natural. */
-:where([data-stable-modal="compact"]) {
-  --stable-modal-height: 26rem;
-}
-
-:where([data-stable-modal="form"]) {
-  --stable-modal-height: 40rem;
-}
-
-:where([data-stable-modal="wide"]) {
-  --stable-modal-height: 48rem;
-}
-
-dialog[data-stable-modal]:not([data-stable-modal="fixed"]):not([data-stable-modal="fit"]):modal,
-[data-stable-modal]:not(dialog):not([data-stable-modal="fixed"]):not([data-stable-modal="fit"]) {
-  box-sizing: border-box;
-  height: min(var(--stable-modal-height, 40rem), calc(100dvh - 3rem));
-  max-height: calc(100dvh - 3rem);
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  overscroll-behavior: contain;
-}
-
-/*
- * A short form window fits its content instead of a stable frame. Its top
- * edge stays put, so an error line only moves the bottom edge; long content
- * scrolls inside.
- */
-dialog[data-stable-modal="fit"]:modal {
-  box-sizing: border-box;
-  height: fit-content;
-  max-height: calc(100dvh - 3rem);
-  margin-block: min(12vh, 120px) auto;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}

package/templates/components/orionplace/shared/emptyStateArt.ts

@@ -1,231 +0,0 @@
-// Line drawings for OrionplaceEmptyState on a 120 × 96 canvas. Every layer is
-// painted with theme tokens by the component, so the artwork follows any theme.
-//   back   — secondary shapes behind the main object (muted stroke)
-//   shape  — the main object, filled with the surface color (text stroke)
-//   accent — lines drawn over the main object (text stroke)
-//   detail — hints and sparkles (muted stroke)
-//   dots   — small filled circles as [x, y] pairs (text fill)
-export interface OrionplaceEmptyStateArt {
-  back?: string[];
-  shape: string[];
-  accent?: string[];
-  detail?: string[];
-  dots?: [number, number][];
-}
-
-export const orionplaceEmptyStateKinds = [
-  'generic',
-  'reviews',
-  'photos',
-  'orders',
-  'cart',
-  'wishlist',
-  'search',
-  'addresses',
-  'tickets',
-  'notifications',
-  'journal',
-  'wallet',
-  'promocodes',
-  'subscriptions',
-  'stores',
-  'notFound',
-  'error',
-] as const;
-
-export type OrionplaceEmptyStateKind =
-  (typeof orionplaceEmptyStateKinds)[number];
-
-const sparkles = [
-  'M102 14v8',
-  'M98 18h8',
-  'M18 34v6',
-  'M15 37h6',
-];
-
-export const orionplaceEmptyStateArt: Record<
-  OrionplaceEmptyStateKind,
-  OrionplaceEmptyStateArt
-> = {
-  generic: {
-    shape: ['M24 56l12-26h48l12 26v24H24Z'],
-    accent: ['M24 56h22l4 8h20l4-8h22'],
-    detail: [
-      'M60 10v8',
-      'M56 14h8',
-      'M38 16l3 3',
-      'M82 16l-3 3',
-    ],
-  },
-  reviews: {
-    shape: [
-      'M30 20h60a6 6 0 0 1 6 6v32a6 6 0 0 1-6 6H58L46 75V64H30' +
-        'a6 6 0 0 1-6-6V26a6 6 0 0 1 6-6Z',
-    ],
-    accent: [
-      'M60 32l2.8 7.1 7.7.5-5.9 4.9 1.9 7.4-6.5-4.1-6.5 4.1 1.9-7.4' +
-        '-5.9-4.9 7.7-.5Z',
-    ],
-    detail: sparkles,
-  },
-  photos: {
-    back: ['M34 16h64v50H34Z'],
-    shape: ['M22 26h64v52H22Z'],
-    accent: ['M22 70l20-20 14 14 10-10 20 20'],
-    detail: ['M66 34a5 5 0 1 1 0 10a5 5 0 1 1 0-10Z'],
-  },
-  orders: {
-    shape: ['M60 22l32 12v38L60 84 28 72V34Z'],
-    accent: ['M28 34l32 12 32-12', 'M60 46v38'],
-    detail: [
-      'M44 28l32 12v10',
-      'M70 62l12-4.5',
-      'M70 68l8-3',
-    ],
-  },
-  cart: {
-    shape: ['M34 36h52l-3 46H37Z'],
-    accent: ['M48 46V32a12 12 0 0 1 24 0v14'],
-    detail: ['M46 64h28', ...sparkles],
-    dots: [
-      [48, 46],
-      [72, 46],
-    ],
-  },
-  wishlist: {
-    shape: [
-      'M60 80C44 68 28 56 28 40a15 15 0 0 1 32-8a15 15 0 0 1 32 8' +
-        'c0 16-16 28-32 40Z',
-    ],
-    detail: sparkles,
-  },
-  search: {
-    shape: [
-      'M67 60l5-5 17 17a3.5 3.5 0 0 1-5 5Z',
-      'M52 18a22 22 0 1 1 0 44a22 22 0 1 1 0-44Z',
-    ],
-    detail: [
-      'M43 36h18',
-      'M43 44h11',
-      ...sparkles,
-    ],
-  },
-  addresses: {
-    back: ['M22 66l24-7 28 7 24-7v16l-24 7-28-7-24 7Z'],
-    shape: ['M60 70S40 50 40 36a20 20 0 0 1 40 0c0 14-20 34-20 34Z'],
-    accent: ['M60 29a7 7 0 1 1 0 14a7 7 0 1 1 0-14Z'],
-    detail: ['M46 59v16', 'M74 66v16'],
-  },
-  tickets: {
-    back: [
-      'M50 16h44a6 6 0 0 1 6 6v20a6 6 0 0 1-6 6h-2v9l-10-9H50' +
-        'a6 6 0 0 1-6-6V22a6 6 0 0 1 6-6Z',
-    ],
-    shape: [
-      'M26 34h46a6 6 0 0 1 6 6v22a6 6 0 0 1-6 6H46L35 78V68h-9' +
-        'a6 6 0 0 1-6-6V40a6 6 0 0 1 6-6Z',
-    ],
-    dots: [
-      [37, 51],
-      [49, 51],
-      [61, 51],
-    ],
-  },
-  notifications: {
-    shape: [
-      'M60 16a4 4 0 0 1 4 4v1.5C74 24 80 32 80 42v14l6 9H34l6-9V42' +
-        'c0-10 6-18 16-20.5V20a4 4 0 0 1 4-4Z',
-    ],
-    accent: ['M53 69a7 7 0 0 0 14 0'],
-    detail: ['M90 28c4 4 6 9 6 14', 'M30 28c-4 4-6 9-6 14'],
-  },
-  journal: {
-    back: ['M46 20h34l12 12v48H46Z'],
-    shape: ['M32 12h32l14 14v52H32Z'],
-    accent: ['M64 12v14h14'],
-    detail: [
-      'M40 38h28',
-      'M40 46h28',
-      'M40 54h28',
-      'M40 62h16',
-    ],
-  },
-  wallet: {
-    back: ['M42 38V14h32v24Z'],
-    shape: ['M26 32h60a6 6 0 0 1 6 6v36a6 6 0 0 1-6 6H32a6 6 0 0 1-6-6Z'],
-    accent: ['M76 48h20v16H76a8 8 0 0 1 0-16Z'],
-    detail: ['M48 21h20', 'M48 27h14'],
-    dots: [[77, 56]],
-  },
-  promocodes: {
-    shape: [
-      'M24 30h72v14a6 6 0 0 0 0 12v14H24V56a6 6 0 0 0 0-12Z',
-    ],
-    accent: ['M52 58l16-16'],
-    detail: ['M38 32v36', ...sparkles],
-    dots: [
-      [53, 43],
-      [67, 57],
-    ],
-  },
-  subscriptions: {
-    shape: ['M28 24h64v56H28Z'],
-    accent: [
-      'M28 38h64',
-      'M44 16v14',
-      'M76 16v14',
-    ],
-    dots: [
-      [42, 50],
-      [54, 50],
-      [66, 50],
-      [78, 50],
-      [42, 62],
-      [54, 62],
-      [66, 62],
-    ],
-  },
-  stores: {
-    shape: ['M32 44h56v38H32Z', 'M28 28h64l4 16H24Z'],
-    accent: [
-      'M40 28l-3 16',
-      'M52 28l-1 16',
-      'M68 28l1 16',
-      'M80 28l3 16',
-      'M52 82V62h16v20',
-    ],
-    detail: ['M76 54h6v8h-6Z', 'M38 54h6v8h-6Z'],
-  },
-  notFound: {
-    back: ['M34 12h72v54H34Z'],
-    shape: ['M16 26h72v56H16Z'],
-    accent: [
-      'M16 38h72',
-      'M45 52a7 7 0 1 1 10 6.3c-2 1-3 2.6-3 4.7v1.5',
-    ],
-    detail: ['M100 76v8', 'M96 80h8'],
-    dots: [
-      [23, 32],
-      [30, 32],
-      [37, 32],
-      [52, 70],
-    ],
-  },
-  error: {
-    shape: ['M60 16l38 64H22Z'],
-    accent: ['M60 40v20'],
-    detail: [
-      'M104 30l-6 4',
-      'M106 44h-8',
-      'M16 30l6 4',
-      'M14 44h8',
-    ],
-    dots: [[60, 69]],
-  },
-};
-
-export function isOrionplaceEmptyStateKind(
-  value: unknown,
-): value is OrionplaceEmptyStateKind {
-  return orionplaceEmptyStateKinds.includes(value as OrionplaceEmptyStateKind);
-}