orionplace-react 0.1.0 → 0.2.1

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

@@ -0,0 +1,167 @@
+.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

@@ -0,0 +1,177 @@
+'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

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

@@ -0,0 +1,37 @@
+/* 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

@@ -0,0 +1,129 @@
+'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

@@ -0,0 +1,105 @@
+# 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">`                                                                   | Свойства, передаваемые дочернему компоненту статьи.                                                       |