Merge branch 'main' into feat-history-page

firebase.json

@@ -12,5 +12,14 @@
         "destination": "/index.html"
       }
     ]
+  },
+  "emulators": {
+    "hosting": {
+      "port": 5000
+    },
+    "ui": {
+      "enabled": true
+    },
+    "singleProjectMode": true
   }
 }

package.json

@@ -7,7 +7,8 @@
     "start": "astro dev",
     "build": "astro check && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "check": "astro check"
   },
   "dependencies": {
     "@astrojs/check": "^0.5.3",
@@ -18,15 +19,19 @@
     "@astrojs/tailwind": "^5.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-form": "^0.0.3",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@staticcms/core": "^4.1.2",
     "@staticcms/proxy-server": "^4.0.4",
     "@types/react": "^18.2.64",
     "@types/react-dom": "^18.2.21",
     "astro": "^4.3.6",
+    "firebase": "^10.8.1",
     "i": "^0.3.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-hook-form": "^7.51.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   },

public/admin/config.yml

@@ -4,7 +4,9 @@ backend:
   name: github
   repo: brown-ccv/mmp
   base_url: /
-media_folder: public/images
+media_folder: public/files
+media_library:
+  max_file_size: 734003200
 i18n:
   structure: multiple_folders
   locales: [ en, es, pt ]
@@ -86,6 +88,7 @@ collections:
     label: Data
     create: true
     folder: src/content/data
+    media_folder: files
     fields:
       - name: title
         label: Title
@@ -97,7 +100,6 @@ collections:
         i18n: duplicate
         label: File
         widget: file
-        public_folder: public/files
       - name: cat
         label: Category
         widget: select

src/components/Button.tsx

@@ -0,0 +1,15 @@
+import React, { type ReactNode } from "react"
+
+interface ButtonProps
+  extends React.PropsWithChildren<React.ButtonHTMLAttributes<HTMLButtonElement>> {
+  icon?: ReactNode
+}
+
+export default function Button({ icon, children, ...delegated }: ButtonProps) {
+  return (
+    <button className="bg-primary-500" {...delegated}>
+      {icon}
+      <span>{children}</span>
+    </button>
+  )
+}

src/components/Card.tsx

@@ -5,43 +5,27 @@ interface CardProps {
   image?: string
   title: string
   name: string
-  address?: string
-  phone?: string
-  email?: string
+  institution: string
 }
 
-const Card: React.FC<CardProps> = ({ position, image, title, name, address, phone, email }) => {
+const Card: React.FC<CardProps> = ({ position, image, title, name, institution }) => {
   // strip 'public/' from the avatar string since astro's public folder is available without this in the link
   const link = image?.replace("/public", "")
   return (
     <div
-      className={`flex flex-row items-center ${
-        position % 2 ? "md:flex-row-reverse md:text-right" : ""
-      }`}
+      className={`flex flex-wrap gap-x-8 ${position % 2 ? "md:flex-row-reverse md:text-right" : ""}`}
     >
       {image && (
         <div>
-          <img
-            className="object-cover rounded-full w-64 h-64 min-w-64 min-h-64 hidden md:block"
-            src={link}
-            alt={name}
-          />
+          <img className="object-cover rounded-full w-64 h-64" src={link} alt={name} />
         </div>
       )}
-      <div className="px-8">
-        <div>
-          <p className="text-xl font-semibold">{name}</p>
-          <p className="italic">{title}</p>
-        </div>
-        <div>
-          {address && <p className="text-base">{address}</p>}
-          {phone && <p className="text-base">{phone}</p>}
-          {email && (
-            <a className="text-base hover:text-neutral-300" href={`mailto:${email}`}>
-              {email}
-            </a>
-          )}
-        </div>
+      <div>
+        <a className="text-xl font-semibold underline text-neutral-900" href="#">
+          {name}
+        </a>
+        <p className="text-neutral-700 italic">{title}</p>
+        <p className="small">{institution}</p>
       </div>
     </div>
   )

src/components/CardContainer.astro

@@ -7,28 +7,25 @@ interface PersonProps {
     title: string
     name: string
     avatar?: string
-    email?: string
-    address?: string
-    phone?: string
+    institution: string
   }
 }
 ---
 
-<div class="flex flex-row items-start space-x-12">
+<div class="flex items-start gap-12">
   <h2 class={`${color} [writing-mode:vertical-lr] rotate-180`}>{title}</h2>
-  <div class="flex flex-col space-y-20 flex-1">
+  <div class="flex flex-col gap-20 flex-1">
     {
       people.map((person: PersonProps, i: number) => {
         return (
           <>
             <Card
+              client:load
               position={i}
               title={person.data.title}
               name={person.data.name}
               image={person.data.avatar}
-              email={person.data.email}
-              phone={person.data.phone}
-              address={person.data.address}
+              institution={person.data.institution}
             />
           </>
         )

src/components/CustomInput.tsx

@@ -1,20 +1,46 @@
 import React from "react"
+import * as Form from "@radix-ui/react-form"
+import type { UseFormRegister } from "react-hook-form"
+import type { Inputs } from "./DownloadModal.tsx"
 
-interface CustomInputProps {
-  label: string
-  placeholder: string
-}
-
-export const CustomInput: React.FC<CustomInputProps> = ({ label, placeholder }) => {
-  return (
-    <>
+export const CustomInput = React.forwardRef<
+  HTMLInputElement,
+  {
+    label: string
+    placeholder: string
+    errorMessage?: string
+    match?:
+      | "valueMissing"
+      | "badInput"
+      | "patternMismatch"
+      | "rangeOverflow"
+      | "rangeUnderflow"
+      | "stepMismatch"
+      | "tooLong"
+      | "tooShort"
+      | "typeMismatch"
+      | "valid"
+  } & ReturnType<UseFormRegister<Inputs>>
+>(({ onChange, onBlur, name, label, placeholder, match, errorMessage }, ref) => (
+  <Form.Field name={name} className="flex flex-col gap-2">
+    <Form.Label>{label}</Form.Label>
+    <Form.Control asChild>
       <input
-        name={label}
-        id={label}
-        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        name={name}
+        onChange={onChange}
+        onBlur={onBlur}
         placeholder={placeholder}
+        ref={ref}
         required
       />
-    </>
-  )
-}
+    </Form.Control>
+    <Form.Message className="text-primary-300" match="valueMissing">
+      Please enter your {label}
+    </Form.Message>
+    {match !== undefined && (
+      <>
+        <Form.Message match={match}>{errorMessage}</Form.Message>
+      </>
+    )}
+  </Form.Field>
+))

src/components/CustomTextarea.tsx

@@ -1,19 +1,31 @@
 import React from "react"
+import * as Form from "@radix-ui/react-form"
+import type { UseFormRegister } from "react-hook-form"
+import type { Inputs } from "./DownloadModal.tsx"
 
-interface CustomTextareaProps {
-  label: string
-  placeholder: string
-}
-
-export const CustomTextarea: React.FC<CustomTextareaProps> = ({ label, placeholder }) => {
-  return (
-    <>
+export const CustomTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  {
+    label: string
+    placeholder: string
+  } & ReturnType<UseFormRegister<Inputs>>
+>(({ onChange, onBlur, name, label, placeholder }, ref) => (
+  <Form.Field name={name} className="flex flex-col gap-2">
+    <Form.Label>{label}</Form.Label>
+    <Form.Control asChild>
       <textarea
         rows={4}
-        id={label}
-        className="text-gray-400 text-sm font-medium outline-none border-b-2 py-2 w-full my-4 mx-2"
+        name={name}
+        ref={ref}
+        onChange={onChange}
+        onBlur={onBlur}
+        className="text-gray-400 text-sm font-medium outline-none border-b-2 w-full"
         placeholder={placeholder}
+        required
       />
-    </>
-  )
-}
+    </Form.Control>
+    <Form.Message className="text-primary-300" match="valueMissing">
+      Please enter your {label}
+    </Form.Message>
+  </Form.Field>
+))

src/components/DataForm.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react"
+import DataTable from "../components/DataTable"
+import DownloadModal from "../components/DownloadModal"
+
+export interface FileItem {
+  title: string
+  cat: string
+  file: string
+  description?: string
+  selected: boolean
+}
+
+interface DataFormProps {
+  allFiles: {
+    data: {
+      title: string
+      cat: string
+      file: string
+      description?: string
+    }
+  }[]
+}
+
+const DataForm: React.FC<DataFormProps> = ({ allFiles }) => {
+  const [files, setFiles] = useState(
+    allFiles.map((file) => {
+      return { ...file.data, selected: false }
+    })
+  )
+
+  /**
+   * Given a target file name and new `selected` field for that file, update the matching file object in{@link files}
+   * with the new value for `selected`.
+   */
+  const updateFileList = ({ file: targetFile }: FileItem, selection: boolean) => {
+    const updatedFiles = files.map(({ file, selected, ...rest }) => {
+      return file === targetFile
+        ? { file, selected: selection, ...rest }
+        : { file, selected, ...rest }
+    })
+
+    setFiles(updatedFiles)
+  }
+
+  return (
+    <div className="space-y-4">
+      <DownloadModal filesToDownload={files.map((file) => file.file)} />
+      <DataTable allFiles={files} updateFileList={updateFileList} />
+    </div>
+  )
+}
+export default DataForm