chore: fix prettier file (WEB-16)

.prettierignore

@@ -0,0 +1,3 @@
+.github/
+__test__/
+__mocks__/

.prettierrc

@@ -1 +1,7 @@
-{}
+{
+ "trailingComma": "es5",
+ "semi": true,
+ "tabWidth": 2,
+ "singleQuote": true,
+ "jsxSingleQuote": true
+}

package.json

@@ -7,7 +7,9 @@
  "build": "next build",
  "start": "next start",
  "lint": "next lint",
- "test": "jest"
+ "test": "jest",
+ "format": "prettier --check ./src",
+ "format:fix": "prettier --write ./src"
  },
  "dependencies": {
  "next": "14.1.1",

src/app/components/bannerSection/bannerSection.module.css

@@ -13,5 +13,5 @@
  text-align: center;
  font-size: 64px;
  font-weight: 900;
- font-family: "Raleway", sans-serif;
+ font-family: 'Raleway', sans-serif;
 }

src/app/components/bannerSection/bannerSection.test.js

@@ -1,27 +1,27 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import BannerSection from "./bannerSection";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import BannerSection from './bannerSection';
 
-describe("BannerSection", () => {
+describe('BannerSection', () => {
  const label = {
- lblHome: "Dallas Software Developers",
- lblCommunity: "Community Impact",
- lblContact: "Contact Us",
- lblMeetup: "Meetups",
- lblBanner: "This website is made BY the community FOR the community",
+ lblHome: 'Dallas Software Developers',
+ lblCommunity: 'Community Impact',
+ lblContact: 'Contact Us',
+ lblMeetup: 'Meetups',
+ lblBanner: 'This website is made BY the community FOR the community',
  };
 
- test("renders banner section component", () => {
+ test('renders banner section component', () => {
  render(<BannerSection label={label} />);
- const bannerSectionElement = screen.getByTestId("bannerSection");
+ const bannerSectionElement = screen.getByTestId('bannerSection');
  expect(bannerSectionElement).toBeInTheDocument();
  });
 
- test("renders banner section component with label", () => {
+ test('renders banner section component with label', () => {
  render(<BannerSection label={label} />);
- const bannerSectionElement = screen.getByTestId("bannerSection");
+ const bannerSectionElement = screen.getByTestId('bannerSection');
  expect(bannerSectionElement).toHaveTextContent(
- "This website is made BY the community FOR the community",
+ 'This website is made BY the community FOR the community'
  );
  });
 });

src/app/components/bannerSection/bannerSection.tsx

@@ -1,7 +1,7 @@
-"use client";
+'use client';
 
-import React from "react";
-import styles from "./bannerSection.module.css";
+import React from 'react';
+import styles from './bannerSection.module.css';
 
 interface BannerSectionProps {
  label: {
@@ -16,7 +16,7 @@ interface BannerSectionProps {
 export default function BannerSection({ label }: BannerSectionProps) {
  return (
  <div className={styles.bannerSection}>
- <span className={styles.bannerText} data-testid="bannerSection">
+ <span className={styles.bannerText} data-testid='bannerSection'>
  {label.lblBanner}
  </span>
  </div>

src/app/components/cardsSection/card.tsx

@@ -1,4 +1,4 @@
-import styles from "./cards.module.css";
+import styles from './cards.module.css';
 
 interface CardProps {
  children: React.ReactNode;

src/app/components/cardsSection/cards.module.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');
 
 .cardContainer {
  display: flex;
@@ -18,7 +18,7 @@
  flex-direction: column;
  justify-content: center;
  align-items: center;
- font-family: "Raleway";
+ font-family: 'Raleway';
 }
 
 .cardHeader {

src/app/components/cardsSection/cardsSection.tsx

@@ -1,5 +1,5 @@
-import Card from "./card";
-import styles from "./cards.module.css";
+import Card from './card';
+import styles from './cards.module.css';
 
 interface CardData {
  id: number;

src/app/components/heroSection/heroSection.module.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap');
 
 .heroSection {
  display: flex;
@@ -7,14 +7,14 @@
  justify-content: space-between;
  padding: 5rem 3rem;
  margin: 3rem 0;
- background-image: url("/assets/dsdHeroBg.png");
+ background-image: url('/assets/dsdHeroBg.png');
  background-repeat: no-repeat;
  background-position: bottom right;
  background-size: contain;
 }
 
 .videoPlaceholder {
- font-family: "Raleway", sans-serif;
+ font-family: 'Raleway', sans-serif;
  text-align: center;
  font-weight: 700;
  font-size: 36px;
@@ -29,7 +29,7 @@
 
 .intro {
  font-size: 100px;
- font-family: "Raleway", sans-serif;
+ font-family: 'Raleway', sans-serif;
  font-weight: 900;
  color: #3c3db9;
 }

src/app/components/heroSection/heroSection.test.js

@@ -1,21 +1,21 @@
-import React from "react"; // Import React
-import { render, screen } from "@testing-library/react";
-import HeroSection from "./heroSection";
+import React from 'react'; // Import React
+import { render, screen } from '@testing-library/react';
+import HeroSection from './heroSection';
 
-describe("HeroSection component", () => {
+describe('HeroSection component', () => {
  const labelMap = {
  lblHero: "You don't have to code alone.",
  };
- test("renders the component", () => {
+ test('renders the component', () => {
  render(<HeroSection label={labelMap.lblHero} />);
- const heroElement = screen.getByTestId("hero");
+ const heroElement = screen.getByTestId('hero');
  expect(heroElement).toBeInTheDocument();
  });
 
- test("renders the correct text", () => {
+ test('renders the correct text', () => {
  render(<HeroSection label={labelMap.lblHero} />);
 
- const heroElement = screen.getByTestId("hero");
+ const heroElement = screen.getByTestId('hero');
  expect(heroElement).toHaveTextContent(labelMap.lblHero);
  });
 });

src/app/components/heroSection/heroSection.tsx

@@ -1,11 +1,11 @@
-"use client";
+'use client';
 
-import React from "react";
-import styles from "./heroSection.module.css";
+import React from 'react';
+import styles from './heroSection.module.css';
 
 export default function HeroSection({ label }: { label: string }) {
  return (
- <div className={styles.heroSection} data-testid="hero">
+ <div className={styles.heroSection} data-testid='hero'>
  <p className={styles.intro}>{label}</p>
  <div className={styles.videoPlaceholder}>Video playing here</div>
  </div>

src/app/components/navbar/navbar.module.css

@@ -1,4 +1,4 @@
-@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@800&display=swap');
 
 .mobileNavBar {
  display: none;
@@ -8,7 +8,7 @@
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
- font-family: "Raleway", sans-serif;
+ font-family: 'Raleway', sans-serif;
 }
 
 .logo a,
@@ -42,7 +42,7 @@
 }
 
 .links::after {
- content: "";
+ content: '';
  display: block;
  width: 55%;
  height: 5px;
@@ -97,7 +97,7 @@
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
- font-family: "Raleway", sans-serif;
+ font-family: 'Raleway', sans-serif;
  }
  .hamburger {
  display: flex;

src/app/components/navbar/navbar.test.js

@@ -1,38 +1,38 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import Navbar from "./navbar";
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import Navbar from './navbar';
 
-describe("Navbar", () => {
- test("renders navbar component", () => {
+describe('Navbar', () => {
+ test('renders navbar component', () => {
  render(
  <Navbar
  label={{
- lblHome: "Dallas Software Developers",
- lblCommunity: "Community Impact",
- lblContact: "Contact Us",
- lblMeetup: "Meetups",
+ lblHome: 'Dallas Software Developers',
+ lblCommunity: 'Community Impact',
+ lblContact: 'Contact Us',
+ lblMeetup: 'Meetups',
  }}
- />,
+ />
  );
- const navbarElement = screen.getByTestId("navbar");
+ const navbarElement = screen.getByTestId('navbar');
  expect(navbarElement).toBeInTheDocument();
  });
 
- test("renders navbar component with label", () => {
+ test('renders navbar component with label', () => {
  render(
  <Navbar
  label={{
- lblHome: "Dallas Software Developers",
- lblCommunity: "Community Impact",
- lblContact: "Contact Us",
- lblMeetup: "Meetups",
+ lblHome: 'Dallas Software Developers',
+ lblCommunity: 'Community Impact',
+ lblContact: 'Contact Us',
+ lblMeetup: 'Meetups',
  }}
- />,
+ />
  );
- const navbarElement = screen.getByTestId("navbar");
- expect(navbarElement).toHaveTextContent("Dallas Software Developers");
- expect(navbarElement).toHaveTextContent("Community Impact");
- expect(navbarElement).toHaveTextContent("Contact Us");
- expect(navbarElement).toHaveTextContent("Meetups");
+ const navbarElement = screen.getByTestId('navbar');
+ expect(navbarElement).toHaveTextContent('Dallas Software Developers');
+ expect(navbarElement).toHaveTextContent('Community Impact');
+ expect(navbarElement).toHaveTextContent('Contact Us');
+ expect(navbarElement).toHaveTextContent('Meetups');
  });
 });

src/app/components/navbar/navbar.tsx

@@ -1,9 +1,9 @@
-"use client";
+'use client';
 
-import React, { useState } from "react";
-import Image from "next/image";
-import Link from "next/link";
-import styles from "./navbar.module.css";
+import React, { useState } from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import styles from './navbar.module.css';
 
 interface NavbarProps {
  label: {
@@ -24,11 +24,11 @@ export default function Navbar({ label }: NavbarProps) {
  <div>
  <nav className={styles.mobileNavBar}>
  <div className={styles.mobileLogo}>
- <Link href="/">
+ <Link href='/'>
  <div className={styles.homeLink}>
  <Image
- src="/assets/dsd-circle-logo.png"
- alt="Logo"
+ src='/assets/dsd-circle-logo.png'
+ alt='Logo'
  width={45}
  height={45}
  />
@@ -43,29 +43,29 @@ export default function Navbar({ label }: NavbarProps) {
  </div>
  <div
  className={styles.mobileNavBackground}
- style={{ display: isNavVisible ? "block" : "none" }}
+ style={{ display: isNavVisible ? 'block' : 'none' }}
  >
  <div className={styles.mobileNav}>
- <Link href="/">
+ <Link href='/'>
  <div className={styles.mobileLinks}>{label.lblCommunity}</div>
  </Link>
- <Link href="/">
+ <Link href='/'>
  <div className={styles.mobileLinks}>{label.lblContact}</div>
  </Link>
- <Link href="https://www.meetup.com/dallas-software-developers-meetup/">
+ <Link href='https://www.meetup.com/dallas-software-developers-meetup/'>
  <div className={styles.meetupLink}>{label.lblMeetup}</div>
  </Link>
  </div>
  </div>
  </nav>
 
- <nav className={styles.navbar} data-testid="navbar">
+ <nav className={styles.navbar} data-testid='navbar'>
  <div className={styles.logo}>
- <Link href="/">
+ <Link href='/'>
  <div className={styles.homeLink}>
  <Image
- src="/assets/dsd-circle-logo.png"
- alt="Logo"
+ src='/assets/dsd-circle-logo.png'
+ alt='Logo'
  width={75}
  height={75}
  />
@@ -74,13 +74,13 @@ export default function Navbar({ label }: NavbarProps) {
  </Link>
  </div>
  <div className={styles.navLinks}>
- <Link href="/">
+ <Link href='/'>
  <div className={styles.links}>{label.lblCommunity}</div>
  </Link>
- <Link href="/">
+ <Link href='/'>
  <div className={styles.links}>{label.lblContact}</div>
  </Link>
- <Link href="https://www.meetup.com/dallas-software-developers-meetup/">
+ <Link href='https://www.meetup.com/dallas-software-developers-meetup/'>
  <div className={styles.meetupLink}>{label.lblMeetup}</div>
  </Link>
  </div>