@donotdev/cli 0.0.6 → 0.0.7

package/templates/app-vite/src/pages/HomePage.tsx.example

@@ -1,163 +1,110 @@
-// apps/{{appName}}/src/pages/HomePage.tsx
-
 /**
- * @fileoverview Home page component
- * @description Scaffold landing page demonstrating DoNotDev framework patterns
- * @version 0.0.4
- * @since 0.0.1
+ * @fileoverview Home Page
+ *
+ * THIS FILE IS YOUR STARTING POINT. Modify the content below.
+ *
+ * HOW PAGES WORK:
+ * 1. Name files *Page.tsx in src/pages/ → auto-discovered as routes
+ * 2. Export `meta` for navigation, auth, icons
+ * 3. Export default function → your page component
+ * 4. Use PageContainer as wrapper → handles layout, scrolling
  */
 
 import { Home } from 'lucide-react';
 
-import {
-  Button,
-  CallToAction,
-  Card,
-  Grid,
-  GridArea,
-  HeroSection,
-  RadioGroup,
-  Section,
-  Stack,
-  Text,
-} from '@donotdev/components';
-import {
-  useLayout,
-  useTranslation,
-  type LayoutPreset,
-  type PageMeta,
-} from '@donotdev/core';
+import { Button, HeroSection, Section, Card, Grid, Stack } from '@donotdev/components';
+import type { PageMeta } from '@donotdev/core';
 import { PageContainer, Link } from '@donotdev/ui';
 
-const LAYOUT_PRESETS: LayoutPreset[] = [
-  'admin',
-  'docs',
-  'landing',
-  'moolti',
-  'blog',
-  'game',
-];
-
+// ============================================================================
+// PAGE METADATA - Controls routing, navigation, and access
+// ============================================================================
+//
+// namespace    → i18n namespace for translations (matches locales/home_en.json)
+// icon         → Navigation icon (from lucide-react)
+// nav          → Show in navigation (default: true, set false to hide)
+// navGroup     → Navigation group: 'main' | 'admin' | 'footer' (default: 'main')
+// route        → Custom route path (default: derived from filename)
+// auth         → Access control:
+//                - undefined → public (anyone can view)
+//                - true → requires login
+//                - 'admin' → requires admin role
+//                - { required: true, role: 'admin' } → full syntax
+// tier         → Subscription tier required: 'pro' | 'enterprise'
+// hideFromMenu → Show in routing but hide from navigation menu
+//
 export const NAMESPACE = 'home';
 
 export const meta: PageMeta = {
   namespace: NAMESPACE,
   icon: <Home />,
+  // nav: true,                    // Uncomment to hide from navigation
+  // navGroup: 'main',             // 'main' | 'admin' | 'footer'
+  // route: '/',                   // Custom route (default: / for HomePage)
+  // auth: true,                   // Uncomment to require login
+  // auth: 'admin',                // Uncomment to require admin role
+  // auth: { required: true, role: 'admin' }, // Full syntax
+  // tier: 'pro',                  // Uncomment to require subscription
+  // hideFromMenu: true,           // Uncomment to hide from menu but keep route
 };
 
-export default function HomePage() {
-  const currentPreset = useLayout('layoutPreset');
-  const setLayoutPreset = useLayout('setLayoutPreset');
-  const { t } = useTranslation([NAMESPACE]);
+// ============================================================================
+// PAGE COMPONENT
+// ============================================================================
 
+export default function HomePage() {
   return (
     <PageContainer>
+      {/* Hero Section - Full-width banner with title and subtitle */}
       <HeroSection
-        title={t('hero.title', "Welcome to DnDev")}
-        subtitle={t('hero.subtitle', "Your app is ready. Explore the framework patterns below.")}
+        title="Welcome to Your App"
+        subtitle="Built with DoNotDev Framework. Edit this page in src/pages/HomePage.tsx"
         variant="primary"
       />
 
-      {/* Layout Switcher */}
-      <Section title="Try Our Layouts" tone="muted" align="center">
-        <Text>
-          Pick a layout and see it change live. Set your preferred layout in
-          config/app.ts
-        </Text>
-        <RadioGroup
-          value={currentPreset || 'landing'}
-          onValueChange={(value) => setLayoutPreset(value as LayoutPreset)}
-          gridCols={3}
-          items={LAYOUT_PRESETS.map((preset) => ({
-            value: preset,
-            label: preset.charAt(0).toUpperCase() + preset.slice(1),
-          }))}
-        />
+      {/* Section - Content block with optional title */}
+      <Section title="Getting Started">
+        <Grid cols={[1, 1, 2, 3]} gap="medium">
+          <Card title="1. Configure" content="Edit src/config/app.ts to set your app name and preset." />
+          <Card title="2. Create Pages" content="Add *Page.tsx files in src/pages/ - they auto-route." />
+          <Card title="3. Add Content" content="Use components from @donotdev/components." />
+        </Grid>
       </Section>
 
-      {/* Components Showcase */}
-      <Section title="Components Showcase">
-        {/* Stack Example */}
-        <Card title="Stack Component">
-          <Text variant="muted">
-            Stack creates flex containers. Default vertical, use direction="row"
-            for horizontal.
-          </Text>
+      {/* Stack - Flexible container for buttons, inline items */}
+      <Section title="Layout Components">
+        <Stack direction="row" gap="medium" wrap>
+          <Button variant="primary">Primary Button</Button>
+          <Button variant="outline">Outline Button</Button>
+          <Button variant="ghost">Ghost Button</Button>
+        </Stack>
+      </Section>
+
+      {/* Call to Action */}
+      <Section tone="muted" align="center">
+        <Stack gap="medium" align="center">
+          <h2>Ready to Build?</h2>
+          <p>Check out the guides folder for setup instructions.</p>
           <Stack direction="row" gap="medium">
-            <Card variant="primary" title="Item 1">
-              <Text>Horizontal</Text>
-            </Card>
-            <Card variant="accent" title="Item 2">
-              <Text>Stack</Text>
-            </Card>
+            <Button
+              variant="primary"
+              render={({ children, ...props }) => (
+                <Link path="https://donotdev.com" {...props}>{children}</Link>
+              )}
+            >
+              Documentation
+            </Button>
+            <Button
+              variant="outline"
+              render={({ children, ...props }) => (
+                <Link path="https://discord.gg/donotdev" {...props}>{children}</Link>
+              )}
+            >
+              Join Discord
+            </Button>
           </Stack>
-        </Card>
-
-        {/* Grid + GridArea Example */}
-        <Card title="Grid + GridArea Components">
-          <Text variant="muted">
-            Grid with named areas for complex layouts.
-          </Text>
-          <Grid
-            areas={`"header header"
-"sidebar main"
-"footer footer"`}
-            templateColumns="1fr 2fr"
-            gap="tight"
-          >
-            <GridArea name="header">
-              <Card variant="glass">
-                <Text>Header Header</Text>
-              </Card>
-            </GridArea>
-            <GridArea name="main">
-              <Card variant="glass">
-                <Text>Main  2fr</Text>
-              </Card>
-            </GridArea>
-            <GridArea name="sidebar">
-              <Card variant="glass">
-                <Text>Sidebar  1fr</Text>
-              </Card>
-            </GridArea>
-            <GridArea name="footer">
-              <Card variant="glass">
-                <Text>Footer Footer</Text>
-              </Card>
-            </GridArea>
-          </Grid>
-        </Card>
+        </Stack>
       </Section>
-
-      {/* CallToAction */}
-      <CallToAction
-        title="Ready to Build?"
-        subtitle="Check out the guides folder for setup instructions."
-        primaryAction={
-          <Button
-            variant="primary"
-            render={({ children, ...props }) => (
-              <Link path="https://donotdev.com" {...props}>
-                {children}
-              </Link>
-            )}
-          >
-            Learn More
-          </Button>
-        }
-        secondaryAction={
-          <Button
-            variant="outline"
-            render={({ children, ...props }) => (
-              <Link path="https://discord.gg/fbeYWDak" {...props}>
-                {children}
-              </Link>
-            )}
-          >
-            Join Discord
-          </Button>
-        }
-      />
     </PageContainer>
   );
 }

package/templates/app-vite/src/pages/ListPageExample.tsx.example

@@ -0,0 +1,88 @@
+/**
+ * @fileoverview Example CRUD List Page
+ *
+ * COPY THIS FILE and rename (e.g., ProductsListPage.tsx, CustomersListPage.tsx)
+ *
+ * HOW IT WORKS:
+ * 1. Import your entity definition
+ * 2. Use EntityList component - it handles everything:
+ *    - Fetching data (optimized via listFields)
+ *    - Table columns (respects field visibility by role)
+ *    - Search, sort, pagination
+ *    - Create/Edit/Delete actions
+ */
+
+import { Package } from 'lucide-react';
+
+import { EntityList } from '@donotdev/crud';
+import { useAuth } from '@donotdev/auth';
+import type { PageMeta } from '@donotdev/core';
+import { PageContainer } from '@donotdev/ui';
+
+// Import your entity from root-level entities folder
+// import { productEntity } from 'entities/Product';
+
+// Placeholder - replace with your entity import
+const productEntity = null as any;
+
+// ============================================================================
+// PAGE METADATA
+// ============================================================================
+
+export const NAMESPACE = 'products';
+
+export const meta: PageMeta = {
+  namespace: NAMESPACE,
+  icon: <Package />,
+  route: '/products',
+  auth: { required: true, role: 'admin' }, // Admin-only page
+};
+
+// ============================================================================
+// PAGE COMPONENT
+// ============================================================================
+
+export default function ProductsListPage() {
+  const user = useAuth('user');
+
+  // Zero-Config: EntityList handles everything automatically:
+  // - Fetches data using entity's listFields (optimized query)
+  // - Renders columns based on field definitions
+  // - Applies visibility rules based on user role
+  // - Includes search, sort, pagination
+  // - Add/Edit/Delete buttons with proper permissions
+
+  return (
+    <PageContainer>
+      <EntityList
+        entity={productEntity}
+        userRole={user?.role}
+        // Optional overrides:
+        // onRowClick={(item) => navigate(`/products/${item.id}`)}
+        // createPath="/products/new"
+        // hideActions={false}
+        // pageSize={25}
+      />
+    </PageContainer>
+  );
+}
+
+// ============================================================================
+// ALTERNATIVE: Card Grid Layout
+// ============================================================================
+//
+// For a card-based grid instead of table:
+//
+// import { EntityCardList } from '@donotdev/crud';
+//
+// export default function ProductsGridPage() {
+//   return (
+//     <PageContainer>
+//       <EntityCardList
+//         entity={productEntity}
+//         // Optional: custom card rendering
+//         // renderCard={(item) => <CustomProductCard product={item} />}
+//       />
+//     </PageContainer>
+//   );
+// }

package/templates/functions-firebase/build.mjs.example

@@ -5,7 +5,9 @@
  */
 
 import { build } from 'esbuild';
-import { createAppFunctionsConfig } from '@donotdev/core/functions';
+import { writeFileSync } from 'fs';
+import { createAppFunctionsConfig, generateFunctionsYamlWithInfo } from '@donotdev/core/functions';
+import { functionsConfig } from './functions.config.js';
 
 async function buildFunctions() {
   console.log('🔨 Building {{APP_NAME}} functions...');
@@ -33,6 +35,11 @@ async function buildFunctions() {
     
     console.log('✅ {{APP_NAME}} functions built successfully!');
     console.log('📁 Output directory: lib/');
+
+    // Generate functions.yaml from config
+    const { yaml, staticFunctions, crudFunctions } = generateFunctionsYamlWithInfo(functionsConfig);
+    writeFileSync('functions.yaml', yaml);
+    console.log(`📄 Generated functions.yaml: ${staticFunctions.length} static + ${crudFunctions.length} CRUD functions`);
     
     // Log bundle info if metafile is available
     if (result.metafile) {

package/templates/functions-firebase/functions-firebase/build.mjs.example

@@ -5,7 +5,9 @@
  */
 
 import { build } from 'esbuild';
-import { createAppFunctionsConfig } from '@donotdev/core/functions';
+import { writeFileSync } from 'fs';
+import { createAppFunctionsConfig, generateFunctionsYamlWithInfo } from '@donotdev/core/functions';
+import { functionsConfig } from './functions.config.js';
 
 async function buildFunctions() {
   console.log('🔨 Building {{APP_NAME}} functions...');
@@ -33,6 +35,11 @@ async function buildFunctions() {
     
     console.log('✅ {{APP_NAME}} functions built successfully!');
     console.log('📁 Output directory: lib/');
+
+    // Generate functions.yaml from config
+    const { yaml, staticFunctions, crudFunctions } = generateFunctionsYamlWithInfo(functionsConfig);
+    writeFileSync('functions.yaml', yaml);
+    console.log(`📄 Generated functions.yaml: ${staticFunctions.length} static + ${crudFunctions.length} CRUD functions`);
     
     // Log bundle info if metafile is available
     if (result.metafile) {

package/templates/functions-firebase/functions-firebase/src/index.ts.example

@@ -2,18 +2,29 @@
 
 /**
  * @fileoverview {{APP_NAME}} Firebase Functions
- * @description {{APP_NAME}} functions that wrap framework functions with {{APP_NAME}}-specific configuration
+ * @description Auto-registered CRUD + custom functions for {{APP_NAME}}
  */
 
 import { initializeApp } from 'firebase-admin/app';
+import { registerCrudFunctions } from '@donotdev/functions/firebase';
+import * as entities from 'entities';
 
-// Initialize Firebase Admin if not already initialized
+// Initialize Firebase Admin
 if (!(globalThis as any).__FIREBASE_ADMIN_INITIALIZED__) {
   initializeApp();
   (globalThis as any).__FIREBASE_ADMIN_INITIALIZED__ = true;
 }
 
-// Export auth functions
+// ============================================================================
+// CRUD Functions (auto-registered from entities)
+// ============================================================================
+// Registers: create_cars, get_cars, list_cars, update_cars, delete_cars
+//            create_customers, get_customers, ... for each entity
+registerCrudFunctions(entities);
+
+// ============================================================================
+// Auth Functions
+// ============================================================================
 export {
   setCustomClaims,
   getCustomClaims,
@@ -21,25 +32,8 @@ export {
   getUserAuthStatus,
 } from './auth';
 
-// Export OAuth functions
-export {
-  grantGitHubAccess,
-  revokeGitHubAccess,
-  checkGitHubAccess,
-} from './oauth';
-
-// Export CRUD functions
-export {
-  createEntity,
-  updateEntity,
-  deleteEntity,
-  getEntity,
-  listEntities,
-} from './crud';
-
-// Export billing functions
-export {
-  processPaymentSuccess,
-  refreshSubscriptionStatus,
-  stripeWebhook,
-} from './billing';
+// ============================================================================
+// Custom Functions (analytics, webhooks, etc.)
+// ============================================================================
+// export { getDashboardMetrics } from './analytics';
+// export { stripeWebhook } from './billing';

package/templates/functions-firebase/functions.config.js.example

@@ -0,0 +1,35 @@
+// functions/functions.config.js
+
+/**
+ * @fileoverview {{APP_NAME}} Functions Configuration
+ * @description Configuration for Firebase Functions deployment
+ * @type {import('@donotdev/types').FunctionsConfig}
+ * 
+ * This config file is used to auto-generate functions.yaml during build.
+ * 
+ * - Static functions: List your custom functions here
+ * - CRUD functions: List entity names to auto-generate CRUD endpoints
+ *   (e.g., ['car', 'customer'] generates: create_car, get_car, list_car, update_car, delete_car, etc.)
+ */
+
+export const functionsConfig = {
+  defaults: {
+    region: ['us-central1'],
+    platform: 'gcfv2',
+    labels: { app: '{{APP_NAME}}' },
+  },
+  functions: {
+    // Add your static (non-CRUD) functions here
+    // Example:
+    // getCustomClaims: { category: 'auth' },
+    // setCustomClaims: { category: 'auth' },
+    // stripeWebhook: { category: 'billing', trigger: 'http' },
+  },
+  crud: {
+    // List entity names to auto-generate CRUD functions
+    // Each entity will generate: create_*, get_*, list_*, update_*, delete_*
+    // Example:
+    // entities: ['car', 'customer', 'inquiry'],
+    entities: [],
+  },
+};