@thewhatmatters/wmds 0.2.0 → 0.3.0

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

@@ -1,611 +0,0 @@
-// @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>
-  );
-}