@niro53/store-tools 0.1.0

package/dist/render.js

@@ -0,0 +1,122 @@
+import { chromium } from '@playwright/test';
+import { mkdir, readFile } from 'node:fs/promises';
+import { join, resolve, dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const TEMPLATES_DIR = join(__dirname, '..', 'templates');
+// ── Platform sizes ────────────────────────────────────────────────────────────
+const APPSTORE_W = 1320;
+const APPSTORE_H = 2868; // iPhone 6.9" required (iPhone 16 Pro Max)
+const PLAY_H = 2640; // Google Play max 2:1 clip
+const FEATURE_W = 1024;
+const FEATURE_H = 500;
+// ── Per-scene render ──────────────────────────────────────────────────────────
+let _sharedCss;
+let _helpersJs;
+async function getSharedAssets() {
+    _sharedCss ??= await readFile(join(TEMPLATES_DIR, 'styles.css'), 'utf-8');
+    _helpersJs ??= await readFile(join(TEMPLATES_DIR, 'helpers.js'), 'utf-8');
+    return { css: _sharedCss, js: _helpersJs };
+}
+async function renderScene(browser, htmlPath, locale, outFile, scene, appStylesPath) {
+    const isFeature = scene.kind === 'feature';
+    const vw = isFeature ? FEATURE_W : APPSTORE_W;
+    const vh = isFeature ? FEATURE_H : APPSTORE_H;
+    const { css: sharedCss, js: helpersJs } = await getSharedAssets();
+    const ctx = await browser.newContext({ viewport: { width: vw, height: vh }, deviceScaleFactor: 1 });
+    const page = await ctx.newPage();
+    // Inject shared helpers before any page scripts run.
+    await page.addInitScript({ content: helpersJs });
+    const url = `file://${htmlPath}?locale=${locale}`;
+    await page.goto(url, { waitUntil: 'networkidle' });
+    // Inject shared CSS (before optional per-app overrides).
+    await page.addStyleTag({ content: sharedCss });
+    if (appStylesPath) {
+        try {
+            const appCss = await readFile(appStylesPath, 'utf-8');
+            await page.addStyleTag({ content: appCss });
+        }
+        catch { /* no per-app override, fine */ }
+    }
+    await page.waitForFunction(() => window['__SCENE_READY'] === true, { timeout: 15_000 });
+    const selector = isFeature ? '.feature' : '.screen';
+    const el = await page.$(selector);
+    if (!el)
+        throw new Error(`Selector "${selector}" not found in ${htmlPath}`);
+    await el.screenshot({ path: outFile, omitBackground: false });
+    await ctx.close();
+}
+async function renderScenePlay(browser, htmlPath, locale, outFile, appStylesPath) {
+    // Render at full App Store size then clip the top PLAY_H pixels.
+    const { css: sharedCss, js: helpersJs } = await getSharedAssets();
+    const ctx = await browser.newContext({ viewport: { width: APPSTORE_W, height: APPSTORE_H }, deviceScaleFactor: 1 });
+    const page = await ctx.newPage();
+    await page.addInitScript({ content: helpersJs });
+    const url = `file://${htmlPath}?locale=${locale}`;
+    await page.goto(url, { waitUntil: 'networkidle' });
+    await page.addStyleTag({ content: sharedCss });
+    if (appStylesPath) {
+        try {
+            const appCss = await readFile(appStylesPath, 'utf-8');
+            await page.addStyleTag({ content: appCss });
+        }
+        catch { /* no per-app override */ }
+    }
+    await page.waitForFunction(() => window['__SCENE_READY'] === true, { timeout: 15_000 });
+    await page.screenshot({
+        path: outFile,
+        clip: { x: 0, y: 0, width: APPSTORE_W, height: PLAY_H },
+        omitBackground: false,
+    });
+    await ctx.close();
+}
+export async function renderScreenshots({ appDir, config, locales, scenes: sceneFilter, platforms = ['appstore', 'play'], verbose = true, }) {
+    const sourceDir = join(appDir, 'store-assets', 'source');
+    const outRoot = join(appDir, 'store-assets', 'rendered');
+    const appStylesPath = join(sourceDir, 'styles.css'); // optional per-app overrides
+    const targetLocales = locales ?? Object.keys(config.locales);
+    const targetScenes = sceneFilter
+        ? config.scenes.filter((s) => sceneFilter.includes(s.out))
+        : config.scenes;
+    const log = (msg) => { if (verbose)
+        process.stdout.write(msg + '\n'); };
+    const browser = await chromium.launch({ args: ['--font-render-hinting=none'] });
+    try {
+        let count = 0;
+        for (const locale of targetLocales) {
+            // ── App Store ──────────────────────────────────────────────────────────
+            if (platforms.includes('appstore')) {
+                const localeDir = join(outRoot, locale);
+                await mkdir(localeDir, { recursive: true });
+                for (const scene of targetScenes.filter((s) => s.kind !== 'feature')) {
+                    const htmlPath = join(sourceDir, scene.html);
+                    const outFile = join(localeDir, `${scene.out}.png`);
+                    await renderScene(browser, htmlPath, locale, outFile, scene, appStylesPath);
+                    log(`  ✓ ${resolve(appDir, '..', '..').split('/').at(-1) ?? ''}/${locale}/${scene.out}.png`);
+                    count++;
+                }
+            }
+            // ── Google Play screens ────────────────────────────────────────────────
+            if (platforms.includes('play')) {
+                const playDir = join(outRoot, `${locale}-play`);
+                await mkdir(playDir, { recursive: true });
+                for (const scene of targetScenes) {
+                    const htmlPath = join(sourceDir, scene.html);
+                    const outFile = join(playDir, `${scene.out}.png`);
+                    if (scene.kind === 'feature') {
+                        await renderScene(browser, htmlPath, locale, outFile, scene, appStylesPath);
+                    }
+                    else {
+                        await renderScenePlay(browser, htmlPath, locale, outFile, appStylesPath);
+                    }
+                    log(`  ✓ ${locale}-play/${scene.out}.png`);
+                    count++;
+                }
+            }
+        }
+        log(`\n✓ Rendered ${count} images → store-assets/rendered/`);
+    }
+    finally {
+        await browser.close();
+    }
+}

package/dist/validate.d.ts

@@ -0,0 +1,19 @@
+import type { StoreConfig } from './config.js';
+export interface ValidationError {
+    field: string;
+    message: string;
+}
+export interface ValidationResult {
+    ok: boolean;
+    errors: ValidationError[];
+}
+export declare function validateConfig(appDir: string, config: StoreConfig, opts?: {
+    checkSceneFiles?: boolean;
+}): Promise<ValidationResult>;
+/** Validate all apps in the monorepo — used by CI (`pnpm store validate --all`). */
+export declare function validateAll(appDirs: {
+    appDir: string;
+    config: StoreConfig;
+}[], opts?: {
+    checkSceneFiles?: boolean;
+}): Promise<boolean>;

package/dist/validate.js

@@ -0,0 +1,109 @@
+import { access } from 'node:fs/promises';
+import { join } from 'node:path';
+import { StoreConfigSchema } from './config.js';
+// ── Uniqueness registry (cross-app duplicate guard, populated per run) ────────
+const registry = new Map(); // "field:value" → slug
+function checkUnique(slug, field, value, errors) {
+    const key = `${field}:${value.toLowerCase().trim()}`;
+    const existing = registry.get(key);
+    if (existing && existing !== slug) {
+        errors.push({ field, message: `Duplicate ${field} across apps "${slug}" and "${existing}" (Apple 4.3 shell-app risk)` });
+    }
+    else {
+        registry.set(key, slug);
+    }
+}
+// ── Per-app validation ────────────────────────────────────────────────────────
+export async function validateConfig(appDir, config, opts = {}) {
+    const errors = [];
+    // 1. Zod parse (re-validates; surfaces any schema errors cleanly)
+    const parsed = StoreConfigSchema.safeParse(config);
+    if (!parsed.success) {
+        for (const issue of parsed.error.issues) {
+            errors.push({ field: issue.path.join('.'), message: issue.message });
+        }
+        return { ok: false, errors };
+    }
+    // 2. Per-locale completeness (shortDescription recommended for Play)
+    for (const [locale, meta] of Object.entries(config.locales)) {
+        if (!meta.shortDescription) {
+            errors.push({
+                field: `locales.${locale}.shortDescription`,
+                message: 'Recommended for Google Play; missing will use the first paragraph of description',
+            });
+        }
+        if (!meta.subtitle) {
+            errors.push({
+                field: `locales.${locale}.subtitle`,
+                message: 'Recommended for App Store; missing = no subtitle shown in search results',
+            });
+        }
+        if (!meta.releaseNotes) {
+            errors.push({
+                field: `locales.${locale}.releaseNotes`,
+                message: 'Missing release notes — upload will use last submitted notes',
+            });
+        }
+    }
+    // 3. Cross-app duplicate detection (Apple guideline 4.3)
+    for (const [locale, meta] of Object.entries(config.locales)) {
+        checkUnique(config.slug, `locales.${locale}.name`, meta.name, errors);
+        if (meta.subtitle)
+            checkUnique(config.slug, `locales.${locale}.subtitle`, meta.subtitle, errors);
+    }
+    // 4. Scene HTML file existence
+    if (opts.checkSceneFiles) {
+        const sourceDir = join(appDir, 'store-assets', 'source');
+        await Promise.all(config.scenes.map(async (scene) => {
+            try {
+                await access(join(sourceDir, scene.html));
+            }
+            catch {
+                errors.push({
+                    field: `scenes[${scene.out}].html`,
+                    message: `Scene file not found: ${join(sourceDir, scene.html)}`,
+                });
+            }
+        }));
+    }
+    // 5. Must have at least one screen scene
+    const hasScreen = config.scenes.some((s) => s.kind === 'screen');
+    if (!hasScreen) {
+        errors.push({ field: 'scenes', message: 'At least one scene with kind="screen" is required' });
+    }
+    // 6. Apple: App Store requires appleId + itcTeamId for release uploads
+    if (!config.appleId) {
+        errors.push({ field: 'appleId', message: 'appleId is required for App Store uploads' });
+    }
+    if (!config.itcTeamId) {
+        errors.push({ field: 'itcTeamId', message: 'itcTeamId is required for App Store uploads' });
+    }
+    // Treat missing optional fields (2–3 above) as warnings, not hard failures
+    const hardErrors = errors.filter((e) => !e.field.includes('shortDescription') &&
+        !e.field.includes('subtitle') &&
+        !e.field.includes('releaseNotes') &&
+        !e.field.includes('appleId') &&
+        !e.field.includes('itcTeamId'));
+    return { ok: hardErrors.length === 0, errors };
+}
+/** Validate all apps in the monorepo — used by CI (`pnpm store validate --all`). */
+export async function validateAll(appDirs, opts = {}) {
+    registry.clear(); // reset cross-app uniqueness per run
+    let allOk = true;
+    for (const { appDir, config } of appDirs) {
+        const result = await validateConfig(appDir, config, opts);
+        if (result.errors.length > 0) {
+            console.log(`\n${config.slug}:`);
+            for (const err of result.errors) {
+                const prefix = result.ok ? '  ⚠' : '  ✗';
+                console.log(`${prefix} ${err.field}: ${err.message}`);
+            }
+        }
+        else {
+            console.log(`  ✓ ${config.slug} — OK`);
+        }
+        if (!result.ok)
+            allOk = false;
+    }
+    return allOk;
+}

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@niro53/store-tools",
+  "version": "0.1.0",
+  "description": "Apple App Store + Google Play screenshot rendering, metadata sync, and fastlane upload pipeline for Capacitor apps.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "bin": {
+    "niro-store": "bin/cli.js"
+  },
+  "files": [
+    "dist",
+    "templates",
+    "bin"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run --passWithNoTests",
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "pnpm build"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "commander": "^12.1.0",
+    "zod": "^3.24.4"
+  },
+  "devDependencies": {
+    "@niro/tsconfig": "workspace:*",
+    "@playwright/test": "^1.52.0",
+    "@types/node": "^22.0.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.1"
+  },
+  "peerDependencies": {
+    "@playwright/test": ">=1.40.0"
+  },
+  "peerDependenciesMeta": {
+    "@playwright/test": {
+      "optional": false
+    }
+  }
+}

package/templates/helpers.js

@@ -0,0 +1,105 @@
+/* eslint-disable */
+/**
+ * @niro/store-tools — shared scene helpers
+ * Injected by render.ts via Playwright addInitScript BEFORE the page scripts.
+ *
+ * Exposes: window.STORE  (utility namespace)
+ *   STORE.locale        — resolved locale string ("en", "cs", "pl", …)
+ *   STORE.multiline(s)  — replace \n in translation strings with <br>
+ *   STORE.statusBarHTML() — iOS-style "9:41" status bar HTML
+ *   STORE.bottomNavHTML(items, activeIndex) — bottom-nav HTML
+ *   STORE.serviceLogo(name, size, opts)     — service logo tile HTML (optional)
+ *   STORE.brandLogoSVG(svgContent)          — wrapped brand logo
+ *
+ * Service logos / brand colors are optional — only apps that show service
+ * tiles need to populate window.SERVICE_BG / window.SERVICE_LOGO_SVG.
+ */
+(function () {
+  /* ─── Locale detection ─────────────────────────────────────────────── */
+  const params = new URLSearchParams(window.location.search);
+  const raw = (params.get('locale') || 'en').toLowerCase();
+  window.LOCALE = raw;
+
+  /* ─── STORE namespace ──────────────────────────────────────────────── */
+  window.STORE = {
+    get locale() { return window.LOCALE; },
+
+    /** Replace literal \n (or \\n) with <br> — for multi-line headline strings. */
+    multiline(str) {
+      if (!str) return '';
+      return String(str).replace(/\\n|\n/g, '<br>');
+    },
+
+    /** iOS-style "9:41 ▪ wifi ▪ battery" status bar. */
+    statusBarHTML() {
+      return `
+        <div class="statusbar">
+          <span>9:41</span>
+          <div class="icons">
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M1.333 7.46a13.81 13.81 0 0 1 21.334 0l-1.77 1.77a11.31 11.31 0 0 0-17.794 0L1.333 7.46z"/>
+              <path d="M5.333 11.46a8.318 8.318 0 0 1 13.334 0l-1.77 1.77a5.818 5.818 0 0 0-9.794 0l-1.77-1.77z"/>
+              <path d="M12 17a2 2 0 1 0 0 4 2 2 0 0 0 0-4z"/>
+            </svg>
+            <svg width="28" height="28" viewBox="0 0 24 24" fill="currentColor">
+              <rect x="1" y="7" width="18" height="10" rx="2" stroke="currentColor" stroke-width="1.5" fill="none"/>
+              <rect x="19.5" y="10" width="2.5" height="4" rx="1" fill="currentColor"/>
+              <rect x="2.5" y="8.5" width="14" height="7" rx="1" fill="currentColor"/>
+            </svg>
+          </div>
+        </div>`;
+    },
+
+    /**
+     * Generic bottom nav.
+     * @param items  Array of { label, icon (SVG string) }
+     * @param active Zero-based active index, or -1 to put FAB (+ button) in the centre.
+     */
+    bottomNavHTML(items, active) {
+      if (!items || items.length === 0) return '';
+      return `
+        <div class="bottom-nav">
+          ${items.map((item, i) => `
+            <div class="item ${i === active ? 'active' : ''}">
+              ${item.icon || ''}
+              <span>${item.label || ''}</span>
+            </div>
+          `).join('')}
+        </div>`;
+    },
+
+    /**
+     * Service logo tile HTML. Requires window.SERVICE_BG + window.SERVICE_LOGO_SVG.
+     * @param name    Service name (must be a key in SERVICE_BG / SERVICE_LOGO_SVG)
+     * @param size    Tile size in px (default 84)
+     * @param opts    { radius: borderRadius in px }
+     */
+    serviceLogo(name, size = 84, opts = {}) {
+      const bg  = (window.SERVICE_BG  || {})[name] || '#333';
+      const svg = (window.SERVICE_LOGO_SVG || {})[name] || '';
+      const r   = opts.radius ?? 14;
+      const s   = Number(size);
+      const iconSize = Math.round(s * 0.55);
+      return `
+        <div class="logo" style="
+          background:${bg};
+          width:${s}px;height:${s}px;
+          border-radius:${r}px;
+          display:flex;align-items:center;justify-content:center;
+          flex-shrink:0;">
+          ${svg.replace(/viewBox="0 0 24 24">/, `viewBox="0 0 24 24" width="${iconSize}" height="${iconSize}">`)}
+        </div>`;
+    },
+
+    /**
+     * Wrap an SVG string in a standardised brand-logo container.
+     * @param svgContent Raw <svg …>…</svg> string
+     */
+    brandLogoSVG(svgContent) {
+      return svgContent || '';
+    },
+  };
+
+  /* ─── Scene readiness ──────────────────────────────────────────────── */
+  window.__SCENE_READY = false;
+})();