@nitrostack/cli 1.0.0

package/templates/typescript-pizzaz/src/widgets/components/CompactShopCard.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+interface PizzaShop {
+    id: string;
+    name: string;
+    description: string;
+    address: string;
+    coords: [number, number];
+    rating: number;
+    reviews: number;
+    priceLevel: 1 | 2 | 3;
+    cuisine: string[];
+    hours: { open: string; close: string };
+    phone: string;
+    website?: string;
+    image: string;
+    specialties: string[];
+    openNow: boolean;
+}
+
+interface CompactShopCardProps {
+    shop: PizzaShop;
+    isSelected: boolean;
+    onClick: () => void;
+    isDark?: boolean;
+}
+
+export function CompactShopCard({ shop, isSelected, onClick, isDark = true }: CompactShopCardProps) {
+    const priceSymbol = '$'.repeat(shop.priceLevel);
+
+    return (
+        <div
+            onClick={onClick}
+            style={{
+                display: 'flex',
+                gap: '12px',
+                padding: '12px',
+                background: isSelected
+                    ? 'rgba(255, 255, 255, 0.95)'
+                    : 'rgba(255, 255, 255, 0.9)',
+                backdropFilter: 'blur(10px)',
+                borderRadius: '12px',
+                cursor: 'pointer',
+                transition: 'all 0.2s',
+                border: isSelected ? '2px solid #3b82f6' : '2px solid transparent',
+                boxShadow: isSelected
+                    ? '0 4px 12px rgba(59, 130, 246, 0.3)'
+                    : '0 2px 8px rgba(0, 0, 0, 0.1)',
+                minWidth: '280px',
+                maxWidth: '280px',
+            }}
+            onMouseEnter={(e) => {
+                if (!isSelected) {
+                    e.currentTarget.style.transform = 'translateY(-2px)';
+                    e.currentTarget.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
+                }
+            }}
+            onMouseLeave={(e) => {
+                if (!isSelected) {
+                    e.currentTarget.style.transform = 'translateY(0)';
+                    e.currentTarget.style.boxShadow = '0 2px 8px rgba(0, 0, 0, 0.1)';
+                }
+            }}
+        >
+            {/* Image */}
+            <img
+                src={shop.image}
+                alt={shop.name}
+                style={{
+                    width: '80px',
+                    height: '80px',
+                    borderRadius: '8px',
+                    objectFit: 'cover',
+                    flexShrink: 0,
+                }}
+            />
+
+            {/* Info */}
+            <div style={{
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                justifyContent: 'space-between',
+                minWidth: 0,
+            }}>
+                {/* Name */}
+                <h4 style={{
+                    margin: 0,
+                    fontSize: '14px',
+                    fontWeight: '600',
+                    color: '#111',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }}>
+                    {shop.name}
+                </h4>
+
+                {/* Description */}
+                <p style={{
+                    margin: '4px 0',
+                    fontSize: '12px',
+                    color: '#666',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis',
+                    whiteSpace: 'nowrap',
+                }}>
+                    {shop.description}
+                </p>
+
+                {/* Rating & Price */}
+                <div style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '8px',
+                    fontSize: '12px',
+                }}>
+                    <div style={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '4px',
+                    }}>
+                        <span style={{ color: '#fbbf24' }}>⭐</span>
+                        <span style={{ fontWeight: '600', color: '#111' }}>{shop.rating}</span>
+                    </div>
+                    <span style={{ color: '#999' }}>•</span>
+                    <span style={{ color: '#666' }}>{priceSymbol}</span>
+                    {shop.openNow && (
+                        <>
+                            <span style={{ color: '#999' }}>•</span>
+                            <span style={{
+                                color: '#10b981',
+                                fontWeight: '600',
+                                fontSize: '11px',
+                            }}>
+                                Open Now
+                            </span>
+                        </>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/templates/typescript-pizzaz/src/widgets/components/PizzaCard.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import { useTheme, useWidgetState, useMaxHeight, useDisplayMode } from '@nitrostack/widgets';
+import { Star, MapPin, Phone, Globe, Clock } from 'lucide-react';
+
+interface PizzaShop {
+    id: string;
+    name: string;
+    description: string;
+    address: string;
+    coords: [number, number];
+    rating: number;
+    reviews: number;
+    priceLevel: 1 | 2 | 3;
+    cuisine: string[];
+    hours: { open: string; close: string };
+    phone: string;
+    website?: string;
+    image: string;
+    specialties: string[];
+    openNow: boolean;
+}
+
+interface PizzaCardProps {
+    shop: PizzaShop;
+    onSelect?: (shop: PizzaShop) => void;
+    isFavorite?: boolean;
+    onToggleFavorite?: (shopId: string) => void;
+}
+
+export function PizzaCard({ shop, onSelect, isFavorite, onToggleFavorite }: PizzaCardProps) {
+    const theme = useTheme();
+    const isDark = theme === 'dark';
+
+    const priceSymbol = '$'.repeat(shop.priceLevel);
+
+    return (
+        <div
+            onClick={() => onSelect?.(shop)}
+            style={{
+                background: isDark ? '#1a1a1a' : '#ffffff',
+                border: `1px solid ${isDark ? '#333' : '#e5e7eb'}`,
+                borderRadius: '12px',
+                overflow: 'hidden',
+                cursor: onSelect ? 'pointer' : 'default',
+                transition: 'all 0.2s',
+                boxShadow: isDark ? '0 2px 8px rgba(0,0,0,0.3)' : '0 2px 8px rgba(0,0,0,0.1)',
+            }}
+            onMouseEnter={(e) => {
+                if (onSelect) {
+                    e.currentTarget.style.transform = 'translateY(-2px)';
+                    e.currentTarget.style.boxShadow = isDark
+                        ? '0 4px 12px rgba(0,0,0,0.4)'
+                        : '0 4px 12px rgba(0,0,0,0.15)';
+                }
+            }}
+            onMouseLeave={(e) => {
+                if (onSelect) {
+                    e.currentTarget.style.transform = 'translateY(0)';
+                    e.currentTarget.style.boxShadow = isDark
+                        ? '0 2px 8px rgba(0,0,0,0.3)'
+                        : '0 2px 8px rgba(0,0,0,0.1)';
+                }
+            }}
+        >
+            {/* Image */}
+            <div style={{ position: 'relative', height: '160px', overflow: 'hidden' }}>
+                <img
+                    src={shop.image}
+                    alt={shop.name}
+                    style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                    }}
+                />
+                {shop.openNow && (
+                    <div style={{
+                        position: 'absolute',
+                        top: '12px',
+                        left: '12px',
+                        background: '#10b981',
+                        color: 'white',
+                        padding: '4px 12px',
+                        borderRadius: '12px',
+                        fontSize: '12px',
+                        fontWeight: '600',
+                    }}>
+                        Open Now
+                    </div>
+                )}
+                {onToggleFavorite && (
+                    <button
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onToggleFavorite(shop.id);
+                        }}
+                        style={{
+                            position: 'absolute',
+                            top: '12px',
+                            right: '12px',
+                            background: 'rgba(255,255,255,0.9)',
+                            border: 'none',
+                            borderRadius: '50%',
+                            width: '32px',
+                            height: '32px',
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            cursor: 'pointer',
+                        }}
+                    >
+                        <span style={{ fontSize: '18px' }}>{isFavorite ? '❤️' : '🤍'}</span>
+                    </button>
+                )}
+            </div>
+
+            {/* Content */}
+            <div style={{ padding: '16px' }}>
+                <h3 style={{
+                    margin: '0 0 8px 0',
+                    fontSize: '18px',
+                    fontWeight: '600',
+                    color: isDark ? '#fff' : '#111',
+                }}>
+                    {shop.name}
+                </h3>
+
+                {/* Rating & Price */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px' }}>
+                    <div style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
+                        <Star size={16} fill="#fbbf24" stroke="#fbbf24" />
+                        <span style={{ fontSize: '14px', fontWeight: '600', color: isDark ? '#fff' : '#111' }}>
+                            {shop.rating}
+                        </span>
+                        <span style={{ fontSize: '14px', color: isDark ? '#999' : '#666' }}>
+                            ({shop.reviews})
+                        </span>
+                    </div>
+                    <span style={{ fontSize: '14px', color: isDark ? '#999' : '#666' }}>
+                        {priceSymbol}
+                    </span>
+                </div>
+
+                {/* Description */}
+                <p style={{
+                    margin: '0 0 12px 0',
+                    fontSize: '14px',
+                    color: isDark ? '#ccc' : '#666',
+                    lineHeight: '1.4',
+                }}>
+                    {shop.description}
+                </p>
+
+                {/* Cuisine Tags */}
+                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px', marginBottom: '12px' }}>
+                    {shop.cuisine.slice(0, 3).map(c => (
+                        <span
+                            key={c}
+                            style={{
+                                background: isDark ? '#333' : '#f3f4f6',
+                                color: isDark ? '#ccc' : '#666',
+                                padding: '4px 8px',
+                                borderRadius: '6px',
+                                fontSize: '12px',
+                            }}
+                        >
+                            {c}
+                        </span>
+                    ))}
+                </div>
+
+                {/* Address */}
+                <div style={{ display: 'flex', alignItems: 'start', gap: '8px', marginBottom: '8px' }}>
+                    <MapPin size={16} style={{ color: isDark ? '#999' : '#666', marginTop: '2px', flexShrink: 0 }} />
+                    <span style={{ fontSize: '13px', color: isDark ? '#ccc' : '#666' }}>
+                        {shop.address}
+                    </span>
+                </div>
+
+                {/* Hours */}
+                <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                    <Clock size={16} style={{ color: isDark ? '#999' : '#666' }} />
+                    <span style={{ fontSize: '13px', color: isDark ? '#ccc' : '#666' }}>
+                        {shop.hours.open} - {shop.hours.close}
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+}

package/templates/typescript-pizzaz/src/widgets/next.config.js

@@ -0,0 +1,45 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  transpilePackages: ['nitrostack'],
+  
+  // Static export for production builds
+  ...(process.env.NODE_ENV === 'production' && {
+    output: 'export',
+    distDir: 'out',
+    images: {
+      unoptimized: true,
+    },
+  }),
+  
+  // Development optimizations to prevent cache corruption
+  ...(process.env.NODE_ENV === 'development' && {
+    // Use memory cache instead of filesystem cache in dev to avoid stale chunks
+    webpack: (config, { isServer }) => {
+      // Disable persistent caching in development to prevent chunk reference errors
+      if (config.cache && config.cache.type === 'filesystem') {
+        config.cache = {
+          type: 'memory',
+        };
+      }
+      
+      // Improve cache busting for new files
+      if (!isServer) {
+        config.cache = false; // Disable cache completely on client in dev
+      }
+      
+      return config;
+    },
+    
+    // Disable build activity indicator which can cause issues
+    devIndicators: {
+      buildActivity: false,
+      buildActivityPosition: 'bottom-right',
+    },
+    
+    // Faster dev server
+    compress: false,
+  }),
+};
+
+export default nextConfig;

package/templates/typescript-pizzaz/src/widgets/package.json

@@ -0,0 +1,30 @@
+{
+    "name": "pizzaz-widgets",
+    "version": "1.0.0",
+    "type": "module",
+    "private": true,
+    "scripts": {
+        "dev": "next dev -p 3001 --port 3001",
+        "build": "next build",
+        "start": "next start -p 3001"
+    },
+    "dependencies": {
+        "next": "^14.2.5",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "@nitrostack/widgets": "^1",
+        "mapbox-gl": "^3.0.1",
+        "framer-motion": "^10.16.16",
+        "lucide-react": "^0.294.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "@types/mapbox-gl": "^3.0.0",
+        "typescript": "^5",
+        "tailwindcss": "^3.4.0",
+        "postcss": "^8.4.32",
+        "autoprefixer": "^10.4.16"
+    }
+}

package/templates/typescript-pizzaz/src/widgets/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}
+