craft-native 0.0.37 → 0.0.49

package/dist/templates/projects/drawer/src/styles.css

@@ -0,0 +1,468 @@
+:root {
+  --primary: #6200ee;
+  --primary-dark: #3700b3;
+  --secondary: #03dac6;
+  --bg: #ffffff;
+  --bg-secondary: #f5f5f5;
+  --bg-drawer: #ffffff;
+  --text: #1d1d1d;
+  --text-secondary: #757575;
+  --text-on-primary: #ffffff;
+  --border: #e0e0e0;
+  --drawer-width: 280px;
+  --header-height: 56px;
+  --safe-area-top: env(safe-area-inset-top, 0px);
+  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
+  --overlay-bg: rgba(0, 0, 0, 0.5);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --primary: #bb86fc;
+    --primary-dark: #6200ee;
+    --secondary: #03dac6;
+    --bg: #121212;
+    --bg-secondary: #1e1e1e;
+    --bg-drawer: #1e1e1e;
+    --text: #e1e1e1;
+    --text-secondary: #a0a0a0;
+    --text-on-primary: #000000;
+    --border: #2c2c2c;
+    --overlay-bg: rgba(0, 0, 0, 0.7);
+  }
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* Drawer Overlay */
+.drawer-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--overlay-bg);
+  z-index: 998;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+}
+
+.drawer-overlay.open {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Drawer */
+.drawer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: var(--drawer-width);
+  height: 100%;
+  background: var(--bg-drawer);
+  z-index: 999;
+  transform: translateX(-100%);
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  display: flex;
+  flex-direction: column;
+  box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
+}
+
+.drawer.open {
+  transform: translateX(0);
+}
+
+.drawer-header {
+  padding: calc(var(--safe-area-top) + 24px) 16px 24px 16px;
+  background: var(--primary);
+  color: var(--text-on-primary);
+}
+
+.drawer-header-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.3);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 28px;
+  margin-bottom: 16px;
+}
+
+.drawer-header-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.drawer-header-subtitle {
+  font-size: 14px;
+  opacity: 0.8;
+}
+
+.drawer-content {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.drawer-section {
+  padding: 8px 0;
+}
+
+.drawer-section-title {
+  padding: 8px 16px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+.drawer-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 12px 16px;
+  color: var(--text);
+  cursor: pointer;
+  transition: background 0.2s ease;
+  border: none;
+  background: none;
+  width: 100%;
+  text-align: left;
+  font-size: 14px;
+}
+
+.drawer-item:hover {
+  background: var(--bg-secondary);
+}
+
+.drawer-item.active {
+  background: rgba(98, 0, 238, 0.1);
+  color: var(--primary);
+}
+
+.drawer-item svg {
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+}
+
+.drawer-item-label {
+  flex: 1;
+}
+
+.drawer-item-badge {
+  background: var(--primary);
+  color: var(--text-on-primary);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 2px 8px;
+  border-radius: 10px;
+}
+
+.drawer-divider {
+  height: 1px;
+  background: var(--border);
+  margin: 8px 0;
+}
+
+.drawer-footer {
+  padding: 16px;
+  padding-bottom: calc(var(--safe-area-bottom) + 16px);
+  border-top: 1px solid var(--border);
+}
+
+.drawer-footer-version {
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+/* Header */
+.header {
+  position: sticky;
+  top: 0;
+  height: var(--header-height);
+  background: var(--primary);
+  color: var(--text-on-primary);
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 0 16px;
+  padding-top: var(--safe-area-top);
+  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.header-menu-btn {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  color: var(--text-on-primary);
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+}
+
+.header-menu-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.header-menu-btn:active {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+.header-menu-btn svg {
+  width: 24px;
+  height: 24px;
+}
+
+.header h1 {
+  font-size: 20px;
+  font-weight: 500;
+  flex: 1;
+}
+
+.header-action {
+  width: 40px;
+  height: 40px;
+  border: none;
+  background: none;
+  color: var(--text-on-primary);
+  cursor: pointer;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background 0.2s ease;
+}
+
+.header-action:hover {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.header-action svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Content */
+.content {
+  padding: 16px;
+  min-height: calc(100vh - var(--header-height) - var(--safe-area-top));
+}
+
+.page {
+  display: none;
+}
+
+.page.active {
+  display: block;
+}
+
+/* Cards */
+.card {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  padding: 16px;
+  margin-bottom: 16px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+
+.card h3 {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.card p {
+  color: var(--text-secondary);
+  font-size: 14px;
+  line-height: 1.5;
+}
+
+/* List */
+.list-item {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.list-item:last-child {
+  border-bottom: none;
+}
+
+.list-item-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--primary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-on-primary);
+  font-size: 18px;
+}
+
+.list-item-content {
+  flex: 1;
+}
+
+.list-item-title {
+  font-weight: 500;
+  margin-bottom: 2px;
+}
+
+.list-item-subtitle {
+  font-size: 13px;
+  color: var(--text-secondary);
+}
+
+.list-item-action {
+  color: var(--text-secondary);
+}
+
+/* FAB */
+.fab {
+  position: fixed;
+  bottom: calc(24px + var(--safe-area-bottom));
+  right: 24px;
+  width: 56px;
+  height: 56px;
+  border-radius: 16px;
+  background: var(--secondary);
+  color: #000;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  z-index: 50;
+}
+
+.fab:hover {
+  transform: scale(1.05);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
+}
+
+.fab:active {
+  transform: scale(0.95);
+}
+
+.fab svg {
+  width: 24px;
+  height: 24px;
+}
+
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 48px 24px;
+}
+
+.empty-state-icon {
+  font-size: 64px;
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+.empty-state-title {
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.empty-state-text {
+  color: var(--text-secondary);
+  font-size: 14px;
+}
+
+/* Settings List */
+.settings-list {
+  background: var(--bg-secondary);
+  border-radius: 12px;
+  overflow: hidden;
+  margin-bottom: 16px;
+}
+
+.settings-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-bottom: 1px solid var(--border);
+  cursor: pointer;
+  transition: background 0.2s ease;
+}
+
+.settings-item:last-child {
+  border-bottom: none;
+}
+
+.settings-item:hover {
+  background: var(--bg);
+}
+
+.settings-item-label {
+  font-size: 15px;
+}
+
+.settings-item-value {
+  font-size: 14px;
+  color: var(--text-secondary);
+}
+
+/* Toggle Switch */
+.toggle {
+  position: relative;
+  width: 48px;
+  height: 28px;
+  background: var(--border);
+  border-radius: 14px;
+  cursor: pointer;
+  transition: background 0.3s ease;
+}
+
+.toggle.on {
+  background: var(--primary);
+}
+
+.toggle::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 24px;
+  height: 24px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.3s ease;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+.toggle.on::after {
+  transform: translateX(20px);
+}

package/dist/templates/projects/ecommerce/craft.config.ts

@@ -0,0 +1,32 @@
+import type { CraftConfig } from 'craft-native'
+
+export default {
+  name: '{{appName}}',
+  version: '0.1.0',
+
+  platforms: {
+    ios: {
+      bundleId: '{{bundleId}}',
+      minimumVersion: '15.0',
+      capabilities: ['apple-pay', 'push-notifications'],
+    },
+    android: {
+      packageName: '{{packageName}}',
+      minSdk: 24,
+      permissions: ['INTERNET', 'POST_NOTIFICATIONS'],
+    },
+    macos: {
+      bundleId: '{{bundleId}}',
+      category: 'business',
+    },
+    windows: {
+      packageName: '{{packageName}}',
+    },
+  },
+
+  build: {
+    outDir: 'dist',
+    minify: true,
+    sourcemap: true,
+  },
+} satisfies CraftConfig

package/dist/templates/projects/ecommerce/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
+  <title>{{appName}}</title>
+  <link rel="stylesheet" href="src/styles.css">
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="src/main.ts"></script>
+</body>
+</html>

package/dist/templates/projects/ecommerce/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "description": "E-commerce app built with Craft",
+  "main": "src/main.ts",
+  "scripts": {
+    "dev": "craft dev",
+    "build": "craft build",
+    "build:ios": "craft build --platform ios",
+    "build:android": "craft build --platform android",
+    "build:all": "craft build --platform ios,android,macos,windows"
+  },
+  "dependencies": {
+    "craft-native": "workspace:*"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0"
+  }
+}

package/dist/templates/projects/ecommerce/src/main.ts

@@ -0,0 +1,194 @@
+/**
+ * E-commerce Template - {{appName}}
+ * A cross-platform shopping app built with Craft
+ */
+
+import { db, win, isMobile, haptics } from 'craft-native'
+
+// Types
+interface Product {
+  id: string
+  name: string
+  description: string
+  price: number
+  image: string
+  category: string
+  inStock: boolean
+}
+
+interface CartItem {
+  product: Product
+  quantity: number
+}
+
+// State
+let products: Product[] = []
+let cart: CartItem[] = []
+let currentView: 'home' | 'cart' | 'product' = 'home'
+let selectedProductId: string | null = null
+
+// Initialize
+async function init(): Promise<void> {
+  await initDatabase()
+  await loadProducts()
+
+  win.setTitle('{{appName}}')
+  win.setSize(400, 800)
+
+  render()
+}
+
+async function initDatabase(): Promise<void> {
+  await db.execute(`
+    CREATE TABLE IF NOT EXISTS cart (
+      productId TEXT PRIMARY KEY,
+      quantity INTEGER DEFAULT 1
+    )
+  `)
+}
+
+async function loadProducts(): Promise<void> {
+  // Sample products - replace with API call
+  products = [
+    { id: '1', name: 'Product 1', description: 'Description', price: 29.99, image: '', category: 'Category', inStock: true },
+    { id: '2', name: 'Product 2', description: 'Description', price: 49.99, image: '', category: 'Category', inStock: true },
+    { id: '3', name: 'Product 3', description: 'Description', price: 19.99, image: '', category: 'Category', inStock: false },
+  ]
+}
+
+// Cart functions
+function addToCart(productId: string): void {
+  const product = products.find(p => p.id === productId)
+  if (!product) return
+
+  const existingItem = cart.find(item => item.product.id === productId)
+  if (existingItem) {
+    existingItem.quantity++
+  }
+else {
+    cart.push({ product, quantity: 1 })
+  }
+
+  if (isMobile()) {
+    haptics.notification('success')
+  }
+
+  render()
+}
+
+function removeFromCart(productId: string): void {
+  cart = cart.filter(item => item.product.id !== productId)
+  render()
+}
+
+function getCartTotal(): number {
+  return cart.reduce((sum, item) => sum + (item.product.price * item.quantity), 0)
+}
+
+// Navigation
+function navigate(view: typeof currentView, productId?: string): void {
+  currentView = view
+  selectedProductId = productId || null
+  render()
+}
+
+// Render
+function render(): void {
+  const app = document.getElementById('app')
+  if (!app) return
+
+  let content = ''
+  switch (currentView) {
+    case 'home':
+      content = renderHome()
+      break
+    case 'cart':
+      content = renderCart()
+      break
+    case 'product':
+      content = renderProduct()
+      break
+  }
+
+  app.innerHTML = `
+    <div class="app">
+      <header class="header">
+        <h1>{{appName}}</h1>
+        <button class="cart-btn" onclick="navigate('cart')">
+          🛒 ${cart.length}
+        </button>
+      </header>
+      <main>${content}</main>
+      <nav class="bottom-nav">
+        <button onclick="navigate('home')" class="${currentView === 'home' ? 'active' : ''}">Home</button>
+        <button onclick="navigate('cart')" class="${currentView === 'cart' ? 'active' : ''}">Cart</button>
+      </nav>
+    </div>
+  `
+}
+
+function renderHome(): string {
+  return `
+    <div class="products-grid">
+      ${products.map(product => `
+        <div class="product-card" onclick="navigate('product', '${product.id}')">
+          <div class="product-image"></div>
+          <h3>${product.name}</h3>
+          <p class="price">$${product.price.toFixed(2)}</p>
+          <button onclick="event.stopPropagation(); addToCart('${product.id}')"
+                  ${!product.inStock ? 'disabled' : ''}>
+            ${product.inStock ? 'Add to Cart' : 'Out of Stock'}
+          </button>
+        </div>
+      `).join('')}
+    </div>
+  `
+}
+
+function renderCart(): string {
+  if (cart.length === 0) {
+    return `<div class="empty-state"><p>Your cart is empty</p></div>`
+  }
+
+  return `
+    <div class="cart">
+      ${cart.map(item => `
+        <div class="cart-item">
+          <span>${item.product.name} x${item.quantity}</span>
+          <span>$${(item.product.price * item.quantity).toFixed(2)}</span>
+          <button onclick="removeFromCart('${item.product.id}')">Remove</button>
+        </div>
+      `).join('')}
+      <div class="cart-total">
+        <strong>Total: $${getCartTotal().toFixed(2)}</strong>
+      </div>
+      <button class="checkout-btn">Checkout</button>
+    </div>
+  `
+}
+
+function renderProduct(): string {
+  const product = products.find(p => p.id === selectedProductId)
+  if (!product) return '<p>Product not found</p>'
+
+  return `
+    <div class="product-detail">
+      <button onclick="navigate('home')">← Back</button>
+      <div class="product-image large"></div>
+      <h2>${product.name}</h2>
+      <p>${product.description}</p>
+      <p class="price">$${product.price.toFixed(2)}</p>
+      <button onclick="addToCart('${product.id}')" ${!product.inStock ? 'disabled' : ''}>
+        ${product.inStock ? 'Add to Cart' : 'Out of Stock'}
+      </button>
+    </div>
+  `
+}
+
+// Expose functions globally
+(window as any).navigate = navigate
+;(window as any).addToCart = addToCart
+;(window as any).removeFromCart = removeFromCart
+
+// Start app
+init()