nitrostack 1.0.0 → 1.0.2

package/templates/typescript-auth/src/widgets/app/products-grid/page.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { ProductsGridData } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function ProductsGridWidget({ data }: { data: ProductsGridData }) {
+  const { products, pagination } = data;
+
+  if (products.length === 0) {
+    return (
+      <div style={styles.containerStyle}>
+        <div style={styles.emptyStateStyle}>
+          <div style={{ fontSize: '64px', marginBottom: styles.spacing.lg }}>
+            🛍️
+          </div>
+          <h3 style={{
+            fontSize: styles.typography.fontSize.xl,
+            fontWeight: styles.typography.fontWeight.semibold,
+            color: styles.colors.gray[700],
+            marginBottom: styles.spacing.sm,
+          }}>
+            No products found
+          </h3>
+          <p style={styles.metaTextStyle}>
+            Try adjusting your filters or search term
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.titleStyle,
+        justifyContent: 'space-between',
+      }}>
+        <span>
+          🛍️ Products
+        </span>
+        <span style={{
+          ...styles.badgeStyle,
+          background: styles.colors.primary,
+          color: styles.colors.black,
+        }}>
+          {products.length} items
+        </span>
+      </div>
+
+      <div style={styles.gridStyle}>
+        {products.map((product) => (
+          <div
+            key={product.id}
+            style={{
+              ...styles.cardStyle,
+              cursor: 'pointer',
+              overflow: 'hidden',
+              padding: 0,
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'translateY(-4px)';
+              e.currentTarget.style.boxShadow = styles.shadows.xl;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = styles.shadows.md;
+            }}
+          >
+            <div style={{
+              position: 'relative',
+              paddingTop: '75%',
+              overflow: 'hidden',
+              background: styles.colors.gray[100],
+            }}>
+              <img
+                src={product.image_url}
+                alt={product.name}
+                style={{
+                  position: 'absolute',
+                  top: 0,
+                  left: 0,
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+              <div style={{
+                position: 'absolute',
+                top: styles.spacing.md,
+                right: styles.spacing.md,
+                ...styles.badgeStyle,
+                background: styles.colors.white,
+                boxShadow: styles.shadows.md,
+              }}>
+                {product.stock} in stock
+              </div>
+            </div>
+
+            <div style={{ padding: styles.spacing.lg }}>
+              <div style={{
+                fontSize: styles.typography.fontSize.sm,
+                color: styles.colors.gray[500],
+                marginBottom: styles.spacing.xs,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+                fontWeight: styles.typography.fontWeight.semibold,
+              }}>
+                {product.category}
+              </div>
+
+              <h3 style={{
+                fontSize: styles.typography.fontSize.lg,
+                fontWeight: styles.typography.fontWeight.bold,
+                color: styles.colors.gray[900],
+                marginBottom: styles.spacing.sm,
+                lineHeight: styles.typography.lineHeight.tight,
+              }}>
+                {product.name}
+              </h3>
+
+              <p style={{
+                ...styles.metaTextStyle,
+                marginBottom: styles.spacing.md,
+                lineHeight: styles.typography.lineHeight.normal,
+                display: '-webkit-box',
+                WebkitLineClamp: 2,
+                WebkitBoxOrient: 'vertical',
+                overflow: 'hidden',
+              }}>
+                {product.description}
+              </p>
+
+              <div style={{
+                display: 'flex',
+                justifyContent: 'space-between',
+                alignItems: 'center',
+              }}>
+                <div style={styles.priceStyle}>
+                  ${product.price.toFixed(2)}
+                </div>
+                <div style={{
+                  ...styles.buttonStyle,
+                  padding: `${styles.spacing.sm} ${styles.spacing.md}`,
+                  fontSize: styles.typography.fontSize.sm,
+                }}>
+                  View →
+                </div>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {pagination.totalPages > 1 && (
+        <div style={{
+          marginTop: styles.spacing['2xl'],
+          textAlign: 'center',
+          padding: styles.spacing.lg,
+          background: styles.colors.white,
+          borderRadius: styles.borderRadius.md,
+          boxShadow: styles.shadows.sm,
+        }}>
+          <div style={styles.metaTextStyle}>
+            Page {pagination.page} of {pagination.totalPages} • {pagination.total} total products
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default withToolData<ProductsGridData>(ProductsGridWidget);

package/templates/typescript-auth/src/widgets/app/shopping-cart/page.tsx

@@ -0,0 +1,187 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { ShoppingCartData } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function ShoppingCartWidget({ data }: { data: ShoppingCartData }) {
+  const { items, total, itemCount } = data;
+
+  if (items.length === 0) {
+    return (
+      <div style={styles.containerStyle}>
+        <div style={styles.emptyStateStyle}>
+          <div style={{ fontSize: '64px', marginBottom: styles.spacing.lg }}>
+            🛒
+          </div>
+          <h3 style={{
+            fontSize: styles.typography.fontSize.xl,
+            fontWeight: styles.typography.fontWeight.semibold,
+            color: styles.colors.gray[700],
+            marginBottom: styles.spacing.sm,
+          }}>
+            Your cart is empty
+          </h3>
+          <p style={styles.metaTextStyle}>
+            Add some products to get started!
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.titleStyle,
+        justifyContent: 'space-between',
+      }}>
+        <span>
+          🛒 Shopping Cart
+        </span>
+        <span style={{
+          ...styles.badgeStyle,
+          background: styles.colors.primary,
+          color: styles.colors.black,
+        }}>
+          {itemCount} {itemCount === 1 ? 'item' : 'items'}
+        </span>
+      </div>
+
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: styles.spacing.md,
+      }}>
+        {items.map((item) => (
+          <div
+            key={item.product_id}
+            style={{
+              ...styles.cardStyle,
+              display: 'flex',
+              gap: styles.spacing.lg,
+              alignItems: 'flex-start',
+            }}
+          >
+            <div style={{
+              width: '120px',
+              height: '120px',
+              flexShrink: 0,
+              borderRadius: styles.borderRadius.md,
+              overflow: 'hidden',
+              background: styles.colors.gray[100],
+            }}>
+              <img
+                src={item.image_url}
+                alt={item.name}
+                style={{
+                  width: '100%',
+                  height: '100%',
+                  objectFit: 'cover',
+                }}
+              />
+            </div>
+
+            <div style={{ flex: 1, minWidth: 0 }}>
+              <h3 style={{
+                fontSize: styles.typography.fontSize.lg,
+                fontWeight: styles.typography.fontWeight.semibold,
+                color: styles.colors.gray[900],
+                marginBottom: styles.spacing.xs,
+              }}>
+                {item.name}
+              </h3>
+
+              <p style={{
+                ...styles.metaTextStyle,
+                marginBottom: styles.spacing.md,
+                lineHeight: styles.typography.lineHeight.normal,
+              }}>
+                {item.description}
+              </p>
+
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: styles.spacing.lg,
+                flexWrap: 'wrap',
+              }}>
+                <div style={{
+                  ...styles.badgeStyle,
+                  background: styles.colors.gray[200],
+                }}>
+                  Qty: {item.quantity}
+                </div>
+                <div style={{
+                  fontSize: styles.typography.fontSize.base,
+                  color: styles.colors.gray[700],
+                }}>
+                  ${item.price.toFixed(2)} each
+                </div>
+                <div style={{
+                  ...styles.badgeStyle,
+                  background: styles.colors.success,
+                  color: styles.colors.white,
+                }}>
+                  {item.stock} available
+                </div>
+              </div>
+            </div>
+
+            <div style={{
+              textAlign: 'right',
+              flexShrink: 0,
+            }}>
+              <div style={{
+                fontSize: styles.typography.fontSize['2xl'],
+                fontWeight: styles.typography.fontWeight.bold,
+                color: styles.colors.primary,
+              }}>
+                ${(item.price * item.quantity).toFixed(2)}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+
+      <div style={{
+        marginTop: styles.spacing.xl,
+        ...styles.cardStyle,
+        background: `linear-gradient(135deg, ${styles.colors.gray[900]} 0%, ${styles.colors.gray[800]} 100%)`,
+        border: `2px solid ${styles.colors.primary}`,
+      }}>
+        <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+        }}>
+          <div>
+            <div style={{
+              fontSize: styles.typography.fontSize.sm,
+              color: styles.colors.gray[400],
+              marginBottom: styles.spacing.xs,
+            }}>
+              Total Amount
+            </div>
+            <div style={{
+              fontSize: styles.typography.fontSize['3xl'],
+              fontWeight: styles.typography.fontWeight.bold,
+              color: styles.colors.primary,
+            }}>
+              ${total.toFixed(2)}
+            </div>
+          </div>
+          <div style={{
+            ...styles.buttonStyle,
+            padding: `${styles.spacing.lg} ${styles.spacing['2xl']}`,
+            fontSize: styles.typography.fontSize.base,
+          }}>
+            Checkout →
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<ShoppingCartData>(ShoppingCartWidget);

package/templates/typescript-auth/src/widgets/app/whoami/page.tsx

@@ -0,0 +1,165 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { WhoAmIResult } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function WhoAmIWidget({ data }: { data: WhoAmIResult }) {
+  const { user, authenticated } = data;
+
+  if (!authenticated || !user) {
+    return (
+      <div style={styles.containerStyle}>
+        <div style={styles.emptyStateStyle}>
+          <div style={{ fontSize: '64px', marginBottom: styles.spacing.lg }}>
+            🔒
+          </div>
+          <h3 style={{
+            fontSize: styles.typography.fontSize.xl,
+            fontWeight: styles.typography.fontWeight.semibold,
+            color: styles.colors.gray[700],
+            marginBottom: styles.spacing.sm,
+          }}>
+            Not Authenticated
+          </h3>
+          <p style={styles.metaTextStyle}>
+            Please log in to view your profile
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '500px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          textAlign: 'center',
+          marginBottom: styles.spacing.xl,
+        }}>
+          {user.profile_picture ? (
+            <img
+              src={user.profile_picture}
+              alt={user.name}
+              style={{
+                width: '120px',
+                height: '120px',
+                borderRadius: styles.borderRadius.full,
+                objectFit: 'cover',
+                border: `4px solid ${styles.colors.primary}`,
+                margin: '0 auto 16px',
+                boxShadow: styles.shadows.xl,
+              }}
+            />
+          ) : (
+            <div style={{
+              width: '120px',
+              height: '120px',
+              borderRadius: styles.borderRadius.full,
+              background: `linear-gradient(135deg, ${styles.colors.primary} 0%, ${styles.colors.primaryHover} 100%)`,
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              fontSize: '48px',
+              margin: '0 auto 16px',
+            }}>
+              👤
+            </div>
+          )}
+
+          <h2 style={{
+            fontSize: styles.typography.fontSize['2xl'],
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.xs,
+          }}>
+            {user.name}
+          </h2>
+          <p style={{
+            fontSize: styles.typography.fontSize.base,
+            color: styles.colors.gray[600],
+            marginBottom: styles.spacing.md,
+          }}>
+            {user.email}
+          </p>
+
+          <div style={{
+            ...styles.badgeStyle,
+            background: styles.colors.success,
+            color: styles.colors.white,
+            display: 'inline-flex',
+          }}>
+            ✓ Authenticated
+          </div>
+        </div>
+
+        <div style={{
+          display: 'grid',
+          gridTemplateColumns: '1fr',
+          gap: styles.spacing.md,
+        }}>
+          <div style={{
+            background: styles.colors.gray[50],
+            borderRadius: styles.borderRadius.md,
+            padding: styles.spacing.lg,
+          }}>
+            <div style={{
+              fontSize: styles.typography.fontSize.sm,
+              color: styles.colors.gray[500],
+              marginBottom: styles.spacing.xs,
+              textTransform: 'uppercase',
+              letterSpacing: '0.5px',
+              fontWeight: styles.typography.fontWeight.semibold,
+            }}>
+              User ID
+            </div>
+            <div style={{
+              fontSize: styles.typography.fontSize.base,
+              fontWeight: styles.typography.fontWeight.medium,
+              color: styles.colors.gray[900],
+              fontFamily: 'monospace',
+            }}>
+              {user.id.substring(0, 16)}...
+            </div>
+          </div>
+
+          {user.memberSince && (
+            <div style={{
+              background: styles.colors.gray[50],
+              borderRadius: styles.borderRadius.md,
+              padding: styles.spacing.lg,
+            }}>
+              <div style={{
+                fontSize: styles.typography.fontSize.sm,
+                color: styles.colors.gray[500],
+                marginBottom: styles.spacing.xs,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+                fontWeight: styles.typography.fontWeight.semibold,
+              }}>
+                Member Since
+              </div>
+              <div style={{
+                fontSize: styles.typography.fontSize.base,
+                fontWeight: styles.typography.fontWeight.medium,
+                color: styles.colors.gray[900],
+              }}>
+                {new Date(user.memberSince).toLocaleDateString('en-US', {
+                  year: 'numeric',
+                  month: 'long',
+                  day: 'numeric',
+                })}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<WhoAmIResult>(WhoAmIWidget);

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

@@ -0,0 +1,38 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  // Only use static export in production
+  output: process.env.NODE_ENV === 'production' ? 'export' : undefined,
+  distDir: 'out',
+  images: { unoptimized: true },
+  reactStrictMode: false,
+  // Disable build activity indicator in dev mode
+  devIndicators: {
+    buildActivity: false,
+    buildActivityPosition: 'bottom-right',
+  },
+  // Dev server config
+  ...(process.env.NODE_ENV === 'development' && {
+    compress: false, // Faster dev server
+    
+    // Webpack config to prevent cache corruption when adding new widgets
+    webpack: (config, { isServer }) => {
+      // Disable persistent caching in development to prevent chunk reference errors
+      // This prevents the "Cannot find module './819.js'" type errors
+      if (config.cache && config.cache.type === 'filesystem') {
+        config.cache = {
+          type: 'memory',
+        };
+      }
+      
+      // Improve cache busting for new files on client
+      if (!isServer) {
+        config.cache = false; // Disable cache completely on client in dev
+      }
+      
+      return config;
+    },
+  }),
+};
+export default nextConfig;
+
+

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

@@ -0,0 +1,18 @@
+{
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev"
+  },
+  "dependencies": {
+    "next": "14.2.5",
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "19.2.2"
+  }
+}
+
+