orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,79 @@
+.root {
+  position: relative;
+  display: block;
+  min-width: 0;
+}
+
+.root .field {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  height: 44px;
+  margin: 0;
+  padding: 0 48px 0 12px;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  background: var(--orionplace-surface);
+  color: var(--orionplace-text);
+  font: inherit;
+  font-size: 14px;
+  /* The form's line height, as `font: inherit` gives the other packages. */
+  line-height: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  outline: none;
+  transition: border-color 150ms;
+}
+
+.root .field:focus { border-color: var(--orionplace-text); }
+
+@media (hover: hover) {
+  .root .field:hover:not(:disabled) {
+    border-color: var(--orionplace-text);
+  }
+}
+.root .field[aria-invalid="true"] { border-color: var(--orionplace-danger); }
+.root .field:disabled { cursor: not-allowed; opacity: 0.4; }
+
+.root .toggle {
+  box-sizing: border-box;
+  position: absolute;
+  top: 1px;
+  right: 1px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 42px;
+  height: 42px;
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  border-radius: 0;
+  background: transparent;
+  color: var(--orionplace-muted);
+  cursor: pointer;
+  outline: none;
+  transition:
+    color 150ms,
+    background-color 150ms;
+}
+
+@media (hover: hover) {
+  .root .toggle:hover:not(:disabled) {
+    background: transparent;
+    color: var(--orionplace-text);
+  }
+}
+.root .toggle:focus-visible {
+  border-color: var(--orionplace-text);
+  background: var(--orionplace-hover);
+  color: var(--orionplace-text);
+}
+.root .toggle:disabled { cursor: not-allowed; opacity: 0.4; }
+.root .toggle svg { width: 20px; height: 20px; flex-shrink: 0; }
+
+@media (prefers-reduced-motion: reduce) {
+  .root .field,
+  .root .toggle { transition: none; }
+}

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

@@ -0,0 +1,103 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { flushSync } from 'react-dom';
+import type { InputHTMLAttributes } from 'react';
+import styles from '@/components/orionplace/shared/OrionplacePasswordInput.module.css';
+
+export interface OrionplacePasswordInputProps extends Omit<
+  InputHTMLAttributes<HTMLInputElement>,
+  'id' | 'type' | 'value' | 'onChange' | 'disabled'
+> {
+  id: string;
+  value: string;
+  onValueChange: (value: string) => void;
+  showLabel: string;
+  hideLabel: string;
+  disabled?: boolean;
+}
+
+export function OrionplacePasswordInput({
+  id,
+  value,
+  onValueChange,
+  showLabel,
+  hideLabel,
+  disabled = false,
+  className,
+  ...inputProps
+}: OrionplacePasswordInputProps) {
+  const [visible, setVisible] = useState(false);
+  const input                 = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (!value && document.activeElement !== input.current) {
+      setVisible(false);
+    }
+  }, [value]);
+
+  function toggle() {
+    const field   = input.current;
+    const focused = Boolean(field) && document.activeElement === field;
+    const start   = field?.selectionStart ?? null;
+    const end     = field?.selectionEnd ?? null;
+
+    flushSync(() => setVisible((current) => !current));
+
+    if (field && focused && start !== null && end !== null) {
+      // Chromium may reset the selection when the changed input type is laid out.
+      field.getBoundingClientRect();
+      field.setSelectionRange(start, end);
+    }
+  }
+
+  return (
+    <div className={styles.root} data-password-input>
+      <input
+        {...inputProps}
+        id={id}
+        ref={input}
+        value={value}
+        onChange={(event) => onValueChange(event.target.value)}
+        type={visible ? 'text' : 'password'}
+        disabled={disabled}
+        className={`${styles.field} ${className ?? ''}`.trim()}
+      />
+      <button
+        type="button"
+        className={styles.toggle}
+        data-password-toggle
+        aria-label={visible ? hideLabel : showLabel}
+        aria-pressed={visible}
+        aria-controls={id}
+        disabled={disabled}
+        onMouseDown={(event) => event.preventDefault()}
+        onClick={toggle}
+      >
+        <svg
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.6"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden="true"
+        >
+          {visible ? (
+            <>
+              <path d="M10.6 5.1A10.6 10.6 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-2.2 3.2" />
+              <path d="M6.6 6.6C3.8 8.4 2 12 2 12s3.5 7 10 7a9.8 9.8 0 0 0 5.4-1.6" />
+              <path d="M9.9 9.9a3 3 0 0 0 4.2 4.2" />
+              <path d="m3 3 18 18" />
+            </>
+          ) : (
+            <>
+              <path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12Z" />
+              <circle cx="12" cy="12" r="3" />
+            </>
+          )}
+        </svg>
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,97 @@
+# OrionplaceSearchSelect
+
+## English
+
+A controlled search field for a long list that the application loads while the
+customer types. It renders a list-autocomplete combobox, loading state, empty
+state and retryable error. The component does not send API requests.
+
+`value` is the confirmed option key and `selectedLabel` is its visible caption.
+`onValueChange(value)` updates the controlled value. `onChange(value)` reports a
+new confirmed choice. Typing calls `onSearch(query)` with trimmed text after
+`debounce` milliseconds. The default delay is 300 milliseconds. The application
+loads matching `{ value, label }` entries into `options` and ignores responses
+for older queries.
+
+Leaving the field restores `selectedLabel`. If a search was sent or is still
+waiting, leaving the field also calls `onSearch('')` so the application can
+restore its initial choices. `pending` displays a spinner and announces
+`loadingLabel`. No matches display `emptyLabel`. `error` displays the supplied
+message and a `retryLabel` button that repeats the current search.
+
+Arrow keys open the choices and move the highlighted result. Enter confirms a
+result after loading finishes. Escape closes the open choices; pressing it again
+while text remains restores the confirmed caption. Tab and focus leaving the
+field close the choices. `required` marks the field visually and for assistive
+technology. `disabled` closes the choices and prevents interaction.
+
+### Props
+
+| Prop                                      | Meaning                                                                                                |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `label: string`                           | Visible or accessible name for the component’s main control or region.                                 |
+| `options: OrionplaceSearchSelectOption[]` | Choices available in the control.                                                                      |
+| `loadingLabel: string`                    | Visible or accessible label for loading.                                                               |
+| `emptyLabel: string`                      | Visible or accessible label for empty.                                                                 |
+| `retryLabel: string`                      | Visible or accessible label for retry.                                                                 |
+| `value?: string`                          | Current controlled value.                                                                              |
+| `selectedLabel?: string`                  | Visible or accessible label for selected.                                                              |
+| `placeholder?: string`                    | Hint shown while the text field is empty.                                                              |
+| `pending?: boolean`                       | Shows the loading state and blocks duplicate actions.                                                  |
+| `error?: string`                          | Customer-visible error for the component request; omit it when no request failed.                      |
+| `disabled?: boolean`                      | Disables the component controls and prevents new actions.                                              |
+| `required?: boolean`                      | Marks the control as required for form submission.                                                     |
+| `debounce?: number`                       | Delay used before a typed search value is submitted.                                                   |
+| `onValueChange?: (value: string) => void` | Called when the visitor changes the controlled input value. The callback payload is shown in its type. |
+| `onChange?: (value: string) => void`      | Called when the visitor confirms a new value. The callback payload is shown in its type.               |
+| `onSearch?: (query: string) => void`      | Called when the visitor submits search text. The callback payload is shown in its type.                |
+
+## Русский
+
+Управляемое поле поиска по длинному списку, который приложение загружает по
+мере ввода. Компонент показывает поле со списком вариантов, состояние загрузки,
+отсутствие результатов и ошибку с повтором запроса. Сам компонент не отправляет
+API-запросы.
+
+`value` содержит ключ подтверждённого варианта, а `selectedLabel` — его видимую
+подпись. `onValueChange(value)` обновляет управляемое значение.
+`onChange(value)` сообщает о новом подтверждённом выборе. После ввода компонент
+передаёт в `onSearch(query)` текст без пробелов по краям через указанное в
+`debounce` число миллисекунд. По умолчанию задержка равна 300 миллисекундам.
+Приложение загружает найденные элементы `{ value, label }` в `options` и
+игнорирует ответы для более ранних запросов.
+
+При уходе из поля снова показывается `selectedLabel`. Если поиск уже был
+отправлен или ожидает отправки, компонент также вызывает `onSearch('')`, чтобы
+приложение восстановило начальные варианты. `pending` показывает индикатор и
+озвучивает `loadingLabel`. Если совпадений нет, отображается `emptyLabel`.
+`error` показывает переданное сообщение и кнопку `retryLabel`, которая повторяет
+текущий поиск.
+
+Стрелки открывают список и перемещают выделение. Enter подтверждает вариант
+после завершения загрузки. Escape закрывает открытый список; повторное нажатие,
+пока в поле остаётся введённый текст, восстанавливает подтверждённую подпись.
+Tab и уход фокуса закрывают список. `required` отмечает обязательное поле
+визуально и для программ экранного доступа. `disabled` закрывает список и
+блокирует взаимодействие.
+
+### Свойства
+
+| Свойство                                  | Назначение                                                                                              |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------- |
+| `label: string`                           | Видимое или доступное название основного элемента компонента.                                           |
+| `options: OrionplaceSearchSelectOption[]` | Варианты, доступные в элементе выбора.                                                                  |
+| `loadingLabel: string`                    | Видимая или доступная подпись для загрузки.                                                             |
+| `emptyLabel: string`                      | Видимая или доступная подпись для пустого результата.                                                   |
+| `retryLabel: string`                      | Видимая или доступная подпись для повторного запроса.                                                   |
+| `value?: string`                          | Текущее управляемое значение.                                                                           |
+| `selectedLabel?: string`                  | Видимая или доступная подпись для выбранного значения.                                                  |
+| `placeholder?: string`                    | Подсказка в пустом текстовом поле.                                                                      |
+| `pending?: boolean`                       | Показывает загрузку и блокирует повторные действия.                                                     |
+| `error?: string`                          | Ошибка запроса для покупателя; не передавайте её, если запрос не завершился ошибкой.                    |
+| `disabled?: boolean`                      | Блокирует элементы компонента и новые действия.                                                         |
+| `required?: boolean`                      | Помечает элемент как обязательный для отправки формы.                                                   |
+| `debounce?: number`                       | Задержка перед отправкой введённого поискового значения.                                                |
+| `onValueChange?: (value: string) => void` | Вызывается, когда покупатель изменяет управляемое значение поля. Данные обработчика указаны в его типе. |
+| `onChange?: (value: string) => void`      | Вызывается, когда покупатель подтверждает новое значение. Данные обработчика указаны в его типе.        |
+| `onSearch?: (query: string) => void`      | Вызывается, когда покупатель отправляет поисковый текст. Данные обработчика указаны в его типе.         |

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

@@ -0,0 +1,246 @@
+.root {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  max-width: 100%;
+  flex-direction: column;
+  gap: 8px;
+  color: var(--orionplace-text);
+  font-size: 14px;
+  line-height: 24px;
+}
+
+.label {
+  color: var(--orionplace-muted);
+  font-size: 12px;
+  line-height: 16px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.labelText {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.required,
+.error {
+  color: var(--orionplace-danger);
+}
+
+.field {
+  position: relative;
+  min-width: 0;
+}
+
+.input {
+  box-sizing: border-box;
+  display: block;
+  width: 100%;
+  min-width: 0;
+  min-height: 44px;
+  padding: 8px 40px 8px 12px;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  outline: none;
+  background: var(--orionplace-surface);
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  transition: border-color 150ms;
+}
+
+.input::placeholder {
+  color: var(--orionplace-muted);
+}
+
+.input:focus {
+  border-color: var(--orionplace-text);
+}
+
+@media (hover: hover) {
+  .input:hover {
+    border-color: var(--orionplace-text);
+  }
+}
+
+.input:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.spinner,
+.chevron {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  box-sizing: border-box;
+  width: 16px;
+  height: 16px;
+  margin-top: -8px;
+  pointer-events: none;
+}
+
+.spinner {
+  border: 2px solid var(--orionplace-border);
+  border-top-color: var(--orionplace-text);
+  border-radius: 50%;
+  animation: spin 700ms linear infinite;
+}
+
+.chevron {
+  color: var(--orionplace-muted);
+  transition: transform 150ms;
+}
+
+.chevronOpen {
+  transform: rotate(180deg);
+}
+
+.menu {
+  position: absolute;
+  z-index: 50;
+  top: 100%;
+  right: 0;
+  left: 0;
+  box-sizing: border-box;
+  max-height: 256px;
+  margin-top: 4px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  border: 1px solid var(--orionplace-border);
+  border-radius: 0;
+  background: color-mix(
+    in srgb,
+    var(--orionplace-surface) 90%,
+    transparent
+  );
+  color: var(--orionplace-text);
+  font-size: 14px;
+  line-height: calc(20 / 14);
+  letter-spacing: normal;
+  text-transform: none;
+  backdrop-filter: blur(4px);
+}
+
+.options {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.option {
+  box-sizing: border-box;
+  display: flex;
+  min-width: 0;
+  min-height: 40px;
+  align-items: center;
+  gap: 12px;
+  padding: 8px 12px;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: background-color 100ms;
+}
+
+.highlighted {
+  background: var(--orionplace-hover);
+}
+
+@media (hover: hover) {
+  .option:hover {
+    background: var(--orionplace-hover);
+  }
+}
+
+.optionLabel {
+  min-width: 0;
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.check {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--orionplace-accent);
+}
+
+.invisible {
+  visibility: hidden;
+}
+
+.empty {
+  margin: 0;
+  padding: 8px 12px;
+  color: var(--orionplace-muted);
+}
+
+.error {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+}
+
+.retry {
+  min-height: 0;
+  padding: 0 0 1px;
+  border: 0;
+  border-bottom: 1px solid currentcolor;
+  outline: none;
+  background: transparent;
+  color: var(--orionplace-text);
+  font-family: inherit;
+  font-size: 12px;
+  line-height: calc(16 / 12);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.retry:focus-visible {
+  color: var(--orionplace-muted);
+}
+
+@media (hover: hover) {
+  .retry:hover {
+    color: var(--orionplace-muted);
+  }
+}
+
+.retry:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .input,
+  .chevron,
+  .option {
+    transition: none;
+  }
+
+  .spinner {
+    animation: none;
+  }
+}