orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/search/ProductSearchResults.module.css

@@ -1,361 +0,0 @@
-.root {
-  container: results / inline-size;
-  min-width: 0;
-  color: var(--orionplace-text);
-  font: inherit;
-}
-
-.prompt {
-  display: grid;
-  min-height: 20rem;
-  align-content: center;
-  justify-items: center;
-  gap: 1rem;
-  text-align: center;
-}
-
-.prompt h2 {
-  margin: 0;
-  font-size: 1.125rem;
-  line-height: calc(1.75 / 1.125);
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.prompt p {
-  max-width: 28rem;
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.75rem;
-}
-
-.layout {
-  display: grid;
-  min-width: 0;
-  gap: 1.5rem;
-}
-
-.filtersColumn,
-.results {
-  min-width: 0;
-}
-
-.filterHeading,
-.resultHeading {
-  display: flex;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-}
-
-/* On a phone the filter button stands alone above the open filters. */
-.filterHeading {
-  margin-bottom: 1rem;
-}
-
-.resultHeading {
-  min-height: 3rem;
-  border-bottom: 1px solid var(--orionplace-border);
-}
-
-.filterHeading h2,
-.resultHeading h2 {
-  margin: 0;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.filterHeading h2 {
-  display: none;
-}
-
-.resultHeading p {
-  margin: 0;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-variant-numeric: tabular-nums;
-}
-
-.mobileFilterButton,
-.button {
-  display: inline-flex;
-  box-sizing: border-box;
-  min-height: 2.75rem;
-  align-items: center;
-  justify-content: center;
-  gap: 0.5rem;
-  padding: 0 1.25rem;
-  border: 1px solid var(--orionplace-text);
-  border-radius: 0;
-  color: var(--orionplace-text);
-  background: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  font-weight: 500;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-  outline: none;
-}
-
-.mobileFilterButton:focus-visible,
-.button:focus-visible {
-  background: var(--orionplace-hover);
-}
-
-@media (hover: hover) {
-  .mobileFilterButton:hover,
-  .button:hover {
-    background: var(--orionplace-hover);
-  }
-}
-
-.button:disabled,
-.textButton:disabled {
-  cursor: not-allowed;
-  opacity: 0.4;
-}
-
-.primary {
-  border-color: var(--orionplace-accent);
-  color: var(--orionplace-surface);
-  background: var(--orionplace-accent);
-}
-
-.primary:focus-visible {
-  background: var(--orionplace-accent);
-  opacity: 0.85;
-}
-
-@media (hover: hover) {
-  .primary:hover {
-    background: var(--orionplace-accent);
-    opacity: 0.85;
-  }
-}
-
-.textButton {
-  display: inline-flex;
-  width: fit-content;
-  min-height: 1.5rem;
-  align-items: center;
-  padding: 0;
-  border: 0;
-  border-bottom: 1px solid currentColor;
-  color: var(--orionplace-text);
-  background: transparent;
-  font: inherit;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-}
-
-.textButton:focus-visible {
-  opacity: 0.7;
-  outline: none;
-}
-
-@media (hover: hover) {
-  .textButton:hover {
-    opacity: 0.7;
-    outline: none;
-  }
-}
-
-.filters {
-  display: none;
-}
-
-.filtersOpen {
-  display: block;
-}
-
-.results {
-  position: relative;
-  display: grid;
-  align-content: start;
-  gap: 1.25rem;
-}
-
-.filterLoading {
-  display: grid;
-  gap: 1.25rem;
-}
-
-.filterLoading div {
-  box-sizing: border-box;
-  height: 8rem;
-  padding-top: 1.25rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-.filterLoading div:first-child {
-  border-top: 0;
-}
-
-.filterLoading span {
-  display: block;
-  width: 66%;
-  height: 0.75rem;
-  background: var(--orionplace-muted-surface);
-}
-
-.loading {
-  display: grid;
-  gap: 1rem;
-}
-
-.skeletons {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 2rem 1rem;
-}
-
-.skeleton {
-  display: grid;
-  align-content: start;
-  gap: 0.75rem;
-}
-
-.skeleton span {
-  aspect-ratio: 3 / 4;
-  border: 1px solid var(--orionplace-border);
-}
-
-.skeleton i {
-  width: 80%;
-  height: 0.75rem;
-  background: var(--orionplace-muted-surface);
-}
-
-.skeleton i:last-child {
-  width: 40%;
-}
-
-.failure {
-  display: grid;
-  justify-items: start;
-  gap: 1rem;
-  padding: 2rem 0;
-}
-
-.failure p {
-  margin: 0;
-  padding: 0.875rem 1rem;
-  border: 1px solid var(--orionplace-danger);
-  color: var(--orionplace-danger);
-}
-
-.empty {
-  min-height: 24rem;
-}
-
-.updating {
-  pointer-events: none;
-  opacity: 0.6;
-}
-
-.pagination {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding-top: 1.5rem;
-  border-top: 1px solid var(--orionplace-border);
-}
-
-/* Page buttons have a light frame that darkens on hover or focus, as in Nuxt.
-   Previous and next are links while that page exists. */
-.pagination .button {
-  border-color: var(--orionplace-border);
-  font-family: inherit;
-  text-decoration: none;
-}
-
-.pagination .button:focus-visible {
-  border-color: var(--orionplace-text);
-  background: transparent;
-}
-
-@media (hover: hover) {
-  .pagination .button:hover:not(:disabled) {
-    border-color: var(--orionplace-text);
-    background: transparent;
-  }
-}
-
-.pagination > span {
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: 1rem;
-  text-align: center;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  font-variant-numeric: tabular-nums;
-}
-
-.screenReaderOnly {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* The prompt follows the results' own width, as in the other packages. */
-@container results (min-width: 592px) {
-  .prompt h2 {
-    font-size: 1.5rem;
-    line-height: calc(2 / 1.5);
-  }
-}
-
-@container results (min-width: 41.25rem) {
-  .skeletons {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}
-
-@container results (min-width: 55rem) {
-  .layout {
-    grid-template-columns: 15rem minmax(0, 1fr);
-    gap: 2.5rem;
-  }
-
-  .filterHeading {
-    min-height: 3rem;
-    margin-bottom: 0;
-    border-bottom: 1px solid var(--orionplace-border);
-  }
-
-  .filterHeading h2 {
-    display: block;
-  }
-
-  .mobileFilterButton {
-    display: none;
-  }
-
-  .filters {
-    display: block;
-  }
-
-  .skeletons {
-    grid-template-columns: repeat(4, minmax(0, 1fr));
-  }
-}

package/templates/components/orionplace/search/ProductSearchResults.tsx

@@ -1,359 +0,0 @@
-'use client';
-
-import {
-  useEffect,
-  useRef,
-  useState,
-  type MouseEvent,
-} from 'react';
-import { usePathname, useSearchParams } from 'next/navigation';
-import {
-  useOrionplaceBrowse,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { IProduct } from '@/interfaces/orionplace/products/IProduct';
-import type {
-  IProductSearchFacets,
-  ProductFacetSelection,
-} from '@/interfaces/orionplace/products/IProductSearchFacets';
-import { hasSearchFilters } from '@/lib/orionplace/searchFilters';
-import { storefrontPageHref } from '@/lib/orionplace/pageSeo';
-import { browseLabels } from '@/lib/orionplace/browseLabels';
-import { useOrionplaceStableHeight } from '@/hooks/useOrionplaceStableHeight';
-import {
-  ProductGroup,
-  type ProductGroupEvents,
-} from '@/components/orionplace/products/ProductGroup';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import { SearchFilters } from './SearchFilters';
-import styles from './ProductSearchResults.module.css';
-
-export interface ProductSearchResultsProps extends ProductGroupEvents {
-  products?: readonly IProduct[];
-  productIds?: number[];
-  query?: string;
-  facets?: IProductSearchFacets | null;
-  filters?: ProductFacetSelection;
-  hideCategories?: boolean;
-  fixedFilters?: readonly string[];
-  emptyDescription?: string;
-  filtersDisabled?: boolean;
-  page?: number;
-  pages?: number;
-  total?: number;
-  hasNext?: boolean;
-  pending?: boolean;
-  failed?: boolean;
-  loaded?: boolean;
-  productActionsDisabled?: boolean;
-  productHref?: (productId: number) => string;
-  onSelectHome?: () => void;
-  onChangeFilters?: (selection: ProductFacetSelection) => void;
-  onClearFilters?: () => void;
-  onChangePage?: (page: number) => void;
-  onRetry?: () => void;
-}
-
-export function ProductSearchResults({
-  products,
-  productIds = [],
-  query,
-  facets: suppliedFacets,
-  filters: suppliedFilters,
-  hideCategories = false,
-  fixedFilters = [],
-  emptyDescription = '',
-  filtersDisabled = false,
-  page = 1,
-  pages,
-  total,
-  hasNext = false,
-  pending = false,
-  failed = false,
-  loaded = false,
-  productActionsDisabled = false,
-  productHref,
-  onSelectHome,
-  onChangeFilters,
-  onClearFilters,
-  onChangePage,
-  onRetry,
-  ...productEvents
-}: ProductSearchResultsProps) {
-  const storedFacets = useOrionplaceBrowse((state) => state.searchFacets);
-  const storedFilters = useOrionplaceBrowse((state) => state.searchFilters);
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = browseLabels(locale);
-  // Every list of this component keeps its page in the address (`?page=`),
-  // so previous and next are links search engines follow; a click changes
-  // the page in place.
-  const pathname     = usePathname() ?? '/';
-  const search       = useSearchParams()?.toString() ?? '';
-  const previousHref = !pending && page > 1
-    ? storefrontPageHref(pathname, search, page - 1)
-    : undefined;
-  const nextHref     = !pending && !failed && hasNext
-    ? storefrontPageHref(pathname, search, page + 1)
-    : undefined;
-
-  // A link opened in a new tab or window keeps its default.
-  function followPage(event: MouseEvent<HTMLAnchorElement>, value: number) {
-    if (
-      event.button !== 0 ||
-      event.metaKey ||
-      event.ctrlKey ||
-      event.shiftKey ||
-      event.altKey
-    ) {
-      return;
-    }
-    event.preventDefault();
-    onChangePage?.(value);
-  }
-  const facets = suppliedFacets === undefined ? storedFacets : suppliedFacets;
-  const filters = suppliedFilters ?? storedFilters;
-  const ids = productIds.length
-    ? productIds
-    : products?.map((product) => product.id) ?? [];
-  const resultArea = useRef<HTMLDivElement>(null);
-  const { minHeight, reset } = useOrionplaceStableHeight(resultArea);
-  const [filtersOpen, setFiltersOpen] = useState(false);
-  const selected = hasSearchFilters(
-    filters,
-    hideCategories,
-    [...fixedFilters],
-  );
-  const shortQuery = query !== undefined && query.trim().length < 3;
-  const emptyHint = emptyDescription || (
-    hideCategories ? labels.emptyCategoryHint : labels.emptyHint
-  );
-
-  const loading = (pending || (!loaded && !failed)) && !ids.length;
-  const wasLoading = useRef(loading);
-
-  useEffect(() => {
-    if (facets === null) {
-      reset();
-    }
-  }, [facets, reset]);
-
-  // The placeholder cards are no result height to keep: when they give way
-  // to the results, the area measures afresh (a seller with one product kept
-  // the height of the 12 placeholders).
-  useEffect(() => {
-    if (wasLoading.current && !loading) {
-      reset();
-    }
-    wasLoading.current = loading;
-  }, [loading, reset]);
-
-  return (
-    <div className={styles.root} data-product-search-results>
-      {shortQuery ? (
-        <div className={styles.prompt} data-search-prompt>
-          <h2>{labels.startTitle}</h2>
-          <p>{labels.startHint}</p>
-        </div>
-      ) : (
-        <section
-          className={styles.layout}
-          aria-label={labels.products}
-          aria-busy={pending}
-        >
-          <aside className={styles.filtersColumn}>
-            {pending && !facets ? (
-              <div
-                className={styles.filterLoading}
-                aria-hidden="true"
-                data-filter-loading
-              >
-                {[0, 1, 2].map((item) => (
-                  <div key={item}><span /></div>
-                ))}
-              </div>
-            ) : (
-              <>
-                <div className={styles.filterHeading}>
-                  <h2>{labels.filters}</h2>
-                  <button
-                    type="button"
-                    className={styles.mobileFilterButton}
-                    aria-expanded={filtersOpen}
-                    onClick={() => setFiltersOpen((value) => !value)}
-                  >
-                    {labels.filters} <span aria-hidden="true">⌄</span>
-                  </button>
-                  {selected ? (
-                    <button
-                      type="button"
-                      className={styles.textButton}
-                      disabled={pending}
-                      onClick={() => onClearFilters?.()}
-                    >
-                      {labels.clear}
-                    </button>
-                  ) : null}
-                </div>
-                <div
-                  className={`${styles.filters} ${
-                    filtersOpen ? styles.filtersOpen : ''
-                  }`.trim()}
-                  data-search-part="SearchFilters"
-                >
-                  <SearchFilters
-                    hideCategories={hideCategories}
-                    fixedFilters={fixedFilters}
-                    disabled={filtersDisabled}
-                    facets={facets}
-                    selection={filters}
-                    onChange={onChangeFilters}
-                  />
-                </div>
-              </>
-            )}
-          </aside>
-
-          <div
-            ref={resultArea}
-            className={styles.results}
-            style={{ minHeight }}
-          >
-            <header className={styles.resultHeading}>
-              <h2>{labels.products}</h2>
-              {total !== undefined ? (
-                <p data-search-total>{labels.results}: {total}</p>
-              ) : null}
-            </header>
-
-            {loading ? (
-              <div
-                role="status"
-                aria-label={labels.loading}
-                className={styles.loading}
-                data-search-loading
-              >
-                <p className={styles.screenReaderOnly}>{labels.loading}</p>
-                <div aria-hidden="true" className={styles.skeletons}>
-                  {Array.from({ length: 12 }, (_, index) => (
-                    <div key={index} className={styles.skeleton}>
-                      <span /><i /><i />
-                    </div>
-                  ))}
-                </div>
-              </div>
-            ) : failed ? (
-              <div role="alert" className={styles.failure}>
-                <p>{labels.failed}</p>
-                <button type="button" className={styles.button} onClick={() => onRetry?.()}>
-                  {labels.retry}
-                </button>
-              </div>
-            ) : loaded && !ids.length ? (
-              <div className={styles.empty} data-search-empty>
-                <OrionplaceEmptyState
-                  kind="search"
-                  size="large"
-                  messageTag="h3"
-                  message={labels.emptyTitle}
-                  description={emptyHint}
-                >
-                  {selected ? (
-                    <button
-                      type="button"
-                      className={`${styles.button} ${styles.primary}`}
-                      onClick={() => onClearFilters?.()}
-                    >
-                      {labels.clear}
-                    </button>
-                  ) : null}
-                  <button
-                    type="button"
-                    className={styles.textButton}
-                    onClick={() => onSelectHome?.()}
-                  >
-                    {labels.home} <span aria-hidden="true">→</span>
-                  </button>
-                </OrionplaceEmptyState>
-              </div>
-            ) : (
-              <div
-                className={pending ? styles.updating : ''}
-                data-search-part="ProductGroup"
-              >
-                <ProductGroup
-                  {...productEvents}
-                  products={products}
-                  productIds={ids}
-                  layout="grid"
-                  disabled={productActionsDisabled || pending}
-                  productHref={productHref}
-                />
-              </div>
-            )}
-
-            {pending && ids.length ? (
-              <p
-                role="status"
-                className={styles.screenReaderOnly}
-                data-search-updating
-              >
-                {labels.loading}
-              </p>
-            ) : null}
-
-            {page > 1 || hasNext ? (
-              <nav
-                aria-label={labels.page}
-                className={styles.pagination}
-                data-search-pagination
-              >
-                {previousHref ? (
-                  <a
-                    className={styles.button}
-                    href={previousHref}
-                    rel="prev"
-                    onClick={(event) => followPage(event, page - 1)}
-                  >
-                    <span><span aria-hidden="true">←</span> {labels.previous}</span>
-                  </a>
-                ) : (
-                  <button
-                    type="button"
-                    className={styles.button}
-                    disabled={pending || page === 1}
-                    onClick={() => onChangePage?.(page - 1)}
-                  >
-                    <span><span aria-hidden="true">←</span> {labels.previous}</span>
-                  </button>
-                )}
-                <span>
-                  {labels.page} {page}
-                  {pages ? ` ${labels.of} ${pages}` : ''}
-                </span>
-                {nextHref ? (
-                  <a
-                    className={styles.button}
-                    href={nextHref}
-                    rel="next"
-                    onClick={(event) => followPage(event, page + 1)}
-                  >
-                    <span>{labels.next} <span aria-hidden="true">→</span></span>
-                  </a>
-                ) : (
-                  <button
-                    type="button"
-                    className={styles.button}
-                    disabled={pending || failed || !hasNext}
-                    onClick={() => onChangePage?.(page + 1)}
-                  >
-                    <span>{labels.next} <span aria-hidden="true">→</span></span>
-                  </button>
-                )}
-              </nav>
-            ) : null}
-          </div>
-        </section>
-      )}
-    </div>
-  );
-}