orionplace-react 0.7.7 → 0.8.0

package/templates/components/orionplace/blog/BlogPostCard.module.css

@@ -1,167 +0,0 @@
-.article {
-  min-width: 0;
-  background: var(--orionplace-surface);
-  color: var(--orionplace-text);
-}
-
-.card {
-  display: grid;
-  width: 100%;
-  height: 100%;
-  min-width: 0;
-  padding: 0;
-  overflow: hidden;
-  color: inherit;
-  text-align: left;
-  text-decoration: none;
-  cursor: pointer;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-}
-
-.card:focus-visible {
-  outline: 2px solid currentColor;
-  outline-offset: 3px;
-}
-
-.cover {
-  position: relative;
-  display: block;
-  width: 100%;
-  aspect-ratio: 3 / 2;
-  overflow: hidden;
-  background: var(--orionplace-surface);
-}
-
-.cover img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: opacity 160ms ease;
-}
-
-@media (hover: hover) {
-  .card:hover .cover img {
-    opacity: 0.85;
-  }
-}
-
-.fallback {
-  position: absolute;
-  inset: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--orionplace-muted);
-  border: 1px solid var(--orionplace-border);
-}
-
-.pattern {
-  position: absolute;
-  inset: 0;
-  width: 100%;
-  height: 100%;
-  color: var(--orionplace-border);
-}
-
-.initial {
-  position: relative;
-  display: flex;
-  width: 4rem;
-  height: 4rem;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.875rem;
-  line-height: calc(2.25 / 1.875);
-  text-transform: uppercase;
-  background: var(--orionplace-surface);
-  border: 1px solid var(--orionplace-border);
-}
-
-.initial svg {
-  width: 1.75rem;
-  height: 1.75rem;
-}
-
-.paid {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 0.125rem 0.5rem;
-  color: var(--orionplace-inverse-text);
-  font-size: 0.6875rem;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  background: var(--orionplace-inverse-surface);
-}
-
-.copy {
-  display: grid;
-  min-width: 0;
-  align-content: start;
-  gap: 0.5rem;
-  padding-block: 1rem;
-}
-
-.meta {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 0.25rem 0.75rem;
-  color: var(--orionplace-muted);
-  font-size: 0.75rem;
-  line-height: calc(1 / 0.75);
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.title {
-  overflow-wrap: anywhere;
-  font-size: 0.875rem;
-  font-weight: 500;
-  line-height: 1.25rem;
-  letter-spacing: 0.04em;
-  text-transform: uppercase;
-}
-
-.preview {
-  display: -webkit-box;
-  overflow: hidden;
-  color: var(--orionplace-muted);
-  font-size: 0.875rem;
-  line-height: 1.5rem;
-  overflow-wrap: anywhere;
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-}
-
-/* The title size and the list and hero layouts follow BlogPostGroup's
-   width (`posts`), so a card looks the same wherever the group is placed. */
-@container posts (min-width: 592px) {
-  .title {
-    font-size: 1rem;
-    line-height: 1.5rem;
-  }
-
-  .card[data-layout='list'],
-  .card[data-layout='hero'] {
-    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
-    column-gap: 1.5rem;
-    align-items: center;
-  }
-
-  .card[data-layout='hero'] {
-    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
-  }
-
-  .card[data-layout='hero'] .copy {
-    padding-block: 1.5rem;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .cover img {
-    transition: none;
-  }
-}

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

@@ -1,177 +0,0 @@
-'use client';
-
-import { useEffect, useState, type MouseEvent } from 'react';
-import {
-  useOrionplaceBrowse,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import type { IBlogPostPreview } from '@/interfaces/orionplace/blog/IBlogPostPreview';
-import {
-  blogCoverInitial,
-  blogCoverPattern,
-  blogPostCover,
-  blogPostIsPaid,
-  blogPostPreview,
-  blogPostTitle,
-} from '@/lib/orionplace/blogPresentation';
-import { blogLabels } from '@/lib/orionplace/blogLabels';
-import styles from './BlogPostCard.module.css';
-
-export interface BlogPostCardProps {
-  postId: number;
-  post?: IBlogPostPreview;
-  layout?: 'portrait' | 'list' | 'hero';
-  articlePath?: string;
-  onSelect?: (post: IBlogPostPreview) => void;
-}
-
-export function BlogPostCard({
-  postId,
-  post: suppliedPost,
-  layout = 'portrait',
-  articlePath = '',
-  onSelect,
-}: BlogPostCardProps) {
-  const storedPost = useOrionplaceBrowse((state) =>
-    state.blogPosts.find((item) => item.id === postId),
-  );
-  const post = suppliedPost?.id === postId ? suppliedPost : storedPost;
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const labels = blogLabels(locale);
-  const [coverFailed, setCoverFailed] = useState(false);
-  const title = post ? blogPostTitle(post, locale) : String(postId);
-  const preview = post ? blogPostPreview(post, locale) : '';
-  const cover = post ? blogPostCover(post) : '';
-  const showCover = Boolean(cover) && !coverFailed;
-  const href = articlePath
-    ? `${articlePath.replace(/\/+$/, '')}/${postId}?locale=${encodeURIComponent(locale)}`
-    : '';
-
-  useEffect(() => {
-    setCoverFailed(false);
-  }, [cover]);
-
-  if (!post) {
-    return null;
-  }
-
-  function select(event: MouseEvent<HTMLAnchorElement | HTMLButtonElement>) {
-    if (!event.defaultPrevented) {
-      onSelect?.(post!);
-    }
-  }
-
-  const content = (
-    <>
-      <span className={styles.cover}>
-        {showCover ? (
-          <img
-            src={cover}
-            alt=""
-            width={600}
-            height={400}
-            loading="lazy"
-            decoding="async"
-            data-blog-card-cover
-            onError={() => setCoverFailed(true)}
-          />
-        ) : (
-          <CoverFallback
-            postId={post.id}
-            title={title}
-          />
-        )}
-        {blogPostIsPaid(post) ? (
-          <span className={styles.paid}>{labels.subscription}</span>
-        ) : null}
-      </span>
-      <span className={styles.copy}>
-        {post.date_created?.date || post.read_time_min ? (
-          <span className={styles.meta}>
-            {post.date_created?.date ? (
-              <time>{post.date_created.date}</time>
-            ) : null}
-            {post.read_time_min ? (
-              <span>{post.read_time_min} {labels.minutes}</span>
-            ) : null}
-          </span>
-        ) : null}
-        <span className={styles.title}>{title}</span>
-        {preview ? <span className={styles.preview}>{preview}</span> : null}
-      </span>
-    </>
-  );
-
-  return (
-    <article
-      className={styles.article}
-      data-blog-card={layout}
-      data-blog-post={post.id}
-    >
-      {href ? (
-        <a
-          href={href}
-          className={styles.card}
-          data-layout={layout}
-          onClick={select}
-        >
-          {content}
-        </a>
-      ) : (
-        <button
-          type="button"
-          className={styles.card}
-          data-layout={layout}
-          onClick={select}
-        >
-          {content}
-        </button>
-      )}
-    </article>
-  );
-}
-
-function CoverFallback({ postId, title }: { postId: number; title: string }) {
-  const pattern = blogCoverPattern(postId);
-  const initial = blogCoverInitial(title);
-  return (
-    <span className={styles.fallback} data-blog-cover-fallback aria-hidden="true">
-      <svg
-        className={styles.pattern}
-        preserveAspectRatio="xMidYMid slice"
-        viewBox="0 0 300 200"
-        fill="none"
-        stroke="currentColor"
-        strokeWidth="1"
-      >
-        {pattern === 0 ? Array.from({ length: 16 }, (_, index) => (
-          <path
-            key={index}
-            d={`M${(index + 1) * 24 - 60} 200 L${(index + 1) * 24 + 40} 0`}
-          />
-        )) : null}
-        {pattern === 1 ? Array.from({ length: 7 }, (_, index) => (
-          <circle key={index} cx="150" cy="100" r={(index + 1) * 22} />
-        )) : null}
-        {pattern === 2 ? Array.from({ length: 9 }, (_, index) => (
-          <path key={index} d={`M0 ${(index + 1) * 22} H300`} />
-        )) : null}
-      </svg>
-      <span className={styles.initial}>
-        {initial || (
-          <svg
-            viewBox="0 0 24 24"
-            fill="none"
-            stroke="currentColor"
-            strokeWidth="1.5"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          >
-            <path d="M6 3h9l3 3v15H6z" />
-            <path d="M9 10h6M9 14h6M9 18h4" />
-          </svg>
-        )}
-      </span>
-    </span>
-  );
-}

package/templates/components/orionplace/blog/BlogPostGroup.README.md

@@ -1,49 +0,0 @@
-# BlogPostGroup
-
-## English
-
-`BlogPostGroup` renders `posts` when a server page supplies them; otherwise it
-uses `orionplaceBrowse.blogPosts`. Application Load
-`visual_settings.blog_view_type` selects a portrait grid, a list or the custom
-composition. The custom composition shows the first post as a hero and groups
-the remaining posts in their original order. An empty collection shows the
-journal empty state.
-
-`articlePath` and every `onSelect` event are forwarded to `BlogPostCard`.
-
-Columns follow the width of the group itself, not the screen width: the
-portrait grid has two columns from 592px and three from 912px, a custom group
-puts its cards side by side from 664px, and list and hero cards place the cover
-beside the text from 592px.
-
-### Props
-
-| Prop                                          | Meaning                                                                                                  |
-| --------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `posts?: readonly IBlogPostPreview[]`         | Journal articles rendered in the supplied order.                                                         |
-| `articlePath?: string`                        | Base storefront path used to build article links.                                                        |
-| `onSelect?: (post: IBlogPostPreview) => void` | Passes the article object selected in one of the list’s cards. |
-
-## Русский
-
-`BlogPostGroup` выводит переданные серверной страницей `posts`, а без них —
-публикации из `orionplaceBrowse.blogPosts`. Настройка
-Application Load `visual_settings.blog_view_type` выбирает сетку вертикальных
-карточек, список или специальную композицию. В специальной композиции первая
-публикация показана крупно, а остальные объединены в группы с сохранением
-исходного порядка. Для пустого списка показывается состояние пустого журнала.
-
-`articlePath` и каждое событие `onSelect` передаются через `BlogPostCard`.
-
-Колонки зависят от ширины самой группы, а не экрана: сетка вертикальных
-карточек получает две колонки с 592px и три с 912px, группа специальной
-композиции ставит карточки рядом с 664px, а у карточек списка и крупных
-карточек обложка стоит рядом с текстом с 592px.
-
-### Свойства
-
-| Свойство                                      | Назначение                                                                                                |
-| --------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `posts?: readonly IBlogPostPreview[]`         | Статьи журнала в переданном порядке.                                                                      |
-| `articlePath?: string`                        | Базовый путь магазина для ссылок на статьи.                                                               |
-| `onSelect?: (post: IBlogPostPreview) => void` | Передаёт объект статьи, выбранной в одной из карточек списка. |

package/templates/components/orionplace/blog/BlogPostGroup.module.css

@@ -1,37 +0,0 @@
-/* Columns follow the width of this group, not of the screen: 592, 664 and
-   912px are its widths in the /journal page on 640, 1024 and 1280px
-   screens. The cards take their list and hero layout from it too. */
-.group {
-  container: posts / inline-size;
-}
-
-.grid,
-.custom,
-.customGroup,
-.customRemainder {
-  display: grid;
-  gap: 1.5rem;
-}
-
-.grid,
-.custom {
-  row-gap: 2.5rem;
-}
-
-@container posts (min-width: 592px) {
-  .grid[data-layout='portrait'] {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container posts (min-width: 664px) {
-  .customGroup[data-columns='two'] {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-}
-
-@container posts (min-width: 912px) {
-  .grid[data-layout='portrait'] {
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-  }
-}

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

@@ -1,129 +0,0 @@
-'use client';
-
-import {
-  useOrionplace,
-  useOrionplaceBrowse,
-  useOrionplaceSelections,
-} from '@/providers/OrionplaceProvider';
-import { selectInit } from '@/stores/orionplace';
-import {
-  EBlogViewType,
-  type IBlogPostPreview,
-} from '@/interfaces/orionplace/blog/IBlogPostPreview';
-import {
-  blogCustomGroups,
-  blogViewType,
-} from '@/lib/orionplace/blogPresentation';
-import { blogLabels } from '@/lib/orionplace/blogLabels';
-import { BlogPostCard } from '@/components/orionplace/blog/BlogPostCard';
-import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
-import styles from './BlogPostGroup.module.css';
-
-export interface BlogPostGroupProps {
-  posts?: readonly IBlogPostPreview[];
-  articlePath?: string;
-  onSelect?: (post: IBlogPostPreview) => void;
-}
-
-export function BlogPostGroup({
-  posts: suppliedPosts,
-  articlePath = '',
-  onSelect,
-}: BlogPostGroupProps) {
-  const init = useOrionplace(selectInit);
-  const storedPosts = useOrionplaceBrowse((state) => state.blogPosts);
-  const posts = suppliedPosts ?? storedPosts;
-  const locale = useOrionplaceSelections((state) => state.localeCode);
-  const view = blogViewType(init?.visual_settings?.blog_view_type);
-  const labels = blogLabels(locale);
-
-  if (!posts.length) {
-    return (
-      <section
-        className={styles.group}
-        aria-label={labels.journal}
-        data-blog-view={view}
-      >
-        <OrionplaceEmptyState
-          kind="journal"
-          size="large"
-          message={labels.emptyJournal}
-        />
-      </section>
-    );
-  }
-
-  if (view === EBlogViewType.CUSTOM) {
-    return (
-      <section
-        className={styles.group}
-        aria-label={labels.journal}
-        data-blog-view={view}
-      >
-        <div className={styles.custom}>
-          <BlogPostCard
-            postId={posts[0]!.id}
-            post={posts[0]}
-            layout="hero"
-            articlePath={articlePath}
-            onSelect={onSelect}
-          />
-          {blogCustomGroups(posts).map((group) => (
-            <div
-              key={group[0]!.id}
-              className={styles.customGroup}
-              data-blog-custom-group
-              data-columns={group.length > 1 ? 'two' : 'one'}
-            >
-              <BlogPostCard
-                postId={group[0]!.id}
-                post={group[0]}
-                layout={group.length === 1 ? 'hero' : 'portrait'}
-                articlePath={articlePath}
-                onSelect={onSelect}
-              />
-              {group.length > 1 ? (
-                <div className={styles.customRemainder}>
-                  {group.slice(1).map((post) => (
-                    <BlogPostCard
-                      key={post.id}
-                      postId={post.id}
-                      post={post}
-                      layout={group.length === 2 ? 'portrait' : 'list'}
-                      articlePath={articlePath}
-                      onSelect={onSelect}
-                    />
-                  ))}
-                </div>
-              ) : null}
-            </div>
-          ))}
-        </div>
-      </section>
-    );
-  }
-
-  return (
-    <section
-      className={styles.group}
-      aria-label={labels.journal}
-      data-blog-view={view}
-    >
-      <div
-        className={styles.grid}
-        data-layout={view === EBlogViewType.LIST ? 'list' : 'portrait'}
-      >
-        {posts.map((post) => (
-          <BlogPostCard
-            key={post.id}
-            postId={post.id}
-            post={post}
-            layout={view === EBlogViewType.LIST ? 'list' : 'portrait'}
-            articlePath={articlePath}
-            onSelect={onSelect}
-          />
-        ))}
-      </div>
-    </section>
-  );
-}

package/templates/components/orionplace/blog/StorefrontJournal.README.md

@@ -1,105 +0,0 @@
-# StorefrontJournal
-
-## English
-
-`StorefrontJournal` shows the journal list with category and author filters.
-`page` is the current list page and `onPageChange` lets the route keep that
-value in its address. A route can pass `initial` from its server request when
-its page and layout match the current values. The first server HTML then
-contains links to every returned article, and hydration does not repeat the
-request. Without matching initial data, `onLoad` receives `blog_posts_get`
-with the current page and enough items to fill whole rows of the layout selected
-by `visual_settings.blog_view_type`.
-
-The heading uses `posts.rpag.selected_count`, which is the number of articles
-matching the current filters. Category checkboxes send IDs in
-`filters.categories`; author checkboxes send IDs in `filters.writers`. A
-category can represent articles in its public descendants. The category and
-author choices come from the first successful response and remain available
-while results are filtered. A category is hidden when neither it nor its
-descendants contain articles.
-
-Changing a filter returns to page one. Reset clears both groups. Page changes
-keep the selected filters and preserve pagination values that later responses
-omit. The previous list remains visible while a later request is pending. An
-initial request uses a layout-shaped placeholder. A filtered empty response
-shows Reset; a failed request keeps a Retry action.
-
-When `articlePath` is set, every card links to
-`{articlePath}/{id}?locale=<selected locale>` and still calls `onSelect` with
-the article ID. The link is present in server HTML and supports normal browser
-navigation. Without `articlePath`, selecting a card replaces the list with
-`BlogArticle`; `articleProps` provides that article's API and product handlers,
-and its Back action restores the list.
-
-The layout follows the width of the component itself, not the screen width, so
-it is the same wherever the component is placed: from 960px of its own width
-the filters stand in a column beside the articles (it stays in view while the
-articles scroll and scrolls on its own when it is taller than the window), and a
-narrower journal opens them with its Filters button. The article columns follow
-the width of the list:
-two portrait columns from 592px and three from 912px.
-
-### Props
-
-| Prop                                                                                                                            | Meaning                                                                                                  |
-| ------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
-| `articlePath?: string`                                                                                                          | Base storefront path used to build article links.                                                        |
-| `initial?: BlogJournalPage`                                                                                                     | Server-provided initial data used for the first render and hydration.                                    |
-| `page?: number`                                                                                                                 | Current result page.                                                                                     |
-| `onPageChange?: (page: number) => void`                                                                                         | Called when the visitor requests another page. The callback payload is shown in its type.                |
-| `onLoad?: (action: BlogJournalLoadAction) => Promise<BlogPostsPage \| null \| undefined> \| BlogPostsPage \| null \| undefined` | Called when the component needs its primary data. The callback payload is shown in its type.             |
-| `onSelect?: (postId: number) => void`                                                                                           | Passes the selected article ID after changing the open article when the application does not control `postId`. |
-| `articleProps?: Omit<BlogArticleProps, "onBack" \| "postId">`                                                                   | Props forwarded to the article child component.                                                          |
-
-## Русский
-
-`StorefrontJournal` показывает список статей с фильтрами по категориям и
-авторам. `page` задаёт текущую страницу, а `onPageChange` позволяет маршруту
-хранить это значение в адресе. Маршрут может передать `initial` из серверного
-запроса, если страница и вид списка совпадают с текущими значениями. Тогда
-первый серверный HTML уже содержит ссылки на все полученные статьи, а после
-гидратации запрос не повторяется. Без подходящих начальных данных `onLoad`
-получает `blog_posts_get` с текущей страницей и количеством статей, которое
-заполняет целые ряды вида из `visual_settings.blog_view_type`.
-
-В заголовке используется `posts.rpag.selected_count`: это количество статей,
-подходящих под текущие фильтры. Флажки категорий передают ID в
-`filters.categories`, а флажки авторов — в `filters.writers`. Категория также
-может находить статьи в своих публичных дочерних категориях. Варианты
-категорий и авторов берутся из первого успешного ответа и не исчезают во время
-фильтрации. Категория скрыта, если статей нет ни в ней, ни в её дочерних
-категориях.
-
-Изменение фильтра возвращает список на первую страницу. Сброс очищает оба
-набора. При переходе между страницами выбранные фильтры сохраняются, как и
-значения пагинации, которые могут отсутствовать в последующих ответах. Во
-время следующего запроса прежний список остаётся видимым. Для первого запроса
-показывается заполнитель выбранного вида. Пустой результат с фильтрами даёт
-действие сброса, а ошибка — действие повторного запроса.
-
-Если передан `articlePath`, каждая карточка содержит ссылку
-`{articlePath}/{id}?locale=<выбранная локаль>` и вызывает `onSelect` с ID
-статьи. Ссылка присутствует в серверном HTML и поддерживает обычную навигацию
-браузера. Без `articlePath` выбор карточки заменяет список компонентом
-`BlogArticle`. `articleProps` передаёт ему обработчики API и товаров, а действие
-«Назад» восстанавливает список.
-
-Раскладка зависит от ширины самого компонента, а не экрана, поэтому она
-одинакова, где бы компонент ни стоял: начиная с 960px собственной ширины
-фильтры стоят колонкой рядом со статьями (она остаётся на виду при прокрутке
-статей и прокручивается сама, если выше окна), а в более узком журнале их
-открывает кнопка «Фильтры». Колонки статей зависят от ширины списка: две колонки
-вертикальных карточек с 592px и три с 912px.
-
-### Свойства
-
-| Свойство                                                                                                                        | Назначение                                                                                                |
-| ------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
-| `articlePath?: string`                                                                                                          | Базовый путь магазина для ссылок на статьи.                                                               |
-| `initial?: BlogJournalPage`                                                                                                     | Начальные данные с сервера для первого рендера и гидратации.                                              |
-| `page?: number`                                                                                                                 | Текущая страница результата.                                                                              |
-| `onPageChange?: (page: number) => void`                                                                                         | Вызывается, когда покупатель открывает другую страницу. Данные обработчика указаны в его типе.            |
-| `onLoad?: (action: BlogJournalLoadAction) => Promise<BlogPostsPage \| null \| undefined> \| BlogPostsPage \| null \| undefined` | Вызывается, когда компоненту нужны основные данные. Данные обработчика указаны в его типе.                |
-| `onSelect?: (postId: number) => void`                                                                                           | Передаёт ID выбранной статьи после изменения открытой статьи, если `postId` не управляется приложением. |
-| `articleProps?: Omit<BlogArticleProps, "onBack" \| "postId">`                                                                   | Свойства, передаваемые дочернему компоненту статьи.                                                       |