@4alldigital/foundation-ui--core 3.3.0 → 3.4.1

package/src/templates/ProductDetailScreen/ProductDetailScreen.stories.tsx

@@ -0,0 +1,108 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProductDetailScreen from './ProductDetailScreen';
+import { Product } from '../../components/ProductCard';
+import { ProductDetailState } from '../../components/ProductDetail';
+
+const meta: Meta<typeof ProductDetailScreen> = {
+  title: 'Templates/ProductDetailScreen',
+  component: ProductDetailScreen,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductDetailScreen>;
+
+const sampleProduct: Product = {
+  id: 'prod_1',
+  name: 'NRG Performance Leggings',
+  description: 'High-performance leggings designed for intense workouts. Made with moisture-wicking fabric that keeps you dry and comfortable during your toughest training sessions.',
+  images: [
+    'https://picsum.photos/800/800?random=1',
+    'https://picsum.photos/800/800?random=2',
+    'https://picsum.photos/800/800?random=3',
+  ],
+  price: 4500,
+  currency: 'gbp',
+  metadata: {
+    partnerId: 'lululemon',
+    sizes: ['XS', 'S', 'M', 'L', 'XL'],
+    colors: ['Black', 'Navy', 'Burgundy'],
+  },
+};
+
+export const Default: Story = {
+  args: {
+    product: sampleProduct,
+    isLoading: false,
+    isPurchasing: false,
+    onPurchase: (state: ProductDetailState) => console.log('Purchase:', state),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    product: sampleProduct,
+    isLoading: true,
+    isPurchasing: false,
+    onPurchase: (state: ProductDetailState) => console.log('Purchase:', state),
+  },
+};
+
+export const Purchasing: Story = {
+  args: {
+    product: sampleProduct,
+    isLoading: false,
+    isPurchasing: true,
+    onPurchase: (state: ProductDetailState) => console.log('Purchase:', state),
+  },
+};
+
+export const SingleImage: Story = {
+  args: {
+    product: {
+      ...sampleProduct,
+      images: ['https://picsum.photos/800/800?random=1'],
+    },
+    isLoading: false,
+    isPurchasing: false,
+    onPurchase: (state: ProductDetailState) => console.log('Purchase:', state),
+  },
+};
+
+export const NoImages: Story = {
+  args: {
+    product: {
+      ...sampleProduct,
+      images: [],
+    },
+    isLoading: false,
+    isPurchasing: false,
+    onPurchase: (state: ProductDetailState) => console.log('Purchase:', state),
+  },
+};
+
+export const NoVariants: Story = {
+  args: {
+    product: {
+      ...sampleProduct,
+      metadata: {
+        partnerId: 'lululemon',
+      },
+    },
+    isLoading: false,
+    isPurchasing: false,
+    onPurchase: (state: ProductDetailState) => console.log('Purchase:', state),
+  },
+};
+
+export const Unauthenticated: Story = {
+  args: {
+    product: sampleProduct,
+    isLoading: false,
+    isPurchasing: false,
+    isAuthenticated: false,
+    onPurchase: (state: ProductDetailState) => console.log('Purchase:', state),
+  },
+};

package/src/templates/ProductDetailScreen/ProductDetailScreen.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import { ProductDetail } from '../../components/ProductDetail';
+import { Props } from './ProductDetailScreen.types';
+
+const ProductDetailScreen = ({ testID, product, isLoading, isPurchasing, isAuthenticated = true, onPurchase }: Props) => {
+  return (
+    <Screen data-testid={testID || 'ProductDetailScreen'}>
+      <div className="container mx-auto px-4 py-16">
+        {isLoading ? (
+          <div className="grid gap-8 lg:grid-cols-2">
+            <div className="aspect-square animate-pulse rounded-lg bg-muted"></div>
+            <div className="space-y-4">
+              <div className="h-10 w-3/4 animate-pulse rounded bg-muted"></div>
+              <div className="h-8 w-1/4 animate-pulse rounded bg-muted"></div>
+              <div className="h-20 w-full animate-pulse rounded bg-muted"></div>
+            </div>
+          </div>
+        ) : (
+          <ProductDetail 
+            product={product} 
+            onPurchase={onPurchase}
+            isLoading={isPurchasing}
+            isAuthenticated={isAuthenticated}
+          />
+        )}
+      </div>
+    </Screen>
+  );
+};
+
+ProductDetailScreen.displayName = 'ProductDetailScreen';
+
+export default ProductDetailScreen;
+export type { Props };

package/src/templates/ProductDetailScreen/ProductDetailScreen.types.ts

@@ -0,0 +1,11 @@
+import { Product } from '../../components/ProductCard';
+import { ProductDetailState } from '../../components/ProductDetail';
+
+export interface Props {
+  testID?: string;
+  product: Product;
+  isLoading?: boolean;
+  isPurchasing?: boolean;
+  isAuthenticated?: boolean;
+  onPurchase: (state: ProductDetailState) => void;
+}

package/src/templates/ProductDetailScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductDetailScreen';

package/src/templates/ProductListScreen/ProductListScreen.stories.tsx

@@ -0,0 +1,121 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ProductListScreen from './ProductListScreen';
+import { Product } from '../../components/ProductCard';
+
+const meta: Meta<typeof ProductListScreen> = {
+  title: 'Templates/ProductListScreen',
+  component: ProductListScreen,
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductListScreen>;
+
+const sampleProducts: Product[] = [
+  {
+    id: 'prod_1',
+    name: 'Performance Leggings',
+    description: 'High-performance leggings designed for intense workouts',
+    images: ['https://picsum.photos/400/400?random=1'],
+    price: 4500,
+    currency: 'gbp',
+    metadata: {
+      partnerId: 'partner1',
+      sizes: ['XS', 'S', 'M', 'L', 'XL'],
+      colors: ['Black', 'Navy', 'Burgundy'],
+    },
+  },
+  {
+    id: 'prod_2',
+    name: 'Athletic Tank Top',
+    description: 'Breathable tank top for all-day comfort',
+    images: ['https://picsum.photos/400/400?random=2'],
+    price: 2500,
+    currency: 'gbp',
+    metadata: {
+      partnerId: 'partner1',
+      sizes: ['XS', 'S', 'M', 'L', 'XL'],
+      colors: ['White', 'Black', 'Grey'],
+    },
+  },
+  {
+    id: 'prod_3',
+    name: 'Training Shorts',
+    description: 'Lightweight shorts perfect for running',
+    images: ['https://picsum.photos/400/400?random=3'],
+    price: 3200,
+    currency: 'gbp',
+    metadata: {
+      partnerId: 'partner1',
+      sizes: ['S', 'M', 'L', 'XL'],
+      colors: ['Black', 'Navy'],
+    },
+  },
+  {
+    id: 'prod_4',
+    name: 'Sports Bra',
+    description: 'High-support sports bra for intense workouts',
+    images: ['https://picsum.photos/400/400?random=4'],
+    price: 3800,
+    currency: 'gbp',
+    metadata: {
+      partnerId: 'partner2',
+      sizes: ['XS', 'S', 'M', 'L'],
+      colors: ['Black', 'White', 'Pink'],
+    },
+  },
+];
+
+export const Default: Story = {
+  args: {
+    title: 'Shop Partnerships',
+    products: sampleProducts,
+    isLoading: false,
+    onProductClick: (product) => console.log('Product clicked:', product),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    title: 'Shop Partnerships',
+    products: [],
+    isLoading: true,
+  },
+};
+
+export const Empty: Story = {
+  args: {
+    title: 'Shop Partnerships',
+    products: [],
+    isLoading: false,
+  },
+};
+
+export const Error: Story = {
+  args: {
+    title: 'Shop Partnerships',
+    products: [],
+    isLoading: false,
+    error: 'Failed to load products. Please try again later.',
+  },
+};
+
+export const SingleProduct: Story = {
+  args: {
+    title: 'Shop Partnerships',
+    products: [sampleProducts[0]],
+    isLoading: false,
+    onProductClick: (product) => console.log('Product clicked:', product),
+  },
+};
+
+export const ManyProducts: Story = {
+  args: {
+    title: 'Shop Partnerships',
+    products: [...sampleProducts, ...sampleProducts, ...sampleProducts],
+    isLoading: false,
+    onProductClick: (product) => console.log('Product clicked:', product),
+  },
+};

package/src/templates/ProductListScreen/ProductListScreen.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import Screen from '../../components/Screen';
+import DisplayHeading from '../../components/DisplayHeading';
+import { ProductCard } from '../../components/ProductCard';
+import { Props } from './ProductListScreen.types';
+
+const ProductListScreen = ({ testID, title, products, isLoading, error, onProductClick }: Props) => {
+  return (
+    <Screen data-testid={testID || 'ProductListScreen'}>
+      {title && <DisplayHeading text={title} />}
+      
+      <div className="container mx-auto px-4 py-8">
+        {error && (
+          <div className="rounded-lg bg-destructive/10 p-8 text-center">
+            <h2 className="mb-2 text-2xl font-bold text-destructive">Unable to Load Products</h2>
+            <p className="text-muted-foreground">{error}</p>
+          </div>
+        )}
+
+        {isLoading && (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => (
+              <div key={i} className="space-y-4">
+                <div className="aspect-square animate-pulse rounded-lg bg-muted"></div>
+                <div className="space-y-2">
+                  <div className="h-6 w-3/4 animate-pulse rounded bg-muted"></div>
+                  <div className="h-5 w-1/2 animate-pulse rounded bg-muted"></div>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {!isLoading && !error && products.length === 0 && (
+          <div className="rounded-lg border border-border bg-card p-12 text-center">
+            <p className="text-lg text-muted-foreground">No products available at this time.</p>
+          </div>
+        )}
+
+        {!isLoading && !error && products.length > 0 && (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {products.map((product) => (
+              <ProductCard 
+                key={product.id} 
+                product={product} 
+                onClick={onProductClick}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </Screen>
+  );
+};
+
+ProductListScreen.displayName = 'ProductListScreen';
+
+export default ProductListScreen;
+export type { Props };

package/src/templates/ProductListScreen/ProductListScreen.types.ts

@@ -0,0 +1,10 @@
+import { Product } from '../../components/ProductCard';
+
+export interface Props {
+  testID?: string;
+  title?: string;
+  products: Product[];
+  isLoading?: boolean;
+  error?: string;
+  onProductClick?: (product: Product) => void;
+}

package/src/templates/ProductListScreen/index.ts

@@ -0,0 +1 @@
+export { default } from './ProductListScreen';

package/src/templates/index.ts

@@ -13,6 +13,8 @@ export { default as MenuScreen } from './MenuScreen';
 export { default as NotFoundScreen } from './NotFoundScreen';
 export { default as PasswordResetScreen } from './PasswordResetScreen';
 export { default as PasswordResetAuthScreen } from './PasswordResetAuthScreen';
+export { default as ProductDetailScreen } from './ProductDetailScreen';
+export { default as ProductListScreen } from './ProductListScreen';
 export { default as ProfileScreen } from './ProfileScreen';
 export { default as ScheduleScreen } from './ScheduleScreen';
 export { default as SubscriptionScreen } from './SubscriptionScreen';
@@ -34,6 +36,8 @@ export type { Props as MenuScreenProps } from './MenuScreen/MenuScreen.types';
 export type { Props as NotFoundScreenProps } from './NotFoundScreen/NotFoundScreen.types';
 export type { Props as PasswordResetScreenProps } from './PasswordResetScreen/PasswordResetScreen.types';
 export type { Props as PasswordResetAuthScreenProps } from './PasswordResetAuthScreen/PasswordResetAuthScreen.types';
+export type { Props as ProductDetailScreenProps } from './ProductDetailScreen/ProductDetailScreen.types';
+export type { Props as ProductListScreenProps } from './ProductListScreen/ProductListScreen.types';
 export type { Props as ProfileScreenProps } from './ProfileScreen/ProfileScreen.types';
 export type { Props as ScheduleScreenProps } from './ScheduleScreen/ScheduleScreen.types';
 export type { Props as SubscriptionScreenProps } from './SubscriptionScreen/SubscriptionScreen.types';