@4alldigital/foundation-ui--core 3.6.4 → 3.7.0

package/src/components/ButtonDeprecated/Button.types.ts

@@ -0,0 +1,43 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+export enum BTN_TYPES {
+  SUBMIT = 'submit',
+  RESET = 'reset',
+  BUTTON = 'button',
+}
+
+export enum BTN_VARIANTS {
+  PRIMARY = 'primary',
+  SECONDARY = 'secondary',
+  TERTIARY = 'tertiary',
+  LINK = 'link',
+}
+
+export enum BTN_SIZES {
+  SMALL = 'small',
+  MEDIUM = 'medium',
+  LARGE = 'large',
+}
+export interface Props {
+  variant?: BTN_VARIANTS;
+  size?: BTN_SIZES;
+  uppercase?: boolean;
+  children?: ReactNode;
+  type?: BTN_TYPES;
+  disabled?: boolean;
+  ariaLabel?: string;
+  onClick?: MouseEventHandler<HTMLButtonElement>;
+  icon?: string;
+  external?: boolean;
+  iconFirst?: boolean;
+  raised?: boolean;
+  outline?: boolean;
+  wide?: boolean;
+  rounded?: boolean;
+  id?: string;
+  testID?: string;
+  className?: string;
+  isLoading?: boolean;
+  iconOnly?: boolean;
+  offsetFont?: boolean;
+}

package/src/components/ButtonDeprecated/index.ts

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

package/src/components/ProductCard/ProductCard.tsx

@@ -3,7 +3,7 @@ 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';
+import { Button } from '../Button';
 
 const productCardVariants = cva(
   'group relative flex flex-col overflow-hidden rounded-lg border border-border bg-card transition-all hover:shadow-lg',
@@ -89,14 +89,14 @@ const ProductCard = React.forwardRef<HTMLDivElement, ProductCardVariantProps>(
             <span className="text-xl font-bold text-foreground">
               {formatPrice(product.price, product.currency)}
             </span>
-            <ShadcnButton
-              variant="outline"
+            <Button
+              // variant="outline"
               size="sm"
               onClick={handleClick}
-              className="transition-colors hover:bg-primary hover:text-primary-foreground"
+              className="transition-colors"
             >
               View Details
-            </ShadcnButton>
+            </Button>
           </div>
         </div>
       </div>

package/src/components/ProductDetail/ProductDetail.tsx

@@ -4,7 +4,7 @@ import { cn } from '../../utils';
 import { ProductDetailProps, ProductDetailState } from './ProductDetail.types';
 import { VariantSelector } from '../VariantSelector';
 import type { VariantOption } from '../VariantSelector';
-import { ShadcnButton } from '../ShadcnButton';
+import { Button } from '../Button';
 import {
   ShadcnCarousel,
   ShadcnCarouselContent,
@@ -186,17 +186,17 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
           <div className="space-y-2">
             <label className="text-sm font-medium">Quantity</label>
             <div className="flex items-center gap-3">
-              <ShadcnButton
+              <Button
                 variant="outline"
                 size="icon"
                 onClick={() => handleQuantityChange(-1)}
                 disabled={quantity <= 1 || isLoading}>
                 <Minus className="h-4 w-4" />
-              </ShadcnButton>
+              </Button>
               <span className="w-12 text-center text-lg font-medium">{quantity}</span>
-              <ShadcnButton variant="outline" size="icon" onClick={() => handleQuantityChange(1)} disabled={isLoading}>
+              <Button variant="outline" size="icon" onClick={() => handleQuantityChange(1)} disabled={isLoading}>
                 <Plus className="h-4 w-4" />
-              </ShadcnButton>
+              </Button>
             </div>
           </div>
 
@@ -232,7 +232,7 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
             </div>
           ) : (
             <>
-              <ShadcnButton size="lg" className="w-full" onClick={handlePurchase} disabled={!canPurchase}>
+              <Button size="lg" className="w-full" onClick={handlePurchase} disabled={!canPurchase}>
                 {isLoading ? (
                   'Processing...'
                 ) : (
@@ -241,7 +241,7 @@ export const ProductDetail = React.forwardRef<HTMLDivElement, ProductDetailProps
                     Buy Now
                   </>
                 )}
-              </ShadcnButton>
+              </Button>
 
               {/* Validation Messages */}
               {!canPurchase && !isLoading && (

package/src/components/ShadcnCarousel/ShadcnCarousel.tsx

@@ -5,7 +5,7 @@ import useEmblaCarousel, {
 import { ArrowLeft, ArrowRight } from "lucide-react"
 
 import { cn } from "../../utils"
-import { ShadcnButton } from "../ShadcnButton"
+import { Button } from "../Button"
 
 type CarouselApi = UseEmblaCarouselType[1]
 type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
@@ -194,12 +194,12 @@ ShadcnCarouselItem.displayName = "ShadcnCarouselItem"
 
 const ShadcnCarouselPrevious = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<typeof ShadcnButton>
+  React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
-    <ShadcnButton
+    <Button
       ref={ref}
       variant={variant}
       size={size}
@@ -216,19 +216,19 @@ const ShadcnCarouselPrevious = React.forwardRef<
     >
       <ArrowLeft className="h-4 w-4" />
       <span className="sr-only">Previous slide</span>
-    </ShadcnButton>
+    </Button>
   )
 })
 ShadcnCarouselPrevious.displayName = "ShadcnCarouselPrevious"
 
 const ShadcnCarouselNext = React.forwardRef<
   HTMLButtonElement,
-  React.ComponentProps<typeof ShadcnButton>
+  React.ComponentProps<typeof Button>
 >(({ className, variant = "outline", size = "icon", ...props }, ref) => {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
-    <ShadcnButton
+    <Button
       ref={ref}
       variant={variant}
       size={size}
@@ -245,7 +245,7 @@ const ShadcnCarouselNext = React.forwardRef<
     >
       <ArrowRight className="h-4 w-4" />
       <span className="sr-only">Next slide</span>
-    </ShadcnButton>
+    </Button>
   )
 })
 ShadcnCarouselNext.displayName = "ShadcnCarouselNext"

package/src/components/index.ts

@@ -1,7 +1,8 @@
 // ATOMS
 export { default as AnimationCounter } from './AnimationCounter';
 export { default as Blockquote } from './Blockquote';
-export { default as Button } from './Button';
+export { Button, buttonVariants } from './Button';
+export { default as ButtonDeprecated } from './ButtonDeprecated';
 export { default as Checkbox } from './Checkbox';
 export { default as Chip } from './Chip';
 export { default as Calendar } from './Calendar';
@@ -72,7 +73,6 @@ 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
@@ -82,8 +82,9 @@ export { ProductDetail } from './ProductDetail';
 
 // TYPES
 export type { Props as BlockquoteProps } from './Blockquote/Blockquote.types';
-export type { Props as ButtonProps } from './Button/Button.types';
+export type { ButtonProps } from './Button/Button.types';
 export { BTN_TYPES, BTN_VARIANTS, BTN_SIZES } from './Button/Button.types';
+export type { Props as ButtonDeprecatedProps } from './ButtonDeprecated/Button.types';
 export type { Props as CopyProps } from './Copy/Copy.types';
 export { COPY_ALIGN, COPY_TRANSFORM, COPY_CONTEXTUAL, COPY_SIZE, COPY_TAG } from './Copy/Copy.types';
 export type { Props as HeadingProps } from './Heading/Heading.types';
@@ -153,7 +154,6 @@ export type { Props as FullContentBackgroundImageProps } from './FullContentBack
 export type { Props as HeaderProps } from './Header/Header.types';
 
 // SHADCN UI TYPES
-export type { ShadcnButtonProps } from './ShadcnButton';
 
 // PRODUCT COMPONENT TYPES
 export type { AddressFormProps, ShippingAddress } from './AddressForm';

package/src/templates/NotFoundScreen/NotFoundScreen.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Screen from '../../components/Screen';
 import { Copy, DisplayHeading, Heading, HEADING_TAGS, Icon, List, ListItem, ListTag } from '../../components';
 import { Props } from './NotFoundScreen.types';

package/src/templates/ProductListScreen/ProductListScreen.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Screen from '../../components/Screen';
 import DisplayHeading from '../../components/DisplayHeading';
 import { ProductCard } from '../../components/ProductCard';

package/src/templates/PurchaseConfirmationScreen/PurchaseConfirmationScreen.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Screen from '../../components/Screen';
 import { Props } from './PurchaseConfirmationScreen.types';
-import { ShadcnButton } from '../../components/ShadcnButton';
+import { Button } from '../../components/Button';
 import { CheckCircle } from 'lucide-react';
 
 const PurchaseConfirmationScreen = ({
@@ -100,35 +100,35 @@ const PurchaseConfirmationScreen = ({
             {/* Action Buttons */}
             <div className="flex flex-col gap-4 sm:flex-row sm:justify-center">
               {onContinueShopping && (
-                <ShadcnButton
+                <Button
                   size="lg"
                   onClick={onContinueShopping}
                   className="w-full sm:w-auto"
                 >
                   Continue Shopping
-                </ShadcnButton>
+                </Button>
               )}
               
               {onViewOrders && (
-                <ShadcnButton
+                <Button
                   size="lg"
                   variant="outline"
                   onClick={onViewOrders}
                   className="w-full sm:w-auto"
                 >
                   View Orders
-                </ShadcnButton>
+                </Button>
               )}
               
               {onGoToDashboard && (
-                <ShadcnButton
+                <Button
                   size="lg"
                   variant="outline"
                   onClick={onGoToDashboard}
                   className="w-full sm:w-auto"
                 >
                   Go to Dashboard
-                </ShadcnButton>
+                </Button>
               )}
             </div>
           </div>

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

@@ -1,152 +0,0 @@
-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/ShadcnButton/ShadcnButton.tsx

@@ -1,57 +0,0 @@
-import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { cn } from "../../utils"
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-white/20 text-primary-foreground shadow hover:bg-primary/90 border-2 border-red",
-        destructive:
-          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline:
-          "border border-input bg-background shadow-sm hover:bg-accent hover:bg-primary",
-        secondary:
-          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-transparent hover:bg-transparent",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
-
-export interface ShadcnButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {
-  asChild?: boolean
-}
-
-const ShadcnButton = React.forwardRef<HTMLButtonElement, ShadcnButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button"
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    )
-  }
-)
-ShadcnButton.displayName = "ShadcnButton"
-
-export { ShadcnButton, buttonVariants }

package/src/components/ShadcnButton/index.ts

@@ -1,2 +0,0 @@
-export { ShadcnButton, buttonVariants } from './ShadcnButton';
-export type { ShadcnButtonProps } from './ShadcnButton';