orionplace-react 0.1.0 → 0.2.0

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

@@ -0,0 +1,371 @@
+'use client';
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectIsAuthenticated } from '@/stores/orionplace';
+import type { IBlogPost } from '@/interfaces/orionplace/blog/IBlogApi';
+import {
+  blogArticleCover,
+  blogArticleField,
+  blogArticleMediaUrl,
+  blogArticlePlansHref,
+  blogArticleRequest,
+  lockBlogArticle,
+  type BlogArticleLoadAction,
+} from '@/lib/orionplace/blogArticle';
+import {
+  removeLeadingDuplicateBlogHeading,
+  safeBlogArticleHtml,
+} from '@/lib/orionplace/blogArticleHtml';
+import { htmlTextParagraphs } from '@/lib/orionplace/htmlText';
+import { blogLabels } from '@/lib/orionplace/blogLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { useOrionplaceBlogReading } from '@/hooks/useOrionplaceBlogReading';
+import type { BlogReadingAction } from '@/hooks/useOrionplaceBlogReading';
+import type { IBlogReadingData } from '@/interfaces/orionplace/blog/IBlogApi';
+import { OrionplaceEmptyState } from '@/components/orionplace/shared/OrionplaceEmptyState';
+import {
+  ProductGroup,
+  type ProductGroupEvents,
+} from '@/components/orionplace/products/ProductGroup';
+import {
+  BlogComments,
+  type BlogCommentsProps,
+} from './BlogComments';
+import styles from './BlogArticle.module.css';
+
+export interface BlogArticleProps extends ProductGroupEvents {
+  postId: number;
+  productActionsDisabled?: boolean;
+  initialPost?: IBlogPost | null;
+  commentsProps?: Omit<BlogCommentsProps, 'postId'>;
+  onLoad?: (
+    action: BlogArticleLoadAction,
+  ) => Promise<IBlogPost | null | undefined> | IBlogPost | null | undefined;
+  onReading?: (
+    action: BlogReadingAction,
+  ) => Promise<IBlogReadingData> | IBlogReadingData;
+  onBack?: () => void;
+  onLoaded?: (post: IBlogPost) => void;
+  onMissing?: () => void;
+}
+
+export function BlogArticle({
+  postId,
+  productActionsDisabled = false,
+  initialPost = null,
+  commentsProps,
+  onLoad,
+  onReading,
+  onBack,
+  onLoaded,
+  onMissing,
+  onSelect,
+  onSelectSeller,
+  onSelectVariant,
+  onRequestSecondaryVariants,
+  onSelectSecondaryVariant,
+  onToggleFavorite,
+  onAdd,
+  onRemove,
+  onSubscribe,
+  onUnsubscribe,
+  onPreorder,
+}: BlogArticleProps) {
+  const authenticated = useOrionplace(selectIsAuthenticated);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const preloaded = initialPost?.id === postId ? initialPost : undefined;
+  const [post, setPost] = useState<IBlogPost | undefined>(preloaded);
+  const [settled, setSettled] = useState(Boolean(preloaded));
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState('');
+  const [accessChanged, setAccessChanged] = useState(false);
+  const [mounted, setMounted] = useState(false);
+  const [coverFailed, setCoverFailed] = useState(false);
+  const articleRef = useRef<HTMLDivElement>(null);
+  const requestRef = useRef<AbortController | undefined>(undefined);
+  const previousAuthentication = useRef(authenticated);
+  const wasShown = useRef(Boolean(preloaded));
+  const labels = blogLabels(locale);
+  const common = featureLabels(locale);
+  const full = Boolean(post?.is_full && post.has_full_access);
+  const title = blogArticleField(post, locale, 'post_title');
+  const source = blogArticleField(
+    post,
+    locale,
+    full ? 'post_view_text' : 'post_preview_text',
+  );
+  const articleSource = removeLeadingDuplicateBlogHeading(source, title);
+  const paragraphs = useMemo(
+    () => htmlTextParagraphs(articleSource),
+    [articleSource],
+  );
+  const html = useMemo(
+    () => mounted ? safeBlogArticleHtml(articleSource) : '',
+    [articleSource, mounted],
+  );
+  const cover = blogArticleCover(post);
+  const showSkeleton = !post && !settled && !error;
+
+  const lockAccess = useCallback(() => {
+    setAccessChanged(true);
+    setPost((current) => current ? lockBlogArticle(current) : current);
+  }, []);
+
+  useOrionplaceBlogReading({
+    post,
+    authenticated,
+    articleRef,
+    onReading,
+    onAccessLost: lockAccess,
+  });
+
+  const load = useCallback(async () => {
+    requestRef.current?.abort();
+    const controller = new AbortController();
+    requestRef.current = controller;
+    setPending(true);
+    setError('');
+
+    try {
+      const loaded = await onLoad?.(blogArticleRequest(postId, controller.signal));
+      if (controller.signal.aborted) {
+        return;
+      }
+
+      const next = loaded ?? undefined;
+      setPost(next);
+      setSettled(true);
+      setAccessChanged(false);
+      if (next) {
+        wasShown.current = true;
+        onLoaded?.(next);
+      } else if (!wasShown.current) {
+        onMissing?.();
+      }
+    } catch (requestError) {
+      if (!controller.signal.aborted) {
+        setError(
+          requestError instanceof Error && requestError.message
+            ? requestError.message
+            : common.failed,
+        );
+      }
+    } finally {
+      if (requestRef.current === controller) {
+        requestRef.current = undefined;
+        setPending(false);
+      }
+    }
+  }, [common.failed, onLoad, onLoaded, onMissing, postId]);
+
+  useEffect(() => {
+    setMounted(true);
+    return () => requestRef.current?.abort();
+  }, []);
+
+  useEffect(() => {
+    setCoverFailed(false);
+  }, [cover]);
+
+  useEffect(() => {
+    requestRef.current?.abort();
+    setAccessChanged(false);
+    setError('');
+    wasShown.current = Boolean(preloaded);
+    if (preloaded) {
+      setPost(preloaded);
+      setSettled(true);
+      return;
+    }
+
+    setPost(undefined);
+    setSettled(false);
+    void load();
+  }, [postId]);
+
+  useEffect(() => {
+    if (previousAuthentication.current === authenticated) {
+      return;
+    }
+    previousAuthentication.current = authenticated;
+    if (!authenticated) {
+      lockAccess();
+    }
+    void load();
+  }, [authenticated]);
+
+  return (
+    <section
+      className={styles.feature}
+      data-feature-part="BlogArticle"
+      aria-busy={showSkeleton || undefined}
+    >
+      <button
+        type="button"
+        className={styles.button}
+        aria-label={labels.backHint}
+        onClick={() => onBack?.()}
+      >
+        ← {labels.back}
+      </button>
+
+      {error || accessChanged ? (
+        <div role="alert" className={styles.error}>
+          <span>{error || labels.accessChanged}</span>
+          <button
+            type="button"
+            className={styles.button}
+            disabled={pending}
+            onClick={() => void load()}
+          >
+            {common.refresh}
+          </button>
+        </div>
+      ) : null}
+
+      {pending || showSkeleton ? (
+        <p className="op-feature-loading" role="status">
+          <span className={styles.screenReaderOnly}>{common.loading}</span>
+        </p>
+      ) : null}
+
+      {post ? (
+        <article className={styles.article} data-blog-article={post.id}>
+          <header className={styles.header}>
+            <h1>{title}</h1>
+            <div className={styles.meta}>
+              <span>{post.writer.first_name} {post.writer.last_name}</span>
+              <time>{post.date_created.date}</time>
+              {post.read_time_min ? (
+                <span>{post.read_time_min} {labels.minutes}</span>
+              ) : null}
+            </div>
+            {cover && !coverFailed ? (
+              <img
+                src={cover}
+                alt=""
+                width={3}
+                height={2}
+                decoding="async"
+                className={styles.cover}
+                data-blog-article-cover
+                onError={() => setCoverFailed(true)}
+              />
+            ) : null}
+          </header>
+
+          {mounted ? (
+            <div
+              ref={articleRef}
+              className={styles.prose}
+              data-blog-article-html
+              dangerouslySetInnerHTML={{ __html: html }}
+            />
+          ) : (
+            <div ref={articleRef} className={styles.prose} data-blog-article-text>
+              {paragraphs.map((paragraph, index) => (
+                <p key={`${index}:${paragraph}`}>{paragraph}</p>
+              ))}
+            </div>
+          )}
+
+          {!full ? (
+            <div className={styles.access} data-blog-article-access>
+              <h2>{labels.fullAccess}</h2>
+              <p>{labels.fullAccessText}</p>
+              <a
+                href={blogArticlePlansHref(post, locale)}
+                className={styles.button}
+                aria-label={labels.tariffsHint}
+                data-blog-article-plans
+              >
+                {labels.tariffs}
+              </a>
+            </div>
+          ) : null}
+
+          {full ? post.videos
+            ?.map((video) => ({
+              ...video,
+              source: blogArticleMediaUrl(video.video_url),
+              poster: blogArticleMediaUrl(video.preview_url),
+            }))
+            .filter((video) => video.source)
+            .map((video) => (
+              <video
+                key={video.id}
+                src={video.source}
+                poster={video.poster || undefined}
+                controls
+                preload="metadata"
+                playsInline
+                aria-label={labels.video}
+                className={styles.video}
+              />
+            )) : null}
+
+          {post.related_products?.length ? (
+            <section className={styles.related} data-blog-related-products>
+              <h2>{labels.related}</h2>
+              <ProductGroup
+                products={post.related_products}
+                productIds={post.related_products.map((product) => product.id)}
+                layout="grid"
+                disabled={productActionsDisabled}
+                onSelect={onSelect}
+                onSelectSeller={onSelectSeller}
+                onSelectVariant={onSelectVariant}
+                onRequestSecondaryVariants={onRequestSecondaryVariants}
+                onSelectSecondaryVariant={onSelectSecondaryVariant}
+                onToggleFavorite={onToggleFavorite}
+                onAdd={onAdd}
+                onRemove={onRemove}
+                onSubscribe={onSubscribe}
+                onUnsubscribe={onUnsubscribe}
+                onPreorder={onPreorder}
+              />
+            </section>
+          ) : null}
+
+          <BlogComments key={post.id} {...commentsProps} postId={post.id} />
+        </article>
+      ) : showSkeleton ? (
+        <ArticleSkeleton />
+      ) : settled && !pending && !error ? (
+        <OrionplaceEmptyState kind="journal" message={labels.unavailable} />
+      ) : null}
+    </section>
+  );
+}
+
+function ArticleSkeleton() {
+  return (
+    <div className={styles.skeleton} aria-hidden="true" data-blog-article-skeleton>
+      <span className={styles.skeletonTitle} />
+      <span className={styles.skeletonTitleShort} />
+      <div className={styles.skeletonMeta}>
+        <span />
+        <span />
+        <span />
+      </div>
+      <span className={styles.skeletonCover} />
+      <div className={styles.skeletonText}>
+        {Array.from({ length: 7 }, (_, index) => <span key={index} />)}
+      </div>
+      <span className={styles.skeletonRelated} />
+      <div className={styles.skeletonCards}>
+        {Array.from({ length: 3 }, (_, index) => <span key={index} />)}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,51 @@
+# BlogCommentForm
+
+## English
+
+`BlogCommentForm` collects text for a new comment, a reply or an edit. The
+trimmed value must contain 10–1024 characters. `pending` disables the field and
+buttons. A valid submit calls `onSubmit` with the trimmed text; the parent keeps
+or clears the draft after the API result. Changing `initialText` replaces the
+current draft.
+
+For a signed-in customer, the form shows the Application Load profile name and
+avatar. `replyingTo` names the person being answered. `editing` changes the
+status text and submit label. Reply and edit modes show Cancel and call
+`onCancel` without submitting.
+
+### Props
+
+| Prop                                | Meaning                                                                                               |
+| ----------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `initialText?: string`              | Server-provided initial text used for the first render and hydration.                                 |
+| `pending?: boolean`                 | Shows the loading state and blocks duplicate actions.                                                 |
+| `error?: string`                    | Why the last send failed; shown in an error notice under the field, beside the kept text.            |
+| `editing?: boolean`                 | Review or record currently being edited.                                                              |
+| `replyingTo?: string`               | Review or comment that will receive the new reply.                                                    |
+| `onSubmit?: (text: string) => void` | After form validation, passes the comment text with surrounding whitespace removed. The application saves the comment and supplies request state and errors. |
+| `onCancel?: () => void`             | Called when the visitor cancels the current form or action. The callback has no payload.              |
+
+## Русский
+
+`BlogCommentForm` собирает текст нового комментария, ответа или изменения.
+После удаления пробелов по краям текст должен содержать 10–1024 символа.
+`pending` отключает поле и кнопки. При допустимом тексте `onSubmit` получает
+очищенное значение; родитель сохраняет или очищает черновик после ответа API.
+Изменение `initialText` заменяет текущий черновик.
+
+Для вошедшего покупателя форма показывает имя и аватар из профиля Application
+Load. `replyingTo` называет автора, которому отвечает покупатель. `editing`
+меняет пояснение и подпись кнопки сохранения. В режимах ответа и изменения
+кнопка отмены вызывает `onCancel` без отправки формы.
+
+### Свойства
+
+| Свойство                            | Назначение                                                                                                    |
+| ----------------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `initialText?: string`              | Начальное значение текста, полученное на сервере для первого рендера и гидратации.                            |
+| `pending?: boolean`                 | Показывает загрузку и блокирует повторные действия.                                                           |
+| `error?: string`                    | Почему не удалась последняя отправка; показывается в уведомлении об ошибке под полем, текст сохраняется.      |
+| `editing?: boolean`                 | Отзыв или запись, которые сейчас редактируются.                                                               |
+| `replyingTo?: string`               | Отзыв или комментарий, на который отправляют ответ.                                                           |
+| `onSubmit?: (text: string) => void` | После проверки формы передаёт текст комментария без пробелов по краям. Приложение сохраняет комментарий и передаёт состояние запроса и ошибки. |
+| `onCancel?: () => void`             | Вызывается, когда покупатель отменяет текущую форму или действие. Обработчик не получает данные.              |

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

@@ -0,0 +1,93 @@
+/* The same look as the shared op-feature panel, label and input classes of
+   the Nuxt and Svelte packages. */
+.form {
+  composes: feature from '../shared/features.module.css';
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  padding: 1.25rem;
+  background: var(--orionplace-surface);
+  border: 1px solid var(--orionplace-border);
+}
+
+.author,
+.footer,
+.actions {
+  display: flex;
+  align-items: center;
+}
+
+.author {
+  min-width: 0;
+  gap: 0.75rem;
+}
+
+.author span:last-child {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+
+.form p {
+  margin: 0;
+}
+
+.field {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 0.5rem;
+}
+
+.caption {
+  composes: caption from '../shared/features.module.css';
+}
+
+.required {
+  color: var(--orionplace-danger);
+  letter-spacing: 0;
+}
+
+.input {
+  composes: input from '../shared/features.module.css';
+  /* As Nuxt `op-feature-input`: 7rem tall at least, panel line height. */
+  min-height: 7rem;
+  line-height: 1.5rem;
+  resize: vertical;
+}
+
+.input:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+
+.footer {
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.count {
+  color: var(--orionplace-muted);
+  font-size: 0.75rem;
+  line-height: 1rem;
+}
+
+.actions {
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+/* The shared storefront buttons, as op-feature-button and
+   op-feature-primary in Nuxt and Svelte. */
+.button {
+  composes: button from '../shared/features.module.css';
+}
+
+.primary {
+  composes: primary from '../shared/features.module.css';
+}
+
+/* `op-notice op-notice-error`: why the last send failed. */
+.error {
+  composes: notice noticeError from '../account/account.module.css';
+}

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

@@ -0,0 +1,125 @@
+'use client';
+
+import { useEffect, useState, type FormEvent } from 'react';
+import {
+  useOrionplace,
+  useOrionplaceSelections,
+} from '@/providers/OrionplaceProvider';
+import { selectProfile } from '@/stores/orionplace';
+import { safePublicUrl } from '@/lib/orionplace/presentation';
+import { blogLabels } from '@/lib/orionplace/blogLabels';
+import { featureLabels } from '@/lib/orionplace/featureLabels';
+import { OrionplaceAvatar } from '@/components/orionplace/shared/OrionplaceAvatar';
+import styles from './BlogCommentForm.module.css';
+
+export interface BlogCommentFormProps {
+  initialText?: string;
+  pending?: boolean;
+  // Why the last send failed, shown beside the kept text.
+  error?: string;
+  editing?: boolean;
+  replyingTo?: string;
+  onSubmit?: (text: string) => void;
+  onCancel?: () => void;
+}
+
+export function BlogCommentForm({
+  initialText = '',
+  pending = false,
+  error = '',
+  editing = false,
+  replyingTo = '',
+  onSubmit,
+  onCancel,
+}: BlogCommentFormProps) {
+  const profile = useOrionplace(selectProfile);
+  const locale = useOrionplaceSelections((state) => state.localeCode);
+  const labels = blogLabels(locale);
+  const common = featureLabels(locale);
+  const [text, setText] = useState(initialText);
+  const trimmed = text.trim();
+  const author = [profile?.first_name, profile?.last_name]
+    .filter(Boolean)
+    .join(' ');
+
+  useEffect(() => {
+    setText(initialText);
+  }, [initialText]);
+
+  function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (!pending && trimmed.length >= 10 && text.length <= 1024) {
+      onSubmit?.(trimmed);
+    }
+  }
+
+  return (
+    <form
+      className={styles.form}
+      data-feature-part="BlogCommentForm"
+      aria-busy={pending}
+      onSubmit={submit}
+    >
+      {profile ? (
+        <div className={styles.author} data-blog-comment-form-author>
+          <OrionplaceAvatar
+            src={safePublicUrl(profile.avatar)}
+            name={author}
+            size="small"
+          />
+          <span>{author}</span>
+        </div>
+      ) : null}
+      {replyingTo ? <p>{labels.replyTo}: {replyingTo}</p> : null}
+      {editing ? <p>{labels.editing}</p> : null}
+      <label className={styles.field}>
+        <span className={styles.caption}>
+          {labels.message}{' '}
+          <span
+            className={styles.required}
+            aria-hidden="true"
+          >
+            *
+          </span>
+        </span>
+        <textarea
+          className={styles.input}
+          value={text}
+          required
+          minLength={10}
+          maxLength={1024}
+          disabled={pending}
+          aria-label={labels.message}
+          onChange={(event) => setText(event.target.value)}
+        />
+      </label>
+      {error ? (
+        <p className={styles.error} role="alert">
+          {error}
+        </p>
+      ) : null}
+      <div className={styles.footer}>
+        <span className={styles.count}>{text.length} / 1024</span>
+        <div className={styles.actions}>
+          {editing || replyingTo ? (
+            <button
+              type="button"
+              className={styles.button}
+              disabled={pending}
+              onClick={() => onCancel?.()}
+            >
+              {common.cancel}
+            </button>
+          ) : null}
+          <button
+            type="submit"
+            className={styles.primary}
+            disabled={pending || trimmed.length < 10}
+          >
+            {pending ? common.loading : editing ? common.save : labels.send}
+          </button>
+        </div>
+      </div>
+    </form>
+  );
+}