nitrostack 1.0.54 → 1.0.56

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

@@ -1,225 +0,0 @@
-'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

@@ -1,218 +0,0 @@
-'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

@@ -1,121 +0,0 @@
-'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);