Merge pull request #5 from denmo530/feature/SCRUM-13-SCRUM-14-husky-l…

…int-setup Feature/scrum 13 scrum 14 husky lint setup
denmo530 · Aug 4, 2023 · 52fcc87 · 52fcc87
2 parents a3b8614 + 7c9e958
commit 52fcc87
Show file tree

Hide file tree

Showing 70 changed files with 2,901 additions and 1,024 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1,4 @@
+/coverage
+/dist
+/examples
+/node_modules
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,3 +1,87 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": [
+    "next/core-web-vitals",
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
+  "plugins": ["import", "jsx-a11y", "react", "react-hooks", "@typescript-eslint"],
+  "env": {
+    "node": true,
+    "browser": true
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "project": "./tsconfig.json"
+  },
+  "rules": {
+    "no-var": "warn",
+    "vars-on-top": "warn",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "jsx-a11y/click-events-have-key-events": "off",
+    "@typescript-eslint/no-unsafe-return": "off",
+
+    // Too restrictive, writing ugly code to defend against a very unlikely scenario: https://eslint.org/docs/rules/no-prototype-builtins
+    "no-prototype-builtins": "off",
+    // https://basarat.gitbooks.io/typescript/docs/tips/defaultIsBad.html
+    "import/prefer-default-export": "off",
+    "import/no-default-export": "off",
+    // Too restrictive: https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/destructuring-assignment.md
+    "react/destructuring-assignment": "off",
+    // No jsx extension: https://github.com/facebook/create-react-app/issues/87#issuecomment-234627904
+    "react/jsx-filename-extension": "off",
+    "react/require-default-props": "off",
+    "react/function-component-definition": "off",
+    "react/no-unstable-nested-components": "off",
+    // Use function hoisting to improve code readability
+    "no-use-before-define": ["error", { "functions": false, "classes": true, "variables": true }],
+    // Allow most functions to rely on type inference. If the function is exported, then `@typescript-eslint/explicit-module-boundary-types` will ensure it's typed.
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/no-misused-promises": "off",
+    "no-unsafe-optional-chaining": "off",
+    "@typescript-eslint/restrict-template-expressions": "off",
+    "@typescript-eslint/no-use-before-define": [
+      "error",
+      {
+        "functions": false,
+        "classes": true,
+        "variables": true,
+        "typedefs": true
+      }
+    ],
+    // Common abbreviations are known and readable
+    "unicorn/prevent-abbreviations": "off",
+    "react/jsx-props-no-spreading": "off",
+    // Airbnb prefers forEach
+
+    "unicorn/no-array-for-each": "off",
+    "@typescript-eslint/indent": "off",
+    "no-nested-ternary": "off",
+    // It's not accurate in the monorepo style
+    "import/no-extraneous-dependencies": "off",
+    "@typescript-eslint/comma-dangle": "off",
+    "react/no-array-index-key": "warn",
+    "arrow-body-style": "off",
+    "no-unused-vars": "warn",
+    "react/react-in-jsx-scope": "off",
+    "@typescript-eslint/no-unsafe-assignment": "off",
+    "@typescript-eslint/no-unsafe-member-access": "off",
+    "jsx-a11y/label-has-associated-control": "off",
+    "no-plusplus": "off",
+    "no-console": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ]
+  }
 }
diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+npm run lint
+
+# npm run test
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "tabWidth": 2,
+  "printWidth": 100,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "jsxBracketSameLine": true
+}
diff --git a/components/AnimatedCard.tsx b/components/AnimatedCard.tsx
@@ -1,7 +1,6 @@
-import { NextPage } from "next";
-import Image from "next/image";
-import React from "react";
-import styles from "@/styles/AnimatedCard.module.css";
+import Image from 'next/image';
+import React from 'react';
+import styles from '@/styles/AnimatedCard.module.css';
 
 interface AnimatedCardProps {
   src: string;
@@ -10,24 +9,19 @@ interface AnimatedCardProps {
   message: string;
 }
 
-const AnimatedCard: React.FC<AnimatedCardProps> = ({
-  src,
-  alt,
-  title,
-  message,
-}) => {
+const AnimatedCard: React.FC<AnimatedCardProps> = ({ src, alt, title, message }) => {
   return (
     <div className={styles.card}>
       <Image
         src={src}
         alt={alt}
         fill
         sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
-        style={{ objectFit: "cover" }}
+        style={{ objectFit: 'cover' }}
       />
       <div className={styles.intro}>
         <h1>{title}</h1>
-        <div className={styles.p}>{message.slice(0, 99) + "..."}</div>
+        <div className={styles.p}>{`${message.slice(0, 99)}...`}</div>
       </div>
     </div>
   );

diff --git a/components/AnimatedCards.tsx b/components/AnimatedCards.tsx
@@ -1,9 +1,9 @@
-import { NextPage } from "next";
-import React from "react";
-import AnimatedCard from "./AnimatedCard";
-import styles from "../styles/AnimatedCard.module.css";
-import useDorms from "@/hooks/useDorms";
-import Link from "next/link";
+import { NextPage } from 'next';
+import React from 'react';
+import Link from 'next/link';
+import useDorms from '@/hooks/useDorms';
+import AnimatedCard from './AnimatedCard';
+import styles from '../styles/AnimatedCard.module.css';
 
 type Dorm = {
   label: string;
@@ -17,20 +17,20 @@ type Dorm = {
 
 const AnimatedCardRow: NextPage = () => {
   const { getAll } = useDorms();
-  const dorms = getAll().sort(() => 0.5 - Math.random());
+  const allDorms: Dorm[] = getAll();
+  const dorms = allDorms.sort(() => 0.5 - Math.random());
 
   return (
     <div className={styles.container}>
       {dorms.map((dorm: Dorm) => (
         <Link
           href={{
-            pathname: "/dorms/[name]",
-            query: { name: dorm.label.toLowerCase() },
+            pathname: '/dorms/[name]',
+            query: { name: dorm.label.toLowerCase() }
           }}
-          key={dorm.value}
-        >
+          key={dorm.value}>
           <AnimatedCard
-            src={dorm.image || "Placeholder img"}
+            src={dorm.image || 'Placeholder img'}
             alt={dorm.label}
             title={dorm.label}
             message={dorm.description}

diff --git a/components/Button.tsx b/components/Button.tsx
@@ -1,6 +1,6 @@
-import React from "react";
-import { IconType } from "react-icons";
-import styles from "@/styles/Button.module.css";
+import React from 'react';
+import { IconType } from 'react-icons';
+import styles from '@/styles/Button.module.css';
 
 interface ButtonProps {
   label: string;
@@ -17,25 +17,25 @@ const Button: React.FC<ButtonProps> = ({
   disabled,
   outline,
   small,
-  icon: Icon,
+  icon: Icon
 }) => {
   const buttonStyles = {
-    backgroundColor: outline ? "white" : "#68904D",
-    border: outline ? "1px solid black" : "1px solid #68904D",
-    color: outline ? "black" : "white",
-    padding: small ? "4px 0" : "12px",
-    fontSize: small ? "small" : "large",
-    fontWeight: small ? "light" : "semi-bold",
-    borderWidth: small ? "1px" : "2px",
+    backgroundColor: outline ? 'white' : '#68904D',
+    border: outline ? '1px solid black' : '1px solid #68904D',
+    color: outline ? 'black' : 'white',
+    padding: small ? '4px 0' : '12px',
+    fontSize: small ? 'small' : 'large',
+    fontWeight: small ? 'light' : 'semi-bold',
+    borderWidth: small ? '1px' : '2px'
   };
 
   return (
     <button
       className={styles.btn}
+      type="button"
       style={buttonStyles}
       onClick={onClick}
-      disabled={disabled}
-    >
+      disabled={disabled}>
       {Icon && <Icon size={24} className={styles.icon} />}
       {label}
     </button>

diff --git a/components/Card.tsx b/components/Card.tsx
diff --git a/components/Carousel.tsx b/components/Carousel.tsx
@@ -1,15 +1,19 @@
-import React, { useState } from "react";
-import Image from "next/image";
-import { Review } from "@prisma/client";
-import styles from "@/styles/Carousel.module.css";
-import { AiOutlineLeft, AiOutlineRight } from "react-icons/ai";
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { Review } from '@prisma/client';
+import { AiOutlineLeft, AiOutlineRight } from 'react-icons/ai';
+import styles from '@/styles/Carousel.module.css';
 
 interface GalleryProps {
   reviews: Review[];
   dormImage?: string;
 }
 const Gallery: React.FC<GalleryProps> = ({ reviews, dormImage }) => {
   const [currentImageIndex, setCurrentImageIndex] = useState(0);
+  const images = reviews?.map((review: Review) => review.imageSrc);
+
+  const flattenedArray: string[] = flattenArray(images);
+  if (dormImage) flattenedArray.unshift(dormImage);
 
   const handleNextImage = () => {
     setCurrentImageIndex((prevIndex) =>
@@ -27,34 +31,29 @@ const Gallery: React.FC<GalleryProps> = ({ reviews, dormImage }) => {
     setCurrentImageIndex(imageIndex);
   };
 
-  let images = reviews?.map((review: Review) => review.imageSrc);
-
-  function flattenArray(arr: any) {
-    let flattenedArray: any = [];
+  function flattenArray<T>(arr: (T | T[])[]): T[] {
+    let tempArr: T[] = [];
 
-    arr?.forEach((element: any) => {
+    arr?.forEach((element) => {
       if (Array.isArray(element)) {
-        flattenedArray = flattenedArray.concat(flattenArray(element));
-      } else if (element !== "") {
-        flattenedArray.push(element);
+        tempArr = tempArr.concat(flattenArray(element));
+      } else if (element !== '') {
+        tempArr.push(element);
       }
     });
 
-    return flattenedArray;
+    return tempArr;
   }
 
-  const flattenedArray = flattenArray(images);
-  flattenedArray.unshift(dormImage);
-
   return (
     <div className={styles.sliderStyles}>
       <div className={styles.arrowContainer}>
-        <div className={styles.leftArrow} onClick={handlePrevImage}>
+        <button type="button" className={styles.leftArrow} onClick={handlePrevImage}>
           <AiOutlineLeft size={24} />
-        </div>
-        <div className={styles.rightArrow} onClick={handleNextImage}>
+        </button>
+        <button type="button" className={styles.rightArrow} onClick={handleNextImage}>
           <AiOutlineRight size={24} />
-        </div>
+        </button>
         <Image
           alt=""
           className={styles.mainImage}

diff --git a/components/Footer.tsx b/components/Footer.tsx
@@ -1,5 +1,5 @@
-import React from "react";
-import styles from "@/styles/Footer.module.css";
+import React from 'react';
+import styles from '@/styles/Footer.module.css';
 
 const Footer: React.FC = () => {
   return (