@stapel/listings-react 0.1.0 → 0.3.0

package/src/default/SignInLink.tsx

@@ -0,0 +1,54 @@
+/**
+ * The door beside a blocked control.
+ *
+ * `actionBlocked` ended the grey-rectangle incident by making every
+ * switched-off control state its reason. It did not end the next problem:
+ * "sign in to add this to favourites" is a reason whose next action is a LINK,
+ * and this pair rendered the sentence and stopped there — leaving the visitor
+ * to find the header themselves (storefront Wave D, G-3).
+ *
+ * WHERE that link goes is the container's business, never the pair's: the
+ * storefront's is `/login?next=<current>`, a tenant app's may be a modal. So
+ * the shape is core's `SignInCta` — `{href}` or `{onSignIn}`, never both — and
+ * the copy is this pair's, because core floors `en` and `ru` while this pair
+ * also ships `es`.
+ *
+ * A host that routes internally passes `onSignIn`; the `href` arm renders a
+ * plain anchor on purpose, because arriving at a sign-in page is one of the
+ * few navigations a full load costs nothing.
+ */
+import type { ReactElement } from "react";
+import { Typography } from "antd";
+import { useT } from "@stapel/core";
+import type { SignInCta } from "@stapel/core";
+import { LISTINGS_I18N_KEYS } from "../i18n/keys.js";
+
+export interface SignInLinkProps {
+  /** Absent: no link — a host with no sign-in route shows the reason alone. */
+  readonly cta: SignInCta | undefined;
+  readonly testId: string;
+}
+
+export function SignInLink(props: SignInLinkProps): ReactElement | null {
+  const t = useT();
+  const { cta } = props;
+  if (cta === undefined) return null;
+  // The separating space belongs HERE, not at the call site: a reason with no
+  // door must render as exactly its own sentence, and a `{" "}` left behind by
+  // an absent link is a trailing space in every caller's assertion.
+  return (
+    <>
+      {" "}
+      <Typography.Link
+        data-testid={props.testId}
+        data-analytics="none"
+        data-analytics-reason="business action — host app wraps with its own tracked()"
+        {...(cta.href !== undefined
+          ? { href: cta.href }
+          : { onClick: cta.onSignIn })}
+      >
+        {t(LISTINGS_I18N_KEYS.cardSignIn)}
+      </Typography.Link>
+    </>
+  );
+}

package/src/default/index.ts

@@ -15,21 +15,33 @@
  * ```
  */
 export { ListingCard } from "./ListingCard.js";
-export type { ListingCardProps } from "./ListingCard.js";
+export type {
+  ListingCardProps,
+  ListingCardBaseProps,
+  ListingCardOpenProps,
+} from "./ListingCard.js";
 export { ListingDetailPane } from "./ListingDetailPane.js";
 export type { ListingDetailPaneProps } from "./ListingDetailPane.js";
 export { ListingComposerPage } from "./ListingComposerPage.js";
-export type { ListingComposerPageProps } from "./ListingComposerPage.js";
+export type {
+  ListingComposerPageProps,
+  ComposerCategorySlot,
+} from "./ListingComposerPage.js";
 export { MyListingsPane } from "./MyListingsPane.js";
 export type { MyListingsPaneProps } from "./MyListingsPane.js";
 export { FavoritesPane } from "./FavoritesPane.js";
-export type { FavoritesPaneProps } from "./FavoritesPane.js";
+export type {
+  FavoritesPaneProps,
+  FavoritesPaneOpenProps,
+} from "./FavoritesPane.js";
 
 export { LifecycleTag, ListingStatusBlock, ModerationNote } from "./StatusTags.js";
 export type { ListingStatusProps } from "./StatusTags.js";
 export { ListingPhoto } from "./ListingPhoto.js";
 export type { ListingPhotoProps } from "./ListingPhoto.js";
 export { ErrorAlert } from "./ErrorAlert.js";
+export { SignInLink } from "./SignInLink.js";
+export type { SignInLinkProps } from "./SignInLink.js";
 export { ListingsSkinTheme } from "./theme.js";
 export type { ListingsSkinThemeProps } from "./theme.js";
 export type { ThemeModeProp } from "./types.js";

package/src/headless/ListingComposer.tsx

@@ -125,6 +125,23 @@ export interface UseListingComposerOptions {
   /** The upload queue. Absent: no gallery, and `images` is set through
    * `setValue` by whatever the host uses instead. */
   readonly images?: ListingImagesBag;
+  /**
+   * The chosen category, when the CONTAINER owns that state.
+   *
+   * The category is the one value the composer cannot own alone: the picker
+   * lives in `@stapel/categories-react` and the schema read
+   * (`useCategoryFeatures(id)`) that fills `features` is keyed by it, so the
+   * container holds it either way. Passing it here makes this hook controlled
+   * on that field — `values.categoryId` mirrors it, and `setCategory` reports
+   * upwards instead of writing local state that would then disagree with the
+   * schema on screen.
+   *
+   * Absent: uncontrolled, exactly as before.
+   */
+  readonly category?: string;
+  /** Called by `setCategory`, whether or not `category` is controlled. This is
+   * how a container learns which category to read the schema for. */
+  readonly onCategoryChange?: (categoryId: string) => void;
   /** Seed for a brand-new draft (a category preselected from the URL, say). */
   readonly initialValues?: Partial<ListingDraftValues>;
   onDraftCreated?: (draft: ListingDraft) => void;
@@ -245,9 +262,19 @@ export function useListingComposer(
   // The gallery is the upload bag's, whenever there is one: two sources of
   // truth for the same list is how a publish sends photos the person removed.
   const images = options.images?.refs ?? values.images;
+  // Same rule for the category when the container holds it: the schema on
+  // screen is read for the container's id, so a local copy that drifted from
+  // it would ask one category's questions and file the listing under another.
+  const controlledCategory = options.category;
   const effectiveValues: ListingDraftValues = useMemo(
-    () => ({ ...values, images }),
-    [values, images]
+    () => ({
+      ...values,
+      images,
+      ...(controlledCategory !== undefined
+        ? { categoryId: controlledCategory }
+        : {}),
+    }),
+    [values, images, controlledCategory]
   );
 
   const featuresDto = useMemo(
@@ -435,14 +462,20 @@ export function useListingComposer(
     },
     setCategory: (categoryId) => {
       setSaved(false);
-      setValues((current) => {
-        if (current.categoryId === categoryId) return current;
-        // The features of the NEW category are not known yet (the container's
-        // schema read has not run), so nothing is pruned here — pruning
-        // happens in the effect below, once they arrive. Recording the
-        // intent, not guessing the outcome.
-        return { ...current, categoryId };
-      });
+      // Told upwards FIRST and unconditionally: the container's schema read is
+      // keyed by this id, and it must be asked for even when the composer is
+      // uncontrolled — that is the wire `features` arrives on.
+      options.onCategoryChange?.(categoryId);
+      if (controlledCategory === undefined) {
+        setValues((current) => {
+          if (current.categoryId === categoryId) return current;
+          // The features of the NEW category are not known yet (the
+          // container's schema read has not run), so nothing is pruned here —
+          // pruning happens in the effect below, once they arrive. Recording
+          // the intent, not guessing the outcome.
+          return { ...current, categoryId };
+        });
+      }
       setDropped([]);
       setRefusal(undefined);
     },

package/src/i18n/es.ts

@@ -70,6 +70,7 @@ export const listingsI18nBundleEs: I18nDictionary = {
   "listings.card.favorite_add": "Guardar en favoritos",
   "listings.card.favorite_remove": "Quitar de favoritos",
   "listings.card.open": "Abrir",
+  "listings.card.sign_in": "Iniciar sesión",
 
   "listings.detail.loading": "Cargando el anuncio…",
   "listings.detail.load_failed": "No pudimos cargar este anuncio",

package/src/i18n/keys.ts

@@ -63,6 +63,8 @@ export const LISTINGS_I18N_KEYS = {
   cardFavoriteAdd: "listings.card.favorite_add",
   cardFavoriteRemove: "listings.card.favorite_remove",
   cardOpen: "listings.card.open",
+  /** The door beside a blocked favourite: the container supplies WHERE. */
+  cardSignIn: "listings.card.sign_in",
 
   // ── detail ───────────────────────────────────────────────────────────────
   detailLoading: "listings.detail.loading",
@@ -218,6 +220,7 @@ export const listingsI18nBundleEn: Record<string, string> = {
   "listings.card.favorite_add": "Save to favourites",
   "listings.card.favorite_remove": "Remove from favourites",
   "listings.card.open": "Open",
+  "listings.card.sign_in": "Sign in",
 
   "listings.detail.loading": "Loading the listing…",
   "listings.detail.load_failed": "We could not load this listing",

package/src/i18n/ru.ts

@@ -86,6 +86,7 @@ export const listingsI18nBundleRu: I18nDictionary = {
   "listings.card.favorite_add": "В избранное",
   "listings.card.favorite_remove": "Убрать из избранного",
   "listings.card.open": "Открыть",
+  "listings.card.sign_in": "Войти",
 
   "listings.detail.loading": "Загружаем объявление…",
   "listings.detail.load_failed": "Не удалось загрузить объявление",