@webmate-studio/cli 0.1.0

package/src/commands/generate.js

@@ -0,0 +1,579 @@
+import fs from 'fs/promises';
+import path from 'path';
+import { input, select, confirm } from '@inquirer/prompts';
+import pc from 'picocolors';
+import { loadConfig } from '../utils/config.js';
+
+/**
+ * Generate a new component or island
+ */
+export async function generate(type, name, options = {}) {
+	// Handle --list-templates flag
+	if (options.listTemplates) {
+		listAvailableTemplates();
+		return;
+	}
+
+	console.log(pc.cyan('\n🎨 Webmate Component Generator\n'));
+
+	// Resolve type aliases
+	const typeAliases = {
+		c: 'component',
+		comp: 'component'
+	};
+
+	if (type && typeAliases[type]) {
+		type = typeAliases[type];
+	}
+
+	// Only component type supported (islands are part of components now)
+	if (!type) {
+		type = 'component';
+	} else if (type !== 'component') {
+		console.log(pc.red(`\n❌ Unknown type: ${type}\n`));
+		console.log(pc.dim('Valid type: component (c, comp)\n'));
+		return;
+	}
+
+	// Create component
+	await createComponent(name, options);
+}
+
+/**
+ * Create a new HTML component
+ */
+async function createComponent(name, options) {
+	const config = await loadConfig();
+	const componentsDir = config.components.path;
+
+	// Ask for component name if not provided
+	if (!name) {
+		name = await input({
+			message: 'Component name (PascalCase):',
+			validate: (value) => {
+				if (!value) return 'Component name is required';
+				if (!/^[A-Z][a-zA-Z0-9]*$/.test(value)) {
+					return 'Component name must be in PascalCase (e.g., MyComponent)';
+				}
+				return true;
+			}
+		});
+	}
+
+	// Validate component name
+	if (!/^[A-Z][a-zA-Z0-9]*$/.test(name)) {
+		console.log(
+			pc.red(
+				`\n❌ Invalid component name: ${name}\nComponent names must be in PascalCase (e.g., MyComponent)\n`
+			)
+		);
+		return;
+	}
+
+	// ALWAYS create directory-based components (consistent structure)
+	const componentPath = path.join(componentsDir, name);
+
+	// Check if component already exists
+	try {
+		await fs.access(componentPath);
+		console.log(pc.red(`\n❌ Component already exists: ${componentPath}\n`));
+		return;
+	} catch {
+		// Component doesn't exist, continue
+	}
+
+	// Skip wizard if requested
+	if (options.skipWizard) {
+		// Use flags if provided, otherwise defaults
+		const islandFramework = options.template || (options.islands ? 'vanilla' : null);
+		await generateDirectoryComponent(componentPath, name, options, {
+			description: `${name} component`,
+			category: 'General',
+			icon: 'mdi:puzzle',
+			props: {},
+			islandFramework
+		});
+		console.log(pc.green(`\n✓ Component created: ${componentPath}\n`));
+		return;
+	}
+
+	// Interactive wizard
+	console.log(pc.dim('\nLet\'s configure your component:\n'));
+
+	const description = await input({
+		message: 'Component description:',
+		default: `${name} component`
+	});
+
+	const category = await select({
+		message: 'Component category:',
+		choices: [
+			{ name: 'Layout', value: 'Layout' },
+			{ name: 'Navigation', value: 'Navigation' },
+			{ name: 'Forms', value: 'Forms' },
+			{ name: 'Content', value: 'Content' },
+			{ name: 'Media', value: 'Media' },
+			{ name: 'General', value: 'General' }
+		],
+		default: 'General'
+	});
+
+	const icon = await input({
+		message: 'Iconify icon (e.g., mdi:puzzle):',
+		default: 'mdi:puzzle'
+	});
+
+	// Ask if component should have an interactive island
+	const addIsland = await confirm({
+		message: 'Add interactive island?',
+		default: false
+	});
+
+	let islandFramework = null;
+	if (addIsland) {
+		islandFramework = await select({
+			message: 'Island framework:',
+			choices: [
+				{ name: 'Vanilla JS (0kb runtime)', value: 'vanilla' },
+				{ name: 'Svelte (Compiled, ~2kb)', value: 'svelte' },
+				{ name: 'Preact (React-like, ~4kb)', value: 'preact' },
+				{ name: 'Lit (Web Components, ~8kb)', value: 'lit' },
+				{ name: 'Alpine.js (HTML-first, ~15kb)', value: 'alpine' },
+				{ name: 'Vue (~35kb)', value: 'vue' },
+				{ name: 'React (~45kb)', value: 'react' }
+			],
+			default: 'vanilla'
+		});
+	}
+
+	// Ask for props
+	const props = {};
+	let addMoreProps = true;
+
+	console.log(pc.dim('\nAdd component properties (Enter = skip, adds default "title" prop):\n'));
+
+	while (addMoreProps) {
+		const addProp = await confirm({
+			message: 'Add a property?',
+			default: false
+		});
+
+		if (!addProp) {
+			addMoreProps = false;
+			// Add default title prop if no props were added
+			if (Object.keys(props).length === 0) {
+				props.title = {
+					type: 'string',
+					label: 'Title',
+					default: 'Beispiel Titel',
+					description: 'Titel der Komponente'
+				};
+				console.log(pc.dim('  ℹ Default "title" prop hinzugefügt\n'));
+			}
+			break;
+		}
+
+		const propName = await input({
+			message: 'Property name (camelCase):',
+			validate: (value) => {
+				if (!value) return 'Property name is required';
+				if (!/^[a-z][a-zA-Z0-9]*$/.test(value)) {
+					return 'Property name must be in camelCase (e.g., myProperty)';
+				}
+				if (props[value]) return 'Property already exists';
+				return true;
+			}
+		});
+
+		const propType = await select({
+			message: 'Property type:',
+			choices: [
+				{ name: 'String (text input)', value: 'string' },
+				{ name: 'Boolean (checkbox)', value: 'boolean' },
+				{ name: 'Number (number input)', value: 'number' },
+				{ name: 'Select (dropdown)', value: 'select' },
+				{ name: 'Color (color picker)', value: 'color' },
+				{ name: 'Image (image upload)', value: 'image' },
+				{ name: 'Rich Text (WYSIWYG editor)', value: 'richtext' }
+			]
+		});
+
+		const propLabel = await input({
+			message: 'Property label (display name):',
+			default: propName.charAt(0).toUpperCase() + propName.slice(1).replace(/([A-Z])/g, ' $1')
+		});
+
+		const propDescription = await input({
+			message: 'Property description (optional):',
+			default: ''
+		});
+
+		let propDefault = '';
+		let propOptions = null;
+		let propMin = null;
+		let propMax = null;
+
+		// Type-specific configuration
+		if (propType === 'string') {
+			propDefault = await input({
+				message: 'Default value:',
+				default: ''
+			});
+		} else if (propType === 'boolean') {
+			const defaultBool = await confirm({
+				message: 'Default value:',
+				default: false
+			});
+			propDefault = defaultBool;
+		} else if (propType === 'number') {
+			propDefault = await input({
+				message: 'Default value:',
+				default: '0',
+				validate: (v) => (!isNaN(Number(v)) ? true : 'Must be a number')
+			});
+			propDefault = Number(propDefault);
+
+			const hasMin = await confirm({
+				message: 'Set minimum value?',
+				default: false
+			});
+
+			if (hasMin) {
+				propMin = await input({
+					message: 'Minimum value:',
+					validate: (v) => (!isNaN(Number(v)) ? true : 'Must be a number')
+				});
+				propMin = Number(propMin);
+			}
+
+			const hasMax = await confirm({
+				message: 'Set maximum value?',
+				default: false
+			});
+
+			if (hasMax) {
+				propMax = await input({
+					message: 'Maximum value:',
+					validate: (v) => (!isNaN(Number(v)) ? true : 'Must be a number')
+				});
+				propMax = Number(propMax);
+			}
+		} else if (propType === 'select') {
+			const optionsInput = await input({
+				message: 'Options (comma-separated):',
+				validate: (v) => (v ? true : 'At least one option required')
+			});
+			propOptions = optionsInput.split(',').map((o) => o.trim());
+			propDefault = propOptions[0];
+		} else if (propType === 'color') {
+			propDefault = await input({
+				message: 'Default color (hex):',
+				default: '#000000',
+				validate: (v) => (/^#[0-9A-Fa-f]{6}$/.test(v) ? true : 'Must be hex color (e.g., #ff0000)')
+			});
+		} else if (propType === 'richtext') {
+			propDefault = '<p></p>';
+		}
+
+		// Build prop definition
+		props[propName] = {
+			type: propType,
+			label: propLabel,
+			default: propDefault
+		};
+
+		if (propDescription) props[propName].description = propDescription;
+		if (propOptions) props[propName].options = propOptions;
+		if (propMin !== null) props[propName].min = propMin;
+		if (propMax !== null) props[propName].max = propMax;
+	}
+
+	// Generate component directory
+	await generateDirectoryComponent(componentPath, name, options, {
+		description,
+		category,
+		icon,
+		props,
+		islandFramework
+	});
+
+	console.log(pc.green(`\n✓ Component created: ${componentPath}`));
+	console.log(pc.dim(`\nNext steps:`));
+	console.log(pc.dim(`  1. Edit component.html in ${name}/ directory`));
+	if (islandFramework) {
+		console.log(pc.dim(`  2. Add island logic in islands/ directory`));
+		console.log(pc.dim(`  3. Test with: wm dev`));
+	} else {
+		console.log(pc.dim(`  2. Test with: wm dev`));
+	}
+	console.log('');
+}
+
+/**
+ * Generate directory-based component with component.json
+ */
+async function generateDirectoryComponent(componentDir, name, options, config = {}) {
+	const {
+		description = `${name} component`,
+		category = 'General',
+		props = {},
+		islandFramework = null
+	} = config;
+
+	// Create component directory
+	await fs.mkdir(componentDir, { recursive: true });
+
+	// Create component.json (metadata + props + islands config)
+	const componentJson = {
+		name,
+		version: '1.0.0',
+		description,
+		category
+	};
+
+	// Add props if any
+	if (Object.keys(props).length > 0) {
+		componentJson.props = props;
+	}
+
+	// Add islands config if needed
+	if (islandFramework) {
+		// Use .jsx extension for React/Preact, .js for others
+		const fileExtension = (islandFramework === 'react' || islandFramework === 'preact') ? '.jsx' : '.js';
+
+		componentJson.islands = [
+			{
+				name: toKebabCase(name),
+				file: `islands/${toKebabCase(name)}${fileExtension}`,
+				framework: islandFramework,
+				props: {}
+			}
+		];
+	}
+
+	await fs.writeFile(
+		path.join(componentDir, 'component.json'),
+		JSON.stringify(componentJson, null, 2),
+		'utf-8'
+	);
+
+	// Generate component.html (just HTML, no script blocks)
+	let exampleHtml = '';
+
+	if (islandFramework) {
+		// Island component: demonstriere title prop
+		const hasTitle = props.title;
+		const islandPropsJson = hasTitle ? `{"title": "{{title}}"}` : '{}';
+
+		exampleHtml = `\t<div
+		data-island="${toKebabCase(name)}"
+		data-island-props='${islandPropsJson}'
+		class="p-6 bg-white rounded-lg border border-gray-200"
+	>
+		<!-- Island wird hier initialisiert -->
+	</div>`;
+	} else {
+		// Normale component: zeige title an
+		const hasTitle = props.title;
+		if (hasTitle) {
+			exampleHtml = `\t<div class="p-6 bg-white rounded-lg border border-gray-200">
+		<h2 class="text-2xl font-bold text-gray-900 mb-4">{{title}}</h2>
+		<p class="text-gray-600">Dein Component-Inhalt hier</p>
+	</div>`;
+		} else {
+			exampleHtml = `\t<div class="p-6 bg-white rounded-lg border border-gray-200">
+		<p class="text-gray-600">Dein Component-Inhalt hier</p>
+	</div>`;
+		}
+	}
+
+	const componentHtml = `<!-- ${name} Component -->
+<div class="${toKebabCase(name)}">
+${exampleHtml}
+</div>
+
+<style>
+	/* Custom CSS falls benötigt */
+	.${toKebabCase(name)} {
+		/* Beispiel für Custom Styles */
+	}
+</style>
+`;
+
+	await fs.writeFile(path.join(componentDir, 'component.html'), componentHtml, 'utf-8');
+
+	// Create islands directory if needed
+	if (islandFramework) {
+		const islandsDir = path.join(componentDir, 'islands');
+		await fs.mkdir(islandsDir, { recursive: true });
+
+		// Determine file extension based on framework
+		const fileExtension = (islandFramework === 'react' || islandFramework === 'preact') ? '.jsx' : '.js';
+		const templateExtension = (islandFramework === 'react' || islandFramework === 'preact') ? '.jsx' : '.js';
+
+		// Copy template file
+		const templateFile =
+			islandFramework === 'svelte'
+				? path.join(
+						import.meta.dirname,
+						'../templates/islands/svelte.js'
+					)
+				: path.join(
+						import.meta.dirname,
+						`../templates/islands/${islandFramework}${templateExtension}`
+					);
+
+		let templateContent = await fs.readFile(templateFile, 'utf-8');
+
+		// Replace placeholders
+		templateContent = templateContent
+			.replace(/\{\{NAME\}\}/g, name)
+			.replace(/\{\{KEBAB_NAME\}\}/g, toKebabCase(name));
+
+		await fs.writeFile(
+			path.join(islandsDir, `${toKebabCase(name)}${fileExtension}`),
+			templateContent,
+			'utf-8'
+		);
+
+		// If Svelte, also copy the .svelte component
+		if (islandFramework === 'svelte') {
+			const svelteComponentTemplate = path.join(
+				import.meta.dirname,
+				'../templates/islands/svelte-component.svelte'
+			);
+
+			let svelteContent = await fs.readFile(svelteComponentTemplate, 'utf-8');
+			svelteContent = svelteContent
+				.replace(/\{\{NAME\}\}/g, name)
+				.replace(/\{\{KEBAB_NAME\}\}/g, toKebabCase(name));
+
+			await fs.writeFile(path.join(islandsDir, `${name}.svelte`), svelteContent, 'utf-8');
+		}
+	}
+
+	// Create assets directory if needed
+	if (options.assets) {
+		await fs.mkdir(path.join(componentDir, 'assets'), { recursive: true });
+	}
+}
+
+/**
+ * Convert PascalCase to kebab-case
+ */
+function toKebabCase(str) {
+	return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
+
+/**
+ * List available island templates
+ */
+function listAvailableTemplates() {
+	console.log(pc.cyan('\n📋 Available Island Templates\n'));
+
+	const templates = [
+		{
+			name: 'vanilla',
+			runtime: '0kb',
+			compiled: '✅',
+			description: 'Pure JavaScript - No dependencies'
+		},
+		{
+			name: 'lit',
+			runtime: '~8kb',
+			compiled: '❌',
+			description: 'Web Components - Standard-based'
+		},
+		{
+			name: 'preact',
+			runtime: '~4kb',
+			compiled: '❌',
+			description: 'React-like - Smallest alternative'
+		},
+		{
+			name: 'alpine',
+			runtime: '~15kb',
+			compiled: '❌',
+			description: 'HTML-first - Like Vue directives'
+		},
+		{
+			name: 'react',
+			runtime: '~45kb',
+			compiled: '❌',
+			description: 'React - Largest ecosystem'
+		},
+		{
+			name: 'svelte',
+			runtime: '~2kb*',
+			compiled: '✅',
+			description: 'Svelte - Compiles to Vanilla JS'
+		}
+	];
+
+	console.log(
+		pc.dim(
+			'┌─────────────┬──────────────┬───────────┬────────────────────────────────────┐'
+		)
+	);
+	console.log(
+		pc.dim('│') +
+			pc.bold(' Template    ') +
+			pc.dim('│') +
+			pc.bold(' Runtime Size ') +
+			pc.dim('│') +
+			pc.bold(' Compiled? ') +
+			pc.dim('│') +
+			pc.bold(' Description                        ') +
+			pc.dim('│')
+	);
+	console.log(
+		pc.dim(
+			'├─────────────┼──────────────┼───────────┼────────────────────────────────────┤'
+		)
+	);
+
+	templates.forEach((template) => {
+		const nameCol = template.name.padEnd(11);
+		const runtimeCol = template.runtime.padEnd(12);
+		const compiledCol = template.compiled.padEnd(9);
+		const descCol = template.description.padEnd(35);
+
+		console.log(
+			pc.dim('│ ') +
+				pc.cyan(nameCol) +
+				pc.dim(' │ ') +
+				pc.green(runtimeCol) +
+				pc.dim(' │ ') +
+				compiledCol +
+				pc.dim(' │ ') +
+				descCol +
+				pc.dim(' │')
+		);
+	});
+
+	console.log(
+		pc.dim(
+			'└─────────────┴──────────────┴───────────┴────────────────────────────────────┘'
+		)
+	);
+
+	console.log(pc.dim('\n*Svelte runtime is minimal because most logic compiles at build-time\n'));
+
+	console.log(pc.bold('Usage Examples:\n'));
+	console.log(pc.dim('  # Generate component with vanilla JavaScript island'));
+	console.log(pc.cyan('  wm generate component Counter --islands\n'));
+
+	console.log(pc.dim('  # Generate component with React island'));
+	console.log(pc.cyan('  wm generate component ProductList --islands --template=react\n'));
+
+	console.log(pc.dim('  # Generate component with Svelte island and assets'));
+	console.log(pc.cyan('  wm generate component ImageGallery --islands --template=svelte --assets\n'));
+
+	console.log(pc.bold('Next Steps:\n'));
+	console.log(pc.dim('  1. Choose a template based on your needs'));
+	console.log(pc.dim('  2. Generate component: ') + pc.cyan('wm g component Name --islands --template=<name>'));
+	console.log(pc.dim('  3. Install dependencies: ') + pc.cyan('cd Name && npm install'));
+	console.log(pc.dim('  4. Edit island code in islands/ directory'));
+	console.log(pc.dim('  5. Build and test: ') + pc.cyan('wm build && wm push'));
+	console.log('');
+}

package/src/commands/info.js

@@ -0,0 +1,49 @@
+import { loadAuth } from '../utils/auth.js';
+import { logger } from '../../../core/src/index.js';
+import pc from 'picocolors';
+
+/**
+ * Info command - Show current project information
+ */
+export async function info(options = {}) {
+	try {
+		const auth = loadAuth();
+
+		if (!auth) {
+			logger.error('Not logged in. Run ' + pc.cyan('wm login') + ' first');
+			process.exit(1);
+		}
+
+		showProjectInfo(auth);
+	} catch (error) {
+		logger.error(`Info command failed: ${error.message}`);
+		process.exit(1);
+	}
+}
+
+/**
+ * Show current project information
+ */
+function showProjectInfo(auth) {
+	console.log();
+	logger.info(pc.bold('Current Project'));
+	console.log();
+
+	// Build CMS URL from base URL and tenant subdomain
+	let cmsUrl = 'Not set';
+	if (auth.baseUrl && auth.tenant?.subdomain) {
+		try {
+			const baseUrl = new URL(auth.baseUrl);
+			const subdomain = auth.tenant.subdomain;
+			cmsUrl = `${baseUrl.protocol}//${subdomain}.cms.${baseUrl.host}`;
+		} catch (error) {
+			cmsUrl = auth.baseUrl;
+		}
+	}
+
+	console.log(pc.gray('  CMS URL:     ') + pc.cyan(cmsUrl));
+	console.log(pc.gray('  User:        ') + pc.cyan(auth.user?.email || 'Not set'));
+	console.log();
+	console.log(pc.gray('  To switch project, run: ') + pc.cyan('wm switch'));
+	console.log();
+}