@thewhatmatters/wmds 0.2.0

package/docs/patterns/sites-pitchkit-past-brands--past-brands-owner.tsx

@@ -0,0 +1,611 @@
+// @thewhatmatters/wmds@0.2.0 · Pattern — past brands (owner)
+// Storybook: Sites/PitchKit/Past brands → Pattern — past brands (owner) (?path=/story/sites-pitchkit-past-brands--past-brands-owner)
+// Show code — copy verbatim and keep this header; upgrades find pasted patterns by it.
+
+import { useLayoutEffect, useRef, useState, type CSSProperties } from "react";
+import { ChevronDown, ChevronUp, GripVertical, Pencil, Plus, Trash2 } from "lucide-react";
+import {
+  Avatar,
+  Button,
+  ButtonIcon,
+  Card,
+  Chip,
+  Dialog,
+  IconButton,
+  Input,
+  MoreMenu,
+  Select,
+  cardTitleClasses,
+  dialogFooterActionsClasses,
+} from "@thewhatmatters/wmds";
+
+const compactNumber = new Intl.NumberFormat("en", {
+  notation: "compact",
+  maximumFractionDigits: 1,
+});
+
+
+export interface PitchKitCreatorIdentity {
+  displayName?: string;
+  /** Without the @ — shown as @handle, shared as /k/[handle]. */
+  handle: string;
+  profilePictureUrl?: string;
+  followersCount?: number;
+  professionalAccount?: "Business" | "Creator";
+  connected?: boolean;
+  lastSyncedLabel?: string;
+}
+
+function CreatorIdentityStrip({
+  identity,
+  nameAs = "h1",
+  showProfessionalChip = false,
+}: {
+  identity: PitchKitCreatorIdentity;
+  nameAs?: "h1" | "p";
+  showProfessionalChip?: boolean;
+}) {
+  const NameTag = nameAs;
+  const avatarName = identity.displayName ?? identity.handle;
+  const handleLabel = `@${identity.handle}`;
+  const followerLabel =
+    identity.followersCount == null
+      ? null
+      : `${compactNumber.format(identity.followersCount)} followers`;
+  const meta = [handleLabel, followerLabel].filter(Boolean).join(" · ");
+  const showTitleRow =
+    identity.displayName != null ||
+    (showProfessionalChip && identity.professionalAccount != null);
+
+  return (
+    <div className="flex flex-wrap items-center gap-4">
+      <Avatar
+        name={avatarName}
+        src={identity.profilePictureUrl}
+        size="lg"
+      />
+      <div className="flex min-w-0 flex-col gap-1">
+        {showTitleRow ? (
+          <div className="flex flex-wrap items-center gap-2">
+            {identity.displayName != null ? (
+              <NameTag className="type-heading-2 text-fg">
+                {identity.displayName}
+              </NameTag>
+            ) : null}
+            {showProfessionalChip && identity.professionalAccount != null ? (
+              <Chip readOnly size="sm">
+                {identity.professionalAccount}
+              </Chip>
+            ) : null}
+          </div>
+        ) : null}
+        <p className="type-body text-fg text-muted">{meta}</p>
+      </div>
+    </div>
+  );
+}
+
+
+export interface PitchKitPastBrand {
+  id: string;
+  name: string;
+  /** Curated mark key — missing or unknown keys use a letter Avatar. */
+  logo_key?: string;
+  result_label?: string;
+}
+
+const PITCHKIT_BRAND_RESULT_MAX = 24;
+const PITCHKIT_BRAND_LOGO_LETTER = "letter";
+
+const pitchKitBrandLogoKeys = [
+  "nike", "adidas", "apple", "google", "meta", "amazon", "spotify", "netflix",
+  "sephora", "glossier", "nordstrom", "target", "walmart", "starbucks",
+  "coca-cola", "pepsi", "samsung", "microsoft", "adobe", "shopify",
+  "uber", "airbnb", "disney", "lululemon", "reebok", "puma",
+  "dior", "chanel", "bmw", "ford", "chase", "visa",
+];
+
+const pastBrandLogoKeySet = new Set(pitchKitBrandLogoKeys);
+
+function resolvePastBrandLogoKey(logoKey: string | null | undefined) {
+  if (logoKey == null || logoKey === "" || logoKey === PITCHKIT_BRAND_LOGO_LETTER) {
+    return undefined;
+  }
+  return pastBrandLogoKeySet.has(logoKey) ? logoKey : undefined;
+}
+
+function pastBrandLogoMonogram(logoKey: string) {
+  const parts = logoKey.split("-");
+  if (parts.length > 1) {
+    return parts.map((part) => part.charAt(0).toUpperCase()).join("").slice(0, 2);
+  }
+  return logoKey.slice(0, 1).toUpperCase();
+}
+
+function normalizePastBrandResult(value: string | null | undefined) {
+  const trimmed = value?.trim() ?? "";
+  if (trimmed.length === 0) return undefined;
+  return trimmed.slice(0, PITCHKIT_BRAND_RESULT_MAX);
+}
+
+function BrandMark({ name, logoKey }: { name: string; logoKey?: string }) {
+  const resolved = resolvePastBrandLogoKey(logoKey);
+  if (resolved == null) {
+    return <Avatar name={name} size="sm" />;
+  }
+
+  return (
+    <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-fg type-supporting text-muted font-medium uppercase leading-none text-bg" role="img" aria-label={name}>
+      <span aria-hidden>{pastBrandLogoMonogram(resolved)}</span>
+    </span>
+  );
+}
+
+function BrandResultChip({ label }: { label?: string }) {
+  const result = normalizePastBrandResult(label);
+  if (result == null) return null;
+  return <Chip readOnly size="sm">{result}</Chip>;
+}
+
+function BrandLockup({ brand }: { brand: PitchKitPastBrand }) {
+  return (
+    <div className="flex min-w-0 items-center gap-3">
+      <BrandMark name={brand.name} logoKey={brand.logo_key} />
+      <h3 className="type-label text-fg">{brand.name}</h3>
+      <BrandResultChip label={brand.result_label} />
+    </div>
+  );
+}
+
+function PastBrandCard({ brand, className }: { brand: PitchKitPastBrand; className: string }) {
+  return (
+    <Card variant="outlined" shape="rounded" className={className}>
+      <Card.Header start={<BrandLockup brand={brand} />} />
+    </Card>
+  );
+}
+
+function PastBrandsRail({ brands }: { brands: readonly PitchKitPastBrand[] }) {
+  const hostRef = useRef<HTMLDivElement>(null);
+  const measureRef = useRef<HTMLUListElement>(null);
+  const [overflows, setOverflows] = useState(false);
+  const [reduceMotion, setReduceMotion] = useState(false);
+
+  useLayoutEffect(() => {
+    const media = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const updateMotion = () => setReduceMotion(media.matches);
+    updateMotion();
+    media.addEventListener("change", updateMotion);
+    return () => media.removeEventListener("change", updateMotion);
+  }, []);
+
+  useLayoutEffect(() => {
+    const host = hostRef.current;
+    const measure = measureRef.current;
+    if (host == null || measure == null) return;
+
+    const update = () => {
+      setOverflows(measure.scrollWidth > host.clientWidth + 1);
+    };
+    update();
+    const observer = new ResizeObserver(update);
+    observer.observe(host);
+    observer.observe(measure);
+    return () => observer.disconnect();
+  }, [brands]);
+
+  const duration = Math.max(16, brands.length * 4);
+  const showMarquee = overflows && !reduceMotion;
+
+  return (
+    <div
+      ref={hostRef}
+      className="relative col-span-full min-w-0"
+      data-overflow={showMarquee ? "true" : "false"}
+    >
+      <ul ref={measureRef} className="pointer-events-none invisible absolute flex w-max items-center gap-3" aria-hidden>
+        {brands.map((brand) => (
+          <li key={`${brand.id}-measure`}>
+            <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+          </li>
+        ))}
+      </ul>
+      {reduceMotion ? (
+        <ul className="flex min-w-0 flex-wrap items-center gap-3" aria-label="Past brands">
+          {brands.map((brand) => (
+            <li key={brand.id}>
+              <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+            </li>
+          ))}
+        </ul>
+      ) : showMarquee ? (
+        <>
+          <ul className="sr-only" aria-label="Past brands">
+            {brands.map((brand) => {
+              const result = normalizePastBrandResult(brand.result_label);
+              return (
+                <li key={brand.id}>
+                  {result == null ? brand.name : `${brand.name}, ${result}`}
+                </li>
+              );
+            })}
+          </ul>
+          <div className="group overflow-hidden" aria-hidden>
+            <div
+              className="marquee-track flex w-max items-center"
+              style={{ "--marquee-duration": `${duration}s` } as CSSProperties}
+            >
+              <ul className="flex min-w-0 items-center gap-3">
+                {brands.map((brand) => (
+                  <li key={`${brand.id}-loop-a`}>
+                    <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+                  </li>
+                ))}
+              </ul>
+              <ul className="flex min-w-0 items-center gap-3">
+                {brands.map((brand) => (
+                  <li key={`${brand.id}-loop-b`}>
+                    <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        </>
+      ) : (
+        <ul className="flex min-w-0 items-center gap-3" aria-label="Past brands">
+          {brands.map((brand) => (
+            <li key={brand.id}>
+              <PastBrandCard brand={brand} className="w-max max-w-full shrink-0" />
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+export function PublicPastBrands({ brands }: { brands: readonly PitchKitPastBrand[] }) {
+  if (brands.length === 0) return null;
+
+  return (
+    <section className="band min-w-0 gap-y-4">
+      <div className="col-span-full flex flex-wrap items-end justify-between gap-3">
+        <h2 className={cardTitleClasses}>Past brands</h2>
+      </div>
+      <PastBrandsRail brands={brands} />
+    </section>
+  );
+}
+
+
+const PITCHKIT_BRANDS_MAX = 8;
+const PITCHKIT_BRAND_NAME_MAX = 40;
+const PITCHKIT_BRAND_RESULT_HINTS =
+  "+12% CTR · 3.2x ROAS · 1.4M views · Sold out in 48h · Series A launch";
+
+function pastBrandLogoKeyLabel(logoKey: string) {
+  return logoKey
+    .split("-")
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("-");
+}
+
+function pastBrandResultIssues(value: string) {
+  if (/[\n\r]/.test(value)) return "Keep the result on one line.";
+  if (/https?:\/\/|www\./i.test(value)) return "Links are not allowed in a result.";
+  if (/(^|[\s])@[a-z0-9._]+/i.test(value)) return "@handles are not allowed in a result.";
+  const emojiCount = value.match(/\p{Extended_Pictographic}/gu)?.length ?? 0;
+  if (emojiCount >= 3) return "Skip emoji spam — use a short phrase.";
+  return undefined;
+}
+
+function OwnerPastBrands({
+  brands,
+  onBrandsChange,
+}: {
+  brands: PitchKitPastBrand[];
+  onBrandsChange: (brands: PitchKitPastBrand[]) => void;
+}) {
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [draftName, setDraftName] = useState("");
+  const [draftResult, setDraftResult] = useState("");
+  const [draftLogoKey, setDraftLogoKey] = useState(PITCHKIT_BRAND_LOGO_LETTER);
+  const [editingId, setEditingId] = useState<string | null>(null);
+  const [draggingId, setDraggingId] = useState<string | null>(null);
+  const canAdd = brands.length < PITCHKIT_BRANDS_MAX;
+  const trimmedDraft = draftName.trim();
+  const resultIssue = pastBrandResultIssues(draftResult);
+  const canSubmit = trimmedDraft.length > 0 && resultIssue == null;
+
+  function openAdd() {
+    if (!canAdd) return;
+    setEditingId(null);
+    setDraftName("");
+    setDraftResult("");
+    setDraftLogoKey(PITCHKIT_BRAND_LOGO_LETTER);
+    setDialogOpen(true);
+  }
+
+  function openEdit(brand: PitchKitPastBrand) {
+    setEditingId(brand.id);
+    setDraftName(brand.name);
+    setDraftResult(brand.result_label ?? "");
+    setDraftLogoKey(resolvePastBrandLogoKey(brand.logo_key) ?? PITCHKIT_BRAND_LOGO_LETTER);
+    setDialogOpen(true);
+  }
+
+  function closeDialog() {
+    setDialogOpen(false);
+    setEditingId(null);
+    setDraftName("");
+    setDraftResult("");
+    setDraftLogoKey(PITCHKIT_BRAND_LOGO_LETTER);
+  }
+
+  function nextBrandFields() {
+    const logo_key = resolvePastBrandLogoKey(draftLogoKey);
+    const result_label = normalizePastBrandResult(draftResult);
+    return {
+      name: trimmedDraft,
+      ...(logo_key == null ? {} : { logo_key }),
+      ...(result_label == null ? {} : { result_label }),
+    };
+  }
+
+  function submitBrand() {
+    if (!canSubmit) return;
+    const fields = nextBrandFields();
+    if (editingId == null) {
+      if (!canAdd) return;
+      onBrandsChange([...brands, { id: crypto.randomUUID(), ...fields }]);
+    } else {
+      onBrandsChange(
+        brands.map((brand) =>
+          brand.id === editingId ? { ...brand, ...fields } : brand,
+        ),
+      );
+    }
+    closeDialog();
+  }
+
+  function moveBrand(id: string, direction: -1 | 1) {
+    const index = brands.findIndex((brand) => brand.id === id);
+    const nextIndex = index + direction;
+    if (index < 0 || nextIndex < 0 || nextIndex >= brands.length) return;
+    const next = [...brands];
+    const [item] = next.splice(index, 1);
+    next.splice(nextIndex, 0, item);
+    onBrandsChange(next);
+  }
+
+  function reorderBrand(sourceId: string, targetId: string) {
+    if (sourceId === targetId) return;
+    const from = brands.findIndex((brand) => brand.id === sourceId);
+    const to = brands.findIndex((brand) => brand.id === targetId);
+    if (from < 0 || to < 0) return;
+    const next = [...brands];
+    const [item] = next.splice(from, 1);
+    next.splice(to, 0, item);
+    onBrandsChange(next);
+  }
+
+  return (
+    <section className="band min-w-0 gap-y-4">
+      <div className="col-span-full flex flex-wrap items-end justify-between gap-3">
+        <h2 className={cardTitleClasses}>Past brands</h2>
+        {brands.length > 0 && canAdd ? (
+          <Button role="secondary" size="sm" onClick={openAdd}>
+            Add
+          </Button>
+        ) : null}
+      </div>
+      {brands.length === 0 ? (
+        <Button role="ghost" onClick={openAdd}>
+          Add brands you&apos;ve worked with
+        </Button>
+      ) : (
+        <div className="flex col-span-full min-w-0 flex-col gap-3">
+          {brands.map((brand, index) => {
+            const hasResult = normalizePastBrandResult(brand.result_label) != null;
+            return (
+              <Card
+                key={brand.id}
+                variant="outlined"
+                shape="rounded"
+                className="col-span-full min-w-0"
+                draggable
+                onDragStart={() => setDraggingId(brand.id)}
+                onDragOver={(event) => event.preventDefault()}
+                onDrop={() => {
+                  if (draggingId != null) reorderBrand(draggingId, brand.id);
+                  setDraggingId(null);
+                }}
+                onDragEnd={() => setDraggingId(null)}
+              >
+                <Card.Header
+                  start={
+                    <div className="flex min-w-0 items-center gap-3">
+                      <span className="flex shrink-0 items-center">
+                        <ButtonIcon size="sm">
+                          <GripVertical />
+                        </ButtonIcon>
+                        <IconButton
+                          size="xs"
+                          icon={<ChevronUp />}
+                          aria-label={`Move ${brand.name} up`}
+                          disabled={index === 0}
+                          onClick={() => moveBrand(brand.id, -1)}
+                        />
+                        <IconButton
+                          size="xs"
+                          icon={<ChevronDown />}
+                          aria-label={`Move ${brand.name} down`}
+                          disabled={index === brands.length - 1}
+                          onClick={() => moveBrand(brand.id, 1)}
+                        />
+                      </span>
+                      <BrandMark name={brand.name} logoKey={brand.logo_key} />
+                      <h3 className="type-label text-fg">{brand.name}</h3>
+                      <BrandResultChip label={brand.result_label} />
+                    </div>
+                  }
+                  end={
+                    <MoreMenu
+                      aria-label={`Manage ${brand.name}`}
+                      size="xs"
+                      items={[
+                        {
+                          id: "edit",
+                          label: "Edit",
+                          start: (
+                            <ButtonIcon size="sm">
+                              <Pencil />
+                            </ButtonIcon>
+                          ),
+                        },
+                        hasResult
+                          ? { id: "clear-result", label: "Clear result" }
+                          : {
+                              id: "add-result",
+                              label: "Add result",
+                              start: (
+                                <ButtonIcon size="sm">
+                                  <Plus />
+                                </ButtonIcon>
+                              ),
+                            },
+                        {
+                          id: "remove",
+                          label: "Remove",
+                          start: (
+                            <ButtonIcon size="sm">
+                              <Trash2 />
+                            </ButtonIcon>
+                          ),
+                        },
+                      ]}
+                      onAction={(actionId) => {
+                        if (actionId === "edit" || actionId === "add-result") openEdit(brand);
+                        if (actionId === "clear-result") {
+                          onBrandsChange(
+                            brands.map((item) => {
+                              if (item.id !== brand.id) return item;
+                              return {
+                                id: item.id,
+                                name: item.name,
+                                ...(item.logo_key == null ? {} : { logo_key: item.logo_key }),
+                              };
+                            }),
+                          );
+                        }
+                        if (actionId === "remove") {
+                          onBrandsChange(brands.filter((item) => item.id !== brand.id));
+                        }
+                      }}
+                    />
+                  }
+                />
+              </Card>
+            );
+          })}
+        </div>
+      )}
+      <Dialog open={dialogOpen} onOpenChange={(open) => (open ? setDialogOpen(true) : closeDialog())}>
+        <Dialog.Content
+          title="Past brands"
+          footer={
+            <div className={dialogFooterActionsClasses}>
+              <Button size="sm" role="secondary" onClick={closeDialog}>
+                Cancel
+              </Button>
+              <Button
+                size="sm"
+                role="primary"
+                disabled={!canSubmit}
+                onClick={submitBrand}
+              >
+                {editingId == null ? "Add" : "Save"}
+              </Button>
+            </div>
+          }
+        >
+          <div className="flex w-full min-w-0 flex-col gap-4">
+            <Input
+              label="Brand name"
+              value={draftName}
+              maxLength={PITCHKIT_BRAND_NAME_MAX}
+              onChange={(event) => setDraftName(event.target.value)}
+            />
+            <Input
+              label="Result"
+              description={PITCHKIT_BRAND_RESULT_HINTS}
+              placeholder="Optional short phrase"
+              value={draftResult}
+              maxLength={PITCHKIT_BRAND_RESULT_MAX}
+              status={resultIssue == null ? undefined : "error"}
+              message={resultIssue}
+              onChange={(event) => setDraftResult(event.target.value)}
+            />
+            <Select
+              label="Logo"
+              description="Optional curated mark. Missing or unknown keys use a letter Avatar."
+              options={[
+                { value: PITCHKIT_BRAND_LOGO_LETTER, label: "Letter avatar" },
+                ...pitchKitBrandLogoKeys.map((key) => ({
+                  value: key,
+                  label: pastBrandLogoKeyLabel(key),
+                })),
+              ]}
+              value={draftLogoKey}
+              onValueChange={setDraftLogoKey}
+            />
+          </div>
+        </Dialog.Content>
+      </Dialog>
+    </section>
+  );
+}
+
+export function PastBrandsOwnerPage({
+  identity,
+  brands,
+  onBrandsChange,
+}: {
+  identity: PitchKitCreatorIdentity;
+  brands: PitchKitPastBrand[];
+  onBrandsChange: (brands: PitchKitPastBrand[]) => void;
+}) {
+  return (
+    <main className="grid-page min-h-screen bg-body [--grid-column-gap:8px] [--grid-max:1140px] [padding-bottom:44px]">
+      <div className="band pb-4">
+        <header className="col-span-full grid grid-cols-[1fr_auto_1fr] items-center gap-3">
+          <span className="type-heading-4 text-fg text-fg">PitchKit</span>
+          <span />
+          <span className="justify-self-end">
+            <Avatar
+              name={identity.displayName ?? identity.handle}
+              src={identity.profilePictureUrl}
+              size="md"
+            />
+          </span>
+        </header>
+      </div>
+
+      <div className="band pt-6 sm:pt-8">
+        <div className="band min-w-0 gap-y-6 sm:gap-y-8">
+          <section className="col-span-full border-b border-border pb-6">
+            <div className="flex min-w-0 flex-col gap-3">
+              <CreatorIdentityStrip
+                identity={identity}
+                nameAs="h1"
+                showProfessionalChip
+              />
+            </div>
+          </section>
+          <OwnerPastBrands brands={brands} onBrandsChange={onBrandsChange} />
+        </div>
+      </div>
+    </main>
+  );
+}