Adjust eslint and prettier settings

.eslintrc.json

@@ -7,19 +7,19 @@
   },
   "extends": [
     "next/core-web-vitals",
-    "plugin:storybook/recommended",
+    "prettier",
     "plugin:deprecation/recommended"
   ],
   "rules": {
+    "prettier/prettier": ["error"],
     "@typescript-eslint/no-unused-vars": "off",
     "unused-imports/no-unused-imports": "error",
     "unused-imports/no-unused-vars": [
-      "warn",
+      "error",
       { "vars": "all", "varsIgnorePattern": "^_", "args": "after-used", "argsIgnorePattern": "^_" }
     ],
-    "no-console": ["error", { "allow": ["warn"] }],
-    "quotes": ["error", "double"]
+    "no-console": ["error", { "allow": ["warn", "error"] }]
   },
-  "plugins": ["unused-imports"],
+  "plugins": ["prettier", "unused-imports"],
   "ignorePatterns": ["**/__generated__/**/*"]
-}
+}

.prettierrc

@@ -2,9 +2,9 @@
   "arrowParens": "avoid",
   "bracketSameLine": false,
   "bracketSpacing": false,
-  "printWidth": 500,
+  "printWidth": 120,
   "semi": false,
-  "singleAttributePerLine": true,
+  "singleAttributePerLine": false,
   "singleQuote": false,
   "tabWidth": 2,
   "trailingComma": "es5",

app/@modal/(.)gallery/[...uuid]/page.tsx

@@ -23,7 +23,9 @@ const Page = async ({params: {uuid}}: Props) => {
   const prevImageIndex = paragraph.suGalleryImages?.[currentImageIndex - 1] ? currentImageIndex - 1 : -1
   const nextImageIndex = paragraph.suGalleryImages?.[currentImageIndex + 1] ? currentImageIndex + 1 : -1
 
-  let galleryImages = mediaUuid ? paragraph.suGalleryImages?.filter(image => image.id === mediaUuid) : paragraph.suGalleryImages
+  let galleryImages = mediaUuid
+    ? paragraph.suGalleryImages?.filter(image => image.id === mediaUuid)
+    : paragraph.suGalleryImages
 
   galleryImages = galleryImages?.filter(image => !!image.suGalleryImage?.url)
 
@@ -45,10 +47,7 @@ const Page = async ({params: {uuid}}: Props) => {
                 />
               </picture>
               {galleryImage.suGalleryCaption && (
-                <figcaption
-                  id={captionId}
-                  className="m-0 table-caption w-full caption-bottom bg-white p-5 text-right"
-                >
+                <figcaption id={captionId} className="m-0 table-caption w-full caption-bottom bg-white p-5 text-right">
                   {galleryImage.suGalleryCaption}
                 </figcaption>
               )}

app/[...slug]/metadata.tsx

@@ -1,4 +1,15 @@
-import {Maybe, NodeStanfordEvent, NodeStanfordNews, NodeStanfordPage, NodeStanfordPerson, NodeStanfordPolicy, NodeSupBook, NodeUnion, ParagraphStanfordWysiwyg, ParagraphUnion} from "@lib/gql/__generated__/drupal.d"
+import {
+  Maybe,
+  NodeStanfordEvent,
+  NodeStanfordNews,
+  NodeStanfordPage,
+  NodeStanfordPerson,
+  NodeStanfordPolicy,
+  NodeSupBook,
+  NodeUnion,
+  ParagraphStanfordWysiwyg,
+  ParagraphUnion,
+} from "@lib/gql/__generated__/drupal.d"
 import {Metadata} from "next"
 import {decode} from "html-entities"
 
@@ -84,9 +95,15 @@ const getBookMetaData = (node: NodeSupBook, page: "excerpt" | "copy-requests" |
 }
 
 const getBasicPageMetaData = (node: NodeStanfordPage) => {
-  const pageTitleBannerImage = node.suPageBanner?.__typename === "ParagraphStanfordPageTitleBanner" && node.suPageBanner.suTitleBannerImage.mediaImage
-  const firstCarouselBannerImage = node.suPageBanner?.__typename === "ParagraphSupCarousel" && (node.suPageBanner.supCarouselSlides[0].supSlideImage?.mediaImage || node.suPageBanner.supCarouselSlides[0].supSlideBook?.supBookImage?.mediaImage)
-  const bannerImage = node.suPageBanner?.__typename === "ParagraphStanfordBanner" && node.suPageBanner.suBannerImage?.mediaImage
+  const pageTitleBannerImage =
+    node.suPageBanner?.__typename === "ParagraphStanfordPageTitleBanner" &&
+    node.suPageBanner.suTitleBannerImage.mediaImage
+  const firstCarouselBannerImage =
+    node.suPageBanner?.__typename === "ParagraphSupCarousel" &&
+    (node.suPageBanner.supCarouselSlides[0].supSlideImage?.mediaImage ||
+      node.suPageBanner.supCarouselSlides[0].supSlideBook?.supBookImage?.mediaImage)
+  const bannerImage =
+    node.suPageBanner?.__typename === "ParagraphStanfordBanner" && node.suPageBanner.suBannerImage?.mediaImage
   const image = node.suPageImage?.mediaImage || pageTitleBannerImage || bannerImage || firstCarouselBannerImage
 
   const description = node.suPageDescription || getFirstText(node.suPageComponents)
@@ -178,7 +195,9 @@ const getPolicyMetaData = (node: NodeStanfordPolicy) => {
 }
 
 const getFirstText = (components?: Maybe<ParagraphUnion[]>) => {
-  const firstWysiwyg = components?.find(component => component.__typename === "ParagraphStanfordWysiwyg") as ParagraphStanfordWysiwyg
+  const firstWysiwyg = components?.find(
+    component => component.__typename === "ParagraphStanfordWysiwyg"
+  ) as ParagraphStanfordWysiwyg
   if (firstWysiwyg) {
     return getCleanDescription(firstWysiwyg.suWysiwygText?.processed)
   }

app/api/revalidate/page/route.tsx

@@ -5,7 +5,8 @@ export const revalidate = 0
 
 export const GET = async (request: NextRequest) => {
   const secret = request.nextUrl.searchParams.get("secret")
-  if (secret !== process.env.DRUPAL_REVALIDATE_SECRET) return NextResponse.json({message: "Invalid token"}, {status: 403})
+  if (secret !== process.env.DRUPAL_REVALIDATE_SECRET)
+    return NextResponse.json({message: "Invalid token"}, {status: 403})
 
   let path = request.nextUrl.searchParams.get("slug")
   if (!path || path.startsWith("/node/")) return NextResponse.json({message: "Invalid slug"}, {status: 400})

app/api/revalidate/route.tsx

@@ -7,7 +7,8 @@ export const revalidate = 0
 
 export const GET = async (request: NextRequest) => {
   const secret = request.nextUrl.searchParams.get("secret")
-  if (secret !== process.env.DRUPAL_REVALIDATE_SECRET) return NextResponse.json({message: "Invalid token"}, {status: 403})
+  if (secret !== process.env.DRUPAL_REVALIDATE_SECRET)
+    return NextResponse.json({message: "Invalid token"}, {status: 403})
 
   let path = request.nextUrl.searchParams.get("slug")
   if (!path || path.startsWith("/node/")) return NextResponse.json({message: "Invalid slug"}, {status: 400})

app/error.tsx

@@ -7,11 +7,11 @@ const ErrorPage = ({error, reset}: {error: Error; reset: () => void}) => {
   return (
     <div className="my-50 centered mt-32">
       <h1>Something went wrong!</h1>
-      <p>Apologies, an error occurred when attempting to preset the page you are attempting to view. Please try a different path.</p>
-      <Button
-        buttonElem
-        onClick={() => reset()}
-      >
+      <p>
+        Apologies, an error occurred when attempting to preset the page you are attempting to view. Please try a
+        different path.
+      </p>
+      <Button buttonElem onClick={() => reset()}>
         Try again
       </Button>
     </div>

app/gallery/[...uuid]/page.tsx

@@ -22,7 +22,9 @@ const Page = async ({params: {uuid}}: Props) => {
   if (paragraphQuery.paragraph?.__typename !== "ParagraphStanfordGallery") notFound()
 
   const paragraph = paragraphQuery.paragraph as ParagraphStanfordGallery
-  let galleryImages = mediaUuid ? paragraph.suGalleryImages?.filter(image => image.id === mediaUuid) : paragraph.suGalleryImages
+  let galleryImages = mediaUuid
+    ? paragraph.suGalleryImages?.filter(image => image.id === mediaUuid)
+    : paragraph.suGalleryImages
 
   galleryImages = galleryImages?.filter(image => !!image.suGalleryImage?.url)
 

app/layout.tsx

@@ -14,7 +14,10 @@ const appleIcons: Icon[] = [60, 72, 76, 114, 120, 144, 152, 180].map(size => ({
 }))
 
 const icons: Icon[] = [16, 32, 96, 128, 192, 196].map(size => ({
-  url: size === 128 ? `https://www-media.stanford.edu/assets/favicon/favicon-${size}.png` : `https://www-media.stanford.edu/assets/favicon/favicon-${size}x${size}.png`,
+  url:
+    size === 128
+      ? `https://www-media.stanford.edu/assets/favicon/favicon-${size}.png`
+      : `https://www-media.stanford.edu/assets/favicon/favicon-${size}x${size}.png`,
   sizes: `${size}x${size}`,
 }))
 
@@ -47,30 +50,21 @@ export const revalidate = false
 const RootLayout = ({children, modal}: {children: React.ReactNode; modal: React.ReactNode}) => {
   const isDevMode = process.env.NODE_ENV === "development"
   return (
-    <html
-      lang="en"
-      className={montserrat.className}
-    >
+    <html lang="en" className={montserrat.className}>
       <UserAnalytics />
       <DrupalWindowSync />
       {isDevMode && <Editori11y />}
 
       <body className="text-stone-dark">
         <nav aria-label="Skip Links">
-          <a
-            href="#main-content"
-            className="skiplink"
-          >
+          <a href="#main-content" className="skiplink">
             Skip to main content
           </a>
         </nav>
 
         <div className="flex min-h-screen flex-col">
           <PageHeader />
-          <main
-            id="main-content"
-            className="mb-32 flex-grow"
-          >
+          <main id="main-content" className="mb-32 flex-grow">
             {children}
 
             <BackToTop />

app/page.tsx

@@ -20,10 +20,7 @@ const Home = async () => {
   return (
     <article>
       {entity.suPageBanner?.__typename === "ParagraphSupCarousel" && (
-        <SupCarouselParagraph
-          paragraph={entity.suPageBanner}
-          isTopBanner
-        />
+        <SupCarouselParagraph paragraph={entity.suPageBanner} isTopBanner />
       )}
 
       {entity.suPageComponents && <Rows components={entity.suPageComponents} />}

app/preview/[...slug]/page.tsx

@@ -15,10 +15,7 @@ const PreviewPage = async ({params}: PageProps) => {
 
   return (
     <>
-      <UnpublishedBanner
-        status={entity.status}
-        message="Unpublished Page"
-      />
+      <UnpublishedBanner status={entity.status} message="Unpublished Page" />
       <NodePage node={entity} />
     </>
   )

app/preview/layout.tsx

@@ -9,10 +9,7 @@ const Layout = ({children}: {children: React.ReactNode}) => {
       {inPreview && (
         <>
           <Editori11y />
-          <UnpublishedBanner
-            status={false}
-            message="Preview Mode"
-          />
+          <UnpublishedBanner status={false} message="Preview Mode" />
         </>
       )}
       {children}

app/search/page.tsx

@@ -28,30 +28,31 @@ const Page = async ({searchParams}: {searchParams?: {[_key: string]: string}}) =
     initialState.refinementList.book_type = ["book"]
   }
   if (searchParams?.["published-min"] || searchParams?.["published-max"]) {
-    initialState.range = {book_published: (searchParams["published-min"] || "0") + ":" + (searchParams["published-max"] || "3000")}
+    initialState.range = {
+      book_published: (searchParams["published-min"] || "0") + ":" + (searchParams["published-max"] || "3000"),
+    }
   }
 
   return (
     <div className="centered mt-32">
       <div className="mx-auto 3xl:w-10/12">
-        <H1
-          className="mb-44"
-          id="page-title"
-        >
+        <H1 className="mb-44" id="page-title">
           Search
         </H1>
 
-        {siteSettingsConfig?.suSiteAlgoliaId && siteSettingsConfig?.suSiteAlgoliaIndex && siteSettingsConfig?.suSiteAlgoliaSearch && (
-          <>
-            <AlgoliaSearchForm
-              appId={siteSettingsConfig.suSiteAlgoliaId}
-              searchIndex={siteSettingsConfig.suSiteAlgoliaIndex}
-              searchApiKey={siteSettingsConfig.suSiteAlgoliaSearch}
-              initialUiState={initialState}
-            />
-            <noscript>Please enable javascript to view search results</noscript>
-          </>
-        )}
+        {siteSettingsConfig?.suSiteAlgoliaId &&
+          siteSettingsConfig?.suSiteAlgoliaIndex &&
+          siteSettingsConfig?.suSiteAlgoliaSearch && (
+            <>
+              <AlgoliaSearchForm
+                appId={siteSettingsConfig.suSiteAlgoliaId}
+                searchIndex={siteSettingsConfig.suSiteAlgoliaIndex}
+                searchApiKey={siteSettingsConfig.suSiteAlgoliaSearch}
+                initialUiState={initialState}
+              />
+              <noscript>Please enable javascript to view search results</noscript>
+            </>
+          )}
       </div>
     </div>
   )

package.json

@@ -15,8 +15,7 @@
   },
   "dependencies": {
     "@formkit/auto-animate": "^0.8.2",
-    "@heroicons/react": "^2.1.4",
-    "@js-temporal/polyfill": "^0.4.4",
+    "@heroicons/react": "^2.1.5",
     "@mui/base": "5.0.0-dev.20240529-082515-213b5e33ab",
     "@next/third-parties": "^14.2.5",
     "@tailwindcss/container-queries": "^0.1.1",
@@ -28,15 +27,12 @@
     "clsx": "^2.1.1",
     "decanter": "^7.3.0",
     "drupal-jsonapi-params": "^2.3.1",
-    "eslint": "^8.57.0",
-    "eslint-config-next": "^14.2.5",
     "graphql": "^16.9.0",
     "graphql-request": "^7.1.0",
     "graphql-tag": "^2.12.6",
     "html-entities": "^2.5.2",
     "html-react-parser": "^5.1.10",
     "next": "^14.2.5",
-    "node-cache": "^5.1.2",
     "plaiceholder": "^3.0.0",
     "postcss": "^8.4.39",
     "qs": "^6.12.3",
@@ -71,13 +67,18 @@
     "@types/react-slick": "^0.23.13",
     "concurrently": "^8.2.2",
     "encoding": "^0.1.13",
+    "eslint": "^8.57.0",
+    "eslint-config-next": "^14.2.5",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-deprecation": "^3.0.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-storybook": "^0.8.0",
     "eslint-plugin-unused-imports": "^4.0.0",
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react-docgen": "^7.0.3",
     "storybook": "^8.2.1",
+    "storybook-addon-module-mock": "^1.3.0",
     "tsconfig-paths-webpack-plugin": "^4.1.0"
   },
   "packageManager": "[email protected]"