@vicket/create-support 1.1.1

package/README.md

@@ -0,0 +1,52 @@
+# @vicket/create-support
+
+Scaffold white-label support pages into a client app:
+
+- `/support`: create a ticket
+- `/ticket?token=...`: read and reply to a ticket
+
+No shadcn requirement and no WYSIWYG dependency.
+
+## Usage
+
+```bash
+npx @vicket/create-support --framework next
+```
+
+Without `--framework`, the CLI opens a guided selection menu.
+Without `--styling`, the CLI defaults to `css` (or asks in interactive mode).
+
+Supported frameworks:
+
+- `next`
+- `nuxt`
+- `sveltekit` (or `svelte`)
+
+Options:
+
+- `--framework` / `-f`
+- `--styling` / `-s` (`css` or `tailwind`)
+- `--tailwind` (shortcut for `--styling tailwind`)
+- `--dir` / `-d` output directory (default: current directory)
+- `--yes` / `-y` overwrite files without prompt
+- `--help` / `-h` show usage
+
+Tailwind mode:
+
+- Generates templates with Tailwind utility classes directly in `class`/`className`
+- Generates a minimal `vicket.css` (Tailwind import + small state helpers)
+- Requires Tailwind CSS to already be configured in the target app
+
+Server-side proxy (Next.js, Nuxt, SvelteKit):
+
+- API keys are kept server-side and never exposed to the browser
+- Generated code includes an API route handler that proxies requests to the Vicket API
+- Client components call the local proxy (`/api/vicket/...`) instead of the external API directly
+
+## Required env vars in generated app
+
+- `next`: `VICKET_API_URL`, `VICKET_API_KEY` (server-side only, never exposed to client)
+- `nuxt`: `VICKET_API_URL`, `VICKET_API_KEY` (server-side only, never exposed to client)
+- `sveltekit`: `VICKET_API_URL`, `VICKET_API_KEY` (server-side only, never exposed to client)
+
+Example URL value: `https://api.vicket.app/api/v1`

package/bin/create-vicket-support.js

@@ -0,0 +1,389 @@
+#!/usr/bin/env node
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { stdin } = require("node:process");
+
+const PKG_VERSION = require(
+  path.resolve(__dirname, "..", "package.json"),
+).version;
+
+const FRAMEWORK_ALIASES = {
+  next: "next",
+  nextjs: "next",
+  nuxt: "nuxt",
+  svelte: "sveltekit",
+  sveltekit: "sveltekit",
+};
+
+const FRAMEWORK_CHOICES = [
+  { value: "next", label: "Next.js (App Router)" },
+  { value: "nuxt", label: "Nuxt 4 (Vue)" },
+  { value: "sveltekit", label: "SvelteKit" },
+];
+
+const DEFAULT_FRAMEWORK = "next";
+const STYLING_ALIASES = {
+  css: "css",
+  tailwind: "tailwind",
+  tw: "tailwind",
+};
+const STYLING_CHOICES = [
+  { value: "css", label: "CSS file (default)" },
+  { value: "tailwind", label: "Tailwind CSS (inline utilities)" },
+];
+const DEFAULT_STYLING = "css";
+let clack = null;
+
+async function loadClack() {
+  if (clack) return clack;
+  const prompts = await import("@clack/prompts");
+  clack = prompts;
+  return prompts;
+}
+
+function printHelp() {
+  console.log(`
+Usage:
+  create-vicket-support [options]
+
+Options:
+  -f, --framework <name>   Framework: next | nuxt | sveltekit
+  -s, --styling <name>     Styling: css | tailwind (default: css)
+      --tailwind           Shortcut for --styling tailwind
+  -d, --dir <path>         Output directory (default: current directory)
+  -y, --yes                Overwrite existing files without prompt
+  -v, --version            Show version
+  -h, --help               Show help
+
+Examples:
+  npx @vicket/create-support --framework next
+  npx @vicket/create-support --framework next --styling tailwind
+  npx @vicket/create-support --framework nuxt --dir ./my-app
+  npx @vicket/create-support -f sveltekit -d . -y --tailwind
+`);
+}
+
+function parseArgs(argv) {
+  const options = {
+    framework: "",
+    styling: "",
+    dir: process.cwd(),
+    yes: false,
+    help: false,
+    version: false,
+  };
+
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    if (arg === "--version" || arg === "-v") {
+      options.version = true;
+      continue;
+    }
+    if (arg === "--help" || arg === "-h") {
+      options.help = true;
+      continue;
+    }
+    if (arg === "--framework" || arg === "-f") {
+      options.framework = argv[i + 1] || "";
+      i += 1;
+      continue;
+    }
+    if (arg.startsWith("--framework=")) {
+      options.framework = arg.split("=")[1] || "";
+      continue;
+    }
+    if (arg === "--styling" || arg === "-s") {
+      options.styling = argv[i + 1] || options.styling;
+      i += 1;
+      continue;
+    }
+    if (arg.startsWith("--styling=")) {
+      options.styling = arg.split("=")[1] || options.styling;
+      continue;
+    }
+    if (arg === "--tailwind") {
+      options.styling = "tailwind";
+      continue;
+    }
+    if (arg === "--dir" || arg === "-d") {
+      options.dir = argv[i + 1] || options.dir;
+      i += 1;
+      continue;
+    }
+    if (arg.startsWith("--dir=")) {
+      options.dir = arg.split("=")[1] || options.dir;
+      continue;
+    }
+    if (arg === "--yes" || arg === "-y") {
+      options.yes = true;
+      continue;
+    }
+  }
+
+  return options;
+}
+
+function normalizeFramework(input) {
+  return FRAMEWORK_ALIASES[(input || "").trim().toLowerCase()] || "";
+}
+
+function normalizeStyling(input) {
+  return STYLING_ALIASES[(input || "").trim().toLowerCase()] || "";
+}
+
+async function askFrameworkSelection() {
+  if (!stdin.isTTY) {
+    return "";
+  }
+
+  const p = await loadClack();
+  p.intro("Create Vicket Support");
+  const value = await p.select({
+    message: "Select a framework",
+    initialValue: DEFAULT_FRAMEWORK,
+    options: FRAMEWORK_CHOICES.map((choice) => ({
+      value: choice.value,
+      label: choice.label,
+    })),
+  });
+
+  if (p.isCancel(value)) {
+    p.cancel("Operation cancelled.");
+    return "";
+  }
+
+  return value;
+}
+
+async function askStylingSelection() {
+  if (!stdin.isTTY) {
+    return DEFAULT_STYLING;
+  }
+
+  const p = await loadClack();
+  const value = await p.select({
+    message: "Select a styling mode",
+    initialValue: DEFAULT_STYLING,
+    options: STYLING_CHOICES.map((choice) => ({
+      value: choice.value,
+      label: choice.label,
+    })),
+  });
+
+  if (p.isCancel(value)) {
+    p.cancel("Operation cancelled.");
+    return "";
+  }
+
+  return value;
+}
+
+function collectFiles(baseDir, currentDir = baseDir, acc = []) {
+  const entries = fs.readdirSync(currentDir, { withFileTypes: true });
+  for (const entry of entries) {
+    const absolute = path.join(currentDir, entry.name);
+    if (entry.isDirectory()) {
+      collectFiles(baseDir, absolute, acc);
+      continue;
+    }
+
+    const relative = path.relative(baseDir, absolute);
+    acc.push(relative);
+  }
+  return acc;
+}
+
+function ensureDirectory(filePath) {
+  const dir = path.dirname(filePath);
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+/**
+ * Detect whether a Next.js project uses the src/ directory layout.
+ * Returns true if src/app exists, false if app/ exists at root,
+ * or falls back to checking for a src/ directory.
+ */
+function detectNextSrcLayout(targetRoot) {
+  if (fs.existsSync(path.join(targetRoot, "src", "app"))) {
+    return true;
+  }
+  if (fs.existsSync(path.join(targetRoot, "app"))) {
+    return false;
+  }
+  if (fs.existsSync(path.join(targetRoot, "src"))) {
+    return true;
+  }
+  return false;
+}
+
+async function confirmOverwrite(existingFiles) {
+  if (!stdin.isTTY) {
+    return false;
+  }
+
+  const p = await loadClack();
+  p.log.warn("The following files already exist:");
+  for (const file of existingFiles) {
+    p.log.message(`- ${file}`);
+  }
+
+  const value = await p.confirm({
+    message: "Overwrite these files?",
+    initialValue: false,
+  });
+
+  if (p.isCancel(value)) {
+    p.cancel("Operation cancelled.");
+    return false;
+  }
+
+  return Boolean(value);
+}
+
+async function printPostInstall(framework, styling) {
+  const envLinesByFramework = {
+    next: [
+      "- VICKET_API_URL (https://api.vicket.app/api/v1) — server-side only",
+      "- VICKET_API_KEY (website API key) — server-side only, NEVER expose to client",
+    ],
+    nuxt: [
+      "- VICKET_API_URL (https://api.vicket.app/api/v1) — server-side only",
+      "- VICKET_API_KEY (website API key) — server-side only, NEVER expose to client",
+    ],
+    sveltekit: [
+      "- VICKET_API_URL (https://api.vicket.app/api/v1) — server-side only",
+      "- VICKET_API_KEY (website API key) — server-side only, NEVER expose to client",
+    ],
+  };
+  const envLines = envLinesByFramework[framework] || envLinesByFramework.next;
+
+  if (stdin.isTTY) {
+    const p = await loadClack();
+    p.outro("Scaffold complete.");
+    p.log.info("Set these environment variables in the target app:");
+    for (const line of envLines) {
+      p.log.message(line);
+    }
+
+    if (framework === "nuxt") {
+      p.log.info(
+        "Nuxt note: if you prefer global styles, add ~/assets/css/vicket.css to nuxt.config.ts > css. Files are in the app/ directory (Nuxt 4 convention).",
+      );
+    }
+    if (styling === "tailwind") {
+      p.log.info(
+        "Tailwind mode: ensure Tailwind CSS is configured in the target app.",
+      );
+    }
+    return;
+  }
+
+  console.log("\nScaffold complete.");
+  console.log("Set these environment variables in the target app:");
+  for (const line of envLines) {
+    console.log(line);
+  }
+  if (styling === "tailwind") {
+    console.log(
+      "Tailwind mode: ensure Tailwind CSS is configured in the target app.",
+    );
+  }
+}
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+  if (options.version) {
+    console.log(`@vicket/create-support v${PKG_VERSION}`);
+    process.exit(0);
+  }
+  if (options.help) {
+    printHelp();
+    process.exit(0);
+  }
+
+  let framework = normalizeFramework(options.framework);
+  const requestedStyling = (options.styling || "").trim();
+  if (requestedStyling && !normalizeStyling(requestedStyling)) {
+    console.error("Unsupported styling. Use --styling css|tailwind");
+    printHelp();
+    process.exit(1);
+  }
+
+  let styling = normalizeStyling(options.styling) || DEFAULT_STYLING;
+
+  if (!framework) {
+    framework = await askFrameworkSelection();
+  }
+
+  if (!framework) {
+    console.error(
+      "Missing or unsupported framework. Use --framework next|nuxt|sveltekit",
+    );
+    printHelp();
+    process.exit(1);
+  }
+
+  if (
+    !normalizeStyling(options.styling) &&
+    stdin.isTTY &&
+    !process.argv.includes("--tailwind")
+  ) {
+    const selectedStyling = await askStylingSelection();
+    if (!selectedStyling) {
+      console.log("Aborted. No files were written.");
+      process.exit(0);
+    }
+    styling = selectedStyling;
+  }
+
+  const packageRoot = path.resolve(__dirname, "..");
+  const templateDir =
+    styling === "tailwind" ? "templates-tailwind" : "templates";
+  const templateRoot = path.join(packageRoot, templateDir, framework);
+
+  if (!fs.existsSync(templateRoot)) {
+    console.error(`Template not found: ${templateDir}/${framework}`);
+    process.exit(1);
+  }
+
+  const targetRoot = path.resolve(options.dir);
+  const files = collectFiles(templateRoot);
+
+  const stripSrc =
+    framework === "next" && !detectNextSrcLayout(targetRoot);
+  const srcPrefix = "src" + path.sep;
+
+  function toDestRelative(relativePath) {
+    if (stripSrc && relativePath.startsWith(srcPrefix)) {
+      return relativePath.slice(srcPrefix.length);
+    }
+    return relativePath;
+  }
+
+  const existing = files
+    .map((f) => toDestRelative(f))
+    .filter((destPath) => fs.existsSync(path.join(targetRoot, destPath)));
+
+  if (existing.length > 0 && !options.yes) {
+    const shouldOverwrite = await confirmOverwrite(existing);
+    if (!shouldOverwrite) {
+      console.log("Aborted. No files were written.");
+      process.exit(0);
+    }
+  }
+
+  for (const relativePath of files) {
+    const from = path.join(templateRoot, relativePath);
+    const to = path.join(targetRoot, toDestRelative(relativePath));
+    ensureDirectory(to);
+    fs.copyFileSync(from, to);
+  }
+
+  await printPostInstall(framework, styling);
+}
+
+main().catch((error) => {
+  console.error(error);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vicket/create-support",
+  "version": "1.1.1",
+  "bin": {
+    "create-support": "./bin/create-vicket-support.js"
+  },
+  "files": [
+    "bin",
+    "templates",
+    "templates-tailwind",
+    "README.md"
+  ],
+  "type": "commonjs",
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.10.1"
+  }
+}

package/templates/next/src/app/api/vicket/[...path]/route.ts

@@ -0,0 +1,59 @@
+import { NextRequest, NextResponse } from "next/server";
+
+const VICKET_API_URL = (process.env.VICKET_API_URL || "").replace(/\/+$/, "");
+const VICKET_API_KEY = process.env.VICKET_API_KEY || "";
+
+async function proxy(
+  req: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> },
+) {
+  if (!VICKET_API_URL || !VICKET_API_KEY) {
+    return NextResponse.json(
+      { error: "Missing VICKET_API_URL or VICKET_API_KEY server environment variables." },
+      { status: 500 },
+    );
+  }
+
+  const { path } = await params;
+  const subpath = path.join("/");
+  const url = new URL(`${VICKET_API_URL}/public/support/${subpath}`);
+
+  // Forward query params
+  req.nextUrl.searchParams.forEach((value, key) => {
+    url.searchParams.set(key, value);
+  });
+
+  const headers: HeadersInit = { "X-Api-Key": VICKET_API_KEY };
+  const contentType = req.headers.get("content-type") || "";
+
+  let body: BodyInit | null = null;
+
+  if (req.method !== "GET" && req.method !== "HEAD") {
+    if (contentType.includes("multipart/form-data")) {
+      // Stream FormData as-is; let fetch set the boundary
+      body = await req.blob();
+      headers["Content-Type"] = contentType;
+    } else {
+      body = await req.text();
+      headers["Content-Type"] = contentType || "application/json";
+    }
+  }
+
+  const upstream = await fetch(url.toString(), {
+    method: req.method,
+    headers,
+    body,
+  });
+
+  const responseBody = await upstream.arrayBuffer();
+
+  return new NextResponse(responseBody, {
+    status: upstream.status,
+    headers: {
+      "Content-Type": upstream.headers.get("Content-Type") || "application/json",
+    },
+  });
+}
+
+export const GET = proxy;
+export const POST = proxy;