infra: Enable eslint-plugin-unused-imports on the project

.eslintrc.json

@@ -1,5 +1,8 @@
 {
     "extends": "next",
+    "plugins": [
+        "unused-imports"
+    ],
     "rules": {
         "eol-last": [ "error", "always" ],
         "eqeqeq": [ "error", "always" ],
@@ -24,6 +27,14 @@
         "prefer-const": "warn",
         "quotes": [ "error", "single" ],
         "react/jsx-indent-props": "off",
-        "react/no-unescaped-entities": "off"
+        "react/no-unescaped-entities": "off",
+        "unused-imports/no-unused-imports": "error",
+        "unused-imports/no-unused-vars": [
+            "warn",
+            {
+                "args": "none",
+                "caughtErrors": "none"
+            }
+        ]
     }
 }

app/admin/AdminTheme.tsx

@@ -5,7 +5,7 @@
 
 import type { PaletteMode } from '@mui/material';
 import type { Theme, ThemeOptions } from '@mui/material/styles';
-import { createTheme, darken, lighten } from '@mui/material/styles';
+import { createTheme } from '@mui/material/styles';
 import { deepmerge } from '@mui/utils';
 
 import grey from '@mui/material/colors/grey';

app/admin/components/ExpandableSection.tsx

@@ -56,7 +56,7 @@ export function ExpandableSection(props: React.PropsWithChildren<ExpandableSecti
             </AccordionSummary>
             <AccordionDetails sx={{ paddingTop: 0 }}>
                 <Stack direction="column" spacing={2}>
-                    {props.children}
+                    {children}
                 </Stack>
             </AccordionDetails>
         </Paper>

app/admin/content/ContentEditorMdx.tsx

@@ -13,8 +13,8 @@ import type { JsxComponentDescriptor, MDXEditorMethods } from '@mdxeditor/editor
 import {
     BlockTypeSelect, BoldItalicUnderlineToggles, CreateLink, DiffSourceToggleWrapper,
     GenericJsxEditor, ListsToggle, MDXEditor, Separator, UndoRedo, diffSourcePlugin, headingsPlugin,
-    imagePlugin, jsxPlugin, linkPlugin, listsPlugin, markdownShortcutPlugin, quotePlugin,
-    tablePlugin, thematicBreakPlugin, toolbarPlugin } from '@mdxeditor/editor';
+    jsxPlugin, linkPlugin, listsPlugin, markdownShortcutPlugin, quotePlugin, tablePlugin,
+    thematicBreakPlugin, toolbarPlugin } from '@mdxeditor/editor';
 
 import { unrecognisedNodePlugin } from './mdxEditorPlugins';
 

app/admin/events/[event]/EventSalesGraph.tsx

@@ -162,7 +162,7 @@ export function EventSalesGraph(props: EventSalesGraphProps) {
             .call(formattedLeftAxis(scaleY));
 
         // Create a clip path:
-        const clip = element.append('defs')
+        element.append('defs')
             .append('SVG:clipPath')
             .attr('id', 'clip')
             .append('SVG:rect')

app/admin/events/[event]/EventTeamCard.tsx

@@ -35,8 +35,7 @@ interface TeamIdentityHeaderProps extends BoxProps {
  * with a font colour that provides an appropriate amount of context.
  */
 const TeamIdentityHeader = styled((props: TeamIdentityHeaderProps) => {
-    const { darkThemeColour, lightThemeColour, ...rest } = props;
-    return <Box {...rest} />;
+    return <Box {...props} />;
 })(({ darkThemeColour, lightThemeColour, theme }) => {
     const backgroundColor = theme.palette.mode === 'light' ? lightThemeColour : darkThemeColour;
     const color = theme.palette.getContrastText(backgroundColor);

app/admin/events/[event]/[team]/applications/Header.tsx

@@ -34,7 +34,7 @@ interface HeaderProps {
  * applications are no longer being accepted. These settings can be changed in Event Settings.
  */
 export function Header(props: HeaderProps) {
-    const { event, team, user } = props;
+    const { event, team } = props;
 
     return (
         <Paper sx={{ p: 2 }}>

app/admin/events/[event]/[team]/schedule/ScheduleImpl.tsx

@@ -291,10 +291,8 @@ export function ScheduleImpl(props: ScheduleImplProps) {
         let estimatedScheduleHeight = /* header= */ 50;
         for (const resource of resources) {
             estimatedScheduleHeight += /* section header= */ 32;
-            if (!!resource.children) {
-                for (const child of resource.children)
-                    estimatedScheduleHeight += /* resource =*/ 32;
-            }
+            if (!!resource.children)
+                estimatedScheduleHeight += resource.children.length * /* resource =*/ 32;
         }
 
         // Substract 100 from the `windowHeight` to ensure that the essential UI around the tool

app/admin/events/[event]/[team]/shifts/ShiftTable.tsx

@@ -11,7 +11,7 @@ import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import PaletteIcon from '@mui/icons-material/Palette';
 import SentimentSatisfiedAltIcon from '@mui/icons-material/SentimentSatisfiedAlt';
 import Tooltip from '@mui/material/Tooltip';
-import Typography, { type TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
 
 import type { EventShiftContext, EventShiftRowModel } from '@app/api/admin/event/shifts/[[...id]]/route';
 import { ExcitementIcon } from '@app/admin/components/ExcitementIcon';

app/admin/events/[event]/[team]/shifts/page.tsx

@@ -22,7 +22,7 @@ import { verifyAccessAndFetchPageInfo } from '@app/admin/events/verifyAccessAndF
  * end up out of sync.
  */
 export default async function EventTeamShiftsPage(props: NextPageParams<'event' | 'team'>) {
-    const { access, event, team, user } = await verifyAccessAndFetchPageInfo(props.params);
+    const { access, event, team } = await verifyAccessAndFetchPageInfo(props.params);
 
     const accessScope = { event: event.slug, team: team.slug };
 

app/admin/events/[event]/[team]/volunteers/[volunteer]/VolunteerHeader.tsx

@@ -402,7 +402,7 @@ interface VolunteerHeaderProps {
  * to change their participation. The exact actions depend on the access level of the user.
  */
 export function VolunteerHeader(props: VolunteerHeaderProps) {
-    const { event, team, volunteer, user } = props;
+    const { event, team, volunteer } = props;
 
     const allowSilent = props.canUpdateWithoutNotification;
 

app/admin/events/[event]/program/requests/page.tsx

@@ -14,7 +14,7 @@ import { kRegistrationStatus } from '@lib/database/Types';
  * help from the volunteering teams. Requests must be managed directly by our team.
  */
 export default async function ProgramRequestsPage(props: NextPageParams<'event'>) {
-    const { access, event, user } = await verifyAccessAndFetchPageInfo(props.params);
+    const { access, event } = await verifyAccessAndFetchPageInfo(props.params);
 
     const leaders = await db.selectFrom(tUsersEvents)
         .innerJoin(tRoles)

app/admin/events/[event]/settings/EventParticipatingTeams.tsx

@@ -26,8 +26,6 @@ interface EventParticipatingTeamsProps {
  * will enable a more detailed section with settings specific to that team.
  */
 export function EventParticipatingTeams(props: EventParticipatingTeamsProps) {
-    const { event } = props;
-
     const context = { event: props.event.slug };
     const columns: RemoteDataTableColumn<EventTeamRowModel>[] = [
         {

app/admin/events/page.tsx

@@ -17,7 +17,7 @@ import { kAnyEvent, kAnyTeam } from '@lib/auth/AccessControl';
  * events. Events cannot be removed through the portal, although they can be hidden.
  */
 export default async function EventsPage() {
-    const { access, user } = await requireAuthenticationContext({
+    const { access } = await requireAuthenticationContext({
         check: 'admin',
         permission: {
             permission: 'event.visible',

app/admin/volunteers/layout.tsx

@@ -17,9 +17,8 @@ import { or, requireAuthenticationContext } from '@lib/auth/AuthenticationContex
  * (signed in) user, although the available options will depend on the user's access level.
  */
 export default async function VolunteersLayout(props: React.PropsWithChildren) {
-
     // Note: keep this in sync with //admin/layout.tsx
-    const { access, user } = await requireAuthenticationContext({
+    const { access } = await requireAuthenticationContext({
         check: 'admin',
         permission: or(
             'volunteer.export',

app/api/Action.test.ts

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a MIT license that can be found in the LICENSE file.
 
 import { NextRequest } from 'next/server';
-import { forbidden } from 'next/navigation';
 import { serialize } from 'cookie';
 import { z } from 'zod';
 

app/api/admin/program/activities/[[...id]]/route.ts

@@ -290,7 +290,7 @@ createDataTableApi(kProgramActivityRowModel, kProgramActivityContext, {
                     locationId = activity.locationId;
                 } else if (!!activity.timeslots.length) {
                     const uniqueLocations = new Set<number>();
-                    for (const { locationId, locationName } of activity.timeslots)
+                    for (const { locationId } of activity.timeslots)
                         uniqueLocations.add(locationId);
 
                     if (uniqueLocations.size === 1) {

app/api/ai/updateSettings.ts

@@ -7,7 +7,7 @@ import type { ActionProps } from '../Action';
 import type { ApiDefinition, ApiRequest, ApiResponse } from '../Types';
 import { Log, kLogSeverity, kLogType } from '@lib/Log';
 import { executeAccessCheck } from '@lib/auth/AuthenticationContext';
-import { writeSetting, writeSettings } from '@lib/Settings';
+import { writeSettings } from '@lib/Settings';
 
 /**
  * Interface definition for the Generative AI API, exposed through /api/ai.

app/api/event/schedule/PublicSchedule.ts

@@ -3,7 +3,7 @@
 
 import { z } from 'zod';
 
-import { type VendorTeam, kRoleBadge, kVendorTeam as kVendorTeamEnum } from '@lib/database/Types';
+import { kRoleBadge, kVendorTeam as kVendorTeamEnum } from '@lib/database/Types';
 
 /**
  * Represents the information shared for a particular vendor team. The actual information regarding

app/api/webhook/twilio/inbound/route.ts

@@ -14,6 +14,7 @@ import { kTwilioWebhookEndpoint } from '@lib/database/Types';
  * generally either SMS or WhatsApp. An immediate response is expected.
  */
 export async function POST(request: NextRequest) {
+    // eslint-disable-next-line unused-imports/no-unused-vars
     const { authenticated, body } =
         await authenticateAndRecordTwilioRequest(request, kTwilioWebhookEndpoint.Inbound);
 

app/components/Markdown.tsx

@@ -12,7 +12,6 @@ import Alert from '@mui/material/Alert';
 import Box, { type BoxProps } from '@mui/material/Box';
 import { default as MuiLink, type LinkProps } from '@mui/material/Link';
 import Typography, { type TypographyProps } from '@mui/material/Typography';
-import { darken, lighten } from '@mui/material/styles';
 
 import { RemoteContent } from './RemoteContent';
 

app/display/DisplayController.tsx

@@ -52,6 +52,7 @@ export function DisplayController(props: React.PropsWithChildren) {
 
     // Periodically update the display's configuration using the `SWR` library. The interval can be
     // configured by the server, although will default to one update per five minutes.
+    // eslint-disable-next-line unused-imports/no-unused-vars
     const { data, error, isLoading, mutate } = useSWR<DisplayDefinition['response']>(url, fetcher, {
         refreshInterval: data => !!data ? data.config.updateFrequencyMs : kDefaultUpdateFrequencyMs,
     });

app/display/cards/ActiveVolunteersCard.tsx

@@ -3,7 +3,6 @@
 
 'use client';
 
-import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid2';
 import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';

app/lib/auth/AuthenticationContext.test.ts

@@ -1,9 +1,6 @@
 // Copyright 2023 Peter Beverloo & AnimeCon. All rights reserved.
 // Use of this source code is governed by a MIT license that can be found in the LICENSE file.
 
-import { getAccessFallbackHTTPStatus, isHTTPAccessFallbackError }
-    from 'next/dist/client/components/http-access-fallback/http-access-fallback';
-
 import { AccessControl } from './AccessControl';
 import { type SessionData, kSessionCookieName, sealSession } from './Session';
 import { executeAccessCheck, getAuthenticationContextFromHeaders } from './AuthenticationContext';

app/registration/[slug]/application/training/TrainingPreferencesForm.tsx

@@ -7,8 +7,6 @@ import { useMemo } from 'react';
 
 import { SelectElement } from '@proxy/react-hook-form-mui';
 
-import Grid from '@mui/material/Grid2';
-
 /**
  * Props accepted by the <TrainingPreferencesForm> component.
  */

app/registration/[slug]/application/training/page.tsx

@@ -28,7 +28,7 @@ export default async function EventApplicationTrainingPage(props: NextPageParams
     if (!context || !context.registration || !context.user || !context.event.trainingEnabled)
         notFound();  // the event does not exist, or the volunteer is not signed in
 
-    const { access, environment, event, registration, slug, teamSlug, user } = context;
+    const { access, event, registration, slug, teamSlug, user } = context;
 
     const eligible = registration.trainingEligible;
     const override = access.can('event.trainings', { event: event.slug });

app/registration/authentication/RegisterDialog.tsx

@@ -68,6 +68,7 @@ export function RegisterDialog(props: RegisterDialogProps) {
         // client side to prevent sending it to the server altogether, the |rawBirthdate| because
         // we want to make sure that it's shared in a particular format, and the |username| because
         // it's only included in the form to help autofill providers in browsers.
+        // eslint-disable-next-line unused-imports/no-unused-vars
         const { rawBirthdate, username, password, ...rest } = data;
 
         // Format the |birthdate| in YYYY-MM-DD format because that's the only sensible format to

app/schedule/[event]/ScheduleContextManager.tsx

@@ -47,6 +47,7 @@ export function ScheduleContextManager(props: React.PropsWithChildren<ScheduleCo
 
     }, [ props.event ]);
 
+    // eslint-disable-next-line unused-imports/no-unused-vars
     const { data, error, isLoading, mutate } = useSWR<PublicSchedule>(endpoint, scheduleFetcher, {
         refreshInterval: data => !!data ? data.config.updateFrequencyMs : kDefaultUpdateFrequencyMs,
     });

app/schedule/[event]/ScheduleTheme.tsx

@@ -10,7 +10,7 @@ import type { SxProps } from '@mui/system';
 import type { Theme } from '@mui/material/styles';
 import { ThemeProvider } from '@mui/material/styles';
 import { createTheme } from '@mui/material/styles';
-import { darken, decomposeColor, emphasize, lighten } from '@mui/system/colorManipulator';
+import { decomposeColor, lighten } from '@mui/system/colorManipulator';
 import useMediaQuery from '@mui/material/useMediaQuery';
 
 import Box from '@mui/material/Box';

app/schedule/[event]/components/Header.tsx

@@ -3,8 +3,6 @@
 
 'use client';
 
-import type { SxProps } from '@mui/system';
-import type { Theme } from '@mui/material/styles';
 import ListItemText from '@mui/material/ListItemText';
 import ListItem from '@mui/material/ListItem';
 import List from '@mui/material/List';
@@ -37,7 +35,7 @@ interface HeaderProps {
  * of the scheduling app. The header is not actionable by default.
  */
 export function Header(props: HeaderProps) {
-    const { title, subtitle, icon } = props;
+    const { title, subtitle } = props;
     return (
         <Paper sx={{ maxWidth: '100vw' }}>
             <List>

package.json

@@ -87,6 +87,7 @@
     "cross-env": "^7.0.3",
     "eslint": "9.19.0",
     "eslint-config-next": "^15.1.6",
+    "eslint-plugin-unused-imports": "^4.1.4",
     "fs-extra": "^11.3.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",