orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,37 @@
+# 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

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

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

@@ -0,0 +1,45 @@
+# 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

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

@@ -0,0 +1,96 @@
+'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)}
+        onLoad={onLoad}
+      />
+    );
+  }
+
+  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

@@ -0,0 +1,31 @@
+# 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

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

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

@@ -0,0 +1,39 @@
+# 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`                     | Блокирует элементы компонента и новые действия.                                                         |