easyorders 0.1.0

package/README.md

@@ -0,0 +1,94 @@
+# Easy Orders CLI
+
+CLI tool for creating and developing [EasyOrders](https://www.easy-orders.net) storefront themes. Edit Liquid templates, CSS, and JavaScript in the `theme/` folder and preview changes on a live store instantly.
+
+Full theme documentation — Liquid variables, palette, sections, events:
+
+**https://themes-docs.easy-orders.net/docs/custom-themes/getting-started**
+
+## ⚠️ Important Notice
+
+The tunnel URL is tied to your current browser session. When you stop the dev server (tunnel) or close the theme editor, you **must close the browser entirely** to end the session. Otherwise the browser may continue trying to load the old tunnel URL, causing errors on subsequent runs.
+
+## Installation
+
+```bash
+npm install -g easy-orders
+```
+
+Or use directly with `npx`:
+
+```bash
+npx easy-orders
+```
+
+## Usage
+
+### Create a new theme project
+
+```bash
+npx easy-orders create-theme my-theme
+```
+
+This scaffolds a new directory `my-theme/` containing only the `theme/` folder and a minimal `package.json`. No server code is included — the server runs from the CLI package itself.
+
+### Start the dev server
+
+```bash
+cd my-theme
+npx easy-orders start
+```
+
+This will:
+
+1. Prompt you for your store subdomain (e.g. `sand` from `sand.myeasyorders.com`)
+2. Authenticate with the Easy Orders API
+3. Start a local Express server that serves your theme
+4. Open a Cloudflare tunnel so your store can load the theme in real-time
+
+### Interactive mode
+
+Running `npx easy-orders` without arguments shows an interactive menu where you can choose to create a theme or start the dev server.
+
+## Environment Variables
+
+Create a `.env` file in your theme project root (or export the variables) to customise the defaults:
+
+| Variable            | Description                                       | Default                       |
+| ------------------- | ------------------------------------------------- | ----------------------------- |
+| `PORT`              | Local server port                                 | `4000`                        |
+| `API_BASE_URL`      | Backend API base URL used for CLI token endpoints | `https://api.easy-orders.net` |
+| `FRONTEND_BASE_URL` | Frontend base URL used for the approval page      | `https://app.easy-orders.net` |
+| `STORE_DOMAIN`      | Domain used to build the store preview URL        | `myeasyorders.com`            |
+
+## Theme Project Structure
+
+After running `create-theme`, your project will look like:
+
+```
+my-theme/
+├── package.json
+├── .gitignore
+└── theme/
+    ├── config.json
+    ├── schema.json
+    ├── theme-data.json
+    ├── style.css
+    ├── script.js
+    └── sections/
+        ├── header.liquid
+        ├── footer.liquid
+        └── ...
+```
+
+You only need to edit files inside the `theme/` folder. The server code is handled by the CLI.
+
+## 🔑 Clearing Sessions & Auth
+
+If you want to delete any saved sessions or store authentication, simply delete the `.cli-tokens.json` file in your theme project root:
+
+```bash
+rm .cli-tokens.json
+```
+
+The next time you run the dev server, you will be prompted to authenticate again.

package/cli/bin/cli.ts

@@ -0,0 +1,240 @@
+#!/usr/bin/env tsx
+
+import "dotenv/config";
+import readline from "node:readline";
+import fs from "node:fs";
+import path from "node:path";
+import { spawn } from "node:child_process";
+import { fileURLToPath } from "node:url";
+import { getCliVersion } from "../server/api.js";
+// @ts-ignore
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const CLI_ROOT = path.resolve(__dirname, "..");
+
+const CYAN = "\x1b[36m";
+const GREEN = "\x1b[32m";
+const RED = "\x1b[31m";
+const DIM = "\x1b[2m";
+const BOLD = "\x1b[1m";
+const RESET = "\x1b[0m";
+const YELLOW = "\x1b[33m";
+
+// ── Helpers ─────────────────────────────────────────────────
+
+function ask(question: string): Promise<string> {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      resolve(answer.trim());
+    });
+  });
+}
+
+function copyDirSync(src: string, dest: string): void {
+  fs.mkdirSync(dest, { recursive: true });
+  for (const entry of fs.readdirSync(src, { withFileTypes: true })) {
+    const srcPath = path.join(src, entry.name);
+    const destPath = path.join(dest, entry.name);
+    if (entry.isDirectory()) {
+      copyDirSync(srcPath, destPath);
+    } else {
+      fs.copyFileSync(srcPath, destPath);
+    }
+  }
+}
+
+// ── Commands ────────────────────────────────────────────────
+
+async function createTheme(): Promise<void> {
+  let projectName = process.argv[3];
+
+  if (!projectName) {
+    projectName = await ask(`   ${BOLD}▸ Theme project name: ${RESET}`);
+  }
+
+  if (!projectName) {
+    console.error(`\n   ${RED}${BOLD}✖ Project name is required.${RESET}\n`);
+    process.exit(1);
+  }
+
+  const dest = path.resolve(process.cwd(), projectName);
+
+  if (fs.existsSync(dest)) {
+    console.error(
+      `\n   ${RED}${BOLD}✖ Directory "${projectName}" already exists.${RESET}\n`
+    );
+    process.exit(1);
+  }
+
+  console.log(
+    `\n   ${DIM}Creating theme project${RESET} ${BOLD}${projectName}${RESET}…`
+  );
+
+  // Create project directory
+  fs.mkdirSync(dest, { recursive: true });
+
+  // Copy template theme folder
+  const templateDir = path.join(CLI_ROOT, "template", "theme");
+  const themeDir = path.join(dest, "theme");
+  copyDirSync(templateDir, themeDir);
+
+  // Create a minimal package.json for the theme project
+  const pkg = {
+    name: projectName,
+    version: "0.1.0",
+    private: true,
+    scripts: {
+      dev: "easy-orders start",
+    },
+  };
+  fs.writeFileSync(
+    path.join(dest, "package.json"),
+    JSON.stringify(pkg, null, 2) + "\n",
+    "utf-8"
+  );
+
+  // Create .gitignore
+  fs.writeFileSync(
+    path.join(dest, ".gitignore"),
+    [
+      "node_modules",
+      ".tunnel-url",
+      ".tunnel-pid",
+      ".auth-ready",
+      ".cli-tokens.json",
+      ".env",
+    ].join("\n") + "\n",
+    "utf-8"
+  );
+
+  console.log(`   ${GREEN}${BOLD}✔${RESET} Theme project created at ${BOLD}${dest}${RESET}`);
+  console.log("");
+  console.log(`   ${DIM}Next steps:${RESET}`);
+  console.log(`     ${CYAN}cd ${projectName}${RESET}`);
+  console.log(`     ${CYAN}npx easy-orders start${RESET}`);
+  console.log("");
+}
+
+async function startDev(): Promise<void> {
+  // Resolve the theme directory from the current working directory
+  const cwd = process.cwd();
+  const themeDir = path.join(cwd, "theme");
+
+  if (!fs.existsSync(themeDir)) {
+    console.error(
+      `\n   ${RED}${BOLD}✖ No "theme" folder found in the current directory.${RESET}`
+    );
+    console.error(
+      `   ${DIM}Run ${CYAN}npx easy-orders create-theme <name>${DIM} first to create a project.${RESET}\n`
+    );
+    process.exit(1);
+  }
+
+  // The server files are bundled inside the CLI package
+  const serverDir = path.join(CLI_ROOT, "server");
+  const indexScript = path.join(serverDir, "index.ts");
+  const tunnelScript = path.join(serverDir, "tunnel.ts");
+
+  const cmd = `npx tsx "${tunnelScript}" & npx tsx "${indexScript}"`;
+
+  const child = spawn(cmd, {
+    stdio: "inherit",
+    cwd,
+    env: { ...process.env, THEME_DIR: themeDir },
+    shell: true,
+  });
+
+  child.on("exit", (code) => {
+    process.exit(code ?? 0);
+  });
+}
+
+function showMenu(): void {
+  console.log("");
+  console.log(`   ${CYAN}${BOLD}Easy Orders CLI${RESET}`);
+  console.log("");
+  console.log(`   ${BOLD}Usage:${RESET}`);
+  console.log(`     ${CYAN}npx easy-orders create-theme ${DIM}<name>${RESET}   Create a new theme project`);
+  console.log(`     ${CYAN}npx easy-orders start${RESET}                  Start the dev server`);
+  console.log("");
+}
+
+async function interactiveMenu(): Promise<void> {
+  console.log("");
+  console.log(`   ${CYAN}${BOLD}Easy Orders CLI${RESET}`);
+  console.log("");
+  console.log(`   ${BOLD}What would you like to do?${RESET}`);
+  console.log(`     ${BOLD}1)${RESET} Create a new theme`);
+  console.log(`     ${BOLD}2)${RESET} Start dev server`);
+  console.log("");
+
+  const choice = await ask(`   ${BOLD}▸ Choose (1/2): ${RESET}`);
+
+  switch (choice) {
+    case "1":
+      await createTheme();
+      break;
+    case "2":
+      await startDev();
+      break;
+    default:
+      console.error(`\n   ${RED}${BOLD}✖ Invalid choice.${RESET}\n`);
+      showMenu();
+      process.exit(1);
+  }
+}
+
+// ── Version check ───────────────────────────────────────────
+
+async function checkForUpdates(): Promise<void> {
+  const pkgPath = path.resolve(__dirname, "..", "..", "package.json");
+  const localVersion: string = JSON.parse(
+    fs.readFileSync(pkgPath, "utf-8")
+  ).version;
+
+  try {
+    const latestVersion = await getCliVersion();
+    if (latestVersion !== localVersion) {
+      console.log("");
+      console.log(
+        `   ${YELLOW}${BOLD}⚠  Update available!${RESET} ${DIM}${localVersion}${RESET} → ${GREEN}${BOLD}${latestVersion}${RESET}`
+      );
+      console.log(
+        `   ${DIM}Run${RESET} ${CYAN}npm install -g easy-orders@latest${RESET} ${DIM}to update.${RESET}`
+      );
+      console.log("");
+      process.exit(1);
+    }
+  } catch {
+    // If the version check fails (e.g. no network), skip silently
+  }
+}
+
+// ── Entry point ─────────────────────────────────────────────
+
+(async () => {
+  await checkForUpdates();
+
+  const command = process.argv[2];
+
+  switch (command) {
+    case "create-theme":
+      await createTheme();
+      break;
+    case "start":
+      await startDev();
+      break;
+    case "--help":
+    case "-h":
+      showMenu();
+      break;
+    default:
+      await interactiveMenu();
+      break;
+  }
+})();

package/cli/server/api.ts

@@ -0,0 +1,56 @@
+import axios, { AxiosInstance } from "axios";
+
+const API_BASE_URL =
+  process.env.API_BASE_URL || "https://api.easy-orders.net";
+
+interface GenerateTokenResponse {
+  expires_at: string;
+  store_id: string;
+  token: string;
+  token_id: string;
+}
+
+interface TokenStatusResponse {
+  approved: boolean;
+}
+
+function createClient(): AxiosInstance {
+  return axios.create({
+    baseURL: API_BASE_URL,
+    headers: { "Content-Type": "application/json" },
+    timeout: 10_000,
+  });
+}
+
+const client = createClient();
+
+export async function generateCliToken(
+  storeName: string
+): Promise<GenerateTokenResponse> {
+  const { data } = await client.post<GenerateTokenResponse>(
+    "/api/v1/themes/cli-token",
+    { store_name: storeName }
+  );
+  return data;
+}
+
+export async function checkTokenStatus(
+  tokenId: string
+): Promise<TokenStatusResponse> {
+  const { data } = await client.get<TokenStatusResponse>(
+    "/api/v1/themes/cli-token/status",
+    { params: { token_id: tokenId } }
+  );
+  return data;
+}
+
+interface CliVersionResponse {
+  version: string;
+}
+
+export async function getCliVersion(): Promise<string> {
+  const { data } = await client.get<CliVersionResponse>(
+    "/api/v1/themes/cli-version"
+  );
+  return data.version;
+}

package/cli/server/index.ts

@@ -0,0 +1,320 @@
+import "dotenv/config";
+import cors from "cors";
+import express from "express";
+import fs from "node:fs";
+import path from "node:path";
+import readline from "node:readline";
+import { generateCliToken, checkTokenStatus } from "./api.js";
+import { getToken, saveToken } from "./token-store.js";
+
+const CYAN = "\x1b[36m";
+const GREEN = "\x1b[32m";
+const RED = "\x1b[31m";
+const DIM = "\x1b[2m";
+const BOLD = "\x1b[1m";
+const RESET = "\x1b[0m";
+const UNDERLINE = "\x1b[4m";
+const YELLOW = "\x1b[33m";
+
+const FRONTEND_BASE_URL =
+  process.env.FRONTEND_BASE_URL || "https://app.easy-orders.net";
+const STORE_DOMAIN =
+  process.env.STORE_DOMAIN || "myeasyorders.com";
+
+const app = express();
+app.use(cors());
+const port = Number(process.env.PORT) || 4000;
+const URL_FILE = path.resolve(process.cwd(), ".tunnel-url");
+const THEME_DIR = process.env.THEME_DIR || path.resolve(process.cwd(), "theme");
+const SECTIONS_DIR = path.join(THEME_DIR, "sections");
+const AUTH_READY_FILE = path.resolve(process.cwd(), ".auth-ready");
+
+app.use(express.json());
+
+function getBaseUrl(req: express.Request): string {
+  try {
+    const tunnelUrl = fs.readFileSync(URL_FILE, "utf-8").trim();
+    if (tunnelUrl) return tunnelUrl;
+  } catch {}
+  return `${req.protocol}://${req.get("host")}`;
+}
+
+function toSnakeCase(filename: string): string {
+  return filename.replace(/\.liquid$/, "").replace(/-/g, "_");
+}
+
+function readJsonFile(filepath: string): unknown {
+  return JSON.parse(fs.readFileSync(filepath, "utf-8"));
+}
+
+function buildSections(): { key: string; template: string }[] {
+  const files = fs
+    .readdirSync(SECTIONS_DIR)
+    .filter((f) => f.endsWith(".liquid"));
+  return files.map((file) => ({
+    key: toSnakeCase(file),
+    template: fs.readFileSync(path.join(SECTIONS_DIR, file), "utf-8"),
+  }));
+}
+
+function extractSubdomain(input: string): string {
+  const trimmed = input.trim();
+  try {
+    const url = new URL(trimmed);
+    const hostname = url.hostname;
+    const parts = hostname.split(".");
+    if (parts.length >= 2) {
+      return parts[0];
+    }
+  } catch {
+    // Not a URL – continue
+  }
+  if (trimmed.includes(".")) {
+    return trimmed.split(".")[0];
+  }
+  return trimmed;
+}
+
+function promptStoreName(): Promise<string> {
+  const args = process.argv.slice(2);
+  const idx = args.indexOf("--store_name");
+  if (idx !== -1 && idx + 1 < args.length) {
+    return Promise.resolve(args[idx + 1]);
+  }
+  if (process.env.STORE_NAME) {
+    return Promise.resolve(process.env.STORE_NAME);
+  }
+
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    console.log(
+      `\n   ${CYAN}${BOLD}Enter your store subdomain${RESET} ${DIM}(e.g. "sand" from sand.${STORE_DOMAIN})${RESET}`
+    );
+    rl.question(`   ${BOLD}▸ Subdomain: ${RESET}`, (answer) => {
+      rl.close();
+      const storeName = extractSubdomain(answer);
+      if (!storeName) {
+        console.error(
+          `\n   ${RED}${BOLD}✖ Invalid input.${RESET} Please provide a valid subdomain.\n`
+        );
+        process.exit(1);
+      }
+      console.log(
+        `   ${GREEN}${BOLD}✔${RESET} ${DIM}Using store:${RESET} ${BOLD}${storeName}${RESET}`
+      );
+      resolve(storeName);
+    });
+  });
+}
+
+function openBrowser(url: string): void {
+  const { exec } = require("node:child_process");
+  const cmd =
+    process.platform === "darwin"
+      ? "open"
+      : process.platform === "win32"
+        ? "start"
+        : "xdg-open";
+  exec(`${cmd} "${url}"`);
+}
+
+function waitForApproval(tokenId: string): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const frames = ["⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"];
+    let i = 0;
+    const spin = setInterval(() => {
+      process.stdout.write(
+        `\r   ${YELLOW}${frames[i++ % frames.length]}${RESET} ${DIM}Waiting for approval…${RESET}`
+      );
+    }, 100);
+
+    const poll = async () => {
+      try {
+        const { approved } = await checkTokenStatus(tokenId);
+        if (approved) {
+          clearInterval(spin);
+          process.stdout.write("\r\x1b[K");
+          return resolve();
+        }
+        setTimeout(poll, 3000);
+      } catch (err: unknown) {
+        clearInterval(spin);
+        process.stdout.write("\r\x1b[K");
+        reject(err);
+      }
+    };
+    poll();
+  });
+}
+
+async function authenticate(storeName: string): Promise<string> {
+  const existing = getToken(storeName);
+  if (existing) {
+    console.log(
+      `\n   ${DIM}Found saved token for${RESET} ${BOLD}${storeName}${RESET}${DIM}, checking validity…${RESET}`
+    );
+    try {
+      const { approved } = await checkTokenStatus(existing.token_id);
+      if (approved) {
+        console.log(`   ${GREEN}${BOLD}✔ Existing token is still valid!${RESET}\n`);
+        return existing.token;
+      }
+      console.log(
+        `   ${YELLOW}${BOLD}⚠ Saved token is no longer valid. Generating a new one…${RESET}\n`
+      );
+    } catch {
+      console.log(
+        `   ${YELLOW}${BOLD}⚠ Could not verify saved token. Generating a new one…${RESET}\n`
+      );
+    }
+  }
+
+  console.log(
+    `\n   ${DIM}Generating CLI token for store${RESET} ${BOLD}${storeName}${RESET}…`
+  );
+
+  let tokenData;
+  try {
+    tokenData = await generateCliToken(storeName);
+  } catch (err: unknown) {
+    const message =
+      err instanceof Error ? err.message : String(err);
+    console.error(
+      `\n   ${RED}${BOLD}✖ Failed to generate CLI token:${RESET} ${message}\n`
+    );
+    process.exit(1);
+  }
+
+  const { store_id, token_id, token, expires_at } = tokenData;
+
+  const approveUrl = `${FRONTEND_BASE_URL}/#/approve-cli-token?store_id=${store_id}&token_id=${token_id}`;
+
+  console.log(
+    `\n   ${YELLOW}${BOLD}⟶  Please approve the token in your browser:${RESET}`
+  );
+  console.log(`   ${CYAN}${UNDERLINE}${approveUrl}${RESET}\n`);
+
+  openBrowser(approveUrl);
+
+  try {
+    await waitForApproval(token_id);
+  } catch (err: unknown) {
+    const message =
+      err instanceof Error ? err.message : String(err);
+    console.error(
+      `\n   ${RED}${BOLD}✖ Token approval check failed:${RESET} ${message}\n`
+    );
+    process.exit(1);
+  }
+
+  console.log(`   ${GREEN}${BOLD}✔ Token approved!${RESET}\n`);
+
+  saveToken({
+    store_name: storeName,
+    store_id,
+    token_id,
+    token,
+    expires_at,
+  });
+
+  return token;
+}
+
+// ── Express routes ──────────────────────────────────────────
+
+app.get("/health", (_req, res) => {
+  res.json({ ok: true });
+});
+
+app.get("/style.css", (_req, res) => {
+  const cssPath = path.join(THEME_DIR, "style.css");
+  try {
+    const css = fs.readFileSync(cssPath, "utf-8");
+    res.type("text/css").send(css);
+  } catch {
+    res.status(404).type("text/css").send("/* style.css not found */");
+  }
+});
+
+app.get("/script.js", (_req, res) => {
+  const jsPath = path.join(THEME_DIR, "script.js");
+  try {
+    const js = fs.readFileSync(jsPath, "utf-8");
+    res.type("application/javascript").send(js);
+  } catch {
+    res
+      .status(404)
+      .type("application/javascript")
+      .send("// script.js not found");
+  }
+});
+
+app.get("/", (_req, res) => {
+  res.json({ version: "1.0.0" });
+});
+
+app.get("/theme", (req, res) => {
+  const baseUrl = getBaseUrl(req);
+
+  res.json({
+    sections: buildSections(),
+    theme_data: readJsonFile(path.join(THEME_DIR, "theme-data.json")),
+    config: readJsonFile(path.join(THEME_DIR, "config.json")),
+    style: `${baseUrl}/style.css`,
+    script: `${baseUrl}/script.js`,
+  });
+});
+
+// ── Main ────────────────────────────────────────────────────
+
+function signalAuthReady(storeName: string, code: string): void {
+  const data = JSON.stringify({ store_name: storeName, code });
+  fs.writeFileSync(AUTH_READY_FILE, data, "utf-8");
+}
+
+function cleanupAuthReady(): void {
+  try {
+    fs.unlinkSync(AUTH_READY_FILE);
+  } catch {}
+}
+
+async function main() {
+  cleanupAuthReady();
+
+  const storeName = await promptStoreName();
+  const code = await authenticate(storeName);
+
+  signalAuthReady(storeName, code);
+
+  app.listen(port, () => {
+    console.log("");
+    console.log(`   ${CYAN}${BOLD}Theme Builder${RESET}`);
+    console.log(`   ${DIM}Server listening on${RESET} http://localhost:${port}`);
+
+    try {
+      const tunnelUrl = fs.readFileSync(URL_FILE, "utf-8").trim();
+      if (tunnelUrl) {
+        const themeUrl = `${tunnelUrl}/theme`;
+        const storeUrl = `https://${storeName}.${STORE_DOMAIN}?load_theme=${encodeURIComponent(themeUrl)}&code=${code}`;
+
+        console.log(
+          `   ${GREEN}${BOLD}✔${RESET} ${DIM}Tunnel:${RESET}      ${CYAN}${UNDERLINE}${tunnelUrl}${RESET}`
+        );
+        console.log(
+          `   ${GREEN}${BOLD}✔${RESET} ${DIM}Open your store:${RESET}      ${CYAN}${UNDERLINE}${storeUrl}${RESET}`
+        );
+      }
+    } catch {}
+
+    console.log("");
+  });
+}
+
+process.once("SIGINT", () => cleanupAuthReady());
+process.once("SIGTERM", () => cleanupAuthReady());
+
+main();