@reshotdev/screenshot 0.0.1-beta.0

package/src/commands/pull.js

@@ -0,0 +1,303 @@
+// pull.js - Pull asset map from Reshot platform
+// Generates JSON, TypeScript, or CSV files for consumption in build pipelines
+const chalk = require("chalk");
+const fs = require("fs-extra");
+const path = require("path");
+const config = require("../lib/config");
+const apiClient = require("../lib/api-client");
+
+/**
+ * Convert a string to camelCase for TypeScript keys
+ */
+function toCamelCase(str) {
+  return str
+    .toLowerCase()
+    .replace(/[^a-zA-Z0-9]+(.)/g, (_, chr) => chr.toUpperCase())
+    .replace(/^[A-Z]/, (chr) => chr.toLowerCase());
+}
+
+/**
+ * Generate TypeScript code from the assets object
+ * This provides type safety - if a visual is deleted, the build will fail
+ */
+function generateTypeScript(assets, includeMetadata = false) {
+  const lines = [
+    "// GENERATED BY RESHOT - DO NOT EDIT",
+    "// Run 'npx reshot pull' to regenerate this file",
+    "",
+  ];
+
+  if (includeMetadata) {
+    // Full export with all metadata (src, width, height, type, alt)
+    lines.push("export const ReshotVisuals = {");
+    
+    for (const [group, visuals] of Object.entries(assets)) {
+      lines.push(`  ${group}: {`);
+      
+      for (const [visualKey, variants] of Object.entries(visuals)) {
+        lines.push(`    ${visualKey}: {`);
+        
+        for (const [variant, asset] of Object.entries(variants)) {
+          lines.push(`      ${variant}: {`);
+          lines.push(`        src: "${asset.src}",`);
+          lines.push(`        type: "${asset.type}",`);
+          if (asset.width) lines.push(`        width: ${asset.width},`);
+          if (asset.height) lines.push(`        height: ${asset.height},`);
+          lines.push(`        alt: "${asset.alt.replace(/"/g, '\\"')}",`);
+          if (asset.poster) lines.push(`        poster: "${asset.poster}",`);
+          lines.push(`      },`);
+        }
+        
+        lines.push(`    },`);
+      }
+      
+      lines.push(`  },`);
+    }
+    
+    lines.push("} as const;");
+    lines.push("");
+    lines.push("export type ReshotVisualKey = keyof typeof ReshotVisuals;");
+  } else {
+    // Simplified export - just URLs for easy access
+    lines.push("export const ReshotVisuals = {");
+    
+    for (const [group, visuals] of Object.entries(assets)) {
+      lines.push(`  ${group}: {`);
+      
+      for (const [visualKey, variants] of Object.entries(visuals)) {
+        // If there's only a default variant, flatten it
+        if (Object.keys(variants).length === 1 && variants.default) {
+          lines.push(`    ${visualKey}: "${variants.default.src}",`);
+        } else {
+          lines.push(`    ${visualKey}: {`);
+          for (const [variant, asset] of Object.entries(variants)) {
+            lines.push(`      ${variant}: "${asset.src}",`);
+          }
+          lines.push(`    },`);
+        }
+      }
+      
+      lines.push(`  },`);
+    }
+    
+    lines.push("} as const;");
+    lines.push("");
+    lines.push("export type ReshotVisualKey = keyof typeof ReshotVisuals;");
+  }
+
+  return lines.join("\n");
+}
+
+/**
+ * Main pull command
+ * @param {Object} options - Command options
+ * @param {string} options.format - Output format: 'json', 'ts', 'csv'
+ * @param {string} options.output - Output file path
+ * @param {boolean} options.full - Include full metadata (for ts format)
+ * @param {string} options.status - Filter by status: 'approved', 'pending', 'all'
+ */
+async function pullCommand(options = {}) {
+  const {
+    format = "json",
+    output = null,
+    full = false,
+    status = "approved",
+  } = options;
+
+  console.log(chalk.blue("⬇ Pulling asset map from Reshot...\n"));
+
+  // Load project configuration
+  let projectConfig;
+  try {
+    projectConfig = config.readConfig();
+  } catch (e) {
+    console.error(
+      chalk.red("Error: No docsync.config.json found. Run 'reshot init' first.")
+    );
+    process.exit(1);
+  }
+
+  const projectId = projectConfig._metadata?.projectId || projectConfig.projectId;
+  if (!projectId) {
+    console.error(
+      chalk.red("Error: No projectId found in docsync.config.json")
+    );
+    process.exit(1);
+  }
+
+  // Check authentication
+  let settings;
+  try {
+    settings = config.readSettings();
+  } catch (e) {
+    console.error(
+      chalk.red("Error: Not authenticated. Run 'reshot auth' first.")
+    );
+    process.exit(1);
+  }
+  if (!settings?.apiKey) {
+    console.error(
+      chalk.red("Error: Not authenticated. Run 'reshot auth' first.")
+    );
+    process.exit(1);
+  }
+
+  try {
+    // Fetch the asset map from the API
+    console.log(chalk.gray(`  Fetching assets for project: ${projectId}`));
+    console.log(chalk.gray(`  Status filter: ${status}`));
+
+    const response = await apiClient.exportVisuals(projectId, {
+      format: "json", // Always fetch JSON, we'll transform locally
+      status,
+    });
+
+    if (!response || !response.assets) {
+      console.error(chalk.red("Error: Invalid response from API"));
+      process.exit(1);
+    }
+
+    const { meta, assets } = response;
+    const assetCount = Object.values(assets).reduce(
+      (count, group) => count + Object.keys(group).length,
+      0
+    );
+
+    console.log(chalk.green(`  ✓ Fetched ${assetCount} visuals\n`));
+
+    // Determine output path
+    let outputPath = output;
+    if (!outputPath) {
+      // Default paths based on format
+      const defaultPaths = {
+        json: "src/data/reshot-assets.json",
+        ts: "src/data/visuals.ts",
+        csv: "reshot-assets.csv",
+      };
+      outputPath = defaultPaths[format] || "reshot-assets.json";
+    }
+
+    // Ensure the output directory exists
+    const outputDir = path.dirname(path.resolve(outputPath));
+    await fs.ensureDir(outputDir);
+
+    // Generate output based on format
+    let content;
+    let contentType;
+
+    switch (format) {
+      case "ts":
+        content = generateTypeScript(assets, full);
+        contentType = "TypeScript";
+        break;
+
+      case "csv":
+        // Generate CSV format
+        const headers = ["Key", "Group", "Name", "Context", "Type", "Unbreakable_URL", "Width", "Height"];
+        const rows = [headers.join(",")];
+        
+        for (const [group, visuals] of Object.entries(assets)) {
+          for (const [visualKey, variants] of Object.entries(visuals)) {
+            for (const [variant, asset] of Object.entries(variants)) {
+              const type = asset.type.split("/")[0]; // 'image' or 'video'
+              rows.push(
+                [
+                  `${group}/${visualKey}`,
+                  group,
+                  visualKey,
+                  variant,
+                  type,
+                  asset.src,
+                  asset.width || "",
+                  asset.height || "",
+                ].join(",")
+              );
+            }
+          }
+        }
+        
+        content = rows.join("\n");
+        contentType = "CSV";
+        break;
+
+      case "json":
+      default:
+        content = JSON.stringify({ meta, assets }, null, 2);
+        contentType = "JSON";
+        break;
+    }
+
+    // Write the output file
+    await fs.writeFile(path.resolve(outputPath), content, "utf-8");
+
+    console.log(chalk.green(`✓ Generated ${contentType} file: ${outputPath}`));
+    console.log(chalk.gray(`  ${assetCount} visuals exported\n`));
+
+    // Show format-specific usage instructions
+    if (format === "ts") {
+      console.log(chalk.blue("━━━ TypeScript Usage ━━━\n"));
+      console.log(chalk.white("Import in your React/Next.js component:\n"));
+      console.log(chalk.cyan('  import { ReshotVisuals } from "./visuals";\n'));
+      console.log(chalk.white("Use with full autocomplete support:\n"));
+      console.log(chalk.cyan("  // Single context (flattened)"));
+      console.log(chalk.cyan("  <img src={ReshotVisuals.dashboard.mainView} />\n"));
+      console.log(chalk.cyan("  // Multiple contexts (dark mode, locales)"));
+      console.log(chalk.cyan("  <img src={ReshotVisuals.dashboard.mainView.default} />"));
+      console.log(chalk.cyan("  <img src={ReshotVisuals.dashboard.mainView.dark} />\n"));
+      if (!full) {
+        console.log(chalk.gray("  Tip: Use --full flag to include width, height, and alt text\n"));
+      }
+    } else if (format === "json") {
+      console.log(chalk.blue("━━━ JSON Usage ━━━\n"));
+      console.log(chalk.white("Import in JavaScript/TypeScript:\n"));
+      console.log(chalk.cyan('  import assets from "./reshot-assets.json";\n'));
+      console.log(chalk.white("Access assets with dot notation:\n"));
+      console.log(chalk.cyan("  <img"));
+      console.log(chalk.cyan("    src={assets.assets.dashboard.mainView.default.src}"));
+      console.log(chalk.cyan("    width={assets.assets.dashboard.mainView.default.width}"));
+      console.log(chalk.cyan("    height={assets.assets.dashboard.mainView.default.height}"));
+      console.log(chalk.cyan("    alt={assets.assets.dashboard.mainView.default.alt}"));
+      console.log(chalk.cyan("  />\n"));
+    } else if (format === "csv") {
+      console.log(chalk.blue("━━━ CSV Usage ━━━\n"));
+      console.log(chalk.white("Import into your CMS:\n"));
+      console.log(chalk.gray("  1. Open Contentful / Webflow / WordPress"));
+      console.log(chalk.gray("  2. Navigate to bulk import/media settings"));
+      console.log(chalk.gray(`  3. Upload ${outputPath}`));
+      console.log(chalk.gray("  4. Map columns to your asset fields\n"));
+      console.log(chalk.white("CSV Columns:\n"));
+      console.log(chalk.gray("  • Key           - Unique asset identifier"));
+      console.log(chalk.gray("  • Group         - Scenario/folder grouping"));
+      console.log(chalk.gray("  • Name          - Human-readable name"));
+      console.log(chalk.gray("  • Context       - Variant (default, dark, fr-FR)"));
+      console.log(chalk.gray("  • Type          - image or video"));
+      console.log(chalk.gray("  • Unbreakable_URL - CDN URL (never changes)"));
+      console.log(chalk.gray("  • Width/Height  - Dimensions in pixels\n"));
+    }
+
+    // CI/CD integration tip
+    console.log(chalk.blue("━━━ CI/CD Integration ━━━\n"));
+    console.log(chalk.white("Add to your build pipeline:\n"));
+    console.log(chalk.cyan("  # package.json"));
+    console.log(chalk.cyan('  "scripts": {'));
+    console.log(chalk.cyan(`    "prebuild": "npx reshot pull --format=${format}${output ? ` --output=${output}` : ''}"`));
+    console.log(chalk.cyan('  }\n'));
+    console.log(chalk.gray("  This ensures your build always uses the latest approved visuals."));
+    console.log(chalk.gray("  If a visual is deleted, your build will fail (preventing broken images).\n"));
+
+  } catch (error) {
+    if (config.isAuthError(error)) {
+      console.error(
+        chalk.red("Error: Authentication failed. Run 'reshot auth' to re-authenticate.")
+      );
+    } else {
+      console.error(chalk.red(`Error: ${error.message}`));
+      if (process.env.RESHOT_DEBUG) {
+        console.error(chalk.gray(error.stack));
+      }
+    }
+    process.exit(1);
+  }
+}
+
+module.exports = pullCommand;

package/src/commands/record.js

@@ -0,0 +1,94 @@
+// record.js - Interactive scenario recording via CDP
+const chalk = require('chalk');
+const { connectToActivePage } = require('../lib/record-cdp');
+const { setupBrowserActionListener, updateBrowserMode } = require('../lib/record-browser-injection');
+const { setupTerminalHotkeys, runEventLoop } = require('../lib/record-terminal');
+const { startCaptureFlow } = require('../lib/record-screenshot');
+const { startClipRecording } = require('../lib/record-clip');
+const { showVisualSelectionMenu, finalizeScenarioAndWriteConfig } = require('../lib/record-config');
+
+/**
+ * Main record command
+ * @param {string|undefined} title - Optional title for the visual (e.g., "Admin Dashboard")
+ */
+async function recordCommand(title) {
+  console.log(chalk.cyan('🎬 Starting interactive recording session...\n'));
+  
+  let cleanup = null;
+  let browser = null;
+  
+  try {
+    // Step 1: Connect to browser via CDP
+    const { browser: connectedBrowser, page } = await connectToActivePage();
+    browser = connectedBrowser;
+    
+    // Step 2: Visual selection and session initialization
+    const { visualKey, existingScenario } = await showVisualSelectionMenu(page, title);
+    
+    const existingScenarioSnapshot = existingScenario
+      ? JSON.parse(JSON.stringify(existingScenario))
+      : null;
+
+    const sessionState = {
+      visualKey,
+      capturedSteps: [],
+      existingScenario: existingScenarioSnapshot,
+      savedStepCount: 0,
+      mode: 'normal',
+      phase: 'idle',
+      pendingCapture: null,
+      quit: false,
+      saveOnQuit: true,
+      clipEvents: null,
+      recordingStart: null,
+      stopClipRecording: false,
+      onChange: null,
+      onElementSelected: null
+    };
+    
+    console.log(chalk.green(`\n✔ Visual: ${visualKey}\n`));
+    
+    // Step 3: Inject browser action listener
+    await setupBrowserActionListener(page, sessionState);
+    
+    // Step 4: Set up terminal hotkeys
+    cleanup = setupTerminalHotkeys(sessionState, async () => {
+      // Capture flow callback
+      try {
+        if (sessionState.mode === 'normal') {
+          await startCaptureFlow(sessionState, page);
+        }
+      } catch (error) {
+        console.error(chalk.red('Capture error:'), error.message);
+      }
+    });
+    
+    // Step 5: Run main event loop
+    await runEventLoop(sessionState);
+    
+    // Step 6: Finalize and save config
+    if (cleanup) cleanup();
+    
+    await finalizeScenarioAndWriteConfig(sessionState, page);
+    sessionState.phase = 'finished';
+    
+    // Close browser connection
+    await browser.close();
+    
+    console.log(chalk.cyan('👋 Recording session ended.\n'));
+    
+  } catch (error) {
+    if (cleanup) cleanup();
+    if (browser) {
+      try {
+        await browser.close();
+      } catch (e) {
+        // Ignore cleanup errors
+      }
+    }
+    throw error;
+  }
+}
+
+module.exports = recordCommand;
+