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

package/src/components/ShadcnButton/ShadcnButton.stories.tsx

@@ -0,0 +1,152 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ShadcnButton } from './ShadcnButton';
+import { ChevronRight, Mail, Loader2 } from 'lucide-react';
+
+const meta: Meta<typeof ShadcnButton> = {
+  title: 'Components/ShadcnButton',
+  component: ShadcnButton,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'destructive', 'outline', 'secondary', 'ghost', 'link'],
+      description: 'Button visual variant',
+    },
+    size: {
+      control: 'select',
+      options: ['default', 'sm', 'lg', 'icon'],
+      description: 'Button size',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Disabled state',
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'Merge props with child element',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ShadcnButton>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+    variant: 'default',
+    size: 'default',
+  },
+};
+
+export const Destructive: Story = {
+  args: {
+    children: 'Delete',
+    variant: 'destructive',
+  },
+};
+
+export const Outline: Story = {
+  args: {
+    children: 'Outline',
+    variant: 'outline',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    children: 'Secondary',
+    variant: 'secondary',
+  },
+};
+
+export const Ghost: Story = {
+  args: {
+    children: 'Ghost',
+    variant: 'ghost',
+  },
+};
+
+export const Link: Story = {
+  args: {
+    children: 'Link',
+    variant: 'link',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    children: 'Small Button',
+    size: 'sm',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    children: 'Large Button',
+    size: 'lg',
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    size: 'icon',
+    children: <ChevronRight className="h-4 w-4" />,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    children: (
+      <>
+        <Mail className="mr-2 h-4 w-4" />
+        Login with Email
+      </>
+    ),
+  },
+};
+
+export const Loading: Story = {
+  args: {
+    disabled: true,
+    children: (
+      <>
+        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+        Please wait
+      </>
+    ),
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    children: 'Disabled',
+    disabled: true,
+  },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap gap-4">
+      <ShadcnButton variant="default">Default</ShadcnButton>
+      <ShadcnButton variant="destructive">Destructive</ShadcnButton>
+      <ShadcnButton variant="outline">Outline</ShadcnButton>
+      <ShadcnButton variant="secondary">Secondary</ShadcnButton>
+      <ShadcnButton variant="ghost">Ghost</ShadcnButton>
+      <ShadcnButton variant="link">Link</ShadcnButton>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <ShadcnButton size="sm">Small</ShadcnButton>
+      <ShadcnButton size="default">Default</ShadcnButton>
+      <ShadcnButton size="lg">Large</ShadcnButton>
+      <ShadcnButton size="icon">
+        <ChevronRight className="h-4 w-4" />
+      </ShadcnButton>
+    </div>
+  ),
+};

package/src/components/ShadcnCarousel/ShadcnCarousel.stories.tsx

@@ -0,0 +1,179 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  ShadcnCarousel,
+  ShadcnCarouselContent,
+  ShadcnCarouselItem,
+  ShadcnCarouselPrevious,
+  ShadcnCarouselNext,
+} from './ShadcnCarousel';
+import Image from '../Image';
+
+const meta: Meta<typeof ShadcnCarousel> = {
+  title: 'Components/ShadcnCarousel',
+  component: ShadcnCarousel,
+  tags: ['autodocs'],
+  argTypes: {
+    orientation: {
+      control: 'select',
+      options: ['horizontal', 'vertical'],
+      description: 'Carousel orientation',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ShadcnCarousel>;
+
+const sampleImages = [
+  'https://picsum.photos/800/600?random=1',
+  'https://picsum.photos/800/600?random=2',
+  'https://picsum.photos/800/600?random=3',
+  'https://picsum.photos/800/600?random=4',
+];
+
+export const Default: Story = {
+  render: () => (
+    <div className="mx-auto w-full max-w-2xl">
+      <ShadcnCarousel className="w-full">
+        <ShadcnCarouselContent>
+          {sampleImages.map((src, index) => (
+            <ShadcnCarouselItem key={index} className="basis-full">
+              <div className="aspect-video overflow-hidden rounded-lg bg-muted">
+                <Image
+                  src={src}
+                  alt={`Slide ${index + 1}`}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </ShadcnCarouselItem>
+          ))}
+        </ShadcnCarouselContent>
+        <ShadcnCarouselPrevious />
+        <ShadcnCarouselNext />
+      </ShadcnCarousel>
+    </div>
+  ),
+};
+
+export const MultipleSlides: Story = {
+  render: () => (
+    <div className="mx-auto w-full max-w-4xl">
+      <ShadcnCarousel className="w-full">
+        <ShadcnCarouselContent>
+          {sampleImages.map((src, index) => (
+            <ShadcnCarouselItem key={index} className="basis-1/2 lg:basis-1/3">
+              <div className="aspect-square overflow-hidden rounded-lg bg-muted">
+                <Image
+                  src={src}
+                  alt={`Slide ${index + 1}`}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </ShadcnCarouselItem>
+          ))}
+        </ShadcnCarouselContent>
+        <ShadcnCarouselPrevious />
+        <ShadcnCarouselNext />
+      </ShadcnCarousel>
+    </div>
+  ),
+};
+
+export const WithContent: Story = {
+  render: () => (
+    <div className="mx-auto w-full max-w-2xl">
+      <ShadcnCarousel className="w-full">
+        <ShadcnCarouselContent>
+          {[1, 2, 3, 4, 5].map((num) => (
+            <ShadcnCarouselItem key={num} className="basis-full">
+              <div className="rounded-lg border border-border bg-card p-8">
+                <h3 className="mb-4 text-2xl font-bold">Slide {num}</h3>
+                <p className="text-muted-foreground">
+                  This is content for slide {num}. You can put any content here including
+                  images, text, cards, or other components.
+                </p>
+              </div>
+            </ShadcnCarouselItem>
+          ))}
+        </ShadcnCarouselContent>
+        <ShadcnCarouselPrevious />
+        <ShadcnCarouselNext />
+      </ShadcnCarousel>
+    </div>
+  ),
+};
+
+export const ProductImages: Story = {
+  render: () => (
+    <div className="mx-auto w-full max-w-2xl">
+      <div className="rounded-lg bg-muted p-4">
+        <ShadcnCarousel className="w-full">
+          <ShadcnCarouselContent>
+            {sampleImages.map((src, index) => (
+              <ShadcnCarouselItem key={index} className="basis-full">
+                <div className="aspect-square overflow-hidden rounded-lg">
+                  <Image
+                    src={src}
+                    alt={`Product image ${index + 1}`}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              </ShadcnCarouselItem>
+            ))}
+          </ShadcnCarouselContent>
+          <ShadcnCarouselPrevious />
+          <ShadcnCarouselNext />
+        </ShadcnCarousel>
+      </div>
+    </div>
+  ),
+};
+
+export const WithoutControls: Story = {
+  render: () => (
+    <div className="mx-auto w-full max-w-2xl">
+      <ShadcnCarousel className="w-full">
+        <ShadcnCarouselContent>
+          {sampleImages.map((src, index) => (
+            <ShadcnCarouselItem key={index} className="basis-full">
+              <div className="aspect-video overflow-hidden rounded-lg bg-muted">
+                <Image
+                  src={src}
+                  alt={`Slide ${index + 1}`}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </ShadcnCarouselItem>
+          ))}
+        </ShadcnCarouselContent>
+      </ShadcnCarousel>
+      <p className="mt-4 text-center text-sm text-muted-foreground">
+        Swipe or use keyboard arrows to navigate
+      </p>
+    </div>
+  ),
+};
+
+export const ThumbnailGallery: Story = {
+  render: () => (
+    <div className="mx-auto w-full max-w-4xl">
+      <ShadcnCarousel className="w-full">
+        <ShadcnCarouselContent>
+          {sampleImages.map((src, index) => (
+            <ShadcnCarouselItem key={index} className="basis-1/4">
+              <div className="aspect-square overflow-hidden rounded-lg border-2 border-border transition-colors hover:border-primary">
+                <Image
+                  src={src}
+                  alt={`Thumbnail ${index + 1}`}
+                  className="h-full w-full object-cover"
+                />
+              </div>
+            </ShadcnCarouselItem>
+          ))}
+        </ShadcnCarouselContent>
+        <ShadcnCarouselPrevious />
+        <ShadcnCarouselNext />
+      </ShadcnCarousel>
+    </div>
+  ),
+};

package/src/components/VariantSelector/VariantSelector.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { VariantSelector } from './VariantSelector';
+import type { VariantOption } from './VariantSelector.types';
+
+const meta: Meta<typeof VariantSelector> = {
+  title: 'Components/VariantSelector',
+  component: VariantSelector,
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof VariantSelector>;
+
+const sizeOptions: VariantOption[] = [
+  { value: 'xs', label: 'XS' },
+  { value: 's', label: 'S' },
+  { value: 'm', label: 'M' },
+  { value: 'l', label: 'L' },
+  { value: 'xl', label: 'XL' },
+  { value: 'xxl', label: 'XXL', disabled: true },
+];
+
+const colorOptions: VariantOption[] = [
+  { value: '#000000', label: 'Black' },
+  { value: '#1e3a8a', label: 'Navy' },
+  { value: '#7f1d1d', label: 'Burgundy' },
+  { value: '#064e3b', label: 'Forest Green' },
+  { value: '#78716c', label: 'Stone', disabled: true },
+];
+
+export const SizeButtons: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('m');
+    return (
+      <VariantSelector
+        label="Size"
+        options={sizeOptions}
+        value={selected}
+        onChange={setSelected}
+        type="buttons"
+      />
+    );
+  },
+};
+
+export const ColorSwatches: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('#000000');
+    return (
+      <VariantSelector
+        label="Color"
+        options={colorOptions}
+        value={selected}
+        onChange={setSelected}
+        type="swatches"
+      />
+    );
+  },
+};
+
+export const SizeDropdown: Story = {
+  render: () => {
+    const [selected, setSelected] = useState('');
+    return (
+      <VariantSelector
+        label="Size"
+        options={sizeOptions}
+        value={selected}
+        onChange={setSelected}
+        type="dropdown"
+      />
+    );
+  },
+};
+
+export const Combined: Story = {
+  render: () => {
+    const [size, setSize] = useState('m');
+    const [color, setColor] = useState('#000000');
+    
+    return (
+      <div className="space-y-6">
+        <VariantSelector
+          label="Size"
+          options={sizeOptions}
+          value={size}
+          onChange={setSize}
+          type="buttons"
+        />
+        <VariantSelector
+          label="Color"
+          options={colorOptions}
+          value={color}
+          onChange={setColor}
+          type="swatches"
+        />
+        <div className="rounded-md bg-muted p-4">
+          <p className="text-sm">
+            Selected: <strong>Size {size.toUpperCase()}</strong> in{' '}
+            <strong>{colorOptions.find(c => c.value === color)?.label}</strong>
+          </p>
+        </div>
+      </div>
+    );
+  },
+};

package/src/components/VariantSelector/VariantSelector.tsx

@@ -0,0 +1,118 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '../../utils';
+import { VariantSelectorProps } from './VariantSelector.types';
+import { Check } from 'lucide-react';
+
+const variantButtonVariants = cva(
+  'inline-flex items-center justify-center rounded-md border text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      selected: {
+        true: 'border-primary bg-primary text-primary-foreground',
+        false: 'border-input bg-background hover:bg-accent hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  }
+);
+
+const swatchVariants = cva(
+  'relative h-10 w-10 rounded-full border-2 transition-all cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      selected: {
+        true: 'border-primary ring-2 ring-primary ring-offset-2',
+        false: 'border-border hover:border-primary/50',
+      },
+    },
+    defaultVariants: {
+      selected: false,
+    },
+  }
+);
+
+export const VariantSelector = React.forwardRef<HTMLDivElement, VariantSelectorProps>(
+  ({ label, options, value, onChange, type = 'buttons', className, testID }, ref) => {
+    const handleOptionClick = (optionValue: string, disabled?: boolean) => {
+      if (!disabled) {
+        onChange(optionValue);
+      }
+    };
+
+    const renderButtons = () => (
+      <div className="flex flex-wrap gap-2">
+        {options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => handleOptionClick(option.value, option.disabled)}
+            disabled={option.disabled}
+            className={cn(
+              variantButtonVariants({ selected: value === option.value }),
+              'min-w-16 px-4 py-2'
+            )}
+          >
+            {option.label}
+          </button>
+        ))}
+      </div>
+    );
+
+    const renderSwatches = () => (
+      <div className="flex flex-wrap gap-3">
+        {options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            onClick={() => handleOptionClick(option.value, option.disabled)}
+            disabled={option.disabled}
+            className={cn(swatchVariants({ selected: value === option.value }))}
+            style={{ backgroundColor: option.value }}
+            title={option.label}
+            aria-label={option.label}
+          >
+            {value === option.value && (
+              <Check className="absolute inset-0 m-auto h-5 w-5 text-white drop-shadow-lg" />
+            )}
+          </button>
+        ))}
+      </div>
+    );
+
+    const renderDropdown = () => (
+      <select
+        value={value || ''}
+        onChange={(e) => onChange(e.target.value)}
+        className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <option value="" disabled>
+          Select {label}
+        </option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value} disabled={option.disabled}>
+            {option.label}
+          </option>
+        ))}
+      </select>
+    );
+
+    return (
+      <div ref={ref} data-testid={testID || 'VariantSelector'} className={cn('space-y-2', className)}>
+        <label className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          {label}
+        </label>
+        {type === 'dropdown' && renderDropdown()}
+        {type === 'buttons' && renderButtons()}
+        {type === 'swatches' && renderSwatches()}
+      </div>
+    );
+  }
+);
+
+VariantSelector.displayName = 'VariantSelector';
+
+export { variantButtonVariants, swatchVariants };
+export type { VariantSelectorProps };

package/src/components/VariantSelector/VariantSelector.types.ts

@@ -0,0 +1,15 @@
+export interface VariantOption {
+  value: string;
+  label: string;
+  disabled?: boolean;
+}
+
+export interface VariantSelectorProps {
+  label: string;
+  options: VariantOption[];
+  value?: string;
+  onChange: (value: string) => void;
+  type?: 'dropdown' | 'buttons' | 'swatches';
+  className?: string;
+  testID?: string;
+}

package/src/components/VariantSelector/index.ts

@@ -0,0 +1,2 @@
+export { VariantSelector, variantButtonVariants, swatchVariants } from './VariantSelector';
+export type { VariantSelectorProps, VariantOption } from './VariantSelector.types';

package/src/components/index.ts

@@ -70,6 +70,15 @@ export { default as FullScreenVideoModal } from './FullScreenVideoModal';
 export { default as Cart } from './Cart';
 export { default as FullContentBackgroundImage } from './FullContentBackgroundImage';
 
+// SHADCN UI COMPONENTS
+export { ShadcnButton, buttonVariants } from './ShadcnButton';
+export { ShadcnCarousel } from './ShadcnCarousel';
+
+// PRODUCT COMPONENTS
+export { ProductCard, productCardVariants } from './ProductCard';
+export { VariantSelector, variantButtonVariants, swatchVariants } from './VariantSelector';
+export { ProductDetail } from './ProductDetail';
+
 // TYPES
 export type { Props as BlockquoteProps } from './Blockquote/Blockquote.types';
 export type { Props as ButtonProps } from './Button/Button.types';
@@ -141,3 +150,11 @@ export type { Props as FullScreenVideoModalProps } from './FullScreenVideoModal/
 export type { Props as CartProps } from './Cart/Cart.types';
 export type { Props as FullContentBackgroundImageProps } from './FullContentBackgroundImage/FullContentBackgroundImage.types';
 export type { Props as HeaderProps } from './Header/Header.types';
+
+// SHADCN UI TYPES
+export type { ShadcnButtonProps } from './ShadcnButton';
+
+// PRODUCT COMPONENT TYPES
+export type { ProductCardProps, ProductCardVariantProps, Product } from './ProductCard';
+export type { VariantSelectorProps, VariantOption } from './VariantSelector';
+export type { ProductDetailProps, ProductDetailState } from './ProductDetail';

package/src/context/Amplify/index.tsx

@@ -35,6 +35,7 @@ interface AmplifyProviderProps {
 }
 
 export const AmplifyProvider = ({ children, value }: AmplifyProviderProps) => {
+  console.log("value.config", value.config);
   useEffect(() => {
     if (value.config) {
       Amplify.configure({

package/src/forms/LoginForm/LoginForm.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect } from 'react';
+import { useEffect } from 'react';
 import cx from 'classnames';
 import { Props } from './LoginForm.types';
 import { socialLoginUrlApple, socialLoginUrlGoogle } from '../constants';
@@ -80,7 +80,6 @@ const LoginForm = ({
             <div className="flex flex-col gap-4 max-w-[250px]">
               {socialLoginUrlGoogle && (
                 <Button
-                  // onClick={() => window.location.assign(socialLoginUrlGoogle)}
                   onClick={() => authWithSocial(CognitoHostedUIIdentityProvider.Google)}
                   variant={BTN_VARIANTS.PRIMARY}
                   iconFirst
@@ -90,7 +89,6 @@ const LoginForm = ({
               )}
               {socialLoginUrlApple && (
                 <Button
-                  // onClick={() => window.location.assign(socialLoginUrlApple)}
                   onClick={() => authWithSocial(CognitoHostedUIIdentityProvider.Apple)}
                   variant={BTN_VARIANTS.PRIMARY}
                   iconFirst