Merge pull request #388 from LetsGetTechnical/develop

Release 050525

Author: shashilo

.eslintignore

@@ -32,15 +32,10 @@ app/types/giftExchangeMember.ts
 app/types/giftSuggestion.ts
 app/types/profile.ts
 app/types/tailwindcss-motion.d.ts
-components/AlertDialogue/AlertDialgoue.tsx
 components/Avatar/Avatar.tsx
-components/Avatar/AvatarFallback.tsx
 components/Avatar/AvatarBody.tsx
 components/Button/button.tsx
 components/Calendar/calendar.tsx
-components/Command/command.tsx
-components/FeedbackView/FeedbackView.tsx
-components/Form/form.tsx
 components/GiftDetailsView/GiftDetailsView.tsx
 components/GiftExchangeHeader/GiftExchangeHeader.tsx
 components/GiftSuggestionCard/GiftSuggestionCard.tsx
@@ -55,22 +50,15 @@ components/Label/label.tsx
 components/LoadingCard/LoadingCard.tsx
 components/LoadingSkeleton/LoadingSkeleton.tsx
 components/LoadingSpinner/LoadingSpinner.tsx
-components/LoginButton/LoginButton.tsx
 components/MembersList/MembersList.tsx
 components/MultiSelect/multi-select-input.tsx
-components/NavLogo/NavLogo.tsx
 components/Popover/popover.tsx
 components/ProfileCard/ProfileCard.tsx
 components/Progress/progress.tsx
-components/RadioGroup/radio-group.tsx
 components/Select/select.tsx
 components/Skeleton/Skeleton.tsx
-components/Slider/slider.tsx
 components/SnowOverlayToggle/SnowOverlayToggle.tsx
 components/SnowOverlayWrapper/react-snow-overlay.d.ts
-components/SnowOverlayWrapper/SnowOverlayWrapper.tsx
-components/TextArea/textarea.tsx
-components/WarningModal/WarningModal.tsx
 lib/drawGiftExchange.ts
 lib/generateAndStoreSuggestion.ts
 lib/generateAndUpdateNewGiftSuggestion.ts

.eslintrc.json

@@ -120,12 +120,7 @@
       }
     ],
     "no-extra-semi": "off",
-    "no-unused-vars": [
-      "error",
-      {
-        "args": "all"
-      }
-    ],
+    "no-unused-vars": "off",
     "no-unused-expressions": "off",
     "semi": "off",
     "import/extensions": 0,
@@ -184,7 +179,8 @@
     "jsdoc/require-property-type": 0,
     "jsdoc/no-types": 0,
     "jsdoc/valid-types": 2,
-    "@typescript-eslint/explicit-function-return-type": "error"
+    "@typescript-eslint/explicit-function-return-type": "error",
+    "@typescript-eslint/no-unused-vars": "error"
   },
   "overrides": [
     {

app/create-group-page/page.tsx

@@ -35,7 +35,7 @@ import {
 import { Textarea } from '@/components/TextArea/textarea';
 import { ImageSelector } from '@/components/ImageSelector/ImageSelector';
 import { useRouter } from 'next/navigation';
-import Link from 'next/link';
+import LinkCustom from '@/components/LinkCustom/LinkCustom';
 
 const priceRanges = [
   { label: '$10 - $20', value: '10-20' },
@@ -105,15 +105,12 @@ export default function CreateGroupPage() {
   }
   const giftDrawingDate = form.watch('drawing_date');
   return (
-    <div className=" flex justify-center align-center flex-col px-4 md:px-16 lg:px-32 xl:px-52 pt-12">
+    <div className="create-group-page flex justify-center align-center flex-col px-4 md:px-16 lg:px-32 xl:px-52 pt-12">
       <div className="flex flex-row">
-        <Link
-          href={'/dashboard'}
-          className="flex items-center gap-1 text-sm text-primary-foreground m-5"
-        >
+        <LinkCustom href="/dashboard">
           <ChevronLeft size={16} strokeWidth={2.25} />
-          <span>Back to Dashboard</span>
-        </Link>
+          Back to Dashboard
+        </LinkCustom>
       </div>
       <div className="flex items-center justify-center h-full">
         <div className="bg-white w-full xl:w-1/2 mb-5 flex justify-center align-center rounded flex-col ">

app/gift-exchanges/[id]/edit/page.tsx

@@ -39,6 +39,7 @@ import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import { createClient } from '@/lib/supabase/client';
 import { GiftExchange } from '@/app/types/giftExchange';
+import LinkCustom from '@/components/LinkCustom/LinkCustom';
 
 const priceRanges = [
   { label: '$10 - $20', value: '10-20' },
@@ -174,15 +175,12 @@ export default function CreateGroupPage() {
 
   const giftDrawingDate = form.watch('drawing_date');
   return (
-    <div className=" flex justify-center align-center flex-col px-4 md:px-16 lg:px-32 xl:px-52 pt-12">
+    <div className="edit-group-page flex justify-center align-center flex-col px-4 md:px-16 lg:px-32 xl:px-52 pt-12">
       <div className="flex flex-row">
-        <Link
-          href={'/dashboard'}
-          className="flex items-center gap-1 text-sm text-primary-foreground m-5"
-        >
+        <LinkCustom href="/dashboard">
           <ChevronLeft size={16} strokeWidth={2.25} />
           <span>Back to Dashboard</span>
-        </Link>
+        </LinkCustom>
       </div>
       <div className="flex items-center justify-center h-full">
         <div className="bg-white w-full xl:w-1/2 mb-5 flex justify-center align-center rounded flex-col ">

app/onboarding/page.tsx

@@ -247,7 +247,7 @@ function Onboarding() {
         if (editing) {
           router.push('/profile');
         } else {
-          router.push('/dashboard');
+          window.location.href = '/dashboard';
         }
       } catch (error) {
         console.error('Error updating profile: ', error);

app/profile/page.tsx

@@ -3,6 +3,8 @@ import ProfileCard from '@/components/ProfileCard/ProfileCard';
 import { useEffect, useState } from 'react';
 import { Profile } from '@/app/types/profile';
 import LoadingCard from '@/components/LoadingCard/LoadingCard';
+import { ChevronLeft } from 'lucide-react';
+import LinkCustom from '@/components/LinkCustom/LinkCustom';
 
 export default function PersonalProfile() {
   const [profile, setProfile] = useState<Profile | null>(null);
@@ -35,7 +37,13 @@ export default function PersonalProfile() {
   }
 
   return (
-    <section className="h-svh flex justify-center items-start py-16">
+    <section className="profile-page h-svh flex flex-col items-center py-16 px-4 md:px-16 lg:px-32 xl:px-52">
+      <div className="flex flex-row w-full">
+        <LinkCustom href="/dashboard">
+          <ChevronLeft size={16} strokeWidth={2.25} />
+          Back to Dashboard
+        </LinkCustom>
+      </div>
       <div className="max-w-5xl">
         {profile ? (
           <ProfileCard profile={profile} showEditButton />

components/AlertDialogue/AlertDialgoue.tsx

@@ -1,6 +1,9 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
 'use client';
 
-import * as React from 'react';
+import { HTMLAttributes, JSX, forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
 import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 
 import { cn } from '@/lib/utils';
@@ -12,9 +15,15 @@ const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
 const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
-const AlertDialogOverlay = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
+/**
+ * A custom overlay for use in the AlertDialog Component.
+ * @param {object} props - Props for the component.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogOverlay element.
+ */
+const AlertDialogOverlay = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Overlay>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
@@ -27,9 +36,15 @@ const AlertDialogOverlay = React.forwardRef<
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
-const AlertDialogContent = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
+/**
+ * Contains content to be rendered when the AlertDialog component is open.
+ * @param {object} props - Props for the component.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogContent element.
+ */
+const AlertDialogContent = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 >(({ className, ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
@@ -45,10 +60,16 @@ const AlertDialogContent = React.forwardRef<
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
+/**
+ * A custom header for use in the AlertDialog Component.
+ * @param {HTMLAttributes<HTMLDivElement>} props - Props for function.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogHeader element.
+ */
 const AlertDialogHeader = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: HTMLAttributes<HTMLDivElement>): JSX.Element => (
   <div
     className={cn(
       'flex flex-col space-y-2 text-center sm:text-left',
@@ -59,10 +80,16 @@ const AlertDialogHeader = ({
 );
 AlertDialogHeader.displayName = 'AlertDialogHeader';
 
+/**
+ * A custom footer for use in the AlertDialogFooter Component.
+ * @param {HTMLAttributes<HTMLDivElement>} props - Props for function.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogFooter element.
+ */
 const AlertDialogFooter = ({
   className,
   ...props
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: HTMLAttributes<HTMLDivElement>): JSX.Element => (
   <div
     className={cn(
       'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
@@ -73,9 +100,15 @@ const AlertDialogFooter = ({
 );
 AlertDialogFooter.displayName = 'AlertDialogFooter';
 
-const AlertDialogTitle = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+/**
+ * An accessible title announced when the AlertDialog component is opened.
+ * @param {object} props - Props for the component.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogTitle element.
+ */
+const AlertDialogTitle = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Title>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
     ref={ref}
@@ -85,9 +118,15 @@ const AlertDialogTitle = React.forwardRef<
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
-const AlertDialogDescription = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
+/**
+ * An accessible description announced when the AlertDialog component is opened.
+ * @param {object} props - Props for the component.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogDescription element.
+ */
+const AlertDialogDescription = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Description>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Description
     ref={ref}
@@ -98,9 +137,15 @@ const AlertDialogDescription = React.forwardRef<
 AlertDialogDescription.displayName =
   AlertDialogPrimitive.Description.displayName;
 
-const AlertDialogAction = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
+/**
+ * A button that closes the AlertDialog component. Should be distinguished visually from the Cancel button.
+ * @param {object} props - Props for the component.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogAction element.
+ */  
+const AlertDialogAction = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Action>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Action
     ref={ref}
@@ -110,9 +155,15 @@ const AlertDialogAction = React.forwardRef<
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
-const AlertDialogCancel = React.forwardRef<
-  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
+/**
+ * A button that closes the AlertDialog component. Should be distinguished visually from the Action button.
+ * @param {object} props - Props for the component.
+ * @param {string} props.className - Additional CSS classes for custom styling.
+ * @returns {JSX.Element} - The rendered AlertDialogCancel element.
+ */ 
+const AlertDialogCancel = forwardRef<
+  ElementRef<typeof AlertDialogPrimitive.Cancel>,
+  ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Cancel
     ref={ref}

components/Avatar/Avatar.tsx

@@ -1,8 +1,18 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
+import { JSX } from 'react';
+
 import { AvatarImage } from './AvatarImage';
 import { AvatarFallback } from './AvatarFallback';
 import { AvatarBody } from './AvatarBody';
 
-const Avatar = ({ userAvatar }: { userAvatar: string | undefined }) => {
+/**
+ * An Avatar component that displays a provided image URL or a default image if not provided.
+ * @param {string} userAvatar - URL string for the avatar image. If undefined, the AvatarFallback img will be used.
+ * @returns {JSX.Element} - The rendered Avatar element.
+ */
+const Avatar = ({ userAvatar }: { userAvatar: string | undefined }) : JSX.Element => {
   return (
     <AvatarBody>
       <AvatarImage src={userAvatar} alt="" />

components/Avatar/AvatarBody.tsx

@@ -1,12 +1,21 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
 'use client';
 
-import React from 'react';
+import { JSX, ElementRef, ComponentPropsWithoutRef, forwardRef } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cn } from '@/lib/utils';
 
-const AvatarBody = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+/**
+ * The AvatarBody component.
+ * @param {object} props - The props passed.
+ * @param {string} props.className - Styles for component.
+ * @returns {JSX.Element} - The AvatarBody component.
+ */
+const AvatarBody = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Root>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}

components/Avatar/AvatarFallback.tsx

@@ -1,12 +1,21 @@
+// Copyright (c) Gridiron Survivor.
+// Licensed under the MIT License.
+
 'use client';
 
-import React from 'react';
+import { JSX, ElementRef, ComponentPropsWithoutRef, forwardRef } from 'react';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { cn } from '@/lib/utils';
 
-const AvatarFallback = React.forwardRef<
-  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+/**
+ * The AvatarFallback component with a fallback image.
+ * @param {object} props - The props passed.
+ * @param {string} props.className - Styles for component.
+ * @returns {JSX.Element} - The AvatarFallback component.
+ */
+const AvatarFallback = forwardRef<
+  ElementRef<typeof AvatarPrimitive.Fallback>,
+  ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
 >(({ className, ...props }, ref) => (
   <AvatarPrimitive.Fallback
     ref={ref}