orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/account/SignInHistory.tsx

@@ -1,231 +0,0 @@
-'use client';
-
-import { useEffect, useState, type FormEvent } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type {
-  IApiPagination,
-  IProfileLog,
-  IProfileLogsRequest,
-} from '@/interfaces/orionplace/accounts/IProfileData';
-import { activityLabels } from '@/lib/orionplace/activityLabels';
-import { activityIconPaths } from '@/lib/orionplace/activityPresentation';
-import { featureLabels } from '@/lib/orionplace/featureLabels';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
-import styles from './SignInHistory.module.css';
-
-export interface SignInHistoryProps {
-  logs?: readonly IProfileLog[];
-  pagination?: Partial<IApiPagination>;
-  loaded?: boolean;
-  pending?: boolean;
-  error?: string;
-  onLoad?: (request: IProfileLogsRequest) => void;
-}
-
-function apiDate(value: string): string | undefined {
-  return value ? value.split('-').reverse().join('.') : undefined;
-}
-
-export function SignInHistory({
-  logs = [],
-  pagination = {},
-  loaded = false,
-  pending = false,
-  error = '',
-  onLoad,
-}: SignInHistoryProps) {
-  const locale          = useOrionplaceSelections((value) => value.localeCode);
-  const labels          = activityLabels(locale);
-  const common          = featureLabels(locale);
-  const [from, setFrom] = useState('');
-  const [to, setTo]     = useState('');
-
-  function load(page = 1) {
-    onLoad?.({
-      filters: {
-        time_of_log_from: apiDate(from),
-        time_of_log_to: apiDate(to),
-        ordering: '-time_of_log',
-      },
-      paginate: { page, pp_items: 10 },
-    });
-  }
-
-  useEffect(() => {
-    let mounted = true;
-    queueMicrotask(() => {
-      if (mounted) {
-        load();
-      }
-    });
-    return () => {
-      mounted = false;
-    };
-  }, []);
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    if (!pending) {
-      load();
-    }
-  }
-
-  function device(log: IProfileLog): string {
-    return (
-      [
-        log.device_brand,
-        log.device_model || log.device_family,
-        log.os_family,
-        log.os_version,
-      ]
-        .filter((part) => part && part !== 'Other')
-        .join(' · ') || labels.unknown
-    );
-  }
-
-  return (
-    <section
-      className={styles.section}
-      data-feature-part="SignInHistory"
-    >
-      <h2 className={styles.title}>{labels.logs}</h2>
-      <form
-        className={styles.filters}
-        onSubmit={submit}
-      >
-        <label className={styles.label}>
-          {labels.from}
-          <input
-            className={styles.input}
-            value={from}
-            type="date"
-            max={to || undefined}
-            disabled={pending}
-            onChange={(event) => setFrom(event.target.value)}
-          />
-        </label>
-        <label className={styles.label}>
-          {labels.to}
-          <input
-            className={styles.input}
-            value={to}
-            type="date"
-            min={from || undefined}
-            disabled={pending}
-            onChange={(event) => setTo(event.target.value)}
-          />
-        </label>
-        <button
-          className={styles.button}
-          type="submit"
-          disabled={pending}
-        >
-          {common.search}
-        </button>
-      </form>
-      {error ? (
-        <div
-          role="alert"
-          className={styles.error}
-        >
-          {error}
-          <button
-            className={styles.button}
-            type="button"
-            disabled={pending}
-            onClick={() => load()}
-          >
-            {common.retry}
-          </button>
-        </div>
-      ) : null}
-      {pending ? (
-        <p
-          className="op-feature-loading"
-          role="status"
-        >
-          <span className={styles.srOnly}>{common.loading}</span>
-        </p>
-      ) : null}
-      {logs.length ? (
-        <ul className={styles.entries}>
-          {logs.map((log) => (
-            <li
-              key={log.id}
-              className={styles.entry}
-              data-sign-in={log.id}
-            >
-              <div className={styles.entryHeader}>
-                <svg
-                  className={styles.icon}
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="1.5"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  aria-hidden="true"
-                >
-                  <path d={activityIconPaths.device} />
-                </svg>
-                <span className={styles.entryTitle}>{device(log)}</span>
-                <span className={styles.entryState}>
-                  {log.time_of_log?.date} {log.time_of_log?.time}
-                </span>
-              </div>
-              <dl className={styles.facts}>
-                <div className={styles.fact}>
-                  <svg
-                    className={styles.icon}
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                  >
-                    <path d={activityIconPaths.browser} />
-                  </svg>
-                  <dt className={styles.term}>{labels.browser}</dt>
-                  <dd className={styles.value}>
-                    {log.browser_family} {log.browser_version}
-                  </dd>
-                </div>
-                <div className={styles.fact}>
-                  <svg
-                    className={styles.icon}
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                    strokeWidth="1.5"
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    aria-hidden="true"
-                  >
-                    <path d={activityIconPaths.pin} />
-                  </svg>
-                  <dt className={styles.term}>{labels.location}</dt>
-                  <dd className={styles.value}>
-                    {log.remote_city || labels.unknown} · {log.remote_addr}
-                  </dd>
-                </div>
-              </dl>
-            </li>
-          ))}
-        </ul>
-      ) : loaded && !pending ? (
-        <OrionplaceEmptyState
-          kind="journal"
-          message={labels.logsEmpty}
-        />
-      ) : null}
-      <StorefrontPagination
-        pagination={pagination}
-        pending={pending}
-        onChange={load}
-      />
-    </section>
-  );
-}

package/templates/components/orionplace/account/StorefrontLogout.README.md

@@ -1,48 +0,0 @@
-# StorefrontLogout
-
-## English
-
-`StorefrontLogout` presents the state of the sign-out route. The host performs
-the actual `profile_logout` request and passes its state to this component.
-`pending` shows progress and removes the home action. `failed` shows an alert
-and a Retry button. When `failed` and `signedOut` are both true, the message says
-that sign-out succeeded but the refreshed storefront could not load, so retrying
-must refresh Application Load without repeating the sign-out request.
-
-Retry calls `onRetry`. The Home action calls `onSelectHome`. The component does
-not start either request or navigation on its own, which keeps its initial
-server render free of browser-only work.
-
-### Props
-
-| Prop                        | Meaning                                                                          |
-| --------------------------- | -------------------------------------------------------------------------------- |
-| `pending?: boolean`         | Shows the loading state and blocks duplicate actions.                            |
-| `failed?: boolean`          | Marks the current load as failed and exposes the retry state.                    |
-| `signedOut?: boolean`       | Uses the signed-out state after logout is confirmed.                             |
-| `onRetry?: () => void`      | Called when the visitor retries the failed request. The callback has no payload. |
-| `onSelectHome?: () => void` | Called when the visitor opens the home page. The callback has no payload.        |
-
-## Русский
-
-`StorefrontLogout` показывает состояние страницы выхода из аккаунта. Сам запрос
-`profile_logout` выполняет родительская страница и передаёт его состояние этому
-компоненту. `pending` показывает процесс и скрывает переход на главную.
-`failed` выводит сообщение об ошибке и кнопку повтора. Если `failed` и
-`signedOut` одновременно равны `true`, текст сообщает, что выход уже выполнен,
-но обновлённый магазин не загрузился: повтор должен обновить Application Load
-без повторного запроса выхода.
-
-Кнопка повтора вызывает `onRetry`, а переход на главную — `onSelectHome`.
-Компонент сам не запускает запрос и навигацию, поэтому его начальный серверный
-рендер не зависит от браузерных API.
-
-### Свойства
-
-| Свойство                    | Назначение                                                                              |
-| --------------------------- | --------------------------------------------------------------------------------------- |
-| `pending?: boolean`         | Показывает загрузку и блокирует повторные действия.                                     |
-| `failed?: boolean`          | Отмечает неудачную загрузку и показывает возможность повторить запрос.                  |
-| `signedOut?: boolean`       | Показывает состояние после подтверждённого выхода.                                      |
-| `onRetry?: () => void`      | Вызывается, когда покупатель повторяет неудачный запрос. Обработчик не получает данные. |
-| `onSelectHome?: () => void` | Вызывается, когда покупатель открывает главную страницу. Обработчик не получает данные. |

package/templates/components/orionplace/account/StorefrontLogout.module.css

@@ -1,166 +0,0 @@
-/* The page frame follows its own width: a size container around <main>,
-   so the docs tabs and every placement show the same padding. */
-.page {
-  container: page / inline-size;
-  width: 100%;
-  min-width: 0;
-}
-
-.root {
-  box-sizing: border-box;
-  display: grid;
-  width: 100%;
-  min-height: 50vh;
-  max-width: 90rem;
-  margin-inline: auto;
-  padding: 2.5rem 1rem;
-  place-items: center;
-  color: var(--orionplace-text);
-  container-type: inline-size;
-}
-
-.panel {
-  box-sizing: border-box;
-  display: grid;
-  width: 100%;
-  max-width: 26.25rem;
-  justify-items: center;
-  gap: 1.25rem;
-  padding: 2.5rem 1.5rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  text-align: center;
-}
-
-.panel h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 500;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.panel p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.spinner {
-  box-sizing: border-box;
-  width: 2rem;
-  height: 2rem;
-  border: 2px solid var(--orionplace-border);
-  border-top-color: var(--orionplace-accent);
-  border-radius: 50%;
-  animation: spin 0.8s linear infinite;
-}
-
-.panel .error {
-  box-sizing: border-box;
-  width: 100%;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--orionplace-danger);
-  background: var(--orionplace-danger-surface);
-  color: var(--orionplace-danger);
-}
-
-.panel button {
-  box-sizing: border-box;
-  color: inherit;
-  font: inherit;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  outline: none;
-  cursor: pointer;
-}
-
-.panel .primary {
-  display: inline-flex;
-  height: 44px;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  width: 100%;
-  padding-inline: 1.5rem;
-  border: 1px solid var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-}
-
-.panel .home {
-  font-weight: 400;
-  min-height: auto;
-  padding: 1px 0 2px;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  background: transparent;
-}
-
-.panel button:focus-visible {
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .panel button:hover:not(:disabled) {
-    opacity: 0.85;
-  }
-}
-
-.panel button:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@container page (min-width: 640px) {
-  .root {
-    padding: 3.5rem 1.5rem;
-  }
-
-  .panel {
-    padding-inline: 2rem;
-  }
-}
-
-/* The title follows the component's own width, as in the other packages. */
-@container (min-width: 592px) {
-  .panel h1 {
-    font-size: 1.875rem;
-    line-height: 2.25rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .spinner {
-    animation: none;
-  }
-}
-
-.panel .home:focus-visible {
-  color: var(--orionplace-muted);
-  opacity: 1;
-}
-
-@media (hover: hover) {
-  .panel .home:hover {
-    color: var(--orionplace-muted);
-    opacity: 1;
-  }
-}
-
-@container page (min-width: 1024px) {
-  .root {
-    padding-inline: 32px;
-  }
-}

package/templates/components/orionplace/account/StorefrontLogout.tsx

@@ -1,73 +0,0 @@
-'use client';
-
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import { sessionLabels } from '@/lib/orionplace/sessionLabels';
-import styles from './StorefrontLogout.module.css';
-
-export interface StorefrontLogoutProps {
-  pending?: boolean;
-  failed?: boolean;
-  signedOut?: boolean;
-  onRetry?: () => void;
-  onSelectHome?: () => void;
-}
-
-export function StorefrontLogout({
-  pending = false,
-  failed = false,
-  signedOut = false,
-  onRetry,
-  onSelectHome,
-}: StorefrontLogoutProps) {
-  const locale = useOrionplaceSelections((value) => value.localeCode);
-  const labels = sessionLabels(locale);
-  const title = failed
-    ? labels.failed
-    : signedOut
-      ? labels.done
-      : labels.title;
-  const message = failed
-    ? signedOut
-      ? labels.refreshFailed
-      : labels.retryHint
-    : pending
-      ? labels.pending
-      : labels.hint;
-
-  return (
-    <div className={styles.page}>
-      <main
-        className={styles.root}
-        aria-busy={pending}
-        data-storefront-logout
-      >
-        <div className={styles.panel}>
-          {pending ? <span className={styles.spinner} aria-hidden="true" /> : null}
-          <h1>{title}</h1>
-          <p role={failed ? 'alert' : 'status'} className={failed ? styles.error : ''}>
-            {message}
-          </p>
-          {failed ? (
-            <button
-              type="button"
-              className={styles.primary}
-              disabled={pending}
-              onClick={() => onRetry?.()}
-            >
-              {labels.retry}
-            </button>
-          ) : null}
-          {!pending ? (
-            <button
-              type="button"
-              className={styles.home}
-              onClick={() => onSelectHome?.()}
-            >
-              {labels.home} →
-            </button>
-          ) : null}
-        </div>
-      </main>
-    </div>
-  );
-}

package/templates/components/orionplace/account/StorefrontProfile.README.md

@@ -1,71 +0,0 @@
-# StorefrontProfile
-
-## English
-
-`StorefrontProfile` composes the signed-in customer's profile photo, identity
-summary, personal details, email preferences, password and account deletion
-(`ProfileDeleteAccount`) forms. Application
-Load supplies the current customer and authentication state. A guest sees only
-the localized explanation that sign-in is required; the route remains
-responsible for showing the sign-in form.
-
-The component forwards every child action through `onRequest`. `onSelectHome`
-is called only by the Home button. `state.error` is shown in the shared status
-area, with a `{ action: 'load' }` retry when the initial profile load failed.
-Other pending actions are announced to screen readers, and a completed action
-shows the localized saved message. The route performs all API requests and
-supplies the updated state, usually through `useOrionplaceProfile()`
-(`hooks/useOrionplaceProfile.ts`), as the starter's profile page does:
-
-```tsx
-const profile = useOrionplaceProfile();
-
-<StorefrontProfile state={profile.state} onRequest={profile.request} />
-```
-
-Its options: `api` replaces the storefront's own client, `loadOnMount: false`
-skips the initial `profile_get`, and `onAuthenticated` runs once Application
-Load confirms the session after sign-in.
-
-### Props
-
-| Prop                                                    | Meaning                                                                                          |
-| ------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| `state: IStorefrontProfileState`                        | Current controlled data, loading state and request errors.                                       |
-| `onRequest?: (value: IStorefrontProfileAction) => void` | Called when the component emits its typed API action. The callback payload is shown in its type. |
-| `onSelectHome?: () => void`                             | Called when the visitor opens the home page. The callback has no payload.                        |
-
-## Русский
-
-`StorefrontProfile` объединяет фотографию, данные покупателя, форму личных
-данных, настройки почты, форму пароля и удаление аккаунта
-(`ProfileDeleteAccount`). Текущий покупатель и состояние входа
-берутся из Application Load. Гость видит только локализованное пояснение о
-необходимости входа; форму входа по-прежнему показывает страница маршрута.
-
-Все действия дочерних компонентов передаются через `onRequest`.
-`onSelectHome` вызывается только кнопкой перехода на главную. `state.error`
-выводится в общей области состояния; если начальная загрузка профиля завершилась
-ошибкой, кнопка повтора отправляет `{ action: 'load' }`. Остальные выполняемые
-действия объявляются программам экранного доступа, а завершённое действие
-показывает сообщение о сохранении. Все API-запросы выполняет страница маршрута
-и передаёт обновлённое состояние — обычно через `useOrionplaceProfile()`
-(`hooks/useOrionplaceProfile.ts`), как страница профиля стартового проекта:
-
-```tsx
-const profile = useOrionplaceProfile();
-
-<StorefrontProfile state={profile.state} onRequest={profile.request} />
-```
-
-Параметры: `api` заменяет собственный клиент витрины, `loadOnMount: false`
-пропускает начальный `profile_get`, а `onAuthenticated` вызывается, когда
-Application Load подтвердит сеанс после входа.
-
-### Свойства
-
-| Свойство                                                | Назначение                                                                                                 |
-| ------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `state: IStorefrontProfileState`                        | Текущие управляемые данные, загрузка и ошибки запросов.                                                    |
-| `onRequest?: (value: IStorefrontProfileAction) => void` | Вызывается, когда компонент отправляет типизированное действие API. Данные обработчика указаны в его типе. |
-| `onSelectHome?: () => void`                             | Вызывается, когда покупатель открывает главную страницу. Обработчик не получает данные.                    |

package/templates/components/orionplace/account/StorefrontProfile.module.css

@@ -1,65 +0,0 @@
-.profile {
-  composes: ui profile from './profile.module.css';
-}
-
-.heading {
-  composes: heading from './profile.module.css';
-}
-
-.headingText {
-  composes: headingText from './profile.module.css';
-}
-
-.headingActions {
-  composes: headingActions from './profile.module.css';
-}
-
-.feedback {
-  composes: feedback from './profile.module.css';
-}
-
-.notice {
-  composes: notice from './profile.module.css';
-  composes: notice from './account.module.css';
-}
-
-.feedbackError {
-  composes: noticeError from './account.module.css';
-}
-
-.feedbackSuccess {
-  composes: noticeSuccess from './account.module.css';
-}
-
-.content {
-  composes: content from './profile.module.css';
-}
-
-.summary {
-  composes: summary from './profile.module.css';
-}
-
-.identity {
-  composes: identity from './profile.module.css';
-}
-
-.contacts {
-  composes: identityContacts from './profile.module.css';
-}
-
-.guest {
-  display: grid;
-  justify-items: start;
-  gap: 16px;
-}
-
-.srOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}