shipscreens 0.1.0

package/cli/commands/build.js

@@ -0,0 +1,347 @@
+import fs from 'node:fs/promises';
+import os from 'node:os';
+import path from 'node:path';
+import AdmZip from 'adm-zip';
+import { runValidate } from './validate.js';
+import { loadShipScreensConfig } from '../loadConfig.js';
+import { buildSnapshotFromConfig } from '../snapshotFromConfig.js';
+import { startRendererServer } from '../rendererServer.js';
+import { getPackageRoot } from '../packageRoot.js';
+import { writeFastlaneZip } from '../fastlaneZip.js';
+import { resolveOutRoot, resolveOutputPath, resolveZipOutPath } from '../outputPaths.js';
+import { runExportFramefile } from './exportFramefile.js';
+import {
+  cleanBuildOutputs,
+  formatScreenshotIndex,
+  getScreenshotIndexWidth,
+  materializeOutputsFromExport,
+} from '../buildOutputs.js';
+
+function compareStrings(a, b) {
+  if (a === b) return 0;
+  return a < b ? -1 : 1;
+}
+
+async function ensureDir(dirPath) {
+  await fs.mkdir(dirPath, { recursive: true });
+}
+
+function getAndroidBucket(device) {
+  return device.androidBucket || 'phoneScreenshots';
+}
+
+function groupAndroidDevicesByBucket(devices) {
+  const map = new Map();
+  devices.forEach((device) => {
+    const bucket = getAndroidBucket(device);
+    const existing = map.get(bucket);
+    if (existing) {
+      throw new Error(
+        `Multiple Android devices map to the same Google Play bucket (${bucket}): ${existing.id}, ${device.id}\n` +
+          `Each bucket represents a single screenshot set on Google Play (writing both would overwrite / conflict).\n` +
+          `Set only one Android device per bucket, or set devices[].androidBucket explicitly.`
+      );
+    }
+    map.set(bucket, device);
+  });
+  return map;
+}
+
+function toDeviceSlug(deviceId) {
+  return String(deviceId).toLowerCase();
+}
+
+async function extractZip(zipPath, extractDir) {
+  await ensureDir(extractDir);
+  const zip = new AdmZip(zipPath);
+  zip.extractAllTo(extractDir, true);
+}
+
+export async function runBuild({
+  configPath,
+  format = 'dir',
+  mode = 'rendered',
+  outDir,
+  iosDir,
+  androidDir,
+  zipOut,
+  stringsEncoding,
+  framefileStrategy,
+  clean = false,
+  cliAuthToken,
+} = {}) {
+  await runValidate({ configPath });
+  const { config, configDir } = await loadShipScreensConfig(configPath);
+  const outRoot = resolveOutRoot({ configDir, outDir });
+  if (!process.env.VITE_API_ENDPOINT) {
+    process.env.VITE_API_ENDPOINT = process.env.SHIPSCREENS_API_ENDPOINT || 'https://api.shipscreens.com';
+  }
+
+  const rawMode = String(mode || 'rendered')
+    .trim()
+    .toLowerCase();
+  const buildMode = rawMode === 'shipscreens' ? 'rendered' : rawMode || 'rendered';
+  if (!['rendered', 'raw', 'frameit'].includes(buildMode)) {
+    throw new Error(`Unknown build mode: ${buildMode} (expected: shipscreens|rendered|raw|frameit)`);
+  }
+
+  const outputMode = 'locale';
+  const resolvedIosDir = resolveOutputPath({
+    outRoot,
+    value: iosDir || config.output?.directory,
+    fallback: 'fastlane/screenshots',
+  });
+  const resolvedAndroidDir = resolveOutputPath({
+    outRoot,
+    value: androidDir || config.output?.androidDirectory,
+    fallback: 'fastlane/metadata/android',
+  });
+
+  const devices = Array.isArray(config.devices) ? config.devices : [];
+  const iosDevices = devices.filter((d) => d.platform !== 'android');
+  const androidDevices = devices.filter((d) => d.platform === 'android');
+  const androidBuckets = groupAndroidDevicesByBucket(androidDevices);
+
+  const locales = (config.locales || []).map((l) => l.id).sort(compareStrings);
+  const slideCount = config.slides.length;
+  const width = getScreenshotIndexWidth(slideCount);
+
+  const sortedAndroidBuckets = [...androidBuckets.entries()]
+    .sort(([a], [b]) => compareStrings(a, b))
+    .map(([bucket, device]) => ({ bucket, device }));
+
+  if (buildMode === 'raw' || buildMode === 'frameit') {
+    if (!locales.length) {
+      throw new Error('No locales selected. Add at least one locale in shipscreens.config.yml');
+    }
+    if (!slideCount) {
+      throw new Error('No slides found. Add at least one slide in shipscreens.config.yml');
+    }
+
+    if (clean) {
+      await cleanBuildOutputs({
+        iosDir: resolvedIosDir,
+        androidDir: resolvedAndroidDir,
+        locales,
+        iosDevices,
+        androidBuckets: sortedAndroidBuckets,
+      });
+    }
+
+    for (const localeId of locales) {
+      for (let slideIndex = 0; slideIndex < slideCount; slideIndex++) {
+        const slide = config.slides[slideIndex];
+        const relSource =
+          slide?.screenshotsByLocale && slide.screenshotsByLocale[localeId]
+            ? slide.screenshotsByLocale[localeId]
+            : slide?.screenshot?.path;
+
+        const sourceExt = path.extname(relSource || '').toLowerCase();
+        if (sourceExt !== '.png') {
+          throw new Error(
+            `Raw build requires PNG screenshots. Found: ${relSource}\n` +
+              `Update shipscreens.config.yml to use .png files, or use the default rendered mode.`
+          );
+        }
+
+        const absSource = path.resolve(configDir, relSource);
+        const index = slideIndex + 1;
+        const padded = formatScreenshotIndex(index, width);
+
+        for (const device of iosDevices) {
+          const deviceSlug = toDeviceSlug(device.id);
+          const dest = path.join(resolvedIosDir, localeId, `${deviceSlug}_${padded}.png`);
+          await ensureDir(path.dirname(dest));
+          await fs.copyFile(absSource, dest);
+        }
+
+        for (const { bucket } of sortedAndroidBuckets) {
+          const dest = path.join(resolvedAndroidDir, localeId, 'images', bucket, `${padded}.png`);
+          await ensureDir(path.dirname(dest));
+          await fs.copyFile(absSource, dest);
+        }
+      }
+    }
+
+    if (buildMode === 'frameit') {
+      if (!iosDevices.length) {
+        throw new Error(
+          `Frameit mode requires at least one iOS device in shipscreens.config.yml.\n` +
+            `Add an iOS device, or use --mode raw.`
+        );
+      }
+
+      await runExportFramefile({
+        configPath,
+        iosDir: resolvedIosDir,
+        stringsEncoding,
+        framefileStrategy,
+        check: false,
+      });
+      await runExportFramefile({
+        configPath,
+        iosDir: resolvedIosDir,
+        check: true,
+      });
+    }
+
+    const shouldZip = format === 'zip' || zipOut;
+    let resolvedZipOut = null;
+    if (shouldZip) {
+      resolvedZipOut = resolveZipOutPath({ outRoot, zipOut });
+      await writeFastlaneZip({
+        iosDir: resolvedIosDir,
+        androidDir: resolvedAndroidDir,
+        outZipPath: resolvedZipOut,
+      });
+    }
+
+    return {
+      iosDir: resolvedIosDir,
+      androidDir: resolvedAndroidDir,
+      zipPath: resolvedZipOut,
+      locales: locales.length,
+      slides: slideCount,
+      iosDevices: iosDevices.length,
+      androidDevices: androidDevices.length,
+    };
+  }
+
+  const snapshot = await buildSnapshotFromConfig({ config, configDir });
+  if (!snapshot.selectedBatchDevices?.length) {
+    throw new Error('No devices selected. Add at least one device in shipscreens.config.yml');
+  }
+  if (!snapshot.locales?.length) {
+    throw new Error('No locales selected. Add at least one locale in shipscreens.config.yml');
+  }
+  if (!snapshot.slides?.length) {
+    throw new Error('No slides found. Add at least one slide in shipscreens.config.yml');
+  }
+
+  const rendererRoot = getPackageRoot();
+  const { baseUrl, close: closeServer } = await startRendererServer({ packageRoot: rendererRoot });
+
+  let chromium;
+  try {
+    ({ chromium } = await import('playwright-core'));
+  } catch (err) {
+    await closeServer();
+    throw new Error(
+      `Playwright is required for rendered builds.\n` +
+        `Install Chromium once (or use --mode raw):\n` +
+        `  npx playwright install --with-deps chromium\n` +
+        `${err?.message || String(err)}`
+    );
+  }
+
+  const exportTimeoutMs = 10 * 60 * 1000;
+  const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), 'shipscreens-build-'));
+  const zipPath = path.join(tempDir, 'fastlane_assets.zip');
+
+  let browser = null;
+  try {
+    try {
+      browser = await chromium.launch({ headless: true });
+    } catch (err) {
+      const msg = err?.message || String(err);
+      if (msg.includes("Executable doesn't exist") || msg.includes('playwright install')) {
+        throw new Error(
+          `Playwright Chromium is not installed on this machine.\n` +
+            `Run:\n` +
+            `  npx playwright install --with-deps chromium\n` +
+            `Then rerun shipscreens build.\n` +
+            msg
+        );
+      }
+      throw err;
+    }
+    const context = await browser.newContext({
+      acceptDownloads: true,
+      viewport: { width: 1400, height: 900 },
+      reducedMotion: 'reduce',
+    });
+
+    const projectPayload = {
+      version: '1.0',
+      data: snapshot,
+    };
+
+    await context.addInitScript(
+      (payload, exportStructureMode, authToken) => {
+        window.__SHIPSCREENS_CLI = true;
+        if (authToken) {
+          window.__SHIPSCREENS_CLI_AUTH = { token: authToken };
+        }
+        localStorage.setItem('shipscreens_project', JSON.stringify(payload));
+        localStorage.setItem('shipScreensExportStructureMode', exportStructureMode);
+      },
+      projectPayload,
+      outputMode,
+      cliAuthToken || null
+    );
+
+    const page = await context.newPage();
+    page.setDefaultTimeout(exportTimeoutMs);
+    page.setDefaultNavigationTimeout(exportTimeoutMs);
+
+    const url = `${baseUrl}/app/?session_id=cli`;
+    await page.goto(url, { waitUntil: 'load' });
+
+    await page.waitForFunction(() => window.__shipscreensCli && typeof window.__shipscreensCli.exportBundle === 'function');
+    const firstDevice = snapshot.selectedBatchDevices[0];
+    await page.waitForSelector(`#batch-canvas-${firstDevice}`);
+    await page.evaluate(async () => {
+      if (document.fonts?.ready) await document.fonts.ready;
+    });
+
+    const downloadPromise = page.waitForEvent('download', { timeout: exportTimeoutMs });
+    const exportPromise = page.evaluate(() => window.__shipscreensCli.exportBundle());
+    const [download] = await Promise.all([downloadPromise, exportPromise]);
+    await download.saveAs(zipPath);
+  } finally {
+    if (browser) {
+      await browser.close().catch(() => {});
+    }
+    await closeServer().catch(() => {});
+  }
+
+  const extractDir = path.join(tempDir, 'extracted');
+  await extractZip(zipPath, extractDir);
+
+  const exportedScreenshotsDir = path.join(extractDir, 'fastlane', 'screenshots');
+  if (!(await fs.stat(exportedScreenshotsDir).catch(() => null))) {
+    throw new Error('Export ZIP did not contain fastlane/screenshots');
+  }
+
+  await materializeOutputsFromExport({
+    exportedScreenshotsDir,
+    iosDir: resolvedIosDir,
+    androidDir: resolvedAndroidDir,
+    locales,
+    iosDevices,
+    androidBuckets: sortedAndroidBuckets,
+    slideCount,
+    clean,
+  });
+
+  const shouldZip = format === 'zip' || zipOut;
+  let resolvedZipOut = null;
+  if (shouldZip) {
+    resolvedZipOut = resolveZipOutPath({ outRoot, zipOut });
+    await writeFastlaneZip({
+      iosDir: resolvedIosDir,
+      androidDir: resolvedAndroidDir,
+      outZipPath: resolvedZipOut,
+    });
+  }
+
+  return {
+    iosDir: resolvedIosDir,
+    androidDir: resolvedAndroidDir,
+    zipPath: resolvedZipOut,
+    locales: locales.length,
+    slides: slideCount,
+    iosDevices: iosDevices.length,
+    androidDevices: androidDevices.length,
+  };
+}

package/cli/commands/copyImport.js

@@ -0,0 +1,263 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import Papa from 'papaparse';
+import YAML from 'yaml';
+import { loadShipScreensConfig } from '../loadConfig.js';
+import {
+  createSolidPng,
+  ensureDir,
+  formatIndex,
+  PLACEHOLDER_COLOR,
+  PLACEHOLDER_HEIGHT,
+  PLACEHOLDER_WIDTH,
+} from './init.js';
+
+const normalizeCsvCell = (value) => (value === undefined || value === null ? '' : value.toString()).trim();
+const toCompactCsvKey = (value) => normalizeCsvCell(value).toLowerCase().replace(/[^a-z0-9]/g, '');
+const detectCsvSlideCount = (fields) => {
+  if (!Array.isArray(fields) || !fields.length) return 0;
+  let max = 0;
+  fields.forEach((field) => {
+    const key = toCompactCsvKey(field);
+    if (!key) return;
+    const numbered = key.match(/^(header|headline|title|subtitle|sub)(\d+)$/);
+    if (numbered) {
+      const idx = parseInt(numbered[2], 10);
+      if (!Number.isNaN(idx)) max = Math.max(max, idx);
+      return;
+    }
+    if (key === 'header' || key === 'subtitle' || key === 'sub') {
+      max = Math.max(max, 1);
+    }
+  });
+  return max;
+};
+
+const pathExists = async (filePath) => {
+  try {
+    await fs.stat(filePath);
+    return true;
+  } catch (err) {
+    if (err?.code === 'ENOENT') return false;
+    throw err;
+  }
+};
+
+const parseCopyCsv = (text) => {
+  const parsed = Papa.parse(text, {
+    header: true,
+    skipEmptyLines: true,
+    transformHeader: (h) => (h || '').replace(/^\ufeff/, '').trim(),
+  });
+
+  const rows = Array.isArray(parsed.data) ? parsed.data : [];
+  const fields = parsed?.meta?.fields || Object.keys(rows[0] || {});
+  const slideCount = detectCsvSlideCount(fields);
+  if (!slideCount) {
+    throw new Error('Invalid CSV: missing Header_1/Subtitle_1 style columns.');
+  }
+  if (slideCount > 50) {
+    throw new Error('CSV has too many slides (max 50).');
+  }
+
+  const locales = [];
+  const slidesTexts = Array.from({ length: slideCount }, () => ({}));
+  const seen = new Set();
+
+  rows.forEach((row, idx) => {
+    const keyMap = new Map();
+    Object.entries(row || {}).forEach(([key, value]) => {
+      const compact = toCompactCsvKey(key);
+      if (compact) keyMap.set(compact, value);
+    });
+
+    const langIdRaw =
+      keyMap.get('locale') ??
+      keyMap.get('language') ??
+      keyMap.get('lang') ??
+      keyMap.get('id') ??
+      '';
+    const langId = normalizeCsvCell(langIdRaw);
+
+    const perSlideTexts = Array.from({ length: slideCount }, (_, sIdx) => {
+      const slideNumber = sIdx + 1;
+      const headerRaw =
+        keyMap.get(`header${slideNumber}`) ??
+        keyMap.get(`headline${slideNumber}`) ??
+        keyMap.get(`title${slideNumber}`) ??
+        (slideNumber === 1 ? (keyMap.get('header') ?? keyMap.get('headline') ?? keyMap.get('title')) : undefined) ??
+        '';
+      const subRaw =
+        keyMap.get(`subtitle${slideNumber}`) ??
+        keyMap.get(`sub${slideNumber}`) ??
+        (slideNumber === 1 ? (keyMap.get('subtitle') ?? keyMap.get('sub')) : undefined) ??
+        '';
+      return {
+        header: normalizeCsvCell(headerRaw),
+        sub: normalizeCsvCell(subRaw),
+      };
+    });
+
+    const hasAnyText = perSlideTexts.some((t) => t.header || t.sub);
+    if (!langId && !hasAnyText) return;
+
+    const localeId = langId || `lang-${idx + 1}`;
+    if (seen.has(localeId)) return;
+
+    locales.push({ id: localeId, name: localeId });
+    perSlideTexts.forEach((slideText, sIdx) => {
+      slidesTexts[sIdx][localeId] = slideText;
+    });
+    seen.add(localeId);
+  });
+
+  if (!locales.length) {
+    throw new Error('CSV has no usable rows.');
+  }
+
+  return { locales, slideCount, slidesTexts };
+};
+
+const ensureSlidePlaceholders = async ({ configDir, locales, slideIndex, indexWidth, placeholder }) => {
+  const index = formatIndex(slideIndex + 1, indexWidth);
+  for (const locale of locales) {
+    const assetPath = path.join(configDir, 'assets', locale.id, `${index}.png`);
+    if (await pathExists(assetPath)) continue;
+    await ensureDir(path.dirname(assetPath));
+    await fs.writeFile(assetPath, placeholder);
+  }
+};
+
+const createNewSlide = ({ slideIndex, indexWidth, locales, primaryLocaleId }) => {
+  const index = formatIndex(slideIndex + 1, indexWidth);
+  const slide = {
+    id: slideIndex + 1,
+    screenshot: { path: `assets/${primaryLocaleId}/${index}.png` },
+    text: {},
+  };
+  if (locales.length > 1) {
+    slide.screenshotsByLocale = {};
+    locales.slice(1).forEach((locale) => {
+      slide.screenshotsByLocale[locale.id] = `assets/${locale.id}/${index}.png`;
+    });
+  }
+  return slide;
+};
+
+export async function runCopyImport({ configPath, csvPath, mode = 'merge' } = {}) {
+  const { config, configDir } = await loadShipScreensConfig(configPath);
+  const resolvedCsvPath = csvPath
+    ? path.resolve(process.cwd(), csvPath)
+    : path.join(configDir, 'copy.csv');
+
+  const csvText = await fs.readFile(resolvedCsvPath, 'utf8');
+  const { locales: csvLocales, slideCount: csvSlideCount, slidesTexts } = parseCopyCsv(csvText);
+
+  const importMode = String(mode || 'merge').trim().toLowerCase();
+  if (!['merge', 'replace'].includes(importMode)) {
+    throw new Error('Invalid --import-mode value. Expected merge or replace.');
+  }
+
+  const existingLocales = Array.isArray(config.locales) ? config.locales : [];
+  const existingLocaleMap = new Map(existingLocales.map((l) => [l.id, l]));
+  const nextLocales =
+    importMode === 'replace'
+      ? csvLocales.map((l) => existingLocaleMap.get(l.id) || l)
+      : [
+          ...existingLocales,
+          ...csvLocales.filter((l) => !existingLocaleMap.has(l.id)),
+        ];
+
+  if (!nextLocales.length) {
+    throw new Error('No locales available after import.');
+  }
+
+  const nextLocaleIds = new Set(nextLocales.map((l) => l.id));
+  const newLocaleIds = new Set(
+    nextLocales.filter((l) => !existingLocaleMap.has(l.id)).map((l) => l.id)
+  );
+
+  const existingSlides = Array.isArray(config.slides) ? config.slides : [];
+  const targetSlideCount = Math.max(existingSlides.length, csvSlideCount);
+  const indexWidth = Math.max(2, String(targetSlideCount).length);
+  const primaryLocaleId = nextLocales[0].id;
+  const placeholder = createSolidPng({
+    width: PLACEHOLDER_WIDTH,
+    height: PLACEHOLDER_HEIGHT,
+    color: PLACEHOLDER_COLOR,
+  });
+
+  const nextSlides = [...existingSlides];
+  for (let i = 0; i < targetSlideCount; i += 1) {
+    if (!nextSlides[i]) {
+      nextSlides[i] = createNewSlide({
+        slideIndex: i,
+        indexWidth,
+        locales: nextLocales,
+        primaryLocaleId,
+      });
+      await ensureSlidePlaceholders({
+        configDir,
+        locales: nextLocales,
+        slideIndex: i,
+        indexWidth,
+        placeholder,
+      });
+    }
+  }
+
+  nextSlides.forEach((slide, slideIndex) => {
+    if (!slide.text) slide.text = {};
+    if (importMode === 'replace') {
+      Object.keys(slide.text).forEach((localeId) => {
+        if (!nextLocaleIds.has(localeId)) delete slide.text[localeId];
+      });
+    }
+
+    nextLocales.forEach((locale) => {
+      const localeId = locale.id;
+      const csvText = slidesTexts[slideIndex]?.[localeId];
+
+      if (importMode === 'merge') {
+        if (!slide.text[localeId]) {
+          slide.text[localeId] = { header: '', sub: '' };
+        }
+        const shouldForce = newLocaleIds.has(localeId);
+        if (csvText) {
+          if (csvText.header || shouldForce) slide.text[localeId].header = csvText.header;
+          if (csvText.sub || shouldForce) slide.text[localeId].sub = csvText.sub;
+        } else if (shouldForce) {
+          slide.text[localeId].header = '';
+          slide.text[localeId].sub = '';
+        }
+        return;
+      }
+
+      if (slideIndex < csvSlideCount) {
+        slide.text[localeId] = {
+          header: csvText?.header ?? '',
+          sub: csvText?.sub ?? '',
+        };
+      } else if (!slide.text[localeId]) {
+        slide.text[localeId] = { header: '', sub: '' };
+      }
+    });
+  });
+
+  const nextConfig = {
+    ...config,
+    locales: nextLocales,
+    slides: nextSlides,
+  };
+
+  const yaml = YAML.stringify(nextConfig, { lineWidth: 0 });
+  await fs.writeFile(configPath, yaml.endsWith('\n') ? yaml : `${yaml}\n`, 'utf8');
+
+  return {
+    configPath,
+    csvPath: resolvedCsvPath,
+    locales: nextLocales.length,
+    slides: targetSlideCount,
+    mode: importMode,
+  };
+}