support dropdown fields

.github/workflows/build.yml

@@ -18,7 +18,7 @@ jobs:
       - name: Set up Node
         uses: actions/setup-node@v4
         with:
-          node-version: 20
+          node-version: 24
 
       - name: Set up pnpm
         uses: pnpm/action-setup@v4

Dockerfile

@@ -1,7 +1,7 @@
 # -----------------------------------------------
 # Base Image with Doppler
 # -----------------------------------------------
-FROM node:22-alpine AS doppler
+FROM node:24-alpine AS doppler
 
 # Install Doppler CLI
 RUN wget -q -t3 'https://packages.doppler.com/public/cli/rsa.8004D9FF50437357.key' -O /etc/apk/keys/cli@doppler-8004D9FF50437357.rsa.pub && \
@@ -52,9 +52,12 @@ RUN pnpm run build:${PROJECT_NAME}
 # -----------------------------------------------
 FROM doppler AS runtime
 
+# Install native build tools needed by sharp, gifsicle, mozjpeg, etc.
+RUN apk add --no-cache python3 make g++ autoconf automake libtool nasm
+
 # Install the prod dependencies
 WORKDIR /build
-COPY apps/backend/package.json .
+COPY ./apps/backend/package.json ./
 COPY pnpm-lock.yaml ./
 COPY pnpm-workspace.yaml ./
 COPY apps/backend/package.json ./apps/backend/package.json

apps/backend/src/utils/initDb.ts

@@ -158,6 +158,7 @@ export const generateFieldSchema = (field: Field): SchemaDefinitionProperty | nu
             return getDateSchema()
         case FieldType.PHONE:
             return getStringSchema()
+        case FieldType.DROPDOWN:
         case FieldType.RADIO_BUTTON:
             return getRadioButtonSchema(field)
         case FieldType.FILE:

apps/frontend/package.json

@@ -15,14 +15,16 @@
   },
   "dependencies": {
     "@3dp4me/types": "workspace:*",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^6.4.5",
     "@mui/material": "^6.4.5",
     "@sweetalert/with-react": "^0.1.1",
     "@tanstack/react-query": "^5.17.19",
     "@vis.gl/react-google-maps": "^1.4.2",
+    "Chip": "link:@mui/material/Chip",
     "aws-amplify": "4.2.11",
     "axios": "^1.6.0",
-    "Chip": "link:@mui/material/Chip",
     "date-fns": "^3.3.0",
     "js-file-download": "^0.4.12",
     "lodash": "^4.17.21",

apps/frontend/src/components/CreateFieldModal/CreateFieldModal.tsx

@@ -165,6 +165,7 @@ const CreateFieldModal = ({
                         />
                     </div>
                 )
+            case FieldType.DROPDOWN:
             case FieldType.RADIO_BUTTON:
                 return (
                     <div className="create-field-div">

apps/frontend/src/components/EditFieldModal/EditFieldModal.tsx

@@ -157,6 +157,7 @@ const EditFieldModal = ({
                         />
                     </div>
                 )
+            case FieldType.DROPDOWN:
             case FieldType.RADIO_BUTTON:
                 return (
                     <div className="edit-field-div">

apps/frontend/src/components/Fields/DropdownField.tsx

@@ -30,11 +30,7 @@ const DropdownField = <T extends string>({
         if (shouldHideOption(option)) return null
 
         return (
-            <option
-                value={option._id}
-                disabled={isDisabled}
-                key={option._id}
-            >
+            <option value={option._id} disabled={isDisabled} key={option._id}>
                 {option.Question[selectedLang]}
             </option>
         )

apps/frontend/src/components/Fields/FieldGroup/FieldGroupHelpers.ts

@@ -29,6 +29,7 @@ function canFieldBeDisplayedInTable(metadata: Field) {
         case FieldType.DATE:
         case FieldType.PHONE:
         case FieldType.RADIO_BUTTON:
+        case FieldType.DROPDOWN:
             return true
         default:
             return false

apps/frontend/src/components/Fields/FieldGroup/FieldGroupTable.tsx

@@ -8,7 +8,6 @@ import styled from 'styled-components'
 
 import XIcon from '../../../assets/x-icon.png'
 import { useTranslations } from '../../../hooks/useTranslations'
-import { DisplayFieldType } from '../../../utils/constants'
 import {
     ColumnMetadata,
     defaultTableHeaderRenderer,
@@ -152,9 +151,10 @@ const FieldGroupTable = ({
                 field.id
             )}`
 
-            let fieldType = metadata.subFields[i].fieldType as FieldType | DisplayFieldType
+            // Radio buttons don't display well in tables, use dropdown instead
+            let { fieldType } = metadata.subFields[i]
             if (fieldType === FieldType.RADIO_BUTTON) {
-                fieldType = DisplayFieldType.DROPDOWN
+                fieldType = FieldType.DROPDOWN
             }
 
             return (
@@ -202,7 +202,10 @@ const FieldGroupTable = ({
         const itemDataCopy = { ...itemData }
 
         rowData.forEach((field, i) => {
-            if (field.dataType === FieldType.RADIO_BUTTON) {
+            if (
+                field.dataType === FieldType.RADIO_BUTTON ||
+                field.dataType === FieldType.DROPDOWN
+            ) {
                 const fieldMeta = metadata.subFields[i]
                 const selectedOption = fieldMeta.options.find(
                     (option) => option._id === itemData[field.id]

apps/frontend/src/components/StepField/StepField.tsx

@@ -132,7 +132,7 @@ const StepField = ({
                         onChange={handleSimpleUpdate}
                     />
                 )
-            case DisplayFieldType.DROPDOWN:
+            case FieldType.DROPDOWN:
                 return (
                     <DropdownField
                         fieldId={metadata.key}

apps/frontend/src/components/StepManagementContent/StepManagementContent.tsx

@@ -60,6 +60,7 @@ const StepManagementContent = ({
 
     const renderBottomSection = (field: Field) => {
         switch (field?.fieldType) {
+            case FieldType.DROPDOWN:
             case FieldType.RADIO_BUTTON:
                 return (
                     <div className="bottom-container">

apps/frontend/src/utils/constants.ts

@@ -46,7 +46,6 @@ export enum DisplayFieldType {
     STEP_STATUS = 'StepStatus',
     PATIENT_STATUS = 'PatientStatus',
     ACCESS = 'Access',
-    DROPDOWN = 'Dropdown',
 }
 
 export type AnyFieldType = FieldType | DisplayFieldType

apps/frontend/src/utils/fields.tsx

@@ -255,6 +255,8 @@ export const getFieldName = (fieldType: FieldType) => {
             return 'Phone Number'
         case FieldType.PHOTO:
             return 'Photograph'
+        case FieldType.DROPDOWN:
+            return 'Dropdown'
         case FieldType.RADIO_BUTTON:
             return 'Multiple Choice Question'
         case FieldType.SIGNATURE:
@@ -285,6 +287,7 @@ export const canFieldBeAddedToStep = (fieldType: FieldType) => {
         case FieldType.PHONE:
         case FieldType.PHOTO:
         case FieldType.RADIO_BUTTON:
+        case FieldType.DROPDOWN:
         case FieldType.SIGNATURE:
         case FieldType.STRING:
             return true
@@ -312,7 +315,7 @@ export const fieldToString = (
         case FieldType.NUMBER:
         case FieldType.PHONE:
         case FieldType.RADIO_BUTTON:
-        case DisplayFieldType.DROPDOWN:
+        case FieldType.DROPDOWN:
             return fieldData
         case FieldType.DATE:
             return formatDate(new Date(fieldData), selectedLang)
@@ -351,7 +354,7 @@ export const fieldToJSX = (fieldData: any, fieldType: AnyFieldType, selectedLang
         case FieldType.PHONE:
         case FieldType.DATE:
         case FieldType.RADIO_BUTTON:
-        case DisplayFieldType.DROPDOWN:
+        case FieldType.DROPDOWN:
             return fieldToString(fieldData, fieldType, selectedLang)
         case FieldType.SIGNATURE:
             return signatureToJSX(fieldData)
@@ -381,6 +384,10 @@ export const validateField = <T extends Record<string, any> = Record<string, any
         throw new Error(ERR_LANGUAGE_VALIDATION_FAILED)
     }
 
+    if (fieldData.fieldType === FieldType.DROPDOWN && fieldData.options.length === 0) {
+        throw new Error(ERR_OPTION_VALIDATION_FAILED)
+    }
+
     if (fieldData.fieldType === FieldType.RADIO_BUTTON && fieldData.options.length === 0) {
         throw new Error(ERR_OPTION_VALIDATION_FAILED)
     }

package.json

@@ -6,12 +6,13 @@
   "devDependencies": {
     "@changesets/cli": "^2.27.1",
     "ajv": "^8.17.1",
+    "eslint": "^8.57.1",
     "rimraf": "^5.0.5",
     "syncpack": "^12.3.0",
     "turbo": "^1.11.3"
   },
   "homepage": "https://github.com/hack4impact-uiuc/3dp4me#readme",
-  "packageManager": "pnpm@9.15.4",
+  "packageManager": "pnpm@11.0.9",
   "repository": "hack4impact-uiuc/3dp4me.git",
   "scripts": {
     "build": "turbo build",

packages/eslint-config-3dp4me/package.json

@@ -4,7 +4,7 @@
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^6.19.0",
     "@typescript-eslint/parser": "^6.19.0",
-    "eslint": "^8.56.0",
+    "eslint": "^8.57.1",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.1.0",

packages/types/src/models/field.ts

@@ -10,6 +10,7 @@ export enum FieldType {
     FILE = 'File',
     NUMBER = 'Number',
     DATE = 'Date',
+    DROPDOWN = 'Dropdown',
     PHONE = 'Phone',
     DIVIDER = 'Divider',
     HEADER = 'Header',
@@ -32,6 +33,7 @@ export interface FieldTypeData {
     [FieldType.PHONE]: string
     [FieldType.DIVIDER]: null
     [FieldType.HEADER]: null
+    [FieldType.DROPDOWN]: string
     [FieldType.RADIO_BUTTON]: string
     [FieldType.AUDIO]: File[]
     [FieldType.SIGNATURE]: Signature