@o2vend/theme-cli 1.0.0

package/README.md

@@ -0,0 +1,211 @@
+# O2VEND Theme CLI
+
+Command-line interface for O2VEND theme development. This is a standalone tool that works independently of the main webstore solution.
+
+## Installation
+
+```bash
+npm install -g @o2vend/theme-cli
+```
+
+## Commands
+
+### `serve`
+
+Start development server with hot reload:
+
+```bash
+o2vend serve [options]
+
+Options:
+  -m, --mode <mode>           API mode (mock|real) [default: mock]
+  -p, --port <port>           Server port [default: 3000]
+  --host <host>               Server host [default: localhost]
+  --cwd <path>                Working directory [default: current]
+  --open                       Open browser automatically [default: true]
+  --no-open                   Don't open browser
+  --mock-api-port <port>      Mock API port [default: 3001]
+```
+
+**Examples:**
+```bash
+# Start in mock mode (default)
+o2vend serve
+
+# Start in real API mode
+o2vend serve --mode real
+
+# Custom port
+o2vend serve --port 8080
+
+# Don't open browser
+o2vend serve --no-open
+```
+
+### `init <name>`
+
+Initialize a new theme project:
+
+```bash
+o2vend init my-theme
+```
+
+Creates a new theme directory with:
+- Basic theme structure
+- Configuration files
+- Example templates and widgets
+- VS Code configuration
+
+### `validate`
+
+Validate theme structure:
+
+```bash
+o2vend validate
+```
+
+Checks for:
+- Required theme files
+- Valid Liquid syntax
+- Proper theme structure
+- Configuration file validity
+
+### `package`
+
+Package theme for marketplace:
+
+```bash
+o2vend package
+```
+
+Creates a zip file in `dist/` directory ready for marketplace upload.
+
+### `check`
+
+Check theme for issues:
+
+```bash
+o2vend check
+```
+
+Performs various checks:
+- Syntax errors
+- Missing files
+- Performance issues
+- Best practices
+
+### `optimize`
+
+Optimize theme assets:
+
+```bash
+o2vend optimize
+```
+
+Optimizes:
+- CSS files (minification)
+- JavaScript files (minification)
+- Images (compression)
+- Asset bundling
+
+## Environment Variables
+
+| Variable | Description | Default |
+|----------|-------------|---------|
+| `API_MODE` | API mode (`mock` or `real`) | `mock` |
+| `PORT` | Development server port | `3000` |
+| `HOST` | Development server host | `localhost` |
+| `MOCK_API_PORT` | Mock API server port | `3001` |
+| `O2VEND_TENANT_ID` | Tenant ID (real mode) | - |
+| `O2VEND_API_KEY` | API Key (real mode) | - |
+| `O2VEND_API_BASE_URL` | API Base URL (real mode) | - |
+| `OPEN_BROWSER` | Auto-open browser | `true` |
+| `DEBUG_API_ERRORS` | Debug API errors | `false` |
+
+## Features
+
+### Hot Reload
+
+- **CSS changes** - Injected without page reload
+- **Liquid/JS changes** - Full page reload
+- **File watching** - Automatic change detection
+
+### Mock API
+
+Built-in mock API provides realistic test data:
+- Products (20+ items)
+- Categories (10+ items)
+- Brands (8+ items)
+- Widgets (multiple sections)
+- Store information
+- Shopping cart
+
+### Real API Mode
+
+Connect to actual O2VEND Storefront API:
+- Full API compatibility
+- Authentication support
+- Widget loading
+- Real-time data
+
+## Architecture
+
+### Standalone Design
+
+The CLI is completely standalone:
+- No dependencies on webstore solution
+- Self-contained mock API
+- All services included
+- Manual updates from webstore
+
+### Update Process
+
+When webstore solution changes:
+1. Copy services from webstore to CLI
+2. Update manually (see UPDATE.md)
+3. Test thoroughly
+4. Publish new version
+
+## Development
+
+### Local Development
+
+```bash
+# Clone repository
+git clone https://github.com/Jeyan-Technologies/o2vend-theme-dev-tools.git
+cd o2vend-theme-dev-tools/packages/cli
+
+# Install dependencies
+npm install
+
+# Link for local testing
+npm link
+
+# Run commands
+o2vend serve
+```
+
+### Building
+
+```bash
+npm run build
+```
+
+### Testing
+
+```bash
+npm test
+```
+
+## Support & Resources
+
+- **[O2VEND Developer Documentation](https://o2vend.com/developer/)** - Complete API documentation and guides
+- **Support Email:** support@o2vend.com or developer@jeyantechnologies.com
+- **Support Desk:** [O2VEND Support Portal](https://o2vend.atlassian.net/servicedesk/customer/portals)
+- **Community:** [O2VEND Community Program](https://o2vend.com/community)
+- **Partnership:** [O2VEND Partnership Program](https://o2vend.com/partnership)
+- **Developer Portal:** [www.o2vend.com](https://www.o2vend.com)
+
+## License
+
+MIT License - See LICENSE file

package/bin/o2vend

@@ -0,0 +1,34 @@
+#!/usr/bin/env node
+
+/**
+ * O2VEND Theme CLI Entry Point
+ */
+
+const { program } = require('commander');
+const initCommand = require('../src/commands/init');
+const serveCommand = require('../src/commands/serve');
+const validateCommand = require('../src/commands/validate');
+const checkCommand = require('../src/commands/check');
+const generateCommand = require('../src/commands/generate');
+const optimizeCommand = require('../src/commands/optimize');
+const packageCommand = require('../src/commands/package');
+
+const packageJson = require('../package.json');
+
+program
+  .name('o2vend')
+  .description('O2VEND Theme Development CLI')
+  .version(packageJson.version);
+
+// Add commands directly (no nested 'theme' command)
+program
+  .addCommand(initCommand)
+  .addCommand(serveCommand)
+  .addCommand(validateCommand)
+  .addCommand(checkCommand)
+  .addCommand(generateCommand)
+  .addCommand(optimizeCommand)
+  .addCommand(packageCommand);
+
+program.parse();
+

package/config/widget-map.json

@@ -0,0 +1,45 @@
+{
+  "BrandWidget": "brand",
+  "Brand": "brand",
+  "BrandWidgetCarousel": "brand-carousel",
+  "BrandCarousel": "brand-carousel",
+  "CarouselWidget": "carousel",
+  "Carousel": "carousel",
+  "CategoryListCarouselWidget": "category-list-carousel",
+  "CategoryListCarousel": "category-list-carousel",
+  "CategoryListWidget": "category-list",
+  "CategoryList": "category-list",
+  "CategoryWidget": "category",
+  "Category": "category",
+  "DiscountTimeWidget": "discount-time",
+  "DiscountTime": "discount-time",
+  "FooterWidget": "footer",
+  "FooterMenu": "footer-menu",
+  "GalleryWidget": "gallery",
+  "Gallery": "gallery",
+  "HeaderWidget": "header",
+  "HeaderMenu": "header-menu",
+  "HtmlWidget": "html",
+  "Html": "html",
+  "NewsWidget": "news",
+  "News": "news",
+  "ProductCanvasWidget": "product-canvas",
+  "ProductCanvas": "product-canvas",
+  "ProductCarouselWidget": "product-carousel",
+  "ProductWidget": "product",
+  "Product": "product",
+  "RecentlyViewedWidget": "recently-viewed",
+  "RecentlyViewed": "recently-viewed",
+  "SimpleProductWidget": "simple-product",
+  "SimpleProduct": "simple-product",
+  "SingleProductWidget": "single-product",
+  "SingleProduct": "single-product",
+  "SpaceBarWidget": "spacebar",
+  "SpaceBar": "spacebar",
+  "SpaceBarWidgetCarousel": "spacebar-carousel",
+  "SpaceBarCarousel": "spacebar-carousel",
+  "SplashWidget": "splash",
+  "Splash": "splash",
+  "TestimonialCarousel": "testimonial-carousel"
+}
+

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@o2vend/theme-cli",
+  "version": "1.0.0",
+  "description": "O2VEND Theme Development CLI - Standalone tool for local theme development",
+  "main": "src/index.js",
+  "bin": {
+    "o2vend": "./bin/o2vend"
+  },
+  "keywords": [
+    "o2vend",
+    "theme",
+    "cli",
+    "ecommerce",
+    "liquid"
+  ],
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "echo \"Build complete\""
+  },
+  "dependencies": {
+    "commander": "^11.0.0",
+    "express": "^4.18.2",
+    "liquidjs": "^10.7.0",
+    "axios": "^1.6.0",
+    "lodash": "^4.17.21",
+    "moment": "^2.29.4",
+    "slugify": "^1.6.6",
+    "chokidar": "^3.5.3",
+    "socket.io": "^4.7.0",
+    "chalk": "^4.1.2",
+    "inquirer": "^9.2.0",
+    "ora": "^5.4.1",
+    "boxen": "^7.1.1",
+    "table": "^6.8.3",
+    "listr": "^0.14.3",
+    "dotenv": "^16.3.1",
+    "archiver": "^6.0.1",
+    "glob": "^10.3.10",
+    "fs-extra": "^11.1.1",
+    "node-cache": "^5.1.2",
+    "http-proxy-middleware": "^2.0.6",
+    "open": "^8.4.2"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "files": [
+    "bin/**/*",
+    "src/**/*",
+    "config/**/*",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Jeyan-Technologies/o2vend-theme-dev-tools.git",
+    "directory": "packages/cli"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "author": "Jeyan Technologies Private Limited",
+  "license": "MIT"
+}

package/src/commands/check.js

@@ -0,0 +1,201 @@
+/**
+ * O2VEND Theme CLI - Check Command
+ * Lint and check best practices
+ */
+
+const { Command } = require('commander');
+const path = require('path');
+const fs = require('fs-extra');
+const chalk = require('chalk');
+
+const checkCommand = new Command('check');
+
+checkCommand
+  .description('Check theme for issues and best practices')
+  .option('--strict', 'Enable strict mode')
+  .option('--format <format>', 'Output format (table|json|compact)', 'table')
+  .option('--cwd <path>', 'Working directory (theme path)', process.cwd())
+  .action(async (options) => {
+    try {
+      console.log(chalk.cyan('🔍 Checking theme...\n'));
+
+      const themePath = path.resolve(options.cwd);
+      const issues = [];
+
+      if (!fs.existsSync(themePath)) {
+        console.error(chalk.red(`Theme directory does not exist: ${themePath}`));
+        process.exit(1);
+      }
+
+      // Performance checks
+      const assetFiles = findFiles(themePath, ['css', 'js']);
+      assetFiles.forEach(file => {
+        const size = fs.statSync(file).size;
+        const sizeKB = (size / 1024).toFixed(2);
+        
+        if (size > 500 * 1024) { // > 500KB
+          issues.push({
+            type: 'performance',
+            severity: 'warning',
+            file: path.relative(themePath, file),
+            message: `Large file: ${sizeKB}KB (consider optimization)`
+          });
+        }
+      });
+
+      // Accessibility checks (basic)
+      const liquidFiles = findFiles(themePath, 'liquid');
+      liquidFiles.forEach(file => {
+        const content = fs.readFileSync(file, 'utf8');
+        
+        // Check for images without alt text
+        const imgTags = content.match(/<img[^>]*>/g) || [];
+        imgTags.forEach(img => {
+          if (!img.includes('alt=')) {
+            issues.push({
+              type: 'accessibility',
+              severity: 'warning',
+              file: path.relative(themePath, file),
+              message: 'Image missing alt attribute'
+            });
+          }
+        });
+
+        // Check for form inputs without labels
+        const inputTags = content.match(/<input[^>]*>/g) || [];
+        inputTags.forEach(input => {
+          const id = input.match(/id=["']([^"']+)["']/);
+          if (id && !content.includes(`for="${id[1]}"`)) {
+            issues.push({
+              type: 'accessibility',
+              severity: 'warning',
+              file: path.relative(themePath, file),
+              message: 'Input field should have associated label'
+            });
+          }
+        });
+      });
+
+      // SEO checks
+      const layoutPath = path.join(themePath, 'layout', 'theme.liquid');
+      if (fs.existsSync(layoutPath)) {
+        const layoutContent = fs.readFileSync(layoutPath, 'utf8');
+        
+        if (!layoutContent.includes('<title>')) {
+          issues.push({
+            type: 'seo',
+            severity: 'error',
+            file: 'layout/theme.liquid',
+            message: 'Layout should include <title> tag'
+          });
+        }
+
+        if (!layoutContent.includes('meta name="description"')) {
+          issues.push({
+            type: 'seo',
+            severity: 'warning',
+            file: 'layout/theme.liquid',
+            message: 'Layout should include meta description'
+          });
+        }
+      }
+
+      // Best practices
+      const settingsSchemaPath = path.join(themePath, 'config', 'settings_schema.json');
+      if (!fs.existsSync(settingsSchemaPath)) {
+        issues.push({
+          type: 'best-practice',
+          severity: 'info',
+          file: 'config/settings_schema.json',
+          message: 'Consider adding settings_schema.json for theme customization'
+        });
+      }
+
+      // Output results
+      outputResults(issues, options);
+    } catch (error) {
+      console.error(chalk.red('❌ Check failed:'), error.message);
+      if (error.stack && process.env.DEBUG) {
+        console.error(error.stack);
+      }
+      process.exit(1);
+    }
+  });
+
+/**
+ * Find files by extension(s)
+ */
+function findFiles(dir, ext) {
+  const extensions = Array.isArray(ext) ? ext : [ext];
+  const files = [];
+  
+  if (!fs.existsSync(dir)) return files;
+
+  const items = fs.readdirSync(dir);
+  items.forEach(item => {
+    const itemPath = path.join(dir, item);
+    const stat = fs.statSync(itemPath);
+    if (stat.isDirectory() && !item.startsWith('.') && item !== 'node_modules') {
+      files.push(...findFiles(itemPath, ext));
+    } else {
+      const fileExt = item.split('.').pop();
+      if (extensions.includes(fileExt)) {
+        files.push(itemPath);
+      }
+    }
+  });
+
+  return files;
+}
+
+/**
+ * Output check results
+ */
+function outputResults(issues, options) {
+  if (options.format === 'json') {
+    console.log(JSON.stringify(issues, null, 2));
+    return;
+  }
+
+  if (issues.length === 0) {
+    console.log(chalk.green('✅ All checks passed!'));
+    return;
+  }
+
+  // Group by type
+  const byType = {};
+  issues.forEach(issue => {
+    if (!byType[issue.type]) {
+      byType[issue.type] = [];
+    }
+    byType[issue.type].push(issue);
+  });
+
+  // Output by type
+  Object.keys(byType).forEach(type => {
+    const typeIssues = byType[type];
+    const typeLabel = type.charAt(0).toUpperCase() + type.slice(1);
+    
+    console.log(chalk.cyan(`\n${typeLabel} (${typeIssues.length}):`));
+    
+    typeIssues.forEach(issue => {
+      const icon = issue.severity === 'error' ? '❌' : issue.severity === 'warning' ? '⚠️' : 'ℹ️';
+      const color = issue.severity === 'error' ? chalk.red : issue.severity === 'warning' ? chalk.yellow : chalk.blue;
+      
+      if (options.format === 'compact') {
+        console.log(color(`  ${icon} ${issue.file}: ${issue.message}`));
+      } else {
+        console.log(color(`  ${icon} ${issue.file}`));
+        console.log(chalk.gray(`     ${issue.message}`));
+      }
+    });
+  });
+
+  const errors = issues.filter(i => i.severity === 'error').length;
+  const warnings = issues.filter(i => i.severity === 'warning').length;
+  const info = issues.filter(i => i.severity === 'info').length;
+
+  console.log(chalk.cyan(`\n📊 Summary: ${errors} errors, ${warnings} warnings, ${info} info`));
+}
+
+module.exports = checkCommand;

package/src/commands/generate.js

@@ -0,0 +1,33 @@
+/**
+ * O2VEND Theme CLI - Generate Command
+ * AI-powered theme generation from natural language
+ */
+
+const { Command } = require('commander');
+const chalk = require('chalk');
+
+const generateCommand = new Command('generate');
+
+generateCommand
+  .description('Generate theme from natural language description')
+  .argument('<description>', 'Theme description')
+  .option('--cwd <path>', 'Output directory', process.cwd())
+  .action(async (description, options) => {
+    try {
+      console.log(chalk.cyan('🤖 Generating theme with AI...\n'));
+
+      // TODO: Implement AI-powered theme generation
+      // 1. Parse description
+      // 2. Generate theme structure
+      // 3. Generate templates
+      // 4. Generate settings schema
+      // 5. Generate mock data
+
+      console.log(chalk.green('✅ Theme generated successfully!'));
+    } catch (error) {
+      console.error(chalk.red('❌ Error generating theme:'), error.message);
+      process.exit(1);
+    }
+  });
+
+module.exports = generateCommand;