create-grist-widget 0.3.7 → 0.3.10

package/ui-source/badge.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary:
+          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
+        outline:
+          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost:
+          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

package/vendor/compose-example.mjs

@@ -0,0 +1,252 @@
+#!/usr/bin/env node
+// Composes one example (examples/<id>/) into a full, buildable project by
+// overlaying it onto the template — the same "copy a source dir, do fixed
+// edits" pattern packages/create-grist-widget/scripts/build-template.mjs
+// already uses to embed the template itself.
+//
+// The logic itself lives in createComposer({ templateDir, examplesDir,
+// uiDir, manifestPath }), parameterized rather than hardcoded to this
+// monorepo's own layout, because it now runs with TWO different path
+// bindings:
+//
+//   - monorepo-rooted (this file's own bottom section, exported under the
+//     names below) — scripts/build-site.mjs -> temp dir -> site/examples/<id>/,
+//     and scripts/smoke/create-widget.sh -> temp dir -> built against a
+//     packed SDK tarball.
+//   - package-rooted — packages/create-grist-widget/scripts/build-template.mjs
+//     copies this file verbatim into packages/create-grist-widget/vendor/
+//     (safe, since it now has no hardcoded paths left), and the CLI's own
+//     bin/create-grist-widget.mjs imports createComposer from there to bind
+//     it against the *published* package's own embedded template/examples/
+//     manifest — see batch H, docs/planning/2026-08-execution-plan.md §98-105.
+//
+// See docs/planning/2026-08-execution-plan.md §3 ("Composition is the same
+// function as `use`") and batch G.
+//
+// Dependency-free (node builtins only), matching every other scripts/*.mjs
+// in this repo.
+
+import {
+  cpSync,
+  existsSync,
+  readFileSync,
+  readdirSync,
+  rmSync,
+  writeFileSync,
+} from "node:fs"
+import { basename, dirname, join, resolve } from "node:path"
+import { fileURLToPath } from "node:url"
+
+// The one example needing an npm dependency beyond what copying a missing
+// `@/components/ui/*` file covers — spreadsheet-grid's grid rendering pulls
+// in this package directly, not just through a ui primitive. Pinned to
+// apps/playground's own version, the only other consumer. Example-id-keyed
+// data, not a path — identical regardless of which composer binding uses it.
+const EXTRA_DEPENDENCIES = {
+  "spreadsheet-grid": { "react-datasheet-grid": "^4.11.6" },
+}
+
+const TEMPLATE_SKIP = new Set(["node_modules", "dist", ".turbo"])
+
+/** Union of every example's extra npm deps — see EXTRA_DEPENDENCIES above. */
+export function allExtraDependencies() {
+  return Object.assign({}, ...Object.values(EXTRA_DEPENDENCIES))
+}
+
+/**
+ * Build a { composeExample, overlayExampleSrc, allExtraDependencies,
+ * mergeExtraDependencies } bound to one set of source directories. Two
+ * bindings exist today — see the file header comment.
+ */
+export function createComposer({ templateDir, examplesDir, uiDir, manifestPath }) {
+  function loadManifestEntry(exampleId) {
+    if (!existsSync(manifestPath)) {
+      throw new Error(
+        `${basename(manifestPath)} not found — run \`pnpm build:widgets-manifest\` first (needed for usesUi).`
+      )
+    }
+    const manifest = JSON.parse(readFileSync(manifestPath, "utf8"))
+    const entry = manifest.find((e) => e.id === exampleId)
+    if (!entry) {
+      throw new Error(`No ${basename(manifestPath)} entry for "${exampleId}" — is examples/${exampleId}/ real?`)
+    }
+    return entry
+  }
+
+  /**
+   * Overlay `examples/<exampleId>/` onto an *already-composed* project at
+   * `destDir` — everything except the template copy and `package.json` (so a
+   * caller can `pnpm install` once against a project whose `package.json`
+   * already lists every example's dependencies via {@link allExtraDependencies},
+   * then call this repeatedly and rebuild, never reinstalling). Used directly
+   * by {@link composeExample}; exported for callers doing that install-once
+   * optimization themselves (scripts/build-site.mjs,
+   * scripts/smoke/create-widget.sh), and by the CLI's `use <id>` (which calls
+   * this directly against an already-scaffolded project, never composeExample —
+   * see bin/create-grist-widget.mjs).
+   */
+  function overlayExampleSrc({ exampleId, destDir }) {
+    const exampleDir = join(examplesDir, exampleId)
+    if (!existsSync(join(exampleDir, "WidgetApp.tsx"))) {
+      throw new Error(`examples/${exampleId}/WidgetApp.tsx not found`)
+    }
+    const manifestEntry = loadManifestEntry(exampleId)
+    const srcDir = join(destDir, "src")
+
+    // Clear whatever the previous overlay (if any) left behind, except the
+    // template's own fixed structure (components/ui, lib, index.css, etc.) —
+    // only remove files this function itself may have added, so a stale
+    // sibling from a *different* previous example doesn't linger.
+    for (const entry of readdirSync(srcDir, { withFileTypes: true })) {
+      if (entry.name === "App.tsx" || entry.name === "App.test.tsx") continue
+      if (["components", "lib", "assets", "index.css", "vite-env.d.ts", "main.tsx"].includes(entry.name)) {
+        continue
+      }
+      rmSync(join(srcDir, entry.name), { recursive: true, force: true })
+    }
+
+    // The host contract's only mismatch: examples export `WidgetApp` (no
+    // default export), the template's main.tsx does a default-only import.
+    // A copy-time transform, not a rewrite of the source file on disk (which
+    // stays untouched under examples/) — same idiom as deploy.mjs's
+    // identityEdits.
+    const widgetAppSrc = readFileSync(join(exampleDir, "WidgetApp.tsx"), "utf8")
+    writeFileSync(join(srcDir, "App.tsx"), `${widgetAppSrc}\nexport default WidgetApp\n`)
+
+    const testPath = join(exampleDir, "WidgetApp.test.tsx")
+    const destTestPath = join(srcDir, "App.test.tsx")
+    if (existsSync(testPath)) {
+      writeFileSync(destTestPath, readFileSync(testPath, "utf8"))
+    } else if (existsSync(destTestPath)) {
+      // The template's own test (or a previous example's) asserts against
+      // content that's no longer there once App.tsx is someone else's widget.
+      rmSync(destTestPath)
+    }
+
+    // Every other file living alongside WidgetApp.tsx (e.g. spreadsheet-grid's 5
+    // sibling components) travels with it, verbatim.
+    for (const entry of readdirSync(exampleDir, { withFileTypes: true })) {
+      if (entry.name === "WidgetApp.tsx" || entry.name === "WidgetApp.test.tsx") continue
+      cpSync(join(exampleDir, entry.name), join(srcDir, entry.name), { recursive: true })
+    }
+
+    // `@/components/ui/*` the template doesn't already vendor (per the
+    // manifest's usesUi, computed from the real imports — see
+    // scripts/build-widgets-manifest.mjs). components.json is identical
+    // across playground/template/examples-in-CLI (verified, §4 of the plan),
+    // so a straight copy is style-safe. Never removed by the cleanup above
+    // (ui files from an unrelated earlier example are inert, harmless
+    // leftovers — re-added here idempotently either way).
+    const destUiDir = join(srcDir, "components/ui")
+    for (const uiName of manifestEntry.usesUi) {
+      const uiSrcPath = join(uiDir, `${uiName}.tsx`)
+      if (!existsSync(uiSrcPath) || existsSync(join(destUiDir, `${uiName}.tsx`))) continue
+      cpSync(uiSrcPath, join(destUiDir, `${uiName}.tsx`))
+      const cssPath = join(uiDir, `${uiName}.css`)
+      if (existsSync(cssPath)) cpSync(cssPath, join(destUiDir, `${uiName}.css`))
+    }
+
+    return { destDir, exampleId }
+  }
+
+  /**
+   * Additively merge `exampleId`'s extra npm dependencies (see
+   * EXTRA_DEPENDENCIES) into an already-composed project's package.json —
+   * never touches `name` or the `grist-widget-sdk` dependency spec. Split
+   * out from {@link composeExample} (which does this as part of one
+   * from-scratch package.json rewrite) for `use <id>`, which overlays onto
+   * an *existing* project and must only ever add, never rewrite identity.
+   */
+  function mergeExtraDependencies({ exampleId, destDir }) {
+    const extra = EXTRA_DEPENDENCIES[exampleId]
+    if (!extra || Object.keys(extra).length === 0) return { merged: false }
+    const pkgPath = join(destDir, "package.json")
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"))
+    pkg.dependencies = pkg.dependencies || {}
+    Object.assign(pkg.dependencies, extra)
+    writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`)
+    return { merged: true, added: extra }
+  }
+
+  /**
+   * Compose `examples/<exampleId>/` onto a fresh copy of the template at
+   * `destDir`, one-shot (copies the template, overlays, and rewrites
+   * `package.json` in one call). `sdkDependency` replaces the template's own
+   * `workspace:^` (meaningless outside the pnpm workspace) — a `file:`
+   * reference to either `packages/core` (workspace source, already built), a
+   * packed tarball, or (for the CLI's `create`) a real published semver range.
+   *
+   * For composing *many* examples against one shared `pnpm install`, use
+   * {@link overlayExampleSrc} directly instead (see its own doc comment).
+   */
+  function composeExample({ exampleId, destDir, sdkDependency }) {
+    rmSync(destDir, { recursive: true, force: true })
+    cpSync(templateDir, destDir, {
+      recursive: true,
+      filter: (src) => !TEMPLATE_SKIP.has(basename(src)),
+    })
+
+    overlayExampleSrc({ exampleId, destDir })
+
+    const pkgPath = join(destDir, "package.json")
+    const pkg = JSON.parse(readFileSync(pkgPath, "utf8"))
+    pkg.name = exampleId
+    pkg.dependencies["grist-widget-sdk"] = sdkDependency
+    Object.assign(pkg.dependencies, EXTRA_DEPENDENCIES[exampleId] ?? {})
+    writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`)
+
+    return { destDir, exampleId }
+  }
+
+  return { composeExample, overlayExampleSrc, allExtraDependencies, mergeExtraDependencies }
+}
+
+const repoRoot = resolve(dirname(fileURLToPath(import.meta.url)), "..")
+
+const monorepo = createComposer({
+  templateDir: join(repoRoot, "templates/grist-widget-template-vite"),
+  examplesDir: join(repoRoot, "examples"),
+  uiDir: join(repoRoot, "apps/playground/src/components/ui"),
+  manifestPath: join(repoRoot, "widgets.json"),
+})
+
+// Re-exported under the names every existing call site already imports —
+// scripts/build-site.mjs and scripts/smoke/create-widget.sh need zero
+// changes for this refactor.
+export const { composeExample, overlayExampleSrc, mergeExtraDependencies } = monorepo
+
+function parseArgs(argv) {
+  const out = { _: [] }
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]
+    if (a.startsWith("--")) {
+      const key = a.slice(2)
+      const next = argv[i + 1]
+      if (next === undefined || next.startsWith("--")) out[key] = true
+      else {
+        out[key] = next
+        i++
+      }
+    } else out._.push(a)
+  }
+  return out
+}
+
+function main() {
+  const [exampleId, ...rest] = process.argv.slice(2)
+  const args = parseArgs(rest)
+  if (!exampleId || !args.dest || !args["sdk-dependency"]) {
+    console.error(
+      "Usage: node scripts/compose-example.mjs <id> --dest <dir> --sdk-dependency <spec>"
+    )
+    process.exit(2)
+  }
+  const res = composeExample({
+    exampleId,
+    destDir: resolve(args.dest),
+    sdkDependency: args["sdk-dependency"],
+  })
+  console.log(`composed: ${JSON.stringify(res)}`)
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) main()