chore: 🚨 fix linting

Signed-off-by: Newton <5769156+iamnewton@users.noreply.github.com>

.editorconfig-checker.json

@@ -0,0 +1,7 @@
+{
+  "Exclude": [
+    "LICENSE",
+    "public",
+    "\\.md$"
+  ],
+}

.gitignore

@@ -87,4 +87,5 @@ coverage
 reports
 dist
 
-*storybook.log
+*storybook.log
+

.storybook/main.ts

@@ -13,7 +13,7 @@ const config: StorybookConfig = {
 		"@whitespace/storybook-addon-html",
 	],
 	docs: {
-	    defaultName: "Documentation",
+		defaultName: "Documentation",
 	},
 	framework: {
 		name: "@storybook/react-vite",

src/app/app.tsx

@@ -1,4 +1,3 @@
-import * as React from "react";
 import { Inbox } from "../inbox";
 import { Login } from "../login";
 import { useAuth } from "./use-auth";

src/app/use-auth.ts

@@ -1,62 +1,62 @@
 import * as React from "react";
 
 export interface AuthOptions {
-    headers?: { [key: string]: string };
-    body?: string;
+	headers?: { [key: string]: string };
+	body?: string;
 }
 
 export interface User {
-    id: string;
-    name: string;
-    [key: string]: any; // Allow any additional user properties
+	id: string;
+	name: string;
+	[key: string]: any; // Allow any additional user properties
 }
 
 export interface AuthResponse {
-    user: User;
+	user: User;
 }
 
 function authenticate (options: AuthOptions): Promise<AuthResponse> {
-    return fetch("/authenticate", {
-        method: "POST",
-        ...options,
-    }).then((res) => res.json());
+	return fetch("/authenticate", {
+		method: "POST",
+		...options,
+	}).then((res) => res.json());
 }
 
 // Define the action type for the reducer
 type AuthAction =
-    | { type: "LOG_IN"; user: User }
-    | { type: "LOG_OUT" };
+	| { type: "LOG_IN"; user: User }
+	| { type: "LOG_OUT" };
 
 // Reducer function for managing user state
 function reducer (user: User | null, action: AuthAction): User | null {
-    switch (action.type) {
-        case "LOG_IN":
-            return action.user;
-        case "LOG_OUT":
-            return null;
-        default:
-            return user;
-    }
+	switch (action.type) {
+		case "LOG_IN":
+			return action.user;
+		case "LOG_OUT":
+			return null;
+		default:
+			return user;
+	}
 };
 
 // Define the credentials type for login
 export interface Credentials {
-    username: string;
-    password: string;
+	username: string;
+	password: string;
 }
 
 export function useAuth(): [User | null, (credentials: Credentials) => void] {
-    const [user, dispatch] = React.useReducer(reducer, null);
-
-    const logIn = ({ username, password }: Credentials) => {
-        authenticate({ body: JSON.stringify({ username, password }) })
-            .then(({ user }) => {
-                dispatch({ type: "LOG_IN", user });
-            })
-            .catch((error) => {
-                console.log(error);
-            });
-    };
-
-    return [user, logIn];
+	const [user, dispatch] = React.useReducer(reducer, null);
+
+	const logIn = ({ username, password }: Credentials) => {
+		authenticate({ body: JSON.stringify({ username, password }) })
+			.then(({ user }) => {
+				dispatch({ type: "LOG_IN", user });
+			})
+			.catch((error) => {
+				console.log(error);
+			});
+	};
+
+	return [user, logIn];
 }

src/inbox/inbox.tsx

@@ -1,8 +1,7 @@
-import * as React from "react";
 import { TaskList, useTasks } from "../tasks";
 
 export interface InboxProps {
-  error?: string;
+	error?: string;
 }
 
 type TaskState = "TASK_PINNED" | "TASK_INBOX";

src/login/login.cy.ts

@@ -8,7 +8,7 @@ describe("The Login Page", () => {
 			body: {
 				user: {
 					name: "Alice Carr",
-					token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9",
+					token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9", // gitleaks:allow
 				},
 			},
 		});
@@ -22,7 +22,7 @@ describe("The Login Page", () => {
 
 	it("user can authenticate using the login form", () => {
 		const email: string = "alice.carr@test.com";
-		const password: string = "k12h1k0$5;lpa@Afn";
+		const password: string = "k12h1k0$5;lpa@Afn"; // gitleaks:allow
 
 		// Visit the home page
 		cy.visit("/");

src/login/login.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import "./login.css";
 
 export interface LoginFormProps extends React.HTMLProps<HTMLFormElement> {
-    onSubmit: (formData: { [key: string]: string }) => void;
+	onSubmit: (formData: { [key: string]: string }) => void;
 }
 
 export function LoginForm (props: LoginFormProps) {
@@ -17,7 +17,7 @@ export function LoginForm (props: LoginFormProps) {
 			onSubmit={(event) => {
 				event.preventDefault();
 				const elementsArray = Array.from(event.currentTarget.elements);
-				const formData = elementsArray.reduce((acc: { [key: string]: string }, elem: any) => {
+				const formData = elementsArray.reduce((acc: { [key: string]: string }, elem: object) => {
 					if (elem.id) {
 						acc[elem.id] = elem.value;
 					}
@@ -64,21 +64,21 @@ export function LoginForm (props: LoginFormProps) {
 }
 
 export interface LoginProps {
-    onLogIn: (formData: { [key: string]: string }) => void;
+	onLogIn: (formData: { [key: string]: string }) => void;
 }
 
 export function Login (props: LoginProps) {
-    return (
-        <div className="page lists-show">
-            <div className="loginscreen">
-                <div className="login-screen-container">
-                    <header className="loginscreen-header">
-                        <h1 className="loginscreen-heading">Taskbox</h1>
-                        <p className="loginscreen-text">Sign in to your account</p>
-                    </header>
-                    <LoginForm onSubmit={props.onLogIn} />
-                </div>
-            </div>
-        </div>
-    );
+	return (
+		<div className="page lists-show">
+			<div className="loginscreen">
+				<div className="login-screen-container">
+					<header className="loginscreen-header">
+						<h1 className="loginscreen-heading">Taskbox</h1>
+						<p className="loginscreen-text">Sign in to your account</p>
+					</header>
+					<LoginForm onSubmit={props.onLogIn} />
+				</div>
+			</div>
+		</div>
+	);
 }

src/tasks/task-list.tsx

@@ -1,13 +1,12 @@
-import * as React from "react";
 import { Task, type TaskProps } from "./task";
 
 export interface TaskListProps {
-    loading?: boolean;
-    tasks: TaskProps["task"][];
-    onTogglePinTask: TaskProps["onTogglePinTask"];
-    onArchiveTask: TaskProps["onArchiveTask"];
-    onEditTitle: TaskProps["onEditTitle"];
-    onDeleteTask: TaskProps["onDeleteTask"];
+	loading?: boolean;
+	tasks: TaskProps["task"][];
+	onTogglePinTask: TaskProps["onTogglePinTask"];
+	onArchiveTask: TaskProps["onArchiveTask"];
+	onEditTitle: TaskProps["onEditTitle"];
+	onDeleteTask: TaskProps["onDeleteTask"];
 }
 
 export function TaskList (props: TaskListProps) {
@@ -20,63 +19,63 @@ export function TaskList (props: TaskListProps) {
 		onDeleteTask,
 	} = props;
 
-    const events = {
-        onTogglePinTask,
-        onArchiveTask,
-        onEditTitle,
-        onDeleteTask,
-    };
+	const events = {
+		onTogglePinTask,
+		onArchiveTask,
+		onEditTitle,
+		onDeleteTask,
+	};
 
-    const LoadingRow = (
-        <div className="loading-item">
-            <span className="glow-checkbox" />
-            <span className="glow-text">
-                <span>Loading</span> <span>cool</span> <span>state</span>
-            </span>
-        </div>
-    );
+	const LoadingRow = (
+		<div className="loading-item">
+			<span className="glow-checkbox" />
+			<span className="glow-text">
+				<span>Loading</span> <span>cool</span> <span>state</span>
+			</span>
+		</div>
+	);
 
-    if (loading) {
-        return (
-            <div className="list-items" data-testid="loading" key={"loading"}>
-                {LoadingRow}
-                {LoadingRow}
-                {LoadingRow}
-                {LoadingRow}
-                {LoadingRow}
-                {LoadingRow}
-            </div>
-        );
-    }
+	if (loading) {
+		return (
+			<div className="list-items" data-testid="loading" key={"loading"}>
+				{LoadingRow}
+				{LoadingRow}
+				{LoadingRow}
+				{LoadingRow}
+				{LoadingRow}
+				{LoadingRow}
+			</div>
+		);
+	}
 
-    if (tasks.length === 0) {
-        return (
-            <div className="list-items" key={"empty"} data-testid="empty">
-                <div className="wrapper-message">
-                    <span className="icon-check" />
-                    <p className="title-message">You have no tasks</p>
-                    <p className="subtitle-message">Sit back and relax</p>
-                </div>
-            </div>
-        );
-    }
+	if (tasks.length === 0) {
+		return (
+			<div className="list-items" key={"empty"} data-testid="empty">
+				<div className="wrapper-message">
+					<span className="icon-check" />
+					<p className="title-message">You have no tasks</p>
+					<p className="subtitle-message">Sit back and relax</p>
+				</div>
+			</div>
+		);
+	}
 
-    const tasksInOrder = [
-        ...tasks.filter((t) => t.state === "TASK_PINNED"),
-        ...tasks.filter((t) => t.state !== "TASK_PINNED"),
-    ];
+	const tasksInOrder = [
+		...tasks.filter((t) => t.state === "TASK_PINNED"),
+		...tasks.filter((t) => t.state !== "TASK_PINNED"),
+	];
 
-    return (
-        <div
-            className="list-items"
-            data-testid="success"
-            key={"success"}
-            role="list"
-            aria-label="tasks"
-        >
-            {tasksInOrder.map((task) => (
-                <Task key={task.id} task={task} {...events} />
-            ))}
-        </div>
-    );
+	return (
+		<div
+			className="list-items"
+			data-testid="success"
+			key={"success"}
+			role="list"
+			aria-label="tasks"
+		>
+			{tasksInOrder.map((task) => (
+				<Task key={task.id} task={task} {...events} />
+			))}
+		</div>
+	);
 }