Tweak Prettier config & add eslint-plugin-tailwindcss

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": ["next/core-web-vitals", "prettier"]
+  "extends": [
+    "next/core-web-vitals",
+    "prettier",
+    "plugin:tailwindcss/recommended"
+  ]
 }

.github/workflows/build.yml

@@ -2,9 +2,9 @@ name: Build
 
 on:
   push:
-    branches: ["master"]
+    branches: ['master']
   pull_request:
-    branches: ["master"]
+    branches: ['master']
 
 jobs:
   build:
@@ -18,7 +18,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "20"
+          node-version: '20'
           cache: yarn
 
       - name: Restore cache
@@ -61,4 +61,4 @@ jobs:
           push: true
           tags: benscobie/student-loan-repayment-calculator:latest
           context: .
-          file: "docker/Dockerfile.linux.amd64"
+          file: 'docker/Dockerfile.linux.amd64'

.github/workflows/codeql-analysis.yml

@@ -9,16 +9,16 @@
 # the `language` matrix defined below to confirm you have the correct set of
 # supported CodeQL languages.
 #
-name: "CodeQL"
+name: 'CodeQL'
 
 on:
   push:
-    branches: ["master"]
+    branches: ['master']
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: ["master"]
+    branches: ['master']
   schedule:
-    - cron: "42 15 * * 0"
+    - cron: '42 15 * * 0'
 
 jobs:
   analyze:
@@ -32,7 +32,7 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        language: ["javascript"]
+        language: ['javascript']
         # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python', 'ruby' ]
         # Learn more about CodeQL language support at https://aka.ms/codeql-docs/language-support
 

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all"
+}

README.md

@@ -1,4 +1,4 @@
-![License MIT](https://img.shields.io/badge/license-MIT-blue.svg) [![](https://img.shields.io/docker/pulls/benscobie/student-loan-repayment-calculator.svg)](https://hub.docker.com/r/benscobie/student-loan-repayment-calculator "DockerHub")
+![License MIT](https://img.shields.io/badge/license-MIT-blue.svg) [![](https://img.shields.io/docker/pulls/benscobie/student-loan-repayment-calculator.svg)](https://hub.docker.com/r/benscobie/student-loan-repayment-calculator 'DockerHub')
 
 # Student Loan Repayment Calculator
 

api/models/projection.ts

@@ -1,14 +1,14 @@
-import LoanType from "../../models/loanType";
-import RepaymentStatus from "../../models/repaymentStatus";
+import LoanType from '../../models/loanType'
+import RepaymentStatus from '../../models/repaymentStatus'
 
 export default interface Projection {
-  repaymentStatus: RepaymentStatus;
-  loanType: LoanType;
-  debtRemaining: number;
-  interestRate: number;
-  paid: number;
-  interestApplied: number;
-  totalPaid: number;
-  totalInterestApplied: number;
-  threshold: number;
+  repaymentStatus: RepaymentStatus
+  loanType: LoanType
+  debtRemaining: number
+  interestRate: number
+  paid: number
+  interestApplied: number
+  totalPaid: number
+  totalInterestApplied: number
+  threshold: number
 }

api/models/result.ts

@@ -1,14 +1,14 @@
-import { DateTime } from "luxon";
-import Projection from "./projection";
+import { DateTime } from 'luxon'
+import Projection from './projection'
 
 export default interface Result {
-  period: number;
-  periodDate: DateTime;
-  salary: number;
-  projections: Projection[];
-  aggregatedDebtRemaining: number;
-  aggregatedPaidInPeriod: number;
-  aggregatedInterestAppliedInPeriod: number;
-  aggregatedTotalInterestApplied: number;
-  aggregatedTotalPaid: number;
+  period: number
+  periodDate: DateTime
+  salary: number
+  projections: Projection[]
+  aggregatedDebtRemaining: number
+  aggregatedPaidInPeriod: number
+  aggregatedInterestAppliedInPeriod: number
+  aggregatedTotalInterestApplied: number
+  aggregatedTotalPaid: number
 }

api/models/results.ts

@@ -1,10 +1,10 @@
-import { DateTime } from "luxon";
-import Result from "./result";
+import { DateTime } from 'luxon'
+import Result from './result'
 
 export interface Results {
-  results: Result[];
-  debtClearedDate: DateTime;
-  debtClearedNumberOfPeriods: number;
-  totalPaid: number;
-  totalInterestApplied: number;
+  results: Result[]
+  debtClearedDate: DateTime
+  debtClearedNumberOfPeriods: number
+  totalPaid: number
+  totalInterestApplied: number
 }

components/Layout.tsx

@@ -1,11 +1,11 @@
-import { ReactNode } from "react";
-import Footer from "./ui/organisms/Footer";
-import Header from "./ui/organisms/Header";
-import Head from "next/head";
+import { ReactNode } from 'react'
+import Footer from './ui/organisms/Footer'
+import Header from './ui/organisms/Header'
+import Head from 'next/head'
 
 interface LayoutProps {
-  children?: ReactNode | undefined;
-  className?: string;
+  children?: ReactNode | undefined
+  className?: string
 }
 
 function Layout({ children, className }: LayoutProps) {
@@ -33,11 +33,11 @@ function Layout({ children, className }: LayoutProps) {
       </Head>
       <div className={className}>
         <Header />
-        <main className="container mx-auto max-w-7xl my-8">{children}</main>
+        <main className="container mx-auto my-8 max-w-7xl">{children}</main>
         <Footer />
       </div>
     </>
-  );
+  )
 }
 
-export default Layout;
+export default Layout

components/ui/atoms/Button.tsx

@@ -1,39 +1,39 @@
-import classNames from "classnames";
-import { useRef } from "react";
-import { twMerge } from "tailwind-merge";
+import classNames from 'classnames'
+import { useRef } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 interface ButtonProps
-  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "style"> {
-  id: string;
-  disabled?: boolean;
-  style: "primary" | "secondary";
-  children?: React.ReactNode;
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'style'> {
+  id: string
+  disabled?: boolean
+  style: 'primary' | 'secondary'
+  children?: React.ReactNode
 }
 
 const Button = (props: ButtonProps) => {
   const {
     id,
-    type = "button",
+    type = 'button',
     disabled = false,
     style,
     className,
     children,
     ...rest
-  } = props;
+  } = props
 
-  const inputRef = useRef(null);
+  const inputRef = useRef(null)
 
-  const btnClass = classNames("rounded-lg text-sm px-5 py-2.5", {
-    "text-white border border-sky-600 bg-sky-600": style == "primary",
-    "hover:bg-sky-700 hover:border-sky-700 focus:ring-2 focus:ring-sky-500 focus:outline-none":
-      style == "primary" && !disabled,
+  const btnClass = classNames('rounded-lg text-sm px-5 py-2.5', {
+    'text-white border border-sky-600 bg-sky-600': style == 'primary',
+    'hover:bg-sky-700 hover:border-sky-700 focus:ring-2 focus:ring-sky-500 focus:outline-none':
+      style == 'primary' && !disabled,
 
-    "text-sky-700 border border-sky-600": style == "secondary",
-    "hover:bg-sky-700 hover:text-white focus:ring-2 focus:ring-slate-300 focus:outline-none":
-      style == "secondary" && !disabled,
+    'text-sky-700 border border-sky-600': style == 'secondary',
+    'hover:bg-sky-700 hover:text-white focus:ring-2 focus:ring-slate-300 focus:outline-none':
+      style == 'secondary' && !disabled,
 
-    "opacity-50 cursor-not-allowed": disabled,
-  });
+    'opacity-50 cursor-not-allowed': disabled,
+  })
 
   return (
     <button
@@ -46,7 +46,7 @@ const Button = (props: ButtonProps) => {
     >
       {children}
     </button>
-  );
-};
+  )
+}
 
-export default Button;
+export default Button

components/ui/atoms/Checkbox.tsx

@@ -1,47 +1,47 @@
-import { forwardRef } from "react";
+import { forwardRef } from 'react'
 
 interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
-  id: string;
-  placeholder?: string;
-  label: string;
-  type?: string;
-  error?: boolean;
-  errorText?: string;
-  required?: boolean;
-  children?: React.ReactNode;
+  id: string
+  placeholder?: string
+  label: string
+  type?: string
+  error?: boolean
+  errorText?: string
+  required?: boolean
+  children?: React.ReactNode
 }
 
 const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
   function InputGroup(props: CheckboxProps, ref) {
     const {
       id,
-      label = "",
+      label = '',
       error = false,
-      errorText = "",
+      errorText = '',
       required = false,
       ...rest
-    } = props;
+    } = props
 
     return (
       <>
         <input
           ref={ref}
           type="checkbox"
-          className={`border bg-gray-50 text-gray-900 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 p-2.5 font-light text-sm w-4 h-4 rounded ${
-            error ? "border-red-600" : "border-gray-300"
+          className={`size-4 rounded border bg-gray-50 p-2.5 text-sm font-light text-gray-900 focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 ${
+            error ? 'border-red-600' : 'border-gray-300'
           }`}
           id={id}
           {...rest}
         />
-        <label htmlFor={id} className="ml-2 mb-1">
+        <label htmlFor={id} className="mb-1 ml-2">
           {label} {required && <span className="text-red-600">*</span>}
         </label>
         {errorText && (
-          <p className="text-xs pl-2 text-red-600 mt-1">{errorText}</p>
+          <p className="mt-1 pl-2 text-xs text-red-600">{errorText}</p>
         )}
       </>
-    );
+    )
   },
-);
+)
 
-export default Checkbox;
+export default Checkbox

components/ui/atoms/Container.tsx

@@ -1,19 +1,19 @@
-import classNames from "classnames";
+import classNames from 'classnames'
 
 export type ContainerProps = {
-  children?: React.ReactNode;
-  className?: string;
-};
+  children?: React.ReactNode
+  className?: string
+}
 
 export const Container = ({ className, children }: ContainerProps) => {
   return (
     <div
       className={classNames(
-        "mx-0 p-8 sm:mx-8 max-w-7xl bg-white shadow-lg",
-        className
+        'mx-0 p-8 sm:mx-8 max-w-7xl bg-white shadow-lg',
+        className,
       )}
     >
       {children}
     </div>
-  );
-};
+  )
+}