orionplace-react 0.7.7 → 0.8.0

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

@@ -1,545 +0,0 @@
-'use client';
-
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  type SyntheticEvent,
-} from 'react';
-import { createPortal } from 'react-dom';
-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,
-  blogPlacementRequest,
-  lockBlogArticle,
-  type BlogArticleLoadAction,
-  type BlogPlacementLoadAction,
-} 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 {
-  blogViewerImage,
-  blogViewerImages,
-  blogViewerIndex,
-  blogViewerPhotos,
-  isBlogViewerOpenKey,
-  markBlogViewerImages,
-  type IBlogViewerImage,
-} from '@/lib/orionplace/blogImageViewer';
-import { ProductReviewImageViewer } from '@/components/orionplace/products/ProductReviewImageViewer';
-import { ProductCard } from '@/components/orionplace/products/ProductCard';
-import {
-  blogPlacementProductIds,
-  blogPlacementRequests,
-  blogProductPlacements,
-  type IBlogProductPlacement,
-} from '@/lib/orionplace/blogProductPlacements';
-import { productWithSellerPermission } from '@/lib/orionplace/productSeller';
-import type { IProduct, IProductSearchSeller } from '@/interfaces/orionplace/products/IProduct';
-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;
-  // Loads products placed in the text; without it only related products fill placements.
-  onLoadPlacements?: (
-    action: BlogPlacementLoadAction,
-  ) => Promise<BlogPlacementData | null | undefined> | BlogPlacementData | null | undefined;
-  onReading?: (
-    action: BlogReadingAction,
-  ) => Promise<IBlogReadingData> | IBlogReadingData;
-  onBack?: () => void;
-  onLoaded?: (post: IBlogPost) => void;
-  onMissing?: () => void;
-}
-
-type BlogPlacementData = {
-  products?: { data?: IProduct[] };
-  selects?: { sellers?: IProductSearchSeller[] };
-};
-
-export function BlogArticle({
-  postId,
-  productActionsDisabled = false,
-  initialPost = null,
-  commentsProps,
-  onLoad,
-  onLoadPlacements,
-  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 coverRef = useRef<HTMLImageElement>(null);
-  // The cover and the text images open larger in the viewer.
-  const [viewer, setViewer] = useState<{ images: IBlogViewerImage[]; index: number }>();
-  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;
-  // Product cards the author placed in the text (see blogProductPlacements).
-  const [placements, setPlacements] = useState<IBlogProductPlacement[]>([]);
-  const [placed, setPlaced] = useState<Record<number, IProduct>>({});
-  const placedProduct = (id: number) =>
-    placed[id] ?? post?.related_products?.find((product) => product.id === id);
-
-  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]);
-
-  // The text is set as HTML: its images become buttons after each render.
-  useEffect(() => {
-    markBlogViewerImages(
-      blogViewerImages([coverRef.current, articleRef.current]),
-      labels.imageOpen,
-    );
-  }, [html, cover, coverFailed, mounted, labels.imageOpen, post?.id]);
-
-  // The text's placement blocks after each render; missing products come
-  // with one request per 35.
-  useEffect(() => {
-    const found = mounted ? blogProductPlacements(articleRef.current) : [];
-    const known = new Set([
-      ...Object.keys(placed).map(Number),
-      ...(post?.related_products ?? []).map((product) => product.id),
-    ]);
-    const missing = blogPlacementProductIds(found).filter((id) => !known.has(id));
-    const controller = new AbortController();
-
-    setPlacements(found);
-    if (onLoadPlacements && missing.length) {
-      void (async () => {
-        for (const chunk of blogPlacementRequests(missing)) {
-          try {
-            const data = await onLoadPlacements(blogPlacementRequest(chunk, controller.signal));
-            if (controller.signal.aborted) {
-              return;
-            }
-            const loaded = data?.products?.data ?? [];
-            setPlaced((current) => ({
-              ...current,
-              ...Object.fromEntries(loaded.map((product) => [
-                product.id,
-                productWithSellerPermission(product, data?.selects?.sellers),
-              ])),
-            }));
-          } catch {
-            // A placement without its products stays empty and hidden.
-          }
-        }
-      })();
-    }
-    return () => controller.abort();
-  }, [html, mounted, post?.id]);
-
-  const openViewer = (event: SyntheticEvent) => {
-    const images = blogViewerImages([coverRef.current, articleRef.current]);
-    const index = blogViewerIndex(event.target, images);
-    if (index < 0) {
-      return;
-    }
-    event.preventDefault();
-    setViewer({
-      index,
-      images: images.map((image) => {
-        const shown = blogViewerImage(image);
-        return image === coverRef.current ? { ...shown, alt: shown.alt || title } : shown;
-      }),
-    });
-  };
-
-  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}
-          onClick={openViewer}
-          onKeyDown={(event) => {
-            if (isBlogViewerOpenKey(event.nativeEvent)) {
-              openViewer(event);
-            }
-          }}
-        >
-          <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
-                ref={coverRef}
-                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>
-          )}
-
-          {placements.map((placement, index) => {
-            const products = placement.productIds
-              .map(placedProduct)
-              .filter((product): product is IProduct => Boolean(product));
-
-            if (!products.length || !placement.element.isConnected) {
-              return null;
-            }
-            return createPortal(
-              placement.layout === 'single' ? (
-                <ProductCard
-                  productId={products[0]!.id}
-                  initialProduct={products[0]}
-                  hiddenBadges={placement.hiddenBadges}
-                  disabled={productActionsDisabled}
-                  onSelect={onSelect}
-                  onSelectSeller={onSelectSeller}
-                  onSelectVariant={onSelectVariant}
-                  onRequestSecondaryVariants={onRequestSecondaryVariants}
-                  onSelectSecondaryVariant={onSelectSecondaryVariant}
-                  onToggleFavorite={onToggleFavorite}
-                  onAdd={onAdd}
-                  onRemove={onRemove}
-                  onSubscribe={onSubscribe}
-                  onUnsubscribe={onUnsubscribe}
-                  onPreorder={onPreorder}
-                />
-              ) : (
-                <ProductGroup
-                  products={products}
-                  productIds={products.map((product) => product.id)}
-                  hiddenBadges={placement.hiddenBadges}
-                  disabled={productActionsDisabled}
-                  onSelect={onSelect}
-                  onSelectSeller={onSelectSeller}
-                  onSelectVariant={onSelectVariant}
-                  onRequestSecondaryVariants={onRequestSecondaryVariants}
-                  onSelectSecondaryVariant={onSelectSecondaryVariant}
-                  onToggleFavorite={onToggleFavorite}
-                  onAdd={onAdd}
-                  onRemove={onRemove}
-                  onSubscribe={onSubscribe}
-                  onUnsubscribe={onUnsubscribe}
-                  onPreorder={onPreorder}
-                />
-              ),
-              placement.element,
-              `placement-${index}`,
-            );
-          })}
-
-          {!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}
-      {viewer && viewer.images.length ? (
-        <ProductReviewImageViewer
-          images={blogViewerPhotos(viewer.images)}
-          index={viewer.index}
-          label={labels.imageViewer}
-          alt={title || labels.imageViewer}
-          captions={viewer.images.map((image) => image.caption || image.alt)}
-          wide
-          onClose={() => setViewer(undefined)}
-        />
-      ) : 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

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

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