@webmate-studio/cli 0.1.0

package/src/commands/init.js

@@ -0,0 +1,452 @@
+import { existsSync, mkdirSync, writeFileSync } from 'fs';
+import { join } from 'path';
+import { logger } from '../../../core/src/index.js';
+import pc from 'picocolors';
+
+/**
+ * Init command - create new component project
+ */
+export async function initCommand(directory) {
+	const projectPath = join(process.cwd(), directory);
+
+	logger.info(`Initializing Webmate project in ${pc.cyan(projectPath)}`);
+
+	// Create directories
+	const dirs = [
+		'components',
+		'tokens',
+		'styles'
+	];
+
+	for (const dir of dirs) {
+		const dirPath = join(projectPath, dir);
+		if (!existsSync(dirPath)) {
+			mkdirSync(dirPath, { recursive: true });
+			logger.success(`Created ${dir}/`);
+		}
+	}
+
+	// Create wm.config.js
+	const configPath = join(projectPath, 'wm.config.js');
+	if (!existsSync(configPath)) {
+		const configContent = `export default {
+	// Component configuration
+	components: {
+		path: './components',
+		styles: ['./tokens/tokens.css', './styles/base.css'],
+		fonts: [],
+		islands: {
+			path: './islands',
+			framework: 'lit' // or 'vanilla'
+		}
+	},
+
+	// Preview server
+	preview: {
+		port: 5173,
+		theme: 'light',
+		viewport: {
+			width: 1440,
+			height: 900
+		},
+		backgrounds: ['#ffffff', '#f5f5f5', '#000000']
+	},
+
+	// Build output
+	output: {
+		dir: './dist',
+		format: 'esm',
+		minify: false
+	}
+};
+`;
+		writeFileSync(configPath, configContent, 'utf8');
+		logger.success('Created wm.config.js');
+	}
+
+	// Create tokens.css
+	const tokensPath = join(projectPath, 'tokens/tokens.css');
+	if (!existsSync(tokensPath)) {
+		const tokensContent = `/**
+ * Design Tokens - Custom Overrides
+ *
+ * IMPORTANT: The Webmate CMS provides base design tokens automatically.
+ * This file is for ADDITIONAL or OVERRIDING tokens specific to your components.
+ *
+ * CMS-provided tokens include:
+ * - Colors (primary, secondary, text colors)
+ * - Typography (font families, sizes, line heights)
+ * - Spacing (consistent spacing scale)
+ * - Border radius, shadows, transitions
+ *
+ * Use this file to:
+ * 1. Add component-specific tokens
+ * 2. Override CMS tokens for specific use cases
+ * 3. Define custom animations or effects
+ */
+
+:root {
+	/* Example: Component-specific color variations */
+	/* --my-component-accent: #705ef0; */
+
+	/* Example: Custom spacing for specific layouts */
+	/* --my-grid-gap: 2rem; */
+
+	/* Example: Component-specific animation */
+	/* --my-transition-fast: 150ms ease-in-out; */
+}
+`;
+		writeFileSync(tokensPath, tokensContent, 'utf8');
+		logger.success('Created tokens/tokens.css');
+	}
+
+	// Create base.css
+	const basePath = join(projectPath, 'styles/base.css');
+	if (!existsSync(basePath)) {
+		const baseContent = `* {
+	box-sizing: border-box;
+	margin: 0;
+	padding: 0;
+}
+
+body {
+	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+	font-size: var(--wm-font-size-base);
+	color: var(--wm-color-text-primary);
+	line-height: 1.6;
+}
+`;
+		writeFileSync(basePath, baseContent, 'utf8');
+		logger.success('Created styles/base.css');
+	}
+
+	// Create ExampleSimple component (directory structure)
+	const exampleSimpleDir = join(projectPath, 'components/ExampleSimple');
+	if (!existsSync(exampleSimpleDir)) {
+		mkdirSync(exampleSimpleDir, { recursive: true });
+
+		// component.html
+		const componentHtmlPath = join(exampleSimpleDir, 'component.html');
+		const componentHtmlContent = `<!-- Simple Example Component -->
+<!-- This is a basic HTML-only component using Tailwind CSS classes -->
+
+<div class="p-6 bg-white rounded-lg shadow-md">
+	<h2 class="text-2xl font-semibold mb-4">
+		{{title}}
+	</h2>
+
+	<p class="text-gray-600 mb-4">
+		This is a simple HTML component. It uses Tailwind CSS classes for styling.
+		Edit this file to customize your component.
+	</p>
+
+	<button class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors">
+		Get Started
+	</button>
+</div>
+`;
+		writeFileSync(componentHtmlPath, componentHtmlContent, 'utf8');
+
+		// component.json
+		const componentJsonPath = join(exampleSimpleDir, 'component.json');
+		const componentJsonContent = `{
+	"name": "ExampleSimple",
+	"version": "1.0.0",
+	"description": "A simple example component using Tailwind CSS",
+	"category": "examples",
+	"props": {
+		"title": {
+			"type": "string",
+			"label": "Title",
+			"default": "Welcome to Webmate!",
+			"description": "Main heading text"
+		}
+	}
+}
+`;
+		writeFileSync(componentJsonPath, componentJsonContent, 'utf8');
+
+		logger.success('Created components/ExampleSimple/');
+	}
+
+	// Create ExampleExtended component (directory structure with island)
+	const exampleExtendedDir = join(projectPath, 'components/ExampleExtended');
+	if (!existsSync(exampleExtendedDir)) {
+		mkdirSync(exampleExtendedDir, { recursive: true });
+
+		// component.html
+		const componentHtmlPath = join(exampleExtendedDir, 'component.html');
+		const componentHtmlContent = `<!-- Extended Example Component with Island -->
+<!-- This component demonstrates the full feature set including interactive islands -->
+
+<div class="p-8 bg-gradient-to-br from-blue-50 to-purple-50 rounded-xl shadow-lg">
+	<div class="mb-6">
+		<h2 class="text-3xl font-bold text-gray-900 mb-2">
+			{{title}}
+		</h2>
+		<p class="text-gray-600">
+			{{subtitle}}
+		</p>
+	</div>
+
+	<!-- Interactive Island (Vanilla JS) -->
+	<!-- Islands can also use: React, Svelte, Vue, Preact, Alpine.js, or Lit -->
+	<div
+		data-island="counter"
+		data-island-props='{"initialCount": 0, "label": "Clicks"}'
+		class="p-6 bg-white rounded-lg border-2 border-blue-200"
+	>
+		<p class="text-sm text-gray-500 mb-4">
+			💡 This counter is powered by an interactive island.
+			Islands enable client-side JavaScript while keeping the rest of the page static.
+		</p>
+		<div id="counter-display" class="text-center">
+			<div class="text-4xl font-bold text-blue-600 mb-2">0</div>
+			<div class="text-sm text-gray-600 mb-4">Clicks</div>
+			<button
+				id="increment-btn"
+				class="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
+			>
+				Increment
+			</button>
+		</div>
+	</div>
+
+	<div class="mt-6 p-4 bg-blue-100 rounded-lg">
+		<p class="text-sm text-blue-900">
+			<strong>Supported Island Frameworks:</strong>
+			Vanilla JS, React, Svelte, Vue, Preact, Alpine.js, Lit
+		</p>
+	</div>
+</div>
+`;
+		writeFileSync(componentHtmlPath, componentHtmlContent, 'utf8');
+
+		// component.json
+		const componentJsonPath = join(exampleExtendedDir, 'component.json');
+		const componentJsonContent = `{
+	"name": "ExampleExtended",
+	"version": "1.0.0",
+	"description": "Extended example component with interactive island",
+	"category": "examples",
+	"props": {
+		"title": {
+			"type": "string",
+			"default": "Interactive Component",
+			"description": "Component heading text"
+		},
+		"subtitle": {
+			"type": "string",
+			"default": "This component includes an interactive island for client-side interactivity.",
+			"description": "Component subtitle text"
+		}
+	},
+	"islands": [
+		{
+			"name": "counter",
+			"file": "islands/counter.js",
+			"framework": "vanilla",
+			"props": {
+				"initialCount": {
+					"type": "number",
+					"default": 0,
+					"description": "Starting count value"
+				},
+				"label": {
+					"type": "string",
+					"default": "Clicks",
+					"description": "Label for the counter display"
+				}
+			}
+		}
+	]
+}
+`;
+		writeFileSync(componentJsonPath, componentJsonContent, 'utf8');
+
+		// islands/counter.js (Vanilla JS Island)
+		const islandsDir = join(exampleExtendedDir, 'islands');
+		mkdirSync(islandsDir, { recursive: true });
+		const counterIslandPath = join(islandsDir, 'counter.js');
+		const counterIslandContent = `/**
+ * Counter Island - Vanilla JavaScript
+ *
+ * This is an example of a client-side interactive island.
+ * Islands are lazy-loaded and hydrated only when needed.
+ *
+ * You can also use:
+ * - React (.jsx)
+ * - Svelte (.svelte)
+ * - Vue (.vue)
+ * - Preact (.jsx with preact)
+ * - Alpine.js (inline in HTML)
+ * - Lit (.js with lit-element)
+ */
+
+export default class CounterIsland {
+	constructor(element, props) {
+		this.element = element;
+		this.props = props;
+		this.count = props.initialCount || 0;
+		this.label = props.label || 'Count';
+	}
+
+	init() {
+		// Get DOM elements
+		this.display = this.element.querySelector('#counter-display > div:first-child');
+		this.labelElement = this.element.querySelector('#counter-display > div:nth-child(2)');
+		this.button = this.element.querySelector('#increment-btn');
+
+		// Set initial label
+		if (this.labelElement) {
+			this.labelElement.textContent = this.label;
+		}
+
+		// Add event listener
+		if (this.button) {
+			this.button.addEventListener('click', () => this.increment());
+		}
+
+		// Update display
+		this.updateDisplay();
+	}
+
+	increment() {
+		this.count++;
+		this.updateDisplay();
+
+		// Optional: Add animation
+		this.display?.classList.add('scale-110');
+		setTimeout(() => {
+			this.display?.classList.remove('scale-110');
+		}, 200);
+	}
+
+	updateDisplay() {
+		if (this.display) {
+			this.display.textContent = this.count;
+		}
+	}
+
+	// Cleanup when island is destroyed
+	destroy() {
+		if (this.button) {
+			this.button.removeEventListener('click', this.increment);
+		}
+	}
+}
+`;
+		writeFileSync(counterIslandPath, counterIslandContent, 'utf8');
+
+		logger.success('Created components/ExampleExtended/ (with island)');
+	}
+
+	// Create .gitignore
+	const gitignorePath = join(projectPath, '.gitignore');
+	if (!existsSync(gitignorePath)) {
+		const gitignoreContent = `node_modules/
+dist/
+.DS_Store
+*.log
+`;
+		writeFileSync(gitignorePath, gitignoreContent, 'utf8');
+		logger.success('Created .gitignore');
+	}
+
+	// Create README
+	const readmePath = join(projectPath, 'README.md');
+	if (!existsSync(readmePath)) {
+		const readmeContent = `# Webmate Components
+
+HTML-first component collection built with Webmate CLI.
+
+## Getting Started
+
+### Development
+\`\`\`bash
+wm dev
+\`\`\`
+
+Start the preview server to see your components live. The preview updates automatically when you save changes.
+
+### Build
+\`\`\`bash
+wm build
+\`\`\`
+
+Build components for production deployment. Generates optimized HTML and JavaScript bundles.
+
+### Deploy to CMS
+\`\`\`bash
+export CMS_TOKEN="your-token"
+wm push
+\`\`\`
+
+## Component Types
+
+### Simple Components (Single HTML File)
+Perfect for static content and basic layouts. See \`components/ExampleSimple.html\` for an example.
+
+### Extended Components (Directory Structure)
+For complex components with interactive islands, assets, and metadata. See \`components/ExampleExtended/\` for an example.
+
+## Interactive Islands
+
+Add client-side interactivity with Islands Architecture:
+
+\`\`\`html
+<div
+	data-island="my-island"
+	data-island-props='{"key": "value"}'
+>
+	<!-- Your HTML content -->
+</div>
+\`\`\`
+
+### Supported Frameworks
+- Vanilla JavaScript
+- React
+- Svelte
+- Vue
+- Preact
+- Alpine.js
+- Lit
+
+### Generate a New Component with Island
+\`\`\`bash
+wm g component MyComponent --islands --template vanilla
+\`\`\`
+
+## Styling
+
+Components use Tailwind CSS for styling. Design tokens from the CMS are automatically available.
+
+Custom tokens can be added in \`tokens/tokens.css\`.
+
+## Documentation
+
+- [Component Architecture](https://docs.webmate.io/components)
+- [Islands Architecture](https://docs.webmate.io/islands)
+- [CLI Reference](https://docs.webmate.io/cli)
+`;
+		writeFileSync(readmePath, readmeContent, 'utf8');
+		logger.success('Created README.md');
+	}
+
+	console.log(`
+${pc.green('✨ Project initialized successfully!')}
+
+${pc.bold('Next steps:')}
+  ${pc.cyan('cd ' + directory)}
+  ${pc.cyan('wm dev')}        # Start preview server
+  ${pc.cyan('wm build')}      # Build for production
+  ${pc.cyan('wm push')}       # Deploy to CMS
+
+${pc.bold('Example components created:')}
+  ${pc.gray('components/ExampleSimple/')}              # Basic HTML component
+  ${pc.gray('components/ExampleExtended/')}            # Component with interactive island
+
+${pc.gray('Edit wm.config.js to configure your project')}
+${pc.gray('Design tokens in tokens/tokens.css can override CMS defaults')}
+`);
+}

package/src/commands/login.js

@@ -0,0 +1,193 @@
+import { input, password, select } from '@inquirer/prompts';
+import { logger } from '../../../core/src/index.js';
+import { saveAuth, loadAuth, getCmsBaseUrl } from '../utils/auth.js';
+import pc from 'picocolors';
+
+/**
+ * Custom fetch wrapper that accepts self-signed certificates for localhost
+ */
+async function secureFetch(url, options = {}) {
+	const isLocalhost = url.includes('localhost') || url.includes('127.0.0.1');
+
+	if (isLocalhost) {
+		// Temporarily disable TLS verification for localhost
+		const originalValue = process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+		process.env.NODE_TLS_REJECT_UNAUTHORIZED = '0';
+
+		try {
+			return await fetch(url, options);
+		} finally {
+			// Restore original value
+			if (originalValue !== undefined) {
+				process.env.NODE_TLS_REJECT_UNAUTHORIZED = originalValue;
+			} else {
+				delete process.env.NODE_TLS_REJECT_UNAUTHORIZED;
+			}
+		}
+	}
+
+	// For non-localhost, use regular fetch
+	return fetch(url, options);
+}
+
+/**
+ * Login command - Interactive login flow
+ */
+export async function loginCommand(options = {}) {
+	console.log('');
+	logger.info(pc.bold('Webmate CLI Login'));
+	console.log('');
+
+	try {
+		// Check if already logged in
+		const existingAuth = loadAuth();
+		if (existingAuth?.user) {
+			const shouldLogout = await select({
+				message: `Bereits eingeloggt als ${pc.cyan(existingAuth.user.email)}. Neu anmelden?`,
+				choices: [
+					{ name: 'Nein, weiter mit aktuellem Login', value: false },
+					{ name: 'Ja, neu anmelden', value: true }
+				]
+			});
+
+			if (!shouldLogout) {
+				logger.info('Login abgebrochen');
+				return;
+			}
+		}
+
+		// Get base URL (optional, default to localhost for dev)
+		// Note: CLI API routes are under app.localhost (account subdomain)
+		const baseUrl = options.url || await input({
+			message: 'Webmate Base URL:',
+			default: 'https://app.localhost:3029',
+			validate: (value) => {
+				try {
+					new URL(value);
+					return true;
+				} catch {
+					return 'Bitte gültige URL eingeben';
+				}
+			}
+		});
+
+		// Get credentials
+		const email = await input({
+			message: 'E-Mail:',
+			validate: (value) => {
+				if (!value || !value.includes('@')) {
+					return 'Bitte gültige E-Mail-Adresse eingeben';
+				}
+				return true;
+			}
+		});
+
+		const pwd = await password({
+			message: 'Passwort:',
+			mask: '*'
+		});
+
+		console.log('');
+		logger.info('Authentifiziere...');
+
+		// Login API call
+		const loginUrl = `${baseUrl}/api/cli/auth/login`;
+		const loginResponse = await secureFetch(loginUrl, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ email, password: pwd })
+		});
+
+		if (!loginResponse.ok) {
+			const error = await loginResponse.json();
+			throw new Error(error.error || 'Login fehlgeschlagen');
+		}
+
+		const loginData = await loginResponse.json();
+		logger.success(`Eingeloggt als ${pc.cyan(loginData.user.email)}`);
+
+		// Get list of tenants
+		console.log('');
+		logger.info('Lade Projekte...');
+
+		const tenantsUrl = `${baseUrl}/api/cli/tenants?userId=${loginData.user.id}`;
+		const tenantsResponse = await secureFetch(tenantsUrl);
+
+		if (!tenantsResponse.ok) {
+			throw new Error('Fehler beim Laden der Projekte');
+		}
+
+		const tenantsData = await tenantsResponse.json();
+
+		if (!tenantsData.tenants || tenantsData.tenants.length === 0) {
+			logger.warning('Keine Projekte gefunden. Bitte erstelle zuerst ein Projekt im CMS.');
+			return;
+		}
+
+		// Let user select tenant
+		console.log('');
+		const selectedTenantId = await select({
+			message: 'Wähle ein Projekt:',
+			choices: tenantsData.tenants.map(t => ({
+				name: `${t.name} (${t.subdomain})`,
+				value: t.id,
+				description: `Erstellt am ${new Date(t.createdAt).toLocaleDateString('de-DE')}`
+			}))
+		});
+
+		const selectedTenant = tenantsData.tenants.find(t => t.id === selectedTenantId);
+
+		// Generate API token for selected tenant
+		console.log('');
+		logger.info('Generiere API-Token...');
+
+		const tokenUrl = `${baseUrl}/api/cli/tenants`;
+		const tokenResponse = await secureFetch(tokenUrl, {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({
+				userId: loginData.user.id,
+				tenantId: selectedTenantId
+			})
+		});
+
+		if (!tokenResponse.ok) {
+			throw new Error('Fehler beim Generieren des API-Tokens');
+		}
+
+		const tokenData = await tokenResponse.json();
+
+		// Save auth data
+		saveAuth({
+			user: loginData.user,
+			tenant: selectedTenant,
+			apiToken: tokenData.apiToken,
+			baseUrl,
+			loginAt: new Date().toISOString()
+		});
+
+		console.log('');
+		logger.success(pc.green('✨ Login erfolgreich!'));
+		console.log('');
+		console.log(`  ${pc.bold('Projekt:')} ${pc.cyan(selectedTenant.name)}`);
+		console.log(`  ${pc.bold('Subdomain:')} ${pc.cyan(selectedTenant.subdomain)}`);
+		console.log('');
+		console.log(`${pc.gray('Du kannst jetzt')} ${pc.cyan('wm dev')} ${pc.gray('und')} ${pc.cyan('wm push')} ${pc.gray('verwenden.')}`);
+		console.log('');
+
+	} catch (error) {
+		console.log('');
+		logger.error(`Login fehlgeschlagen: ${error.message}`);
+
+		// Detaillierte Fehlerausgabe für Debugging
+		if (error.cause) {
+			logger.error(`Ursache: ${error.cause.message || error.cause}`);
+		}
+		if (error.stack) {
+			console.error('\nStack trace:');
+			console.error(error.stack);
+		}
+
+		process.exit(1);
+	}
+}

package/src/commands/logout.js

@@ -0,0 +1,20 @@
+import { clearAuth } from '../utils/auth.js';
+import { logger } from '../../../core/src/index.js';
+import pc from 'picocolors';
+
+/**
+ * Logout command - removes stored authentication
+ */
+export async function logout(options = {}) {
+	try {
+		// Clear authentication
+		clearAuth();
+
+		logger.success('Successfully logged out');
+		logger.info('Run ' + pc.cyan('wm login') + ' to log in again');
+
+	} catch (error) {
+		logger.error(`Logout failed: ${error.message}`);
+		process.exit(1);
+	}
+}