chore: consolidate duplicate react/angular files into common

libs/angular-components/package.json

@@ -17,6 +17,7 @@
     "directory": "libs/angular-components"
   },
   "peerDependencies": {
+    "@abgov/ui-components-common": "^0.0.0 || ^1.0.0",
     "@angular/forms": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "@angular/core":  "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"

libs/angular-components/src/index.ts

@@ -1,4 +1,3 @@
 export * from "./lib/angular-components.module";
 export * from "./lib/components";
-export * from "./lib/validation";
-export * from "./lib/public-form-utils";
+export * from "@abgov/ui-components-common";

libs/common/package.json

@@ -21,5 +21,6 @@
   "module": "./index.js",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "semantic-release": "semantic-release"
 }

libs/common/src/index.ts

@@ -1 +1,3 @@
 export * from "./lib/common";
+export * from "./lib/validators";
+export * from "./lib/public-form-controller";

libs/common/src/lib/common.ts

@@ -218,7 +218,7 @@ export type GoabSkeletonSize = "1" | "2" | "3" | "4";
 
 export type GoabRadioGroupOrientation = "horizontal" | "vertical";
 
-export interface GoabRadioGroup extends Margins {
+export interface GoabRadioGroupProps extends Margins {
   name: string;
   value?: string;
   disabled?: boolean;
@@ -228,7 +228,7 @@ export interface GoabRadioGroup extends Margins {
   ariaLabel?: string;
 }
 
-export interface GoabRadioItem {
+export interface GoabRadioItemProps {
   value?: string;
   label?: string;
   name?: string;

libs/angular-components/src/lib/public-form-utils.ts → libs/common/src/lib/public-form-controller.ts

@@ -1,4 +1,4 @@
-import { FieldValidator } from "./validation";
+import { FieldsetItemState, FieldValidator } from "./validators";
 
 export type FormStatus = "not-started" | "incomplete" | "complete";
 
@@ -21,13 +21,6 @@ export type Fieldset<T> = {
     | { type: "list"; items: AppState<T>[] };
 };
 
-// Public type to define the state of the fieldset items
-export type FieldsetItemState = {
-  name: string;
-  label: string;
-  value: string;
-};
-
 export class PublicFormController<T> {
   state?: AppState<T> | AppState<T>[];
   _formData?: Record<string, string> = undefined;

libs/angular-components/src/lib/validation.spec.ts → libs/common/src/lib/validation.spec.ts

@@ -5,7 +5,8 @@ import {
   SINValidator,
   emailValidator,
   postalCodeValidator,
-} from "./validation";
+  dateValidator,
+} from "./validators";
 
 describe("Validation", () => {
   describe("Email", () => {
@@ -153,6 +154,35 @@ describe("Validation", () => {
 
   describe("Date", () => {
     it("needs a test");
+    // const validValues = ["", "123456"];
+    // const invalidValues = ["12345"];
+    //
+    // const validate = lengthValidator({ min: 6, optional: true });
+    //
+    // for (const val of validValues) {
+    //   it(`${val} should be valid`, () => {
+    //     const msg = validate(val);
+    //     expect(msg).toBe("");
+    //   });
+    // }
+    //
+    // for (const val of invalidValues) {
+    //   it(`${val} should be invalid`, () => {
+    //     const msg = validate(val);
+    //     expect(msg).not.toBe("");
+    //   });
+    // }
+
+    describe("Start date", () => {
+      // const start = new Date(2025, 0, 1);
+      // const validator = dateValidator({ min: start });
+      // const validDate = new Date(2025, 2, 1);
+      it("needs a test");
+    });
+
+    // describe("End date", () => {
+    //
+    // })
   });
 
   describe("Regex", () => {

libs/angular-components/src/lib/validation.ts → libs/common/src/lib/validators.ts

@@ -1,10 +1,15 @@
-import { FieldsetItemState } from "./public-form-utils";
+export type FieldsetItemState = {
+  name: string;
+  label: string;
+  value: string;
+};
 
 export type FieldValidator = (value: unknown) => string;
 export type FieldsetState = Record<string, FieldsetItemState>;
 
 export class FormValidator {
   private readonly validators: Record<string, FieldValidator[]>;
+
   constructor(validators?: Record<string, FieldValidator[]>) {
     this.validators = validators || {};
   }
@@ -32,10 +37,6 @@ export class FormValidator {
   }
 }
 
-// **********
-// Validators
-// **********
-
 export function birthDayValidator(): FieldValidator[] {
   return [
     requiredValidator("Day is required"),
@@ -155,17 +156,18 @@ export function regexValidator(regex: RegExp, msg: string): FieldValidator {
 
 interface DateValidatorOptions {
   invalidMsg?: string;
-  startMsg?: string;
-  endMsg?: string;
-  start?: Date;
-  end?: Date;
+  minMsg?: string;
+  maxMsg?: string;
+  min?: Date;
+  max?: Date;
 }
+
 export function dateValidator({
   invalidMsg,
-  startMsg,
-  endMsg,
-  start,
-  end,
+  minMsg,
+  maxMsg,
+  min,
+  max,
 }: DateValidatorOptions): FieldValidator {
   return (date: unknown) => {
     let _date: Date = new Date(0);
@@ -181,11 +183,11 @@ export function dateValidator({
       return invalidMsg || "Invalid date";
     }
 
-    if (_date && start && _date < start) {
-      return startMsg || `Must be after ${start}`;
+    if (_date && min && _date < min) {
+      return minMsg || `Must be after ${min}`;
     }
-    if (_date && end && _date > end) {
-      return endMsg || `Must be before ${end}`;
+    if (_date && max && _date > max) {
+      return maxMsg || `Must be before ${max}`;
     }
 
     return "";
@@ -199,6 +201,7 @@ interface NumericValidatorOptions {
   min?: number;
   max?: number;
 }
+
 export function numericValidator({
   invalidTypeMsg,
   minMsg,
@@ -239,6 +242,7 @@ interface LengthValidatorOptions {
   min?: number;
   optional?: boolean;
 }
+
 export function lengthValidator({
   invalidTypeMsg,
   minMsg,

libs/react-components/src/experimental/form/form.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useEffect, useRef } from "react";
 import { Margins, GoabFormStorageType, GoabFormOnMountDetail, GoabFormOnStateChange } from "@abgov/ui-components-common";
-import { relay } from "../validators";
+import { relay } from "@abgov/ui-components-common";
 
 interface WCProps extends Margins {
   ref?: React.MutableRefObject<HTMLElement | undefined>;