create-ripple 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Ripple
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,50 @@
+# create-ripple-app
+
+Interactive CLI tool for creating new Ripple applications.
+
+## Usage
+
+### Interactive Mode
+
+```bash
+npm create ripple-app
+# or
+npx create-ripple-app
+# or
+yarn create ripple-app
+# or
+pnpm create ripple-app
+```
+
+### With Arguments
+
+```bash
+npm create ripple-app my-app
+# or
+npx create-ripple-app my-app basic
+```
+
+## Features
+
+- 🎯 **Interactive prompts** - Guides you through project setup
+- 📁 **Template selection** - Choose from predefined templates
+- ✅ **Project validation** - Ensures valid project names
+- 🎨 **Beautiful CLI** - Colored output with progress indicators
+- ⚡ **Fast setup** - Quickly scaffold new Ripple projects
+
+## Templates
+
+### Basic
+A minimal Ripple application with:
+- Vite for development and building
+- TypeScript support
+- Prettier for code formatting
+- Basic project structure
+
+## Requirements
+
+- Node.js 18.0.0 or higher
+
+## License
+
+MIT

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "create-ripple",
+  "version": "0.1.0",
+  "description": "Interactive CLI tool for creating Ripple applications",
+  "type": "module",
+  "license": "MIT",
+  "author": "Ripple Team",
+  "keywords": [
+    "ripple",
+    "cli",
+    "scaffold",
+    "template",
+    "create-app"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/trueadm/ripple.git",
+    "directory": "packages/create-ripple"
+  },
+  "bugs": {
+    "url": "https://github.com/trueadm/ripple/issues"
+  },
+  "homepage": "https://ripplejs.com",
+  "bin": {
+    "create-ripple": "./src/index.js"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "scripts": {
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage",
+    "test:ui": "vitest --ui",
+    "format": "prettier --write .",
+    "format:check": "prettier --check ."
+  },
+  "dependencies": {
+    "commander": "^12.1.0",
+    "prompts": "^2.4.2",
+    "kleur": "^4.1.5",
+    "degit": "^2.8.4",
+    "ora": "^8.1.0"
+  },
+  "devDependencies": {
+    "prettier": "^3.6.2",
+    "vitest": "catalog:",
+    "jsdom": "catalog:",
+    "@types/prompts": "^2.4.9"
+  }
+}

package/src/commands/create.js

@@ -0,0 +1,144 @@
+import { resolve } from 'node:path';
+import { existsSync } from 'node:fs';
+import { green, cyan, dim, red } from 'kleur/colors';
+import { validateProjectName } from '../lib/validation.js';
+import { validateTemplate, getTemplateNames } from '../lib/templates.js';
+import {
+	promptProjectName,
+	promptTemplate,
+	promptOverwrite,
+	promptPackageManager,
+	promptGitInit
+} from '../lib/prompts.js';
+import { createProject } from '../lib/project-creator.js';
+
+/**
+ * Create command handler
+ * @param {string} projectName - Project name (optional)
+ * @param {object} options - Command options
+ */
+export async function createCommand(projectName, options) {
+	console.log();
+	console.log(cyan('🌊 Welcome to Create Ripple App!'));
+	console.log(dim("Let's create a new Ripple application"));
+	console.log();
+
+	// Step 1: Get or validate project name
+	if (!projectName) {
+		projectName = await promptProjectName();
+	} else {
+		const validation = validateProjectName(projectName);
+		if (!validation.valid) {
+			console.error(red(`✖ ${validation.message}`));
+			process.exit(1);
+		}
+	}
+
+	// Step 2: Get template
+	let template = options.template;
+	if (!template) {
+		template = await promptTemplate();
+	} else {
+		// Validate template
+		if (!validateTemplate(template)) {
+			console.error(red(`✖ Template "${template}" not found`));
+			console.error(`Available templates: ${getTemplateNames().join(', ')}`);
+			process.exit(1);
+		}
+	}
+
+	// Step 3: Get package manager
+	let packageManager = options.packageManager || 'npm';
+	if (!options.packageManager && !options.yes) {
+		packageManager = await promptPackageManager();
+	}
+
+	// Step 4: Check directory and handle conflicts
+	const projectPath = resolve(process.cwd(), projectName);
+	if (existsSync(projectPath) && !options.yes) {
+		const shouldOverwrite = await promptOverwrite(projectName);
+		if (!shouldOverwrite) {
+			console.log(red('✖ Operation cancelled'));
+			process.exit(1);
+		}
+	}
+
+	// Step 5: Git initialization preference
+	let gitInit = true;
+	if (!options.git && !options.yes) {
+		gitInit = await promptGitInit();
+	} else if (options.git === false) {
+		gitInit = false;
+	}
+
+	// Step 6: Create the project
+	console.log();
+	console.log(`Creating Ripple app in ${green(projectPath)}...`);
+	console.log();
+
+	try {
+		await createProject({
+			projectName,
+			projectPath,
+			template,
+			packageManager,
+			typescript: true,
+			gitInit
+		});
+
+		showNextSteps(projectName, packageManager);
+	} catch (error) {
+		console.error(red('✖ Failed to create project:'));
+		console.error(error.message);
+		process.exit(1);
+	}
+}
+
+/**
+ * Show next steps to the user
+ * @param {string} projectName - The created project name
+ * @param {string} packageManager - Package manager used
+ */
+function showNextSteps(projectName, packageManager) {
+	const installCommand = getInstallCommand(packageManager);
+	const devCommand = getDevCommand(packageManager);
+
+	console.log();
+	console.log(green('🎉 Success! Your Ripple app is ready to go.'));
+	console.log();
+	console.log('Next steps:');
+	console.log(`  ${dim('cd')} ${projectName}`);
+	console.log(`  ${dim(installCommand)}`);
+	console.log(`  ${dim(devCommand)}`);
+	console.log();
+	console.log('Happy coding! 🌊');
+	console.log();
+}
+
+/**
+ * Get install command for package manager
+ * @param {string} packageManager - Package manager name
+ * @returns {string} - Install command
+ */
+function getInstallCommand(packageManager) {
+	const commands = {
+		npm: 'npm install',
+		yarn: 'yarn install',
+		pnpm: 'pnpm install'
+	};
+	return commands[packageManager] || 'npm install';
+}
+
+/**
+ * Get dev command for package manager
+ * @param {string} packageManager - Package manager name
+ * @returns {string} - Dev command
+ */
+function getDevCommand(packageManager) {
+	const commands = {
+		npm: 'npm run dev',
+		yarn: 'yarn dev',
+		pnpm: 'pnpm dev'
+	};
+	return commands[packageManager] || 'npm run dev';
+}

package/src/constants.js

@@ -0,0 +1,20 @@
+import { fileURLToPath } from 'node:url';
+import { dirname, join, resolve } from 'node:path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/**
+ * Available templates configuration
+ */
+export const TEMPLATES = [
+	{
+		name: 'basic',
+		display: 'Basic Ripple App',
+		description: 'A minimal Ripple application with Vite and TypeScript'
+	}
+];
+
+// Get the root directory of the monorepo
+export const REPO_ROOT = resolve(__dirname, '../../../');
+export const TEMPLATES_DIR = join(REPO_ROOT, 'templates');

package/src/index.js

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+
+import { Command } from 'commander';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { dirname, join } from 'node:path';
+import { red } from 'kleur/colors';
+import { createCommand } from './commands/create.js';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const packageJson = JSON.parse(readFileSync(join(__dirname, '../package.json'), 'utf-8'));
+const program = new Command();
+
+program
+	.name('create-ripple-app')
+	.description('Interactive CLI tool for creating Ripple applications')
+	.version(packageJson.version)
+	.helpOption('-h, --help', 'Display help for command');
+
+program
+	.argument('[project-name]', 'Name of the project to create')
+	.option('-t, --template <template>', 'Template to use (default: basic)')
+	.option('-p, --package-manager <pm>', 'Package manager to use (npm, yarn, pnpm)', 'npm')
+	.option('--no-git', 'Skip Git repository initialization')
+	.option('-y, --yes', 'Skip all prompts and use defaults')
+	.action(async (projectName, options) => {
+		try {
+			await createCommand(projectName, options);
+		} catch (error) {
+			console.error(red('✖ Unexpected error:'));
+			console.error(error.message);
+			process.exit(1);
+		}
+	});
+
+// Handle unhandled promise rejections
+process.on('unhandledRejection', (err) => {
+	console.error(red('✖ Unhandled error:'));
+	console.error(err);
+	process.exit(1);
+});
+
+// Handle SIGINT (Ctrl+C)
+process.on('SIGINT', () => {
+	console.log();
+	console.log(red('✖ Operation cancelled'));
+	process.exit(1);
+});
+
+program.parse();

package/src/lib/project-creator.js

@@ -0,0 +1,206 @@
+import { join } from 'node:path';
+import { existsSync, mkdirSync, cpSync, readFileSync, writeFileSync } from 'node:fs';
+import { execSync } from 'node:child_process';
+import { green, dim } from 'kleur/colors';
+import ora from 'ora';
+
+import { getTemplatePath } from './templates.js';
+
+/**
+ * Create a new Ripple project
+ * @param {object} options - Project creation options
+ * @param {string} options.projectName - Name of the project
+ * @param {string} options.projectPath - Absolute path where project will be created
+ * @param {string} options.template - Template to use
+ * @param {string} options.packageManager - Package manager to use
+ * @param {boolean} options.typescript - Whether to use TypeScript
+ * @param {boolean} options.gitInit - Whether to initialize Git
+ */
+export async function createProject({
+	projectName,
+	projectPath,
+	template,
+	packageManager = 'npm',
+	typescript = true,
+	gitInit = true
+}) {
+	console.log(dim(`Creating project: ${projectName}`));
+	console.log(dim(`Template: ${template}`));
+	console.log(dim(`Package manager: ${packageManager}`));
+	console.log();
+
+	const templatePath = getTemplatePath(template);
+
+	if (!existsSync(templatePath)) {
+		throw new Error(`Template "${template}" not found at ${templatePath}`);
+	}
+
+	// Step 1: Create project directory
+	const spinner1 = ora('Creating project directory...').start();
+	try {
+		mkdirSync(projectPath, { recursive: true });
+		spinner1.succeed('Project directory created');
+	} catch (error) {
+		spinner1.fail('Failed to create project directory');
+		throw error;
+	}
+
+	// Step 2: Copy template files
+	const spinner2 = ora('Copying template files...').start();
+	try {
+		cpSync(templatePath, projectPath, {
+			recursive: true,
+			filter: (src) => {
+				// Skip node_modules and any lock files from template
+				const relativePath = src.replace(templatePath, '');
+				return (
+					!relativePath.includes('node_modules') &&
+					!relativePath.includes('package-lock.json') &&
+					!relativePath.includes('yarn.lock') &&
+					!relativePath.includes('pnpm-lock.yaml')
+				);
+			}
+		});
+		spinner2.succeed('Template files copied');
+	} catch (error) {
+		spinner2.fail('Failed to copy template files');
+		throw error;
+	}
+
+	// Step 3: Update package.json
+	const spinner3 = ora('Configuring package.json...').start();
+	try {
+		updatePackageJson(projectPath, projectName, packageManager, typescript);
+		spinner3.succeed('Package.json configured');
+	} catch (error) {
+		spinner3.fail('Failed to configure package.json');
+		throw error;
+	}
+
+	// Step 4: Initialize Git (if requested)
+	if (gitInit) {
+		const spinner4 = ora('Initializing Git repository...').start();
+		try {
+			execSync('git init', { cwd: projectPath, stdio: 'ignore' });
+			execSync('git add .', { cwd: projectPath, stdio: 'ignore' });
+			execSync('git commit -m "Initial commit"', { cwd: projectPath, stdio: 'ignore' });
+			spinner4.succeed('Git repository initialized');
+		} catch (error) {
+			spinner4.warn('Git initialization failed (optional)');
+		}
+	}
+
+	console.log();
+	console.log(green('✓ Project created successfully!'));
+}
+
+/**
+ * Update package.json with project-specific configurations
+ * @param {string} projectPath - Path to the project
+ * @param {string} projectName - Name of the project
+ * @param {string} packageManager - Package manager being used
+ * @param {boolean} typescript - Whether TypeScript is enabled
+ */
+function updatePackageJson(projectPath, projectName, packageManager, typescript) {
+	const packageJsonPath = join(projectPath, 'package.json');
+
+	if (!existsSync(packageJsonPath)) {
+		throw new Error('package.json not found in template');
+	}
+
+	const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'));
+
+	// Update package name
+	packageJson.name = projectName;
+
+	// Remove version if it exists (since this is a new project)
+	if (packageJson.version === '0.0.0') {
+		packageJson.version = '1.0.0';
+	}
+
+	// Update description
+	packageJson.description = `A Ripple application created with create-ripple-app`;
+
+	// Add package manager field if not npm
+	if (packageManager !== 'npm') {
+		packageJson.packageManager = getPackageManagerVersion(packageManager);
+	}
+
+	// Ensure we're using the latest versions
+	updateDependencyVersions(packageJson);
+
+	// Update scripts based on package manager
+	updateScripts(packageJson, packageManager);
+
+	writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+}
+
+/**
+ * Update dependency versions to latest
+ * @param {object} packageJson - Package.json object
+ */
+function updateDependencyVersions(packageJson) {
+	// Use the latest versions for Ripple packages
+	const latestVersions = {
+		ripple: '^0.2.35',
+		'vite-plugin-ripple': '^0.2.29',
+		'prettier-plugin-ripple': '^0.2.29'
+	};
+
+	// Update dependencies
+	if (packageJson.dependencies) {
+		for (const [pkg, version] of Object.entries(latestVersions)) {
+			if (packageJson.dependencies[pkg]) {
+				packageJson.dependencies[pkg] = version;
+			}
+		}
+	}
+
+	// Update devDependencies
+	if (packageJson.devDependencies) {
+		for (const [pkg, version] of Object.entries(latestVersions)) {
+			if (packageJson.devDependencies[pkg]) {
+				packageJson.devDependencies[pkg] = version;
+			}
+		}
+	}
+}
+
+/**
+ * Update scripts based on package manager
+ * @param {object} packageJson - Package.json object
+ * @param {string} packageManager - Package manager being used
+ */
+function updateScripts(packageJson, packageManager) {
+	if (!packageJson.scripts) return;
+
+	// Add package manager specific scripts
+	const pmCommands = {
+		npm: 'npm run',
+		yarn: 'yarn',
+		pnpm: 'pnpm'
+	};
+
+	const pm = pmCommands[packageManager] || 'npm run';
+
+	// Update format scripts to use the correct package manager
+	if (packageJson.scripts.format) {
+		packageJson.scripts.format = 'prettier --write .';
+	}
+	if (packageJson.scripts['format:check']) {
+		packageJson.scripts['format:check'] = 'prettier --check .';
+	}
+}
+
+/**
+ * Get package manager version string
+ * @param {string} packageManager - Package manager name
+ * @returns {string} - Package manager with version
+ */
+function getPackageManagerVersion(packageManager) {
+	const versions = {
+		yarn: 'yarn@4.0.0',
+		pnpm: 'pnpm@9.0.0'
+	};
+	return versions[packageManager] || packageManager;
+}

package/src/lib/prompts.js

@@ -0,0 +1,136 @@
+import prompts from 'prompts';
+import { validateProjectName } from './validation.js';
+import { getTemplateChoices } from './templates.js';
+import { red } from 'kleur/colors';
+
+/**
+ * Prompt for project name
+ * @param {string} defaultName - Default project name
+ * @returns {Promise<string>} - Project name
+ */
+export async function promptProjectName(defaultName = 'my-ripple-app') {
+	const response = await prompts({
+		type: 'text',
+		name: 'projectName',
+		message: 'What is your project named?',
+		initial: defaultName,
+		validate: (value) => {
+			const validation = validateProjectName(value);
+			return validation.valid || validation.message;
+		}
+	});
+
+	if (!response.projectName) {
+		console.log(red('✖ Operation cancelled'));
+		process.exit(1);
+	}
+
+	return response.projectName;
+}
+
+/**
+ * Prompt for template selection
+ * @returns {Promise<string>} - Selected template name
+ */
+export async function promptTemplate() {
+	const response = await prompts({
+		type: 'select',
+		name: 'template',
+		message: 'Which template would you like to use?',
+		choices: getTemplateChoices(),
+		initial: 0
+	});
+
+	if (!response.template) {
+		console.log(red('✖ Operation cancelled'));
+		process.exit(1);
+	}
+
+	return response.template;
+}
+
+/**
+ * Prompt for directory overwrite confirmation
+ * @param {string} projectName - The project name
+ * @returns {Promise<boolean>} - Whether to overwrite
+ */
+export async function promptOverwrite(projectName) {
+	const response = await prompts({
+		type: 'confirm',
+		name: 'overwrite',
+		message: `Directory "${projectName}" already exists. Continue anyway?`,
+		initial: false
+	});
+
+	if (response.overwrite === undefined) {
+		console.log(red('✖ Operation cancelled'));
+		process.exit(1);
+	}
+
+	return response.overwrite;
+}
+
+/**
+ * Prompt for package manager selection
+ * @returns {Promise<string>} - Selected package manager
+ */
+export async function promptPackageManager() {
+	const response = await prompts({
+		type: 'select',
+		name: 'packageManager',
+		message: 'Which package manager would you like to use?',
+		choices: [
+			{ title: 'npm', value: 'npm', description: 'Use npm for dependency management' },
+			{ title: 'yarn', value: 'yarn', description: 'Use Yarn for dependency management' },
+			{ title: 'pnpm', value: 'pnpm', description: 'Use pnpm for dependency management' }
+		],
+		initial: 0
+	});
+
+	if (!response.packageManager) {
+		console.log(red('✖ Operation cancelled'));
+		process.exit(1);
+	}
+
+	return response.packageManager;
+}
+
+/**
+ * Prompt for TypeScript usage
+ * @returns {Promise<boolean>} - Whether to use TypeScript
+ */
+export async function promptTypeScript() {
+	const response = await prompts({
+		type: 'confirm',
+		name: 'typescript',
+		message: 'Would you like to use TypeScript?',
+		initial: true
+	});
+
+	if (response.typescript === undefined) {
+		console.log(red('✖ Operation cancelled'));
+		process.exit(1);
+	}
+
+	return response.typescript;
+}
+
+/**
+ * Prompt for Git initialization
+ * @returns {Promise<boolean>} - Whether to initialize Git
+ */
+export async function promptGitInit() {
+	const response = await prompts({
+		type: 'confirm',
+		name: 'gitInit',
+		message: 'Initialize a new Git repository?',
+		initial: true
+	});
+
+	if (response.gitInit === undefined) {
+		console.log(red('✖ Operation cancelled'));
+		process.exit(1);
+	}
+
+	return response.gitInit;
+}