orionplace-react 0.7.8 → 0.8.0

package/templates/components/orionplace/sellers/SellerFilters.module.css

@@ -1,232 +0,0 @@
-.root {
-  min-width: 0;
-  color: var(--orionplace-text);
-}
-
-.heading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  margin-bottom: 1rem;
-}
-
-.heading h2 {
-  display: none;
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.toggle {
-  display: inline-flex;
-  min-height: 2.75rem;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0 1.25rem;
-  border: 1px solid var(--orionplace-text);
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.clear {
-  padding: 0;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.toggle:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .toggle:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.clear:focus-visible {
-  opacity: 0.7;
-}
-
-@media (hover: hover) {
-  .clear:hover {
-    opacity: 0.7;
-  }
-}
-
-.clear:disabled {
-  cursor: wait;
-}
-
-.filters {
-  display: none;
-  gap: 1.5rem;
-}
-
-.filters.open {
-  display: grid;
-}
-
-.nameForm {
-  display: grid;
-  gap: 0.5rem;
-  padding-top: 1.25rem;
-}
-
-.nameForm label,
-.filters legend {
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.nameForm input {
-  box-sizing: border-box;
-  width: 100%;
-  min-width: 0;
-  height: 2.75rem;
-  padding: 0 0.75rem;
-  border: 1px solid var(--orionplace-border);
-  background: var(--orionplace-surface);
-  color: inherit;
-  font: inherit;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  outline: none;
-}
-
-.nameForm input:focus {
-  border-color: var(--orionplace-text);
-}
-
-.filters fieldset {
-  min-width: 0;
-  margin: 0;
-  padding: 1.25rem 0 0;
-  border: 0;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.filters legend {
-  float: left;
-  width: 100%;
-  margin-bottom: 0.75rem;
-  padding: 0;
-}
-
-.choices {
-  display: grid;
-  clear: both;
-}
-
-.categories {
-  max-height: 18rem;
-  overflow-y: auto;
-}
-
-/* 36px plus the padding: 48px rows, as in the other packages (content box). */
-.choices label {
-  display: flex;
-  box-sizing: content-box;
-  min-height: 2.25rem;
-  align-items: center;
-  gap: 0.75rem;
-  padding: 0.375rem 0.25rem;
-  cursor: pointer;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-}
-
-.choices label:focus-within {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .choices label:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.choices input {
-  box-sizing: border-box;
-  width: 1rem;
-  height: 1rem;
-  flex: none;
-  margin: 0;
-  appearance: none;
-  border: 1px solid var(--orionplace-muted);
-  background: var(--orionplace-surface);
-  cursor: pointer;
-  outline: none;
-}
-
-.choices input[type='radio'] {
-  border-radius: 50%;
-}
-
-.choices input:checked {
-  border-color: var(--orionplace-accent);
-  background: var(--orionplace-accent);
-  box-shadow: inset 0 0 0 3px var(--orionplace-surface);
-}
-
-.choices input:focus-visible {
-  border-color: var(--orionplace-text);
-}
-
-@media (hover: hover) {
-  .choices input:hover:not(:disabled) {
-    border-color: var(--orionplace-text);
-  }
-}
-
-.choices input:disabled {
-  opacity: 0.4;
-}
-
-/* The filters open as a side panel once the sellers page is 880px wide, the
-   container rule of the Nuxt reference. */
-@container sellers (min-width: 880px) {
-  .heading {
-    box-sizing: border-box;
-    min-height: 3rem;
-    margin-bottom: 0;
-    border-bottom: 1px solid var(--orionplace-border);
-  }
-
-  .heading h2,
-  .filters {
-    display: grid;
-  }
-
-  .toggle {
-    display: none;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .choices input {
-    transition: none;
-  }
-}

package/templates/components/orionplace/sellers/SellerFilters.tsx

@@ -1,201 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useId,
-  useRef,
-  useState,
-  type FormEvent,
-} from 'react';
-import { useOrionplaceSelections } from '@/providers/OrionplaceProvider';
-import type { ISellerDirectoryFilters } from '@/interfaces/orionplace/sellers/ISellerDirectory';
-import { directoryLabels } from '@/lib/orionplace/directoryLabels';
-import {
-  SELLER_RATING_STEPS,
-  hasSellerFilters,
-  type SellerCategoryOption,
-} from '@/lib/orionplace/sellerDirectory';
-import styles from './SellerFilters.module.css';
-
-export interface SellerFiltersProps {
-  value: ISellerDirectoryFilters;
-  categories?: SellerCategoryOption[];
-  disabled?: boolean;
-  onChange: (value: ISellerDirectoryFilters) => void;
-}
-
-export function SellerFilters({
-  value,
-  categories = [],
-  disabled = false,
-  onChange,
-}: SellerFiltersProps) {
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = directoryLabels(locale);
-  const id = useId();
-  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
-  const currentValue = useRef(value);
-  const change = useRef(onChange);
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState(value.seller_name);
-  currentValue.current = value;
-  change.current = onChange;
-  const ratings = [
-    { value: null, title: labels.anyRating },
-    ...SELLER_RATING_STEPS.map((step) => ({
-      value: step,
-      title: `${step.toFixed(1)} ${labels.andUp}`,
-    })),
-  ];
-
-  function stopTimer() {
-    clearTimeout(timer.current);
-    timer.current = undefined;
-  }
-
-  function update(patch: Partial<ISellerDirectoryFilters>) {
-    change.current({ ...currentValue.current, ...patch });
-  }
-
-  function commitName() {
-    stopTimer();
-    const nextName = name.trim();
-    if (nextName !== currentValue.current.seller_name) {
-      update({ seller_name: nextName });
-    }
-  }
-
-  function scheduleName(nextName: string) {
-    setName(nextName);
-    stopTimer();
-    timer.current = setTimeout(() => {
-      const normalized = nextName.trim();
-      if (normalized !== currentValue.current.seller_name) {
-        change.current({
-          ...currentValue.current,
-          seller_name: normalized,
-        });
-      }
-    }, 400);
-  }
-
-  function submit(event: FormEvent<HTMLFormElement>) {
-    event.preventDefault();
-    commitName();
-  }
-
-  function toggleCategory(categoryId: number) {
-    const selected = value.seller_categories;
-    update({
-      seller_categories: selected.includes(categoryId)
-        ? selected.filter((entry) => entry !== categoryId)
-        : [...selected, categoryId],
-    });
-  }
-
-  function clear() {
-    stopTimer();
-    setName('');
-    change.current({
-      ...currentValue.current,
-      seller_name: '',
-      seller_rating_from: null,
-      seller_categories: [],
-    });
-  }
-
-  useEffect(() => {
-    if (value.seller_name !== name.trim()) {
-      setName(value.seller_name);
-    }
-  }, [value.seller_name]);
-
-  useEffect(() => () => stopTimer(), []);
-
-  return (
-    <div className={styles.root} data-feature-part="SellerFilters">
-      <div className={styles.heading}>
-        <h2>{labels.filters}</h2>
-        <button
-          type="button"
-          aria-expanded={open}
-          aria-controls={`${id}-filters`}
-          className={styles.toggle}
-          data-seller-filters-toggle
-          onClick={() => setOpen((current) => !current)}
-        >
-          {labels.filters}
-          <span aria-hidden="true">⌄</span>
-        </button>
-        {hasSellerFilters(value) ? (
-          <button
-            type="button"
-            disabled={disabled}
-            className={styles.clear}
-            data-seller-filters-clear
-            onClick={clear}
-          >
-            {labels.clear}
-          </button>
-        ) : null}
-      </div>
-      <div
-        id={`${id}-filters`}
-        className={`${styles.filters} ${open ? styles.open : ''}`}
-        data-seller-filters
-      >
-        <form className={styles.nameForm} role="search" onSubmit={submit}>
-          <label htmlFor={`${id}-name`}>{labels.searchSeller}</label>
-          <input
-            id={`${id}-name`}
-            type="search"
-            value={name}
-            disabled={disabled}
-            data-seller-filter-name
-            onChange={(event) => scheduleName(event.currentTarget.value)}
-            onBlur={commitName}
-          />
-        </form>
-        <fieldset disabled={disabled} data-seller-filter-rating>
-          <legend>{labels.rating}</legend>
-          <div className={styles.choices}>
-            {ratings.map((option) => (
-              <label key={String(option.value)}>
-                <input
-                  type="radio"
-                  name={`${id}-rating`}
-                  checked={value.seller_rating_from === option.value}
-                  onChange={() => update({
-                    seller_rating_from: option.value,
-                  })}
-                />
-                {option.value !== null ? (
-                  <span aria-hidden="true">★</span>
-                ) : null}
-                <span>{option.title}</span>
-              </label>
-            ))}
-          </div>
-        </fieldset>
-        {categories.length ? (
-          <fieldset disabled={disabled} data-seller-filter-categories>
-            <legend>{labels.categories}</legend>
-            <div className={`${styles.choices} ${styles.categories}`}>
-              {categories.map((option) => (
-                <label key={option.id}>
-                  <input
-                    type="checkbox"
-                    value={option.id}
-                    checked={value.seller_categories.includes(option.id)}
-                    onChange={() => toggleCategory(option.id)}
-                  />
-                  <span>{option.title}</span>
-                </label>
-              ))}
-            </div>
-          </fieldset>
-        ) : null}
-      </div>
-    </div>
-  );
-}

package/templates/components/orionplace/sellers/SellerPhotoGallery.README.md

@@ -1,72 +0,0 @@
-# SellerPhotoGallery · React
-
-## English
-
-`SellerPhotoGallery` shows the seller's approved `images` from `sellers_get` →
-`page_data.sellers.data[]`. It orders usable root-relative, HTTP and HTTPS image
-addresses by `display_order` and omits the rest. With no usable photos it
-renders nothing. `name` supplies the accessible labels for the seller's photos.
-
-The grid shows the first `limit` photos as square, uncropped tiles. More reveals
-the remaining tiles and Collapse hides them again. Each image has explicit
-dimensions, and photos outside the collapsed grid are not mounted until the
-visitor reveals them.
-
-Selecting a tile opens the viewer on that photo. Previous and Next move through
-the gallery cyclically; the thumbnail strip selects a specific photo. Left and
-Right arrow keys move between photos, Home and End select the first and last,
-and Escape or a click outside closes the viewer. A horizontal swipe also moves
-between neighbouring photos. The viewer locks document scrolling while open.
-Closing restores the previous scroll setting and returns focus to the tile of
-the photo shown last. A photo past the first `limit` expands the grid first,
-and when that tile is outside the browser window the page scrolls just enough
-to show it. Viewer images are mounted only while the viewer is open.
-
-The component emits no events and makes no requests. Its source is
-`components/orionplace/sellers/SellerPhotoGallery.tsx`; the image contract is in
-`interfaces/orionplace/sellers/ISellerDirectory.ts`.
-
-### Props
-
-| Prop                              | Meaning                                                 |
-| --------------------------------- | ------------------------------------------------------- |
-| `images: ISellerDirectoryImage[]` | Ordered images available to the gallery.                |
-| `name: string`                    | Accessible person or item name used by the component.   |
-| `limit?: number`                  | Limits how many supplied entries the component renders. |
-
-## Русский
-
-`SellerPhotoGallery` показывает подтверждённые фотографии продавца из
-`sellers_get` → `page_data.sellers.data[]`. Подходящие корневые, HTTP- и
-HTTPS-адреса сортируются по `display_order`; остальные записи не выводятся.
-Если подходящих фотографий нет, компонент ничего не показывает. `name`
-используется в доступных названиях фотографий продавца.
-
-В сетке сначала видны первые `limit` фотографий в квадратных плитках без
-обрезки. Кнопка «Ещё» показывает остальные плитки, а «Свернуть» снова скрывает
-их. Для каждого изображения заданы размеры. Скрытые фотографии не добавляются
-на страницу, пока посетитель не раскроет сетку.
-
-Выбор плитки открывает просмотр с этой фотографии. Кнопки перехода циклически
-переключают фотографии, а лента миниатюр выбирает конкретную. Клавиши со
-стрелками влево и вправо переключают фотографии, Home и End выбирают первую и
-последнюю, Escape и щелчок вне окна закрывают просмотр. Горизонтальный жест
-переключает соседнюю фотографию. Пока окно открыто, прокрутка документа
-заблокирована. После закрытия прежняя настройка прокрутки восстанавливается, а
-фокус возвращается на плитку последней показанной фотографии. Если эта
-фотография не входит в первые `limit`, сетка сначала раскрывается, а когда
-плитка оказывается за краем окна браузера, страница прокручивается ровно
-настолько, чтобы её показать. Изображения окна существуют только во время
-просмотра.
-
-Компонент не отправляет события и запросы. Исходный файл:
-`components/orionplace/sellers/SellerPhotoGallery.tsx`; контракт изображений:
-`interfaces/orionplace/sellers/ISellerDirectory.ts`.
-
-### Свойства
-
-| Свойство                          | Назначение                                        |
-| --------------------------------- | ------------------------------------------------- |
-| `images: ISellerDirectoryImage[]` | Упорядоченные изображения галереи.                |
-| `name: string`                    | Доступное имя человека или объекта.               |
-| `limit?: number`                  | Ограничивает число показанных переданных записей. |