orionplace-react 0.1.0 → 0.2.0

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

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

@@ -0,0 +1,39 @@
+# 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.
+
+### 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.                                                 |
+
+## Русский
+
+Показывает текущую страницу и кнопки перехода по данным `pagination`.
+Выбор доступной страницы вызывает `onChange(page)` и прокручивает страницу
+к списку. `scrollTarget` задаёт элемент списка или CSS-селектор; `null`
+оставляет прокрутку на месте. Без этого параметра используется ближайший
+контейнер section, article или main. `pending` блокирует кнопки. `compact`
+показывает стрелки с доступными названиями.
+
+### Свойства
+
+| Свойство                                | Назначение                                                                                       |
+| --------------------------------------- | ------------------------------------------------------------------------------------------------ |
+| `pagination: Partial<IApiPagination>`   | Текущие данные пагинации API.                                                                    |
+| `onChange: (page: number) => void`      | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе. |
+| `pending?: boolean`                     | Показывает загрузку и блокирует повторные действия.                                              |
+| `scrollTarget?: PaginationScrollTarget` | Элемент или селектор для прокрутки после смены страницы.                                         |
+| `compact?: boolean`                     | Включает компактное представление компонента.                                                    |

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

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

@@ -0,0 +1,102 @@
+'use client';
+
+import { useRef } from 'react';
+import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
+import { scrollToPaginatedList } from '@/lib/orionplace/paginationScroll';
+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;
+}
+
+export function StorefrontPagination({
+  pagination,
+  onChange,
+  pending = false,
+  scrollTarget,
+  compact = false,
+}: StorefrontPaginationProps) {
+  const localeCode = useOrionplaceSelections((state) => state.localeCode);
+  const labels = localeCode.toLowerCase().startsWith('ru')
+    ? { page: 'Страница', previous: 'Назад', next: 'Далее' }
+    : { 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);
+  }
+
+  return (
+    <nav
+      ref={nav}
+      aria-label={labels.page}
+      className={`${styles.root} ${compact ? styles.compact : ''}`.trim()}
+      data-feature-part="StorefrontPagination"
+    >
+      <button
+        className={styles.button}
+        type="button"
+        aria-label={compact ? labels.previous : undefined}
+        title={compact ? labels.previous : undefined}
+        disabled={pending || !pagination.has_previous}
+        onClick={() => change(pagination.previous_page_number || page - 1)}
+      >
+        {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}
+      </button>
+      <span className={styles.count}>
+        {labels.page} {page}
+        {pagination.pages ? ` / ${pagination.pages}` : ''}
+      </span>
+      <button
+        className={styles.button}
+        type="button"
+        aria-label={compact ? labels.next : undefined}
+        title={compact ? labels.next : undefined}
+        disabled={pending || !pagination.has_next}
+        onClick={() => change(
+          typeof pagination.next_page_number === 'number'
+            ? pagination.next_page_number
+            : page + 1,
+        )}
+      >
+        {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}
+      </button>
+    </nav>
+  );
+}

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

@@ -0,0 +1,36 @@
+/* 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

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