orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,358 @@
+.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. */
+.pagination .button {
+  border-color: var(--orionplace-border);
+}
+
+.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

@@ -0,0 +1,308 @@
+'use client';
+
+import {
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+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 { 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);
+  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
+              >
+                <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>
+                <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>
+  );
+}