Merge branch 'main' into FE-learning

pookmish · Feb 28, 2024 · c64b3f5 · c64b3f5
2 parents f083173 + 2b647da
commit c64b3f5
Show file tree

Hide file tree

Showing 7 changed files with 178 additions and 152 deletions.
diff --git a/app/search/algolia-search.tsx b/app/search/algolia-search.tsx
@@ -1,16 +1,16 @@
 "use client";
 
 import algoliasearch from 'algoliasearch/lite';
-import {Hits, useInstantSearch, useSearchBox} from "react-instantsearch";
+import {useHits, useSearchBox} from "react-instantsearch";
 import {InstantSearchNext} from 'react-instantsearch-nextjs';
 import Link from "@components/elements/link";
 import {H2} from "@components/elements/headers";
 import Image from "next/image";
-import {useEffect, useId, useRef, useState} from "react";
+import {useRef} from "react";
 import Button from "@components/elements/button";
-import type {InstantSearch} from "instantsearch.js";
 import {UseSearchBoxProps} from "react-instantsearch";
 import {useRouter, useSearchParams} from "next/navigation";
+import {UseHitsProps} from "react-instantsearch-core/dist/es/connectors/useHits";
 
 type Props = {
   appId: string
@@ -32,17 +32,34 @@ const AlgoliaSearch = ({appId, searchIndex, searchApiKey}: Props) => {
         }}
         future={{preserveSharedStateOnUnmount: true}}
       >
-        <SearchBox/>
-
-        <Hits
-          hitComponent={Hit}
-          classNames={{list: "list-unstyled my-20", item: "border-b last:border-0"}}
-        />
+        <div className="space-y-10">
+          <SearchBox/>
+          <HitList/>
+        </div>
       </InstantSearchNext>
     </div>
   )
 }
 
+const HitList = (props: UseHitsProps) => {
+  const {hits} = useHits(props);
+  if (hits.length === 0) {
+    return (
+      <p>No results for your search. Please try another search.</p>
+    )
+  }
+
+  return (
+    <ul className="list-unstyled">
+      {hits.map(hit =>
+        <li key={hit.objectID} className="border-b border-gray-300 last:border-0">
+          <Hit hit={hit as unknown as AlgoliaHit}/>
+        </li>
+      )}
+    </ul>
+  )
+}
+
 type AlgoliaHit = {
   url: string
   title: string
@@ -57,7 +74,7 @@ const Hit = ({hit}: { hit: AlgoliaHit }) => {
   return (
     <article className="@container flex justify-between gap-20 py-12">
       <div>
-        <H2>
+        <H2 className="text-m2">
           <Link href={hit.url.replace(hitUrl.origin, '')}>
             {hit.title}
           </Link>
@@ -93,49 +110,41 @@ const Hit = ({hit}: { hit: AlgoliaHit }) => {
 const SearchBox = (props?: UseSearchBoxProps) => {
   const router = useRouter();
   const {query, refine} = useSearchBox(props);
-  const {status} = useInstantSearch();
-  const [inputValue, setInputValue] = useState<string>(query);
   const inputRef = useRef<HTMLInputElement>(null);
-  const inputId = useId();
 
-  const isSearchStalled = status === 'stalled';
-
-  useEffect(() => {
-    if (query) router.replace(`?q=${query}`, {scroll: false})
-  }, [router, query])
+  if (query) {
+    router.replace(`?q=${query}`, {scroll: false})
+  }
 
   return (
     <form
       className="flex flex-col gap-10"
       action=""
       role="search"
       noValidate
-      onSubmit={(event) => {
-        event.preventDefault();
-        event.stopPropagation();
-
-        if (inputRef.current) {
-          inputRef.current.blur();
-        }
-        refine(inputValue);
+      onSubmit={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        inputRef.current?.blur();
+        refine(inputRef.current?.value || "");
       }}
       onReset={(event) => {
         event.preventDefault();
         event.stopPropagation();
-        setInputValue('');
         refine('');
 
         if (inputRef.current) {
+          inputRef.current.value = '';
           inputRef.current.focus();
         }
       }}
     >
       <div className="flex flex-col">
-        <label className="font-bold" htmlFor={inputId}>
+        <label className="font-bold" htmlFor="search-input">
           Keywords<span className="sr-only">&nbsp;Search</span>
         </label>
         <input
-          id={inputId}
+          id="search-input"
           className="rounded-full hocus:shadow-2xl max-w-xl h-20 text-m1"
           ref={inputRef}
           autoComplete="on"
@@ -145,8 +154,7 @@ const SearchBox = (props?: UseSearchBoxProps) => {
           maxLength={512}
           type="search"
           required
-          value={inputValue}
-          onChange={e => setInputValue(e.currentTarget.value)}
+          defaultValue={query}
           autoFocus
         />
       </div>
@@ -157,24 +165,14 @@ const SearchBox = (props?: UseSearchBoxProps) => {
         <Button
           secondary
           type="reset"
-          className={inputValue.length === 0 || isSearchStalled ? 'hidden' : undefined}
+          className={query.length === 0 ? 'hidden' : undefined}
         >
           Reset
         </Button>
       </div>
-      <StatusMessage status={status} query={query}/>
+      <div className="sr-only" aria-live="polite" aria-atomic>Showing results for {query}</div>
     </form>
   );
 }
 
-const StatusMessage = ({status, query}: { status: InstantSearch['status'], query: string }) => {
-  let message = status === 'loading' ? 'Loading' : null;
-  if (status != 'loading' && query) {
-    message = `Showing results for "${query}"`
-  }
-  return (
-    <div className="sr-only" aria-live="polite">{message}</div>
-  )
-}
-
 export default AlgoliaSearch;
diff --git a/package.json b/package.json
@@ -16,10 +16,10 @@
     "@formkit/auto-animate": "^0.8.1",
     "@heroicons/react": "^2.1.1",
     "@js-temporal/polyfill": "^0.4.4",
-    "@mui/base": "^5.0.0-beta.33",
+    "@mui/base": "^5.0.0-beta.37",
     "@next/third-parties": "^14.1.0",
     "@tailwindcss/container-queries": "^0.1.1",
-    "@types/node": "^20.11.20",
+    "@types/node": "^20.11.22",
     "@types/react": "^18.2.60",
     "@types/react-dom": "^18.2.19",
     "@uidotdev/usehooks": "^2.4.1",
@@ -42,9 +42,9 @@
     "qs": "^6.11.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-focus-lock": "^2.11.1",
-    "react-instantsearch": "^7.6.0",
-    "react-instantsearch-nextjs": "^0.1.13",
+    "react-focus-lock": "^2.11.2",
+    "react-instantsearch": "^7.7.0",
+    "react-instantsearch-nextjs": "^0.1.14",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.2",
     "tailwind-merge": "^2.2.1",

diff --git a/src/components/paragraphs/stanford-entity/entity-paragraph.tsx b/src/components/paragraphs/stanford-entity/entity-paragraph.tsx
@@ -4,13 +4,15 @@ import Button from "@components/elements/button";
 import {H2} from "@components/elements/headers";
 import {HtmlHTMLAttributes} from "react";
 import {ParagraphStanfordEntity} from "@lib/gql/__generated__/drupal.d";
+import {twMerge} from "tailwind-merge";
+import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordEntity
 }
 
 const EntityParagraph = async ({paragraph, ...props}: Props) => {
-
+  const behaviors = getParagraphBehaviors(paragraph);
   const entities = paragraph.suEntityItem || [];
   const gridCols = [
     'lg:grid-cols-3',
@@ -22,7 +24,9 @@ const EntityParagraph = async ({paragraph, ...props}: Props) => {
   return (
     <div className="centered lg:max-w-[980px] flex flex-col gap-10 mb-20" {...props}>
       {paragraph.suEntityHeadline &&
-        <H2 className="text-center">{paragraph.suEntityHeadline}</H2>
+        <H2 className={twMerge("text-center", behaviors.stanford_teaser?.hide_heading && "sr-only")}>
+          {paragraph.suEntityHeadline}
+        </H2>
       }
 
       {paragraph.suEntityDescription?.processed &&

diff --git a/src/components/paragraphs/stanford-lists/list-paragraph.tsx b/src/components/paragraphs/stanford-lists/list-paragraph.tsx
@@ -13,6 +13,7 @@ import {
 import {getParagraphBehaviors} from "@components/paragraphs/get-paragraph-behaviors";
 import {graphqlClient} from "@lib/gql/fetcher";
 import {buildHeaders} from "@lib/drupal/utils";
+import {twMerge} from "tailwind-merge";
 
 type Props = HtmlHTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphStanfordList
@@ -29,7 +30,9 @@ const ListParagraph = async ({paragraph, ...props}: Props) => {
   return (
     <div className="centered lg:max-w-[980px] flex flex-col gap-10 mb-20" {...props}>
       {paragraph.suListHeadline &&
-        <H2 className="text-center">{paragraph.suListHeadline}</H2>
+        <H2 className={twMerge("text-center", behaviors.list_paragraph?.hide_heading && "sr-only")}>
+          {paragraph.suListHeadline}
+        </H2>
       }
       {paragraph.suListDescription?.processed &&
         <Wysiwyg html={paragraph.suListDescription.processed}/>

diff --git a/src/lib/drupal/drupal-jsonapi.d.tsx b/src/lib/drupal/drupal-jsonapi.d.tsx
@@ -8,6 +8,7 @@ export type LayoutParagraphBehaviors = {
 export type ListParagraphBehaviors = {
   hide_empty?: boolean
   empty_message?: string
+  hide_heading?: boolean
 }
 
 export type CardParagraphBehaviors = {
@@ -22,9 +23,14 @@ export type BannerParagraphBehaviors = {
   hide_heading?: string
 }
 
+export type TeaserParagraphBehaviors = {
+  hide_heading?: boolean
+}
+
 export type ParagraphBehaviors = {
   layout_paragraphs?: LayoutParagraphBehaviors
   list_paragraph?: ListParagraphBehaviors
   su_card_styles?: CardParagraphBehaviors
   hero_pattern?: BannerParagraphBehaviors
+  stanford_teaser?: TeaserParagraphBehaviors
 }
diff --git a/src/lib/gql/__generated__/drupal.d.ts b/src/lib/gql/__generated__/drupal.d.ts