@abgov/nx-adsp 5.7.0 → 5.8.0-beta.1

package/generators.json

@@ -29,6 +29,11 @@
       "schema": "./src/generators/react-dotnet/schema.json",
       "description": "Generator that creates a React-Dotnet fullstack solution."
     },
+    "react-form": {
+      "factory": "./src/generators/react-form/react-form",
+      "schema": "./src/generators/react-form/schema.json",
+      "description": "Generator that creates a React component based on an ADSP Form Definition."
+    },
     "angular-app": {
       "factory": "./src/generators/angular-app/angular-app",
       "schema": "./src/generators/angular-app/schema.json",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/nx-adsp",
-  "version": "5.7.0",
+  "version": "5.8.0-beta.1",
   "license": "Apache-2.0",
   "main": "src/index.js",
   "description": "Government of Alberta - Nx plugin for ADSP apps.",
@@ -18,12 +18,13 @@
     "jest-mock": "28.1.3"
   },
   "dependencies": {
-    "@abgov/nx-oc": "^5.2.0",
+    "@abgov/nx-oc": "^5.5.0",
     "@angular-devkit/core": "^15.0.0",
     "@angular-devkit/schematics": "^15.0.0",
     "axios": "^0.27.0",
     "enquirer": "^2.3.6",
     "express": "^4.18.1",
+    "json-schema-to-typescript": "^13.0.1",
     "open": "^8.4.0",
     "simple-oauth2": "^5.0.0"
   },

package/src/generators/react-form/files/__fileName__/__fileName__.module.css__tmpl__

@@ -0,0 +1,12 @@
+.formActions {  
+  display: flex;
+  margin-top: 16px;
+
+  > * {
+    margin-left: 16px;
+  }
+
+  > *:first-child {
+    margin-left: auto;
+  }
+}

package/src/generators/react-form/files/__fileName__/__fileName__.slice.ts__tmpl__

@@ -0,0 +1,320 @@
+import {
+  createAction,
+  createAsyncThunk,
+  createSelector,
+  createSlice,
+} from '@reduxjs/toolkit';
+import axios from 'axios';
+import { debounce } from 'lodash';
+import { UserState } from 'redux-oidc';
+
+export const <%= constantName %>_FEATURE_KEY = '<%= fileName %>';
+const FORM_DEFINITION_ID = '<%= fileName %>';
+const FORM_SERVICE_URL = '<%= formServiceUrl %>';
+
+/*
+ * Update these interfaces according to your requirements.
+ */
+<%= interfaceDefinition %>
+
+const rules: Record<string, Record<string, RegExp>> = {
+  <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
+  <%= sectionKey %>: {
+  <%_ Object.entries(section.properties).filter(([_, { pattern }]) => !!pattern).forEach(function([key, value]) { _%>
+    <%= key %>: new RegExp('<%- value.pattern %>')
+  <%_ }); _%>
+  },
+  <%_ }); _%>
+};
+
+const required: Record<string, string[]> = {
+  <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
+    <%= sectionKey %>: [<%- section.required?.map(req => `'${req}'`) || "" %>],
+  <%_ }); _%>
+};
+
+export interface <%= className %>State {
+  formId: string;
+  values: <%= className %>;
+  errors: Record<string, Record<string, boolean>>;
+  complete: Record<string, boolean>;
+  review: boolean;
+  busy: {
+    loading: boolean;
+    saving: boolean;
+    submitting: boolean;
+  };
+}
+
+/**
+ * Export an effect using createAsyncThunk from
+ * the Redux Toolkit: https://redux-toolkit.js.org/api/createAsyncThunk
+ *
+ * e.g.
+ * ```
+ * import React, { useEffect } from 'react';
+ * import { useDispatch } from 'react-redux';
+ *
+ * // ...
+ *
+ * const dispatch = useDispatch();
+ * useEffect(() => {
+ *   dispatch(fetchIntake())
+ * }, [dispatch]);
+ * ```
+ */
+export const initializeForm = createAsyncThunk(
+  '<%= propertyName %>/initialize',
+  async (_, { getState }) => {
+    const { user }: UserState = getState()['user'];
+    if (!user) {
+      throw new Error('No active user session.');
+    }
+
+    const { data: forms } = await axios.get<{ results: { id: string }[] }>(
+      `${FORM_SERVICE_URL}/form/v1/forms`,
+      {
+        headers: {
+          Authorization: `Bearer ${user.access_token}`,
+        },
+        params: {
+          criteria: {
+            createdByIdEquals: user.profile.sub,
+            definitionIdEquals: FORM_DEFINITION_ID,
+          },
+        },
+      }
+    );
+
+    let formId = forms.results?.[0]?.id;
+    if (!formId) {
+      const { data: form } = await axios.post<{ id: string }>(
+        `${FORM_SERVICE_URL}/form/v1/forms`,
+        {
+          definitionId: FORM_DEFINITION_ID,
+          applicant: {
+            userId: user.profile.sub,
+            addressAs: user.profile.name,
+            channels: [
+              {
+                channel: 'email',
+                address: user.profile.email,
+              },
+            ],
+          },
+        },
+        {
+          headers: {
+            Authorization: `Bearer ${user.access_token}`,
+          },
+        }
+      );
+      formId = form.id;
+    }
+
+    const { data } = await axios.get<{
+      id: string;
+      data: <%= className %>;
+    }>(`${FORM_SERVICE_URL}/form/v1/forms/${formId}/data`, {
+      headers: {
+        Authorization: `Bearer ${user.access_token}`,
+      },
+    });
+
+    return data;
+  }
+);
+
+const formSaved = createAction(
+  '<%= propertyName %>/saved',
+  (values: <%= className %>) => ({ payload: values })
+);
+
+const queueSaveForm = createAsyncThunk(
+  '<%= propertyName %>/queue-save',
+  debounce(
+    async (values: <%= className %>, { dispatch, getState }) => {
+      const state = getState();
+      const { user }: UserState = state['user'];
+      const { formId }: <%= className %>State =
+        state[<%= constantName %>_FEATURE_KEY];
+
+      await axios.put(
+        `${FORM_SERVICE_URL}/form/v1/forms/${formId}/data`,
+        { data: values },
+        { headers: { Authorization: `Bearer ${user.access_token}` } }
+      );
+
+      dispatch(formSaved(values));
+    },
+    2000,
+    { trailing: true, leading: false }
+  )
+);
+
+export const updateForm = createAsyncThunk(
+  '<%= propertyName %>/update',
+  async (values: <%= className %>, { dispatch }) => {
+    const errors: Record<string, Record<string, boolean>> = {};
+    let hasError = false;
+    Object.entries(rules).forEach(([section, sectionRules]) => {
+      const sectionValue = values[section] || {};
+      const sectionErrors = Object.entries(sectionRules).reduce(
+        (results, [key, valueRule]) => {
+          const value = sectionValue[key] || '';
+          const isError = !!value && !valueRule.test(value);
+          hasError = hasError || isError;
+          return { ...results, [key]: isError };
+        },
+        {}
+      );
+
+      errors[section] = sectionErrors;
+    });
+
+    const complete: Record<string, boolean> = {};
+    Object.entries(required).forEach(([section, requiredValues]) => {
+      const sectionValue = values[section] || {};
+      complete[section] =
+        Object.values(errors[section]).filter((error) => error).length < 1 &&
+        requiredValues
+          .map(
+            (required) =>
+              sectionValue[required] !== undefined &&
+              sectionValue[required] !== null && 
+              sectionValue[required] !== ''
+          )
+          .filter((hasValue) => !hasValue).length < 1;
+    });
+
+    if (!hasError) {
+      dispatch(queueSaveForm(values));
+    }
+
+    return { values, complete, errors };
+  }
+);
+
+export const submitForm = createAsyncThunk(
+  '<%= propertyName %>/submit',
+  async (formId: string) => {
+    const { data } = await axios.post(
+      `${FORM_SERVICE_URL}/form/v1/forms/${formId}`,
+      { operation: 'submit' },
+      { headers: {} }
+    );
+    return data;
+  }
+);
+
+export const initial<%= className %>State: <%= className %>State = {
+  formId: null,
+  values: {} as <%= className %>,
+  errors: {},
+  complete: {},
+  review: false,
+  busy: {
+    loading: false,
+    saving: false,
+    submitting: false,
+  },
+};
+
+export const <%= propertyName %>Slice = createSlice({
+  name: <%= constantName %>_FEATURE_KEY,
+  initialState: initial<%= className %>State,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(initializeForm.pending, (state) => {
+        state.busy.loading = true;
+      })
+      .addCase(initializeForm.fulfilled, (state, action) => {
+        state.formId = action.payload.id;
+        state.values = action.payload.data;
+        state.busy.loading = false;
+      })
+      .addCase(initializeForm.rejected, (state) => {
+        state.busy.loading = false;
+      })
+      .addCase(updateForm.fulfilled, (state, action) => {
+        state.values = action.payload.values;
+        state.complete = action.payload.complete;
+        state.errors = action.payload.errors;
+      })
+      .addCase(queueSaveForm.pending, (state) => {
+        state.busy.saving = true;
+      })
+      .addCase(formSaved, (state) => {
+        state.busy.saving = false;
+      })
+      .addCase(queueSaveForm.rejected, (state) => {
+        state.busy.saving = false;
+      });
+  },
+});
+
+/*
+ * Export reducer for store configuration.
+ */
+export const <%= propertyName %>Reducer = <%= propertyName %>Slice.reducer;
+
+/*
+ * Export action creators to be dispatched. For use with the `useDispatch` hook.
+ *
+ * e.g.
+ * ```
+ * import React, { useEffect } from 'react';
+ * import { useDispatch } from 'react-redux';
+ *
+ * // ...
+ *
+ * const dispatch = useDispatch();
+ * useEffect(() => {
+ *   dispatch(intakeActions.add({ id: 1 }))
+ * }, [dispatch]);
+ * ```
+ *
+ * See: https://react-redux.js.org/next/api/hooks#usedispatch
+ */
+export const <%= propertyName %>Actions = <%= propertyName %>Slice.actions;
+
+/*
+ * Export selectors to query state. For use with the `useSelector` hook.
+ *
+ * e.g.
+ * ```
+ * import { useSelector } from 'react-redux';
+ *
+ * // ...
+ *
+ * const entities = useSelector(selectAllIntake);
+ * ```
+ *
+ * See: https://react-redux.js.org/next/api/hooks#useselector
+ */
+// const { selectAll, selectEntities } = intakeAdapter.getSelectors();
+
+export const get<%= className %>State = (
+  rootState: unknown
+): <%= className %>State => rootState[<%= constantName %>_FEATURE_KEY];
+
+export const getFormValues = createSelector(
+  get<%= className %>State,
+  (state) => state.values
+);
+
+export const getFormErrors = createSelector(
+  get<%= className %>State,
+  (state) => state.errors
+);
+
+export const getFormBusy = createSelector(
+  get<%= className %>State,
+  (state) => state.busy
+);
+
+export const getFormComplete = createSelector(
+  get<%= className %>State,
+  (state) => state.complete
+);

package/src/generators/react-form/files/__fileName__/__fileName__.tsx__tmpl__

@@ -0,0 +1,121 @@
+import {
+  GoAButton,
+  GoACheckbox,
+  GoAFormItem,
+  GoAFormStep,
+  GoAFormStepper,
+  GoAInput,
+  GoASpinner,
+} from '@abgov/react-components';
+import { FunctionComponent, useEffect } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { AppDispatch } from '../../store';
+import {
+  getFormBusy,
+  getFormComplete,
+  getFormErrors,
+  getFormValues,
+  initializeForm,
+  updateForm,
+} from './<%= fileName %>.slice';
+import styles from './<%= fileName %>.module.css';
+
+interface FieldSetProps {
+  value: Record<string, unknown>;
+  errors: Record<string, boolean>;
+  onChange: (value: Record<string, unknown>) => void;
+}
+
+<% Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { %>
+const <%= sectionKey %>FieldSet: FunctionComponent<FieldSetProps> = ({
+  value,
+  errors,
+  onChange,
+}) => {
+  return (
+    <fieldset>
+      <legend><%= section.title || sectionKey %></legend>
+      <%_ Object.entries(section.properties).forEach(function([key, value]) { _%>
+      <GoAFormItem label="<%= value.title || key %>" helpText="<%= value.description %>">
+      <%_ switch(value.type) { 
+        case 'string': _%>
+        <GoAInput
+          type="text"
+          error={errors['<%= key %>']}
+          onChange={(name, updated) => onChange({ ...value, [name]: updated })}
+          value={`${value.<%= key %> || ''}`}
+          name="<%= key %>"
+        />
+      <%_ break;
+        case 'number': _%>
+        <GoAInput
+          type="number"
+          error={errors['<%= key %>']}
+          onChange={(name, updated) => onChange({ ...value, [name]: updated })}
+          value={`${value.<%= key %> || ''}`}
+          name="<%= key %>"
+        />
+      <%_ break;
+        case 'boolean': _%>
+        <GoACheckbox
+          checked={value.<%= key %> as any || false}
+          onChange={(name, updated) => onChange({ ...value, [name]: updated })}          
+          name="<%= key %>"
+        />
+      <%_ break;
+        default:
+        break; _%>
+      <%_ } _%>
+      </GoAFormItem>
+      <%_ }); _%>
+    </fieldset>
+  );
+};
+<% }); %>
+
+export const <%= className %>Form: FunctionComponent = () => {
+  const dispatch = useDispatch<AppDispatch>();
+  const user = useSelector((state) => state['user'].user);
+  useEffect(() => {
+    dispatch(initializeForm());
+  }, [dispatch, user]);
+
+  const formData = useSelector(getFormValues);
+  const formErrors = useSelector(getFormErrors);
+  const formBusy = useSelector(getFormBusy);
+  const formComplete = useSelector(getFormComplete);
+
+  return (
+    <form>
+      <GoAFormStepper testId="<%= fileName %>>">
+      <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
+        <GoAFormStep 
+          text="<%= section.title || sectionKey %>" 
+          status={formComplete['<%= sectionKey %>'] ? 'complete' : null} />
+      <%_ }); _%>
+        <GoAFormStep text="Review" />
+      </GoAFormStepper>
+      {formBusy.loading ? (
+        <div className={styles.load}>
+          <GoASpinner type="infinite" size="large" />
+        </div>
+      ) : (
+        <>
+        <%_ Object.entries(dataSchema.properties).forEach(function([sectionKey, section]) { _%>
+          <<%= section.className %>FieldSet            
+            value={formData.<%= sectionKey %> as any || {}}
+            errors={formErrors['<%= sectionKey %>'] || {}}
+            onChange={(value) =>
+              dispatch(updateForm({ ...formData, '<%= sectionKey %>': value as any }))
+            }
+          />
+        <%_ }); _%>
+        </>
+      )}
+      <div className={styles.formActions}>
+        <GoAButton type="secondary">Back</GoAButton>
+        <GoAButton type="primary">Next</GoAButton>
+      </div>
+    </form>
+  );
+};

package/src/generators/react-form/react-form.d.ts

@@ -0,0 +1,3 @@
+import { Tree } from '@nrwl/devkit';
+import { Schema } from './schema';
+export default function (host: Tree, options: Schema): Promise<() => void>;

package/src/generators/react-form/react-form.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const nx_oc_1 = require("@abgov/nx-oc");
+const devkit_1 = require("@nrwl/devkit");
+const axios_1 = require("axios");
+const enquirer_1 = require("enquirer");
+const path = require("path");
+const form_1 = require("../../utils/form");
+function getFormDefinition(formServiceUrl, token) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { data: definitions } = yield axios_1.default.get(new URL('form/v1/definitions', formServiceUrl).href, {
+            headers: { Authorization: `Bearer ${token}` },
+        });
+        const choices = definitions
+            .filter((r) => !!r.dataSchema)
+            .map((r) => r.name)
+            .sort((a, b) => a.localeCompare(b));
+        if (choices.length < 1) {
+            throw new Error('No form definitions with data schema found.');
+        }
+        const result = yield (0, enquirer_1.prompt)({
+            type: 'autocomplete',
+            name: 'definition',
+            message: 'Which form definition do you want to generate a component for?',
+            choices,
+        });
+        const formDefinition = definitions.find((r) => r.name === result.definition);
+        const general = {
+            type: 'object',
+            className: 'General',
+            properties: {},
+        };
+        let addGeneral = false;
+        Object.entries(formDefinition.dataSchema.properties || {}).forEach(([property, value]) => {
+            if (value.type !== 'object') {
+                general.properties[property] = value;
+                delete formDefinition.dataSchema.properties[property];
+                addGeneral = true;
+            }
+            else {
+                value.className = (0, devkit_1.names)(property).className;
+            }
+        });
+        if (addGeneral) {
+            formDefinition.dataSchema.properties = Object.assign({ general }, formDefinition.dataSchema.properties);
+        }
+        return formDefinition;
+    });
+}
+function normalizeOptions(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const { env, accessToken } = options;
+        const projectName = (0, devkit_1.names)(options.project).fileName;
+        const projectRoot = `${(0, devkit_1.getWorkspaceLayout)(host).appsDir}/${projectName}`;
+        const environment = nx_oc_1.environments[env || 'prod'];
+        const urls = yield (0, nx_oc_1.getServiceUrls)(environment.directoryServiceUrl);
+        let tenantToken = accessToken;
+        if (!accessToken) {
+            const token = yield (0, nx_oc_1.realmLogin)(environment.accessServiceUrl, 'core');
+            const tenant = yield (0, nx_oc_1.selectTenant)(urls['urn:ads:platform:tenant-service'], token);
+            tenantToken = yield (0, nx_oc_1.realmLogin)(environment.accessServiceUrl, tenant.realm);
+        }
+        const formServiceUrl = urls['urn:ads:platform:form-service'];
+        const formDefinition = yield getFormDefinition(formServiceUrl, tenantToken);
+        return Object.assign(Object.assign({}, options), { projectRoot,
+            formServiceUrl,
+            formDefinition });
+    });
+}
+function addFiles(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const formNames = (0, devkit_1.names)(options.formDefinition.name);
+        const interfaceDefinition = yield (0, form_1.generateFormInterface)(options.formDefinition);
+        const templateOptions = Object.assign(Object.assign(Object.assign(Object.assign({}, options), options.formDefinition), formNames), { interfaceDefinition, tmpl: '' });
+        (0, devkit_1.generateFiles)(host, path.join(__dirname, 'files'), options.projectRoot, templateOptions);
+    });
+}
+function default_1(host, options) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const normalizedOptions = yield normalizeOptions(host, options);
+        yield addFiles(host, normalizedOptions);
+        return () => {
+            (0, devkit_1.formatFiles)(host);
+        };
+    });
+}
+exports.default = default_1;
+//# sourceMappingURL=react-form.js.map

package/src/generators/react-form/react-form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"react-form.js","sourceRoot":"","sources":["../../../../../../packages/nx-adsp/src/generators/react-form/react-form.ts"],"names":[],"mappings":"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"}

package/src/generators/react-form/react-forms.spec.ts

@@ -0,0 +1,94 @@
+import * as utils from '@abgov/nx-oc';
+import { addProjectConfiguration } from '@nrwl/devkit';
+import { createTreeWithEmptyV1Workspace } from '@nrwl/devkit/testing';
+import axios from 'axios';
+import { prompt } from 'enquirer';
+
+import { FormDefinition } from '../../utils/form';
+import { Schema } from './schema';
+import generator from './react-form';
+
+const formDefinition: FormDefinition = {
+  name: 'Some Intake',
+  dataSchema: {
+    type: 'object',
+    properties: {
+      notInSection: {
+        type: 'string',
+      },
+      personalInformation: {
+        title: 'Personal information',
+        description: '',
+        type: 'object',
+        properties: {
+          firstName: {
+            type: 'string',
+            pattern: '^.{1,20}$',
+          },
+          lastName: {
+            type: 'string',
+          },
+        },
+        required: ['firstName', 'lastName'],
+      },
+      additional: {
+        description: 'Provide additional information.',
+        type: 'object',
+        properties: {
+          income: {
+            type: 'number',
+            title: 'Annual income',
+            description: 'Annual income from line 4 of Notice of Assessment.',
+          },
+          consent: {
+            type: 'boolean',
+          },
+        },
+      },
+    },
+  },
+};
+
+jest.mock('@abgov/nx-oc');
+const utilsMock = utils as jest.Mocked<typeof utils>;
+utilsMock.getServiceUrls.mockResolvedValue({
+  'urn:ads:platform:tenant-service': 'https://tenant-service',
+  'urn:ads:platform:form-service': 'https://form-service',
+});
+
+utilsMock.realmLogin.mockResolvedValue('token');
+utilsMock.selectTenant.mockResolvedValue({ name: 'demo', realm: 'demo' });
+
+jest.mock('axios');
+const axiosMock = axios as jest.Mocked<typeof axios>;
+axiosMock.get.mockResolvedValueOnce({ data: [formDefinition] });
+
+jest.mock('enquirer', () => ({ prompt: jest.fn() }));
+const promptMock = prompt as jest.Mock;
+promptMock.mockResolvedValue({ definition: 'Some Intake' });
+
+describe('React Form Generator', () => {
+  const options: Schema = {
+    project: 'test',
+    env: 'dev',
+  };
+
+  it('can run', async () => {
+    const host = createTreeWithEmptyV1Workspace();
+
+    addProjectConfiguration(host, 'test', {
+      root: 'apps/test',
+      projectType: 'application',
+      targets: {
+        build: {
+          executor: '@nrwl/web:webpack',
+        },
+      },
+    });
+
+    await generator(host, options);
+    expect(host.exists('apps/test/some-intake/some-intake.tsx')).toBeTruthy();
+    expect(host.exists('apps/test/some-intake/some-intake.slice.ts')).toBeTruthy();
+    expect(host.exists('apps/test/some-intake/some-intake.module.css')).toBeTruthy();
+  }, 30000);
+});

package/src/generators/react-form/schema.d.ts

@@ -0,0 +1,13 @@
+import { EnvironmentName } from '@abgov/nx-oc';
+
+export interface Schema {
+  project: string;
+  env: EnvironmentName;
+  accessToken?: string;
+}
+
+export interface NormalizedSchema extends Schema {
+  projectRoot: string;
+  formDefinition: FormDefinition;
+  formServiceUrl: string;
+}

package/src/generators/react-form/schema.json

@@ -0,0 +1,45 @@
+{
+  "$schema": "http://json-schema.org/schema",
+  "cli": "nx",
+  "id": "NxAdspReactForm",
+  "title": "",
+  "type": "object",
+  "properties": {
+    "project": {
+      "type": "string",
+      "description": "Project to add form component in.",
+      "$default": {
+        "$source": "argv",
+        "index": 0
+      },
+      "x-prompt": "Which project to add form component for?"
+    },
+    "env": {
+      "type": "string",
+      "description": "Environment to target.",
+      "$default": {
+        "$source": "argv",
+        "index": 1
+      },
+      "alias": "e",
+      "x-prompt": {
+        "message": "Which ADSP environment do you want to target?",
+        "type": "list",
+        "items": [
+          "dev",
+          "test",
+          "prod"
+        ]
+      }
+    },
+    "accessToken": {
+      "type": "string",
+      "description": "Access token for retrieving configuration from ADSP APIs.",
+      "alias": "at"
+    }
+  },
+  "required": [
+    "project",
+    "env"
+  ]
+}

package/src/utils/form.d.ts

@@ -0,0 +1,5 @@
+export interface FormDefinition {
+    name: string;
+    dataSchema: Record<string, unknown>;
+}
+export declare function generateFormInterface({ name, dataSchema, }: FormDefinition): Promise<string>;

package/src/utils/form.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateFormInterface = void 0;
+const tslib_1 = require("tslib");
+const json_schema_to_typescript_1 = require("json-schema-to-typescript");
+function generateFormInterface({ name, dataSchema, }) {
+    return tslib_1.__awaiter(this, void 0, void 0, function* () {
+        const types = yield (0, json_schema_to_typescript_1.compile)(dataSchema, name, {
+            additionalProperties: false,
+        });
+        return types;
+    });
+}
+exports.generateFormInterface = generateFormInterface;
+//# sourceMappingURL=form.js.map

package/src/utils/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../../../packages/nx-adsp/src/utils/form.ts"],"names":[],"mappings":";;;;AAAA,yEAAoD;AAOpD,SAAsB,qBAAqB,CAAC,EAC1C,IAAI,EACJ,UAAU,GACK;;QACf,MAAM,KAAK,GAAG,MAAM,IAAA,mCAAO,EAAC,UAAU,EAAE,IAAI,EAAE;YAC5C,oBAAoB,EAAE,KAAK;SAC5B,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC;CAAA;AATD,sDASC"}

package/src/utils/form.spec.ts

@@ -0,0 +1,47 @@
+import { FormDefinition, generateFormInterface } from './form';
+
+describe('generateFormInterface', () => {
+  const dataSchema = {
+    type: 'object',
+    properties: {
+      firstName: {
+        type: 'string',
+      },
+      lastName: {
+        type: 'string',
+      },
+      age: {
+        description: 'Age in years',
+        type: 'integer',
+        minimum: 0,
+      },
+      hairColor: {
+        enum: ['black', 'brown', 'blue'],
+        type: 'string',
+      },
+      personal: {
+        type: 'object',
+        properties: {
+          firstName: {
+            type: 'string',
+          },
+          lastName: {
+            type: 'string',
+          },
+        },
+      },
+    },
+    additionalProperties: false,
+    required: ['firstName', 'lastName'],
+  };
+
+  it('can generate form interface', async () => {
+    const result = await generateFormInterface({
+      name: 'Test questionnaire',
+      dataSchema: dataSchema as unknown,
+    } as FormDefinition);
+
+    expect(result).toBeTruthy();
+    // expect(result).toMatchSnapshot();
+  });
+});