Merge remote-tracking branch 'origin/develop' into alex/626-add-google-analytics

Author: alexappleget

.eslintignore

@@ -35,7 +35,6 @@ components/Button/button.tsx
 components/Calendar/calendar.tsx
 components/GiftDetailsView/GiftDetailsView.tsx
 components/GiftSuggestionCard/GiftSuggestionCard.tsx
-components/GroupCard/GroupCard.tsx
 components/ImageSelector/ImageSelector.tsx
 components/Input/input.tsx
 components/InviteCard/InviteCard.tsx

app/globals.css

@@ -19,6 +19,10 @@
     --accent-foreground: 240 5.9% 10%;
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
+    --success: 167 50.9% 10.4%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 73.1% 56.3%;
+    --warning-foreground: 0 0% 0%;
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
     --ring: 240 10% 3.9%;

components/GroupCard/GroupCard.tsx

@@ -1,13 +1,23 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { JSX } from 'react';
 import { GiftExchangeWithMemberCount } from '@/app/types/giftExchange';
 import { formatDate } from '@/lib/utils';
 import { ChevronRight, Users } from 'lucide-react';
 import Link from 'next/link';
+import Image from 'next/image';
 
 type GroupCardProps = {
   giftExchange: GiftExchangeWithMemberCount;
 };
 
-export const GroupCardSkeleton = () => {
+/**
+ * GroupCardSkeleton component.
+ * Displays a loading skeleton placeholder for a GroupCard.
+ * @returns {JSX.Element} Loader skeleton element.
+ */
+export const GroupCardSkeleton = (): JSX.Element => {
   return (
     <div className="h-28 flex items-center p-4 rounded-xl bg-groupCardGreen animate-pulse">
       <div className="h-16 w-16 lg:h-20 lg:w-20 rounded-xl bg-gray-600" />
@@ -26,14 +36,22 @@ export const GroupCardSkeleton = () => {
   );
 };
 
-const GroupCard = ({ giftExchange }: GroupCardProps) => {
+/**
+ * GroupCard component. Renders a styled card that displays
+ * various information about a gift exchange group.
+ * @param {GiftExchangeWithMemberCount} giftExchange - A unique gift exchange.
+ * @returns {JSX.Element} A group card element.
+ */
+const GroupCard = ({ giftExchange }: GroupCardProps): JSX.Element => {
   return (
     <Link href={`/gift-exchanges/${giftExchange.gift_exchange_id}`}>
       <div className="h-28 flex items-center p-4 rounded-xl bg-groupCardGreen">
-        <img
+        <Image
           className="h-16 w-16 lg:h-20 lg:w-20 rounded-xl"
           src={giftExchange.group_image}
-          alt={`${giftExchange.name} image`}
+          height={80}
+          width={80}
+          alt=""
         />
         <div className="flex flex-col flex-grow justify-center h-full ml-4 gap-2">
           <h2 className="font-semibold text-white text-base lg:text-lg">

components/LoadingSpinner/LoadingSpinner.test.tsx

@@ -0,0 +1,19 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { render, screen } from '@testing-library/react';
+import { LoadingSpinner } from './LoadingSpinner';
+
+describe('LoadingSpinner', () => {
+  it('renders without additional classes', () => {
+    render(<LoadingSpinner />);
+    expect(screen.getByTestId('loading-spinner')).toBeInTheDocument();
+  });
+
+  it('renders with additional classes when className is passed', () => {
+    render(<LoadingSpinner className="extra-classname" />);
+    expect(screen.getByTestId('loading-spinner')).toHaveClass(
+      'extra-classname',
+    );
+  });
+});

components/Toast/Toast.enum.ts

@@ -0,0 +1,9 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+export enum ToastVariants {
+  Default = 'default',
+  Error = 'error',
+  Success = 'success',
+  Warning = 'warning',
+}

components/Toast/Toast.stories.tsx

@@ -0,0 +1,155 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toast } from './Toast';
+import { ToastProvider } from '../ToastProvider/ToastProvider';
+import { ToastViewport } from '../ToastViewport/ToastViewport';
+import { ToastTitle } from '../ToastTitle/ToastTitle';
+import { ToastDescription } from '../ToastDescription/ToastDescription';
+import { ToastAction } from '../ToastAction/ToastAction';
+import { ToastClose } from '../ToastClose/ToastClose';
+import { ToastVariants } from './Toast.enum';
+import type { JSX } from 'react';
+
+const meta = {
+  title: 'Components/Toast',
+  component: Toast,
+  decorators: [
+    (Story): JSX.Element => (
+      <div className="relative h-[200px] w-[500px] rounded-md p-4">
+        <ToastProvider>
+          <Story />
+          <ToastViewport className="absolute inset-0 flex flex-col items-center justify-center w-full" />
+        </ToastProvider>
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component: `A customizable Toast Component.`,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'The style of the toast',
+      control: { type: 'select' },
+      options: [
+        'default',
+        'error',
+        'warning',
+        'success',
+      ],
+    },
+    duration: {
+      description: 'Auto-dismiss delay in milliseconds',
+      control: 'number',
+      defaultValue: 5000,
+    },
+    open: {
+      description: 'Determines whether toast is visible',
+      control: { type: 'boolean' },
+    },
+    forceMount: {
+      description: 'Renders as child component if true',
+      control: { type: 'boolean' },
+    },
+    className: {
+      description: 'Classes for additional styling',
+      type: 'string',
+    },
+    children: {
+      control: 'text',
+      description: 'Toast content',
+      type: 'string',
+    },
+  },
+} satisfies Meta<typeof Toast>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: ToastVariants.Default,
+    duration: 5000,
+    defaultOpen: true,
+    children: (
+      <>
+        <div className="flex-grow">
+          <ToastTitle>Default Toast</ToastTitle>
+          <ToastDescription>This is a notification.</ToastDescription>
+        </div>
+        <ToastClose />
+      </>
+    ),
+  },
+};
+
+export const Error: Story = {
+  args: {
+    variant: ToastVariants.Error,
+    defaultOpen: true,
+    children: (
+      <>
+        <div className="flex-grow">
+          <ToastTitle>Error Toast</ToastTitle>
+          <ToastDescription>Something went wrong.</ToastDescription>
+          <ToastClose />
+        </div>
+      </>
+    ),
+  },
+};
+
+export const Warning: Story = {
+  args: {
+    variant: ToastVariants.Warning,
+    defaultOpen: true,
+    children: (
+      <>
+        <div className="flex-grow">
+          <ToastTitle>Warning Toast</ToastTitle>
+          <ToastDescription>Something might need attention.</ToastDescription>
+          <ToastClose />
+        </div>
+      </>
+    ),
+  },
+};
+
+export const Success: Story = {
+  args: {
+    variant: ToastVariants.Success,
+    defaultOpen: true,
+    children: (
+      <>
+        <div className="flex-grow">
+          <ToastTitle>Success Toast</ToastTitle>
+          <ToastDescription>Your action was successful.</ToastDescription>
+          <ToastClose />
+        </div>
+      </>
+    ),
+  },
+};
+
+export const WithActionAndClose: Story = {
+  args: {
+    variant: ToastVariants.Default,
+    defaultOpen: true,
+    children: (
+      <>
+        <div className="flex-grow">
+          <ToastTitle>Action & Close</ToastTitle>
+          <ToastDescription>An action and close button.</ToastDescription>
+        </div>
+        <ToastAction altText="action">Action</ToastAction>
+        <ToastClose />
+      </>
+    ),
+  },
+};

components/Toast/Toast.test.tsx

@@ -0,0 +1,61 @@
+import { Toast, toastVariantStyles } from './Toast';
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ToastProvider } from '../ToastProvider/ToastProvider';
+import { ToastViewport } from '../ToastViewport/ToastViewport';
+import { ToastVariants } from './Toast.enum';
+
+const renderToast = (props = {}) =>
+  render(
+    <ToastProvider>
+      <Toast {...props} />
+      <ToastViewport />
+    </ToastProvider>
+  )
+
+const testVariants = Object.entries(toastVariantStyles).map(([variantValue, classString]) => {
+    
+    const propVariant = variantValue === ToastVariants.Default ? undefined : variantValue;
+
+    const classesToAssert = classString.split(' ').filter(c => c);
+
+    return {
+      name: variantValue,
+      variant: propVariant,
+      classes: classesToAssert,
+    };
+});
+
+describe('Toast', () => {
+
+  it('does not render when open is false', () =>{
+    renderToast({open: false})
+
+    const toast = screen.queryByTestId('toast');
+    expect(toast).not.toBeInTheDocument()
+  })  
+  it('applies default variant styling', () => {
+    renderToast()
+
+    const toast = screen.getByTestId('toast');
+    expect(toast).toHaveClass('bg-background', 'text-foreground')
+  });
+
+  it.each(testVariants)('applies $name variant styles', ({ variant, classes }) => {
+    renderToast({ variant });
+    const toast = screen.getByTestId('toast');
+    classes.forEach((classStyle) => expect(toast).toHaveClass(classStyle))
+  })
+
+  it('renders the children content within Toast', () => {
+    render(
+      <ToastProvider>
+        <Toast>children</Toast>
+        <ToastViewport/>
+      </ToastProvider>
+    )
+
+    const toast = screen.getByTestId('toast');
+    expect(toast).toHaveTextContent('children');
+  })
+});

components/Toast/Toast.tsx

@@ -0,0 +1,52 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+'use client';
+
+import * as React from 'react';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { cn } from '@/lib/utils';
+import { ToastVariants } from './Toast.enum';
+
+export const toastVariantStyles = {
+  [ToastVariants.Default]: 'border bg-background text-foreground',
+  [ToastVariants.Error]:
+    'destructive group border-destructive bg-destructive text-destructive-foreground',
+  [ToastVariants.Warning]:
+    'warning group border-warning bg-warning text-warning-foreground',
+  [ToastVariants.Success]:
+    'success group border-success bg-success text-success-foreground',
+} as const;
+
+export const toastVariants = cva(
+  'group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full',
+  {
+    variants: {
+      variant: toastVariantStyles,
+    },
+    defaultVariants: {
+      variant: ToastVariants.Default,
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      data-testid="toast"
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+export { type ToastProps, Toast };

components/ToastAction/ToastAction.test.tsx

@@ -0,0 +1,19 @@
+import { ToastAction } from "./ToastAction";
+import { render, screen, fireEvent } from '@testing-library/react';
+
+describe('ToastAction', () => {
+    it('renders the children content within ToastAction', () => {
+        render(<ToastAction altText="undo">Undo</ToastAction>)
+
+        const toastAction = screen.getByTestId('toastAction');
+        expect(toastAction).toHaveTextContent('Undo');
+    });
+
+    it('calls onClick when clicked', () => {
+        const handleClick = jest.fn();
+        render(<ToastAction altText="undo" onClick={handleClick}>Undo</ToastAction>)
+
+        fireEvent.click(screen.getByText('Undo'));
+        expect(handleClick).toHaveBeenCalled()
+    })
+})