bsmnt 0.6.3 → 0.7.0

package/src/modules/features/env/dotenvx/files/setup-remote.ts

@@ -0,0 +1,182 @@
+/**
+ * Create the GitHub repo, link a Vercel project to it, and push the dotenvx key
+ * to Vercel env — before the git connection, so the first push-to-deploy can
+ * decrypt the committed `.env`. No GitHub secret: CI reads the key from
+ * 1Password via OP_SERVICE_ACCOUNT_TOKEN.
+ *
+ *   bun setup-remote                # private repo under your account (default)
+ *   bun setup-remote --public       # public repo
+ *   bun setup-remote --org my-org   # create under an org
+ *
+ * The CLI runs the same sequence inline during `bsmnt create`
+ * (src/infrastructure/create/setup-remote.ts); keep the two in sync.
+ */
+import { spawnSync } from "node:child_process";
+import { existsSync, readFileSync, writeFileSync } from "node:fs";
+import path from "node:path";
+
+const GH_HINT =
+	"gh CLI not found — install it (https://cli.github.com) and run `gh auth login`.";
+const VERCEL_HINT =
+	"vercel CLI not found — install it (`bun add -g vercel`) and try again.";
+
+/** Run an interactive command, letting the user answer its prompts directly. */
+function run(cmd: string, args: string[], notFoundHint: string): boolean {
+	const res = spawnSync(cmd, args, { stdio: "inherit" });
+	if ((res.error as NodeJS.ErrnoException | undefined)?.code === "ENOENT") {
+		console.error(`\n${notFoundHint}`);
+		process.exit(1);
+	}
+	return res.status === 0;
+}
+
+/**
+ * Push the private keys to Vercel env via the tested push-keys path, rather
+ * than re-implementing the per-key (stdin-piped) upload here.
+ */
+function pushVercelKeys(): boolean {
+	return (
+		spawnSync("bun", ["run", "scripts/push-keys.mjs", "vercel"], {
+			stdio: "inherit",
+		}).status === 0
+	);
+}
+
+function hasOriginRemote(): boolean {
+	return (
+		spawnSync("git", ["remote", "get-url", "origin"], { stdio: "ignore" })
+			.status === 0
+	);
+}
+
+function ghReady(): boolean {
+	const res = spawnSync("gh", ["auth", "status"], { stdio: "ignore" });
+	return (
+		(res.error as NodeJS.ErrnoException | undefined)?.code !== "ENOENT" &&
+		res.status === 0
+	);
+}
+
+/** True when `.env.keys` holds at least one non-empty DOTENV_PRIVATE_KEY*. */
+function hasPrivateKey(): boolean {
+	if (!existsSync(".env.keys")) return false;
+	for (const line of readFileSync(".env.keys", "utf8").split("\n")) {
+		const value = line
+			.match(/^\s*DOTENV_PRIVATE_KEY[A-Z_]*\s*=\s*(.+?)\s*$/)?.[1]
+			?.replace(/^["']|["']$/g, "");
+		if (value) return true;
+	}
+	return false;
+}
+
+function main(): void {
+	// No key means a deploy can't decrypt `.env` — nothing to wire up yet.
+	if (!hasPrivateKey()) {
+		console.error(
+			"No DOTENV_PRIVATE_KEY* in .env.keys — run `bun run env:setup` first so there's a key to push.",
+		);
+		process.exit(1);
+	}
+
+	// GitHub: ensure the repo exists so Vercel can git-connect to it.
+	let connected = hasOriginRemote();
+	if (!connected) {
+		if (ghReady()) {
+			// `--source` forces non-interactive mode, which requires a visibility flag.
+			const visibility = process.argv.includes("--public")
+				? "--public"
+				: "--private";
+			const orgIndex = process.argv.indexOf("--org");
+			const owner = orgIndex !== -1 ? process.argv[orgIndex + 1] : undefined;
+			const nameArg = owner ? [`${owner}/${path.basename(process.cwd())}`] : [];
+			console.info(`→ gh repo create (${visibility})`);
+			// No `--push` here: the push must come after `vercel git connect`, or
+			// the git integration never sees it and skips the first deployment.
+			if (
+				run(
+					"gh",
+					["repo", "create", ...nameArg, "--source=.", "--remote=origin", visibility],
+					GH_HINT,
+				)
+			) {
+				connected = hasOriginRemote();
+			}
+		} else {
+			console.info(
+				"\nNo `origin` remote and the gh CLI isn't ready — skipping GitHub setup.\n" +
+					"  Install gh (https://cli.github.com), run `gh auth login`, then re-run\n" +
+					"  (or create the repo manually and re-run).",
+			);
+		}
+	}
+
+	// Vercel: link the project and push the keys as env vars.
+	if (spawnSync("vercel", ["whoami"], { stdio: "ignore" }).status !== 0) {
+		console.info("→ vercel login");
+		if (!run("vercel", ["login"], VERCEL_HINT)) process.exit(1);
+	}
+	// Pick the scope via Vercel's team picker, then link with `--yes` so the
+	// validated lowercase dir name is used (the `Name?` prompt rejects uppercase).
+	console.info("→ vercel switch + link");
+	run("vercel", ["switch"], VERCEL_HINT);
+	if (!run("vercel", ["link", "--yes"], VERCEL_HINT)) {
+		console.error("\nLink cancelled — re-run `bun setup-remote` when ready.");
+		process.exit(1);
+	}
+	// Pin the Next.js framework so Vercel resolves the .next output (it sometimes
+	// creates the project as "Other"); commit it so the push below ships it.
+	if (!existsSync("vercel.json")) {
+		writeFileSync(
+			"vercel.json",
+			'{\n  "$schema": "https://openapi.vercel.sh/vercel.json",\n  "framework": "nextjs"\n}\n',
+		);
+		spawnSync("git", ["add", "vercel.json"], { stdio: "ignore" });
+		spawnSync(
+			"git",
+			[
+				"commit",
+				"-m",
+				"chore: pin Next.js framework for Vercel",
+				"--no-verify",
+				"--",
+				"vercel.json",
+			],
+			{ stdio: "ignore" },
+		);
+	}
+	console.info("→ uploading private keys to Vercel env");
+	if (!pushVercelKeys()) process.exit(1);
+
+	// Connect the two so pushes build from a clone (keys already in place).
+	if (!connected) {
+		console.info(
+			"\n✓ Vercel linked and keys uploaded. No GitHub repo connected yet — once\n" +
+				"  one exists, run `vercel git connect` for push-to-deploy.",
+		);
+		return;
+	}
+	console.info("→ vercel git connect");
+	if (!run("vercel", ["git", "connect"], VERCEL_HINT)) {
+		console.error(
+			"\nKeys uploaded, but `vercel git connect` failed. If the Git integration\n" +
+				"isn't installed, add it once from the Vercel dashboard (Account/Team →\n" +
+				"Integrations → GitHub), then re-run `vercel git connect`.",
+		);
+		process.exit(1);
+	}
+
+	// Push after connecting so the git integration builds the first deployment.
+	console.info("→ git push");
+	if (!run("git", ["push", "-u", "origin", "HEAD"], "git not found.")) {
+		console.error(
+			"\nConnected, but the push failed — run `git push` to trigger the first deploy.",
+		);
+		process.exit(1);
+	}
+
+	console.info(
+		"\n✓ GitHub + Vercel ready. Pushed — Vercel is building the first deployment.",
+	);
+}
+
+main();

package/src/modules/features/forms/hubspot/files/_sanity-adapter/form-block.ts

@@ -0,0 +1,60 @@
+import { EnvelopeIcon } from "@sanity/icons"
+import { defineField, defineType } from "sanity"
+import {
+  decodeHubSpotFormSelection,
+  getHubSpotFormSelectionLabel,
+} from "../form-selection"
+import { hubspotFormField } from "./form-field"
+
+/**
+ * Sample reusable HubSpot form block. Register it in your schema's document
+ * list (and page-builder config, if you use one), then render its `form` with
+ * <HubSpotForm /> from the integration core:
+ *
+ * @example
+ * import { HubSpotForm } from "@/lib/integrations/hubspot/form"
+ * import { decodeHubSpotFormSelection } from "@/lib/integrations/hubspot/form-selection"
+ *
+ * const selection = decodeHubSpotFormSelection(block.form)
+ * if (!selection) return null
+ * return <HubSpotForm {...selection} />
+ */
+export const hubspotFormBlock = defineType({
+  name: "hubspotFormBlock",
+  title: "HubSpot Form Block",
+  type: "document",
+  icon: EnvelopeIcon,
+  fields: [
+    defineField({
+      name: "name",
+      title: "Name",
+      type: "string",
+      description: "Used to identify this block in the Studio.",
+      validation: (Rule) => Rule.required(),
+    }),
+    hubspotFormField,
+  ],
+  preview: {
+    select: {
+      name: "name",
+      form: "form",
+    },
+    prepare({ name, form }) {
+      const selectedForm = decodeHubSpotFormSelection(form)
+
+      return {
+        title: name || "Untitled",
+        ...(selectedForm
+          ? { subtitle: getHubSpotFormSelectionLabel(selectedForm) }
+          : {}),
+      }
+    },
+  },
+})
+
+export const hubspotFormBlockReference = defineType({
+  name: "hubspotFormBlockReference",
+  title: "HubSpot Form Block",
+  type: "reference",
+  to: [{ type: "hubspotFormBlock" }],
+})

package/src/modules/features/forms/hubspot/files/_sanity-adapter/form-field.ts

@@ -0,0 +1,30 @@
+import { defineField } from "sanity"
+import { decodeHubSpotFormSelection } from "../form-selection"
+import { HubSpotFormSelectInput } from "./form-select-input"
+
+/**
+ * Shared HubSpot form picker field. Stores the selected form as one encoded
+ * string and validates it decodes to a real selection. Reuse it in any block
+ * or document that embeds a HubSpot form.
+ *
+ * @example
+ * defineType({
+ *   name: "contactBlock",
+ *   type: "object",
+ *   fields: [hubspotFormField],
+ * })
+ */
+export const hubspotFormField = defineField({
+  name: "form",
+  title: "HubSpot Form",
+  type: "string",
+  components: {
+    input: HubSpotFormSelectInput,
+  },
+  description:
+    "Fetches HubSpot forms when the dropdown is opened. The selected form is stored as one string.",
+  validation: (Rule) =>
+    Rule.required().custom((value) =>
+      decodeHubSpotFormSelection(value) ? true : "Select a valid HubSpot form."
+    ),
+})

package/src/modules/features/forms/hubspot/files/_sanity-adapter/form-select-input.tsx

@@ -0,0 +1,169 @@
+"use client"
+
+import {
+  Autocomplete,
+  Box,
+  Button,
+  Card,
+  Flex,
+  Spinner,
+  Stack,
+  Text,
+} from "@sanity/ui"
+import { useCallback, useMemo, useRef, useState } from "react"
+import { PatchEvent, type StringInputProps, set, unset } from "sanity"
+import {
+  decodeHubSpotFormSelection,
+  getHubSpotFormSelectionLabel,
+} from "../form-selection"
+import { getHubSpotFormOptions, type HubSpotFormOption } from "../forms"
+
+type LoadStatus = "idle" | "loading" | "loaded" | "error"
+
+function HubSpotFormOptionPreview({ option }: { option: HubSpotFormOption }) {
+  const form = decodeHubSpotFormSelection(option.value)
+
+  return (
+    <Card padding={3} style={{ cursor: "pointer" }}>
+      <Stack space={2}>
+        <Text size={1} weight="medium">
+          {form?.name ?? option.label}
+        </Text>
+        {form ? (
+          <Text muted size={1}>
+            {form.formId}
+            {option.renderRawHtml === false ? " · iframe embed" : ""}
+          </Text>
+        ) : null}
+      </Stack>
+    </Card>
+  )
+}
+
+/**
+ * Sanity Studio input that lazy-loads the connected portal's HubSpot forms and
+ * stores the chosen one as a single encoded string (see `hubspotFormField`).
+ */
+export function HubSpotFormSelectInput(props: StringInputProps) {
+  const { value, onChange, readOnly, elementProps } = props
+  const { onChange: _ignoreElementOnChange, ...autocompleteElementProps } =
+    elementProps
+
+  const [forms, setForms] = useState<HubSpotFormOption[]>([])
+  const [status, setStatus] = useState<LoadStatus>("idle")
+  const [error, setError] = useState<string | null>(null)
+  const statusRef = useRef<LoadStatus>("idle")
+
+  const selectedForm = useMemo(() => decodeHubSpotFormSelection(value), [value])
+  const isLoading = status === "loading"
+
+  const loadForms = useCallback(async () => {
+    if (statusRef.current === "loading") return
+    statusRef.current = "loading"
+    setStatus("loading")
+    setError(null)
+
+    try {
+      const result = await getHubSpotFormOptions()
+      setForms(result.forms)
+      setError(result.error ?? null)
+      const next: LoadStatus = result.error ? "error" : "loaded"
+      statusRef.current = next
+      setStatus(next)
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Unable to load forms."
+      setError(message)
+      statusRef.current = "error"
+      setStatus("error")
+    }
+  }, [])
+
+  const loadFormsOnce = useCallback(() => {
+    if (statusRef.current === "idle") void loadForms()
+  }, [loadForms])
+
+  // Keep the already-selected form visible while options are still loading.
+  const options =
+    selectedForm && !forms.some((form) => form.value === value)
+      ? [
+          {
+            label: getHubSpotFormSelectionLabel(selectedForm),
+            value: value as string,
+            renderRawHtml: null,
+          },
+          ...forms,
+        ]
+      : forms
+
+  return (
+    <Stack space={3}>
+      <Flex gap={2} align="center">
+        <Box flex={1}>
+          <Autocomplete
+            {...autocompleteElementProps}
+            disabled={readOnly || isLoading}
+            filterOption={(query, option) =>
+              option.label.toLowerCase().includes(query.toLowerCase())
+            }
+            loading={isLoading}
+            openButton
+            openOnFocus
+            options={options}
+            onFocus={loadFormsOnce}
+            onMouseDown={loadFormsOnce}
+            onQueryChange={(query) => {
+              if (query) loadFormsOnce()
+            }}
+            onSelect={(nextValue) =>
+              onChange(PatchEvent.from(nextValue ? set(nextValue) : unset()))
+            }
+            placeholder={
+              isLoading ? "Loading HubSpot forms..." : "Select a HubSpot form"
+            }
+            popover={{ portal: true, width: "auto" }}
+            radius={2}
+            renderOption={(option) => (
+              <HubSpotFormOptionPreview option={option} />
+            )}
+            renderValue={(_, option) => {
+              const form = option
+                ? decodeHubSpotFormSelection(option.value)
+                : selectedForm
+              return form ? getHubSpotFormSelectionLabel(form) : ""
+            }}
+            value={value ?? ""}
+          />
+        </Box>
+        <Button
+          disabled={readOnly || isLoading}
+          mode="ghost"
+          onClick={() => void loadForms()}
+          text="Refresh"
+          type="button"
+        />
+      </Flex>
+
+      {isLoading ? (
+        <Flex align="center" gap={2}>
+          <Spinner muted />
+          <Text muted size={1}>
+            Fetching forms from HubSpot
+          </Text>
+        </Flex>
+      ) : null}
+
+      {selectedForm ? (
+        <Text muted size={1}>
+          Selected form ID: {selectedForm.formId}
+        </Text>
+      ) : null}
+
+      {error ? (
+        <Text size={1} style={{ color: "var(--card-critical-fg-color)" }}>
+          {error}
+        </Text>
+      ) : null}
+    </Stack>
+  )
+}

package/src/modules/features/forms/hubspot/files/lib/integrations/hubspot/README.md

@@ -0,0 +1,114 @@
+# HubSpot Forms integration
+
+Agnostic, reusable HubSpot Forms embed. The core (`form.tsx`, `embed.tsx`,
+`forms.ts`, `form-selection.ts`, `hubspot-form.css`) has **no CMS dependency**
+and adds **no runtime packages** — it loads HubSpot's official forms script and
+styles the injected DOM with self-contained, themeable CSS.
+
+## 1. Environment
+
+Create a HubSpot **private app** with the `forms` and
+`account-info.security.read` scopes, then add its token to `.env.local`:
+
+```bash
+HUBSPOT_ACCESS_TOKEN=pat-xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx
+```
+
+The token is only read server-side (in `forms.ts`); it is never exposed to the
+client.
+
+## 2. Render a form
+
+If you already know the form, pass `portalId` / `formId` / `region` directly:
+
+```tsx
+import { HubSpotForm } from "@/lib/integrations/hubspot/form"
+
+export function Contact() {
+  return (
+    <HubSpotForm
+      portalId="1234567"
+      formId="00000000-0000-0000-0000-000000000000"
+      region="na1"
+    />
+  )
+}
+```
+
+`region` is the portal's data-hosting location (`na1`, `eu1`, …).
+
+## 3. Theming
+
+By default the form inherits the **basement starter** design tokens, so it
+matches the surrounding site with no extra work:
+
+| `--hs-*` token | Maps to (fallback) |
+| --- | --- |
+| `--hs-surface` | `--color-primary` (`#ffffff`) |
+| `--hs-text` / `--hs-text-strong` | `--color-secondary` (`#18181b`) |
+| `--hs-accent` | `--color-contrast` (`#ff4d00`) |
+| `--hs-muted` | `--color-gray-400` (`#858585`) |
+| `--hs-font-sans` | `--font-sans` → `--font-mono` → system |
+
+Light/dark follows the host's `[data-theme]` automatically (via
+`--color-primary` / `--color-secondary`). Outside the starter, the fallbacks
+render a clean light theme.
+
+Override any token from a parent scope to customize:
+
+```css
+.my-section {
+  --hs-accent: #487cff;
+  --hs-surface: #0a0a0a;
+  --hs-text: #ededed;
+  --hs-radius: 8px;
+}
+```
+
+## 4. Listing forms programmatically
+
+`getHubSpotFormOptions()` (from `forms.ts`) returns every published form in the
+portal as `{ label, value, renderRawHtml }`. Each `value` is a JSON-encoded
+selection — decode it with `decodeHubSpotFormSelection` and spread it into
+`<HubSpotForm />`.
+
+## 5. Optional: Sanity Studio form picker
+
+When this integration is added to a project that already has Sanity, a
+`sanity/` folder ships alongside the core with a Studio picker:
+
+- `sanity/form-field.ts` — a ready-to-use `hubspotFormField` (`defineField`)
+- `sanity/form-select-input.tsx` — the `<Autocomplete>` input it uses
+- `sanity/form-block.ts` — a sample `hubspotFormBlock` document type
+
+Wire the field into any schema:
+
+```ts
+import { defineType } from "sanity"
+import { hubspotFormField } from "@/lib/integrations/hubspot/sanity/form-field"
+
+export const contactBlock = defineType({
+  name: "contactBlock",
+  type: "object",
+  fields: [hubspotFormField],
+})
+```
+
+Or register the sample block by adding `hubspotFormBlock` to your schema's
+document list, then render it (see the example in `sanity/form-block.ts`).
+
+## 6. Use as a page-builder block
+
+In a basement **Sanity page-builder** project, `hubspotFormBlock` can be a
+selectable block. Adding this integration installs the
+**`hubspot-pagebuilder-block`** agent skill — ask your coding agent to "wire the
+HubSpot form into the page builder" and it makes the edits and verifies the
+typecheck. To do it by hand:
+
+1. `schemas/index.ts` — import `hubspotFormBlock`, add it to `schema.types`
+2. `page-builder-config.ts` — add `"hubspotFormBlock"` to
+   `PageBuilderDocumentType` and a `hubspotFormBlockReference` member
+3. `structure.ts` — add `S.documentTypeListItem("hubspotFormBlock")`
+4. `components/page-builder/renderer.tsx` — add a `case "hubspotFormBlock"` that
+   decodes `block.form` and renders `<HubSpotForm />`
+5. `bun run sanity:typegen && bun typecheck`