Merge branch 'develop' of https://github.com/LetsGetTechnical/gridiro…

…n-survivor into danielle/482-notifications-needs-a-way-to-exit-the-modal

.storybook/main.ts

@@ -2,6 +2,7 @@ import type { StorybookConfig } from '@storybook/nextjs';
 
 const config: StorybookConfig = {
   stories: [
+    '../stories/*.mdx',
     '../stories/**/*.mdx',
     '../components/**/*.stories.@(js|jsx|mjs|ts|tsx)',
   ],
@@ -12,6 +13,7 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@chromatic-com/storybook',
     '@storybook/addon-interactions',
+    '@storybook/manager-api',
   ],
   framework: {
     name: '@storybook/nextjs',

.storybook/manager.js

@@ -0,0 +1,8 @@
+import { addons } from '@storybook/manager-api';
+
+addons.setConfig({
+  sidebar: {
+    showRoots: true,
+    collapsedRoots: ['about', 'technical-planning-documents'],
+  },
+});

.storybook/preview.ts

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react';
 import '../app/globals.css';
+import '../stories/styles.css';
 
 const preview: Preview = {
   parameters: {
@@ -9,13 +10,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
-    backgrounds: {
-      default: 'dark',
-      values: [
-        { name: 'dark', value: '#09090B' },
-        { name: 'light', value: '#fff' },
-      ],
-    },
+    layout: 'centered',
   },
 };
 

components/Nav/Nav.test.tsx

@@ -1,6 +1,8 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Nav from './Nav';
 import Login from '@/app/(main)/login/page';
+import { useDataStore } from '@/store/dataStore';
+import { getUserLeagues } from '@/utils/utils';
 
 const mockPush = jest.fn();
 const mockUsePathname = jest.fn();
@@ -32,6 +34,10 @@ jest.mock('../../context/AuthContextProvider', () => ({
   },
 }));
 
+jest.mock('@/store/dataStore', () => ({
+  useDataStore: jest.fn(() => ({ user: { id: '123', leagues: [] } })),
+}));
+
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
   value: jest.fn().mockImplementation((query) => ({
@@ -47,10 +53,25 @@ Object.defineProperty(window, 'matchMedia', {
 });
 
 describe('Nav', () => {
+  const mockUseDataStore = useDataStore as unknown as jest.Mock;
+  const mockGetUserLeagues = getUserLeagues as jest.Mock;
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
 
+  it('renders link to /league/all', async () => {
+    render(<Nav />);
+
+    const drawTrigger = screen.getByTestId('drawer-trigger');
+    fireEvent.click(drawTrigger);
+
+    let linkNav: HTMLElement;
+    linkNav = await screen.getByTestId('league-link');
+    expect(linkNav).toBeInTheDocument();
+    expect(linkNav).toHaveAttribute('href', '/league/all');
+  });
+
   it('it should render the default component state', () => {
     mockUsePathname.mockImplementation(() => '/weeklyPicks');
 
@@ -163,4 +184,22 @@ describe('Nav', () => {
       expect(drawerTrigger.getAttribute('data-state')).toBe('closed');
     });
   });
+
+  it('it should close the drawer when the leagues link is clicked', async () => {
+    mockUsePathname.mockImplementation(() => '/league/all');
+
+    render(<Nav />);
+
+    const drawerTrigger = screen.getByTestId('drawer-trigger');
+
+    fireEvent.click(drawerTrigger);
+
+    const linkNav = screen.getByTestId('league-link');
+
+    fireEvent.click(linkNav);
+
+    await waitFor(() => {
+      expect(drawerTrigger.getAttribute('data-state')).toBe('closed');
+    });
+  });
 });

components/Nav/Nav.tsx

@@ -6,6 +6,7 @@ import React, { JSX } from 'react';
 import LogoNav from '../LogoNav/LogoNav';
 import { Menu } from 'lucide-react';
 import { Button } from '../Button/Button';
+import Link from 'next/link';
 import {
   Drawer,
   DrawerContent,
@@ -68,9 +69,21 @@ export const Nav = (): JSX.Element => {
                 <DrawerTitle data-testid="title">Gridiron Survivor</DrawerTitle>
               </DrawerHeader>
               <ul className="m-0 flex flex-col gap-4 p-0">
+                <li>
+                  <Link
+                    data-testid="league-link"
+                    href="/league/all"
+                    className={cn(
+                      'underline underline-offset-4 hover:text-primary-muted transition-colors',
+                    )}
+                    onClick={() => setOpen(false)}
+                  >
+                    Leagues
+                  </Link>
+                </li>
                 <li>
                   <Button
-                    className="p-0 text-base font-normal text-muted-foreground"
+                    className="p-0 text-base font-normal text-primary-foreground"
                     variant="link"
                     label="Sign Out"
                     onClick={() => {

package.json

@@ -26,14 +26,15 @@
     "clsx": "^2.1.0",
     "geist": "^1.2.2",
     "immer": "^10.1.1",
-    "lucide-react": "^0.312.0",
+    "lucide-react": "^0.447.0",
     "next": "^14.1.1",
     "node-appwrite": "^13.0.0",
     "postcss": "8.4.29",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.51.3",
     "react-hot-toast": "^2.4.1",
+    "react-icons": "^5.3.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss": "3.3.3",
     "tailwindcss-animate": "^1.0.7",