@donotdev/cli 0.0.17 → 0.0.19

package/templates/app-demo/src/pages/FullPage.tsx.example

@@ -1,142 +0,0 @@
-// apps/demo/src/pages/FullPage.tsx
-
-import { Rocket, ExternalLink } from 'lucide-react';
-
-import {
-    Button,
-    CallToAction,
-    Card,
-    Code,
-    Grid,
-    GridArea,
-    HeroSection,
-    Section,
-    Stack,
-    Text,
-} from '@donotdev/components';
-
-export default function FullPage() {
-    return (
-        <>
-            <HeroSection
-                title="Fullwidht hero section with gradient text"
-                subtitle="This page displays the Sections, Grid, GridArea, Stack and CallToAction layout components that are meant to wrap the other compoennts."
-                badge="This is HeroSection Component"
-            />
-
-            <Section
-                title="Grid + GridArea Components"
-                subtitle="CSS Grid layout with named areas. GridArea components map to grid template areas. Full-width container."
-            >
-                <Card variant="muted" title="Grid Layout Example">
-                    <Code language="tsx" showLineNumbers={false}>
-{`<Grid
-  areas={\`"header header header"
-  "main main sidebar"
-  "footer footer footer"\`}
-  cols="1fr 3fr 1fr"
-  gap="none"
->
-  {/* Children */}
-</Grid>`}
-                    </Code>
-                </Card>
-                <Grid
-                    areas={`"header header header"
-"main main sidebar"
-"footer footer footer"`}
-                    cols="1fr 3fr 1fr"
-                    gap="none"
-                >
-                    <GridArea as="header" name="header">
-                        <Section tone="muted" title="Header Area">
-                            <Text variant="muted">Header content (as="header")</Text>
-                        </Section>
-                    </GridArea>
-                    <GridArea as="section" name="main">
-                        <Section title="Main Content Area">
-                            <Text variant="muted">Main content (as="section")</Text>
-                        </Section>
-                    </GridArea>
-                    <GridArea as="aside" name="sidebar">
-                        <Section tone="muted" title="Sidebar Area">
-                            <Text variant="muted">Sidebar content (as="aside")</Text>
-                        </Section>
-                    </GridArea>
-                    <GridArea as="footer" name="footer">
-                        <Section tone="muted" title="Footer Area">
-                            <Text variant="muted">Footer content (as="footer")</Text>
-                        </Section>
-                    </GridArea>
-                </Grid>
-            </Section>
-
-            <Section
-                title="Stack Component"
-                subtitle="Flexbox layout component. Full-width container."
-            >
-                <Card variant="muted" title="Stack Layout Example">
-                    <Text variant="muted">
-                        Stack creates flex containers. Use direction="row" for horizontal,
-                        default is vertical. Gap controls spacing between items.
-                    </Text>
-                </Card>
-                <Stack>
-                    <Card variant="muted" title="Stack Item 1">
-                        <Text variant="muted">Vertical stack with</Text>
-                    </Card>
-                    <Card variant="muted" title="Stack Item 2">
-                        <Text variant="muted">Items stack vertically by default</Text>
-                    </Card>
-                    <Stack direction="row">
-                        <Card variant="muted" title="Row Item 1">
-                            <Text variant="muted">Horizontal stack</Text>
-                        </Card>
-                        <Card variant="muted" title="Row Item 2">
-                            <Text variant="muted">direction="row"</Text>
-                        </Card>
-                    </Stack>
-                </Stack>
-            </Section>
-
-            <CallToAction
-                title="CallToAction Component"
-                subtitle="Full-width CTA section with gradient background. Constrained by --content-width, centered. Use for conversion sections."
-                primaryAction={
-                    <Button
-                        variant="primary"
-                        fullWidth
-                        icon={ExternalLink}
-                        iconEnd
-                        tooltip="https://donotdev.com/purchase"
-                        onClick={() =>
-                            window.open(
-                                'https://donotdev.com/purchase',
-                                '_blank',
-                                'noopener,noreferrer'
-                            )
-                        }
-                    >
-                        Get Full Framework
-                    </Button>
-                }
-                secondaryAction={
-
-                    <Button
-                        variant="outline"
-                        icon={ExternalLink}
-                        iconEnd
-                        fullWidth
-                        onClick={() =>
-                            window.open('https://donotdev.com', '_blank', 'noopener,noreferrer')
-                        }
-                        tooltip="https://donotdev.com"
-                    >
-                        Check it more online
-                    </Button>
-                }
-                />
-        </>
-    );
-}
-

package/templates/app-demo/src/pages/components/DemoLayout.tsx.example

@@ -1,266 +0,0 @@
-// apps/demo/src/pages/components/DemoLayout.tsx
-
-import { useState, useEffect } from 'react';
-import type { ChangeEvent } from 'react';
-import { useLocation, useNavigate, Outlet } from 'react-router-dom';
-import { ArrowLeft, ExternalLink, Menu } from 'lucide-react';
-
-import {
-  Button,
-  Input,
-  Stack,
-  Tabs,
-  Text,
-  Sheet,
-  Grid,
-  GridArea,
-} from '@donotdev/components';
-import type { TextProps } from '@donotdev/components';
-
-import { getCSSFamilies } from './componentConfig';
-import type { CSSFamily } from './ComponentsData';
-import { ThemeToggle } from '../../components/ThemeToggle';
-
-function useMediaQuery(query: string) {
-  const [matches, setMatches] = useState(false);
-  useEffect(() => {
-    const media = window.matchMedia(query);
-    if (media.matches !== matches) setMatches(media.matches);
-    const listener = () => setMatches(media.matches);
-    media.addEventListener('change', listener);
-    return () => media.removeEventListener('change', listener);
-  }, [matches, query]);
-  return matches;
-}
-
-interface DemoLayoutProps {
-  selectedTab: CSSFamily | 'all';
-  onTabChange: (tab: CSSFamily | 'all') => void;
-  searchQuery: string;
-  onSearchChange: (query: string) => void;
-}
-
-export function DemoLayout({
-  selectedTab,
-  onTabChange,
-  searchQuery,
-  onSearchChange,
-}: DemoLayoutProps) {
-  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const location = useLocation();
-  const navigate = useNavigate();
-  const isLaptop = useMediaQuery('(min-width: 1024px)');
-
-  const handleBack = () => {
-    if (location.pathname === '/full') {
-      navigate('/');
-    } else if (location.pathname.startsWith('/component/')) {
-      navigate('/');
-    } else if (selectedTab !== 'all') {
-      onTabChange('all');
-    }
-  };
-
-  const showBackButton =
-    location.pathname === '/full' ||
-    location.pathname.startsWith('/component/') ||
-    selectedTab !== 'all';
-
-  const SidebarContent = (
-    <Stack gap="large" className="dndev-h-full">
-      <Stack gap="tight">
-        <Text as="h1">
-          DoNotDev
-        </Text>
-        <Text variant="muted">Components Showcase</Text>
-      </Stack>
-
-      <Stack gap="large" className="dndev-flex-1 dndev-min-h-0 dndev-overflow-y-auto">
-        <Input
-          placeholder="Filter components..."
-          value={searchQuery}
-          onChange={(e: ChangeEvent<HTMLInputElement>) => onSearchChange(e.target.value)}
-        />
-
-        <Tabs
-          items={getCSSFamilies().map((family) => ({
-            value: family.id,
-            label: family.label,
-            className: 'dndev-w-full',
-            content: null,
-          }))}
-          value={selectedTab}
-          onValueChange={(value) => {
-            onTabChange(value as CSSFamily | 'all');
-            setIsMobileMenuOpen(false);
-            if (location.pathname !== '/') {
-              navigate('/');
-            }
-          }}
-          cols={1}
-          gap="tight"
-        />
-      </Stack>
-
-      <Stack>
-        <Button
-          variant="primary"
-          fullWidth
-          icon={ExternalLink}
-          iconEnd
-          onClick={() =>
-            window.open(
-              'https://donotdev.com/purchase',
-              '_blank',
-              'noopener,noreferrer'
-            )
-          }
-        >
-          Get Full Framework
-        </Button>
-        <Button
-          variant="outline"
-          icon={ExternalLink}
-          iconEnd
-          fullWidth
-          onClick={() =>
-            window.open('https://donotdev.com', '_blank', 'noopener,noreferrer')
-          }
-        >
-          Check it more online
-        </Button>
-      </Stack>
-    </Stack>
-  );
-
-  function lowerCase(label: string): "body" | "code" | "small" | "heading" | "default" | "muted" | "primary" | "secondary" | undefined {
-    throw new Error('Function not implemented.');
-  }
-
-  return (
-    <Grid
-      className="dndev-h-screen dndev-w-full dndev-overflow-hidden"
-      cols={isLaptop ? '280px 1fr' : '1fr'}
-      areas={isLaptop ? 'sidebar main' : 'main'}
-      gap="none"
-    >
-      {isLaptop && (
-        <GridArea
-          name="sidebar"
-          style={{
-            padding: 'var(--gap-sm) var(--gap-md)',
-            overflowY: 'auto',
-            background: 'var(--background)',
-            borderRadius: 0,
-            borderInlineEnd: 'var(--border-hairline) solid var(--border)',
-          }}
-        >
-          {SidebarContent}
-        </GridArea>
-      )}
-
-      <GridArea name="main" className="dndev-h-full dndev-overflow-hidden">
-        <Stack className="dndev-h-full" gap="none">
-          {/* Header */}
-          <Grid
-            cols="1fr auto 1fr"
-            align="center"
-            style={{
-              padding: 'var(--gap-sm) var(--gap-md)',
-              background: 'var(--background)',
-              flexShrink: 0,
-              borderRadius: 0,
-              borderBottom: 'var(--border-hairline) solid var(--border)',
-            }}
-          >
-            <Stack direction="row" align="center" justify="start">
-              <Button
-                variant="ghost"
-                icon={ArrowLeft}
-                onClick={showBackButton ? handleBack : undefined}
-                disabled={!showBackButton}
-                className={!showBackButton ? 'dndev-opacity-0' : ''}
-                aria-hidden={!showBackButton}
-              >
-                Back
-              </Button>
-            </Stack>
-
-            <Stack align="center" gap="tight">
-              <Text variant="muted" level="body">
-                We use a high contrast theme to demonstrate component usage. Update themes.css to customize.
-              </Text>
-              <Grid cols={4} gap="tight">
-                {[
-                  { label: 'Foreground', color: 'var(--foreground)', border: true },
-                  { label: 'Primary', color: 'var(--primary)' },
-                  { label: 'Secondary', color: 'var(--secondary)' },
-                  { label: 'Accent', color: 'var(--accent)' },
-                ].map((item) => (
-                  <Stack
-                    key={item.label}
-                    direction="row"
-                    gap="tight"
-                    align="center"
-                  >
-                    <span
-                      style={{
-                        width: '20px',
-                        height: '20px',
-                        background: item.color
-                      }}
-                    />
-                    <Text
-                      level="small"
-                      style={{ color: item.color }}
-                    >
-                      {item.label}
-                    </Text>
-                  </Stack>
-                ))}
-              </Grid>
-            </Stack>
-
-            {/* Right side: Theme Toggle + Mobile Menu */}
-            <Stack direction="row" justify="end" align="center">
-              <ThemeToggle />
-              {!isLaptop && (
-                <Sheet
-                  open={isMobileMenuOpen}
-                  onOpenChange={setIsMobileMenuOpen}
-                  side="left"
-                  trigger={
-                    <Button
-                      variant="ghost"
-                      display="compact"
-                      aria-label="Open menu"
-                      icon={Menu}
-                    />
-                  }
-                  title="Components"
-                >
-                  {SidebarContent}
-                </Sheet>
-              )}
-            </Stack>
-          </Grid>
-
-          {/* Content */}
-          <div
-            className="dndev-flex-1 dndev-overflow-y-auto dndev-w-full"
-            style={{ padding: 'var(--gap-md)' }}
-          >
-            <Outlet
-              context={{
-                selectedTab,
-                setSelectedTab: onTabChange,
-                searchQuery,
-                setSearchQuery: onSearchChange,
-              }}
-            />
-          </div>
-        </Stack>
-      </GridArea>
-    </Grid>
-  );
-}

package/templates/app-demo/src/pages/components/LayoutRoute.tsx.example

@@ -1,20 +0,0 @@
-// apps/demo/src/pages/components/LayoutRoute.tsx
-
-import { useState } from 'react';
-
-import { DemoLayout } from './DemoLayout';
-import type { CSSFamily } from './ComponentsData';
-
-export function LayoutRoute() {
-  const [selectedTab, setSelectedTab] = useState<CSSFamily | 'all'>('all');
-  const [searchQuery, setSearchQuery] = useState('');
-
-  return (
-    <DemoLayout
-      selectedTab={selectedTab}
-      onTabChange={setSelectedTab}
-      searchQuery={searchQuery}
-      onSearchChange={setSearchQuery}
-    />
-  );
-}

package/templates/functions-firebase/functions-firebase/README.md.example

@@ -1,123 +0,0 @@
-# {{APP_NAME}} Functions
-
-This directory contains the Firebase Functions for the {{APP_NAME}} app, generated using the DoNotDev framework's scaffolding system.
-
-## Structure
-
-```
-functions/
-├── src/
-│   ├── auth/                    # Authentication functions
-│   ├── oauth/                   # OAuth functions
-│   ├── billing/                 # Billing functions
-│   └── index.ts                # Main functions entry point
-├── package.json                # Dependencies and scripts
-├── tsconfig.json              # TypeScript configuration
-├── .env.example               # Environment variables template
-└── README.md                  # This file
-```
-
-## Features
-
-- **Authentication Management**: User custom claims and auth status
-- **OAuth Integration**: GitHub access management
-- **Billing Processing**: Stripe checkout and webhook handling
-- **Secure API Layer**: Professional frontend-backend communication
-- **Error Handling**: Comprehensive error handling and logging
-
-## Environment Variables
-
-### File Structure
-
-**Functions use a different .env system than Vite/Next.js:**
-- `.env` → Local development only (not automatically loaded, use with dotenv if needed)
-- Production → Use Firebase Functions Secrets (synced automatically during `dndev deploy`)
-
-**Note:** Functions don't follow Vite/Next.js `.env.local` priority rules. Use Firebase Secrets for production.
-
-### Required Environment Variables
-
-```bash
-# Stripe Configuration
-STRIPE_SECRET_KEY=sk_live_...
-STRIPE_WEBHOOK_SECRET=whsec_...
-
-# GitHub Configuration
-GITHUB_PERSONAL_ACCESS_TOKEN=ghp_...
-GITHUB_REPO_OWNER=your-org
-GITHUB_REPO_NAME=your-repo
-
-# Firebase Configuration
-FIREBASE_PROJECT_ID=your-project-id
-FIREBASE_REGION={{YOUR_REGION}}
-```
-
-### Setup Instructions
-
-1. **Stripe Setup**:
-   - Create products in Stripe Dashboard
-   - Get price IDs and add to frontend `.env.local` (dev) or `.env.production.local` (prod)
-   - Configure webhook endpoint in Stripe
-   - Add webhook secret to functions `.env` (local) or Firebase Secrets (production)
-
-2. **GitHub Setup**:
-   - Create Personal Access Token with `repo` scope
-   - Add token to functions `.env` (local) or Firebase Secrets (production)
-   - Configure repository owner/name
-
-3. **Firebase Setup**:
-   - Get service account key: Firebase Console → Project Settings → Service Accounts → "Generate new private key"
-   - Copy JSON content into `service-account-key.json` in app root (shared by frontend + functions)
-   - Deploy: `dndev deploy` (from workspace root)
-   - Update webhook URL in Stripe dashboard
-
-## Deployment
-
-Use the unified deployment command from workspace root:
-
-```bash
-# Deploy everything (interactive)
-dndev deploy
-
-# Deploy specific app
-dndev deploy <app-name>
-```
-
-## Development
-
-```bash
-# Start Firebase emulators
-bun run serve
-
-# Start with debugging
-bun run dev
-```
-
-## API Endpoints
-
-### Stripe Webhook
-
-- **URL**: `https://your-project.cloudfunctions.net/stripeWebhook`
-- **Events**: `checkout.session.completed`
-- **Purpose**: Processes purchases and grants access
-
-### Checkout Session
-
-- **Integration**: Direct Stripe calls (no function needed)
-- **Purpose**: Creates Stripe checkout sessions for purchases
-
-## Security
-
-- All functions require authentication
-- Webhook signature verification
-- Secure GitHub token management
-- Firebase custom claims for user status
-
-## Framework Integration
-
-This functions package demonstrates how to:
-
-- Use the framework's scaffolding system
-- Implement secure API communication
-- Handle complex purchase flows
-- Integrate with external services (Stripe, GitHub)

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

@@ -1,5 +0,0 @@
-#!/usr/bin/env node
-import { buildFunctions } from '@donotdev/core/functions';
-import { functionsConfig } from './functions.config.js';
-
-buildFunctions(functionsConfig);

package/templates/functions-firebase/functions-firebase/src/auth/getCustomClaims.ts.example

@@ -1,19 +0,0 @@
-/**
- * @fileoverview {{APP_NAME}} Get Custom Claims Wrapper
- * @description Wrapper for framework's getCustomClaims with {{APP_NAME}}-specific configuration
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-
-import { getCustomClaims as frameworkGetCustomClaims } from '@donotdev/functions/firebase';
-
-/**
- * {{APP_NAME}} custom claims retrieval
- * Wraps the framework function with {{APP_NAME}}-specific configuration
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export const getCustomClaims = frameworkGetCustomClaims;

package/templates/functions-firebase/functions-firebase/src/auth/getUserAuthStatus.ts.example

@@ -1,21 +0,0 @@
-// functions/src/auth/getUserAuthStatus.ts
-
-/**
- * @fileoverview {{APP_NAME}} User Auth Status Wrapper
- * @description Wrapper for framework's getUserAuthStatus with {{APP_NAME}}-specific configuration
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-
-import { getUserAuthStatus as frameworkGetUserAuthStatus } from '@donotdev/functions/firebase';
-
-/**
- * {{APP_NAME}} user authentication status
- * Wraps the framework function with {{APP_NAME}}-specific configuration
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export const getUserAuthStatus = frameworkGetUserAuthStatus;

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

@@ -1,11 +0,0 @@
-// functions/src/auth/index.ts
-
-/**
- * @fileoverview {{APP_NAME}} Auth Functions
- * @description Exports all auth-related functions for the {{APP_NAME}} app
- */
-
-export { setCustomClaims } from './setCustomClaims';
-export { getCustomClaims } from './getCustomClaims';
-export { removeCustomClaims } from './removeCustomClaims';
-export { getUserAuthStatus } from './getUserAuthStatus';

package/templates/functions-firebase/functions-firebase/src/auth/removeCustomClaims.ts.example

@@ -1,21 +0,0 @@
-// functions/src/auth/removeCustomClaims.ts
-
-/**
- * @fileoverview {{APP_NAME}} Remove Custom Claims Wrapper
- * @description Wrapper for framework's removeCustomClaims with {{APP_NAME}}-specific configuration
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-
-import { removeCustomClaims as frameworkRemoveCustomClaims } from '@donotdev/functions/firebase';
-
-/**
- * {{APP_NAME}} custom claims removal
- * Wraps the framework function with {{APP_NAME}}-specific configuration
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export const removeCustomClaims = frameworkRemoveCustomClaims;

package/templates/functions-firebase/functions-firebase/src/auth/setCustomClaims.ts.example

@@ -1,21 +0,0 @@
-// functions/src/auth/setCustomClaims.ts
-
-/**
- * @fileoverview {{APP_NAME}} Set Custom Claims Wrapper
- * @description Wrapper for framework's setCustomClaims with {{APP_NAME}}-specific configuration
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-
-import { setCustomClaims as frameworkSetCustomClaims } from '@donotdev/functions/firebase';
-
-/**
- * {{APP_NAME}} custom claims setting
- * Wraps the framework function with {{APP_NAME}}-specific configuration
- *
- * @version 0.0.1
- * @since 0.0.1
- * @author AMBROISE PARK Consulting
- */
-export const setCustomClaims = frameworkSetCustomClaims;

package/templates/functions-firebase/functions-firebase/src/billing/handleStripeWebhook.ts.example

@@ -1,24 +0,0 @@
-// functions/src/billing/handleStripeWebhook.ts
-
-/**
- * @fileoverview {{APP_NAME}} Stripe Webhook Wrapper
- * @description Wrapper for framework's createStripeWebhookHandler with {{APP_NAME}}-specific configuration
- */
-
-import { createStripeWebhookHandler } from '@donotdev/functions/firebase';
-
-/**
- * {{APP_NAME}} Stripe webhook handler
- * Configured with {{APP_NAME}}-specific product types and settings
- */
-export const stripeWebhook = createStripeWebhookHandler({
-  productTypes: {
-    // Add your product types here
-    // Example:
-    // premium_plan: {
-    //   tier: 'premium',
-    //   subscriptionEnd: '2099-12-31T23:59:59.000Z',
-    //   githubRepo: { owner: 'your-org', repo: 'your-repo' },
-    // },
-  },
-});