nitrostack 1.0.0 → 1.0.2

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

@@ -0,0 +1,134 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import * as styles from '../../styles/ecommerce';
+
+interface Category {
+  name: string;
+  productCount: number;
+}
+
+interface CategoriesData {
+  categories: Category[];
+}
+
+const categoryIcons: Record<string, string> = {
+  'Beauty': '💄',
+  'Fragrances': '🌸',
+  'Furniture': '🛋️',
+  'Groceries': '🛒',
+  'Home Decoration': '🏠',
+  'Kitchen Accessories': '🍳',
+  'Laptops': '💻',
+  'Mens Shirts': '👔',
+  'Mens Shoes': '👞',
+  'Mens Watches': '⌚',
+  'Mobile Accessories': '📱',
+  'Motorcycle': '🏍️',
+  'Skin Care': '✨',
+  'Smartphones': '📱',
+  'Sports Accessories': '⚽',
+  'Sunglasses': '🕶️',
+  'Tablets': '📱',
+  'Tops': '👕',
+  'Vehicle': '🚗',
+  'Womens Bags': '👜',
+  'Womens Dresses': '👗',
+  'Womens Jewellery': '💎',
+  'Womens Shoes': '👠',
+  'Womens Watches': '⌚'
+};
+
+function CategoriesWidget({ data }: { data: CategoriesData }) {
+  const { categories } = data;
+
+  if (!categories || categories.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 categories available
+          </h3>
+          <p style={styles.metaTextStyle}>
+            Categories will appear here once they're added
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.titleStyle,
+        marginBottom: styles.spacing.xl,
+      }}>
+        <span>🏷️ Product Categories</span>
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
+        gap: styles.spacing.lg,
+      }}>
+        {categories.map((category) => {
+          const icon = categoryIcons[category.name] || '📦';
+          return (
+            <div
+              key={category.name}
+              style={{
+                ...styles.cardStyle,
+                cursor: 'pointer',
+                textAlign: 'center',
+                padding: styles.spacing.xl,
+              }}
+              onMouseEnter={(e) => {
+                e.currentTarget.style.transform = 'translateY(-4px)';
+                e.currentTarget.style.boxShadow = styles.shadows.xl;
+                e.currentTarget.style.borderColor = styles.colors.primary;
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.transform = 'translateY(0)';
+                e.currentTarget.style.boxShadow = styles.shadows.md;
+                e.currentTarget.style.borderColor = styles.colors.gray[200];
+              }}
+            >
+              <div style={{
+                fontSize: '48px',
+                marginBottom: styles.spacing.md,
+              }}>
+                {icon}
+              </div>
+              <div style={{
+                fontSize: styles.typography.fontSize.lg,
+                fontWeight: styles.typography.fontWeight.bold,
+                color: styles.colors.gray[900],
+                marginBottom: styles.spacing.xs,
+              }}>
+                {category.name}
+              </div>
+              <div style={{
+                ...styles.badgeStyle,
+                background: `${styles.colors.primary}15`,
+                color: styles.colors.gray[700],
+                border: `1px solid ${styles.colors.primary}30`,
+              }}>
+                {category.productCount} products
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<CategoriesData>(CategoriesWidget);

package/templates/typescript-auth/src/widgets/app/layout.tsx

@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: 'E-commerce Widgets',
+  description: 'UI components for e-commerce MCP server',
+};
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+    <html lang="en">
+      <body style={{ margin: 0, padding: 0 }}>
+        {children}
+      </body>
+    </html>
+  );
+}
+

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

@@ -0,0 +1,129 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { LoginResult } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function LoginResultWidget({ data }: { data: LoginResult }) {
+  const { user, token, message } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '500px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          textAlign: 'center',
+          marginBottom: styles.spacing['2xl'],
+        }}>
+          <div style={{
+            width: '80px',
+            height: '80px',
+            margin: '0 auto 16px',
+            borderRadius: styles.borderRadius.full,
+            background: `linear-gradient(135deg, ${styles.colors.primary} 0%, ${styles.colors.primaryHover} 100%)`,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '36px',
+          }}>
+            ✓
+          </div>
+          <h2 style={{
+            fontSize: styles.typography.fontSize['2xl'],
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.sm,
+          }}>
+            Welcome Back!
+          </h2>
+          <p style={{
+            fontSize: styles.typography.fontSize.base,
+            color: styles.colors.gray[600],
+          }}>
+            {message}
+          </p>
+        </div>
+
+        <div style={{
+          background: styles.colors.gray[50],
+          borderRadius: styles.borderRadius.md,
+          padding: styles.spacing.lg,
+          marginBottom: styles.spacing.lg,
+        }}>
+          <div style={{
+            display: 'flex',
+            alignItems: 'center',
+            gap: styles.spacing.md,
+            marginBottom: styles.spacing.md,
+          }}>
+            {user.profile_picture && (
+              <img
+                src={user.profile_picture}
+                alt={user.name}
+                style={{
+                  width: '60px',
+                  height: '60px',
+                  borderRadius: styles.borderRadius.full,
+                  objectFit: 'cover',
+                  border: `3px solid ${styles.colors.primary}`,
+                }}
+              />
+            )}
+            <div>
+              <div style={{
+                fontSize: styles.typography.fontSize.lg,
+                fontWeight: styles.typography.fontWeight.semibold,
+                color: styles.colors.gray[900],
+              }}>
+                {user.name}
+              </div>
+              <div style={styles.metaTextStyle}>
+                {user.email}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style={{
+          background: styles.colors.gray[900],
+          borderRadius: styles.borderRadius.md,
+          padding: styles.spacing.md,
+        }}>
+          <div style={{
+            fontSize: styles.typography.fontSize.xs,
+            color: styles.colors.gray[400],
+            marginBottom: styles.spacing.xs,
+          }}>
+            Authentication Token
+          </div>
+          <div style={{
+            fontSize: styles.typography.fontSize.xs,
+            fontFamily: 'monospace',
+            color: styles.colors.primary,
+            wordBreak: 'break-all',
+            lineHeight: styles.typography.lineHeight.relaxed,
+          }}>
+            {token.substring(0, 50)}...
+          </div>
+        </div>
+
+        <div style={{
+          marginTop: styles.spacing.lg,
+          padding: styles.spacing.md,
+          background: `rgba(${parseInt(styles.colors.primary.slice(1, 3), 16)}, ${parseInt(styles.colors.primary.slice(3, 5), 16)}, ${parseInt(styles.colors.primary.slice(5, 7), 16)}, 0.1)`,
+          borderRadius: styles.borderRadius.md,
+          fontSize: styles.typography.fontSize.sm,
+          color: styles.colors.gray[700],
+          textAlign: 'center',
+        }}>
+          🔒 Token stored securely in local storage
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<LoginResult>(LoginResultWidget);

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

@@ -0,0 +1,206 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { OrderConfirmationData } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function OrderConfirmationWidget({ data }: { data: OrderConfirmationData }) {
+  const { order, message } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '700px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          textAlign: 'center',
+          marginBottom: styles.spacing['2xl'],
+        }}>
+          <div style={{
+            width: '80px',
+            height: '80px',
+            margin: '0 auto 16px',
+            borderRadius: styles.borderRadius.full,
+            background: styles.colors.success,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '40px',
+          }}>
+            ✓
+          </div>
+          <h2 style={{
+            fontSize: styles.typography.fontSize['2xl'],
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.sm,
+          }}>
+            Order Confirmed!
+          </h2>
+          <p style={{
+            fontSize: styles.typography.fontSize.base,
+            color: styles.colors.gray[600],
+          }}>
+            {message}
+          </p>
+        </div>
+
+        <div style={{
+          background: styles.colors.gray[50],
+          borderRadius: styles.borderRadius.md,
+          padding: styles.spacing.lg,
+          marginBottom: styles.spacing.lg,
+        }}>
+          <div style={{
+            display: 'grid',
+            gridTemplateColumns: '1fr 1fr',
+            gap: styles.spacing.lg,
+          }}>
+            <div>
+              <div style={{
+                fontSize: styles.typography.fontSize.xs,
+                color: styles.colors.gray[500],
+                marginBottom: styles.spacing.xs,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+              }}>
+                Order ID
+              </div>
+              <div style={{
+                fontSize: styles.typography.fontSize.base,
+                fontWeight: styles.typography.fontWeight.semibold,
+                color: styles.colors.gray[900],
+                fontFamily: 'monospace',
+              }}>
+                #{order.id.substring(0, 8).toUpperCase()}
+              </div>
+            </div>
+            <div>
+              <div style={{
+                fontSize: styles.typography.fontSize.xs,
+                color: styles.colors.gray[500],
+                marginBottom: styles.spacing.xs,
+                textTransform: 'uppercase',
+                letterSpacing: '0.5px',
+              }}>
+                Status
+              </div>
+              <div style={{
+                ...styles.badgeStyle,
+                background: styles.colors.primary,
+                color: styles.colors.black,
+              }}>
+                {order.status}
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div style={{ marginBottom: styles.spacing.lg }}>
+          <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,
+          }}>
+            {order.items.map((item) => (
+              <div
+                key={item.id}
+                style={{
+                  display: 'flex',
+                  gap: styles.spacing.md,
+                  padding: styles.spacing.md,
+                  background: styles.colors.white,
+                  borderRadius: styles.borderRadius.md,
+                  border: `1px solid ${styles.colors.gray[200]}`,
+                }}
+              >
+                {item.image_url && (
+                  <div style={{
+                    width: '60px',
+                    height: '60px',
+                    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 }}>
+                  <div style={{
+                    fontSize: styles.typography.fontSize.base,
+                    fontWeight: styles.typography.fontWeight.medium,
+                    color: styles.colors.gray[900],
+                    marginBottom: styles.spacing.xs,
+                  }}>
+                    {item.name}
+                  </div>
+                  <div style={styles.metaTextStyle}>
+                    Qty: {item.quantity} × ${item.price.toFixed(2)}
+                  </div>
+                </div>
+
+                <div style={{
+                  fontSize: styles.typography.fontSize.lg,
+                  fontWeight: styles.typography.fontWeight.semibold,
+                  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}`,
+        }}>
+          <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,
+            }}>
+              Total Amount
+            </div>
+            <div style={{
+              fontSize: styles.typography.fontSize['3xl'],
+              fontWeight: styles.typography.fontWeight.bold,
+              color: styles.colors.primary,
+            }}>
+              ${order.total.toFixed(2)}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<OrderConfirmationData>(OrderConfirmationWidget);