SUP-197 SUP-182 Stubbed out search and file list components

package.json

@@ -26,7 +26,7 @@
     "autoprefixer": "^10.4.19",
     "axios": "^1.6.8",
     "clsx": "^2.1.0",
-    "decanter": "^7.2.0",
+    "decanter": "^7.3.0",
     "drupal-jsonapi-params": "^2.3.1",
     "eslint": "^8.57.0",
     "eslint-config-next": "^14.2.2",
@@ -47,7 +47,7 @@
     "react-slick": "^0.30.2",
     "react-tiny-oembed": "^1.1.0",
     "sharp": "^0.33.3",
-    "tailwind-merge": "^2.2.2",
+    "tailwind-merge": "^2.3.0",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
     "usehooks-ts": "^3.1.0"

src/components/elements/link.tsx

@@ -12,7 +12,7 @@ type Props = HtmlHTMLAttributes<HTMLAnchorElement | HTMLButtonElement> & LinkPro
   href: string
 }
 
-const DrupalLink = ({href, className, children, ...props}: Props) => {
+const DrupalLink = ({href, className, button, children, ...props}: Props) => {
   // Make sure all links have a href.
   href = href || "#"
   const drupalBase: string = (process.env.NEXT_PUBLIC_DRUPAL_BASE_URL || "").replace(/\/$/, "");
@@ -29,12 +29,12 @@ const DrupalLink = ({href, className, children, ...props}: Props) => {
     )
   }
 
-  if (className?.includes("button")) {
+  if (button || className?.includes("button")) {
     return (
       <Button
         href={href}
-        big={className.includes("--big")}
-        secondary={className.includes("--secondary")}
+        big={className?.includes("--big")}
+        secondary={className?.includes("--secondary")}
         {...props}
       >
         {children}

src/components/elements/select-list.tsx

@@ -18,7 +18,7 @@ import {ChevronDownIcon} from "@heroicons/react/20/solid";
 import {useIsClient} from "usehooks-ts";
 import {Maybe} from "@lib/gql/__generated__/drupal.d";
 
-interface OptionProps {
+type OptionProps = {
   rootRef: RefObject<HTMLUListElement>
   children?: ReactNode;
   value: string;
@@ -81,7 +81,7 @@ function CustomOption(props: OptionProps) {
   );
 }
 
-interface Props {
+type Props = {
   options: SelectOptionDefinition<string>[];
   label?: Maybe<string>
   ariaLabelledby?: Maybe<string>

src/components/paragraphs/paragraph.tsx

@@ -9,6 +9,8 @@ import ListParagraph from "@components/paragraphs/stanford-lists/list-paragraph"
 import {isPreviewMode} from "@lib/drupal/utils";
 import {ParagraphUnion} from "@lib/gql/__generated__/drupal.d";
 import {Suspense} from "react";
+import PreBuiltParagraph from "@components/paragraphs/sup-pre-built/pre-built-paragraph";
+import FileListParagraph from "@components/paragraphs/sup-file-list/file-list-paragraph";
 
 type Props = {
   /**
@@ -43,6 +45,10 @@ const Paragraph = async ({paragraph}: Props) => {
       return <WysiwygParagraph paragraph={paragraph} {...itemProps}/>
     case "ParagraphStanfordList":
       return <Suspense><ListParagraph paragraph={paragraph} {...itemProps}/></Suspense>
+    case "ParagraphSupFileList":
+      return <FileListParagraph paragraph={paragraph} {...itemProps}/>
+    case "ParagraphSupPreBuilt":
+      return <PreBuiltParagraph paragraph={paragraph} {...itemProps}/>
   }
   console.warn(`Unknown paragraph ${paragraph.__typename}. Item ${paragraph.id}.`);
 }

src/components/paragraphs/sup-file-list/file-list-paragraph.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import {HtmlHTMLAttributes, useState} from "react";
+import {ParagraphSupFileList} from "@lib/gql/__generated__/drupal.d";
+import SelectList from "@components/elements/select-list";
+import Link from "@components/elements/link";
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  paragraph: ParagraphSupFileList
+}
+
+const FileListParagraph = ({paragraph, ...props}: Props) => {
+  const [chosenFile, setChosenFile] = useState<string|null>(null)
+  const fileOptions = paragraph.supFileListFiles.map(media => ({value: media.id, label: media.name}))
+
+  const chosenItem = paragraph.supFileListFiles.find(media => media.id === chosenFile);
+  return (
+    <div {...props}>
+      <div className="mb-10">
+        <SelectList
+          options={fileOptions}
+          label="Choose a file"
+          onChange={(_e, v) => setChosenFile(v as string)}
+        />
+      </div>
+      {chosenItem &&
+        <Link className="button" href={chosenItem.mediaFile.url} download prefetch={false}>Download</Link>
+      }
+    </div>
+  )
+}
+export default FileListParagraph

src/components/paragraphs/sup-pre-built/pre-built-paragraph.tsx

@@ -0,0 +1,15 @@
+import {HtmlHTMLAttributes} from "react";
+import {ParagraphSupPreBuilt} from "@lib/gql/__generated__/drupal.d";
+import PrebuiltSearchForm from "@components/paragraphs/sup-pre-built/pre-built-search-form";
+
+type Props = HtmlHTMLAttributes<HTMLDivElement> & {
+  paragraph: ParagraphSupPreBuilt
+}
+
+const PreBuiltParagraph = ({paragraph, ...props}: Props) => {
+  switch (paragraph.supPrebuiltComponent) {
+    case "search_form":
+      return <PrebuiltSearchForm {...props}/>
+  }
+}
+export default PreBuiltParagraph

src/components/paragraphs/sup-pre-built/pre-built-search-form.tsx

@@ -0,0 +1,13 @@
+import {HTMLAttributes} from "react";
+import SiteSearchForm from "@components/search/site-search-form";
+
+type Props = HTMLAttributes<HTMLDivElement>;
+
+const PrebuiltSearchForm = ({...props}: Props) => {
+  return (
+    <div {...props}>
+      <SiteSearchForm/>
+    </div>
+  )
+}
+export default PrebuiltSearchForm;

src/lib/gql/fragments-fields.drupal.gql

@@ -0,0 +1,77 @@
+
+fragment FragmentSuPolicyLog on SuPolicyLog {
+    __typename
+    id
+    suPolicyDate {
+        ...FragmentDateTime
+    }
+    suPolicyNotes
+    suPolicyPublic
+    suPolicyTitle
+}
+
+fragment FragmentTermInterface on TermInterface {
+    __typename
+    id
+    name
+    path
+    weight
+    parent {
+        ... on TermInterface {
+            id
+        }
+    }
+}
+
+fragment FragmentSupAward on SupAward {
+    id
+    supAssociation
+    supDescription {
+        processed
+    }
+    supPlace
+    supRank
+    supWorkId
+    supYear
+}
+
+fragment FragmentNameType on NameType {
+    title
+    given
+    middle
+    family
+    generational
+    credentials
+}
+
+fragment FragmentDateTime on DateTime {
+    timezone
+    time
+}
+
+fragment FragmentSmartDateType on SmartDateType {
+    value
+    end_value
+    timezone
+    rrule_index
+    rrule
+}
+
+fragment FragmentAddressType on Address {
+    langcode
+    country {
+        name
+        code
+    }
+    givenName
+    additionalName
+    familyName
+    organization
+    addressLine1
+    addressLine2
+    postalCode
+    sortingCode
+    dependentLocality
+    locality
+    administrativeArea
+}

src/lib/gql/fragments-media.drupal.gql

@@ -0,0 +1,59 @@
+fragment FragmentMediaInterface on MediaInterface {
+    __typename
+    id
+    name
+}
+
+fragment FragmentMediaFile on MediaFile {
+    ...FragmentMediaInterface
+    mediaFile {
+        url
+    }
+}
+
+fragment FragmentMediaEmbeddable on MediaEmbeddable {
+    ...FragmentMediaInterface
+    mediaEmbeddableCode
+    mediaEmbeddableOembed
+}
+
+fragment FragmentMediaGoogleForm on MediaGoogleForm {
+    ...FragmentMediaInterface
+    mediaGoogleForm
+    mediaGoogleForm
+}
+
+fragment FragmentMediaImage on MediaImage {
+    ...FragmentMediaInterface
+    mediaImage {
+        url
+        alt
+        height
+        width
+    }
+}
+
+fragment FragmentMediaStanfordGalleryImage on MediaStanfordGalleryImage {
+    ...FragmentMediaInterface
+    suGalleryCaption
+    suGalleryImage {
+        url
+        alt
+        height
+        width
+    }
+}
+
+fragment FragmentMediaVideo on MediaVideo {
+    ...FragmentMediaInterface
+    mediaOembedVideo
+}
+
+fragment FragmentMediaUnion on MediaUnion {
+    ...FragmentMediaEmbeddable
+    ...FragmentMediaFile
+    ...FragmentMediaGoogleForm
+    ...FragmentMediaImage
+    ...FragmentMediaStanfordGalleryImage
+    ...FragmentMediaVideo
+}