orionplace-react 0.7.7 → 0.8.0

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

@@ -1,549 +0,0 @@
-'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}
-            linked
-            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

@@ -1,29 +0,0 @@
-# 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

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

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

@@ -1,30 +0,0 @@
-'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}
-    />
-  );
-}