@screegen/cli 0.0.1

package/bin/screegen.js

@@ -0,0 +1,2 @@
+#!/usr/bin/env node
+import('../dist/index.js');

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { Command } from 'commander';
+
+declare function createProgram(): Command;
+declare function runCli(argv?: string[]): void;
+declare function isMainModule(importMetaUrl: string, processArgv: string[]): boolean;
+
+export { createProgram, isMainModule, runCli };

package/dist/index.js

@@ -0,0 +1,259 @@
+// src/index.ts
+import { Command } from "commander";
+
+// src/commands/init.ts
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+import chalk from "chalk";
+import prompts from "prompts";
+var __dirname = path.dirname(fileURLToPath(import.meta.url));
+var templatesDir = path.resolve(__dirname, "..", "templates");
+async function copyTemplate(templateName, targetDir, targetName, replacements = {}) {
+  const templatePath = path.join(templatesDir, templateName);
+  const targetPath = path.join(targetDir, targetName);
+  let content = await fs.readFile(templatePath, "utf-8");
+  for (const [key, value] of Object.entries(replacements)) {
+    content = content.replace(new RegExp(`{{${key}}}`, "g"), value);
+  }
+  await fs.mkdir(path.dirname(targetPath), { recursive: true });
+  await fs.writeFile(targetPath, content);
+}
+async function initCommand(options) {
+  let projectName = options.name;
+  const directory = options.directory || process.cwd();
+  console.log("--------------------------------");
+  console.log("directory", directory);
+  console.log("projectName", projectName);
+  console.log("--------------------------------");
+  if (!projectName) {
+    const response = await prompts({
+      type: "text",
+      name: "projectName",
+      message: "Project name:",
+      initial: projectName || "my-screenshot-app"
+    });
+    projectName = response.projectName;
+  }
+  if (!projectName) {
+    console.log(chalk.red("Project name is required"));
+    process.exit(1);
+  }
+  const targetDir = path.resolve(directory, projectName);
+  console.log(chalk.blue(`
+Creating screegen project: ${projectName}
+`));
+  await fs.mkdir(targetDir, { recursive: true });
+  await fs.mkdir(path.join(targetDir, "src", "screens"), { recursive: true });
+  await fs.mkdir(path.join(targetDir, "public", "assets"), { recursive: true });
+  const replacements = { projectName };
+  await copyTemplate(
+    "package.json.template",
+    targetDir,
+    "package.json",
+    replacements
+  );
+  await copyTemplate("tsconfig.json.template", targetDir, "tsconfig.json");
+  await copyTemplate("vite.config.ts.template", targetDir, "vite.config.ts");
+  await copyTemplate(
+    "screegen.config.ts.template",
+    targetDir,
+    "screegen.config.ts"
+  );
+  await copyTemplate(
+    "index.html.template",
+    targetDir,
+    "index.html",
+    replacements
+  );
+  await copyTemplate("src/index.tsx.template", targetDir, "src/index.tsx");
+  await copyTemplate(
+    "src/vite-env.d.ts.template",
+    targetDir,
+    "src/vite-env.d.ts"
+  );
+  await copyTemplate("src/App.tsx.template", targetDir, "src/App.tsx");
+  await copyTemplate(
+    "src/translations.ts.template",
+    targetDir,
+    "src/translations.ts"
+  );
+  await copyTemplate(
+    "src/screens/FeaturesScreen.tsx.template",
+    targetDir,
+    "src/screens/FeaturesScreen.tsx"
+  );
+  await copyTemplate(
+    "src/screens/FeaturesScreen.module.scss.template",
+    targetDir,
+    "src/screens/FeaturesScreen.module.scss"
+  );
+  console.log(chalk.green("Project created successfully!\n"));
+  console.log(chalk.gray("Next steps:\n"));
+  console.log(chalk.white(`  cd ${projectName}`));
+  console.log(chalk.white("  yarn install"));
+  console.log(chalk.white("  yarn dev           # Start dev server"));
+  console.log(chalk.white("  screegen generate  # Generate screenshots\n"));
+}
+
+// src/commands/generate.ts
+import { chromium } from "playwright";
+import { spawn } from "child_process";
+import path2 from "path";
+import fs2 from "fs/promises";
+import chalk2 from "chalk";
+import ora from "ora";
+import getPort from "get-port";
+async function fetchConfig(baseUrl, browser) {
+  const page = await browser.newPage();
+  await page.goto(`${baseUrl}/config`);
+  await page.waitForSelector("#screegen-config");
+  const configText = await page.$eval(
+    "#screegen-config",
+    /* v8 ignore next */
+    (el) => el.textContent
+  );
+  await page.close();
+  if (!configText) {
+    throw new Error("Failed to read config from /config page");
+  }
+  return JSON.parse(configText);
+}
+function startDevServer(port) {
+  return new Promise((resolve, reject) => {
+    const devProcess = spawn("yarn", ["dev", "--port", String(port)], {
+      cwd: process.cwd(),
+      stdio: ["ignore", "pipe", "pipe"],
+      shell: true
+    });
+    let resolved = false;
+    const timeout = setTimeout(() => {
+      if (!resolved) {
+        reject(new Error("Dev server failed to start within 30 seconds"));
+      }
+    }, 3e4);
+    devProcess.stdout?.on("data", (data) => {
+      const output = data.toString();
+      const match = output.match(/Local:\s+(http:\/\/localhost:\d+)/);
+      if (match && !resolved) {
+        resolved = true;
+        clearTimeout(timeout);
+        resolve({ process: devProcess, url: match[1] });
+      }
+    });
+    devProcess.stderr?.on("data", (data) => {
+      const output = data.toString();
+      const match = output.match(/Local:\s+(http:\/\/localhost:\d+)/);
+      if (match && !resolved) {
+        resolved = true;
+        clearTimeout(timeout);
+        resolve({ process: devProcess, url: match[1] });
+      }
+    });
+    devProcess.on("error", (err) => {
+      if (!resolved) {
+        clearTimeout(timeout);
+        reject(err);
+      }
+    });
+    devProcess.on("exit", (code) => {
+      if (!resolved) {
+        clearTimeout(timeout);
+        reject(new Error(`Dev server exited with code ${code}`));
+      }
+    });
+  });
+}
+async function generateCommand(options) {
+  const spinner = ora("Starting dev server...").start();
+  let devProcess = null;
+  try {
+    const port = await getPort({ port: parseInt(options.port) });
+    const { process: serverProcess, url: baseUrl } = await startDevServer(port);
+    devProcess = serverProcess;
+    spinner.text = "Launching browser...";
+    const browser = await chromium.launch();
+    spinner.text = "Loading configuration...";
+    const config = await fetchConfig(baseUrl, browser);
+    if (config.languages.length === 0) {
+      spinner.fail("No languages found in config");
+      process.exit(1);
+    }
+    if (config.devices.length === 0) {
+      spinner.fail("No devices found in config");
+      process.exit(1);
+    }
+    spinner.succeed("Setup complete");
+    console.log(chalk2.blue("\nGenerating screenshots...\n"));
+    const outputDir = path2.resolve(process.cwd(), options.output);
+    await fs2.mkdir(outputDir, { recursive: true });
+    let screenshotCount = 0;
+    for (const device of config.devices) {
+      console.log(chalk2.cyan(`
+${device.key}:`));
+      for (const screen of device.screens) {
+        for (const language of config.languages) {
+          const page = await browser.newPage();
+          await page.setViewportSize({
+            width: Math.floor(device.width),
+            height: Math.floor(device.height)
+          });
+          const url = `${baseUrl}/screens/${device.key}/${screen.key}/${language}`;
+          await page.goto(url);
+          await page.waitForLoadState("networkidle");
+          await page.waitForTimeout(500);
+          const langDir = path2.join(outputDir, language);
+          await fs2.mkdir(langDir, { recursive: true });
+          for (const fastlaneKey of device.fastlaneKeys) {
+            const screenIndex = device.screens.indexOf(screen) + 1;
+            const filename = `${screenIndex}_${fastlaneKey}_${screenIndex}.png`;
+            const filepath = path2.join(langDir, filename);
+            await page.screenshot({ path: filepath });
+            screenshotCount++;
+            console.log(chalk2.gray(`  ${language}/${filename}`));
+          }
+          await page.close();
+        }
+      }
+    }
+    await browser.close();
+    devProcess.kill();
+    devProcess = null;
+    console.log(
+      chalk2.green(`
+Generated ${screenshotCount} screenshots to ${outputDir}`)
+    );
+  } catch (error) {
+    if (devProcess) {
+      devProcess.kill();
+    }
+    spinner.fail("Generation failed");
+    console.error(
+      chalk2.red(error instanceof Error ? error.message : String(error))
+    );
+    process.exit(1);
+  }
+}
+
+// src/index.ts
+function createProgram() {
+  const program = new Command();
+  program.name("screegen").description("Screenshot generation tool for app store assets").version("1.0.0");
+  program.command("init").description("Create a new screegen project").option("-n, --name <name>", "Project name").option("-d, --directory <dir>", "Target directory", process.cwd()).action(initCommand);
+  program.command("generate").description("Generate screenshots using Playwright").option("-o, --output <dir>", "Output directory", "screenshots").option("-p, --port <port>", "Dev server port", "3000").action(generateCommand);
+  return program;
+}
+function runCli(argv) {
+  createProgram().parse(argv);
+}
+function isMainModule(importMetaUrl, processArgv) {
+  return importMetaUrl === `file://${processArgv[1]}` || processArgv[1]?.endsWith("screegen.js") || false;
+}
+if (isMainModule(import.meta.url, process.argv)) {
+  runCli();
+}
+export {
+  createProgram,
+  isMainModule,
+  runCli
+};

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@screegen/cli",
+  "version": "0.0.1",
+  "type": "module",
+  "bin": {
+    "screegen": "bin/screegen.js"
+  },
+  "main": "dist/index.js",
+  "license": "MIT",
+  "types": "dist/index.d.ts",
+  "files": [
+    "bin",
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "lint": "eslint src",
+    "test": "vitest run --coverage",
+    "generate-templates": "tsx scripts/generate-templates.ts",
+    "publish": "npm publish --access=public"
+  },
+  "dependencies": {
+    "chalk": "^5.3.0",
+    "commander": "^12.1.0",
+    "get-port": "^7.1.0",
+    "ora": "^8.1.0",
+    "playwright": "^1.49.1",
+    "prompts": "^2.4.2",
+    "vite": "^6.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.2",
+    "@types/node": "^22.10.5",
+    "@types/prompts": "^2.4.9",
+    "@typescript-eslint/eslint-plugin": "^8.52.0",
+    "@typescript-eslint/parser": "^8.52.0",
+    "@vitest/coverage-v8": "^4.0.16",
+    "eslint": "^9.39.2",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.4",
+    "globals": "^17.0.0",
+    "jiti": "^2.6.1",
+    "prettier": "^3.7.4",
+    "tsup": "^8.3.5",
+    "tsx": "^4.21.0",
+    "typescript": "^5.7.2",
+    "typescript-eslint": "^8.52.0",
+    "vitest": "^4.0.16"
+  }
+}

package/templates/index.html.template

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{projectName}}</title>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Lexend:wght@300;400&display=swap" />
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

package/templates/package.json.template

@@ -0,0 +1,26 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "generate": "screegen generate"
+  },
+  "dependencies": {
+    "@screegen/components": "^1.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.28.2"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.17",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "sass": "^1.83.0",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.0"
+  }
+}

package/templates/screegen.config.ts.template

@@ -0,0 +1,43 @@
+import { ProjectConfig, ScreenComponentProps } from "@screegen/components";
+import { FeaturesScreen } from "./src/screens/FeaturesScreen";
+import { t } from "./src/translations";
+
+export type AppLanguageCode = "en-US" | "de-DE";
+
+// Wrapper component that provides translations
+function FeaturesScreenWrapper({ language, deviceKey }: ScreenComponentProps) {
+  return (
+    <FeaturesScreen
+      language={language}
+      deviceKey={deviceKey}
+      title={t(language, "title")}
+      subtitle={t(language, "subtitle")}
+      features={[
+        { title: t(language, "feature1"), description: t(language, "feature1Desc") },
+        { title: t(language, "feature2"), description: t(language, "feature2Desc") },
+      ]}
+    />
+  );
+}
+
+const config: ProjectConfig<AppLanguageCode> = {
+  languages: ["en-US", "de-DE"],
+  devices: [
+    {
+      key: "iphone",
+      fastlaneKeys: ["APP_IPHONE_67"],
+      width: 1290,
+      height: 2796,
+      screens: [{ key: "features", component: FeaturesScreenWrapper }],
+    },
+    {
+      key: "ipad",
+      fastlaneKeys: ["APP_IPAD_PRO_129"],
+      width: 2048,
+      height: 2732,
+      screens: [{ key: "features", component: FeaturesScreenWrapper }],
+    },
+  ],
+};
+
+export default config;

package/templates/src/App.tsx.template

@@ -0,0 +1,72 @@
+import { Routes, Route, useParams } from 'react-router-dom';
+import {
+  Screen,
+  OverviewGrid,
+  ScreengenConfig,
+  useColorScheme,
+  useUrlState,
+  ColorScheme,
+} from '@screegen/components';
+import config, { AppLanguageCode } from '../screegen.config';
+
+function ScreenPage() {
+  const { deviceKey, screenKey, language } = useParams<{
+    deviceKey: string;
+    screenKey: string;
+    language: string;
+  }>();
+
+  if (!deviceKey || !screenKey || !language) {
+    return <div>Invalid screen parameters</div>;
+  }
+
+  return (
+    <Screen
+      config={config}
+      deviceKey={deviceKey}
+      screenKey={screenKey}
+      language={language as AppLanguageCode}
+    />
+  );
+}
+
+function OverviewPage() {
+  const [language, setLanguage] = useUrlState<AppLanguageCode>(
+    'language',
+    config.languages[0]
+  );
+  const [scale, setScale] = useUrlState<string>('scale', '0.25');
+  const [colorSchemeParam, setColorScheme] = useUrlState<ColorScheme | ''>(
+    'colorScheme',
+    ''
+  );
+  const systemColorScheme = useColorScheme();
+  const colorScheme = colorSchemeParam || systemColorScheme;
+
+  return (
+    <OverviewGrid
+      config={config}
+      language={language}
+      scale={parseFloat(scale)}
+      colorScheme={colorScheme}
+      onLanguageChange={setLanguage}
+      onScaleChange={(s) => setScale(String(s))}
+      onColorSchemeChange={setColorScheme}
+    />
+  );
+}
+
+function App() {
+  return (
+    <Routes>
+      <Route path="/" element={<OverviewPage />} />
+      <Route path="/config" element={<ScreengenConfig config={config} />} />
+      <Route
+        path="/screens/:deviceKey/:screenKey/:language"
+        element={<ScreenPage />}
+      />
+    </Routes>
+  );
+}
+
+export default App;

package/templates/src/index.tsx.template

@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { BrowserRouter } from 'react-router-dom';
+import '@screegen/components/styles.css';
+import App from './App';
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </React.StrictMode>
+);

package/templates/src/screens/FeaturesScreen.module.scss.template

@@ -0,0 +1,57 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: 100%;
+  padding: 60px 40px;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  color: white;
+  font-family: "Lexend", system-ui, sans-serif;
+}
+
+.header {
+  text-align: center;
+  margin-bottom: 60px;
+}
+
+.title {
+  font-size: 64px;
+  font-weight: 400;
+  margin: 0 0 16px 0;
+}
+
+.subtitle {
+  font-size: 28px;
+  font-weight: 300;
+  opacity: 0.9;
+  margin: 0;
+}
+
+.features {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+  max-width: 800px;
+}
+
+.feature {
+  background: rgba(255, 255, 255, 0.15);
+  border-radius: 16px;
+  padding: 32px;
+  backdrop-filter: blur(10px);
+}
+
+.featureTitle {
+  font-size: 24px;
+  font-weight: 400;
+  margin: 0 0 8px 0;
+}
+
+.featureDescription {
+  font-size: 18px;
+  font-weight: 300;
+  opacity: 0.9;
+  margin: 0;
+}

package/templates/src/screens/FeaturesScreen.tsx.template

@@ -0,0 +1,36 @@
+import { ScreenComponentProps } from "@screegen/components";
+import styles from "./FeaturesScreen.module.scss";
+
+interface Feature {
+  title: string;
+  description: string;
+}
+
+interface FeaturesScreenProps extends ScreenComponentProps {
+  title: string;
+  subtitle: string;
+  features: Feature[];
+}
+
+export function FeaturesScreen({
+  title,
+  subtitle,
+  features,
+}: FeaturesScreenProps) {
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+        <p className={styles.subtitle}>{subtitle}</p>
+      </div>
+      <div className={styles.features}>
+        {features.map((feature, index) => (
+          <div key={index} className={styles.feature}>
+            <h3 className={styles.featureTitle}>{feature.title}</h3>
+            <p className={styles.featureDescription}>{feature.description}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/templates/src/translations.ts.template

@@ -0,0 +1,31 @@
+/**
+ * Translations for your app screenshots.
+ * Add your supported languages and translation keys here.
+ */
+
+export const translations: Record<string, Record<string, string>> = {
+  "en-US": {
+    title: "Your App Name",
+    subtitle: "The best app for your needs",
+    feature1: "Amazing Feature",
+    feature1Desc: "Description of this amazing feature",
+    feature2: "Another Feature",
+    feature2Desc: "Description of another great feature",
+  },
+  "de-DE": {
+    title: "Deine App",
+    subtitle: "Die beste App für deine Bedürfnisse",
+    feature1: "Tolle Funktion",
+    feature1Desc: "Beschreibung dieser tollen Funktion",
+    feature2: "Weitere Funktion",
+    feature2Desc: "Beschreibung einer weiteren Funktion",
+  },
+};
+
+/**
+ * Helper function to get a translation for a given language and key.
+ * Falls back to en-US if the key is not found in the requested language.
+ */
+export function t(language: string, key: string): string {
+  return translations[language]?.[key] ?? translations["en-US"]?.[key] ?? key;
+}

package/templates/src/vite-env.d.ts.template

@@ -0,0 +1,6 @@
+/// <reference types="vite/client" />
+
+declare module "*.module.scss" {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}

package/templates/tsconfig.json.template

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "forceConsistentCasingInFileNames": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src", "screegen.config.ts"]
+}

package/templates/vite.config.ts.template

@@ -0,0 +1,9 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    open: true,
+  },
+});