Refactor formatting and update docs

src/components/Accordion.tsx

@@ -1,21 +1,47 @@
 import React, { useState } from 'react';
+
 import { Button } from '@components';
+
 import { LuPlus, LuMinus } from 'react-icons/lu';
 
+/*
+ *
+ * @description Item interface
+ * @props {string} question, {string} answer
+ * 
+ */
 interface Item {
     question: string;
     answer: string;
 }
 
+/*
+ *
+ * @description Section interface
+ * @props {string} section, {Item[]} content
+ * 
+ */
 interface Section {
     section: string;
     content: Item[];
 }
 
+/*
+ *
+ * @description Accordion interface
+ * @props {Section[]} sections
+ * 
+ */
 interface AccordionProps {
     sections: Section[];
 }
 
+/*
+ *
+ * @description Accordion component
+ * @props {Section[]} sections
+ * 
+ */
 const Accordion: React.FC<AccordionProps> = ({ sections }) => {
     const [activeIndex, setActiveIndex] = useState<{
         section: number;
@@ -75,10 +101,7 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
 
     return (
         <div className="py-20">
-            {/* !remember to add back the md:grid-cols-2 here */}
             <div className="mb-12 grid gap-[20px] md:grid-cols-2">
-                {/* for each section */}
-                {/* render the title and the content */}
                 {sections.map((section, sectionIndex) => (
                     <div
                         key={sectionIndex}
@@ -88,13 +111,11 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
                             {section.section}
                         </h3>
 
-                        {/* contents of accordion item */}
                         {section.content.map((item, questionIndex) => (
                             <div
                                 key={questionIndex}
                                 className="accordion-panel w-full"
                             >
-                                {/* the accordion question */}
                                 <div
                                     className={`accordion-panel__question flex cursor-pointer select-none items-center justify-between gap-2 rounded-lg border border-black/20 bg-white p-4 transition-all hover:bg-gray-100 motion-reduce:transition-none ${
                                         activeIndex &&
@@ -103,12 +124,14 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
                                             ? 'rounded-b-none'
                                             : ''
                                     }`}
+
                                     onClick={() =>
                                         toggleAccordion(
                                             sectionIndex,
                                             questionIndex
                                         )
                                     }
+
                                     role="button"
                                 >
                                     <h4 className="flex-1 text-black">
@@ -127,7 +150,6 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
                                     </div>
                                 </div>
 
-                                {/* the accordion answer */}
                                 <div
                                     className={`accordion-panel__content grid grid-rows-[0fr] rounded-b-lg bg-accordionHover/50 transition-[grid-template-rows]  will-change-[grid-template-rows] motion-reduce:transition-none ${
                                         activeIndex &&
@@ -176,6 +198,7 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
                         person wakes up!
                     </p>
                 </span>
+
                 <Button
                     className="block w-fit bg-gradient-to-b from-tbrand to-tbrand-hover p-0 before:absolute before:inset-0 before:bg-white before:opacity-0 before:transition before:duration-100 before:hover:opacity-10"
                     tabIndex={-1}
@@ -193,4 +216,4 @@ const Accordion: React.FC<AccordionProps> = ({ sections }) => {
     );
 };
 
-export { Accordion };
+export { Accordion };

src/components/Button/Button.styles.ts

@@ -2,14 +2,22 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import type { ClassProp } from 'class-variance-authority/types';
 import { twMerge } from 'tailwind-merge';
 
+/*
+ *
+ * @description Button styles
+ * @variants {primary, secondary}
+ * @defaultVariants {intent: 'primary'}
+ * 
+ */
 const buttonStyles = cva(
     [
         'rounded-lg px-5 py-2 text-sm font-semibold transition border-[#22565b] border relative',
         'focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-tbrand',
         'disabled:cursor-not-allowed disabled:after:hidden',
-        'after:absolute after:bg-black after:top-0 after:left-0 after:-z-10 after:rounded-lg after:w-full after:h-full', // "solid shadow" shape
-        'after:translate-x-0.75 after:translate-y-0.75', // "solid shadow" positioning
+        'after:absolute after:bg-black after:top-0 after:left-0 after:-z-10 after:rounded-lg after:w-full after:h-full',
+        'after:translate-x-0.75 after:translate-y-0.75',
     ],
+
     {
         variants: {
             intent: {
@@ -19,6 +27,7 @@ const buttonStyles = cva(
                     'bg-white text-tbrand hover:bg-[#ebebeb] disabled:hover:bg-white active:bg-[#d9d9d9]',
             },
         },
+
         defaultVariants: {
             intent: 'primary',
         },
@@ -29,4 +38,4 @@ export type ButtonStylesProps = VariantProps<typeof buttonStyles>;
 
 export function getButtonStyles(opts: ButtonStylesProps & ClassProp): string {
     return twMerge(buttonStyles(opts));
-}
+};

src/components/Button/Button.test.tsx

@@ -2,6 +2,11 @@ import { render, screen } from "@testing-library/react";
 import { Button } from "@components";
 import userEvent from "@testing-library/user-event";
 
+/*
+ *
+ * @description Button Component test
+ * 
+ */
 describe("Button Component", () => {
     it("should render a button", () => {
         render(<Button />);
@@ -30,4 +35,4 @@ describe("Button Component", () => {
 
         expect(mockFn).not.toHaveBeenCalled();
     });
-});
+});

src/components/Button/Button.tsx

@@ -2,35 +2,49 @@ import { getButtonStyles } from "./Button.styles";
 import type { ButtonStylesProps } from "./Button.styles";
 import { logEvent, analytics } from "../../utils/Analytics";
 
-type ButtonProps = ButtonStylesProps &
-  React.ButtonHTMLAttributes<HTMLButtonElement> & {
+/*
+ *
+ * @description Button props
+ * @props {string} analyticsEvent (optional)
+ * 
+ */
+type ButtonProps = ButtonStylesProps & React.ButtonHTMLAttributes<HTMLButtonElement> & {
     analyticsEvent?: string;
-  };
+};
 
-export const Button: React.FC<ButtonProps> = ({
-  children,
-  intent,
-  className,
-  analyticsEvent,
-  ...props
+/*
+ *
+ * @description Button component
+ * @props {string} analyticsEvent (optional)
+ * 
+ */
+const Button: React.FC<ButtonProps> = ({
+    children,
+    intent,
+    className,
+    analyticsEvent,
+    ...props
 }) => {
-  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (analyticsEvent) {
-      console.log(analyticsEvent);
-      logEvent(analytics, analyticsEvent);
-    }
-    if (props.onClick) {
-      props.onClick(e);
-    }   
-  };
+    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
+        if (analyticsEvent) {
+            console.log(analyticsEvent);
+            logEvent(analytics, analyticsEvent);
+        }
+
+        if (props.onClick) {
+            props.onClick(e);
+        }  
+    };
 
-  return (
-    <button
-      className={getButtonStyles({ intent, className })}
-      {...props}
-      onClick={handleClick}
-    >
-      {children}
-    </button>
-  );
+    return (
+        <button
+            className={getButtonStyles({ intent, className })}
+            {...props}
+            onClick={handleClick}
+        >
+            {children}
+        </button>
+    );
 };
+
+export { Button };

src/components/LoadingAnimation.tsx

@@ -1,5 +1,11 @@
 import { HawkHacksLogo } from '@assets';
 
+/*
+ *
+ * @description Loading animation component
+ * @props {void}
+ * 
+ */
 const LoadingAnimation: React.FC = () => {
     return (
         <div className="loading-container flex h-screen items-center justify-center">
@@ -12,4 +18,4 @@ const LoadingAnimation: React.FC = () => {
     );
 };
 
-export { LoadingAnimation };
+export { LoadingAnimation };

src/components/Navbar/Menu.tsx

@@ -1,36 +1,50 @@
 import { NavItems, Button } from '@components';
-import { logEvent, analytics } from '../../utils/Analytics';
+import { logEvent, analytics } from '@utils';
 
+/*
+ *
+ * @description Menu interface
+ * @props {boolean} showMenu, {void} hideMenu
+ * 
+ */
 interface MenuProp {
-  showMenu: boolean;
-  hideMenu: () => void;
+    showMenu: boolean;
+    hideMenu: () => void;
 }
 
+/*
+ *
+ * @description Menu component
+ * @props {boolean} showMenu, {void} hideMenu
+ * 
+ */
 const Menu: React.FC<MenuProp> = ({ showMenu, hideMenu }) => {
-  const openInNewTab = (url: string) => {
-    const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-    if (newWindow) newWindow.opener = null;
-  };
+    const openInNewTab = (url: string) => {
+        const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
+        if (newWindow) newWindow.opener = null;
+    };
 
-  const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    openInNewTab('https://portal.hawkhacks.ca');
-    logEvent(analytics, "click_application_portal_button");
-  };
+    const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        openInNewTab('https://portal.hawkhacks.ca');
+        logEvent(analytics, "click_application_portal_button");
+    };
 
-  if (!showMenu) return null;
+    if (!showMenu) return null;
 
-  return (
-    <div className="overflow-hidden fixed right-0 top-0 z-50 h-screen w-full max-w-[65%] border border-white bg-white/20 px-10 py-24 backdrop-blur-lg">
-      <NavItems isHorizontal={false} handleClick={hideMenu} />
-      <Button
-        className="mt-20 block px-0 py-0 lg:hidden"
-        onClick={handleSubmit}
-      >
-        <span className="text-lg block px-5 py-2">Application Portal</span>
-      </Button>
-    </div>
-  );
+    return (
+        <div className="overflow-hidden fixed right-0 top-0 z-50 h-screen w-full max-w-[65%] border border-white bg-white/20 px-10 py-24 backdrop-blur-lg">
+            <NavItems isHorizontal={false} handleClick={hideMenu} />
+            <Button
+                className="mt-20 block px-0 py-0 lg:hidden"
+                onClick={handleSubmit}
+            >
+                <span className="text-lg block px-5 py-2">
+                    Application Portal
+                </span>
+            </Button>
+        </div>
+    );
 };
 
 export { Menu };