@aex.is/zero 0.1.9 → 0.1.11

package/README.md

@@ -28,14 +28,14 @@ zero
 
 - Next.js App Router + Tailwind + shadcn-ready config.
 - Expo Router + Tamagui.
-- Minimal layout, three routes, metadata, and icon generation.
-- Contact form wired to `/api/contact` (Next) and mailto/endpoint fallback (Expo).
+- Minimal layout, four routes, metadata, and icon generation.
+- Contact form wired to `/api/contact` (Next) and a device POST to your backend (Expo).
 
 ## Environment variables
 
 The CLI generates `.env.example` with:
-- Next.js: `RESEND_API_KEY`, `EMAIL_FROM`, `EMAIL_TO`.
-- Expo: `EXPO_PUBLIC_CONTACT_EMAIL`, `EXPO_PUBLIC_CONTACT_ENDPOINT`.
+- Next.js: `RESEND_API_KEY`, `CONTACT_FROM_EMAIL`, `CONTACT_TO_EMAIL`.
+- Expo: `EXPO_PUBLIC_CONTACT_ENDPOINT`.
 - Any selected module keys (Neon, Clerk, Payload, Stripe).
 
 ## Development

package/dist/config/base-env.js

@@ -5,22 +5,18 @@ const nextBaseEnv = [
         url: 'https://resend.com'
     },
     {
-        key: 'EMAIL_FROM',
+        key: 'CONTACT_FROM_EMAIL',
         description: 'Verified sender email address'
     },
     {
-        key: 'EMAIL_TO',
+        key: 'CONTACT_TO_EMAIL',
         description: 'Destination email address'
     }
 ];
 const expoBaseEnv = [
-    {
-        key: 'EXPO_PUBLIC_CONTACT_EMAIL',
-        description: 'Email address used for contact form'
-    },
     {
         key: 'EXPO_PUBLIC_CONTACT_ENDPOINT',
-        description: 'Optional contact API endpoint'
+        description: 'Contact API endpoint (e.g. https://yourdomain.com/api/contact)'
     }
 ];
 export function getBaseEnvHelp(framework) {

package/dist/config/modules.js

@@ -3,6 +3,10 @@ export const modules = [
         id: 'neon',
         label: 'Database (Neon)',
         description: 'Serverless Postgres with Neon.',
+        connect: {
+            label: 'Connect to Neon',
+            url: 'https://console.neon.tech/'
+        },
         envVars: [
             {
                 key: 'DATABASE_URL',
@@ -19,6 +23,10 @@ export const modules = [
         id: 'clerk',
         label: 'Auth (Clerk)',
         description: 'Authentication with Clerk.',
+        connect: {
+            label: 'Connect to Clerk',
+            url: 'https://dashboard.clerk.com'
+        },
         envVars: [
             {
                 key: 'CLERK_PUBLISHABLE_KEY',
@@ -40,6 +48,10 @@ export const modules = [
         id: 'payload',
         label: 'CMS (Payload)',
         description: 'Headless CMS using Payload.',
+        connect: {
+            label: 'Generate Payload Secret',
+            url: 'https://payloadcms.com/docs'
+        },
         envVars: [
             {
                 key: 'PAYLOAD_SECRET',
@@ -61,6 +73,10 @@ export const modules = [
         id: 'stripe',
         label: 'Payments (Stripe)',
         description: 'Payments via Stripe SDK.',
+        connect: {
+            label: 'Connect to Stripe',
+            url: 'https://dashboard.stripe.com/apikeys'
+        },
         envVars: [
             {
                 key: 'STRIPE_SECRET_KEY',
@@ -118,3 +134,21 @@ export function getModuleEnvHelp(moduleIds) {
     }
     return Array.from(map.values());
 }
+export function getModuleConnections(moduleIds) {
+    const connections = [];
+    for (const id of moduleIds) {
+        const module = getModuleDefinition(id);
+        if (module.connect) {
+            connections.push(module.connect);
+            continue;
+        }
+        const fallback = module.envVars.find((item) => item.url);
+        if (fallback?.url) {
+            connections.push({
+                label: `Connect to ${module.label}`,
+                url: fallback.url
+            });
+        }
+    }
+    return connections;
+}

package/dist/engine/scaffold.js

@@ -3,7 +3,7 @@ import { promises as fs } from 'fs';
 import { execa } from 'execa';
 import { getFrameworkDefinition } from '../config/frameworks.js';
 import { getBaseEnvHelp } from '../config/base-env.js';
-import { getModuleEnvHelp } from '../config/modules.js';
+import { getModuleConnections, getModuleEnvHelp } from '../config/modules.js';
 import { installBaseDependencies, installModulePackages } from './installers.js';
 import { writeEnvExample } from './env.js';
 import { assertAssetSources, generateExpoAssets, generateNextAssets, resolveAssetSources } from './assets.js';
@@ -130,10 +130,12 @@ async function applyNextTemplates(config, targetDir) {
     const usesSrcDir = await pathExists(srcAppDir);
     const basePath = usesSrcDir ? 'src' : '';
     const envHelp = mergeEnvHelp(getBaseEnvHelp(config.framework), getModuleEnvHelp(config.modules));
+    const connections = getModuleConnections(config.modules);
     const files = buildNextTemplateFiles({
         appName: config.appName,
         domain: config.domain,
         envVars: envHelp,
+        connections,
         basePath
     });
     await writeTemplateFiles(targetDir, files);
@@ -146,10 +148,12 @@ async function applyNextTemplates(config, targetDir) {
 }
 async function applyExpoTemplates(config, targetDir) {
     const envHelp = mergeEnvHelp(getBaseEnvHelp(config.framework), getModuleEnvHelp(config.modules));
+    const connections = getModuleConnections(config.modules);
     const files = buildExpoTemplateFiles({
         appName: config.appName,
         domain: config.domain,
         envVars: envHelp,
+        connections,
         basePath: ''
     });
     await writeTemplateFiles(targetDir, files);

package/dist/engine/templates.js

@@ -20,6 +20,7 @@ export function componentsJsonTemplate(globalsPath, tailwindConfigPath) {
 export function buildNextTemplateFiles(data) {
     const base = data.basePath ? `${data.basePath}/` : '';
     const envList = renderNextEnvList(data.envVars);
+    const connectionSection = renderNextConnectionSection(data.connections);
     return [
         {
             path: `${base}app/layout.tsx`,
@@ -27,7 +28,7 @@ export function buildNextTemplateFiles(data) {
         },
         {
             path: `${base}app/page.tsx`,
-            content: nextHomeTemplate(data.appName, data.domain, envList)
+            content: nextHomeTemplate(data.appName, data.domain, envList, connectionSection)
         },
         {
             path: `${base}app/about/page.tsx`,
@@ -37,6 +38,10 @@ export function buildNextTemplateFiles(data) {
             path: `${base}app/guide/page.tsx`,
             content: nextRouteTemplate('Guide', 'Three routes are ready. Customize and ship.')
         },
+        {
+            path: `${base}app/contact/page.tsx`,
+            content: nextContactPageTemplate()
+        },
         {
             path: `${base}app/api/contact/route.ts`,
             content: nextContactRouteTemplate(data.appName)
@@ -57,6 +62,10 @@ export function buildNextTemplateFiles(data) {
             path: `${base}components/contact-form.tsx`,
             content: nextContactFormTemplate()
         },
+        {
+            path: `${base}components/connection-guide.tsx`,
+            content: nextConnectionGuideTemplate(data.connections)
+        },
         {
             path: `${base}components/env-list.tsx`,
             content: nextEnvListTemplate(envList)
@@ -69,6 +78,7 @@ export function buildNextTemplateFiles(data) {
 }
 export function buildExpoTemplateFiles(data) {
     const envItems = renderExpoEnvItems(data.envVars);
+    const connectionItems = renderConnectionItems(data.connections);
     return [
         {
             path: 'app/_layout.tsx',
@@ -78,6 +88,10 @@ export function buildExpoTemplateFiles(data) {
             path: 'app/index.tsx',
             content: expoHomeTemplate(data.appName, data.domain, envItems)
         },
+        {
+            path: 'app/contact.tsx',
+            content: expoContactTemplate()
+        },
         {
             path: 'app/about.tsx',
             content: expoRouteTemplate('About', 'A concise overview of your project.')
@@ -102,6 +116,10 @@ export function buildExpoTemplateFiles(data) {
             path: 'components/env-list.tsx',
             content: expoEnvListTemplate(envItems)
         },
+        {
+            path: 'components/connection-guide.tsx',
+            content: expoConnectionGuideTemplate(connectionItems)
+        },
         {
             path: 'components/contact-form.tsx',
             content: expoContactFormTemplate()
@@ -171,9 +189,10 @@ export default function RootLayout({
 }
 `;
 }
-function nextHomeTemplate(appName, domain, envList) {
+function nextHomeTemplate(appName, domain, envList, connectionSection) {
     return `import { EnvList } from '@/components/env-list';
 import { ContactForm } from '@/components/contact-form';
+import { ConnectionGuide } from '@/components/connection-guide';
 
 export const metadata = {
   title: 'Home',
@@ -197,11 +216,13 @@ export default function Home() {
         </p>
         <EnvList />
       </div>
+      ${connectionSection}
       <div className="flex flex-col gap-2">
         <h2 className="text-base font-bold">Routes</h2>
         <p className="text-base">
-          Explore <code className="bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">/about</code> and{' '}
-          <code className="bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">/guide</code>.
+          Explore <code className="bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">/about</code>,{' '}
+          <code className="bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">/guide</code>, and{' '}
+          <code className="bg-[var(--fg)] px-2 py-1 text-[var(--bg)]">/contact</code>.
         </p>
       </div>
       <ContactForm />
@@ -232,7 +253,8 @@ function nextHeaderTemplate(appName) {
 const links = [
   { href: '/', label: 'Home' },
   { href: '/about', label: 'About' },
-  { href: '/guide', label: 'Guide' }
+  { href: '/guide', label: 'Guide' },
+  { href: '/contact', label: 'Contact' }
 ];
 
 export function SiteHeader({ appName }: { appName: string }) {
@@ -437,12 +459,12 @@ function isNonEmpty(value: unknown): value is string {
 
 export async function POST(request: Request) {
   const apiKey = process.env.RESEND_API_KEY?.trim();
-  const from = process.env.EMAIL_FROM?.trim();
-  const to = process.env.EMAIL_TO?.trim();
+  const from = process.env.CONTACT_FROM_EMAIL?.trim();
+  const to = process.env.CONTACT_TO_EMAIL?.trim();
 
   if (!apiKey || !from || !to) {
     return Response.json(
-      { error: 'Set RESEND_API_KEY, EMAIL_FROM, and EMAIL_TO.' },
+      { error: 'Set RESEND_API_KEY, CONTACT_FROM_EMAIL, and CONTACT_TO_EMAIL.' },
       { status: 500 }
     );
   }
@@ -472,6 +494,25 @@ export async function POST(request: Request) {
 }
 `;
 }
+function nextContactPageTemplate() {
+    return `import { ContactForm } from '@/components/contact-form';
+
+export const metadata = {
+  title: 'Contact',
+  description: 'Send a message to your inbox.'
+};
+
+export default function ContactPage() {
+  return (
+    <section className="mx-auto flex w-full max-w-3xl flex-col gap-6 px-6 py-12">
+      <h1 className="text-base font-bold">Contact</h1>
+      <p className="text-base">Send a message to your inbox.</p>
+      <ContactForm />
+    </section>
+  );
+}
+`;
+}
 function nextGlobalsCss() {
     return `@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;700&display=swap');
 
@@ -547,6 +588,47 @@ function renderNextEnvList(envVars) {
     })
         .join('\n');
 }
+function renderNextConnectionSection(_connections) {
+    return '<ConnectionGuide />';
+}
+function nextConnectionGuideTemplate(connections) {
+    const items = renderConnectionItems(connections);
+    return `import Link from 'next/link';
+
+const connections = ${items};
+
+export function ConnectionGuide() {
+  if (connections.length === 0) {
+    return null;
+  }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <h2 className="text-base font-bold">Connection guide</h2>
+      {connections.map((item) => (
+        <div key={item.label} className="flex flex-col gap-1">
+          <Link
+            href={item.url}
+            target="_blank"
+            rel="noreferrer"
+            className="text-base font-bold underline underline-offset-4"
+          >
+            {item.label}
+          </Link>
+          <p className="text-base">
+            or go to{' '}
+            <Link href={item.url} target="_blank" rel="noreferrer" className="underline underline-offset-4">
+              {item.url}
+            </Link>{' '}
+            directly.
+          </p>
+        </div>
+      ))}
+    </div>
+  );
+}
+`;
+}
 function expoLayoutTemplate() {
     return `import { Stack } from 'expo-router';
 import { TamaguiProvider, Theme } from 'tamagui';
@@ -577,6 +659,7 @@ function expoHomeTemplate(appName, domain, envItems) {
 import { Text, YStack } from 'tamagui';
 import { PageShell } from '../components/page-shell';
 import { EnvList } from '../components/env-list';
+import { ConnectionGuide } from '../components/connection-guide';
 import { ContactForm } from '../components/contact-form';
 import { FONT_BOLD, FONT_REGULAR, FONT_SIZE, useThemeColors } from '../components/theme';
 
@@ -602,12 +685,13 @@ export default function Home() {
         </Text>
         <EnvList />
       </YStack>
+      <ConnectionGuide />
       <YStack gap="$2">
         <Text fontFamily={FONT_BOLD} fontSize={FONT_SIZE} color={fg}>
           Routes
         </Text>
         <Text fontFamily={FONT_REGULAR} fontSize={FONT_SIZE} color={fg}>
-          Visit /about and /guide.
+          Visit /about, /guide, and /contact.
         </Text>
       </YStack>
       <ContactForm />
@@ -616,6 +700,27 @@ export default function Home() {
 }
 `;
 }
+function expoContactTemplate() {
+    return `import { Head } from 'expo-router/head';
+import { PageShell } from '../components/page-shell';
+import { ContactForm } from '../components/contact-form';
+
+export default function Contact() {
+  return (
+    <PageShell title="Contact" subtitle="Send a message to your inbox.">
+      <Head>
+        <title>Contact</title>
+        <meta name="description" content="Send a message to your inbox." />
+        <meta property="og:title" content="Contact" />
+        <meta property="og:description" content="Send a message to your inbox." />
+        <meta property="twitter:card" content="summary_large_image" />
+      </Head>
+      <ContactForm />
+    </PageShell>
+  );
+}
+`;
+}
 function expoRouteTemplate(title, body) {
     return `import { Head } from 'expo-router/head';
 import { PageShell } from '../components/page-shell';
@@ -674,7 +779,8 @@ import { FONT_BOLD, FONT_REGULAR, FONT_SIZE, useThemeColors } from './theme';
 const links = [
   { href: '/', label: 'Home' },
   { href: '/about', label: 'About' },
-  { href: '/guide', label: 'Guide' }
+  { href: '/guide', label: 'Guide' },
+  { href: '/contact', label: 'Contact' }
 ];
 
 export function SiteHeader() {
@@ -793,13 +899,62 @@ export function EnvList() {
 }
 `;
 }
+function expoConnectionGuideTemplate(connectionItems) {
+    return `import { Linking } from 'react-native';
+import { Text, YStack } from 'tamagui';
+import { FONT_BOLD, FONT_REGULAR, FONT_SIZE, useThemeColors } from './theme';
+
+const connections = ${connectionItems};
+
+export function ConnectionGuide() {
+  const { fg } = useThemeColors();
+
+  if (connections.length === 0) {
+    return null;
+  }
+
+  return (
+    <YStack gap="$3">
+      <Text fontFamily={FONT_BOLD} fontSize={FONT_SIZE} color={fg}>
+        Connection guide
+      </Text>
+      {connections.map((item) => (
+        <YStack key={item.label} gap="$1">
+          <Text
+            fontFamily={FONT_BOLD}
+            fontSize={FONT_SIZE}
+            color={fg}
+            textDecorationLine="underline"
+            onPress={() => Linking.openURL(item.url)}
+          >
+            {item.label}
+          </Text>
+          <Text fontFamily={FONT_REGULAR} fontSize={FONT_SIZE} color={fg}>
+            or go to{' '}
+            <Text
+              fontFamily={FONT_REGULAR}
+              fontSize={FONT_SIZE}
+              color={fg}
+              textDecorationLine="underline"
+              onPress={() => Linking.openURL(item.url)}
+            >
+              {item.url}
+            </Text>{' '}
+            directly.
+          </Text>
+        </YStack>
+      ))}
+    </YStack>
+  );
+}
+`;
+}
 function expoContactFormTemplate() {
     return `import { useState } from 'react';
-import { Linking, TextInput } from 'react-native';
+import { TextInput } from 'react-native';
 import { Button, Text, YStack } from 'tamagui';
 import { FONT_BOLD, FONT_REGULAR, FONT_SIZE, useThemeColors } from './theme';
 
-const CONTACT_EMAIL = process.env.EXPO_PUBLIC_CONTACT_EMAIL?.trim() ?? '';
 const CONTACT_ENDPOINT = process.env.EXPO_PUBLIC_CONTACT_ENDPOINT?.trim() ?? '';
 
 type Status = 'idle' | 'sending' | 'sent' | 'error';
@@ -828,46 +983,34 @@ export function ContactForm() {
       return;
     }
 
+    if (!CONTACT_ENDPOINT) {
+      setStatus('error');
+      setError('Set EXPO_PUBLIC_CONTACT_ENDPOINT.');
+      return;
+    }
+
     setStatus('sending');
     setError('');
 
     let sent = false;
-    if (CONTACT_ENDPOINT) {
-      try {
-        const response = await fetch(CONTACT_ENDPOINT, {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            name: name.trim(),
-            email: email.trim(),
-            message: message.trim()
-          })
-        });
-        sent = response.ok;
-      } catch {
-        sent = false;
-      }
-    }
-
-    if (!sent && CONTACT_EMAIL) {
-      const subject = encodeURIComponent(\`New message from \${name.trim()}\`);
-      const body = encodeURIComponent(\`Name: \${name.trim()}\\nEmail: \${email.trim()}\\n\\n\${message.trim()}\`);
-      const url = \`mailto:\${CONTACT_EMAIL}?subject=\${subject}&body=\${body}\`;
-      try {
-        await Linking.openURL(url);
-        sent = true;
-      } catch {
-        sent = false;
-      }
+    try {
+      const response = await fetch(CONTACT_ENDPOINT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: name.trim(),
+          email: email.trim(),
+          message: message.trim()
+        })
+      });
+      sent = response.ok;
+    } catch {
+      sent = false;
     }
 
     if (!sent) {
       setStatus('error');
-      if (CONTACT_ENDPOINT || CONTACT_EMAIL) {
-        setError('Unable to send message.');
-      } else {
-        setError('Set EXPO_PUBLIC_CONTACT_ENDPOINT or EXPO_PUBLIC_CONTACT_EMAIL.');
-      }
+      setError('Unable to send message.');
       return;
     }
 
@@ -1047,6 +1190,20 @@ function renderExpoEnvItems(envVars) {
     ${items.join(',\n    ')}
   ]`;
 }
+function renderConnectionItems(connections) {
+    if (connections.length === 0) {
+        return '[]';
+    }
+    const items = connections.map((item) => {
+        return `{
+      label: '${escapeTemplate(item.label)}',
+      url: '${escapeTemplate(item.url)}'
+    }`;
+    });
+    return `[
+    ${items.join(',\n    ')}
+  ]`;
+}
 function escapeTemplate(value) {
     return value
         .replace(/`/g, '\\`')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aex.is/zero",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "description": "Aexis Zero scaffolding CLI",
   "license": "UNLICENSED",
   "type": "module",