@4alldigital/foundation-ui--core 3.2.1 → 3.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@4alldigital/foundation-ui--core",
-  "version": "3.2.1",
+  "version": "3.4.0",
   "description": "Foundation UI Core Component Library (source distribution)",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -32,5 +32,5 @@
   },
   "author": "Joe Mewes",
   "license": "MIT",
-  "gitHead": "0c4e012771a223879958443f3977c2cdf02a5b1a"
+  "gitHead": "588323f234033e2394e15a7ff030cf57888f6708"
 }

package/src/components/Button/Button.tsx

@@ -56,7 +56,7 @@ const Button = ({
 
   const classes = twMerge(
     cx(
-      'button rounded-btnBorderRadius',
+      'button flex rounded-sm items-center',
       { shadow: raised },
       { uppercase: uppercase },
       { 'auto-cols-auto grid-cols-2 gap-4': isLoading || icon || external },

package/src/components/Form/Form.tsx

@@ -65,7 +65,7 @@ const Form = ({
             }
           }}
           className={cx(
-            'w-2xs relative',
+            'relative',
             { 'form px-8 pt-6 pb-8 ': isBoxed },
             { 'opacity-50': isSubmitting },
             className,

package/src/components/ProductCard/ProductCard.stories.tsx

@@ -0,0 +1,90 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductCard } from './ProductCard';
+import type { Product } from './ProductCard.types';
+
+const meta: Meta<typeof ProductCard> = {
+  title: 'Components/ProductCard',
+  component: ProductCard,
+  tags: ['autodocs'],
+  argTypes: {
+    onClick: { action: 'clicked' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductCard>;
+
+const sampleProduct: Product = {
+  id: 'prod_123',
+  name: 'NRG Performance Leggings',
+  description:
+    'High-performance leggings designed for intense workouts. Features moisture-wicking fabric and four-way stretch for maximum comfort and flexibility.',
+  images: [
+    'https://picsum.photos/seed/product1/600/600',
+    'https://picsum.photos/seed/product2/600/600',
+  ],
+  price: 4500, // £45.00 in pence
+  currency: 'gbp',
+  metadata: {
+    partnerId: 'lululemon',
+    sizes: ['XS', 'S', 'M', 'L', 'XL'],
+    colors: ['black', 'navy', 'burgundy'],
+  },
+};
+
+const shortDescriptionProduct: Product = {
+  id: 'prod_456',
+  name: 'Yoga Mat Pro',
+  description: 'Premium yoga mat with extra cushioning.',
+  images: ['https://picsum.photos/seed/product3/600/600'],
+  price: 2999,
+  currency: 'gbp',
+  metadata: {
+    partnerId: 'manduka',
+    colors: ['purple', 'blue', 'green'],
+  },
+};
+
+const noImageProduct: Product = {
+  id: 'prod_789',
+  name: 'Resistance Bands Set',
+  description: 'Set of 5 resistance bands for home workouts',
+  images: [],
+  price: 1999,
+  currency: 'gbp',
+};
+
+export const Default: Story = {
+  args: {
+    product: sampleProduct,
+  },
+};
+
+export const Compact: Story = {
+  args: {
+    product: sampleProduct,
+    variant: 'compact',
+  },
+};
+
+export const ShortDescription: Story = {
+  args: {
+    product: shortDescriptionProduct,
+  },
+};
+
+export const NoImage: Story = {
+  args: {
+    product: noImageProduct,
+  },
+};
+
+export const Grid: Story = {
+  render: () => (
+    <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
+      <ProductCard product={sampleProduct} />
+      <ProductCard product={shortDescriptionProduct} />
+      <ProductCard product={noImageProduct} />
+    </div>
+  ),
+};

package/src/components/ProductCard/ProductCard.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../utils';
+import { ProductCardProps } from './ProductCard.types';
+import Image from '../Image';
+import { ShadcnButton } from '../ShadcnButton';
+
+const productCardVariants = cva(
+  'group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-all hover:shadow-lg',
+  {
+    variants: {
+      variant: {
+        default: 'hover:border-primary/50',
+        compact: 'hover:border-primary/30',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface ProductCardVariantProps
+  extends ProductCardProps,
+    VariantProps<typeof productCardVariants> {}
+
+const ProductCard = React.forwardRef<HTMLDivElement, ProductCardVariantProps>(
+  ({ product, onClick, className, testID, variant, ...props }, ref) => {
+    const formatPrice = (price: number, currency: string) => {
+      return new Intl.NumberFormat('en-GB', {
+        style: 'currency',
+        currency: currency.toUpperCase(),
+      }).format(price / 100);
+    };
+
+    const handleClick = () => {
+      if (onClick) {
+        onClick(product);
+      }
+    };
+
+    const primaryImage = product.images[0] || '';
+    const truncatedDescription = product.description
+      ? product.description.length > 100
+        ? `${product.description.substring(0, 100)}...`
+        : product.description
+      : '';
+
+    return (
+      <div
+        ref={ref}
+        data-testid={testID || 'ProductCard'}
+        className={cn(productCardVariants({ variant, className }))}
+        {...props}
+      >
+        {/* Image Section */}
+        <div className="relative aspect-square w-full overflow-hidden bg-muted">
+          {primaryImage ? (
+            <div className="relative h-full w-full transition-transform duration-300 group-hover:scale-105">
+              <Image
+                src={primaryImage}
+                alt={product.name}
+                className="h-full w-full object-cover"
+              />
+            </div>
+          ) : (
+            <div className="flex h-full w-full items-center justify-center bg-muted">
+              <span className="text-muted-foreground">No image</span>
+            </div>
+          )}
+        </div>
+
+        {/* Content Section */}
+        <div className="flex flex-1 flex-col p-4">
+          {/* Product Name */}
+          <h3 className="mb-2 line-clamp-2 text-lg font-semibold text-foreground">
+            {product.name}
+          </h3>
+
+          {/* Description */}
+          {truncatedDescription && (
+            <p className="mb-4 line-clamp-2 text-sm text-muted-foreground">
+              {truncatedDescription}
+            </p>
+          )}
+
+          {/* Price and Button */}
+          <div className="mt-auto flex items-center justify-between">
+            <span className="text-xl font-bold text-foreground">
+              {formatPrice(product.price, product.currency)}
+            </span>
+            <ShadcnButton
+              variant="outline"
+              size="sm"
+              onClick={handleClick}
+              className="transition-colors hover:bg-primary hover:text-primary-foreground"
+            >
+              View Details
+            </ShadcnButton>
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+ProductCard.displayName = 'ProductCard';
+
+export { ProductCard, productCardVariants };
+export type { ProductCardProps, ProductCardVariantProps };

package/src/components/ProductCard/ProductCard.types.ts

@@ -0,0 +1,21 @@
+export interface Product {
+  id: string;
+  name: string;
+  description?: string;
+  images: string[];
+  price: number;
+  currency: string;
+  metadata?: {
+    partnerId?: string;
+    sizes?: string[];
+    colors?: string[];
+    [key: string]: any;
+  };
+}
+
+export interface ProductCardProps {
+  product: Product;
+  onClick?: (product: Product) => void;
+  className?: string;
+  testID?: string;
+}

package/src/components/ProductCard/index.ts

@@ -0,0 +1,3 @@
+export { ProductCard, productCardVariants } from './ProductCard';
+export type { ProductCardProps, ProductCardVariantProps } from './ProductCard';
+export type { Product } from './ProductCard.types';

package/src/components/ProductDetail/ProductDetail.stories.tsx

@@ -0,0 +1,97 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductDetail } from './ProductDetail';
+import type { Product } from '../ProductCard/ProductCard.types';
+import type { ProductDetailState } from './ProductDetail.types';
+
+const meta: Meta<typeof ProductDetail> = {
+  title: 'Components/ProductDetail',
+  component: ProductDetail,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'padded',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ProductDetail>;
+
+const sampleProduct: Product = {
+  id: 'prod_123',
+  name: 'NRG Performance Leggings',
+  description:
+    'High-performance leggings designed for intense workouts. Features moisture-wicking fabric, four-way stretch for maximum comfort and flexibility, and a high-waisted design for extra support. Perfect for yoga, running, or any high-intensity training.',
+  images: [
+    'https://picsum.photos/seed/product1/800/800',
+    'https://picsum.photos/seed/product2/800/800',
+    'https://picsum.photos/seed/product3/800/800',
+  ],
+  price: 4500,
+  currency: 'gbp',
+  metadata: {
+    partnerId: 'lululemon',
+    sizes: ['XS', 'S', 'M', 'L', 'XL'],
+    colors: ['Black', 'Navy', 'Burgundy'],
+  },
+};
+
+const noVariantsProduct: Product = {
+  id: 'prod_456',
+  name: 'Yoga Mat Pro',
+  description:
+    'Premium 6mm thick yoga mat with excellent grip and cushioning. Made from eco-friendly TPE material.',
+  images: ['https://picsum.photos/seed/product4/800/800'],
+  price: 2999,
+  currency: 'gbp',
+  metadata: {
+    partnerId: 'manduka',
+  },
+};
+
+const handlePurchase = (state: ProductDetailState) => {
+  console.log('Purchase clicked:', state);
+  alert(
+    `Purchase: ${state.quantity}x item(s)${state.selectedSize ? `, Size: ${state.selectedSize}` : ''}${state.selectedColor ? `, Color: ${state.selectedColor}` : ''}`
+  );
+};
+
+export const Default: Story = {
+  args: {
+    product: sampleProduct,
+    onPurchase: handlePurchase,
+  },
+};
+
+export const NoVariants: Story = {
+  args: {
+    product: noVariantsProduct,
+    onPurchase: handlePurchase,
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    product: sampleProduct,
+    onPurchase: handlePurchase,
+    isLoading: true,
+  },
+};
+
+export const SingleImage: Story = {
+  args: {
+    product: {
+      ...sampleProduct,
+      images: ['https://picsum.photos/seed/product1/800/800'],
+    },
+    onPurchase: handlePurchase,
+  },
+};
+
+export const NoImages: Story = {
+  args: {
+    product: {
+      ...sampleProduct,
+      images: [],
+    },
+    onPurchase: handlePurchase,
+  },
+};

package/src/components/ProductDetail/ProductDetail.tsx

@@ -0,0 +1,251 @@
+import * as React from 'react';
+import { useState, useMemo } from 'react';
+import { cn } from '../../utils';
+import { ProductDetailProps, ProductDetailState } from './ProductDetail.types';
+import { VariantSelector } from '../VariantSelector';
+import type { VariantOption } from '../VariantSelector';
+import { ShadcnButton } from '../ShadcnButton';
+import {
+  ShadcnCarousel,
+  ShadcnCarouselContent,
+  ShadcnCarouselItem,
+  ShadcnCarouselPrevious,
+  ShadcnCarouselNext,
+} from '../ShadcnCarousel';
+import Image from '../Image';
+import Tabs from '../Tabs';
+import { Minus, Plus, ShoppingCart } from 'lucide-react';
+
+export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps>(
+  ({ product, onPurchase, isLoading = false, isAuthenticated = true, className, testID }, ref) => {
+    const [selectedSize, setSelectedSize] = useState<string | undefined>();
+    const [selectedColor, setSelectedColor] = useState<string | undefined>();
+    const [quantity, setQuantity] = useState(1);
+
+    const formatPrice = (price: number, currency: string) => {
+      return new Intl.NumberFormat('en-GB', {
+        style: 'currency',
+        currency: currency.toUpperCase(),
+      }).format(price / 100);
+    };
+
+    // Parse size options from metadata
+    const sizeOptions: VariantOption[] = useMemo(() => {
+      if (!product.metadata?.sizes) return [];
+      try {
+        const sizes = Array.isArray(product.metadata.sizes)
+          ? product.metadata.sizes
+          : JSON.parse(product.metadata.sizes);
+        return sizes.map((size: string) => ({
+          value: size.toLowerCase(),
+          label: size,
+        }));
+      } catch {
+        return [];
+      }
+    }, [product.metadata?.sizes]);
+
+    // Parse color options from metadata
+    const colorOptions: VariantOption[] = useMemo(() => {
+      if (!product.metadata?.colors) return [];
+      try {
+        const colors = Array.isArray(product.metadata.colors)
+          ? product.metadata.colors
+          : JSON.parse(product.metadata.colors);
+        return colors.map((color: string) => ({
+          value: color.toLowerCase(),
+          label: color.charAt(0).toUpperCase() + color.slice(1),
+        }));
+      } catch {
+        return [];
+      }
+    }, [product.metadata?.colors]);
+
+    const handleQuantityChange = (delta: number) => {
+      setQuantity(prev => Math.max(1, prev + delta));
+    };
+
+    const handlePurchase = () => {
+      const state: ProductDetailState = {
+        selectedSize,
+        selectedColor,
+        quantity,
+      };
+      onPurchase(state);
+    };
+
+    const totalPrice = product.price * quantity;
+    const canPurchase =
+      !isLoading &&
+      (sizeOptions.length === 0 || selectedSize) &&
+      (colorOptions.length === 0 || selectedColor);
+
+    // Tab content
+    const tabItems = [
+      {
+        title: 'Details',
+        content: (
+          <div className="prose prose-sm max-w-none">
+            <p>{product.description || 'No description available.'}</p>
+          </div>
+        ),
+      },
+      {
+        title: 'Shipping',
+        content: (
+          <div className="prose prose-sm max-w-none">
+            <p>Free UK shipping on orders over £50.</p>
+            <p>Standard delivery: 3-5 business days</p>
+            <p>Express delivery: 1-2 business days</p>
+          </div>
+        ),
+      },
+      {
+        title: 'Returns',
+        content: (
+          <div className="prose prose-sm max-w-none">
+            <p>30-day return policy for unworn items with tags attached.</p>
+            <p>Free returns within the UK.</p>
+          </div>
+        ),
+      },
+    ];
+
+    return (
+      <div ref={ref} data-testid={testID || 'ProductDetail'} className={cn('grid gap-8 lg:grid-cols-2', className)}>
+        {/* Image Gallery */}
+        <div className="space-y-4">
+          {product.images.length > 0 ? (
+            <div className="relative overflow-hidden rounded-lg bg-muted">
+              <ShadcnCarousel className="w-full">
+                <ShadcnCarouselContent>
+                  {product.images.map((image, index) => (
+                    <ShadcnCarouselItem key={index} className="basis-full">
+                      <div className="aspect-square overflow-hidden">
+                        <Image
+                          src={image}
+                          alt={`${product.name} - Image ${index + 1}`}
+                          className="h-full w-full object-cover"
+                        />
+                      </div>
+                    </ShadcnCarouselItem>
+                  ))}
+                </ShadcnCarouselContent>
+                {product.images.length > 1 && (
+                  <>
+                    <ShadcnCarouselPrevious />
+                    <ShadcnCarouselNext />
+                  </>
+                )}
+              </ShadcnCarousel>
+            </div>
+          ) : (
+            <div className="flex aspect-square items-center justify-center rounded-lg bg-muted">
+              <span className="text-muted-foreground">No images available</span>
+            </div>
+          )}
+        </div>
+
+        {/* Product Info */}
+        <div className="space-y-6">
+          {/* Header */}
+          <div>
+            <h1 className="mb-2 text-3xl font-bold text-foreground">{product.name}</h1>
+            <p className="text-2xl font-bold text-primary">{formatPrice(product.price, product.currency)}</p>
+          </div>
+
+          {/* Variants */}
+          <div className="space-y-4">
+            {sizeOptions.length > 0 && (
+              <VariantSelector
+                label="Size"
+                options={sizeOptions}
+                value={selectedSize}
+                onChange={setSelectedSize}
+                type="buttons"
+              />
+            )}
+
+            {colorOptions.length > 0 && (
+              <VariantSelector
+                label="Color"
+                options={colorOptions}
+                value={selectedColor}
+                onChange={setSelectedColor}
+                type="buttons"
+              />
+            )}
+          </div>
+
+          {/* Quantity Selector */}
+          <div className="space-y-2">
+            <label className="text-sm font-medium">Quantity</label>
+            <div className="flex items-center gap-3">
+              <ShadcnButton
+                variant="outline"
+                size="icon"
+                onClick={() => handleQuantityChange(-1)}
+                disabled={quantity <= 1 || isLoading}>
+                <Minus className="h-4 w-4" />
+              </ShadcnButton>
+              <span className="w-12 text-center text-lg font-medium">{quantity}</span>
+              <ShadcnButton variant="outline" size="icon" onClick={() => handleQuantityChange(1)} disabled={isLoading}>
+                <Plus className="h-4 w-4" />
+              </ShadcnButton>
+            </div>
+          </div>
+
+          {/* Total Price */}
+          {quantity > 1 && (
+            <div className="rounded-md bg-muted p-4">
+              <div className="flex items-center justify-between">
+                <span className="text-sm font-medium">Total:</span>
+                <span className="text-xl font-bold">{formatPrice(totalPrice, product.currency)}</span>
+              </div>
+            </div>
+          )}
+
+          {/* Purchase Button or Auth Message */}
+          {!isAuthenticated ? (
+            <div className="rounded-lg border border-primary bg-primary/10 p-6 text-center">
+              <p className="mb-4 text-lg font-medium">Sign in to purchase</p>
+              <p className="text-sm text-muted-foreground">
+                You must be logged in to make a purchase. Please sign in or create an account to continue.
+              </p>
+            </div>
+          ) : (
+            <>
+              <ShadcnButton size="lg" className="w-full" onClick={handlePurchase} disabled={!canPurchase}>
+                {isLoading ? (
+                  'Processing...'
+                ) : (
+                  <>
+                    <ShoppingCart className="mr-2 h-5 w-5" />
+                    Buy Now
+                  </>
+                )}
+              </ShadcnButton>
+
+              {/* Validation Messages */}
+              {!canPurchase && !isLoading && (
+                <p className="text-sm text-muted-foreground">
+                  {!selectedSize && sizeOptions.length > 0 && 'Please select a size. '}
+                  {!selectedColor && colorOptions.length > 0 && 'Please select a color.'}
+                </p>
+              )}
+            </>
+          )}
+
+          {/* Tabs */}
+          <div className="border-t pt-6">
+            <Tabs data={tabItems} />
+          </div>
+        </div>
+      </div>
+    );
+  },
+);
+
+ProductDetail.displayName = 'ProductDetail';
+
+export type { ProductDetailProps, ProductDetailState };

package/src/components/ProductDetail/ProductDetail.types.ts

@@ -0,0 +1,16 @@
+import { Product } from '../ProductCard/ProductCard.types';
+
+export interface ProductDetailState {
+  selectedSize?: string;
+  selectedColor?: string;
+  quantity: number;
+}
+
+export interface ProductDetailProps {
+  product: Product;
+  onPurchase: (state: ProductDetailState) => void;
+  isLoading?: boolean;
+  isAuthenticated?: boolean;
+  className?: string;
+  testID?: string;
+}

package/src/components/ProductDetail/index.ts

@@ -0,0 +1,2 @@
+export { ProductDetail } from './ProductDetail';
+export type { ProductDetailProps, ProductDetailState } from './ProductDetail.types';