nitrostack 1.0.0 → 1.0.1

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

@@ -0,0 +1,225 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import * as styles from '../../styles/ecommerce';
+
+interface OrderItem {
+  product_id: string;
+  name: string;
+  quantity: number;
+  price: number;
+  image_url?: string;
+}
+
+interface OrderDetailsData {
+  order: {
+    id: string;
+    total: number;
+    status: string;
+    payment_method: string;
+    created_at: string;
+    full_name?: string;
+    street?: string;
+    city?: string;
+    state?: string;
+    zip_code?: string;
+  };
+  items: OrderItem[];
+}
+
+function OrderDetailsWidget({ data }: { data: OrderDetailsData }) {
+  const { order, items } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '700px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'flex-start',
+          marginBottom: styles.spacing.xl,
+          paddingBottom: styles.spacing.lg,
+          borderBottom: `2px solid ${styles.colors.gray[200]}`,
+        }}>
+          <div>
+            <h2 style={{
+              fontSize: styles.typography.fontSize['2xl'],
+              fontWeight: styles.typography.fontWeight.bold,
+              color: styles.colors.gray[900],
+              marginBottom: styles.spacing.xs,
+            }}>
+              Order #{order.id.substring(0, 8).toUpperCase()}
+            </h2>
+            <div style={styles.metaTextStyle}>
+              Placed on {new Date(order.created_at).toLocaleDateString('en-US', {
+                year: 'numeric',
+                month: 'long',
+                day: 'numeric',
+                hour: '2-digit',
+                minute: '2-digit',
+              })}
+            </div>
+          </div>
+
+          <div style={{
+            ...styles.badgeStyle,
+            background: order.status === 'pending' 
+              ? styles.colors.warning 
+              : order.status === 'delivered'
+              ? styles.colors.success
+              : styles.colors.primary,
+            color: styles.colors.white,
+            padding: `${styles.spacing.sm} ${styles.spacing.lg}`,
+          }}>
+            {order.status}
+          </div>
+        </div>
+
+        <div style={{ marginBottom: styles.spacing.xl }}>
+          <h3 style={{
+            fontSize: styles.typography.fontSize.lg,
+            fontWeight: styles.typography.fontWeight.semibold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.md,
+          }}>
+            Order Items
+          </h3>
+
+          <div style={{
+            display: 'flex',
+            flexDirection: 'column',
+            gap: styles.spacing.md,
+          }}>
+            {items && items.map((item, index) => (
+              <div
+                key={item.product_id || index}
+                style={{
+                  display: 'flex',
+                  gap: styles.spacing.md,
+                  padding: styles.spacing.md,
+                  background: styles.colors.gray[50],
+                  borderRadius: styles.borderRadius.md,
+                }}
+              >
+                {item.image_url && (
+                  <div style={{
+                    width: '80px',
+                    height: '80px',
+                    flexShrink: 0,
+                    borderRadius: styles.borderRadius.md,
+                    overflow: 'hidden',
+                    background: styles.colors.white,
+                  }}>
+                    <img
+                      src={item.image_url}
+                      alt={item.name}
+                      style={{
+                        width: '100%',
+                        height: '100%',
+                        objectFit: 'cover',
+                      }}
+                    />
+                  </div>
+                )}
+
+                <div style={{ flex: 1 }}>
+                  <div style={{
+                    fontSize: styles.typography.fontSize.base,
+                    fontWeight: styles.typography.fontWeight.semibold,
+                    color: styles.colors.gray[900],
+                    marginBottom: styles.spacing.xs,
+                  }}>
+                    {item.name}
+                  </div>
+                  <div style={styles.metaTextStyle}>
+                    Quantity: {item.quantity} × ${item.price.toFixed(2)}
+                  </div>
+                </div>
+
+                <div style={{
+                  fontSize: styles.typography.fontSize.xl,
+                  fontWeight: styles.typography.fontWeight.bold,
+                  color: styles.colors.primary,
+                }}>
+                  ${(item.price * item.quantity).toFixed(2)}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div style={{
+          ...styles.cardStyle,
+          background: `linear-gradient(135deg, ${styles.colors.gray[900]} 0%, ${styles.colors.gray[800]} 100%)`,
+          border: `2px solid ${styles.colors.primary}`,
+          marginBottom: styles.spacing.xl,
+        }}>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+          }}>
+            <div style={{
+              fontSize: styles.typography.fontSize.lg,
+              color: styles.colors.gray[300],
+              fontWeight: styles.typography.fontWeight.semibold,
+            }}>
+              Order Total
+            </div>
+            <div style={{
+              fontSize: styles.typography.fontSize['3xl'],
+              fontWeight: styles.typography.fontWeight.bold,
+              color: styles.colors.primary,
+            }}>
+              ${order.total.toFixed(2)}
+            </div>
+          </div>
+        </div>
+
+        {(order.full_name || order.street) && (
+          <div>
+            <h3 style={{
+              fontSize: styles.typography.fontSize.lg,
+              fontWeight: styles.typography.fontWeight.semibold,
+              color: styles.colors.gray[900],
+              marginBottom: styles.spacing.md,
+            }}>
+              Delivery Address
+            </h3>
+
+            <div style={{
+              background: styles.colors.gray[50],
+              borderRadius: styles.borderRadius.md,
+              padding: styles.spacing.lg,
+            }}>
+              <div style={{
+                fontSize: styles.typography.fontSize.base,
+                color: styles.colors.gray[800],
+                lineHeight: styles.typography.lineHeight.relaxed,
+              }}>
+                {order.full_name && (
+                  <div style={{
+                    fontWeight: styles.typography.fontWeight.semibold,
+                    marginBottom: styles.spacing.xs,
+                  }}>
+                    {order.full_name}
+                  </div>
+                )}
+                {order.street && <div>{order.street}</div>}
+                {(order.city || order.state || order.zip_code) && (
+                  <div>{order.city}, {order.state} {order.zip_code}</div>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<OrderDetailsData>(OrderDetailsWidget);

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

@@ -0,0 +1,218 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { OrderHistoryData } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function OrderHistoryWidget({ data }: { data: OrderHistoryData }) {
+  const { orders, pagination } = data;
+
+  if (orders.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 orders yet
+          </h3>
+          <p style={styles.metaTextStyle}>
+            Your order history will appear here
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.titleStyle,
+        justifyContent: 'space-between',
+      }}>
+        <span>
+          📦 Order History
+        </span>
+        <span style={{
+          ...styles.badgeStyle,
+          background: styles.colors.primary,
+          color: styles.colors.black,
+        }}>
+          {orders.length} orders
+        </span>
+      </div>
+
+      <div style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: styles.spacing.lg,
+      }}>
+        {orders.map((order) => (
+          <div
+            key={order.id}
+            style={{
+              ...styles.cardStyle,
+              cursor: 'pointer',
+            }}
+            onMouseEnter={(e) => {
+              e.currentTarget.style.transform = 'translateY(-2px)';
+              e.currentTarget.style.boxShadow = styles.shadows.lg;
+            }}
+            onMouseLeave={(e) => {
+              e.currentTarget.style.transform = 'translateY(0)';
+              e.currentTarget.style.boxShadow = styles.shadows.md;
+            }}
+          >
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'flex-start',
+              marginBottom: styles.spacing.md,
+            }}>
+              <div>
+                <div style={{
+                  fontSize: styles.typography.fontSize.lg,
+                  fontWeight: styles.typography.fontWeight.semibold,
+                  color: styles.colors.gray[900],
+                  marginBottom: styles.spacing.xs,
+                }}>
+                  Order #{order.id.substring(0, 8).toUpperCase()}
+                </div>
+                <div style={styles.metaTextStyle}>
+                  {new Date(order.created_at).toLocaleDateString('en-US', {
+                    year: 'numeric',
+                    month: 'long',
+                    day: 'numeric',
+                  })}
+                </div>
+              </div>
+
+              <div style={{
+                ...styles.badgeStyle,
+                background: order.status === 'pending' 
+                  ? styles.colors.warning 
+                  : order.status === 'delivered'
+                  ? styles.colors.success
+                  : styles.colors.primary,
+                color: styles.colors.white,
+              }}>
+                {order.status}
+              </div>
+            </div>
+
+            {order.items && order.items.length > 0 && (
+              <div style={{
+                display: 'flex',
+                gap: styles.spacing.sm,
+                marginBottom: styles.spacing.md,
+                overflowX: 'auto',
+              }}>
+                {order.items.slice(0, 4).map((item) => (
+                  item.image_url && (
+                    <div
+                      key={item.id}
+                      style={{
+                        width: '60px',
+                        height: '60px',
+                        flexShrink: 0,
+                        borderRadius: styles.borderRadius.md,
+                        overflow: 'hidden',
+                        background: styles.colors.gray[100],
+                        border: `2px solid ${styles.colors.white}`,
+                      }}
+                    >
+                      <img
+                        src={item.image_url}
+                        alt={item.name}
+                        style={{
+                          width: '100%',
+                          height: '100%',
+                          objectFit: 'cover',
+                        }}
+                      />
+                    </div>
+                  )
+                ))}
+                {order.items.length > 4 && (
+                  <div style={{
+                    width: '60px',
+                    height: '60px',
+                    flexShrink: 0,
+                    borderRadius: styles.borderRadius.md,
+                    background: styles.colors.gray[200],
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    fontSize: styles.typography.fontSize.sm,
+                    fontWeight: styles.typography.fontWeight.semibold,
+                    color: styles.colors.gray[600],
+                  }}>
+                    +{order.items.length - 4}
+                  </div>
+                )}
+              </div>
+            )}
+
+            <div style={{
+              display: 'flex',
+              justifyContent: 'space-between',
+              alignItems: 'center',
+              paddingTop: styles.spacing.md,
+              borderTop: `1px solid ${styles.colors.gray[200]}`,
+            }}>
+              <div>
+                <div style={styles.metaTextStyle}>
+                  {order.itemCount || order.items?.length || 0} {(order.itemCount || order.items?.length || 0) === 1 ? 'item' : 'items'}
+                </div>
+              </div>
+
+              <div style={{
+                fontSize: styles.typography.fontSize['2xl'],
+                fontWeight: styles.typography.fontWeight.bold,
+                color: styles.colors.primary,
+              }}>
+                ${order.total.toFixed(2)}
+              </div>
+            </div>
+
+            {order.full_name && (
+              <div style={{
+                marginTop: styles.spacing.md,
+                padding: styles.spacing.md,
+                background: styles.colors.gray[50],
+                borderRadius: styles.borderRadius.md,
+                fontSize: styles.typography.fontSize.sm,
+                color: styles.colors.gray[700],
+              }}>
+                📍 Delivered to: {order.full_name}, {order.city}, {order.state}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+
+      {pagination.totalPages > 1 && (
+        <div style={{
+          marginTop: styles.spacing.xl,
+          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 orders
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default withToolData<OrderHistoryData>(OrderHistoryWidget);

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

@@ -0,0 +1,121 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { ProductCardData } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function ProductCardWidget({ data }: { data: ProductCardData }) {
+  const { product } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '600px',
+        margin: '0 auto',
+        overflow: 'hidden',
+        padding: 0,
+      }}>
+        <div style={{
+          position: 'relative',
+          paddingTop: '60%',
+          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.lg,
+            right: styles.spacing.lg,
+            ...styles.badgeStyle,
+            background: styles.colors.white,
+            boxShadow: styles.shadows.lg,
+            padding: `${styles.spacing.sm} ${styles.spacing.md}`,
+          }}>
+            {product.stock > 0 ? `${product.stock} in stock` : 'Out of stock'}
+          </div>
+        </div>
+
+        <div style={{ padding: styles.spacing.xl }}>
+          <div style={{
+            fontSize: styles.typography.fontSize.sm,
+            color: styles.colors.gray[500],
+            marginBottom: styles.spacing.sm,
+            textTransform: 'uppercase',
+            letterSpacing: '1px',
+            fontWeight: styles.typography.fontWeight.semibold,
+          }}>
+            {product.category}
+          </div>
+
+          <h1 style={{
+            fontSize: styles.typography.fontSize['3xl'],
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.md,
+            lineHeight: styles.typography.lineHeight.tight,
+          }}>
+            {product.name}
+          </h1>
+
+          <p style={{
+            fontSize: styles.typography.fontSize.base,
+            color: styles.colors.gray[700],
+            lineHeight: styles.typography.lineHeight.relaxed,
+            marginBottom: styles.spacing.xl,
+          }}>
+            {product.description}
+          </p>
+
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            paddingTop: styles.spacing.lg,
+            borderTop: `2px solid ${styles.colors.gray[200]}`,
+          }}>
+            <div>
+              <div style={{
+                fontSize: styles.typography.fontSize.sm,
+                color: styles.colors.gray[500],
+                marginBottom: styles.spacing.xs,
+              }}>
+                Price
+              </div>
+              <div style={{
+                fontSize: styles.typography.fontSize['3xl'],
+                fontWeight: styles.typography.fontWeight.bold,
+                color: styles.colors.primary,
+              }}>
+                ${product.price.toFixed(2)}
+              </div>
+            </div>
+
+            <div style={{
+              ...styles.buttonStyle,
+              padding: `${styles.spacing.lg} ${styles.spacing['2xl']}`,
+              fontSize: styles.typography.fontSize.base,
+              display: 'flex',
+              alignItems: 'center',
+              gap: styles.spacing.sm,
+            }}>
+              🛒 Add to Cart
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<ProductCardData>(ProductCardWidget);