orionplace-react 0.7.7 → 0.8.0

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

@@ -1,37 +0,0 @@
-# OrionplaceEmptyState
-
-## English
-
-`components/orionplace/shared/OrionplaceEmptyState.tsx` shows an empty or failed
-storefront state. It renders in server HTML without authentication. Pass action
-buttons or links as React `children` when the customer has a next action.
-
-### Props
-
-| Prop                                                                                                                                                                                                                                        | Meaning                                                 |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- |
-| `message: string`                                                                                                                                                                                                                           | Main customer-visible message.                          |
-| `kind?: "reviews" \| "error" \| "promocodes" \| "wishlist" \| "notifications" \| "generic" \| "photos" \| "orders" \| "cart" \| "search" \| "addresses" \| "tickets" \| "journal" \| "wallet" \| "subscriptions" \| "stores" \| "notFound"` | Selects the component mode or empty-state illustration. |
-| `description?: string`                                                                                                                                                                                                                      | Supporting text shown below the main message.           |
-| `messageTag?: "h1" \| "h2" \| "p" \| "h3"`                                                                                                                                                                                                  | HTML element used for the main message.                 |
-| `size?: "regular" \| "large" \| "compact"`                                                                                                                                                                                                  | Selects the supported component size.                   |
-| `children?: ReactNode`                                                                                                                                                                                                                      | React content rendered inside the component.            |
-| `role?: AriaRole`                                                                                                                                                                                                                           | Accessibility role applied to the component state.      |
-
-## Русский
-
-`OrionplaceEmptyState` показывает отсутствие данных или ошибку в магазине.
-Компонент входит в HTML ответа сервера без входа в аккаунт. Если покупатель
-может продолжить действие, передайте кнопки или ссылки через `children`.
-
-### Свойства
-
-| Свойство                                                                                                                                                                                                                                    | Назначение                                                   |
-| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ |
-| `message: string`                                                                                                                                                                                                                           | Основное сообщение для покупателя.                           |
-| `kind?: "reviews" \| "error" \| "promocodes" \| "wishlist" \| "notifications" \| "generic" \| "photos" \| "orders" \| "cart" \| "search" \| "addresses" \| "tickets" \| "journal" \| "wallet" \| "subscriptions" \| "stores" \| "notFound"` | Выбирает режим компонента или иллюстрацию пустого состояния. |
-| `description?: string`                                                                                                                                                                                                                      | Пояснение под основным сообщением.                           |
-| `messageTag?: "h1" \| "h2" \| "p" \| "h3"`                                                                                                                                                                                                  | HTML-элемент основного сообщения.                            |
-| `size?: "regular" \| "large" \| "compact"`                                                                                                                                                                                                  | Выбирает поддерживаемый размер компонента.                   |
-| `children?: ReactNode`                                                                                                                                                                                                                      | React-содержимое внутри компонента.                          |
-| `role?: AriaRole`                                                                                                                                                                                                                           | Доступная роль состояния компонента.                         |

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

@@ -1,126 +0,0 @@
-.root {
-  box-sizing: border-box;
-  display: flex;
-  width: 100%;
-  min-width: 0;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  background: transparent;
-  color: var(--orionplace-muted);
-  gap: 0.75rem;
-  padding: 2.5rem 1.5rem;
-}
-
-.root[data-empty-size='compact'] {
-  gap: 0.5rem;
-  padding: 1.5rem 1rem;
-}
-
-.root[data-empty-size='large'] {
-  gap: 1rem;
-  padding: 3.5rem 1.5rem;
-}
-
-.art {
-  display: block;
-  width: 7.5rem;
-  height: 6rem;
-  flex-shrink: 0;
-}
-
-.root[data-empty-size='compact'] .art {
-  width: 5rem;
-  height: 4rem;
-}
-
-.root[data-empty-size='large'] .art {
-  width: 9.375rem;
-  height: 7.5rem;
-}
-
-.border {
-  stroke: var(--orionplace-border);
-}
-
-.back {
-  fill: var(--orionplace-surface);
-  stroke: var(--orionplace-muted);
-}
-
-.shape {
-  fill: var(--orionplace-surface);
-  stroke: var(--orionplace-text);
-}
-
-.accent {
-  stroke: var(--orionplace-text);
-}
-
-.detail {
-  stroke: var(--orionplace-muted);
-}
-
-.dot {
-  fill: var(--orionplace-text);
-  stroke: none;
-}
-
-.message {
-  max-width: 28rem;
-  margin: 0;
-  color: var(--orionplace-text);
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.5rem;
-}
-
-.root[data-empty-size='compact'] .message {
-  font-weight: 400;
-}
-
-.root[data-empty-size='large'] .message {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-/* The large message grows by the width of the nearest container (the page
-   component around it) from 592px, the width a full-width page of the Nuxt
-   reference gives a component on a 640px screen; without a container it
-   follows the screen. */
-@media (min-width: 640px) {
-  .root[data-empty-size='large'] .message {
-    font-size: 1.5rem;
-  }
-}
-
-@container (width < 592px) {
-  .root[data-empty-size='large'] .message {
-    font-size: 1.125rem;
-  }
-}
-
-@container (width >= 592px) {
-  .root[data-empty-size='large'] .message {
-    font-size: 1.5rem;
-  }
-}
-
-.description {
-  max-width: 28rem;
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-}
-
-.actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-  gap: 1rem;
-  margin-top: 0.5rem;
-}

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

@@ -1,78 +0,0 @@
-import type { AriaRole, ReactNode } from 'react';
-import {
-  isOrionplaceEmptyStateKind,
-  orionplaceEmptyStateArt,
-} from './emptyStateArt';
-import type { OrionplaceEmptyStateKind } from './emptyStateArt';
-import styles from './OrionplaceEmptyState.module.css';
-
-export interface OrionplaceEmptyStateProps {
-  message: string;
-  kind?: OrionplaceEmptyStateKind;
-  description?: string;
-  messageTag?: 'p' | 'h1' | 'h2' | 'h3';
-  size?: 'compact' | 'regular' | 'large';
-  children?: ReactNode;
-  role?: AriaRole;
-}
-
-export function OrionplaceEmptyState({
-  message,
-  kind = 'generic',
-  description = '',
-  messageTag = 'p',
-  size = 'regular',
-  children,
-  role,
-}: OrionplaceEmptyStateProps) {
-  const resolvedKind = isOrionplaceEmptyStateKind(kind) ? kind : 'generic';
-  const art = orionplaceEmptyStateArt[resolvedKind];
-  const Message = messageTag;
-
-  return (
-    <div
-      data-empty-state
-      data-empty-kind={resolvedKind}
-      data-empty-size={size}
-      role={role}
-      className={styles.root}
-    >
-      <svg
-        viewBox="0 0 120 96"
-        fill="none"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-        focusable="false"
-        className={styles.art}
-      >
-        <path d="M26 88h68" className={styles.border} />
-        {art.back?.map((path) => (
-          <path key={`back-${path}`} d={path} className={styles.back} />
-        ))}
-        {art.shape.map((path) => (
-          <path key={`shape-${path}`} d={path} className={styles.shape} />
-        ))}
-        {art.accent?.map((path) => (
-          <path key={`accent-${path}`} d={path} className={styles.accent} />
-        ))}
-        {art.detail?.map((path) => (
-          <path key={`detail-${path}`} d={path} className={styles.detail} />
-        ))}
-        {art.dots?.map(([x, y]) => (
-          <circle
-            key={`dot-${x}-${y}`}
-            cx={x}
-            cy={y}
-            r="2"
-            className={styles.dot}
-          />
-        ))}
-      </svg>
-      <Message className={styles.message}>{message}</Message>
-      {description && <p className={styles.description}>{description}</p>}
-      {children && <div className={styles.actions}>{children}</div>}
-    </div>
-  );
-}

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

@@ -1,45 +0,0 @@
-# OrionplaceImage
-
-## English
-
-`components/orionplace/shared/OrionplaceImage.tsx` displays a public image. If
-`src` is empty, invalid or fails to load, it displays the same placeholder as
-the Nuxt component. The initial image or placeholder is included in server
-HTML; a failed image switches to the placeholder after hydration.
-
-### Props
-
-| Prop                          | Meaning                                                                        |
-| ----------------------------- | ------------------------------------------------------------------------------ |
-| `src?: string`                | Public image address.                                                          |
-| `alt?: string`                | Alternative text for the image; use an empty string for a decorative image.    |
-| `className?: string`          | Additional CSS class for the component root.                                   |
-| `dataLogoType?: string`       | Identifies the logo size represented by the image.                             |
-| `loading?: "lazy" \| "eager"` | Controls native image loading priority.                                        |
-| `width?: number`              | Intrinsic image width used to reserve layout space.                            |
-| `height?: number`             | Intrinsic image height used to reserve layout space.                           |
-| `ariaHidden?: boolean`        | Hides an inactive or decorative image from assistive technology.               |
-| `onLoad?: () => void`         | Called when the image has loaded. The callback has no payload.                 |
-| other attributes              | `role`, `tabIndex`, `aria-*`, `data-*` and handlers go to the image or placeholder. |
-
-## Русский
-
-`OrionplaceImage` показывает общедоступное изображение. Если `src` пустой,
-недопустимый или изображение не загрузилось, компонент показывает заглушку.
-Первое изображение или заглушка входят в HTML ответа сервера; ошибка загрузки
-обновляет вид после запуска страницы в браузере.
-
-### Свойства
-
-| Свойство                      | Назначение                                                                                  |
-| ----------------------------- | ------------------------------------------------------------------------------------------- |
-| `src?: string`                | Общедоступный адрес изображения.                                                            |
-| `alt?: string`                | Альтернативное описание изображения; для декоративного изображения передайте пустую строку. |
-| `className?: string`          | Дополнительный CSS-класс корневого элемента.                                                |
-| `dataLogoType?: string`       | Указывает размер логотипа, который показывает изображение.                                  |
-| `loading?: "lazy" \| "eager"` | Управляет нативным приоритетом загрузки изображения.                                        |
-| `width?: number`              | Исходная ширина изображения для резервирования места.                                       |
-| `height?: number`             | Исходная высота изображения для резервирования места.                                       |
-| `ariaHidden?: boolean`        | Скрывает неактивное или декоративное изображение от программ экранного доступа.             |
-| `onLoad?: () => void`         | Вызывается, когда изображение загрузилось. Обработчик не получает данные.                   |
-| другие атрибуты               | `role`, `tabIndex`, `aria-*`, `data-*` и обработчики передаются изображению или заглушке. |

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

@@ -1,22 +0,0 @@
-.image {
-  display: block;
-  max-width: 100%;
-  object-fit: contain;
-}
-
-.placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  overflow: hidden;
-  border-radius: inherit;
-  background: transparent;
-  color: var(--orionplace-muted);
-}
-
-.art {
-  width: 33.333%;
-  max-width: 3rem;
-  height: 33.333%;
-  max-height: 3rem;
-}

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

@@ -1,97 +0,0 @@
-'use client';
-
-import { useEffect, useRef, useState } from 'react';
-import type { HTMLAttributes } from 'react';
-import { safePublicUrl } from '@/lib/orionplace/presentation';
-import styles from './OrionplaceImage.module.css';
-
-// Other attributes (role, tabIndex, aria-*, data-*, handlers) go to the image
-// or its placeholder, as in the Nuxt and Svelte components.
-export interface OrionplaceImageProps
-  extends Omit<HTMLAttributes<HTMLElement>, 'className' | 'onLoad'> {
-  src?: string | null;
-  alt?: string;
-  className?: string;
-  dataLogoType?: string;
-  loading?: 'lazy' | 'eager';
-  width?: number;
-  height?: number;
-  ariaHidden?: boolean;
-  onLoad?: () => void;
-}
-
-export function OrionplaceImage({
-  src,
-  alt = '',
-  className = '',
-  dataLogoType,
-  loading = 'lazy',
-  width = 1,
-  height = 1,
-  ariaHidden,
-  onLoad,
-  ...attributes
-}: OrionplaceImageProps) {
-  const url = safePublicUrl(src);
-  const image = useRef<HTMLImageElement>(null);
-  const [failed, setFailed] = useState(false);
-
-  useEffect(() => {
-    setFailed(false);
-  }, [url]);
-
-  useEffect(() => {
-    // A cached failure can finish before hydration attaches the error listener.
-    if (image.current?.complete && image.current.naturalWidth === 0) {
-      setFailed(true);
-    }
-  }, [url, failed]);
-
-  if (url && !failed) {
-    return (
-      <img
-        {...attributes}
-        ref={image}
-        src={url}
-        alt={alt}
-        width={width}
-        height={height}
-        loading={loading}
-        decoding="async"
-        aria-hidden={ariaHidden}
-        className={`${styles.image} ${className}`.trim()}
-        data-logo-type={dataLogoType}
-        onError={() => setFailed(true)}
-        // The callback has no payload (the element's load event stays inside).
-        onLoad={onLoad ? () => onLoad() : undefined}
-      />
-    );
-  }
-
-  return (
-    <span
-      {...attributes}
-      data-image-placeholder
-      role={alt ? 'img' : undefined}
-      aria-label={alt || undefined}
-      aria-hidden={ariaHidden ?? !alt}
-      className={`${styles.placeholder} ${className}`.trim()}
-      data-logo-type={dataLogoType}
-    >
-      <svg
-        viewBox="0 0 48 48"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1.5"
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        aria-hidden="true"
-        className={styles.art}
-      >
-        <rect x="7" y="7" width="34" height="34" rx="5" />
-        <circle cx="17" cy="17" r="3" />
-        <path d="m7 33 10-10 8 8 6-6 10 10" />
-      </svg>
-    </span>
-  );
-}

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

@@ -1,31 +0,0 @@
-# OrionplaceInfoHint
-
-## English
-
-Shows a short explanation when the visitor selects the information button.
-`label` names the button for assistive technology; `text` is the explanation.
-The hint fits within the viewport, opens above the button when there is too
-little room below, and closes on outside pointer input, Escape or resize.
-Changing either prop closes the previous explanation.
-
-### Props
-
-| Prop            | Meaning                                                                |
-| --------------- | ---------------------------------------------------------------------- |
-| `label: string` | Visible or accessible name for the component’s main control or region. |
-| `text: string`  | Text value displayed or edited by the component.                       |
-
-## Русский
-
-Показывает короткое пояснение после нажатия кнопки информации.
-`label` — доступное название кнопки, `text` — текст пояснения.
-Подсказка помещается в окно браузера и открывается сверху, если снизу мало
-места. Она закрывается при нажатии вне неё, по Escape, при изменении размера
-окна или замене текста и названия.
-
-### Свойства
-
-| Свойство        | Назначение                                                    |
-| --------------- | ------------------------------------------------------------- |
-| `label: string` | Видимое или доступное название основного элемента компонента. |
-| `text: string`  | Текст, который компонент показывает или редактирует.          |

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

@@ -1,59 +0,0 @@
-.root {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-}
-
-.trigger {
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--orionplace-muted);
-  font: inherit;
-  cursor: pointer;
-}
-
-.trigger:focus-visible {
-  background: var(--orionplace-hover);
-  color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .trigger:hover {
-    background: var(--orionplace-hover);
-    color: var(--orionplace-text);
-  }
-}
-
-.trigger svg {
-  width: 16px;
-  height: 16px;
-}
-
-.text {
-  position: absolute;
-  z-index: 50;
-  box-sizing: border-box;
-  display: block;
-  padding: 12px;
-  border: 1px solid var(--orionplace-border);
-  border-radius: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-  font-size: 12px;
-  line-height: 20px;
-  text-align: left;
-  text-transform: none;
-  letter-spacing: normal;
-  backdrop-filter: blur(4px);
-}
-
-.above { bottom: calc(100% + 4px); }
-.below { top: calc(100% + 4px); }

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

@@ -1,126 +0,0 @@
-'use client';
-
-import { useEffect, useId, useRef, useState } from 'react';
-import styles from './OrionplaceInfoHint.module.css';
-
-const FULL_WIDTH = 288;
-const GUTTER = 16;
-
-export interface OrionplaceInfoHintProps {
-  label: string;
-  text: string;
-}
-
-export function OrionplaceInfoHint({ label, text }: OrionplaceInfoHintProps) {
-  const id = useId();
-  const root = useRef<HTMLSpanElement>(null);
-  const trigger = useRef<HTMLButtonElement>(null);
-  const [open, setOpen] = useState(false);
-  const [placement, setPlacement] = useState({
-    above: false,
-    width: FULL_WIDTH,
-    offset: 0,
-  });
-
-  useEffect(() => {
-    setOpen(false);
-  }, [label, text]);
-
-  useEffect(() => {
-    function closeOutside(event: PointerEvent) {
-      if (event.target instanceof Node && !root.current?.contains(event.target)) {
-        setOpen(false);
-      }
-    }
-
-    function closeOnEscape(event: KeyboardEvent) {
-      if (event.key === 'Escape' && open) {
-        setOpen(false);
-        trigger.current?.focus({ preventScroll: true });
-      }
-    }
-
-    document.addEventListener('pointerdown', closeOutside, true);
-    document.addEventListener('keydown', closeOnEscape);
-    window.addEventListener('resize', close);
-
-    return () => {
-      document.removeEventListener('pointerdown', closeOutside, true);
-      document.removeEventListener('keydown', closeOnEscape);
-      window.removeEventListener('resize', close);
-    };
-  }, [open]);
-
-  function close() {
-    setOpen(false);
-  }
-
-  function toggle() {
-    if (open) {
-      close();
-      return;
-    }
-
-    const bounds = trigger.current?.getBoundingClientRect();
-    if (bounds) {
-      const below = window.innerHeight - bounds.bottom - 8;
-      const above = bounds.top - 8;
-      const width = Math.min(FULL_WIDTH, window.innerWidth - GUTTER * 2);
-      const centered = bounds.left + bounds.width / 2 - width / 2;
-      const rightmost = Math.max(window.innerWidth - GUTTER - width, GUTTER);
-
-      setPlacement({
-        above: below < 140 && above > below,
-        width,
-        offset: Math.min(Math.max(centered, GUTTER), rightmost) - bounds.left,
-      });
-    }
-
-    setOpen(true);
-  }
-
-  return (
-    <span
-      ref={root}
-      data-feature-part="OrionplaceInfoHint"
-      className={styles.root}
-    >
-      <button
-        ref={trigger}
-        id={`${id}-control`}
-        type="button"
-        aria-label={label}
-        aria-expanded={open}
-        aria-controls={open ? `${id}-text` : undefined}
-        aria-describedby={open ? `${id}-text` : undefined}
-        data-info-hint
-        className={styles.trigger}
-        onClick={toggle}
-      >
-        <svg
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.25"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          aria-hidden="true"
-        >
-          <circle cx="8" cy="8" r="6.25" />
-          <path d="M8 7.25v3.75" />
-          <path d="M8 5.25v.4" />
-        </svg>
-      </button>
-      {open && (
-        <span
-          id={`${id}-text`}
-          data-info-hint-text
-          className={`${styles.text} ${placement.above ? styles.above : styles.below}`}
-          style={{ left: placement.offset, width: placement.width }}
-        >
-          {text}
-        </span>
-      )}
-    </span>
-  );
-}

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

@@ -1,39 +0,0 @@
-# OrionplacePasswordInput
-
-## English
-
-A controlled password field with a visibility button. Pass `id`, `value`,
-`onValueChange`, `showLabel` and `hideLabel`. Standard input attributes such as
-`name`, `autoComplete`, `required` and `aria-invalid` go to the input. The
-button preserves the field's focus and caret position. Clearing the value
-while the field is unfocused hides the next password again.
-
-### Props
-
-| Prop                                     | Meaning                                                                                                |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------ |
-| `id: string`                             | HTML ID that connects the input with its label.                                                        |
-| `value: string`                          | Current controlled value.                                                                              |
-| `onValueChange: (value: string) => void` | Called when the visitor changes the controlled input value. The callback payload is shown in its type. |
-| `showLabel: string`                      | Visible or accessible label for show.                                                                  |
-| `hideLabel: string`                      | Visible or accessible label for hide.                                                                  |
-| `disabled?: boolean`                     | Disables the component controls and prevents new actions.                                              |
-
-## Русский
-
-Поле пароля с кнопкой показа текста. Передайте `id`, `value`,
-`onValueChange`, `showLabel` и `hideLabel`. Атрибуты `name`, `autoComplete`,
-`required` и `aria-invalid` применяются к самому полю. Кнопка сохраняет
-фокус и положение курсора. Если очистить поле вне фокуса, следующий пароль
-снова вводится скрытым.
-
-### Свойства
-
-| Свойство                                 | Назначение                                                                                              |
-| ---------------------------------------- | ------------------------------------------------------------------------------------------------------- |
-| `id: string`                             | HTML ID, который связывает поле с его подписью.                                                         |
-| `value: string`                          | Текущее управляемое значение.                                                                           |
-| `onValueChange: (value: string) => void` | Вызывается, когда покупатель изменяет управляемое значение поля. Данные обработчика указаны в его типе. |
-| `showLabel: string`                      | Видимая или доступная подпись для кнопки показа.                                                        |
-| `hideLabel: string`                      | Видимая или доступная подпись для кнопки скрытия.                                                       |
-| `disabled?: boolean`                     | Блокирует элементы компонента и новые действия.                                                         |