nitrostack 1.0.0 → 1.0.1

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

@@ -0,0 +1,105 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import * as styles from '../../styles/ecommerce';
+
+interface AddressDeletedData {
+  message: string;
+  addressId?: string;
+}
+
+function AddressDeletedWidget({ data }: { data: AddressDeletedData }) {
+  const { message, addressId } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '500px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          textAlign: 'center',
+          paddingTop: styles.spacing.xl,
+          paddingBottom: styles.spacing.xl,
+        }}>
+          <div style={{
+            fontSize: '80px',
+            marginBottom: styles.spacing.lg,
+            opacity: 0.5,
+          }}>
+            📍
+          </div>
+          <h2 style={{
+            fontSize: styles.typography.fontSize['2xl'],
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.sm,
+          }}>
+            {message}
+          </h2>
+
+          <div style={{
+            marginTop: styles.spacing.xl,
+            padding: styles.spacing.xl,
+            background: `${styles.colors.error}15`,
+            border: `1px solid ${styles.colors.error}30`,
+            borderRadius: styles.borderRadius.md,
+          }}>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: styles.spacing.md,
+              marginBottom: styles.spacing.md,
+            }}>
+              <div style={{ fontSize: '40px' }}>⚠️</div>
+              <div style={{ textAlign: 'left' }}>
+                <div style={{
+                  fontSize: styles.typography.fontSize.lg,
+                  fontWeight: styles.typography.fontWeight.bold,
+                  color: styles.colors.error,
+                }}>
+                  Permanently Removed
+                </div>
+                <div style={{
+                  fontSize: styles.typography.fontSize.sm,
+                  color: styles.colors.gray[600],
+                }}>
+                  This action cannot be undone
+                </div>
+              </div>
+            </div>
+
+            {addressId && (
+              <div style={{
+                marginTop: styles.spacing.md,
+                paddingTop: styles.spacing.md,
+                borderTop: `1px solid ${styles.colors.error}30`,
+                fontSize: styles.typography.fontSize.xs,
+                fontFamily: 'monospace',
+                color: styles.colors.gray[600],
+                wordBreak: 'break-all',
+              }}>
+                ID: {addressId}
+              </div>
+            )}
+          </div>
+
+          <div style={{
+            marginTop: styles.spacing.lg,
+            padding: styles.spacing.md,
+            background: `${styles.colors.success}15`,
+            borderRadius: styles.borderRadius.md,
+            fontSize: styles.typography.fontSize.sm,
+            color: styles.colors.gray[700],
+          }}>
+            ➕ You can add a new address anytime
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<AddressDeletedData>(AddressDeletedWidget);

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

@@ -0,0 +1,139 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import { AddressListData } from '../../types/tool-data';
+import * as styles from '../../styles/ecommerce';
+
+function AddressListWidget({ data }: { data: AddressListData }) {
+  const { addresses } = data;
+
+  if (!addresses || addresses.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 addresses saved
+          </h3>
+          <p style={styles.metaTextStyle}>
+            Add a delivery address to get started
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={styles.titleStyle}>
+        🏠 Your Addresses
+      </div>
+
+      <div style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fill, minmax(300px, 1fr))',
+        gap: styles.spacing.lg,
+      }}>
+        {addresses.map((address) => (
+          <div
+            key={address.id}
+            style={{
+              ...styles.cardStyle,
+              position: 'relative',
+            }}
+          >
+            {address.is_default && (
+              <div style={{
+                position: 'absolute',
+                top: styles.spacing.md,
+                right: styles.spacing.md,
+                ...styles.badgeStyle,
+                background: styles.colors.primary,
+                color: styles.colors.black,
+              }}>
+                ⭐ Default
+              </div>
+            )}
+
+            <div style={{
+              marginBottom: styles.spacing.lg,
+            }}>
+              <h3 style={{
+                fontSize: styles.typography.fontSize.xl,
+                fontWeight: styles.typography.fontWeight.bold,
+                color: styles.colors.gray[900],
+                marginBottom: styles.spacing.xs,
+              }}>
+                {address.full_name}
+              </h3>
+              <div style={{
+                ...styles.metaTextStyle,
+                marginBottom: styles.spacing.sm,
+              }}>
+                📞 {address.phone}
+              </div>
+            </div>
+
+            <div style={{
+              background: styles.colors.gray[50],
+              borderRadius: styles.borderRadius.md,
+              padding: styles.spacing.md,
+              marginBottom: styles.spacing.md,
+            }}>
+              <div style={{
+                fontSize: styles.typography.fontSize.base,
+                color: styles.colors.gray[800],
+                lineHeight: styles.typography.lineHeight.relaxed,
+              }}>
+                <div style={{ marginBottom: styles.spacing.xs }}>
+                  {address.street}
+                </div>
+                <div style={{ marginBottom: styles.spacing.xs }}>
+                  {address.city}, {address.state} {address.zip_code}
+                </div>
+                <div>
+                  {address.country}
+                </div>
+              </div>
+            </div>
+
+            <div style={{
+              display: 'flex',
+              gap: styles.spacing.sm,
+              justifyContent: 'flex-end',
+            }}>
+              <button style={{
+                ...styles.buttonStyle,
+                padding: `${styles.spacing.sm} ${styles.spacing.md}`,
+                fontSize: styles.typography.fontSize.sm,
+                background: styles.colors.white,
+                color: styles.colors.gray[700],
+                border: `1px solid ${styles.colors.gray[300]}`,
+              }}>
+                Edit
+              </button>
+              {!address.is_default && (
+                <button style={{
+                  ...styles.buttonStyle,
+                  padding: `${styles.spacing.sm} ${styles.spacing.md}`,
+                  fontSize: styles.typography.fontSize.sm,
+                }}>
+                  Set Default
+                </button>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<AddressListData>(AddressListWidget);

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

@@ -0,0 +1,153 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import * as styles from '../../styles/ecommerce';
+
+interface Address {
+  id: string;
+  full_name: string;
+  street: string;
+  city: string;
+  state: string;
+  zip_code: string;
+  country: string;
+  phone: string;
+  is_default: boolean;
+}
+
+interface AddressUpdatedData {
+  message: string;
+  address?: Address;
+  addressId?: string;
+}
+
+function AddressUpdatedWidget({ data }: { data: AddressUpdatedData }) {
+  const { message, address } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '600px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          textAlign: 'center',
+          marginBottom: styles.spacing.xl,
+        }}>
+          <div style={{
+            width: '60px',
+            height: '60px',
+            margin: '0 auto 16px',
+            borderRadius: styles.borderRadius.full,
+            background: styles.colors.success,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '28px',
+          }}>
+            ✓
+          </div>
+          <h2 style={{
+            fontSize: styles.typography.fontSize.xl,
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.sm,
+          }}>
+            {message}
+          </h2>
+          <p style={styles.metaTextStyle}>
+            This address will be used for all future orders
+          </p>
+        </div>
+
+        {address && (
+          <div style={{
+            position: 'relative',
+            background: styles.colors.gray[50],
+            borderRadius: styles.borderRadius.md,
+            padding: styles.spacing.xl,
+            border: `2px solid ${styles.colors.primary}`,
+          }}>
+            <div style={{
+              position: 'absolute',
+              top: styles.spacing.md,
+              right: styles.spacing.md,
+              ...styles.badgeStyle,
+              background: styles.colors.primary,
+              color: styles.colors.black,
+              fontWeight: styles.typography.fontWeight.bold,
+            }}>
+              ⭐ DEFAULT
+            </div>
+
+            <div style={{
+              display: 'flex',
+              alignItems: 'start',
+              gap: styles.spacing.md,
+              marginBottom: styles.spacing.lg,
+            }}>
+              <div style={{ fontSize: '32px' }}>👤</div>
+              <div>
+                <div style={{
+                  fontSize: styles.typography.fontSize.lg,
+                  fontWeight: styles.typography.fontWeight.bold,
+                  color: styles.colors.gray[900],
+                }}>
+                  {address.full_name}
+                </div>
+              </div>
+            </div>
+
+            <div style={{
+              display: 'flex',
+              flexDirection: 'column',
+              gap: styles.spacing.sm,
+              paddingLeft: styles.spacing['3xl'],
+            }}>
+              <div style={{
+                display: 'flex',
+                gap: styles.spacing.sm,
+                fontSize: styles.typography.fontSize.base,
+                color: styles.colors.gray[700],
+              }}>
+                <span>🏠</span>
+                <span>{address.street}</span>
+              </div>
+              <div style={{
+                display: 'flex',
+                gap: styles.spacing.sm,
+                fontSize: styles.typography.fontSize.base,
+                color: styles.colors.gray[700],
+              }}>
+                <span>📍</span>
+                <span>{address.city}, {address.state} {address.zip_code}</span>
+              </div>
+              <div style={{
+                display: 'flex',
+                gap: styles.spacing.sm,
+                fontSize: styles.typography.fontSize.base,
+                color: styles.colors.gray[700],
+              }}>
+                <span>🌍</span>
+                <span>{address.country}</span>
+              </div>
+              <div style={{
+                display: 'flex',
+                gap: styles.spacing.sm,
+                fontSize: styles.typography.fontSize.base,
+                color: styles.colors.gray[700],
+                fontFamily: 'monospace',
+              }}>
+                <span>📞</span>
+                <span>{address.phone}</span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<AddressUpdatedData>(AddressUpdatedWidget);

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

@@ -0,0 +1,86 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import * as styles from '../../styles/ecommerce';
+
+interface CartClearedData {
+  message: string;
+  itemsRemoved: number;
+}
+
+function CartClearedWidget({ data }: { data: CartClearedData }) {
+  const { message, itemsRemoved } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '500px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          textAlign: 'center',
+          paddingTop: styles.spacing.xl,
+          paddingBottom: styles.spacing.xl,
+        }}>
+          <div style={{
+            fontSize: '80px',
+            marginBottom: styles.spacing.lg,
+            opacity: 0.5,
+          }}>
+            🛒
+          </div>
+          <h2 style={{
+            fontSize: styles.typography.fontSize['2xl'],
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.sm,
+          }}>
+            {message}
+          </h2>
+
+          <div style={{
+            marginTop: styles.spacing.xl,
+            padding: styles.spacing.xl,
+            background: styles.colors.gray[50],
+            borderRadius: styles.borderRadius.md,
+          }}>
+            <div style={{
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: styles.spacing.lg,
+            }}>
+              <div style={{ fontSize: '48px' }}>📦</div>
+              <div style={{ textAlign: 'left' }}>
+                <div style={{
+                  fontSize: styles.typography.fontSize['3xl'],
+                  fontWeight: styles.typography.fontWeight.bold,
+                  color: styles.colors.gray[900],
+                }}>
+                  {itemsRemoved}
+                </div>
+                <div style={styles.metaTextStyle}>
+                  item{itemsRemoved !== 1 ? 's' : ''} removed
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div style={{
+            marginTop: styles.spacing.lg,
+            padding: styles.spacing.md,
+            background: `${styles.colors.success}15`,
+            borderRadius: styles.borderRadius.md,
+            fontSize: styles.typography.fontSize.sm,
+            color: styles.colors.gray[700],
+          }}>
+            ✨ Your cart is now fresh and ready for shopping!
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<CartClearedData>(CartClearedWidget);

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

@@ -0,0 +1,116 @@
+'use client';
+
+import { withToolData } from 'nitrostack/widgets';
+import * as styles from '../../styles/ecommerce';
+
+interface CartUpdateData {
+  message: string;
+  product?: string;
+  quantity?: number;
+  itemsRemoved?: number;
+}
+
+function CartUpdatedWidget({ data }: { data: CartUpdateData }) {
+  const { message, product, quantity, itemsRemoved } = data;
+
+  return (
+    <div style={styles.containerStyle}>
+      <div style={{
+        ...styles.cardStyle,
+        maxWidth: '500px',
+        margin: '0 auto',
+      }}>
+        <div style={{
+          textAlign: 'center',
+          marginBottom: styles.spacing.xl,
+        }}>
+          <div style={{
+            width: '60px',
+            height: '60px',
+            margin: '0 auto 16px',
+            borderRadius: styles.borderRadius.full,
+            background: styles.colors.success,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            fontSize: '28px',
+          }}>
+            ✓
+          </div>
+          <h2 style={{
+            fontSize: styles.typography.fontSize.xl,
+            fontWeight: styles.typography.fontWeight.bold,
+            color: styles.colors.gray[900],
+            marginBottom: styles.spacing.sm,
+          }}>
+            {message}
+          </h2>
+        </div>
+
+        {product && (
+          <div style={{
+            padding: styles.spacing.lg,
+            background: styles.colors.gray[50],
+            borderRadius: styles.borderRadius.md,
+            marginBottom: styles.spacing.md,
+          }}>
+            <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 Updated
+            </div>
+            <div style={{
+              fontSize: styles.typography.fontSize.base,
+              fontWeight: styles.typography.fontWeight.semibold,
+              color: styles.colors.gray[900],
+              marginBottom: styles.spacing.sm,
+            }}>
+              {product}
+            </div>
+            {quantity !== undefined && (
+              <div style={{
+                display: 'flex',
+                alignItems: 'center',
+                gap: styles.spacing.sm,
+              }}>
+                <span style={styles.metaTextStyle}>New quantity:</span>
+                <div style={{
+                  ...styles.badgeStyle,
+                  background: styles.colors.primary,
+                  color: styles.colors.black,
+                  fontWeight: styles.typography.fontWeight.bold,
+                }}>
+                  {quantity}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+
+        {itemsRemoved !== undefined && itemsRemoved > 0 && (
+          <div style={{
+            padding: styles.spacing.lg,
+            background: `${styles.colors.error}15`,
+            border: `1px solid ${styles.colors.error}30`,
+            borderRadius: styles.borderRadius.md,
+          }}>
+            <div style={{
+              fontSize: styles.typography.fontSize.base,
+              fontWeight: styles.typography.fontWeight.semibold,
+              color: styles.colors.error,
+            }}>
+              {itemsRemoved} item{itemsRemoved !== 1 ? 's' : ''} removed from cart
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+export default withToolData<CartUpdateData>(CartUpdatedWidget);