orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/events/EventsBlock.module.css

@@ -1,101 +0,0 @@
-.root {
-  position: relative;
-  min-width: 0;
-  container-type: inline-size;
-}
-
-.event {
-  box-sizing: border-box;
-  display: block;
-  width: 100%;
-  aspect-ratio: 4 / 3;
-  padding: 0;
-  overflow: hidden;
-  border: 0;
-  border-radius: 0;
-  outline: none;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  cursor: pointer;
-}
-
-/* A loaded picture sets the height by its own shape; the box's shape only
-   holds the place while there is no picture. */
-.event:has(> img) {
-  aspect-ratio: auto;
-}
-
-.event > img {
-  height: auto;
-}
-
-@media (hover: hover) {
-  .event:hover {
-    opacity: 0.9;
-  }
-}
-
-.event:focus-visible {
-  opacity: 0.85;
-}
-
-.image {
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
-
-.controls {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 1px;
-  margin-top: 12px;
-  color: var(--orionplace-muted);
-  font-size: 12px;
-  line-height: calc(16 / 12);
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.counter {
-  margin-right: 12px;
-}
-
-.control {
-  display: flex;
-  width: 40px;
-  height: 40px;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  outline: none;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  /* The arrows keep Nuxt's text-sm, not the counter's 12px medium text. */
-  font: inherit;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  cursor: pointer;
-}
-
-@media (hover: hover) {
-  .control:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.control:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-/* The block's own width (592px, its width on a 640px screen). */
-@container (min-width: 592px) {
-  .event:not(:has(> img)) {
-    aspect-ratio: 3 / 1;
-  }
-}

package/templates/components/orionplace/events/EventsBlock.tsx

@@ -1,109 +0,0 @@
-'use client';
-
-import { useEffect, useMemo, useState } from 'react';
-import {
-  useOrionplace,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import type {
-  IAppLoadCommonEvents,
-  TEventsFormat,
-} from '@/interfaces/orionplace';
-import { useOrionplaceMediaFormat } from '@/hooks/useOrionplaceMediaFormat';
-import {
-  homeEventImage,
-  homeEvents,
-} from '@/lib/orionplace/homeContent';
-import { homeLabels } from '@/lib/orionplace/homeLabels';
-import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
-import styles from './EventsBlock.module.css';
-
-export interface EventsBlockProps {
-  label?: string;
-  format?: TEventsFormat | 'auto';
-  onSelect?: (event: IAppLoadCommonEvents) => void;
-}
-
-export function EventsBlock({
-  label = '',
-  format = 'auto',
-  onSelect,
-}: EventsBlockProps) {
-  const init = useOrionplace(selectInit);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const mediaFormat = useOrionplaceMediaFormat();
-  const copy = homeLabels(locale);
-  const selectedFormat = format === 'auto' ? mediaFormat : format;
-  const events = useMemo(
-    () => homeEvents(init, locale),
-    [init, locale],
-  );
-  const [index, setIndex] = useState(0);
-  const activeIndex = index < events.length ? index : 0;
-  const active = events[activeIndex];
-
-  useEffect(() => {
-    setIndex(0);
-  }, [events, selectedFormat]);
-
-  function move(offset: number) {
-    if (!events.length) {
-      return;
-    }
-    setIndex((current) => (
-      current + offset + events.length
-    ) % events.length);
-  }
-
-  if (!active) {
-    return null;
-  }
-
-  return (
-    <section
-      className={styles.root}
-      data-events-block
-      aria-label={label || copy.events}
-      aria-roledescription="carousel"
-    >
-      <button
-        type="button"
-        data-event-id={active.id}
-        className={styles.event}
-        onClick={() => onSelect?.(active)}
-      >
-        <OrionplaceImage
-          src={homeEventImage(active, selectedFormat)}
-          alt={`${label || copy.event} ${active.id}`}
-          width={3}
-          height={1}
-          className={styles.image}
-        />
-      </button>
-      {events.length > 1 && (
-        <div className={styles.controls}>
-          <span role="status" aria-live="polite" className={styles.counter}>
-            {activeIndex + 1} / {events.length}
-          </span>
-          <button
-            type="button"
-            aria-label={copy.previous}
-            className={styles.control}
-            onClick={() => move(-1)}
-          >
-            ←
-          </button>
-          <button
-            type="button"
-            aria-label={copy.next}
-            className={styles.control}
-            onClick={() => move(1)}
-          >
-            →
-          </button>
-        </div>
-      )}
-    </section>
-  );
-}

package/templates/components/orionplace/legal/CookieNotice.README.md

@@ -1,42 +0,0 @@
-# CookieNotice · React
-
-## English
-
-`CookieNotice` tells visitors that the site uses only the cookies it needs and
-links the cookies section of the policy. It renders nothing in server HTML;
-after mounting it appears at the bottom of the screen until the visitor presses
-OK, and the choice is kept in local storage under
-`orionplace-cookie-notice-seen` (`COOKIE_NOTICE_STORAGE_KEY` in
-`lib/orionplace/privacyLabels.ts`). The storefront sets only necessary cookies,
-so the notice asks for no consent; a store that adds analytics or advertising
-cookies needs a consent form instead. The supplied shell does not show it in
-the Android app build.
-
-Source is maintained in `components/orionplace/legal/CookieNotice.tsx`.
-
-### Props
-
-| Prop                              | Meaning                                                                                                   |
-| --------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `href?: string`                   | Address of the cookies section with the language, for example `/privacy?locale=ru#cookies`. Default: `/privacy#cookies`. |
-| `onNavigate?: (path: string) => void` | Called on an ordinary click of the link with `href`; the host navigates. Without it the link opens normally. |
-
-## Русский
-
-`CookieNotice` сообщает, что сайт использует только необходимые cookie, и
-ведёт в раздел о cookie политики. В серверном HTML его нет; после монтирования
-он показывается внизу экрана, пока посетитель не нажмёт «Понятно», и выбор
-хранится в локальном хранилище под ключом `orionplace-cookie-notice-seen`
-(`COOKIE_NOTICE_STORAGE_KEY` в `lib/orionplace/privacyLabels.ts`). Витрина
-ставит только необходимые cookie, поэтому уведомление не запрашивает согласие;
-магазину, который добавит аналитические или рекламные cookie, нужна форма
-согласия. В сборке приложения для Android оболочка его не показывает.
-
-Поддерживаемый исходный файл: `components/orionplace/legal/CookieNotice.tsx`.
-
-### Свойства
-
-| Свойство                          | Назначение                                                                                                 |
-| --------------------------------- | ---------------------------------------------------------------------------------------------------------- |
-| `href?: string`                   | Адрес раздела о cookie с языком, например `/privacy?locale=ru#cookies`. По умолчанию `/privacy#cookies`.     |
-| `onNavigate?: (path: string) => void` | Вызывается при обычном щелчке по ссылке с `href`; переход выполняет приложение. Без него ссылка открывается как обычно. |

package/templates/components/orionplace/legal/CookieNotice.module.css

@@ -1,48 +0,0 @@
-.root {
-  position: fixed;
-  right: 0.75rem;
-  bottom: 0.75rem;
-  left: 0.75rem;
-  z-index: 40;
-  display: flex;
-  flex-direction: column;
-  align-items: stretch;
-  gap: 0.75rem;
-  box-sizing: border-box;
-  padding: 1rem;
-  border: 1px solid var(--orionplace-border);
-  color: var(--orionplace-text);
-  background: var(--orionplace-surface);
-  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.text {
-  margin: 0;
-  color: var(--orionplace-muted);
-}
-
-.text a {
-  color: var(--orionplace-text);
-  text-decoration: underline;
-  text-underline-offset: 2px;
-  white-space: nowrap;
-}
-
-.button {
-  composes: primary from '../shared/features.module.css';
-  flex-shrink: 0;
-}
-
-@media (min-width: 640px) {
-  .root {
-    right: 1.25rem;
-    bottom: 1.25rem;
-    left: auto;
-    max-width: 560px;
-    flex-direction: row;
-    align-items: center;
-    gap: 1rem;
-  }
-}

package/templates/components/orionplace/legal/CookieNotice.tsx

@@ -1,82 +0,0 @@
-'use client';
-
-import { useEffect, useState, type MouseEvent } from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import {
-  COOKIE_NOTICE_STORAGE_KEY,
-  privacyLabels,
-} from '@/lib/orionplace/privacyLabels';
-import styles from './CookieNotice.module.css';
-
-export interface CookieNoticeProps {
-  /** Address of the cookies section, with the language and `#cookies`. */
-  href?: string;
-  /** An ordinary click on the link; the host navigates. */
-  onNavigate?: (path: string) => void;
-}
-
-// The storefront sets only necessary cookies, so this is a notice, not a
-// consent form. It appears after mounting and stays away once dismissed.
-export function CookieNotice({
-  href = '/privacy#cookies',
-  onNavigate,
-}: CookieNoticeProps) {
-  const locale                = useOrionplaceSelections((state) => state.localeCode);
-  const labels                = privacyLabels(locale).cookie;
-  const [visible, setVisible] = useState(false);
-
-  useEffect(() => {
-    try {
-      setVisible(localStorage.getItem(COOKIE_NOTICE_STORAGE_KEY) !== '1');
-    } catch {
-      setVisible(true);
-    }
-  }, []);
-
-  function dismiss() {
-    setVisible(false);
-    try {
-      localStorage.setItem(COOKIE_NOTICE_STORAGE_KEY, '1');
-    } catch {
-      // Without storage the notice comes back on the next visit.
-    }
-  }
-
-  function open(event: MouseEvent<HTMLAnchorElement>) {
-    if (
-      !onNavigate ||
-      event.ctrlKey ||
-      event.metaKey ||
-      event.shiftKey ||
-      event.altKey ||
-      event.button !== 0
-    ) {
-      return;
-    }
-    event.preventDefault();
-    onNavigate(href);
-  }
-
-  if (!visible) {
-    return null;
-  }
-
-  return (
-    <div
-      data-feature-part="CookieNotice"
-      role="region"
-      aria-label={labels.label}
-      className={styles.root}
-    >
-      <p className={styles.text}>
-        {labels.text}{' '}
-        <a href={href} onClick={open}>
-          {labels.link}
-        </a>
-      </p>
-      <button type="button" className={styles.button} onClick={dismiss}>
-        {labels.ok}
-      </button>
-    </div>
-  );
-}

package/templates/components/orionplace/legal/StorefrontPrivacy.README.md

@@ -1,49 +0,0 @@
-# StorefrontPrivacy · React
-
-## English
-
-`StorefrontPrivacy` is the store's personal data policy at `/privacy`. It has
-no inputs except `className` and sends no requests. It lists which data the
-store receives, why, who receives it, how long it is kept, the customer's
-rights and the cookies the site sets; a contents list links every section, and
-the cookies section has the anchor `#cookies`. The operator block shows the
-company name, tax ID, registration number, address and phone from the
-Application Load contact details; empty values are left out.
-
-The texts are in `lib/orionplace/privacyLabels.ts`, in Russian, English and Spanish. A
-store that adds analytics, chat widgets or other cookies lists them in the
-cookies section.
-
-Source is maintained in
-`components/orionplace/legal/StorefrontPrivacy.tsx`; the contact interface is
-`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts`.
-
-### Props
-
-| Prop                 | Meaning                                  |
-| -------------------- | ---------------------------------------- |
-| `className?: string` | Extra class names for the page section.  |
-
-## Русский
-
-`StorefrontPrivacy` — политика обработки персональных данных магазина на
-странице `/privacy`. Кроме `className`, свойств нет; запросов компонент не
-отправляет. Он описывает, какие данные получает магазин, зачем, кому
-передаёт, сколько хранит, права покупателя и cookie сайта; оглавление ведёт к
-каждому разделу, у раздела о cookie якорь `#cookies`. Блок оператора
-показывает название компании, ИНН, регистрационный номер, адрес и телефон из
-контактов загрузки приложения; пустые значения не выводятся.
-
-Тексты — в `lib/orionplace/privacyLabels.ts`, на русском, английском и испанском.
-Магазин, который добавит аналитику, чат или другие cookie, перечисляет их в
-разделе о cookie.
-
-Поддерживаемый исходный файл:
-`components/orionplace/legal/StorefrontPrivacy.tsx`; интерфейс контактов —
-`interfaces/orionplace/appBase/appLoadCommon/IAppLoadCommonContact.ts`.
-
-### Свойства
-
-| Свойство             | Назначение                                  |
-| -------------------- | ------------------------------------------- |
-| `className?: string` | Дополнительные классы для секции страницы.  |

package/templates/components/orionplace/legal/StorefrontPrivacy.module.css

@@ -1,166 +0,0 @@
-.root {
-  display: grid;
-  width: 100%;
-  min-width: 0;
-  color: var(--orionplace-text);
-  font: inherit;
-  /* The page's base text, as `op-feature` in the other packages. */
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  container-type: inline-size;
-}
-
-.header {
-  display: grid;
-  gap: 0.75rem;
-  margin-bottom: 2rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.header h1 {
-  margin: 0;
-  font-size: 1.5rem;
-  font-weight: 500;
-  line-height: 1.25;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.header p {
-  max-width: 42rem;
-  margin: 0;
-  color: var(--orionplace-muted);
-}
-
-.layout {
-  display: grid;
-  align-items: start;
-  gap: 2.5rem;
-  min-width: 0;
-}
-
-.contents,
-.body,
-.section,
-.operator {
-  display: grid;
-  min-width: 0;
-}
-
-.contents {
-  gap: 0.75rem;
-}
-
-.contents h2,
-.section h2,
-.operator h2 {
-  margin: 0;
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.contents h2 {
-  color: var(--orionplace-muted);
-}
-
-.contents ol {
-  display: grid;
-  gap: 0.5rem;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.contents a {
-  color: var(--orionplace-text);
-  text-decoration: none;
-  outline: none;
-}
-
-.contents a:focus-visible {
-  text-decoration: underline;
-}
-
-@media (hover: hover) {
-  .contents a:hover {
-    text-decoration: underline;
-  }
-}
-
-.body {
-  max-width: 48rem;
-  gap: 2rem;
-}
-
-.section {
-  gap: 0.75rem;
-  scroll-margin-top: 1.5rem;
-}
-
-.section p,
-.operator p {
-  margin: 0;
-}
-
-.operator {
-  gap: 0.75rem;
-  padding: 1.25rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-}
-
-.operator p {
-  color: var(--orionplace-muted);
-}
-
-.operator dl {
-  display: grid;
-  gap: 0.5rem;
-  margin: 0;
-}
-
-.detail {
-  display: grid;
-  gap: 0 1.5rem;
-}
-
-.detail dt {
-  color: var(--orionplace-muted);
-}
-
-.detail dd {
-  margin: 0;
-  overflow-wrap: anywhere;
-}
-
-/* The header's margin spaces the page, so it follows the page's own width. */
-@container (min-width: 592px) {
-  .header {
-    margin-bottom: 3rem;
-    padding-bottom: 2rem;
-  }
-
-  .header h1 {
-    font-size: 1.875rem;
-  }
-
-  .detail {
-    grid-template-columns: 12rem minmax(0, 1fr);
-  }
-}
-
-@container (min-width: 960px) {
-  .layout {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
-    gap: 4rem;
-  }
-
-  .contents {
-    position: sticky;
-    top: 1.5rem;
-  }
-}

package/templates/components/orionplace/legal/StorefrontPrivacy.tsx

@@ -1,83 +0,0 @@
-'use client';
-
-import { useOrionplace, useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import { contactLabels } from '@/lib/orionplace/contactLabels';
-import { privacyLabels } from '@/lib/orionplace/privacyLabels';
-import styles from './StorefrontPrivacy.module.css';
-
-export interface StorefrontPrivacyProps {
-  className?: string;
-}
-
-export function StorefrontPrivacy({ className = '' }: StorefrontPrivacyProps) {
-  const init    = useOrionplace(selectInit);
-  const locale  = useOrionplaceSelections((state) => state.localeCode);
-  const contact = init?.contact;
-  const company =
-    contact?.company_legal_name?.trim() || contact?.company_name?.trim() || '';
-  const labels  = privacyLabels(locale, company);
-  const fields  = contactLabels(locale);
-  // The operator's details as the platform sends them; empty rows are left out.
-  const details = [
-    [fields.legalName, company],
-    [fields.taxId, contact?.company_tax_id],
-    [fields.registrationNumber, contact?.company_organization_id],
-    [fields.address, contact?.company_contact_address],
-    [fields.phone, contact?.company_contact_phone],
-  ]
-    .map(([label, value]) => ({ label: label ?? '', value: value?.trim() ?? '' }))
-    .filter((row) => row.value);
-
-  return (
-    <section
-      data-feature-part="StorefrontPrivacy"
-      className={`${styles.root} ${className}`.trim()}
-    >
-      <header className={styles.header}>
-        <h1>{labels.title}</h1>
-        <p>{labels.lead}</p>
-      </header>
-
-      <div className={styles.layout}>
-        <nav aria-label={labels.contents} className={styles.contents}>
-          <h2>{labels.contents}</h2>
-          <ol>
-            {labels.sections.map((section) => (
-              <li key={section.id}>
-                <a href={`#${section.id}`}>{section.title}</a>
-              </li>
-            ))}
-          </ol>
-        </nav>
-
-        <article className={styles.body}>
-          {labels.sections.map((section) => (
-            <section key={section.id} id={section.id} className={styles.section}>
-              <h2>{section.title}</h2>
-              {section.text.map((line, index) => (
-                <p key={index}>{line}</p>
-              ))}
-            </section>
-          ))}
-
-          <section id="operator-details" className={styles.operator}>
-            <h2>{labels.operator}</h2>
-            {details.length ? (
-              <dl>
-                {details.map((row) => (
-                  <div key={row.label} className={styles.detail}>
-                    <dt>{row.label}</dt>
-                    <dd>{row.value}</dd>
-                  </div>
-                ))}
-              </dl>
-            ) : (
-              <p>{labels.operatorUnknown}</p>
-            )}
-          </section>
-        </article>
-      </div>
-    </section>
-  );
-}