orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/products/ProductCardStockNotice.README.md

@@ -1,36 +0,0 @@
-# ProductCardStockNotice
-
-## English
-
-Shows a low-stock notice when the product has the low-stock flag and its
-remaining quantity is above zero. `productId` identifies the product;
-`collection` defaults to `products` and can be `featured`. `label`
-overrides the localized notice. `showQuantity` adds the remaining number.
-The component renders nothing when there is no notice.
-
-### Props
-
-| Prop                                       | Meaning                                                                |
-| ------------------------------------------ | ---------------------------------------------------------------------- |
-| `productId: number`                        | ID of the product handled by ProductCardStockNotice.                   |
-| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID.      |
-| `showQuantity?: boolean`                   | Shows the quantity region when enabled.                                |
-| `label?: string`                           | Visible or accessible name for the component’s main control or region. |
-
-## Русский
-
-Показывает предупреждение, если у товара стоит признак заканчивающегося
-запаса и доступное количество больше нуля. `productId` задаёт товар;
-`collection` по умолчанию равно `products`, для подборки используйте
-`featured`. `label` заменяет локализованный текст. `showQuantity`
-добавляет оставшееся количество. Без предупреждения компонент ничего
-не показывает.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                              |
-| ------------------------------------------ | ----------------------------------------------------------------------- |
-| `productId: number`                        | ID товара, с которым работает ProductCardStockNotice.                   |
-| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |
-| `showQuantity?: boolean`                   | Показывает блок количества, когда значение включено.                    |
-| `label?: string`                           | Видимое или доступное название основного элемента компонента.           |

package/templates/components/orionplace/products/ProductCardStockNotice.module.css

@@ -1,8 +0,0 @@
-.notice {
-  margin: 0;
-  color: var(--orionplace-danger);
-  font-size: 11px;
-  line-height: 16px;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}

package/templates/components/orionplace/products/ProductCardStockNotice.tsx

@@ -1,35 +0,0 @@
-'use client';
-
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { productLabels } from '@/lib/orionplace/productLabels';
-import styles from './ProductCardStockNotice.module.css';
-
-export interface ProductCardStockNoticeProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-  showQuantity?: boolean;
-  label?: string;
-}
-
-export function ProductCardStockNotice({
-  productId,
-  collection = 'products',
-  showQuantity = false,
-  label,
-}: ProductCardStockNoticeProps) {
-  const product = useOrionplaceProduct(productId, collection);
-  const localeCode = useOrionplaceSelections((state) => state.localeCode);
-  if (!product?.flags?.flag_is_soon_be_out || product.c_real_left <= 0) {
-    return null;
-  }
-
-  const caption = label || productLabels(localeCode).lowStock;
-
-  return (
-    <p className={styles.notice} data-product-part="ProductCardStockNotice">
-      {showQuantity ? `${caption}: ${product.c_real_left}` : caption}
-    </p>
-  );
-}

package/templates/components/orionplace/products/ProductCardTitle.README.md

@@ -1,30 +0,0 @@
-# ProductCardTitle
-
-## English
-
-Shows the product name from the selected language in the React product
-store. `productId` identifies the product. `collection` selects `products`
-by default or `featured`. If that language has no name, the first available
-translation is used. The component renders nothing when the product is absent.
-
-### Props
-
-| Prop                                       | Meaning                                                           |
-| ------------------------------------------ | ----------------------------------------------------------------- |
-| `productId: number`                        | ID of the product handled by ProductCardTitle.                    |
-| `collection?: OrionplaceProductCollection` | Product-store collection used to resolve the supplied product ID. |
-
-## Русский
-
-Показывает название товара на выбранном языке из React-хранилища товаров.
-`productId` задаёт товар. `collection` по умолчанию выбирает `products`,
-для подборки используйте `featured`. Если названия на выбранном языке нет,
-используется первый доступный перевод. Если товар отсутствует, компонент
-ничего не показывает.
-
-### Свойства
-
-| Свойство                                   | Назначение                                                              |
-| ------------------------------------------ | ----------------------------------------------------------------------- |
-| `productId: number`                        | ID товара, с которым работает ProductCardTitle.                         |
-| `collection?: OrionplaceProductCollection` | Коллекция store товаров, в которой компонент ищет переданный ID товара. |

package/templates/components/orionplace/products/ProductCardTitle.module.css

@@ -1,13 +0,0 @@
-.title {
-  display: -webkit-box;
-  margin: 0;
-  overflow: hidden;
-  color: var(--orionplace-text);
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  text-decoration: none;
-  overflow-wrap: anywhere;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}

package/templates/components/orionplace/products/ProductCardTitle.tsx

@@ -1,31 +0,0 @@
-'use client';
-
-import { useOrionplaceProduct } from '@/hooks/useOrionplaceProduct';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { OrionplaceProductCollection } from '@/stores/orionplaceProducts';
-import { getAvailableNestedValueFromObject } from '@/lib/orionplace/presentation';
-import styles from './ProductCardTitle.module.css';
-
-export interface ProductCardTitleProps {
-  productId: number;
-  collection?: OrionplaceProductCollection;
-}
-
-export function ProductCardTitle({
-  productId,
-  collection = 'products',
-}: ProductCardTitleProps) {
-  const product = useOrionplaceProduct(productId, collection);
-  const localeCode = useOrionplaceSelections((state) => state.localeCode);
-  if (!product) {
-    return null;
-  }
-
-  const title = getAvailableNestedValueFromObject(
-    product.locale,
-    localeCode,
-    'product_name',
-  ) || '—';
-
-  return <h3 className={styles.title} data-product-part="ProductCardTitle">{title}</h3>;
-}

package/templates/components/orionplace/products/ProductCardVariants.README.md

@@ -1,77 +0,0 @@
-# ProductCardVariants
-
-## English
-
-Shows the product's main and available additional variant values. Each
-choice refers to a product returned by the storefront API. `productId`
-identifies the displayed product in `collection` (`products` or `featured`).
-`variantProductIds`, when supplied, limits selection to those offered product
-IDs. `onSelect` requests a main variant; the storefront loads and stores its
-product, then the card displays it. `onSelectSecondary` reports the selected
-secondary product. When a main choice needs additional
-values, the selector opens a dialog and calls `onRequestSecondary` with the
-current product, group ID and selected main value. The storefront updates
-the product store with the loading, ready or error result. The exposed
-`openForPurchase()` method starts that choice before a purchase action.
-
-Choosing a secondary option in the dialog stores that product together with its
-secondary choices before calling `onSelectSecondary`. The card keeps those
-choices when it displays the selected product. The host can observe the
-selection while retaining the product data prepared by the component.
-
-### Props
-
-| Prop                                                                             | Meaning                                                                                                              |
-| -------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- |
-| `productId: number`                                                              | ID of the product handled by ProductCardVariants.                                                                    |
-| `collection?: OrionplaceProductCollection`                                       | Product-store collection used to resolve the supplied product ID.                                                    |
-| `variantProductIds?: number[]`                                                   | Product IDs available as variants of the current product.                                                            |
-| `disabled?: boolean`                                                             | Disables the component controls and prevents new actions.                                                            |
-| `actionsDisabled?: boolean`                                                      | Disables product actions while the surrounding flow is busy.                                                         |
-| `onSelect?: (variant: IProductVariantValue) => void`                             | Passes the selected primary variant when no secondary choice is required. The application handles replacing the product. |
-| `onSelectSecondary?: (variant: IProductSecondaryVariant) => void`                | Passes the selected secondary variant. For a dialog selection, its product has already been stored and the dialog closed. |
-| `onRequestSecondary?: (request: IProductSecondaryVariantRequest) => void`        | Passes the product ID in `product`, product group ID in `productGroup` and primary variant in `variant` when its secondary variants need loading. The application loads them and supplies them to the product store. |
-| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Passes the product ID in `product` and the requested total quantity in `quantity` when adding an item or changing its quantity. The application sends the request and supplies confirmed product data. |
-| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Passes the product ID in `product` and cart item ID in `cartItem` when removing the last unit. The application removes that cart item and supplies confirmed product data. |
-| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Passes the product ID in `product` when an availability notification is requested. The application handles any required sign-in, sends the request and updates subscription state. |
-| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Passes the product ID in `product` when cancelling an availability notification. The application sends the request and supplies the confirmed subscription state. |
-| `onPreorder?: (selection: ProductActionSelection) => void`                       | Passes the product ID in `product` when preorder is selected. The application collects the required contact details and submits the request. |
-| `className?: string`                                                             | Additional CSS class for the component root.                                                                         |
-
-## Русский
-
-Показывает основные и доступные дополнительные значения вариантов товара.
-Каждое значение связано с товаром из ответа API. `productId` задаёт
-показанный товар в `collection` (`products` или `featured`). Если передан
-`variantProductIds`, выбрать можно только товары с указанными ID.
-`onSelect` сообщает о выборе основного варианта: магазин загружает и сохраняет
-его товар, после чего карточка его показывает. `onSelectSecondary` сообщает
-о выбранном дополнительном товаре. Если для основного значения нужны
-дополнительные варианты, открывается диалог и `onRequestSecondary` получает
-текущий товар, ID группы и выбранное основное значение. Магазин записывает
-в хранилище состояние загрузки, результат или ошибку. Метод
-`openForPurchase()` запускает этот выбор перед действием покупки.
-
-При выборе дополнительного варианта в диалоге компонент сохраняет товар вместе
-со списком дополнительных вариантов до вызова `onSelectSecondary`. Карточка
-сохраняет этот список при показе выбранного товара. Приложение может обработать
-событие выбора, сохранив подготовленные компонентом данные товара.
-
-### Свойства
-
-| Свойство                                                                         | Назначение                                                                                                         |
-| -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------ |
-| `productId: number`                                                              | ID товара, с которым работает ProductCardVariants.                                                                 |
-| `collection?: OrionplaceProductCollection`                                       | Коллекция store товаров, в которой компонент ищет переданный ID товара.                                            |
-| `variantProductIds?: number[]`                                                   | ID товаров, доступных как варианты текущего товара.                                                                |
-| `disabled?: boolean`                                                             | Блокирует элементы компонента и новые действия.                                                                    |
-| `actionsDisabled?: boolean`                                                      | Блокирует действия с товаром, пока внешний сценарий занят.                                                         |
-| `onSelect?: (variant: IProductVariantValue) => void`                             | Передаёт выбранный основной вариант, если дополнительный выбор не требуется. Приложение обрабатывает замену товара. |
-| `onSelectSecondary?: (variant: IProductSecondaryVariant) => void`                | Передаёт выбранный дополнительный вариант. При выборе в диалоге его товар уже сохранён в хранилище, а диалог закрыт. |
-| `onRequestSecondary?: (request: IProductSecondaryVariantRequest) => void`        | Передаёт ID товара в `product`, ID группы товаров в `productGroup` и основной вариант в `variant`, когда для него нужно загрузить дополнительные варианты. Приложение загружает и передаёт их в хранилище товаров. |
-| `onAdd?: (selection: ProductActionSelection & { quantity: number; }) => void`    | Передаёт `product` — ID товара и `quantity` — запрошенное итоговое количество при добавлении или изменении количества. Приложение выполняет запрос и передаёт подтверждённые данные товара. |
-| `onRemove?: (selection: ProductActionSelection & { cartItem: number; }) => void` | Передаёт ID товара в `product` и ID позиции корзины в `cartItem` при удалении последней единицы. Приложение удаляет эту позицию и передаёт подтверждённые данные товара. |
-| `onSubscribe?: (selection: ProductActionSelection) => void`                      | Передаёт ID товара в `product` при выборе уведомления о поступлении. Приложение выполняет вход, если он нужен, отправляет запрос и обновляет состояние подписки. |
-| `onUnsubscribe?: (selection: ProductActionSelection) => void`                    | Передаёт ID товара в `product` при отмене уведомления о поступлении. Приложение отправляет запрос и передаёт подтверждённое состояние подписки. |
-| `onPreorder?: (selection: ProductActionSelection) => void`                       | Передаёт ID товара в `product` при выборе предзаказа. Приложение собирает необходимые контактные данные и отправляет запрос. |
-| `className?: string`                                                             | Дополнительный CSS-класс корневого элемента.                                                                       |

package/templates/components/orionplace/products/ProductCardVariants.module.css

@@ -1,97 +0,0 @@
-.variants {
-  display: grid;
-  min-width: 0;
-  gap: 8px;
-}
-.group {
-  min-width: 0;
-}
-.choices {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-  min-width: 0;
-}
-.choice {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-  min-width: 0;
-  max-width: 100%;
-  height: 26px;
-  padding: 0 8px;
-  border: 1px solid var(--orionplace-border);
-  background: transparent;
-  color: var(--orionplace-muted);
-  font: inherit;
-  font-size: 12px;
-  line-height: 16px;
-  cursor: pointer;
-}
-.choice[aria-pressed="true"],
-.choice:focus-visible {
-  border-color: var(--orionplace-text);
-  color: var(--orionplace-text);
-}
-@media (hover: hover) {
-  .choice:hover {
-    border-color: var(--orionplace-text);
-    color: var(--orionplace-text);
-  }
-}
-.choice:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-.swatch {
-  position: relative;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  border-width: 2px;
-  border-radius: 50%;
-}
-/* A 24px touch target around the 18px circle; neighbours stay apart. */
-.swatch::before {
-  position: absolute;
-  inset: -5px;
-  border-radius: 50%;
-  content: '';
-}
-.swatch:focus-visible {
-  transform: scale(1.1);
-}
-@media (hover: hover) {
-  .swatch:hover {
-    transform: scale(1.1);
-  }
-}
-/* The product page shows the same variant choices at a slightly larger size. */
-[data-product-layout='details'] .swatch {
-  width: 24px;
-  height: 24px;
-}
-[data-product-layout='details'] .choice:not(.swatch) {
-  height: 32px;
-  padding-inline: 12px;
-}
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-}
-@media (prefers-reduced-motion: reduce) {
-  .swatch:focus-visible {
-    transform: none;
-  }
-  @media (hover: hover) {
-    .swatch:hover {
-      transform: none;
-    }
-  }
-}