@vicket/create-support 0.1.0

package/README.md

@@ -0,0 +1,53 @@
+# @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`
+- `react` (Vite / client router)
+- `vue` (Vue 3 Vite / client router)
+- `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 `vicket.css` using Tailwind directives and `@apply`
+- Requires Tailwind CSS to already be configured in the target app
+
+Direct API mode:
+
+- All templates call Vicket public endpoints directly from the browser
+
+## Required env vars in generated app
+
+- `next`: `NEXT_PUBLIC_VICKET_API_URL`, `NEXT_PUBLIC_VICKET_API_KEY`
+- `nuxt`: `NUXT_PUBLIC_VICKET_API_URL`, `NUXT_PUBLIC_VICKET_API_KEY`
+- `sveltekit`: `PUBLIC_VICKET_API_URL`, `PUBLIC_VICKET_API_KEY`
+- `react`: `VITE_VICKET_API_URL`, `VITE_VICKET_API_KEY`
+- `vue`: `VITE_VICKET_API_URL`, `VITE_VICKET_API_KEY`
+
+Example URL value: `https://api.vicket.io/api/v1`

package/bin/create-vicket-support.js

@@ -0,0 +1,374 @@
+#!/usr/bin/env node
+
+const fs = require("node:fs");
+const path = require("node:path");
+const { stdin } = require("node:process");
+
+const FRAMEWORK_ALIASES = {
+  next: "next",
+  nextjs: "next",
+  nuxt: "nuxt",
+  react: "react",
+  reactjs: "react",
+  vue: "vue",
+  vuejs: "vue",
+  svelte: "sveltekit",
+  sveltekit: "sveltekit",
+};
+
+const FRAMEWORK_CHOICES = [
+  { value: "next", label: "Next.js (App Router)" },
+  { value: "nuxt", label: "Nuxt 3 (Vue)" },
+  { value: "react", label: "React (Vite / client router)" },
+  { value: "vue", label: "Vue 3 (Vite / client router)" },
+  { 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 (@apply)" },
+];
+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 | react | vue | 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
+  -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,
+  };
+
+  for (let i = 0; i < argv.length; i += 1) {
+    const arg = argv[i];
+    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 });
+}
+
+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: [
+      "- NEXT_PUBLIC_VICKET_API_URL (example: https://api.vicket.io/api/v1)",
+      "- NEXT_PUBLIC_VICKET_API_KEY (website API key)",
+    ],
+    nuxt: [
+      "- NUXT_PUBLIC_VICKET_API_URL (example: https://api.vicket.io/api/v1)",
+      "- NUXT_PUBLIC_VICKET_API_KEY (website API key)",
+    ],
+    sveltekit: [
+      "- PUBLIC_VICKET_API_URL (example: https://api.vicket.io/api/v1)",
+      "- PUBLIC_VICKET_API_KEY (website API key)",
+    ],
+    react: [
+      "- VITE_VICKET_API_URL (example: https://api.vicket.io/api/v1)",
+      "- VITE_VICKET_API_KEY (website API key)",
+    ],
+    vue: [
+      "- VITE_VICKET_API_URL (example: https://api.vicket.io/api/v1)",
+      "- VITE_VICKET_API_KEY (website API key)",
+    ],
+  };
+  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.",
+      );
+    }
+    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.");
+  }
+}
+
+function mergeTemplateRoots(templateRoots) {
+  const mapping = new Map();
+
+  for (const templateRoot of templateRoots) {
+    const files = collectFiles(templateRoot);
+    for (const relativePath of files) {
+      mapping.set(relativePath, path.join(templateRoot, relativePath));
+    }
+  }
+
+  return mapping;
+}
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+  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|react|vue|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 baseTemplateRoot = path.join(packageRoot, "templates", framework);
+  if (!fs.existsSync(baseTemplateRoot)) {
+    console.error(`Template not found for framework: ${framework}`);
+    process.exit(1);
+  }
+
+  const templateRoots = [baseTemplateRoot];
+
+  if (styling === "tailwind") {
+    const tailwindOverlayRoot = path.join(packageRoot, "templates-tailwind", framework);
+    if (!fs.existsSync(tailwindOverlayRoot)) {
+      console.error(`Tailwind template overlay not found for framework: ${framework}`);
+      process.exit(1);
+    }
+    templateRoots.push(tailwindOverlayRoot);
+  }
+
+  const targetRoot = path.resolve(options.dir);
+  const filesMap = mergeTemplateRoots(templateRoots);
+  const files = Array.from(filesMap.keys());
+  const existing = files.filter((relativePath) =>
+    fs.existsSync(path.join(targetRoot, relativePath)),
+  );
+
+  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 = filesMap.get(relativePath);
+    if (!from) continue;
+    const to = path.join(targetRoot, 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,13 @@
+{
+  "name": "@vicket/create-support",
+  "version": "0.1.0",
+  "description": "Scaffold white-label support pages (/support and /ticket) for Next.js, Nuxt, and SvelteKit.",
+  "bin": {
+    "create-vicket-support": "./bin/create-vicket-support.js"
+  },
+  "type": "commonjs",
+  "license": "MIT",
+  "dependencies": {
+    "@clack/prompts": "^0.10.1"
+  }
+}