@gigamusic/links 0.3.0 → 2.0.0

package/src/components/admin/NewLinkPageForm.tsx

@@ -1,152 +0,0 @@
-"use client";
-
-import { useState } from "react";
-import { useRouter } from "next/navigation";
-import { slugify } from "@gigamusic/core";
-
-export interface NewLinkPageReleaseOption {
-  id: number;
-  name: string;
-  slug: string;
-  isPublished: boolean;
-}
-
-interface Props {
-  releases: NewLinkPageReleaseOption[];
-  initialRelease?: NewLinkPageReleaseOption;
-}
-
-/**
- * Minimal "create new link page" form. POSTs to the route mounted from
- * `createAdminLinkPagesHandlers`. On success, redirects to the edit page so
- * the user can flesh out the items.
- *
- * The slug field auto-fills from the title until the user touches it.
- */
-export function NewLinkPageForm({ releases, initialRelease }: Props) {
-  const router = useRouter();
-  const [title, setTitle] = useState(initialRelease?.name ?? "");
-  const [slug, setSlug] = useState(initialRelease?.slug ?? "");
-  const [slugTouched, setSlugTouched] = useState(Boolean(initialRelease));
-  const [description, setDescription] = useState("");
-  const [releaseId, setReleaseId] = useState<string>(
-    initialRelease ? String(initialRelease.id) : "",
-  );
-  const [saving, setSaving] = useState(false);
-  const [error, setError] = useState("");
-
-  function onTitleChange(value: string) {
-    setTitle(value);
-    if (!slugTouched) setSlug(slugify(value));
-  }
-
-  async function handleSubmit(e: React.FormEvent) {
-    e.preventDefault();
-    setSaving(true);
-    setError("");
-    const res = await fetch("/api/admin/link-pages", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        title,
-        slug,
-        description: description || null,
-        releaseId: releaseId ? Number(releaseId) : null,
-      }),
-    });
-    const data = await res.json();
-    if (!res.ok) {
-      setError(data.error ?? "Failed to create link page");
-      setSaving(false);
-      return;
-    }
-    router.push(`/admin/link-pages/${data.id}/edit`);
-  }
-
-  const picked = releaseId ? releases.find((r) => String(r.id) === releaseId) : null;
-
-  return (
-    <form onSubmit={handleSubmit} className="space-y-4 mt-4">
-      <label className="block space-y-1.5">
-        <span className="text-sm font-medium">Title</span>
-        <input
-          value={title}
-          onChange={(e) => onTitleChange(e.target.value)}
-          placeholder="Summer Release"
-          required
-          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-        />
-      </label>
-
-      <label className="block space-y-1.5">
-        <span className="text-sm font-medium">Slug</span>
-        <input
-          value={slug}
-          onChange={(e) => {
-            setSlug(e.target.value);
-            setSlugTouched(true);
-          }}
-          placeholder="summer-release"
-          required
-          pattern="^[a-z0-9]+(?:-[a-z0-9]+)*$"
-          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-        />
-        <span className="block text-xs text-muted-foreground">
-          Public URL: <code>/links/{slug || "your-slug"}</code>
-        </span>
-      </label>
-
-      <label className="block space-y-1.5">
-        <span className="text-sm font-medium">Release (optional)</span>
-        <select
-          value={releaseId}
-          onChange={(e) => setReleaseId(e.target.value)}
-          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-        >
-          <option value="">— None —</option>
-          {releases.map((r) => (
-            <option key={r.id} value={r.id}>
-              {r.name}
-              {!r.isPublished && " (draft)"}
-            </option>
-          ))}
-        </select>
-        {picked && !picked.isPublished && (
-          <span className="block text-xs text-destructive">
-            This release is a draft and is hidden from the storefront. Publish
-            it before sharing this link page.
-          </span>
-        )}
-      </label>
-
-      <label className="block space-y-1.5">
-        <span className="text-sm font-medium">Description (optional)</span>
-        <textarea
-          value={description}
-          onChange={(e) => setDescription(e.target.value)}
-          rows={3}
-          className="block w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
-        />
-      </label>
-
-      {error && <p className="text-sm text-destructive">{error}</p>}
-
-      <div className="flex gap-2">
-        <button
-          type="submit"
-          disabled={saving || !title || !slug}
-          className="rounded-md px-3 py-2 bg-[var(--gm-color-primary)]/90 text-black text-sm disabled:opacity-50"
-        >
-          {saving ? "Creating..." : "Create"}
-        </button>
-        <button
-          type="button"
-          onClick={() => router.push("/admin/link-pages")}
-          className="rounded-md px-3 py-2 border border-white/20 text-sm"
-        >
-          Cancel
-        </button>
-      </div>
-    </form>
-  );
-}

package/src/components/url-helpers.ts

@@ -1,18 +0,0 @@
-/**
- * Heuristic check for "internal" URLs that should NOT open in a new tab.
- * Relative paths, hashes, and `mailto:` targets stay in-tab. Anything with
- * an explicit `http(s)` protocol counts as external.
- */
-export function isInternalUrl(url: string): boolean {
-  if (!url) return true;
-  if (url.startsWith("#")) return true;
-  if (url.startsWith("/") && !url.startsWith("//")) return true;
-  if (url.startsWith("mailto:") || url.startsWith("tel:")) return true;
-  try {
-    const u = new URL(url);
-    return u.protocol !== "http:" && u.protocol !== "https:";
-  } catch {
-    // Failed to parse — treat as relative (internal).
-    return true;
-  }
-}

package/src/pages/AdminEditLinkPagePage.tsx

@@ -1,57 +0,0 @@
-import {
-  LinkPageForm,
-  type LinkPageFormPage,
-  type LinkPageFormReleaseOption,
-} from "../components/admin/LinkPageForm";
-import { DeleteLinkPageButton } from "../components/admin/DeleteLinkPageButton";
-
-export interface AdminEditLinkPagePageProps {
-  page: LinkPageFormPage;
-  releases: LinkPageFormReleaseOption[];
-  /** Absolute URL prefix used by the "Copy URL" button (e.g. `https://artist.example`). */
-  baseUrl: string;
-  /** Optional file-upload hook for the cover image; see `LinkPageForm.onUploadCover`. */
-  onUploadCover?: (file: File, pageId: number) => Promise<string | null>;
-}
-
-/**
- * Admin "edit link page" page body. The consumer loads the page row + the
- * full release list and passes them in. `baseUrl` is the consumer's site
- * origin (used for the "Copy URL" button); it stays out of this package so
- * we don't need `process.env`.
- */
-export function AdminEditLinkPagePage({
-  page,
-  releases,
-  baseUrl,
-  onUploadCover,
-}: AdminEditLinkPagePageProps) {
-  return (
-    <div className="max-w-2xl">
-      <a
-        href={`/links/${page.slug}`}
-        target="_blank"
-        rel="noopener noreferrer"
-        className="text-sm text-[var(--gm-color-primary)] hover:underline"
-      >
-        View public page →
-      </a>
-      <div className="flex items-baseline gap-6 mb-6">
-        <h1>{page.title}</h1>
-        <div className="ml-auto">
-          <DeleteLinkPageButton
-            pageId={page.id}
-            pageTitle={page.title}
-            redirectOnDelete
-          />
-        </div>
-      </div>
-      <LinkPageForm
-        page={page}
-        releases={releases}
-        baseUrl={baseUrl}
-        onUploadCover={onUploadCover}
-      />
-    </div>
-  );
-}

package/src/pages/AdminLinkPagesIndexPage.tsx

@@ -1,107 +0,0 @@
-import Link from "next/link";
-import type { LinkPage, LinkPageQueries } from "../types";
-import { DeleteLinkPageButton } from "../components/admin/DeleteLinkPageButton";
-
-export interface AdminLinkPagesIndexPageProps {
-  pages: LinkPage[];
-}
-
-/**
- * Admin index — list every link page with edit + delete actions and the count
- * of items per page. Consumers fetch with `queries.listAllLinkPages()` and
- * pass `pages` in.
- */
-export function AdminLinkPagesIndexPage({ pages }: AdminLinkPagesIndexPageProps) {
-  return (
-    <div>
-      <div className="flex items-center justify-between mb-1">
-        <h1>Link Pages</h1>
-        <Link
-          href="/admin/link-pages/new"
-          className="text-sm rounded-md px-3 py-1.5 bg-[var(--gm-color-primary)]/20 text-[var(--gm-color-primary)] hover:bg-[var(--gm-color-primary)]/30"
-        >
-          New Page
-        </Link>
-      </div>
-      <p className="text-sm text-muted-foreground mb-6 max-w-2xl">
-        Standalone shareable pages — one URL per release (or campaign) with
-        streaming-service buttons (Spotify, Apple Music, YouTube, etc.). Icons
-        auto-detect from each URL.
-      </p>
-
-      <table className="w-full text-sm">
-        <thead className="text-left text-xs uppercase text-muted-foreground">
-          <tr>
-            <th className="py-2">Title</th>
-            <th className="py-2">Public URL</th>
-            <th className="py-2 text-right">Status</th>
-            <th className="py-2" />
-          </tr>
-        </thead>
-        <tbody>
-          {pages.map((page) => (
-            <tr key={page.id} className="border-t border-white/10">
-              <td className="py-2 font-medium">
-                <Link
-                  href={`/admin/link-pages/${page.id}/edit`}
-                  className="hover:underline"
-                >
-                  {page.title}
-                </Link>
-              </td>
-              <td className="py-2">
-                <a
-                  href={`/links/${page.slug}`}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="text-sm text-[var(--gm-color-primary)] hover:underline"
-                >
-                  /links/{page.slug}
-                </a>
-              </td>
-              <td className="py-2 text-right">
-                <span
-                  className={
-                    page.isPublished
-                      ? "text-[var(--gm-color-primary)]"
-                      : "text-muted-foreground"
-                  }
-                >
-                  {page.isPublished ? "Published" : "Draft"}
-                </span>
-              </td>
-              <td className="py-2 text-right">
-                <DeleteLinkPageButton pageId={page.id} pageTitle={page.title} />
-              </td>
-            </tr>
-          ))}
-          {pages.length === 0 && (
-            <tr>
-              <td colSpan={4} className="py-8 text-center text-muted-foreground">
-                No link pages yet.
-              </td>
-            </tr>
-          )}
-        </tbody>
-      </table>
-    </div>
-  );
-}
-
-/**
- * Returns a page component bound to a queries factory. Use when you want the
- * `() => JSX.Element` signature from the plan:
- *
- * ```ts
- * const AdminLinkPagesIndexPage = createAdminLinkPagesIndexPage({ queries });
- * export default AdminLinkPagesIndexPage;
- * ```
- */
-export function createAdminLinkPagesIndexPage(deps: {
-  queries: Pick<LinkPageQueries, "listAllLinkPages">;
-}) {
-  return async function AdminLinkPagesIndexPageBound() {
-    const pages = await deps.queries.listAllLinkPages();
-    return <AdminLinkPagesIndexPage pages={pages} />;
-  };
-}

package/src/pages/AdminNewLinkPagePage.tsx

@@ -1,26 +0,0 @@
-import {
-  NewLinkPageForm,
-  type NewLinkPageReleaseOption,
-} from "../components/admin/NewLinkPageForm";
-
-export interface AdminNewLinkPagePageProps {
-  releases: NewLinkPageReleaseOption[];
-  /** Pre-selected release (when arriving via "Create link page for this release" link from the release edit page). */
-  initialRelease?: NewLinkPageReleaseOption;
-}
-
-/**
- * Admin "new link page" page body. Consumer fetches the release options
- * (typically `queries.listAllReleases().map(toOption)`) and passes them in.
- */
-export function AdminNewLinkPagePage({
-  releases,
-  initialRelease,
-}: AdminNewLinkPagePageProps) {
-  return (
-    <div className="max-w-2xl">
-      <h1>New Link Page</h1>
-      <NewLinkPageForm releases={releases} initialRelease={initialRelease} />
-    </div>
-  );
-}

package/src/pages/PublicLinkPage.tsx

@@ -1,117 +0,0 @@
-import type { Metadata } from "next";
-import { notFound } from "next/navigation";
-import { LinkPageView } from "../components/LinkPageView";
-import type { LinkPageWithItems, LinkPageQueries } from "../types";
-import type { GigamusicConfig } from "@gigamusic/config";
-
-export interface PublicLinkPageProps {
-  slug: string;
-  /**
-   * The page row. Consumers fetch it via their merged `Queries` and pass it
-   * in — keeping this package free of any DB coupling at the page boundary.
-   * When `null`, the component triggers `notFound()`.
-   */
-  page: LinkPageWithItems | null;
-}
-
-/**
- * Page body for `app/links/[slug]/page.tsx`. Calls `notFound()` when `page`
- * is null. The consumer is expected to look up the page using
- * `queries.getPublicLinkPageBySlug(slug)` before rendering.
- *
- * The companion factory `createPublicLinkPage({ queries })` wraps this in a
- * pre-fetching shell so consumers can mount a single component without the
- * boilerplate.
- */
-export function PublicLinkPage({ page }: PublicLinkPageProps) {
-  if (!page) notFound();
-  return <LinkPageView page={page} />;
-}
-
-export interface CreatePublicLinkPageDeps {
-  queries: Pick<LinkPageQueries, "getPublicLinkPageBySlug">;
-}
-
-/**
- * Returns a JSX-returning page that fetches a link page by slug and renders
- * `PublicLinkPage`. Use this when you want the bound `{ slug }` signature
- * called out in `plans/11-links.md`:
- *
- * ```ts
- * const PublicLinkPage = createPublicLinkPage({ queries });
- * export default async function Page({ params }) {
- *   const { slug } = await params;
- *   return <PublicLinkPage slug={slug} />;
- * }
- * ```
- */
-export function createPublicLinkPage({ queries }: CreatePublicLinkPageDeps) {
-  return async function PublicLinkPageBound({ slug }: { slug: string }) {
-    const page = await queries.getPublicLinkPageBySlug(slug);
-    return <PublicLinkPage slug={slug} page={page} />;
-  };
-}
-
-export interface PublicLinkPageMetadataDeps {
-  queries: Pick<LinkPageQueries, "getPublicLinkPageBySlug">;
-  /** Optional site-level config for OG fallback (site name, default OG image, description). */
-  config?: GigamusicConfig;
-}
-
-export interface PublicLinkPageMetadataArgs {
-  slug: string;
-}
-
-/**
- * Build a `generateMetadata` implementation. The OG image follows the chain:
- *   explicit `page.coverImageUrl` override → linked release's cover (only when
- *   the release is published, to avoid leaking a draft's art) → site-level
- *   `config.branding.ogImageUrl` (when provided) → none.
- */
-export function createPublicLinkPageMetadata({
-  queries,
-  config,
-}: PublicLinkPageMetadataDeps): (
-  args: PublicLinkPageMetadataArgs,
-) => Promise<Metadata> {
-  return async ({ slug }: PublicLinkPageMetadataArgs): Promise<Metadata> => {
-    const page = await queries.getPublicLinkPageBySlug(slug);
-    if (!page) return { title: "Not Found" };
-
-    const releaseCover = page.release?.isPublished
-      ? page.release.coverImageUrl
-      : null;
-    const cover = page.coverImageUrl ?? releaseCover ?? config?.branding.ogImageUrl ?? null;
-
-    return {
-      title: page.title,
-      description: page.description ?? undefined,
-      openGraph: cover
-        ? { images: [{ url: cover, alt: page.title }] }
-        : undefined,
-    };
-  };
-}
-
-/**
- * Single-arg metadata helper matching the locked contract literally. Requires
- * the queries factory to have been registered via
- * `registerLinkPageMetadata({ queries, config })`.
- */
-let registeredMetadataDeps: PublicLinkPageMetadataDeps | null = null;
-
-export function registerLinkPageMetadata(deps: PublicLinkPageMetadataDeps) {
-  registeredMetadataDeps = deps;
-}
-
-export const publicLinkPageMetadata = async (
-  args: PublicLinkPageMetadataArgs,
-): Promise<Metadata> => {
-  if (!registeredMetadataDeps) {
-    throw new Error(
-      "publicLinkPageMetadata: call registerLinkPageMetadata({ queries, config }) once at app startup before invoking, " +
-        "or use createPublicLinkPageMetadata({ queries }) and bind the result yourself.",
-    );
-  }
-  return createPublicLinkPageMetadata(registeredMetadataDeps)(args);
-};

package/src/slots-context.tsx

@@ -1,46 +0,0 @@
-"use client";
-
-import { createContext, useContext, useMemo, type ReactNode } from "react";
-import type { LinksSlots } from "./slots";
-import { DefaultLinkButton } from "./components/LinkButton";
-import { DefaultLinkPageHeader } from "./components/LinkPageHeader";
-
-const DEFAULT_LINK_SLOTS: LinksSlots = {
-  LinkButton: DefaultLinkButton,
-  LinkPageHeader: DefaultLinkPageHeader,
-};
-
-const LinksSlotsContext = createContext<LinksSlots>(DEFAULT_LINK_SLOTS);
-
-/**
- * Optional provider that registers overrides for the `LinksSlots` map.
- * Wrap a subtree (or the whole app) when you want every `LinkPageView` to
- * use your custom `LinkButton` / `LinkPageHeader` without passing the
- * `slots` prop at each call site.
- */
-export function LinksSlotsProvider({
-  components,
-  children,
-}: {
-  components?: Partial<LinksSlots>;
-  children: ReactNode;
-}) {
-  const parent = useContext(LinksSlotsContext);
-  const merged = useMemo<LinksSlots>(
-    () => (components ? { ...parent, ...components } : parent),
-    [parent, components],
-  );
-  return (
-    <LinksSlotsContext.Provider value={merged}>
-      {children}
-    </LinksSlotsContext.Provider>
-  );
-}
-
-/** Resolve a `LinksSlots` entry from the nearest `LinksSlotsProvider`, falling back to the package default. */
-export function useLinksSlot<K extends keyof LinksSlots>(key: K): LinksSlots[K] {
-  const slots = useContext(LinksSlotsContext);
-  return slots[key];
-}
-
-export { DEFAULT_LINK_SLOTS as defaultLinkSlots };

package/src/slots.ts

@@ -1,36 +0,0 @@
-import type { ComponentType, ReactNode } from "react";
-import type { KnownLinkPlatform } from "./platforms/detect";
-
-/**
- * Props passed to the `LinkButton` slot. Consumers can swap this to use their
- * own button styling without forking `LinkPageView`.
- */
-export interface LinkButtonProps {
-  href: string;
-  title: string;
-  /** Detected platform, if any — used to render an inline icon. */
-  platform: KnownLinkPlatform | null;
-  /** True when the URL is same-origin; the default implementation skips `target="_blank"`. */
-  internal: boolean;
-}
-
-/** Props passed to the `LinkPageHeader` slot — the title block above the social row. */
-export interface LinkPageHeaderProps {
-  title: string;
-  description: string | null;
-  /** Cover image url to render (already resolved per the override → release chain). */
-  cover: { src: string; alt: string } | null;
-}
-
-/**
- * Slots specific to `@gigamusic/links`. They live alongside the slots from
- * `@gigamusic/ui`; callers register them on the same `GigamusicProvider`.
- * Adding new entries is a minor-version bump; renaming or changing props of an
- * existing entry is a breaking change.
- */
-export interface LinksSlots {
-  LinkButton: ComponentType<LinkButtonProps>;
-  LinkPageHeader: ComponentType<LinkPageHeaderProps>;
-}
-
-export type LinksSlotChildren = { children?: ReactNode };