@spwig/theme-cli 1.0.0 → 2.0.0

package/dist/schemas/theme_manifest_schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "http://json-schema.org/draft-07/schema#",
   "title": "Theme Package Manifest Schema",
-  "description": "Schema for Spwig theme package manifests with bundled components",
+  "description": "Schema for Spwig v2.0 theme package manifests",
   "type": "object",
   "required": [
     "name",
@@ -41,74 +41,16 @@
       "maxLength": 100,
       "description": "Theme author/vendor name"
     },
+    "sdk_version": {
+      "type": "string",
+      "description": "SDK version used to create this theme (e.g., '2.0')"
+    },
     "license": {
       "type": "string",
       "enum": ["MIT", "Apache-2.0", "GPL-3.0", "Proprietary"],
       "default": "Proprietary",
       "description": "Theme license type"
     },
-    "bundled_components": {
-      "type": "array",
-      "items": {
-        "type": "object",
-        "required": ["type", "name", "path"],
-        "properties": {
-          "type": {
-            "type": "string",
-            "enum": ["header", "footer", "section", "utility"],
-            "description": "Component type"
-          },
-          "name": {
-            "type": "string",
-            "pattern": "^[a-z][a-z0-9_-]*$",
-            "description": "Component name"
-          },
-          "path": {
-            "type": "string",
-            "pattern": "^components/",
-            "description": "Relative path to component directory"
-          }
-        }
-      },
-      "description": "List of components bundled with this theme"
-    },
-    "page_schemas": {
-      "type": "object",
-      "properties": {
-        "home": {
-          "type": "string",
-          "description": "Path to home page schema"
-        },
-        "product": {
-          "type": "string",
-          "description": "Path to product page schema"
-        },
-        "collection": {
-          "type": "string",
-          "description": "Path to collection page schema"
-        },
-        "cart": {
-          "type": "string",
-          "description": "Path to cart page schema"
-        },
-        "checkout": {
-          "type": "string",
-          "description": "Path to checkout page schema"
-        },
-        "landing": {
-          "type": "string",
-          "description": "Path to landing page schema"
-        }
-      },
-      "additionalProperties": {
-        "type": "string"
-      },
-      "description": "Page schema file paths"
-    },
-    "design_tokens": {
-      "type": "string",
-      "description": "Path to design tokens file (colors, fonts, spacing)"
-    },
     "preview_image": {
       "type": "string",
       "pattern": "^.+\\.(png|jpg|jpeg|webp)$",

package/dist/templates/assets/logo.svg.template

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 60" width="200" height="60">
+  <rect width="200" height="60" fill="#f3f4f6" rx="4"/>
+  <text x="100" y="38" text-anchor="middle" font-family="system-ui, sans-serif" font-size="14" fill="#9ca3af">
+    Your Logo
+  </text>
+</svg>

package/dist/templates/assets/theme.js.template

@@ -0,0 +1,150 @@
+/**
+ * {{displayName}} - Theme JavaScript
+ *
+ * Main entry point for theme interactivity
+ */
+
+(function() {
+  'use strict';
+
+  /**
+   * Initialize theme when DOM is ready
+   */
+  document.addEventListener('DOMContentLoaded', function() {
+    initProductGallery();
+    initQuantitySelectors();
+    initMobileMenu();
+  });
+
+  /**
+   * Product image gallery functionality
+   */
+  function initProductGallery() {
+    const thumbnails = document.querySelectorAll('.thumbnail');
+    const mainImage = document.getElementById('main-product-image');
+
+    if (!mainImage || thumbnails.length === 0) return;
+
+    thumbnails.forEach(function(thumbnail) {
+      thumbnail.addEventListener('click', function() {
+        const newSrc = this.getAttribute('data-image');
+        if (newSrc) {
+          mainImage.src = newSrc;
+
+          // Update active state
+          thumbnails.forEach(t => t.classList.remove('active'));
+          this.classList.add('active');
+        }
+      });
+    });
+  }
+
+  /**
+   * Quantity selector +/- buttons
+   */
+  function initQuantitySelectors() {
+    const quantityInputs = document.querySelectorAll('.qty-input');
+
+    quantityInputs.forEach(function(input) {
+      input.addEventListener('change', function() {
+        const form = this.closest('form');
+        if (form && form.classList.contains('quantity-form')) {
+          form.submit();
+        }
+      });
+    });
+  }
+
+  /**
+   * Mobile menu toggle
+   */
+  function initMobileMenu() {
+    const menuToggle = document.querySelector('.mobile-menu-toggle');
+    const mobileMenu = document.querySelector('.mobile-menu');
+
+    if (!menuToggle || !mobileMenu) return;
+
+    menuToggle.addEventListener('click', function() {
+      const isOpen = mobileMenu.classList.toggle('is-open');
+      menuToggle.setAttribute('aria-expanded', isOpen);
+      document.body.classList.toggle('menu-open', isOpen);
+    });
+  }
+
+  /**
+   * Add to cart with AJAX (optional enhancement)
+   */
+  function initAjaxCart() {
+    const addToCartForms = document.querySelectorAll('.add-to-cart-form');
+
+    addToCartForms.forEach(function(form) {
+      form.addEventListener('submit', function(e) {
+        // Comment out to enable AJAX cart
+        // e.preventDefault();
+        // const formData = new FormData(form);
+        //
+        // fetch('/cart/add/', {
+        //   method: 'POST',
+        //   body: formData,
+        //   headers: {
+        //     'X-Requested-With': 'XMLHttpRequest'
+        //   }
+        // })
+        // .then(response => response.json())
+        // .then(data => {
+        //   // Update cart count
+        //   updateCartCount(data.item_count);
+        //   // Show success message
+        //   showNotification('Added to cart');
+        // })
+        // .catch(error => {
+        //   console.error('Error:', error);
+        // });
+      });
+    });
+  }
+
+  /**
+   * Update cart item count in header
+   */
+  function updateCartCount(count) {
+    const cartCount = document.querySelector('.cart-count');
+    if (cartCount) {
+      cartCount.textContent = count;
+      cartCount.style.display = count > 0 ? 'flex' : 'none';
+    }
+  }
+
+  /**
+   * Show notification message
+   */
+  function showNotification(message, type) {
+    type = type || 'success';
+
+    const notification = document.createElement('div');
+    notification.className = 'notification notification-' + type;
+    notification.textContent = message;
+
+    document.body.appendChild(notification);
+
+    // Trigger animation
+    setTimeout(function() {
+      notification.classList.add('is-visible');
+    }, 10);
+
+    // Remove after delay
+    setTimeout(function() {
+      notification.classList.remove('is-visible');
+      setTimeout(function() {
+        notification.remove();
+      }, 300);
+    }, 3000);
+  }
+
+  // Expose functions globally if needed
+  window.ThemeHelpers = {
+    updateCartCount: updateCartCount,
+    showNotification: showNotification
+  };
+
+})();

package/dist/templates/components/footer.schema.json.template

@@ -0,0 +1,22 @@
+{
+  "settings": [
+    {
+      "id": "background_color",
+      "type": "color",
+      "label": "Background Color",
+      "default": "#f9fafb"
+    },
+    {
+      "id": "show_powered_by",
+      "type": "checkbox",
+      "label": "Show Powered by Spwig",
+      "default": true
+    },
+    {
+      "id": "show_social_links",
+      "type": "checkbox",
+      "label": "Show Social Links",
+      "default": true
+    }
+  ]
+}

package/dist/templates/components/footer.styles.css.template

@@ -0,0 +1,80 @@
+/* Footer Component Styles */
+
+.site-footer {
+  background-color: var(--background-secondary, #f9fafb);
+  border-top: 1px solid var(--border-color, #e5e7eb);
+  padding: var(--spacing-xl, 3rem) 0 var(--spacing-lg, 2rem);
+  margin-top: auto;
+}
+
+.footer-content {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  gap: var(--spacing-lg, 2rem);
+}
+
+.footer-section h3 {
+  font-size: var(--heading-size-sm, 1.125rem);
+  font-weight: 600;
+  margin-bottom: var(--spacing-md, 1rem);
+  color: var(--text-color, #1f2937);
+}
+
+.footer-nav {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.5rem);
+}
+
+.footer-nav a {
+  color: var(--text-secondary, #6b7280);
+  font-size: 0.875rem;
+  transition: color 0.2s;
+}
+
+.footer-nav a:hover {
+  color: var(--primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.contact-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-xs, 0.5rem);
+}
+
+.contact-info p {
+  color: var(--text-secondary, #6b7280);
+  font-size: 0.875rem;
+  margin: 0;
+}
+
+.footer-bottom {
+  grid-column: 1 / -1;
+  border-top: 1px solid var(--border-color, #e5e7eb);
+  margin-top: var(--spacing-lg, 2rem);
+  padding-top: var(--spacing-lg, 2rem);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm, 0.75rem);
+}
+
+.footer-bottom p {
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--text-secondary, #6b7280);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .footer-content {
+    grid-template-columns: 1fr;
+  }
+
+  .footer-bottom {
+    flex-direction: column;
+    text-align: center;
+  }
+}

package/dist/templates/components/header.styles.css.template

@@ -0,0 +1,104 @@
+/* Header Component Styles */
+
+.site-header {
+  background-color: var(--background-color, #ffffff);
+  border-bottom: 1px solid var(--border-color, #e5e7eb);
+  padding: var(--spacing-md, 1rem) 0;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-md, 1rem);
+}
+
+.header-logo {
+  flex-shrink: 0;
+}
+
+.logo-image {
+  max-height: 48px;
+  width: auto;
+}
+
+.logo-text {
+  font-size: var(--heading-size-lg, 1.5rem);
+  font-weight: 700;
+  color: var(--text-color, #1f2937);
+  text-decoration: none;
+}
+
+.logo-text:hover {
+  text-decoration: none;
+  color: var(--primary-color, #3b82f6);
+}
+
+.main-navigation {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md, 1rem);
+}
+
+.nav-link {
+  color: var(--text-color, #1f2937);
+  font-weight: 500;
+  padding: var(--spacing-xs, 0.5rem) var(--spacing-sm, 0.75rem);
+  border-radius: var(--border-radius, 4px);
+  transition: background-color 0.2s, color 0.2s;
+}
+
+.nav-link:hover {
+  background-color: var(--background-secondary, #f3f4f6);
+  color: var(--primary-color, #3b82f6);
+  text-decoration: none;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm, 0.75rem);
+}
+
+.cart-link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-xs, 0.5rem);
+  color: var(--text-color, #1f2937);
+}
+
+.cart-link:hover {
+  color: var(--primary-color, #3b82f6);
+}
+
+.cart-icon {
+  width: 24px;
+  height: 24px;
+}
+
+.cart-count {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  background-color: var(--primary-color, #3b82f6);
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+  min-width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .main-navigation {
+    display: none;
+  }
+}

package/dist/templates/components/section.manifest.json.template

@@ -6,6 +6,6 @@
   "author": "{{author}}",
   "tier_compatibility": ["A", "B", "C"],
   "regions": ["main", "sidebar"],
-  "category": "section",
-  "tags": ["section", "content"]
+  "category": "hero",
+  "tags": ["hero", "banner", "content"]
 }

package/dist/templates/components/section.schema.json.template

@@ -0,0 +1,40 @@
+{
+  "settings": [
+    {
+      "id": "title",
+      "type": "text",
+      "label": "Title",
+      "default": "Welcome"
+    },
+    {
+      "id": "description",
+      "type": "textarea",
+      "label": "Description",
+      "default": "Discover our amazing products"
+    },
+    {
+      "id": "background_color",
+      "type": "color",
+      "label": "Background Color",
+      "default": "#ffffff"
+    },
+    {
+      "id": "show_button",
+      "type": "checkbox",
+      "label": "Show Button",
+      "default": true
+    },
+    {
+      "id": "button_text",
+      "type": "text",
+      "label": "Button Text",
+      "default": "Shop Now"
+    },
+    {
+      "id": "button_url",
+      "type": "url",
+      "label": "Button URL",
+      "default": "/products"
+    }
+  ]
+}

package/dist/templates/components/section.styles.css.template

@@ -0,0 +1,60 @@
+/* Hero Section Component Styles */
+
+.hero-section {
+  padding: var(--spacing-xxl, 5rem) 0;
+  background-color: var(--background-color, #ffffff);
+}
+
+.hero-content {
+  max-width: 800px;
+  margin: 0 auto;
+  text-align: center;
+}
+
+.hero-title {
+  font-family: var(--heading-font, inherit);
+  font-size: var(--heading-size-xxl, 3rem);
+  font-weight: 700;
+  color: var(--text-color, #1f2937);
+  margin-bottom: var(--spacing-md, 1rem);
+  line-height: 1.2;
+}
+
+.hero-description {
+  font-size: var(--text-lg, 1.25rem);
+  color: var(--text-secondary, #6b7280);
+  margin-bottom: var(--spacing-lg, 2rem);
+  line-height: 1.6;
+}
+
+.hero-button {
+  display: inline-block;
+  padding: var(--spacing-sm, 0.75rem) var(--spacing-lg, 2rem);
+  background-color: var(--primary-color, #3b82f6);
+  color: white;
+  font-weight: 600;
+  border-radius: var(--border-radius, 4px);
+  text-decoration: none;
+  transition: background-color 0.2s, transform 0.2s;
+}
+
+.hero-button:hover {
+  background-color: var(--primary-dark, #2563eb);
+  text-decoration: none;
+  transform: translateY(-1px);
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  .hero-section {
+    padding: var(--spacing-xl, 3rem) 0;
+  }
+
+  .hero-title {
+    font-size: var(--heading-size-xl, 2rem);
+  }
+
+  .hero-description {
+    font-size: var(--text-md, 1rem);
+  }
+}

package/dist/templates/pages/cart.html.template

@@ -0,0 +1,104 @@
+{% extends "layout.html" %}
+
+{% block title %}Shopping Cart - {{ store.name }}{% endblock %}
+
+{% block body_class %}page-cart{% endblock %}
+
+{% block content %}
+  <div class="cart-page">
+    <div class="container">
+      <h1 class="page-title">Shopping Cart</h1>
+
+      {% if cart.items %}
+        <div class="cart-layout">
+          <!-- Cart Items -->
+          <div class="cart-items">
+            {% for item in cart.items %}
+              <div class="cart-item" data-item-id="{{ item.id }}">
+                <div class="item-image">
+                  {% if item.image %}
+                    <img src="{{ item.image }}" alt="{{ item.title }}">
+                  {% endif %}
+                </div>
+
+                <div class="item-details">
+                  <h3 class="item-title">
+                    <a href="{{ item.url }}">{{ item.title }}</a>
+                  </h3>
+                  {% if item.variant_title %}
+                    <p class="item-variant">{{ item.variant_title }}</p>
+                  {% endif %}
+                </div>
+
+                <div class="item-quantity">
+                  <form action="/cart/update/" method="post" class="quantity-form">
+                    {% csrf_token %}
+                    <input type="hidden" name="item_id" value="{{ item.id }}">
+                    <button type="button" class="qty-btn minus" onclick="this.nextElementSibling.stepDown(); this.form.submit();">-</button>
+                    <input type="number" name="quantity" value="{{ item.quantity }}" min="0" max="99" class="qty-input">
+                    <button type="button" class="qty-btn plus" onclick="this.previousElementSibling.stepUp(); this.form.submit();">+</button>
+                  </form>
+                </div>
+
+                <div class="item-price">
+                  {{ item.line_price|currency }}
+                </div>
+
+                <form action="/cart/remove/" method="post" class="remove-form">
+                  {% csrf_token %}
+                  <input type="hidden" name="item_id" value="{{ item.id }}">
+                  <button type="submit" class="remove-btn" aria-label="Remove item">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                      <line x1="18" y1="6" x2="6" y2="18"></line>
+                      <line x1="6" y1="6" x2="18" y2="18"></line>
+                    </svg>
+                  </button>
+                </form>
+              </div>
+            {% endfor %}
+          </div>
+
+          <!-- Cart Summary -->
+          <div class="cart-summary">
+            <h2>Order Summary</h2>
+
+            <div class="summary-line">
+              <span>Subtotal</span>
+              <span>{{ cart.subtotal|currency }}</span>
+            </div>
+
+            {% if cart.discount %}
+              <div class="summary-line discount">
+                <span>Discount</span>
+                <span>-{{ cart.discount|currency }}</span>
+              </div>
+            {% endif %}
+
+            <div class="summary-line shipping">
+              <span>Shipping</span>
+              <span>Calculated at checkout</span>
+            </div>
+
+            <div class="summary-total">
+              <span>Total</span>
+              <span>{{ cart.total|currency }}</span>
+            </div>
+
+            <a href="/checkout/" class="checkout-button">
+              Proceed to Checkout
+            </a>
+
+            <a href="/" class="continue-shopping">
+              Continue Shopping
+            </a>
+          </div>
+        </div>
+      {% else %}
+        <div class="cart-empty">
+          <p>Your cart is empty.</p>
+          <a href="/" class="continue-shopping-button">Continue Shopping</a>
+        </div>
+      {% endif %}
+    </div>
+  </div>
+{% endblock %}