@beknurakhmed/webforge-cli 0.1.0 → 0.1.2

package/templates/overlays/ecommerce/react/src/components/Cart.tsx

@@ -1,47 +0,0 @@
-import type { CartItem } from '../App';
-
-interface CartProps {
-  items: CartItem[];
-  onRemove: (id: number) => void;
-  onClose: () => void;
-}
-
-export function Cart({ items, onRemove, onClose }: CartProps) {
-  const total = items.reduce((sum, item) => sum + item.price * item.quantity, 0);
-
-  return (
-    <div className="cart-overlay" onClick={onClose}>
-      <div className="cart-panel" onClick={(e) => e.stopPropagation()}>
-        <div className="cart-header">
-          <h2>Shopping Cart</h2>
-          <button className="cart-close" onClick={onClose}>X</button>
-        </div>
-        {items.length === 0 ? (
-          <p className="cart-empty">Your cart is empty</p>
-        ) : (
-          <>
-            <div className="cart-items">
-              {items.map((item) => (
-                <div key={item.id} className="cart-item">
-                  <span className="cart-item-image">{item.image}</span>
-                  <div className="cart-item-info">
-                    <h4>{item.name}</h4>
-                    <p>Qty: {item.quantity} x ${item.price.toFixed(2)}</p>
-                  </div>
-                  <button className="cart-item-remove" onClick={() => onRemove(item.id)}>Remove</button>
-                </div>
-              ))}
-            </div>
-            <div className="cart-footer">
-              <div className="cart-total">
-                <span>Total:</span>
-                <strong>${total.toFixed(2)}</strong>
-              </div>
-              <button className="checkout-btn">Checkout</button>
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}

package/templates/overlays/ecommerce/react/src/components/ProductGrid.tsx

@@ -1,32 +0,0 @@
-import type { Product } from '../App';
-
-interface ProductGridProps {
-  products: Product[];
-  onAddToCart: (product: Product) => void;
-}
-
-export function ProductGrid({ products, onAddToCart }: ProductGridProps) {
-  return (
-    <section className="product-section">
-      <h2>All Products</h2>
-      <div className="product-grid">
-        {products.map((product) => (
-          <div key={product.id} className="product-card">
-            <div className="product-image">{product.image}</div>
-            <div className="product-info">
-              <span className="product-category">{product.category}</span>
-              <h3>{product.name}</h3>
-              <p>{product.description}</p>
-              <div className="product-footer">
-                <span className="product-price">${product.price.toFixed(2)}</span>
-                <button className="add-to-cart" onClick={() => onAddToCart(product)}>
-                  Add to Cart
-                </button>
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

package/templates/overlays/ecommerce/vue/src/components/CartPanel.vue

@@ -1,46 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-interface CartItem { id: number; name: string; price: number; image: string; quantity: number; }
-const props = defineProps<{ items: CartItem[] }>();
-defineEmits<{ remove: [id: number]; close: [] }>();
-const total = computed(() => props.items.reduce((sum, item) => sum + item.price * item.quantity, 0));
-</script>
-
-<template>
-  <div class="cart-overlay" @click="$emit('close')">
-    <div class="cart-panel" @click.stop>
-      <div class="cart-header"><h2>Shopping Cart</h2><button @click="$emit('close')">X</button></div>
-      <p v-if="items.length === 0" class="cart-empty">Your cart is empty</p>
-      <template v-else>
-        <div class="cart-items">
-          <div v-for="item in items" :key="item.id" class="cart-item">
-            <span>{{ item.image }}</span>
-            <div><h4>{{ item.name }}</h4><p>Qty: {{ item.quantity }} x ${{ item.price.toFixed(2) }}</p></div>
-            <button @click="$emit('remove', item.id)">Remove</button>
-          </div>
-        </div>
-        <div class="cart-footer">
-          <div class="cart-total"><span>Total:</span><strong>${{ total.toFixed(2) }}</strong></div>
-          <button class="checkout-btn">Checkout</button>
-        </div>
-      </template>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.cart-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 50; }
-.cart-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 100%; background: white; box-shadow: -4px 0 25px rgba(0,0,0,0.1); display: flex; flex-direction: column; }
-.cart-header { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem; border-bottom: 1px solid #e5e7eb; }
-.cart-header h2 { margin: 0; font-size: 1.25rem; }
-.cart-header button { background: none; border: none; font-size: 1.25rem; cursor: pointer; }
-.cart-empty { text-align: center; padding: 3rem; color: #9ca3af; }
-.cart-items { flex: 1; overflow-y: auto; padding: 1rem; }
-.cart-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #f3f4f6; }
-.cart-item h4 { margin: 0; font-size: 0.95rem; }
-.cart-item p { color: #6b7280; font-size: 0.85rem; margin: 0; }
-.cart-item button { background: none; border: none; color: #ef4444; cursor: pointer; margin-left: auto; }
-.cart-footer { padding: 1.5rem; border-top: 1px solid #e5e7eb; }
-.cart-total { display: flex; justify-content: space-between; margin-bottom: 1rem; font-size: 1.1rem; }
-.checkout-btn { width: 100%; background: #4f46e5; color: white; border: none; padding: 0.75rem; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; }
-</style>

package/templates/overlays/ecommerce/vue/src/components/ProductGrid.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-interface Product { id: number; name: string; price: number; image: string; category: string; description: string; }
-defineProps<{ products: Product[] }>();
-defineEmits<{ 'add-to-cart': [product: Product] }>();
-</script>
-
-<template>
-  <section class="product-section">
-    <h2>All Products</h2>
-    <div class="product-grid">
-      <div v-for="p in products" :key="p.id" class="product-card">
-        <div class="product-image">{{ p.image }}</div>
-        <div class="product-info">
-          <span class="product-category">{{ p.category }}</span>
-          <h3>{{ p.name }}</h3>
-          <p>{{ p.description }}</p>
-          <div class="product-footer">
-            <span class="product-price">${{ p.price.toFixed(2) }}</span>
-            <button class="add-to-cart" @click="$emit('add-to-cart', p)">Add to Cart</button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<style scoped>
-.product-section h2 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1.5rem; }
-.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }
-.product-card { border: 1px solid #e5e7eb; border-radius: 12px; overflow: hidden; transition: all 0.2s; }
-.product-card:hover { box-shadow: 0 8px 25px rgba(0,0,0,0.08); transform: translateY(-2px); }
-.product-image { font-size: 4rem; text-align: center; padding: 2rem; background: #f9fafb; }
-.product-info { padding: 1.25rem; }
-.product-category { font-size: 0.75rem; color: #4f46e5; font-weight: 600; text-transform: uppercase; }
-.product-info h3 { font-size: 1.1rem; margin: 0.25rem 0; }
-.product-info p { color: #6b7280; font-size: 0.9rem; margin-bottom: 1rem; }
-.product-footer { display: flex; justify-content: space-between; align-items: center; }
-.product-price { font-size: 1.25rem; font-weight: 700; }
-.add-to-cart { background: #4f46e5; color: white; border: none; padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; font-weight: 500; }
-</style>

package/templates/overlays/portfolio/react/src/components/ContactForm.tsx

@@ -1,29 +0,0 @@
-export function ContactForm() {
-  return (
-    <section id="contact" className="contact-section">
-      <h2>Get In Touch</h2>
-      <p className="section-subtitle">Have a project in mind? Let's work together.</p>
-      <form className="contact-form" onSubmit={(e) => e.preventDefault()}>
-        <div className="form-row">
-          <div className="form-group">
-            <label htmlFor="name">Name</label>
-            <input type="text" id="name" placeholder="Your name" />
-          </div>
-          <div className="form-group">
-            <label htmlFor="email">Email</label>
-            <input type="email" id="email" placeholder="your@email.com" />
-          </div>
-        </div>
-        <div className="form-group">
-          <label htmlFor="subject">Subject</label>
-          <input type="text" id="subject" placeholder="Project inquiry" />
-        </div>
-        <div className="form-group">
-          <label htmlFor="message">Message</label>
-          <textarea id="message" rows={5} placeholder="Tell me about your project..." />
-        </div>
-        <button type="submit" className="btn btn-primary">Send Message</button>
-      </form>
-    </section>
-  );
-}

package/templates/overlays/portfolio/react/src/components/HeroSection.tsx

@@ -1,24 +0,0 @@
-export function HeroSection() {
-  return (
-    <header className="portfolio-hero">
-      <nav className="portfolio-nav">
-        <div className="logo">{{projectName}}</div>
-        <div className="nav-links">
-          <a href="#projects">Projects</a>
-          <a href="#skills">Skills</a>
-          <a href="#contact">Contact</a>
-        </div>
-      </nav>
-      <div className="hero-content">
-        <span className="hero-greeting">Hi, I'm</span>
-        <h1>Beknur</h1>
-        <p className="hero-role">Frontend Developer & Software Engineer</p>
-        <p className="hero-desc">I craft pixel-perfect, user-centric web experiences with modern technologies. Passionate about clean code and great design.</p>
-        <div className="hero-actions">
-          <a href="#projects" className="btn btn-primary">View My Work</a>
-          <a href="#contact" className="btn btn-outline">Get In Touch</a>
-        </div>
-      </div>
-    </header>
-  );
-}

package/templates/overlays/portfolio/react/src/components/Projects.tsx

@@ -1,33 +0,0 @@
-const projects = [
-  { title: 'E-commerce Platform', description: 'A full-featured online store with cart, checkout, and payment integration.', tags: ['React', 'Node.js', 'Stripe'], image: '🛒' },
-  { title: 'Task Management App', description: 'Collaborative task management with real-time updates and team features.', tags: ['Vue.js', 'Firebase', 'Tailwind'], image: '📋' },
-  { title: 'Weather Dashboard', description: 'Beautiful weather visualization with 5-day forecasts and location search.', tags: ['TypeScript', 'API', 'Chart.js'], image: '🌤️' },
-  { title: 'Social Media App', description: 'Social networking platform with posts, comments, and real-time messaging.', tags: ['Next.js', 'PostgreSQL', 'WebSocket'], image: '💬' },
-  { title: 'Portfolio Website', description: 'Responsive portfolio with animations and dark mode support.', tags: ['React', 'Framer Motion', 'SCSS'], image: '🎨' },
-  { title: 'Blog CMS', description: 'Content management system with markdown editor and SEO optimization.', tags: ['Nuxt', 'MongoDB', 'Markdown'], image: '📝' },
-];
-
-export function Projects() {
-  return (
-    <section id="projects" className="projects-section">
-      <h2>Featured Projects</h2>
-      <p className="section-subtitle">A selection of my recent work</p>
-      <div className="projects-grid">
-        {projects.map((project, i) => (
-          <div key={i} className="project-card">
-            <div className="project-image">{project.image}</div>
-            <div className="project-info">
-              <h3>{project.title}</h3>
-              <p>{project.description}</p>
-              <div className="project-tags">
-                {project.tags.map((tag, j) => (
-                  <span key={j} className="tag">{tag}</span>
-                ))}
-              </div>
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

package/templates/overlays/portfolio/react/src/components/Skills.tsx

@@ -1,27 +0,0 @@
-const skillGroups = [
-  { category: 'Frontend', skills: ['React', 'Vue.js', 'Angular', 'TypeScript', 'Next.js', 'Nuxt'] },
-  { category: 'Styling', skills: ['Tailwind CSS', 'SCSS', 'Material UI', 'Styled Components', 'CSS Modules'] },
-  { category: 'Backend', skills: ['Node.js', 'Express', 'PostgreSQL', 'MongoDB', 'REST API', 'GraphQL'] },
-  { category: 'Tools', skills: ['Git', 'Docker', 'Vite', 'Webpack', 'Figma', 'VS Code'] },
-];
-
-export function Skills() {
-  return (
-    <section id="skills" className="skills-section">
-      <h2>Skills & Technologies</h2>
-      <p className="section-subtitle">Technologies I work with on a daily basis</p>
-      <div className="skills-grid">
-        {skillGroups.map((group, i) => (
-          <div key={i} className="skill-group">
-            <h3>{group.category}</h3>
-            <div className="skill-tags">
-              {group.skills.map((skill, j) => (
-                <span key={j} className="skill-tag">{skill}</span>
-              ))}
-            </div>
-          </div>
-        ))}
-      </div>
-    </section>
-  );
-}

package/templates/styling/tailwind/config/postcss.config.js

@@ -1,5 +0,0 @@
-export default {
-  plugins: {
-    '@tailwindcss/postcss': {},
-  },
-};

package/templates/styling/tailwind/config/tailwind.config.js

@@ -1,11 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: [
-    './index.html',
-    './src/**/*.{js,ts,jsx,tsx,vue}',
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};