Feat #588: Toast Component (#598)

Author: lillian-nguyen

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/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()
+    })
+})

components/ToastAction/ToastAction.tsx

@@ -0,0 +1,26 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import React from 'react';
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cn } from "@/lib/utils"
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    data-testid="toastAction"
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export { ToastAction, type ToastActionElement }

components/ToastClose/ToastClose.test.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { ToastClose } from './ToastClose';
+
+describe('ToastClose', () => {
+  it('renders a button with a close icon', () => {
+    render(<ToastClose />);
+
+    const toastClose = screen.getByLabelText('Close');
+    expect(toastClose).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    const handleClick = jest.fn();
+    render(<ToastClose onClick={handleClick} />);
+    fireEvent.click(screen.getByTestId('toastClose'));
+    expect(handleClick).toHaveBeenCalled();
+  });
+
+  it('renders a light styling for a success group', () => {
+    render(
+      <div className="group success">
+        <ToastClose />
+      </div>,
+    );
+
+    const toastClose = screen.queryByLabelText('Close');
+    expect(toastClose).toHaveClass('group-[.success]:text-white/70');
+  });
+
+  it('renders a dark styling for a warning group', () => {
+    render(
+      <div className="group warning">
+        <ToastClose />
+      </div>,
+    );
+
+    const toastClose = screen.queryByLabelText('Close');
+    expect(toastClose).toHaveClass('group-[.warning]:text-gray-800/70');
+  });
+
+  it('renders destructive styling for a destructive group', () => {
+    render(
+      <div className="group destructive">
+        <ToastClose />
+      </div>,
+    );
+
+    const toastClose = screen.queryByLabelText('Close');
+    expect(toastClose).toHaveClass('group-[.destructive]:text-red-300');
+  });
+});