create-wp-typia 0.1.0

package/templates/advanced/src/admin/migration-dashboard.tsx.mustache

@@ -0,0 +1,450 @@
+import React, { useState, useEffect } from 'react';
+import { Button, Notice, Card, CardBody, Flex, FlexItem, ProgressBar } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { scanSiteForMigrations, generateMigrationReport, BlockScanResult } from '../migration-detector';
+import { autoMigrate } from '../migrations';
+
+/**
+ * WordPress Admin Dashboard for {{title}} Migration Management
+ */
+
+interface MigrationStats {
+	total: number;
+	needsMigration: number;
+	hasWarnings: number;
+	byVersion: Record<string, number>;
+}
+
+export function MigrationDashboard() {
+	const [scanResults, setScanResults] = useState<BlockScanResult[]>([]);
+	const [isScanning, setIsScanning] = useState(false);
+	const [isMigrating, setIsMigrating] = useState(false);
+	const [stats, setStats] = useState<MigrationStats | null>(null);
+	const [lastScan, setLastScan] = useState<Date | null>(null);
+
+	const runSiteScan = async () => {
+		setIsScanning(true);
+		try {
+			const results = await scanSiteForMigrations('{{namespace}}/{{slug}}');
+			setScanResults(results);
+			setLastScan(new Date());
+			
+			// Calculate stats
+			const stats: MigrationStats = {
+				total: results.length,
+				needsMigration: results.filter(r => r.analysis.needsMigration).length,
+				hasWarnings: results.filter(r => r.analysis.warnings.length > 0).length,
+				byVersion: {}
+			};
+
+			results.forEach(r => {
+				const version = r.analysis.currentVersion;
+				stats.byVersion[version] = (stats.byVersion[version] || 0) + 1;
+			});
+
+			setStats(stats);
+
+			// Show admin notice
+			if (stats.needsMigration > 0) {
+				wp.data.dispatch('core/notices').createWarningNotice(
+					`Found ${stats.needsMigration} {{title}} blocks that need migration`,
+					{
+						type: 'snackbar',
+						actions: [
+							{
+								label: 'View Details',
+								onClick: () => {
+									// Focus migration section
+									document.getElementById('migration-results')?.scrollIntoView();
+								}
+							}
+						]
+					}
+				);
+			}
+
+		} catch (error) {
+			console.error('Site scan failed:', error);
+			wp.data.dispatch('core/notices').createErrorNotice(
+				`Scan failed: ${error.message}`,
+				{ type: 'snackbar' }
+			);
+		} finally {
+			setIsScanning(false);
+		}
+	};
+
+	const runMigration = async (blockResult: BlockScanResult) => {
+		try {
+			const migrationResult = autoMigrate(blockResult.attributes);
+			const migrated = migrationResult.data;
+			
+			// Here you would save the migrated attributes back to WordPress
+			// Implementation depends on whether this is in admin or REST API
+			console.log('Migrated block:', migrated);
+			
+			wp.data.dispatch('core/notices').createSuccessNotice(
+				`Block in "${blockResult.postTitle}" migrated successfully`,
+				{ type: 'snackbar' }
+			);
+
+			// Refresh scan results
+			await runSiteScan();
+
+		} catch (error) {
+			console.error('Migration failed:', error);
+			wp.data.dispatch('core/notices').createErrorNotice(
+				`Migration failed: ${error.message}`,
+				{ type: 'snackbar' }
+			);
+		}
+	};
+
+	const batchMigrate = async () => {
+		setIsMigrating(true);
+		const needsMigration = scanResults.filter(r => r.analysis.needsMigration);
+		let success = 0;
+		let failed = 0;
+
+		for (const blockResult of needsMigration) {
+			try {
+				await runMigration(blockResult);
+				success++;
+			} catch (error) {
+				failed++;
+			}
+		}
+
+		wp.data.dispatch('core/notices').createInfoNotice(
+			`Batch migration complete: ${success} success, ${failed} failed`,
+			{ type: 'snackbar' }
+		);
+
+		setIsMigrating(false);
+	};
+
+	const downloadReport = () => {
+		const report = generateMigrationReport(scanResults);
+		const blob = new Blob([report], { type: 'text/markdown' });
+		const url = URL.createObjectURL(blob);
+		const a = document.createElement('a');
+		a.href = url;
+		a.download = `{{slug}}-migration-report-${new Date().toISOString().split('T')[0]}.md`;
+		document.body.appendChild(a);
+		a.click();
+		document.body.removeChild(a);
+		URL.revokeObjectURL(url);
+	};
+
+	// Auto-scan on component mount
+	useEffect(() => {
+		runSiteScan();
+	}, []);
+
+	return (
+		<div className="{{slug}}-migration-dashboard">
+			<div className="wrap">
+				<h1>{__('{{title}} Migration Manager', '{{textdomain}}')}</h1>
+				
+				{/* Scan Controls */}
+				<Card>
+					<CardBody>
+						<Flex justify="space-between" align="center">
+							<FlexItem>
+								<h2>{__('Site Scan', '{{textdomain}}')}</h2>
+								{lastScan && (
+									<p className="description">
+										{__('Last scan:', '{{textdomain}}')} {lastScan.toLocaleString()}
+									</p>
+								)}
+							</FlexItem>
+							<FlexItem>
+								<Flex gap={2}>
+									<Button
+										variant="secondary"
+										onClick={runSiteScan}
+										isBusy={isScanning}
+										disabled={isScanning}
+									>
+										{isScanning ? __('Scanning...', '{{textdomain}}') : __('Scan Site', '{{textdomain}}')}
+									</Button>
+									{scanResults.length > 0 && (
+										<Button
+											variant="secondary"
+											onClick={downloadReport}
+										>
+											{__('Download Report', '{{textdomain}}')}
+										</Button>
+									)}
+								</Flex>
+							</FlexItem>
+						</Flex>
+					</CardBody>
+				</Card>
+
+				{/* Statistics */}
+				{stats && (
+					<Card>
+						<CardBody>
+							<h2>{__('Migration Status', '{{textdomain}}')}</h2>
+							<Flex wrap gap={4}>
+								<FlexItem>
+									<div className="migration-stat">
+										<div className="stat-number">{stats.total}</div>
+										<div className="stat-label">{__('Total Blocks', '{{textdomain}}')}</div>
+									</div>
+								</FlexItem>
+								<FlexItem>
+									<div className="migration-stat migration-needed">
+										<div className="stat-number">{stats.needsMigration}</div>
+										<div className="stat-label">{__('Need Migration', '{{textdomain}}')}</div>
+									</div>
+								</FlexItem>
+								<FlexItem>
+									<div className="migration-stat has-warnings">
+										<div className="stat-number">{stats.hasWarnings}</div>
+										<div className="stat-label">{__('Has Warnings', '{{textdomain}}')}</div>
+									</div>
+								</FlexItem>
+							</Flex>
+
+							{/* Version breakdown */}
+							{Object.keys(stats.byVersion).length > 0 && (
+								<div className="version-breakdown">
+									<h3>{__('Version Distribution', '{{textdomain}}')}</h3>
+									{Object.entries(stats.byVersion).map(([version, count]) => (
+										<div key={version} className="version-bar">
+											<span className="version-label">v{version}</span>
+											<ProgressBar value={count} max={stats.total} />
+											<span className="version-count">{count}</span>
+										</div>
+									))}
+								</div>
+							)}
+						</CardBody>
+					</Card>
+				)}
+
+				{/* Migration Actions */}
+				{stats && stats.needsMigration > 0 && (
+					<Card>
+						<CardBody>
+							<Flex justify="space-between" align="center">
+								<FlexItem>
+									<h2>{__('Migration Actions', '{{textdomain}}')}</h2>
+									<p>
+										{__('Found {{needsMigration}} blocks that need migration to the latest version.', '{{textdomain}}')
+											.replace('{{needsMigration}}', stats.needsMigration.toString())}
+									</p>
+								</FlexItem>
+								<FlexItem>
+									<Button
+										variant="primary"
+										onClick={batchMigrate}
+										isBusy={isMigrating}
+										disabled={isMigrating}
+									>
+										{isMigrating 
+											? __('Migrating...', '{{textdomain}}')
+											: __(`Migrate All (${stats.needsMigration})`, '{{textdomain}}')
+										}
+									</Button>
+								</FlexItem>
+							</Flex>
+						</CardBody>
+					</Card>
+				)}
+
+				{/* Results Table */}
+				{scanResults.length > 0 && (
+					<Card id="migration-results">
+						<CardBody>
+							<h2>{__('Scan Results', '{{textdomain}}')}</h2>
+							<div className="migration-results-table">
+								{scanResults.map((result, index) => (
+									<div key={index} className="migration-result-row">
+										<div className="result-header">
+											<h4>"{result.postTitle}" <span className="post-id">(#{result.postId})</span></h4>
+											<div className="result-meta">
+												<span className={`version-badge version-${result.analysis.currentVersion.replace(/\./g, '-')}`}>
+													v{result.analysis.currentVersion}
+												</span>
+												<span className="confidence">
+													{(result.analysis.confidence * 100).toFixed(0)}% confidence
+												</span>
+											</div>
+										</div>
+
+										{result.analysis.needsMigration && (
+											<Notice status="warning" isDismissible={false}>
+												<strong>{__('Migration Required', '{{textdomain}}')}</strong>
+												<ul>
+													{result.analysis.reasons.map((reason, i) => (
+														<li key={i}>{reason}</li>
+													))}
+												</ul>
+												<Button
+													variant="secondary"
+													size="small"
+													onClick={() => runMigration(result)}
+												>
+													{__('Migrate This Block', '{{textdomain}}')}
+												</Button>
+											</Notice>
+										)}
+
+										{result.analysis.warnings.length > 0 && (
+											<Notice status="info" isDismissible={false}>
+												<strong>{__('Warnings', '{{textdomain}}')}</strong>
+												<ul>
+													{result.analysis.warnings.map((warning, i) => (
+														<li key={i}>{warning}</li>
+													))}
+												</ul>
+											</Notice>
+										)}
+
+										{result.analysis.affectedFields.added.length > 0 && (
+											<div className="affected-fields">
+												<strong>{__('New fields to be added:', '{{textdomain}}')}</strong> {' '}
+												{result.analysis.affectedFields.added.join(', ')}
+											</div>
+										)}
+									</div>
+								))}
+							</div>
+						</CardBody>
+					</Card>
+				)}
+
+				{/* No Results */}
+				{!isScanning && scanResults.length === 0 && lastScan && (
+					<Card>
+						<CardBody>
+							<Notice status="success" isDismissible={false}>
+								<p>{__('🎉 No {{title}} blocks found that need migration. All blocks are up to date!', '{{textdomain}}')}</p>
+							</Notice>
+						</CardBody>
+					</Card>
+				)}
+			</div>
+
+			<style jsx>{`
+				.{{slug}}-migration-dashboard {
+					margin: 20px 0;
+				}
+
+				.migration-stat {
+					text-align: center;
+					padding: 15px;
+					border: 1px solid #ddd;
+					border-radius: 4px;
+					min-width: 120px;
+				}
+
+				.migration-stat.migration-needed {
+					border-color: #f56565;
+					background: #fef5e7;
+				}
+
+				.migration-stat.has-warnings {
+					border-color: #ed8936;
+					background: #fffaf0;
+				}
+
+				.stat-number {
+					font-size: 24px;
+					font-weight: bold;
+				}
+
+				.stat-label {
+					font-size: 12px;
+					color: #666;
+				}
+
+				.version-breakdown {
+					margin-top: 20px;
+				}
+
+				.version-bar {
+					display: flex;
+					align-items: center;
+					gap: 10px;
+					margin: 5px 0;
+				}
+
+				.version-label {
+					min-width: 60px;
+					font-family: monospace;
+				}
+
+				.version-count {
+					min-width: 30px;
+					text-align: right;
+				}
+
+				.migration-result-row {
+					border: 1px solid #ddd;
+					border-radius: 4px;
+					padding: 15px;
+					margin: 10px 0;
+				}
+
+				.result-header {
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					margin-bottom: 10px;
+				}
+
+				.result-header h4 {
+					margin: 0;
+				}
+
+				.post-id {
+					color: #666;
+					font-weight: normal;
+				}
+
+				.result-meta {
+					display: flex;
+					gap: 10px;
+					align-items: center;
+				}
+
+				.version-badge {
+					background: #e2e8f0;
+					color: #2d3748;
+					padding: 2px 8px;
+					border-radius: 12px;
+					font-size: 11px;
+					font-weight: bold;
+				}
+
+				.version-badge.version-1-0-0 {
+					background: #fed7d7;
+					color: #c53030;
+				}
+
+				.version-badge.version-2-0-0 {
+					background: #feebc8;
+					color: #dd6b20;
+				}
+
+				.confidence {
+					font-size: 12px;
+					color: #666;
+				}
+
+				.affected-fields {
+					font-size: 13px;
+					color: #2d3748;
+					margin-top: 10px;
+					padding: 8px;
+					background: #f7fafc;
+					border-left: 3px solid #4299e1;
+				}
+			`}</style>
+		</div>
+	);
+}

package/templates/advanced/src/components/ErrorBoundary.tsx.mustache

@@ -0,0 +1,47 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+
+interface Props {
+	children: ReactNode;
+	fallback?: ReactNode;
+}
+
+interface State {
+	hasError: boolean;
+	error?: Error;
+}
+
+/**
+ * Error Boundary component for {{title}}
+ */
+export class ErrorBoundary extends Component<Props, State> {
+	public state: State = {
+		hasError: false
+	};
+
+	public static getDerivedStateFromError(error: Error): State {
+		return { hasError: true, error };
+	}
+
+	public componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+		console.error('{{title}} Error:', error, errorInfo);
+	}
+
+	public render() {
+		if (this.state.hasError) {
+			return this.props.fallback || (
+				<div className="{{dashCase}}-error-boundary">
+					<h3>Something went wrong with {{title}}</h3>
+					<p>Please check the console for more details.</p>
+					{this.state.error && (
+						<details>
+							<summary>Error details</summary>
+							<pre>{this.state.error.stack}</pre>
+						</details>
+					)}
+				</div>
+			);
+		}
+
+		return this.props.children;
+	}
+}

package/templates/advanced/src/deprecated.ts.mustache

@@ -0,0 +1,184 @@
+import { BlockConfiguration } from '@wordpress/blocks';
+import { {{titleCase}}AttributesV1, {{titleCase}}AttributesV2, {{titleCase}}Attributes } from './types/versions';
+import { autoMigrate, generateMigrationReport } from './migrations';
+
+/**
+ * WordPress block deprecated versions with Typia-powered migrations
+ */
+
+// V1 Deprecated (Original version)
+const v1: BlockConfiguration['deprecated'][0] = {
+	attributes: {
+		content: {
+			type: 'string',
+			default: ''
+		},
+		alignment: {
+			type: 'string',
+			default: 'left'
+		}
+	},
+	
+	save({ attributes }: { attributes: {{titleCase}}AttributesV1 }) {
+		return (
+			<p style={{ textAlign: attributes.alignment }}>
+				{attributes.content}
+			</p>
+		);
+	},
+	
+	migrate(attributes: {{titleCase}}AttributesV1) {
+		console.log('🔄 WordPress migration: V1 detected, using Typia auto-migration');
+		
+		const migrated = autoMigrate(attributes);
+		const report = generateMigrationReport(attributes, migrated);
+		
+		console.log('📊 Migration Report:', report);
+		
+		// Log to WordPress admin if available
+		if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch('core/notices')) {
+			wp.data.dispatch('core/notices').createSuccessNotice(
+				`{{title}} block migrated from v${report.fromVersion} to v${report.toVersion}`,
+				{ type: 'snackbar' }
+			);
+		}
+		
+		return migrated;
+	},
+	
+	isEligible(attributes: any) {
+		// Check if this looks like a V1 block
+		return (
+			typeof attributes.content === 'string' &&
+			!('isVisible' in attributes) &&  // No V2+ fields
+			!('id' in attributes) &&         // No V3+ fields
+			!('version' in attributes)       // No version tracking
+		);
+	}
+};
+
+// V2 Deprecated (Added visibility and className)
+const v2: BlockConfiguration['deprecated'][0] = {
+	attributes: {
+		content: {
+			type: 'string',
+			default: ''
+		},
+		alignment: {
+			type: 'string',
+			default: 'left'
+		},
+		isVisible: {
+			type: 'boolean',
+			default: true
+		},
+		className: {
+			type: 'string'
+		}
+	},
+	
+	save({ attributes }: { attributes: {{titleCase}}AttributesV2 }) {
+		return attributes.isVisible ? (
+			<p 
+				className={attributes.className}
+				style={{ textAlign: attributes.alignment }}
+			>
+				{attributes.content}
+			</p>
+		) : null;
+	},
+	
+	migrate(attributes: {{titleCase}}AttributesV2) {
+		console.log('🔄 WordPress migration: V2 detected, using Typia auto-migration');
+		
+		const migrated = autoMigrate(attributes);
+		const report = generateMigrationReport(attributes, migrated);
+		
+		console.log('📊 Migration Report:', report);
+		
+		// Enhanced migration notice for V2
+		if (typeof wp !== 'undefined' && wp.data && wp.data.dispatch('core/notices')) {
+			const changes = report.changes.length;
+			wp.data.dispatch('core/notices').createInfoNotice(
+				`{{title}} block updated: ${changes} new feature${changes !== 1 ? 's' : ''} added`,
+				{ 
+					type: 'snackbar',
+					actions: [
+						{
+							label: 'View Changes',
+							onClick: () => console.table(report)
+						}
+					]
+				}
+			);
+		}
+		
+		return migrated;
+	},
+	
+	isEligible(attributes: any) {
+		// Check if this looks like a V2 block
+		return (
+			typeof attributes.content === 'string' &&
+			('isVisible' in attributes || 'className' in attributes) && // Has V2 fields
+			!('id' in attributes) &&         // No V3+ fields
+			!('version' in attributes) &&    // No version tracking
+			!('theme' in attributes)         // No V3 theme field
+		);
+	}
+};
+
+/**
+ * All deprecated versions in reverse chronological order
+ * (WordPress processes them from newest to oldest)
+ */
+export const deprecated: BlockConfiguration['deprecated'] = [v2, v1];
+
+/**
+ * Migration utilities for development/debugging
+ */
+export const migrationUtils = {
+	/**
+	 * Test migration with sample data
+	 */
+	testMigration() {
+		console.log('🧪 Testing {{title}} migrations...');
+		
+		// Test V1 → Current
+		const v1Sample: {{titleCase}}AttributesV1 = {
+			content: "Hello World",
+			alignment: "center"
+		};
+		
+		console.log('📄 V1 Sample:', v1Sample);
+		const v1Migrated = autoMigrate(v1Sample);
+		console.log('➡️ V1 Migrated:', v1Migrated);
+		
+		// Test V2 → Current
+		const v2Sample: {{titleCase}}AttributesV2 = {
+			content: "Hello World V2",
+			alignment: "right",
+			isVisible: true,
+			className: "custom-class"
+		};
+		
+		console.log('📄 V2 Sample:', v2Sample);
+		const v2Migrated = autoMigrate(v2Sample);
+		console.log('➡️ V2 Migrated:', v2Migrated);
+		
+		console.log('✅ Migration tests complete');
+	},
+	
+	/**
+	 * Get migration statistics
+	 */
+	getStats() {
+		return {
+			supportedVersions: ['1.0.0', '2.0.0', '3.0.0'],
+			currentVersion: '3.0.0',
+			totalMigrations: deprecated.length,
+			autoMigrationEnabled: true,
+			typiaValidation: true
+		};
+	}
+};