@screegen/cli 0.0.1 → 0.0.3

package/dist/index.js

@@ -79,14 +79,14 @@ Creating screegen project: ${projectName}
     "src/translations.ts"
   );
   await copyTemplate(
-    "src/screens/FeaturesScreen.tsx.template",
+    "src/screens/ExampleScreen.tsx.template",
     targetDir,
-    "src/screens/FeaturesScreen.tsx"
+    "src/screens/ExampleScreen.tsx"
   );
   await copyTemplate(
-    "src/screens/FeaturesScreen.module.scss.template",
+    "src/screens/ExampleScreen.module.scss.template",
     targetDir,
-    "src/screens/FeaturesScreen.module.scss"
+    "src/screens/ExampleScreen.module.scss"
   );
   console.log(chalk.green("Project created successfully!\n"));
   console.log(chalk.gray("Next steps:\n"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@screegen/cli",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "bin": {
     "screegen": "bin/screegen.js"
@@ -17,9 +17,7 @@
     "dev": "tsup --watch",
     "build": "tsup",
     "lint": "eslint src",
-    "test": "vitest run --coverage",
-    "generate-templates": "tsx scripts/generate-templates.ts",
-    "publish": "npm publish --access=public"
+    "test": "vitest run --coverage"
   },
   "dependencies": {
     "chalk": "^5.3.0",
@@ -49,4 +47,4 @@
     "typescript-eslint": "^8.52.0",
     "vitest": "^4.0.16"
   }
-}
+}

package/templates/.gitignore.template

@@ -0,0 +1,39 @@
+# Dependencies
+node_modules/
+
+# Build outputs
+dist/
+build/
+
+# Test coverage
+coverage/
+
+# Screenshots output
+screenshots/
+.screegen-temp/
+
+# Misc
+.DS_Store
+*.local
+
+# Logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# TypeScript
+*.tsbuildinfo
+
+# IDE
+.idea/
+*.swp
+*.swo

package/templates/package.json.template

@@ -1,8 +1,9 @@
 {
   "name": "{{projectName}}",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "private": true,
   "type": "module",
+  "packageManager": "yarn@4.6.0",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -10,7 +11,8 @@
     "generate": "screegen generate"
   },
   "dependencies": {
-    "@screegen/components": "^1.0.0",
+    "@screegen/components": "^0.0.3",
+    "@screegen/cli": "^0.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.28.2"

package/templates/screegen.config.ts.template

@@ -1,41 +1,22 @@
-import { ProjectConfig, ScreenComponentProps } from "@screegen/components";
-import { FeaturesScreen } from "./src/screens/FeaturesScreen";
-import { t } from "./src/translations";
+import { ProjectConfig } from '@screegen/components';
+import { ExampleScreen } from './src/screens/ExampleScreen';
 
-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"],
+const config: ProjectConfig = {
+  languages: ['en-US', 'de-DE'],
   devices: [
     {
-      key: "iphone",
-      fastlaneKeys: ["APP_IPHONE_67"],
+      key: 'iphone',
+      fastlaneKeys: ['APP_IPHONE_67'],
       width: 1290,
       height: 2796,
-      screens: [{ key: "features", component: FeaturesScreenWrapper }],
+      screens: [{ key: 'example', component: ExampleScreen }],
     },
     {
-      key: "ipad",
-      fastlaneKeys: ["APP_IPAD_PRO_129"],
+      key: 'ipad',
+      fastlaneKeys: ['APP_IPAD_PRO_129'],
       width: 2048,
       height: 2732,
-      screens: [{ key: "features", component: FeaturesScreenWrapper }],
+      screens: [{ key: 'example', component: ExampleScreen }],
     },
   ],
 };

package/templates/src/App.tsx.template

@@ -1,72 +1,8 @@
-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}
-    />
-  );
-}
+import { Screegen } from '@screegen/components';
+import config from '../screegen.config';
 
 function App() {
-  return (
-    <Routes>
-      <Route path="/" element={<OverviewPage />} />
-      <Route path="/config" element={<ScreengenConfig config={config} />} />
-      <Route
-        path="/screens/:deviceKey/:screenKey/:language"
-        element={<ScreenPage />}
-      />
-    </Routes>
-  );
+  return <Screegen config={config} />;
 }
 
 export default App;

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

@@ -0,0 +1,29 @@
+.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: 120px;
+  font-weight: 400;
+  margin: 0 0 16px 0;
+}
+
+.subtitle {
+  font-size: 60px;
+  font-weight: 300;
+  opacity: 0.9;
+  margin: 0;
+}

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

@@ -0,0 +1,16 @@
+import { ScreenComponentProps } from '@screegen/components';
+import styles from './ExampleScreen.module.scss';
+import { t } from '../translations';
+
+export function ExampleScreen({ language }: ScreenComponentProps) {
+  const title = t(language, 'title');
+  const subtitle = t(language, 'subtitle');
+  return (
+    <div className={styles.container}>
+      <div className={styles.header}>
+        <h1 className={styles.title}>{title}</h1>
+        <p className={styles.subtitle}>{subtitle}</p>
+      </div>
+    </div>
+  );
+}

package/templates/src/translations.ts.template

@@ -7,18 +7,10 @@ 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",
   },
 };
 

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

@@ -1,57 +0,0 @@
-.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

@@ -1,36 +0,0 @@
-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>
-  );
-}