Import CHEFS components

Author: NatSquared

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "common-hosted-form-service"]
+	path = common-hosted-form-service
+	url = https://github.com/bcgov/common-hosted-form-service.git

CHANGELOG.MD

@@ -1,3 +1,11 @@
+## June 23, 2026
+
+- **Feature** Imported CHEFS components into DEP [🎟️ DEP-273](https://citz-gdx.atlassian.net/browse/DEP-273)
+  - Imported `@bcgov/common-hosted-form-service` package as a Git submodule
+  - Imported the CHEFS components from the package into the DEP codebase, allowing for the use of these components in the application.
+  - Updated the FormBuilderOptions to enable the CHEFS components, including `simpleradios` and `simpleselect`, while disabling any corresponding legacy MET-Formio components to avoid conflicts.
+  - Updated build, start, and test scripts to include the CHEFS components in the build process, ensuring that they are available for use in the application.
+
 ## June 22, 2026
 
 - **Feature** Added dynamic tab titles based on the current chain of route matches [🎟️ DEP-263](https://citz-gdx.atlassian.net/browse/DEP-263)

web/package-lock.json

@@ -6,6 +6,7 @@
     "@babel/core": "^7.29.6",
     "@bcgov/bc-sans": "^2.1.0",
     "@bcgov/design-tokens": "^3.2.0",
+    "@bcgov/formio": "file:../common-hosted-form-service/components",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@formio/react": "^5.3.0",
@@ -123,9 +124,13 @@
     "yup": "^0.32.11"
   },
   "scripts": {
+    "ensure:bcgov-formio": "node scripts/ensure-bcgov-formio.js",
     "analyze": "source-map-explorer 'build/static/js/*.js' --no-border-checks",
+    "prestart": "npm run ensure:bcgov-formio",
     "start": "node scripts/start.js",
+    "prebuild": "npm run ensure:bcgov-formio",
     "build": "node scripts/build.js",
+    "pretest": "npm run ensure:bcgov-formio",
     "test": "jest",
     "lint": "eslint \"src/**/*.{ts,tsx}\"",
     "lintfix": "eslint \"src/**/*.{ts,tsx}\" --fix"

web/package.json

@@ -0,0 +1,47 @@
+'use strict';
+
+const fs = require('node:fs');
+const path = require('node:path');
+const { spawnSync } = require('node:child_process');
+
+const formioPath = path.resolve(
+  __dirname,
+  '../../common-hosted-form-service/components'
+);
+const formioNodeModules = path.join(formioPath, 'node_modules');
+const formioLibEntry = path.join(formioPath, 'lib/index.js');
+
+function run(command, args) {
+  const result = spawnSync(command, args, {
+    cwd: formioPath,
+    stdio: 'inherit',
+    shell: process.platform === 'win32',
+  });
+
+  if (result.status !== 0) {
+    process.exit(result.status || 1);
+  }
+}
+
+function shouldInstallDependencies() {
+  return !fs.existsSync(formioNodeModules);
+}
+
+function shouldBuildPackage() {
+  return !fs.existsSync(formioLibEntry);
+}
+
+if (!fs.existsSync(formioPath)) {
+  console.warn(
+    `Skipping @bcgov/formio bootstrap; missing path: ${formioPath}`
+  );
+  process.exit(0);
+}
+
+if (shouldInstallDependencies()) {
+  run('npm', ['ci']);
+}
+
+if (shouldBuildPackage()) {
+  run('npm', ['run', 'build']);
+}

web/scripts/ensure-bcgov-formio.js

@@ -11,9 +11,10 @@ export const formioOptions = {
             title: '',
             weight: 20,
             components: {
-                simpletextfield: true,
-                simpletextarea: true,
-                simpleradios: true,
+                // "MET-Formio" components
+                // simpletextfield: true, // overridden by BC Gov formio components
+                // simpletextarea: true, // overridden
+                // simpleradios: true, // overridden
                 simplecheckboxes: true,
                 header: true,
                 paragraph: true,
@@ -25,7 +26,56 @@ export const formioOptions = {
                 simplehtmlelement: true,
                 simplecontent: true,
                 simplesurvey: true,
+                // simpleselect: true, // overridden
+
+                // BC Gov formio components
+                orgbook: true,
+                simplebtnreset: true,
+                simplebtnsubmit: true,
+                simplecheckbox: true,
+                simplecols2: true,
+                simplecols3: true,
+                simplecols4: true,
+                simpledatetime: true,
+                simpleday: true,
+                simpleemail: true,
+                simplefieldset: true,
+                simplefile: true,
+                simpleheading: true,
+                simplenumber: true,
+                simplepanel: true,
+                simpleparagraph: true,
+                simplephonenumber: true,
+                simpleradios: true,
                 simpleselect: true,
+                simpletabs: true,
+                simpletextarea: true,
+                simpletextfield: true,
+                simpletime: true,
+                simpletextfieldadvanced: true,
+                simpleemailadvanced: true,
+                simpletextareaadvanced: true,
+                simplenumberadvanced: true,
+                simpleurladvanced: true,
+                simplephonenumberadvanced: true,
+                simpletagsadvanced: true,
+                simpleaddressadvanced: true,
+                simplepasswordadvanced: true,
+                simpledatetimeadvanced: true,
+                simplecheckboxadvanced: true,
+                simpledayadvanced: true,
+                simpletimeadvanced: true,
+                simpleselectboxesadvanced: true,
+                simpleselectadvanced: true,
+                simplecurrencyadvanced: true,
+                simpleradioadvanced: true,
+                simplesurveyadvanced: true,
+                simplesignatureadvanced: true,
+                simplebuttonadvanced: true,
+                bcaddress: true,
+                simplebcaddress: true,
+                map: true,
+                idirusers: false,
             },
             default: true,
         },

web/src/components/Form/FormBuilderOptions.ts

@@ -0,0 +1,54 @@
+const useMock = jest.fn();
+
+jest.mock('@formio/react', () => ({
+    Formio: {
+        use: useMock,
+        Utils: {
+            Evaluator: {
+                noeval: true,
+            },
+        },
+    },
+}));
+
+jest.mock('met-formio', () => ({
+    __esModule: true,
+    default: { name: 'met-formio-components' },
+}));
+
+jest.mock('@bcgov/formio', () => ({
+    __esModule: true,
+    default: { name: 'bcgov-formio-components' },
+}));
+
+jest.mock('components/Form/formio.scss', () => ({}));
+
+describe('setupFormio', () => {
+    beforeEach(() => {
+        jest.resetModules();
+        useMock.mockReset();
+    });
+
+    it('registers met-formio and common-hosted-form-service components once', async () => {
+        const setupFormio = (await import('./setup')).default;
+        const metFormio = (await import('met-formio')).default;
+        const bcgovFormio = (await import('@bcgov/formio')).default;
+        const { Formio } = await import('@formio/react');
+
+        setupFormio();
+
+        expect(useMock).toHaveBeenCalledTimes(2);
+        expect(useMock).toHaveBeenNthCalledWith(1, metFormio);
+        expect(useMock).toHaveBeenNthCalledWith(2, bcgovFormio);
+        expect(Formio.Utils.Evaluator.noeval).toBe(false);
+    });
+
+    it('does not re-register components after initialization', async () => {
+        const setupFormio = (await import('./setup')).default;
+
+        setupFormio();
+        setupFormio();
+
+        expect(useMock).toHaveBeenCalledTimes(2);
+    });
+});

web/src/components/Form/formio/setup.test.ts

@@ -1,13 +1,15 @@
 // components/Form/formio/setup.ts
 import { Formio } from '@formio/react';
 import FormioComponents from 'met-formio';
+import BCGovFormioComponents from '@bcgov/formio';
 import 'components/Form/formio.scss';
 
 let initialized = false;
 
 export default function setupFormio() {
     if (initialized) return;
     Formio.use(FormioComponents);
+    Formio.use(BCGovFormioComponents);
     Formio.Utils.Evaluator.noeval = false;
     initialized = true;
 }