create-tauri-app-project-wind 2.0.0

package/README.md

@@ -0,0 +1,170 @@
+# create-tauri-app-project-wind
+
+A modern, professional desktop application starter template built with Tauri, React 18, TypeScript, and Shadcn UI. Features a custom title bar, responsive navigation, and comprehensive UI component showcase.
+
+## 🚀 Quick Start
+
+### Interactive Installation (Recommended)
+
+The CLI will guide you through configuration with interactive prompts:
+
+```bash
+npm create tauri-app-project-wind@latest
+```
+
+You'll be prompted for:
+- 📁 **Project folder name** – Name for your project directory (lowercase, dashes/underscores allowed)
+- 🏷️ **App display name** – How your app will be labeled in the window/titlebar
+- 👤 **Author name** – Your name or organization (used in metadata)
+- 📦 **Bundle identifier** – Reverse domain (e.g., com.company.app) for Tauri packaging
+- 📦 **Package manager** – Choose npm, yarn, pnpm, or bun
+- ⚡ **Auto-install** – Automatically install dependencies after setup
+
+### Quick Install with Defaults
+
+Provide the project name as an argument to skip the first prompt:
+
+```bash
+npm create tauri-app-project-wind@latest my-app
+```
+
+### Package Manager Specific
+
+#### npm
+```bash
+npm create tauri-app-project-wind@latest my-app
+```
+
+#### yarn
+```bash
+yarn create tauri-app-project-wind my-app
+```
+
+#### pnpm
+```bash
+pnpm create tauri-app-project-wind my-app
+```
+
+#### bun
+```bash
+bun create tauri-app-project-wind my-app
+```
+
+## ✨ What's Included
+
+### Core Technologies
+- ⚡ **Tauri** - Build smaller, faster, more secure desktop applications
+- ⚛️ **React 18** - Modern React with hooks and concurrent features
+- 📘 **TypeScript** - Full type safety across the entire application
+- 🎨 **Shadcn UI** - 52+ beautiful, accessible UI components
+- 🎯 **Vite** - Lightning-fast development with HMR
+- 💅 **TailwindCSS** - Utility-first CSS framework
+
+### Custom Features
+- 🪟 **Custom Title Bar** - Native-like window controls (minimize, maximize, close)
+- 🎨 **Theme System** - Light/Dark/System modes with live switching
+- 📱 **Responsive Design** - Mobile-first approach with breakpoint handling
+- 🍔 **Smart Navigation** - Hamburger menu on mobile, menubar on desktop
+- 🎭 **Modern Animations** - Smooth transitions and interactive elements
+- 🏗️ **Clean Architecture** - Pages, layouts, and components separation
+
+## 🎨 UI Components
+
+### Custom Components
+- **TitleBar** - Custom window controls with draggable area
+  - Minimize, Maximize/Restore, Close buttons
+  - Integrated theme toggle with Sun/Moon icons
+  - Responsive hamburger menu (mobile)
+  - Desktop menubar (File, Edit, View, Help)
+  - About and Keyboard Shortcuts dialogs
+
+### Shadcn UI Components (52+)
+**Form & Input**: Button, Input, Textarea, Checkbox, Switch, Radio Group, Select, Input OTP, Form, Field, Input Group
+
+**Navigation**: Menubar, Navigation Menu, Breadcrumb, Tabs, Pagination, Command
+
+**Feedback**: Alert, Alert Dialog, Dialog, Toast/Sonner, Progress, Spinner, Skeleton, Badge
+
+**Layout**: Card, Separator, Scroll Area, Resizable Panels, Aspect Ratio, Sheet
+
+**Overlay**: Dropdown Menu, Context Menu, Popover, Hover Card, Tooltip, Drawer
+
+**Data Display**: Table, Avatar, Calendar, Carousel, Accordion, Collapsible, Toggle, Toggle Group
+
+## 🛠️ Project Structure
+
+```
+my-app/
+├── src/
+│   ├── components/
+│   │   ├── ui/                 # 52+ Shadcn UI components
+│   │   ├── demo/               # Component showcase
+│   │   ├── TitleBar.tsx        # Custom window controls
+│   │   └── theme-provider.tsx  # Theme context
+│   ├── layouts/
+│   │   └── MainLayout.tsx      # Main app layout wrapper
+│   ├── pages/
+│   │   └── Welcome.tsx         # Welcome/demo page
+│   └── lib/
+│       └── utils.ts            # Utility functions
+├── src-tauri/
+│   ├── src/main.rs             # Rust backend
+│   └── tauri.conf.json         # Tauri configuration
+└── package.json                # Node dependencies
+```
+
+## 📝 Available Scripts
+
+```bash
+# Development
+npm run dev              # Start Vite dev server (web preview)
+npm run tauri dev        # Run Tauri app in development mode
+
+# Build
+npm run build            # Build frontend for production
+npm run tauri build      # Build complete desktop application
+```
+
+## 🎯 Key Features
+
+### Custom Title Bar
+- Native-like window controls (minimize, maximize, close)
+- Draggable area - Click and drag to move window
+- Double-click to maximize
+- Integrated theme toggle with Sun/Moon icons
+- Responsive menu that adapts to screen size
+
+### Responsive Navigation
+**Desktop (≥768px)**: Traditional menubar with File, Edit, View, Help menus
+
+**Mobile (<768px)**: Modern hamburger icon with smooth animation and slide-out navigation
+
+### Theme System
+- **Light Mode** - Clean, bright interface
+- **Dark Mode** - Easy on the eyes
+- **System Mode** - Auto-detects OS preference and updates live
+
+## 📚 Documentation
+
+For full documentation, examples, and advanced usage, visit:
+
+🔗 [GitHub Repository](https://github.com/ssanaullahrais/project-wind-tauri-js-starter-kit)
+
+## 🤝 Contributing
+
+Contributions are welcome! Feel free to:
+- Report bugs
+- Suggest features
+- Submit pull requests
+
+## 📄 License
+
+MIT License
+
+## 🙏 Credits
+
+Built with [Tauri](https://tauri.app/), [React](https://react.dev/), [Vite](https://vitejs.dev/), and [Shadcn UI](https://ui.shadcn.com/)
+
+---
+
+**Happy coding! 🚀**

package/index.js

@@ -0,0 +1,283 @@
+#!/usr/bin/env node
+
+const { execSync } = require('child_process');
+const path = require('path');
+const fs = require('fs');
+const readline = require('readline');
+
+// ANSI color codes for better CLI experience
+const colors = {
+  reset: '\x1b[0m',
+  bright: '\x1b[1m',
+  dim: '\x1b[2m',
+  cyan: '\x1b[36m',
+  green: '\x1b[32m',
+  yellow: '\x1b[33m',
+  blue: '\x1b[34m',
+  magenta: '\x1b[35m',
+};
+
+// Readline interface for user input
+const rl = readline.createInterface({
+  input: process.stdin,
+  output: process.stdout
+});
+
+// Utility to ask questions
+function question(query) {
+  return new Promise(resolve => rl.question(query, resolve));
+}
+
+// Validate project name
+function validateProjectName(name) {
+  if (!name) return false;
+  if (!/^[a-z0-9-_]+$/i.test(name)) {
+    console.log(`${colors.yellow}⚠️  Project name can only contain letters, numbers, hyphens, and underscores${colors.reset}`);
+    return false;
+  }
+  return true;
+}
+
+// Validate bundle identifier
+function validateBundleId(id) {
+  if (!id) return false;
+  if (!/^[a-z][a-z0-9-]*(\.[a-z][a-z0-9-]*)+$/i.test(id)) {
+    console.log(`${colors.yellow}⚠️  Bundle ID should be in reverse domain format (e.g., com.company.app)${colors.reset}`);
+    return false;
+  }
+  return true;
+}
+
+// Main function
+async function main() {
+  console.log(`${colors.bright}${colors.cyan}`);
+  console.log('╔══════════════════════════════════════════════════════════╗');
+  console.log('║                                                          ║');
+  console.log('║           🌬️   Project Wind CLI Installer  🌬️            ║');
+  console.log('║                                                          ║');
+  console.log('║   Modern Tauri + React + TypeScript + Shadcn/UI         ║');
+  console.log('║                                                          ║');
+  console.log('╚══════════════════════════════════════════════════════════╝');
+  console.log(colors.reset);
+  console.log(`${colors.dim}Let's set up your new desktop application!${colors.reset}\n`);
+
+  let config = {};
+
+  // 1. Project folder name
+  console.log(`${colors.cyan}📁 Project folder name:${colors.reset}`);
+  console.log(`   ${colors.dim}This will be your project directory name${colors.reset}`);
+  console.log(`   ${colors.dim}Use lowercase with dashes (e.g., my-awesome-app)${colors.reset}`);
+  let projectName = process.argv[2];
+  while (!validateProjectName(projectName)) {
+    projectName = await question(`   > `);
+  }
+  config.projectName = projectName.trim();
+
+  // 2. App display name
+  const autoDisplayName = config.projectName.split('-').map(word =>
+    word.charAt(0).toUpperCase() + word.slice(1)
+  ).join(' ');
+  console.log(`\n${colors.cyan}🏷️  App display name:${colors.reset}`);
+  console.log(`   ${colors.dim}This is the name shown in your app's titlebar and windows${colors.reset}`);
+  console.log(`   ${colors.dim}Can use spaces and capitals (e.g., My Awesome App)${colors.reset}`);
+  console.log(`   ${colors.dim}Press Enter to use: "${autoDisplayName}"${colors.reset}`);
+  let appName = await question(`   > `);
+  config.appName = appName.trim() || autoDisplayName;
+
+  // 3. Author name
+  let author = await question(`\n${colors.cyan}👤 Author name:${colors.reset} ${colors.dim}(your name or company)${colors.reset}\n   > `);
+  config.author = author.trim() || 'Your Name';
+
+  // 4. Bundle identifier
+  let bundleId = '';
+  const defaultBundleId = `com.${config.author.toLowerCase().replace(/\s+/g, '')}.${config.projectName.replace(/[^a-z0-9]/gi, '')}`;
+  while (!validateBundleId(bundleId)) {
+    bundleId = await question(`\n${colors.cyan}📦 Bundle identifier:${colors.reset} ${colors.dim}(defaults to "${defaultBundleId}")${colors.reset}\n   > `);
+    if (!bundleId.trim()) {
+      bundleId = defaultBundleId;
+    }
+  }
+  config.bundleId = bundleId.trim();
+
+  // 5. Package manager
+  console.log(`\n${colors.cyan}📦 Package manager:${colors.reset}`);
+  console.log(`   ${colors.dim}1) npm${colors.reset}`);
+  console.log(`   ${colors.dim}2) yarn${colors.reset}`);
+  console.log(`   ${colors.dim}3) pnpm${colors.reset}`);
+  console.log(`   ${colors.dim}4) bun${colors.reset}`);
+  let pmChoice = await question(`   > `);
+  config.packageManager = ['npm', 'yarn', 'pnpm', 'bun'][parseInt(pmChoice) - 1] || 'npm';
+
+  // 6. Auto install dependencies
+  let autoInstall = await question(`\n${colors.cyan}⚡ Install dependencies automatically?${colors.reset} ${colors.dim}(y/n, default: y)${colors.reset}\n   > `);
+  config.autoInstall = autoInstall.trim().toLowerCase() !== 'n';
+
+  // Set defaults for non-prompted options
+  config.description = `A modern desktop application built with Tauri and React`;
+  config.theme = 'system';
+  config.initGit = false;
+  config.includeDemo = true;
+
+  rl.close();
+
+  // Display configuration summary
+  console.log(`\n${colors.bright}${colors.magenta}📋 Configuration Summary:${colors.reset}`);
+  console.log(`${colors.dim}${'─'.repeat(60)}${colors.reset}`);
+  console.log(`   Project Name:     ${colors.green}${config.projectName}${colors.reset}`);
+  console.log(`   App Name:         ${colors.green}${config.appName}${colors.reset}`);
+  console.log(`   Author:           ${colors.green}${config.author}${colors.reset}`);
+  console.log(`   Bundle ID:        ${colors.green}${config.bundleId}${colors.reset}`);
+  console.log(`   Package Manager:  ${colors.green}${config.packageManager}${colors.reset}`);
+  console.log(`${colors.dim}${'─'.repeat(60)}${colors.reset}\n`);
+
+  // Clone the repository
+  console.log(`${colors.blue}📦 Cloning template...${colors.reset}`);
+  try {
+    execSync(
+      `git clone --depth 1 https://github.com/ssanaullahrais/project-wind-tauri-js-starter-kit.git ${config.projectName}`,
+      { stdio: 'inherit' }
+    );
+  } catch (error) {
+    console.error(`${colors.yellow}⚠️  Failed to clone repository. Make sure git is installed.${colors.reset}`);
+    process.exit(1);
+  }
+
+  const projectPath = path.join(process.cwd(), config.projectName);
+
+  // Remove .git directory
+  console.log(`${colors.blue}🧹 Cleaning up...${colors.reset}`);
+  const gitDir = path.join(projectPath, '.git');
+  if (fs.existsSync(gitDir)) {
+    fs.rmSync(gitDir, { recursive: true, force: true });
+  }
+
+  // Remove cli directory from cloned project
+  const cliDir = path.join(projectPath, 'cli');
+  if (fs.existsSync(cliDir)) {
+    fs.rmSync(cliDir, { recursive: true, force: true });
+  }
+
+  // Remove demo components if not wanted
+  if (!config.includeDemo) {
+    console.log(`${colors.blue}🗑️  Removing demo components...${colors.reset}`);
+    const demoComponentPath = path.join(projectPath, 'src', 'components', 'demo');
+    if (fs.existsSync(demoComponentPath)) {
+      fs.rmSync(demoComponentPath, { recursive: true, force: true });
+    }
+  }
+
+  // Update configuration files
+  console.log(`${colors.blue}⚙️  Configuring project...${colors.reset}`);
+
+  // Update package.json
+  const packageJsonPath = path.join(projectPath, 'package.json');
+  if (fs.existsSync(packageJsonPath)) {
+    const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+    packageJson.name = config.projectName;
+    packageJson.description = config.description;
+    packageJson.author = config.author;
+    fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2));
+  }
+
+  // Update tauri.conf.json
+  const tauriConfPath = path.join(projectPath, 'src-tauri', 'tauri.conf.json');
+  if (fs.existsSync(tauriConfPath)) {
+    const tauriConf = JSON.parse(fs.readFileSync(tauriConfPath, 'utf8'));
+    tauriConf.package.productName = config.appName;
+    tauriConf.tauri.windows[0].title = config.appName;
+    tauriConf.tauri.bundle.identifier = config.bundleId;
+    fs.writeFileSync(tauriConfPath, JSON.stringify(tauriConf, null, 2));
+  }
+
+  // Update index.html
+  const indexHtmlPath = path.join(projectPath, 'index.html');
+  if (fs.existsSync(indexHtmlPath)) {
+    let indexHtml = fs.readFileSync(indexHtmlPath, 'utf8');
+    indexHtml = indexHtml.replace(/<title>.*?<\/title>/, `<title>${config.appName}</title>`);
+    fs.writeFileSync(indexHtmlPath, indexHtml);
+  }
+
+  // Update TitleBar.tsx
+  const titleBarPath = path.join(projectPath, 'src', 'components', 'TitleBar.tsx');
+  if (fs.existsSync(titleBarPath)) {
+    let titleBar = fs.readFileSync(titleBarPath, 'utf8');
+    // Replace all instances of "Project Wind" with the app name
+    titleBar = titleBar.replace(/Project Wind/g, config.appName);
+    // Update copyright year and author
+    const currentYear = new Date().getFullYear();
+    titleBar = titleBar.replace(/© \d{4} .*?\. All rights reserved\./, `© ${currentYear} ${config.author}. All rights reserved.`);
+    // Update created by
+    titleBar = titleBar.replace(/<span className="font-medium">Sunny<\/span>/, `<span className="font-medium">${config.author}</span>`);
+    fs.writeFileSync(titleBarPath, titleBar);
+  }
+
+  // Update theme-provider.tsx if theme is not system
+  if (config.theme !== 'system') {
+    const themeProviderPath = path.join(projectPath, 'src', 'components', 'theme-provider.tsx');
+    if (fs.existsSync(themeProviderPath)) {
+      let themeProvider = fs.readFileSync(themeProviderPath, 'utf8');
+      themeProvider = themeProvider.replace(/defaultTheme="system"/, `defaultTheme="${config.theme}"`);
+      fs.writeFileSync(themeProviderPath, themeProvider);
+    }
+  }
+
+  // Update DemoComponents.tsx if it exists
+  if (config.includeDemo) {
+    const demoComponentsPath = path.join(projectPath, 'src', 'components', 'demo', 'DemoComponents.tsx');
+    if (fs.existsSync(demoComponentsPath)) {
+      let demoComponents = fs.readFileSync(demoComponentsPath, 'utf8');
+      demoComponents = demoComponents.replace(/Project Wind/g, config.appName);
+      fs.writeFileSync(demoComponentsPath, demoComponents);
+    }
+  }
+
+  // Initialize git if requested
+  if (config.initGit) {
+    console.log(`${colors.blue}🔧 Initializing git repository...${colors.reset}`);
+    try {
+      execSync('git init', { cwd: projectPath, stdio: 'ignore' });
+      execSync('git add .', { cwd: projectPath, stdio: 'ignore' });
+      execSync(`git commit -m "Initial commit: ${config.appName}"`, { cwd: projectPath, stdio: 'ignore' });
+    } catch (error) {
+      console.log(`${colors.yellow}⚠️  Git initialization failed (git may not be installed)${colors.reset}`);
+    }
+  }
+
+  // Install dependencies if requested
+  if (config.autoInstall) {
+    console.log(`\n${colors.blue}📥 Installing dependencies with ${config.packageManager}...${colors.reset}`);
+    console.log(`${colors.dim}This may take a few minutes...${colors.reset}\n`);
+    try {
+      const installCmd = config.packageManager === 'npm' ? 'npm install' :
+                        config.packageManager === 'yarn' ? 'yarn' :
+                        config.packageManager === 'pnpm' ? 'pnpm install' :
+                        'bun install';
+      execSync(installCmd, { cwd: projectPath, stdio: 'inherit' });
+    } catch (error) {
+      console.log(`${colors.yellow}⚠️  Dependency installation failed. You can install them manually later.${colors.reset}`);
+    }
+  }
+
+  // Success message
+  console.log(`\n${colors.bright}${colors.green}✅ Project created successfully!${colors.reset}\n`);
+  console.log(`${colors.bright}📝 Next steps:${colors.reset}\n`);
+  console.log(`   ${colors.cyan}cd ${config.projectName}${colors.reset}`);
+
+  if (!config.autoInstall) {
+    console.log(`   ${colors.cyan}${config.packageManager} install${colors.reset}`);
+  }
+
+  const devCmd = config.packageManager === 'npm' ? 'npm run tauri dev' :
+                config.packageManager === 'yarn' ? 'yarn tauri dev' :
+                config.packageManager === 'pnpm' ? 'pnpm tauri dev' :
+                'bun run tauri dev';
+  console.log(`   ${colors.cyan}${devCmd}${colors.reset}\n`);
+
+  console.log(`${colors.bright}${colors.magenta}🚀 Happy coding!${colors.reset}\n`);
+}
+
+// Run the main function
+main().catch(error => {
+  console.error(`${colors.yellow}❌ An error occurred:${colors.reset}`, error.message);
+  process.exit(1);
+});

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "create-tauri-app-project-wind",
+  "version": "2.0.0",
+  "description": "Interactive CLI to create a customized Tauri + React + TypeScript desktop application",
+  "main": "index.js",
+  "bin": {
+    "create-tauri-app-project-wind": "./index.js"
+  },
+  "files": [
+    "index.js",
+    "README.md"
+  ],
+  "keywords": [
+    "tauri",
+    "react",
+    "typescript",
+    "shadcn",
+    "desktop",
+    "starter",
+    "template",
+    "project-wind",
+    "cli",
+    "create",
+    "scaffolding",
+    "boilerplate"
+  ],
+  "author": "Sunny",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ssanaullahrais/project-wind-tauri-js-starter-kit.git",
+    "directory": "cli"
+  },
+  "bugs": {
+    "url": "https://github.com/ssanaullahrais/project-wind-tauri-js-starter-kit/issues"
+  },
+  "homepage": "https://github.com/ssanaullahrais/project-wind-tauri-js-starter-kit#readme",
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "preferGlobal": true
+}