feat: migrate projects to external repositories

- Update dependencies.
- Remove unused dependencies.
- Add `.npmcheckrc` file and a README.
- Update recommended extensions.
- Remove all external projects.
- Update project card design.
- Use the `Image` component from `Next.js`.
- Remove `ConditionallyRender` component.

.husky/pre-commit

@@ -1,6 +1,3 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 # The git command throws an error if there are local uncommitted changes thus preventing a push. 
 # The test command runs all tests not in watch mode and prevents a push if any test fails.
 npx lint-staged

.husky/pre-push

@@ -1,6 +1,3 @@
-#!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
-
 # The git command throws an error if there are local uncommitted changes thus preventing a push. 
 # The test command runs all tests not in watch mode and prevents a push if any test fails.
 git diff HEAD --quiet && npm run test -- --watchAll=false

.npmcheckrc

@@ -0,0 +1,13 @@
+{
+  "depcheck": {
+    "ignoreMatches": [
+      "@fontsource/roboto",
+      "@types/node",
+      "@types/react-dom",
+      "babel-jest",
+      "identity-obj-proxy",
+      "husky",
+      "jest-environment-jsdom"
+    ]
+  }
+}

.vscode/extensions.json

@@ -2,8 +2,10 @@
   "recommendations": [
     "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
+    "DavidAnson.vscode-markdownlint",
     "dsznajder.es7-react-js-snippets",
-    "gruntfuggly.todo-tree",
+    "formulahendry.auto-rename-tag",
+    "Gruntfuggly.todo-tree",
     "PKief.material-icon-theme",
     "richie5um2.vscode-sort-json",
     "streetsidesoftware.code-spell-checker",

.vscode/settings.json

@@ -1,5 +1,5 @@
 {
-  "cSpell.words": ["fontsource", "mediaquery", "roboto", "testid"],
+  "cSpell.words": ["fontsource", "mediaquery", "npmcheckrc", "roboto"],
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit"
   },

README.md

@@ -0,0 +1,24 @@
+# Why the File `.npmcheckrc`?
+
+Packages that seem to be unused are mentioned in this file so that they are ignored
+when running `npm-check` on the command line.
+
+## `@fontsource/roboto` and `@types/react-dom`
+
+These packages are required for [MUI](https://mui.com/material-ui/getting-started/installation/#default-installation).
+
+## `@types/node`
+
+This is for TypeScript intellisense in a node environment.
+
+## `babel-jest` and `jest-environment-jsdom`
+
+These are required for using Jest with Next.
+
+## `identity-obj-proxy`
+
+The reason is unknown. Perhaps it is something to do with `ESLint`?
+
+## `husky`
+
+This package is used for a [pre-commit hook](.husky\pre-commit) and a [pre-push hook](.husky\pre-push).

app/components/BoxWithBackgroundImage/BoxWithBackgroundImage.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen } from "@testing-library/react";
+
+import { BoxWithBackgroundImage } from "app/components/BoxWithBackgroundImage";
+import { IMAGES } from "app/data/images";
+
+describe("test BoxWithBackgroundImage", () => {
+  test("renders an image", () => {
+    render(
+      <BoxWithBackgroundImage alt="" sizes="100vw" src={IMAGES[0].source} />,
+    );
+
+    expect(screen.getByRole("img")).toBeInTheDocument();
+  });
+
+  test("The photo has the correct alt text", () => {
+    const image = IMAGES[0];
+
+    render(
+      <BoxWithBackgroundImage
+        alt={image.title}
+        sizes="100vw"
+        src={image.source}
+      />,
+    );
+
+    const imageElement = screen.getByRole("img", {
+      name: image.title,
+    }) as HTMLImageElement;
+
+    expect(imageElement).toBeInTheDocument();
+  });
+
+  test("renders supplied children", () => {
+    const children = "test";
+
+    render(
+      <BoxWithBackgroundImage alt="" sizes="100vw" src={IMAGES[0].source}>
+        {children}
+      </BoxWithBackgroundImage>,
+    );
+
+    expect(screen.getByText(children)).toBeInTheDocument();
+  });
+});

app/components/BoxWithBackgroundImage/BoxWithBackgroundImage.tsx

@@ -0,0 +1,61 @@
+// eslint-disable-next-line import/named
+import { Box, BoxProps } from "@mui/material";
+import Image, { ImageProps } from "next/image";
+
+import { Children } from "app/types/commonProps";
+
+type BoxWithBackgroundImageProps = Pick<
+  BoxProps,
+  | "component"
+  | "display"
+  | "flexDirection"
+  | "height"
+  | "justifyContent"
+  | "margin"
+  | "sx"
+  | "width"
+> &
+  Required<Pick<ImageProps, "alt" | "sizes" | "src">> &
+  Partial<Children>;
+
+export function BoxWithBackgroundImage({
+  alt,
+  children,
+  component,
+  display,
+  flexDirection,
+  height,
+  justifyContent,
+  margin,
+  sizes,
+  src,
+  sx,
+  width,
+}: BoxWithBackgroundImageProps) {
+  return (
+    <Box
+      component={component}
+      display={display}
+      flexDirection={flexDirection}
+      height={height}
+      justifyContent={justifyContent}
+      margin={margin}
+      overflow="hidden"
+      position="relative"
+      sx={sx}
+      width={width}
+    >
+      <Image
+        alt={alt}
+        fill
+        sizes={sizes}
+        src={src}
+        style={{
+          objectFit: "cover",
+        }}
+      />
+
+      {children}
+    </Box>
+  );
+}

app/components/BoxWithBackgroundImage/index.ts

@@ -0,0 +1 @@
+export { BoxWithBackgroundImage } from "./BoxWithBackgroundImage";