create-ripple 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-ripple",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "Interactive CLI tool for creating Ripple applications",
   "type": "module",
   "license": "MIT",

package/src/commands/create.js

@@ -8,7 +8,8 @@ import {
 	promptTemplate,
 	promptOverwrite,
 	promptPackageManager,
-	promptGitInit
+	promptGitInit,
+	promptStylingFramework
 } from '../lib/prompts.js';
 import { createProject } from '../lib/project-creator.js';
 
@@ -71,6 +72,11 @@ export async function createCommand(projectName, options) {
 		gitInit = false;
 	}
 
+		let stylingFramework = 'vanilla';
+	if (!options.yes) {
+		stylingFramework = await promptStylingFramework();
+	}
+
 	// Step 6: Create the project
 	console.log();
 	console.log(`Creating Ripple app in ${green(projectPath)}...`);
@@ -83,7 +89,8 @@ export async function createCommand(projectName, options) {
 			template,
 			packageManager,
 			typescript: true,
-			gitInit
+			gitInit,
+			stylingFramework
 		});
 
 		showNextSteps(projectName, packageManager);

package/src/lib/project-creator.js

@@ -13,16 +13,16 @@ import { downloadTemplate, getLocalTemplatePath, isLocalDevelopment } from './te
  * @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
+ * @param {string} options.stylingFramework - Styling framework to use
  */
 export async function createProject({
 	projectName,
 	projectPath,
 	template,
 	packageManager = 'npm',
-	typescript = true,
-	gitInit = true
+	gitInit = true,
+	stylingFramework = 'vanilla'
 }) {
 	console.log(dim(`Creating project: ${projectName}`));
 	console.log(dim(`Template: ${template}`));
@@ -95,7 +95,7 @@ export async function createProject({
 	// Step 4: Update package.json
 	const spinner4 = ora('Configuring package.json...').start();
 	try {
-		updatePackageJson(projectPath, projectName, packageManager, typescript);
+		updatePackageJson(projectPath, projectName, packageManager, stylingFramework);
 		spinner4.succeed('Package.json configured');
 	} catch (error) {
 		spinner4.fail('Failed to configure package.json');
@@ -105,17 +105,29 @@ export async function createProject({
 		throw error;
 	}
 
-	// Step 5: Initialize Git (if requested)
+	// Step 5: Configure styling
+	const spinner5 = ora('Configuring styling framework...').start();
+	try {
+		configureStyling(projectPath, stylingFramework);
+		spinner5.succeed('Styling framework configured');
+	} catch (error) {
+		spinner5.fail('Failed to configure styling framework');
+		if (isTemporary) {
+			rmSync(templatePath, { recursive: true, force: true });
+		}
+		throw error;
+	}
+
+
+
+	// Step 6: Initialize Git (if requested)
 	if (gitInit) {
-		const spinner5 = ora('Initializing Git repository...').start();
+		const spinner6 = ora('Initializing Git repository...').start();
 		try {
 			execSync('git init', { cwd: projectPath, stdio: 'ignore' });
-			// We should not automatically commit without asking user, so I have currently commented the code:
-			// execSync('git add .', { cwd: projectPath, stdio: 'ignore' });
-			// execSync('git commit -m "Initial commit"', { cwd: projectPath, stdio: 'ignore' });
-			spinner5.succeed('Git repository initialized');
+			spinner6.succeed('Git repository initialized');
 		} catch (error) {
-			spinner5.warn('Git initialization failed (optional)');
+			spinner6.warn('Git initialization failed (optional)');
 		}
 	}
 
@@ -137,9 +149,9 @@ export async function createProject({
  * @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
+ * @param {string} stylingFramework - Styling framework being used
  */
-function updatePackageJson(projectPath, projectName, packageManager, typescript) {
+function updatePackageJson(projectPath, projectName, packageManager, stylingFramework) {
 	const packageJsonPath = join(projectPath, 'package.json');
 
 	if (!existsSync(packageJsonPath)) {
@@ -164,6 +176,20 @@ function updatePackageJson(projectPath, projectName, packageManager, typescript)
 		packageJson.packageManager = getPackageManagerVersion(packageManager);
 	}
 
+	// Add styling dependencies
+    if (stylingFramework === 'tailwind') {
+        packageJson.devDependencies = {
+            ...packageJson.devDependencies,
+            'tailwindcss': '^4.1.12',
+            '@tailwindcss/vite': '^4.1.12'
+        };
+    } else if (stylingFramework === 'bootstrap') {
+        packageJson.dependencies = {
+            ...packageJson.dependencies,
+            'bootstrap': '^5.3.0'
+        };
+    }
+
 	// Ensure we're using the latest versions
 	updateDependencyVersions(packageJson);
 
@@ -173,6 +199,52 @@ function updatePackageJson(projectPath, projectName, packageManager, typescript)
 	writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
 }
 
+function configureStyling(projectPath, stylingFramework) {
+    if (stylingFramework === 'tailwind') {
+		const tailwindConfig = `import type { Config } from 'tailwindcss';
+export default {
+	content: [
+		"./index.html",
+		"./src/**/*.{ts,ripple}",
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: []
+} satisfies Config
+`;
+		writeFileSync(join(projectPath, 'tailwind.config.ts'), tailwindConfig);
+		const mainCss = `@import "tailwindcss";
+@config "./tailwind.config.ts";`;
+		writeFileSync(join(projectPath, 'src', 'index.css'), mainCss);
+
+		const mainTs = readFileSync(join(projectPath, 'src', 'index.ts'), 'utf-8');
+		const newMainTs = "import './index.css';\n" + mainTs;
+		writeFileSync(join(projectPath, 'src', 'index.ts'), newMainTs);
+		
+		if (existsSync(join(projectPath, 'vite.config.js'))) {
+			rmSync(join(projectPath, 'vite.config.js'));
+		}
+		const viteConfig = `import { defineConfig } from 'vite';
+import { ripple } from 'vite-plugin-ripple';
+import tailwindcss from '@tailwindcss/vite';
+
+export default defineConfig({
+	plugins: [ripple(), tailwindcss()],
+	server: {
+		port: 3000
+	}
+});
+`;
+		writeFileSync(join(projectPath, 'vite.config.js'), viteConfig);
+
+    } else if (stylingFramework === 'bootstrap') {
+		const mainTs = readFileSync(join(projectPath, 'src', 'index.ts'), 'utf-8');
+		const newMainTs = "import 'bootstrap/dist/css/bootstrap.min.css';\n" + mainTs;
+		writeFileSync(join(projectPath, 'src', 'index.ts'), newMainTs);
+    }
+}
+
 /**
  * Update dependency versions to latest
  * @param {object} packageJson - Package.json object

package/src/lib/prompts.js

@@ -134,3 +134,31 @@ export async function promptGitInit() {
 
 	return response.gitInit;
 }
+
+export async function promptStylingFramework() {
+	const response = await prompts({
+		type: 'select',
+		name: 'stylingFramework',
+		message: 'Which styling framework would you like to integrate with Ripple?',
+		choices: [{
+			title: 'Vanilla CSS',
+			value: 'vanilla',
+			description: 'Use Vanilla CSS for styling your components'
+		}, {
+			title: 'Bootstrap',
+			value: 'bootstrap',
+			description: 'Use Bootstrap classes to style your components'
+		}, {
+			title: 'TailwindCSS',
+			value: 'tailwind',
+			description: 'Use TailwindCSS to style your components'
+		}]
+	})
+
+	if (response.stylingFramework === undefined) {
+		console.log(red('✖ Operation cancelled'));
+		process.exit(1);
+	}
+
+	return response.stylingFramework;
+}

package/tests/integration/project-creator.test.js

@@ -2,7 +2,7 @@ import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
 import { existsSync, mkdirSync, rmSync, readFileSync, writeFileSync } from 'node:fs';
 import { join } from 'node:path';
 import { tmpdir } from 'node:os';
-import { createProject } from '../../src/lib/project-creator.js';
+import { createProject, updatePackageJson, configureStyling } from '../../src/lib/project-creator.js';
 import { getLocalTemplatePath, isLocalDevelopment, validateTemplate } from '../../src/lib/templates.js';
 
 // Mock ora for cleaner test output
@@ -227,4 +227,45 @@ describe('createProject integration tests', () => {
 		expect(existsSync(join(projectPath, 'package.json'))).toBe(true);
 		expect(existsSync(join(projectPath, 'existing-file.txt'))).toBe(true);
 	});
+	it('should configure Tailwind CSS correctly', async () => {
+			writeFileSync(join(templatePath, 'src', 'index.ts'), 'console.log("Hello, World!");');
+			await createProject({
+				projectName: 'test-tailwind-project',
+				projectPath,
+				template: 'basic',
+				packageManager: 'npm',
+				typescript: true,
+				gitInit: false,
+				stylingFramework: 'tailwind'
+			});
+
+			const packageJson = JSON.parse(readFileSync(join(projectPath, 'package.json'), 'utf-8'));
+			expect(packageJson.devDependencies).toHaveProperty('tailwindcss');
+			expect(packageJson.devDependencies).toHaveProperty('@tailwindcss/vite');
+
+			expect(existsSync(join(projectPath, 'tailwind.config.ts'))).toBe(true);
+			expect(readFileSync(join(projectPath, 'src', 'index.ts'), 'utf-8')).toContain("import './index.css';\n");
+			expect(existsSync(join(projectPath, 'src', 'index.css'))).toBe(true);
+			expect(readFileSync(join(projectPath, 'src', 'index.css'), 'utf-8')).toContain('@import "tailwindcss"');
+		});
+
+	it('should configure Bootstrap correctly', async () => {
+		writeFileSync(join(templatePath, 'src', 'index.ts'), 'console.log("Hello, World!");');
+
+		await createProject({
+			projectName: 'test-bootstrap-project',
+			projectPath,
+			template: 'basic',
+			packageManager: 'npm',
+			typescript: true,
+			gitInit: false,
+			stylingFramework: 'bootstrap'
+		});
+
+		const packageJson = JSON.parse(readFileSync(join(projectPath, 'package.json'), 'utf-8'));
+		expect(packageJson.dependencies).toHaveProperty('bootstrap');
+
+		const mainTsContent = readFileSync(join(projectPath, 'src', 'index.ts'), 'utf-8');
+		expect(mainTsContent).toContain("import 'bootstrap/dist/css/bootstrap.min.css';");
+	});
 });

package/tests/unit/prompts.test.js

@@ -28,7 +28,8 @@ import {
 	promptOverwrite,
 	promptPackageManager,
 	promptTypeScript,
-	promptGitInit
+	promptGitInit,
+	promptStylingFramework
 } from '../../src/lib/prompts.js';
 
 describe('Prompts', () => {
@@ -204,4 +205,36 @@ describe('Prompts', () => {
 			expect(mockExit).toHaveBeenCalledWith(1);
 		});
 	});
+	describe('promptStylingFramework', () => {
+		it('should return selected styling framework', async () => {
+			prompts.default.mockResolvedValue({ stylingFramework: 'tailwind' });
+
+			const result = await promptStylingFramework();
+			expect(result).toBe('tailwind');
+			expect(prompts.default).toHaveBeenCalledWith({
+				type: 'select',
+				name: 'stylingFramework',
+				message: 'Which styling framework would you like to integrate with Ripple?',
+				choices: [{
+					title: 'Vanilla CSS',
+					value: 'vanilla',
+					description: 'Use Vanilla CSS for styling your components'
+				}, {
+					title: 'Bootstrap',
+					value: 'bootstrap',
+					description: 'Use Bootstrap classes to style your components'
+				}, {
+					title: 'TailwindCSS',
+					value: 'tailwind',
+					description: 'Use TailwindCSS to style your components'
+				}]
+			});
+		});
+
+		it('should return undefined when user cancels', async () => {
+			prompts.default.mockResolvedValue({ stylingFramework: undefined });
+			const result = await promptStylingFramework();
+			expect(result).toBeUndefined();
+		});
+	});
 });