feat(shared, frontend, backend): organise shared exports dual format build

.github/workflows/chromatic.yml

@@ -61,8 +61,12 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
-        # 👇 Adds Chromatic as a step in the workflow
+        run: pnpm --filter formsg-shared --filter formsg-frontend install
+        working-directory: .
+      - name: Build shared package
+        run: pnpm build:shared
+        working-directory: .
+      # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/action@v1
         # Chromatic GitHub Action options

.github/workflows/ci.yml

@@ -74,6 +74,7 @@ jobs:
         run: pnpm install
 
   build:
+    # Rationale: To validate that application builds are working
     needs: install
     runs-on: ubuntu-latest
     steps:
@@ -96,14 +97,6 @@ jobs:
         env:
           NODE_OPTIONS: '--max-old-space-size=4096'
           AWS_SDK_JS_SUPPRESS_MAINTENANCE_MODE_MESSAGE: 1
-      - name: Upload build files
-        uses: actions/upload-artifact@v4
-        if: always()
-        with:
-          name: build-output
-          path: |
-            package*.json
-            dist/
 
   frontend_test:
     needs: [changes, install]
@@ -123,7 +116,9 @@ jobs:
           node-version: ${{ env.NODE_VERSION }}
           cache: 'pnpm'
       - name: Install dependencies
-        run: pnpm install
+        run: pnpm --filter formsg-frontend --filter formsg-shared install
+      - name: Build required shared package 
+        run: pnpm build:shared
       - name: Configure Datadog Test Visibility
         uses: datadog/test-visibility-github-action@v1.0.5
         with:
@@ -159,7 +154,7 @@ jobs:
       - run: pnpm lint:frontend
 
   backend_test:
-    needs: [changes, install, build]
+    needs: [changes, install]
     if: ${{ needs.changes.outputs.backend == 'true' }}
     runs-on: ubuntu-latest
     steps:
@@ -170,10 +165,6 @@ jobs:
         uses: pnpm/action-setup@v4
         with:
           version: ${{ env.PNPM_VERSION }}
-      - uses: actions/download-artifact@v4
-        if: always()
-        with:
-          name: build-output
       - name: Use Node.js
         uses: actions/setup-node@v4
         with:

apps/backend/src/app/modules/myinfo/myinfo.util.ts

@@ -1,13 +1,13 @@
 import bcrypt from 'bcrypt'
 import {
+  MYINFO_FIELD_TYPES,
   myInfoCountries,
   myInfoDialects,
   myInfoHdbTypes,
   myInfoHousingTypes,
   myInfoNationalities,
   myInfoOccupations,
   myInfoRaces,
-  types as myInfoTypes,
 } from 'formsg-shared/constants/field/myinfo'
 import {
   BasicField,
@@ -295,7 +295,9 @@ export const mapRedirectURLError: MapRouteError = (
 export const getMyInfoFieldOptions = (
   myInfoAttr: IMyInfo['attr'],
 ): string[] => {
-  const [myInfoField] = myInfoTypes.filter((type) => type.name === myInfoAttr)
+  const [myInfoField] = MYINFO_FIELD_TYPES.filter(
+    (type) => type.name === myInfoAttr,
+  )
   return myInfoField?.fieldOptions || []
 }
 

apps/backend/src/app/modules/submission/email-submission/__tests__/email-submission.util.spec.ts

@@ -9,7 +9,7 @@ import {
   generateNewTableResponse,
 } from '__tests__/unit/backend/helpers/generate-form-data'
 import { ObjectId } from 'bson'
-import { types as basicTypes } from 'formsg-shared/constants/field/basic'
+import { BASIC_FIELD_TYPES } from 'formsg-shared/constants/field/basic'
 import {
   BasicField,
   FormAuthType,
@@ -42,7 +42,7 @@ const getResponse = (_id: string, answer: string): SingleAnswerFieldResponse =>
     answer,
   }) as unknown as SingleAnswerFieldResponse
 
-const ALL_SINGLE_SUBMITTED_RESPONSES = basicTypes
+const ALL_SINGLE_SUBMITTED_RESPONSES = BASIC_FIELD_TYPES
   // Attachments are special cases, requiring filename and content
   // Section fields are not submitted
   .filter(

apps/backend/src/app/modules/submission/submission.utils.ts

@@ -6,7 +6,7 @@ import {
   featureFlags,
   MULTIRESPONDENT_FORM_SUBMISSION_VERSION,
 } from 'formsg-shared/constants'
-import { FIELDS_TO_REJECT } from 'formsg-shared/constants/field/basic'
+import { BASIC_FIELDS_TO_REJECT } from 'formsg-shared/constants/field/basic'
 import { MYINFO_ATTRIBUTE_MAP } from 'formsg-shared/constants/field/myinfo'
 import {
   BasicField,
@@ -470,7 +470,7 @@ const clearResponseModeFilter = <T extends ResponseModeFilterParam>(
   responses: T[],
 ) => {
   return responses.filter(
-    ({ fieldType }) => !FIELDS_TO_REJECT.includes(fieldType),
+    ({ fieldType }) => !BASIC_FIELDS_TO_REJECT.includes(fieldType),
   )
 }
 

apps/backend/src/app/utils/field-validation/field-validation.guards.ts

@@ -1,4 +1,4 @@
-import { types as basicTypes } from 'formsg-shared/constants/field/basic'
+import { BASIC_FIELD_TYPES } from 'formsg-shared/constants/field/basic'
 import {
   BasicField,
   GenericStringAnswerResponseFieldV3,
@@ -22,9 +22,9 @@ import {
   ProcessedTableResponse,
 } from '../../modules/submission/submission.types'
 
-const singleAnswerFieldTypes = basicTypes
-  .filter((field) => !field.answerArray && field.name !== BasicField.Attachment)
-  .map((f) => f.name)
+const singleAnswerFieldTypes = BASIC_FIELD_TYPES.filter(
+  (field) => !field.answerArray && field.name !== BasicField.Attachment,
+).map((f) => f.name)
 
 export const isProcessedSingleAnswerResponse = (
   response: ProcessedFieldResponse,

apps/backend/src/app/utils/field-validation/index.ts

@@ -1,4 +1,4 @@
-import { FIELDS_TO_REJECT } from 'formsg-shared/constants/field/basic'
+import { BASIC_FIELDS_TO_REJECT } from 'formsg-shared/constants/field/basic'
 import { BasicField, FormField, FormFieldDto } from 'formsg-shared/types'
 import { Either, isLeft, left, right } from 'fp-ts/lib/Either'
 import { err, ok, Result } from 'neverthrow'
@@ -55,7 +55,7 @@ const logger = createLoggerWithLabel(module)
  * @param response The submitted response
  */
 const isValidResponseFieldType = (fieldType: BasicField): boolean =>
-  FIELDS_TO_REJECT.includes(fieldType) ? false : true
+  BASIC_FIELDS_TO_REJECT.includes(fieldType) ? false : true
 
 /**
  * Compares the response field type to the form field type

apps/frontend/src/features/myinfo/utils/augmentWithMyInfo.ts

@@ -1,14 +1,10 @@
-import { keyBy } from 'lodash'
-
-import { types as myInfoTypeArray } from 'formsg-shared/constants/field/myinfo'
+import { MYINFO_ATTRIBUTE_MAP } from 'formsg-shared/constants/field/myinfo'
 import {
   BasicField,
   FormFieldDto,
   MyInfoFormField,
 } from 'formsg-shared/types/field'
 
-const MAP_ATTR_TO_NAME = keyBy(myInfoTypeArray, 'name')
-
 // Making a copy by destructuring so original object does not get affected.
 export const augmentWithMyInfo = ({
   ...field
@@ -18,13 +14,13 @@ export const augmentWithMyInfo = ({
     case BasicField.Dropdown: {
       // No need to augment if no MyInfo attribute
       if (!field.myInfo?.attr) return field
-      const myInfoBlock = MAP_ATTR_TO_NAME[field.myInfo.attr]
+      const myInfoBlock = MYINFO_ATTRIBUTE_MAP[field.myInfo.attr]
       field.fieldOptions = myInfoBlock.fieldOptions ?? []
       return field
     }
     case BasicField.Children: {
       if (!field.myInfo?.attr) return field
-      const myInfoBlock = MAP_ATTR_TO_NAME[field.myInfo.attr]
+      const myInfoBlock = MYINFO_ATTRIBUTE_MAP[field.myInfo.attr]
       field.title = myInfoBlock.value
       return field
     }

apps/frontend/src/features/myinfo/utils/augmentWithMyInfoDisplayValue.ts

@@ -1,17 +1,13 @@
-import { keyBy } from 'lodash'
-
-import { types as myInfoTypeArray } from 'formsg-shared/constants/field/myinfo'
+import { MYINFO_ATTRIBUTE_MAP } from 'formsg-shared/constants/field/myinfo'
 import { FormFieldDto, MyInfoFormField } from 'formsg-shared/types'
 
 import { isMyInfo } from './isMyInfo'
 
-const MAP_ATTR_TO_NAME = keyBy(myInfoTypeArray, 'name')
-
 export const augmentWithMyInfoDisplayValue = (
   field: FormFieldDto,
 ): MyInfoFormField => {
   if (!isMyInfo(field)) return field
 
-  const myInfoBlock = MAP_ATTR_TO_NAME[field.myInfo.attr]
+  const myInfoBlock = MYINFO_ATTRIBUTE_MAP[field.myInfo.attr]
   return { ...field, fieldValue: myInfoBlock.previewValue }
 }

package.json

@@ -27,7 +27,7 @@
     "test:frontend": "pnpm --filter formsg-frontend test",
     "test:e2e-v2": "pnpm build && npx playwright test",
     "test:e2e-v2:server": "pnpm --filter formsg-backend test:e2e-v2:server",
-    "build": "pnpm clean && concurrently \"pnpm:build:*\"",
+    "build": "pnpm clean && pnpm build:shared && concurrently \"pnpm:build:frontend\" \"pnpm:build:backend\"",
     "build:frontend": "pnpm --filter formsg-frontend build",
     "build:backend": "pnpm --filter formsg-backend build",
     "build:shared": "pnpm --filter formsg-shared build",

packages/shared/constants/field/basic.ts

@@ -11,7 +11,7 @@ type BasicFieldBlock = {
   answerArray: boolean
 }
 
-export const types: BasicFieldBlock[] = [
+export const BASIC_FIELD_TYPES: BasicFieldBlock[] = [
   {
     name: BasicField.Section,
     value: 'Header',
@@ -149,6 +149,6 @@ export const types: BasicFieldBlock[] = [
 /**
  * Array of BasicFields which are not included in the form response (e.g. statement)
  */
-export const FIELDS_TO_REJECT: BasicField[] = types
-  .filter((f) => !f.submitted)
-  .map((f) => f.name)
+export const BASIC_FIELDS_TO_REJECT: BasicField[] = BASIC_FIELD_TYPES.filter(
+  (f) => !f.submitted,
+).map((f) => f.name)

packages/shared/constants/field/index.ts

@@ -0,0 +1,2 @@
+export * from './myinfo'
+export * from './basic'

packages/shared/constants/field/myinfo/index.ts

@@ -42,7 +42,7 @@ export type MyInfoFieldBlock = {
   titleTranslations?: TranslationMapping[]
 }
 
-export const types: MyInfoFieldBlock[] = [
+export const MYINFO_FIELD_TYPES: MyInfoFieldBlock[] = [
   {
     name: MyInfoAttribute.Name,
     value: 'Name',
@@ -516,4 +516,4 @@ export const types: MyInfoFieldBlock[] = [
   },
 ]
 
-export const MYINFO_ATTRIBUTE_MAP = keyBy(types, 'name')
+export const MYINFO_ATTRIBUTE_MAP = keyBy(MYINFO_FIELD_TYPES, 'name')

packages/shared/constants/index.ts

@@ -1,8 +1,12 @@
+export * from './assistance'
+export * from './countryRegion'
+export * from './dates'
+export * from './errors'
+export * from './feature-flags'
+export * from './field'
 export * from './file'
 export * from './form'
 export * from './links'
-export * from './feature-flags'
-export * from './errors'
-export * from './dates'
+export * from './mail'
+export * from './routes'
 export * from './workspace'
-export * from './assistance'