feat(webforms): Init webforms

docs/docs/services/api.md

@@ -16,10 +16,11 @@ The api service deploys a lambda-backed API Gateway that is used by the frontend
 
 The largest component of the api service is the API Gateway itself.  This is a standard deployment of a regional, REST API Gateway.  We do not apply custom certificates or DNS names to the api gateway endpoint (yet); instead, our application uses the amazon generated SSL endpoint.  
 
-There are three endpoints on the api.  Each is guarded by AWS IAM, meaning that while the API Gateway is publicly available, the API will not forward your request to the backing lambda unless you provide valid credentials obtained through AWS Cognito.  This way, only users with an account that we can authenticate may successfully call endpoints.  The three endpoints are:
+There are four endpoints on the api.  Each is guarded by AWS IAM, meaning that while the API Gateway is publicly available, the API will not forward your request to the backing lambda unless you provide valid credentials obtained through AWS Cognito.  This way, only users with an account that we can authenticate may successfully call endpoints.  The four endpoints are:
 - /search (POST):  This endpoint accepts search queries from clients in the form of OpenSearch Query DSL queries.  Once the query is received, the lambda adds extra query filters to ensure fine grain auth.  This works by looking up the user making the call in Cognito, determining what type of user (cms or state) is making the call, determining what states that user has access to (if appropriate), and modifying the query in a way that will only return results for those states.  By design, the only thing the search endpoint adds is related to authentication; the rest of the query building is left to the frontend for faster and more flexible development.
 - /item (POST):  The item endpoint is used to fetch details for exactly one record.  While you can form a query to do this and use the search endpoint, the item endpoint is for convenience.  Simply make a post call containing the ID of the desired record to the item endpoint, and the record will be returned.  Note that fine grain auth is still enforced in an identical way to search, whereby you will only obtain results for that ID if you should have access to that ID.
 - /getAttachmentUrl (POST):  This endpoint is used to generate a presigned url for direct client downloading of S3 data, enforcing fine grain auth along the way.  This is how we securely allow download of submission attachment data.  From the details page, a user may click a file to download.  Once clicked, their client makes a post to /getAttachmentUrl with the attachment metadata.  The lambda function determines if the caller should or should not have access based on identical logic as the other endpoints (the UI would not display something they cannot download, but this guards against bad actors).  If access is allowed, the lambda function generates a presigned url good for 60 seconds and returns it to the client browser, at which point files are downloaded automatically.
+- /forms (GET):  This endpoint function serves as the backend for handling forms and their associated data. This function provides various features, including retrieving form data, validating access, and serving the requested form content. The request to this endpoint must include a formId in the request body. Optionally, you can include a formVersion parameter. If you access this endpoint with formId without specifying formVersion, it will return the latest version. Form schemas are stored in a Lambda layer. Each form is organized in its directory, and each version is stored within that directory. The Lambda layer is located in the "opt" directory when deployed to aws. To access a specific version of a form with a formId, use the following URL structure: /opt/${formId}/v${formVersion}.json. The JSON form schemas are versioned and stored in Git under the "api/layers" directory.
 
 All endpoints and backing functions interact with the OpenSearch data layer.  As such, and because OpenSearch is deployed within a VPC, all lambda functions of the api service are VPC based.  The functions share a security group that allows outbound traffic.  
 

src/packages/shared-types/forms.ts

@@ -0,0 +1,141 @@
+import {
+  Control,
+  FieldArrayPath,
+  FieldValues,
+  RegisterOptions,
+} from "react-hook-form";
+import {
+  CalendarProps,
+  InputProps,
+  RadioProps,
+  SelectProps,
+  SwitchProps,
+  TextareaProps,
+} from "shared-types";
+
+export interface FormSchema {
+  header: string;
+  sections: Section[];
+}
+
+export type RHFSlotProps = {
+  name: string;
+  label?: string;
+  labelStyling?: string;
+  groupNamePrefix?: string;
+  description?: string;
+  dependency?: DependencyRule;
+  rules?: RegisterOptions;
+} & {
+  [K in keyof RHFComponentMap]: {
+    rhf: K;
+    props?: RHFComponentMap[K];
+    fields?: K extends "FieldArray"
+      ? RHFSlotProps[]
+      : K extends "FieldGroup"
+      ? RHFSlotProps[]
+      : never;
+  };
+}[keyof RHFComponentMap];
+
+export type RHFOption = {
+  label: string;
+  value: string;
+  form?: FormGroup[];
+  slots?: RHFSlotProps[];
+};
+
+export type RHFComponentMap = {
+  Input: InputProps & {
+    label?: string;
+    description?: string;
+  };
+  Textarea: TextareaProps;
+  Switch: SwitchProps;
+  Select: SelectProps & { sort?: "ascending" | "descending" };
+  Radio: RadioProps & {
+    options: RHFOption[];
+  };
+  DatePicker: CalendarProps;
+  Checkbox: {
+    options: RHFOption[];
+  };
+  FieldArray: {
+    appendText?: string;
+  };
+  FieldGroup: {
+    appendText?: string;
+    removeText?: string;
+  };
+};
+
+export type FormGroup = {
+  description?: string;
+  slots: RHFSlotProps[];
+  wrapperStyling?: string;
+  dependency?: DependencyRule;
+};
+
+export interface Section {
+  title: string;
+  form: FormGroup[];
+  dependency?: DependencyRule;
+}
+
+export interface Document {
+  header: string;
+  sections: Section[];
+}
+
+export type FieldArrayProps<
+  T extends FieldValues,
+  TFieldArrayName extends FieldArrayPath<T> = FieldArrayPath<T>
+> = {
+  control: Control<T, unknown>;
+  name: TFieldArrayName;
+  fields: RHFSlotProps[];
+  groupNamePrefix?: string;
+  appendText?: string;
+};
+
+export type FieldGroupProps<
+  T extends FieldValues,
+  TFieldArrayName extends FieldArrayPath<T> = FieldArrayPath<T>
+> = {
+  control: Control<T, unknown>;
+  name: TFieldArrayName;
+  fields: RHFSlotProps[];
+  appendText?: string;
+  removeText?: string;
+  groupNamePrefix?: string;
+};
+
+type ConditionRules =
+  | {
+      type: "valueExists" | "valueNotExist";
+    }
+  | {
+      type: "expectedValue";
+      expectedValue: unknown;
+    };
+
+type Condition = { name: string } & ConditionRules;
+
+type Effects =
+  | {
+      type: "show" | "hide";
+    }
+  | {
+      type: "setValue";
+      newValue: unknown;
+    };
+
+export interface DependencyRule {
+  conditions: Condition[];
+  effect: Effects;
+}
+
+export interface DependencyWrapperProps {
+  name?: string;
+  dependency?: DependencyRule;
+}

src/packages/shared-types/index.ts

@@ -9,3 +9,5 @@ export * from "./actions";
 export * from "./attachments";
 export * from "./authority";
 export * from "./action-types/withdraw-record";
+export * from "./forms";
+export * from "./inputs";

src/packages/shared-types/inputs.ts

@@ -0,0 +1,45 @@
+import { DayPicker } from "react-day-picker";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as SelectPrimitive from "@radix-ui/react-select";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker> & {
+  className?: string;
+  classNames?: any;
+  showOutsideDays?: boolean;
+};
+
+export type DatePickerProps = {
+  date: Date | undefined;
+  onChange: (date: Date | undefined) => void;
+};
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {
+  icon?: string;
+}
+
+export type RadioProps = React.ComponentPropsWithoutRef<
+  typeof RadioGroupPrimitive.Root
+> & {
+  className?: string;
+};
+
+export type SelectProps = React.ComponentPropsWithoutRef<
+  typeof SelectPrimitive.Root
+> & {
+  options: { label: string; value: any }[];
+  className?: string;
+};
+
+export type SwitchProps = React.ComponentPropsWithoutRef<
+  typeof SwitchPrimitives.Root
+> & {
+  className?: string;
+};
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+  charcount?: "simple" | "limited";
+  charcountstyling?: string;
+}

src/packages/shared-types/user.ts

@@ -31,3 +31,10 @@ export const CMS_READ_ONLY_ROLES = [
 ];
 
 export const STATE_ROLES = [UserRoles.STATE_SUBMITTER];
+
+export const RoleDescriptionStrings: { [key: string]: string } = {
+  [UserRoles.CMS_READ_ONLY]: "Read Only",
+  [UserRoles.CMS_REVIEWER]: "Reviewer",
+  [UserRoles.HELPDESK]: "Helpdesk",
+  [UserRoles.STATE_SUBMITTER]: "State Submitter",
+};

src/packages/shared-utils/index.ts

@@ -1,3 +1,4 @@
 export * from "./user-helper";
 export * from "./s3-url-parser";
 export * from "./rai-helper"
+export * from "./regex"

src/packages/shared-utils/regex.test.ts

@@ -0,0 +1,43 @@
+import { it, describe, expect } from "vitest";
+import { convertRegexToString, reInsertRegex } from "./regex";
+
+const testRegex = /^-?\d*\.?\d+$/g
+
+const testForm = {
+    label: "SSI federal benefit amount",
+    value: "ssi_federal_benefit_amount",
+    slots: [
+      {
+        rhf: "Input",
+        name: "ssi_federal_benefit_percentage",
+        label: "Enter the SSI Federal Benefit Rate percentage",
+        props: {
+          icon: "%",
+        },
+        rules: {
+          pattern: {
+            value: testRegex,
+            message: "Must be a percentage",
+          },
+          required: "* Required",
+        },
+      },
+    ],
+  };
+
+describe("form regex", () => {
+  it("conversion logic should work", () => {
+    const result = convertRegexToString(testForm)
+    const val = result.slots[0].rules.pattern.value
+
+    const jsonVal = JSON.stringify(val)
+    expect(jsonVal).toBeTypeOf('string')
+
+    const parsedVal = JSON.parse(jsonVal)
+
+    const restoredRegex = new RegExp(parsedVal[1], parsedVal[2]);
+    expect(restoredRegex).toEqual(testRegex)
+    expect(reInsertRegex(result)).toEqual(testForm)
+
+  });
+})

src/packages/shared-utils/regex.ts

@@ -0,0 +1,44 @@
+export const convertRegexToString = (obj: any) => {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      const value = obj[key];
+
+      if (value instanceof RegExp) {
+        // Convert RegExp to string
+        const str = value.toString();
+        // save it in this weird array thing
+        obj[key] = /\/(.*)\/(.*)/.exec(str);
+      } else if (typeof value === "object" && value !== null) {
+        // Recursively process nested objects
+        obj[key] = convertRegexToString(value);
+      }
+    }
+  }
+
+  return obj;
+};
+
+export const reInsertRegex = (obj: any) => {
+  for (const key in obj) {
+    if (obj.hasOwnProperty(key)) {
+      if (typeof obj[key] === "object" && obj[key] !== null) {
+        // If the current property is an object, recursively call the function
+        obj[key] = reInsertRegex(obj[key]);
+
+        // Check if the current object has a property "pattern" with a "value" key
+        if (
+          obj[key].hasOwnProperty("pattern") &&
+          typeof obj[key].pattern === "object" &&
+          obj[key].pattern.hasOwnProperty("value")
+        ) {
+          // if its a pattern.value replace the value's value with a regex from the weird array thing
+          obj[key].pattern.value = new RegExp(
+            obj[key].pattern.value[1],
+            obj[key].pattern.value[2]
+          );
+        }
+      }
+    }
+  }
+  return obj;
+};