orionplace-react 0.1.0 → 0.2.1

package/templates/components/orionplace/blog/StorefrontJournal.tsx

@@ -0,0 +1,548 @@
+'use client';
+
+import {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  useOrionplace,
+  useOrionplaceBrowseStore,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import type { IApiPagination } from '@/interfaces/orionplace/accounts/IProfileData';
+import type { IBlogCategory } from '@/interfaces/orionplace/blog/IBlogApi';
+import { EBlogViewType } from '@/interfaces/orionplace/blog/IBlogPostPreview';
+import {
+  blogCategoryRows,
+  blogJournalLoadAction,
+  blogPageNumber,
+  blogPageSize,
+  mergeBlogPagination,
+  type BlogJournalLoadAction,
+  type BlogJournalPage,
+  type BlogPostsPage,
+} from '@/lib/orionplace/blogJournal';
+import { blogViewType } from '@/lib/orionplace/blogPresentation';
+import { blogLabels } from '@/lib/orionplace/blogLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { useOrionplaceStableHeight } from '@/hooks/useOrionplaceStableHeight';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import { StorefrontPagination } from '@/components/orionplace/shared/StorefrontPagination';
+import { BlogArticle, type BlogArticleProps } from './BlogArticle';
+import { BlogPostGroup } from './BlogPostGroup';
+import styles from './StorefrontJournal.module.css';
+
+type BlogWriter = BlogPostsPage['posts']['keys']['writers'][number];
+
+export interface StorefrontJournalProps {
+  articlePath?: string;
+  initial?: BlogJournalPage | null;
+  page?: number;
+  onPageChange?: (page: number) => void;
+  onLoad?: (
+    action: BlogJournalLoadAction,
+  ) => Promise<BlogPostsPage | null | undefined> |
+    BlogPostsPage |
+    null |
+    undefined;
+  onSelect?: (postId: number) => void;
+  articleProps?: Omit<BlogArticleProps, 'postId' | 'onBack'>;
+}
+
+export function StorefrontJournal({
+  articlePath = '',
+  initial = null,
+  page = 1,
+  onPageChange,
+  onLoad,
+  onSelect,
+  articleProps,
+}: StorefrontJournalProps) {
+  const init = useOrionplace(selectInit);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const browseStore = useOrionplaceBrowseStore();
+  const view = blogViewType(init?.visual_settings?.blog_view_type);
+  const pageSize = blogPageSize(view);
+  const suppliedPage = blogPageNumber(page);
+  const preloaded = Boolean(
+    initial &&
+    initial.page === suppliedPage &&
+    initial.pageSize === pageSize,
+  );
+  const initialData = preloaded ? initial!.data : undefined;
+  const [currentPage, setCurrentPage] = useState(suppliedPage);
+  const [posts, setPosts] = useState(initialData?.posts.data ?? []);
+  const [pagination, setPagination] = useState<Partial<IApiPagination>>(
+    initialData?.posts.rpag ?? {},
+  );
+  const [categories, setCategories] = useState<IBlogCategory[]>(
+    initialData?.categories ?? [],
+  );
+  const [writers, setWriters] = useState<BlogWriter[]>(
+    initialData?.posts.keys.writers ?? [],
+  );
+  const [selectedCategories, setSelectedCategories] = useState<number[]>([]);
+  const [selectedWriters, setSelectedWriters] = useState<number[]>([]);
+  const [filtersOpen, setFiltersOpen] = useState(false);
+  const [selectedPost, setSelectedPost] = useState<number>();
+  const [loaded, setLoaded] = useState(preloaded);
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState('');
+  const results = useRef<HTMLDivElement>(null);
+  const request = useRef<AbortController | undefined>(undefined);
+  const optionsLoaded = useRef(preloaded);
+  const loadedScope = useRef(
+    preloaded ? JSON.stringify([{}, pageSize]) : '',
+  );
+  const preloadedSignature = useRef(
+    preloaded ? JSON.stringify([suppliedPage, pageSize, [], []]) : '',
+  );
+  const stableHeight = useOrionplaceStableHeight(results);
+  const labels = blogLabels(locale);
+  const common = featureLabels(locale);
+  const rows = useMemo(
+    () => blogCategoryRows(categories, locale),
+    [categories, locale],
+  );
+  const activeFilters = selectedCategories.length + selectedWriters.length;
+  const hasFilters = rows.length > 0 || writers.length > 0;
+  const showSkeleton = !loaded && !error;
+  const signature = JSON.stringify([
+    currentPage,
+    pageSize,
+    selectedCategories,
+    selectedWriters,
+  ]);
+
+  function filters() {
+    return {
+      ...(selectedCategories.length
+        ? { categories: [...selectedCategories] }
+        : {}),
+      ...(selectedWriters.length ? { writers: [...selectedWriters] } : {}),
+    };
+  }
+
+  async function load(requestedPage = currentPage) {
+    request.current?.abort();
+    const controller = new AbortController();
+    const selectedFilters = filters();
+    const scope = JSON.stringify([selectedFilters, pageSize]);
+    request.current = controller;
+    setPending(true);
+    setError('');
+
+    try {
+      const data = await onLoad?.(
+        blogJournalLoadAction(
+          selectedFilters,
+          requestedPage,
+          pageSize,
+          controller.signal,
+        ),
+      );
+      if (controller.signal.aborted) {
+        return;
+      }
+
+      const nextPosts = data?.posts.data ?? [];
+      const scopeChanged = loadedScope.current !== scope;
+      if (data && !optionsLoaded.current) {
+        setCategories(data.categories);
+        setWriters(data.posts.keys.writers);
+        optionsLoaded.current = true;
+      }
+      setPagination((previous) => mergeBlogPagination(
+        scopeChanged ? {} : previous,
+        data?.posts.rpag,
+      ));
+      setPosts(nextPosts);
+      browseStore.getState().setBlogPosts(nextPosts);
+      loadedScope.current = scope;
+      setLoaded(true);
+      if (scopeChanged) {
+        requestAnimationFrame(stableHeight.reset);
+      }
+    } catch (requestError) {
+      if (!controller.signal.aborted) {
+        setError(
+          requestError instanceof Error && requestError.message
+            ? requestError.message
+            : common.failed,
+        );
+      }
+    } finally {
+      if (request.current === controller) {
+        request.current = undefined;
+        setPending(false);
+      }
+    }
+  }
+
+  useEffect(() => {
+    setCurrentPage(suppliedPage);
+  }, [suppliedPage]);
+
+  useEffect(() => {
+    if (preloadedSignature.current === signature) {
+      browseStore.getState().setBlogPosts(posts);
+      return;
+    }
+    preloadedSignature.current = '';
+    void load(currentPage);
+  }, [signature]);
+
+  useEffect(() => () => request.current?.abort(), []);
+
+  function changePage(nextPage: number) {
+    const normalized = blogPageNumber(nextPage);
+    if (normalized === currentPage) {
+      return;
+    }
+    setCurrentPage(normalized);
+    onPageChange?.(normalized);
+  }
+
+  function changeFilter(kind: 'categories' | 'writers', id: number) {
+    const update = (values: number[]) => values.includes(id)
+      ? values.filter((item) => item !== id)
+      : [...values, id];
+    if (kind === 'categories') {
+      setSelectedCategories(update);
+    } else {
+      setSelectedWriters(update);
+    }
+    if (currentPage !== 1) {
+      setCurrentPage(1);
+      onPageChange?.(1);
+    }
+  }
+
+  function resetFilters() {
+    setSelectedCategories([]);
+    setSelectedWriters([]);
+    if (currentPage !== 1) {
+      setCurrentPage(1);
+      onPageChange?.(1);
+    }
+  }
+
+  function open(postId: number) {
+    if (!articlePath) {
+      setSelectedPost(postId);
+    }
+    onSelect?.(postId);
+  }
+
+  if (selectedPost) {
+    return (
+      <section className={styles.feature} data-feature-part="StorefrontJournal">
+        <BlogArticle
+          {...articleProps}
+          postId={selectedPost}
+          onBack={() => setSelectedPost(undefined)}
+        />
+      </section>
+    );
+  }
+
+  return (
+    <section className={styles.feature} data-feature-part="StorefrontJournal">
+      <header className={styles.header}>
+        <div className={styles.heading}>
+          <h1>{labels.journal}</h1>
+          {pagination.selected_count !== undefined ? (
+            <p>{labels.articleCount(pagination.selected_count)}</p>
+          ) : showSkeleton ? (
+            <span className={styles.countSkeleton} aria-hidden="true" />
+          ) : null}
+        </div>
+        {hasFilters ? (
+          <button
+            type="button"
+            className={`${styles.button} ${styles.filterToggle}`.trim()}
+            aria-controls="orionplace-journal-filters"
+            aria-expanded={filtersOpen}
+            aria-label={labels.filtersHint}
+            data-journal-filters-toggle
+            onClick={() => setFiltersOpen((value) => !value)}
+          >
+            {labels.filters}
+            {activeFilters ? <span>· {activeFilters}</span> : null}
+          </button>
+        ) : showSkeleton ? (
+          <span className={styles.filterToggleSkeleton} aria-hidden="true" />
+        ) : null}
+      </header>
+
+      <div className={styles.layout}>
+        {hasFilters ? (
+          <JournalFilters
+            rows={rows}
+            writers={writers}
+            selectedCategories={selectedCategories}
+            selectedWriters={selectedWriters}
+            opened={filtersOpen}
+            pending={pending}
+            activeFilters={activeFilters}
+            onChange={changeFilter}
+            onReset={resetFilters}
+          />
+        ) : showSkeleton ? (
+          <FilterSkeleton />
+        ) : null}
+
+        <div className={styles.content}>
+          {error ? (
+            <div role="alert" className={styles.error}>
+              <span>{error}</span>
+              <button
+                type="button"
+                className={styles.button}
+                disabled={pending}
+                onClick={() => void load()}
+              >
+                {common.retry}
+              </button>
+            </div>
+          ) : null}
+          {pending || showSkeleton ? (
+            <p className="op-feature-loading" role="status">
+              <span className={styles.screenReaderOnly}>{common.loading}</span>
+            </p>
+          ) : null}
+          <div
+            ref={results}
+            style={{ minHeight: stableHeight.minHeight }}
+            aria-busy={pending || showSkeleton}
+            data-journal-results
+          >
+            {loaded && activeFilters > 0 && posts.length === 0 ? (
+              <OrionplaceEmptyState
+                kind="journal"
+                size="large"
+                message={labels.noFiltered}
+              >
+                <button
+                  type="button"
+                  className={styles.button}
+                  aria-label={labels.resetHint}
+                  disabled={pending}
+                  onClick={resetFilters}
+                >
+                  {labels.reset}
+                </button>
+              </OrionplaceEmptyState>
+            ) : loaded ? (
+              <BlogPostGroup
+                posts={posts}
+                articlePath={articlePath}
+                onSelect={(post) => open(post.id)}
+              />
+            ) : showSkeleton ? (
+              <JournalSkeleton view={view} />
+            ) : null}
+          </div>
+          <StorefrontPagination
+            pagination={pagination}
+            pending={pending}
+            scrollTarget={results.current}
+            onChange={changePage}
+          />
+        </div>
+      </div>
+    </section>
+  );
+}
+
+interface JournalFiltersProps {
+  rows: ReturnType<typeof blogCategoryRows>;
+  writers: BlogWriter[];
+  selectedCategories: number[];
+  selectedWriters: number[];
+  opened: boolean;
+  pending: boolean;
+  activeFilters: number;
+  onChange: (kind: 'categories' | 'writers', id: number) => void;
+  onReset: () => void;
+}
+
+function JournalFilters({
+  rows,
+  writers,
+  selectedCategories,
+  selectedWriters,
+  opened,
+  pending,
+  activeFilters,
+  onChange,
+  onReset,
+}: JournalFiltersProps) {
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = blogLabels(locale);
+
+  return (
+    <aside
+      id="orionplace-journal-filters"
+      aria-label={labels.filters}
+      data-journal-filters
+      data-open={opened || undefined}
+      className={styles.filters}
+    >
+      {rows.length ? (
+        <fieldset>
+          <legend>{labels.categories}</legend>
+          {rows.map((row) => (
+            <label
+              key={row.id}
+              style={{ paddingLeft: `${row.depth * 16 + 4}px` }}
+            >
+              <input
+                type="checkbox"
+                checked={selectedCategories.includes(row.id)}
+                disabled={pending}
+                data-journal-category={row.id}
+                onChange={() => onChange('categories', row.id)}
+              />
+              <span>{row.name}</span>
+            </label>
+          ))}
+        </fieldset>
+      ) : null}
+      {writers.length ? (
+        <fieldset>
+          <legend>{labels.writers}</legend>
+          {writers.map((writer) => (
+            <label key={writer.value}>
+              <input
+                type="checkbox"
+                checked={selectedWriters.includes(writer.value)}
+                disabled={pending}
+                data-journal-writer={writer.value}
+                onChange={() => onChange('writers', writer.value)}
+              />
+              <span>{writer.key}</span>
+            </label>
+          ))}
+        </fieldset>
+      ) : null}
+      {activeFilters ? (
+        <button
+          type="button"
+          className={styles.button}
+          aria-label={labels.resetHint}
+          disabled={pending}
+          data-journal-filters-reset
+          onClick={() => onReset?.()}
+        >
+          {labels.reset}
+        </button>
+      ) : null}
+    </aside>
+  );
+}
+
+function FilterSkeleton() {
+  return (
+    <div
+      className={styles.filterSkeleton}
+      aria-hidden="true"
+      data-journal-filters-skeleton
+    >
+      <span className={styles.filterSkeletonTitle} />
+      {Array.from({ length: 5 }, (_, index) => (
+        <span key={index} className={styles.filterSkeletonRow}>
+          <span />
+          <span data-short={index % 2 === 1 || undefined} />
+        </span>
+      ))}
+    </div>
+  );
+}
+
+// Placeholder lines of the date, title and preview text, as in BlogPostCard:
+// each entry is a line's class (`title` lines are taller) and width class.
+const SKELETON_LINES = {
+  hero: ['date w24', 'title w11of12', 'title w3of5', 'text wFull'],
+  portrait: ['date w24', 'title w11of12', 'title w1of2', 'text wFull', 'text w4of5'],
+  card: ['date w24', 'title w4of5', 'text wFull'],
+  list: ['date w24', 'title w4of5', 'text wFull', 'text w2of3'],
+} as const;
+
+function SkeletonCard({
+  lines,
+  className = styles.skeletonCard,
+}: {
+  lines: keyof typeof SKELETON_LINES;
+  className?: string;
+}) {
+  return (
+    <span className={className}>
+      <span className={styles.skeletonCover} />
+      <span className={styles.skeletonCopy}>
+        {SKELETON_LINES[lines].map((line) => (
+          <span
+            key={line}
+            className={line.split(' ').map((name) => styles[name]).join(' ')}
+          />
+        ))}
+      </span>
+    </span>
+  );
+}
+
+// Until the first page arrives, placeholder cards in the configured layout
+// keep the list's place: the custom view's large card with a card and two
+// rows beside it, four list rows, or six portrait cards.
+function JournalSkeleton({ view }: { view: EBlogViewType }) {
+  return (
+    <div
+      className={styles.skeleton}
+      aria-hidden="true"
+      data-journal-skeleton={view}
+    >
+      {view === EBlogViewType.CUSTOM ? (
+        <div className={styles.skeletonCustom}>
+          <SkeletonCard
+            lines="hero"
+            className={styles.skeletonHero}
+          />
+          <div className={styles.skeletonPair}>
+            <SkeletonCard lines="card" />
+            <div className={styles.skeletonStack}>
+              {Array.from({ length: 2 }, (_, index) => (
+                <SkeletonCard
+                  key={index}
+                  lines="card"
+                  className={styles.skeletonRow}
+                />
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : view === EBlogViewType.LIST ? (
+        <div className={styles.skeletonList}>
+          {Array.from({ length: 4 }, (_, index) => (
+            <SkeletonCard
+              key={index}
+              lines="list"
+              className={styles.skeletonRow}
+            />
+          ))}
+        </div>
+      ) : (
+        <div className={styles.skeletonGrid}>
+          {Array.from({ length: 6 }, (_, index) => (
+            <SkeletonCard
+              key={index}
+              lines="portrait"
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/templates/components/orionplace/branding/BrandLogos.README.md

@@ -0,0 +1,29 @@
+# BrandLogos
+
+## English
+
+Shows the selected logo from Application Load `init.logos`. `type` chooses
+`big`, `medium`, `small` or `ico` and defaults to `medium`. `label` supplies
+the image's accessible description. A missing or failed image uses the shared
+image placeholder.
+
+### Props
+
+| Prop                                           | Meaning                                                                                                |
+| ---------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `type?: "big" \| "medium" \| "small" \| "ico"` | Key in `init.logos`. Defaults to `medium`. Component dimensions are separate; `type` selects the file. |
+| `label?: string`                               | Alternative text for the store logo image, read in place of the image. Defaults to `Logo`.             |
+
+## Русский
+
+Показывает выбранный логотип из `init.logos` ответа Загрузки приложения.
+`type` выбирает `big`, `medium`, `small` или `ico`; по умолчанию используется
+`medium`. `label` задаёт доступное описание изображения. Если адреса нет
+или изображение не загрузилось, показывается общая заглушка изображения.
+
+### Свойства
+
+| Свойство                                       | Назначение                                                                                                     |
+| ---------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
+| `type?: "big" \| "medium" \| "small" \| "ico"` | Ключ в `init.logos`. По умолчанию `medium`. Размер компонента задаётся отдельно; `type` выбирает файл.          |
+| `label?: string`                               | Альтернативный текст изображения логотипа магазина, который прочитают вместо изображения. По умолчанию `Logo`. |

package/templates/components/orionplace/branding/BrandLogos.module.css

@@ -0,0 +1,7 @@
+.logo {
+  width: auto;
+  min-width: 40px;
+  max-width: 160px;
+  height: 40px;
+  object-fit: contain;
+}

package/templates/components/orionplace/branding/BrandLogos.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import { useOrionplace } from '@/providers/OrionplaceProvider';
+import { selectInit } from '@/stores/orionplace';
+import { OrionplaceImage } from '@/components/orionplace/shared/OrionplaceImage';
+import styles from './BrandLogos.module.css';
+
+export interface BrandLogosProps {
+  type?: 'big' | 'medium' | 'small' | 'ico';
+  label?: string;
+}
+
+export function BrandLogos({
+  type = 'medium',
+  label = 'Logo',
+}: BrandLogosProps) {
+  const init = useOrionplace(selectInit);
+
+  return (
+    <OrionplaceImage
+      src={init?.logos?.[type]}
+      alt={label}
+      width={160}
+      height={40}
+      loading="eager"
+      className={styles.logo}
+      dataLogoType={type}
+    />
+  );
+}