@abgov/ui-components-common 1.0.0 → 1.1.0-alpha.1

package/index.cjs

@@ -1 +1 @@
-"use strict";
+"use strict";var A=Object.defineProperty;var p=r=>{throw TypeError(r)};var M=(r,t,e)=>t in r?A(r,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):r[t]=e;var u=(r,t,e)=>M(r,typeof t!="symbol"?t+"":t,e),v=(r,t,e)=>t.has(r)||p("Cannot "+e);var y=(r,t,e)=>t.has(r)?p("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(r):t.set(r,e);var g=(r,t,e)=>(v(r,t,"access private method"),e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class S{constructor(t){u(this,"validators");this.validators=t||{}}add(t,...e){this.validators[t]=e}validate(t){const e={};return Object.entries(this.validators).forEach(([a,n])=>{const s=n.map(i=>i(t[a])).find(i=>!!i);s&&(e[a]=s)}),e}}function E(){return[f("Day is required"),h({min:1,max:31,minMsg:"Day must be between 1 and 31",maxMsg:"Day must be between 1 and 31"})]}function N(){return[f("Month is required"),h({min:0,max:11,minMsg:"Month must be between Jan and Dec",maxMsg:"Month must be between Jan and Dec"})]}function _(){const r=new Date().getFullYear();return[f("Year is required"),h({min:1900,max:r,minMsg:"Year must be greater than 1900",maxMsg:`Year must be less than ${r}`})]}function f(r){return t=>(r=r||"Required",typeof t=="number"&&!isNaN(t)||t?"":r)}function R(r){const t=new RegExp(/^\+?[\d-() ]{10,18}$/);return c(t,r||"Invalid phone number")}function D(r){const t=new RegExp(/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/);return c(t,r||"Invalid email address")}function w(){return r=>{if(!r)return"";const t="121212121".split("").map(n=>parseInt(n)),e=r.replace(/\D/g,"");return e.length!==9?"SIN must contain 9 numbers":e.split("").map(n=>parseInt(n)).map((n,s)=>{const i=n*t[s];return i<10?i:`${i}`.split("").map(o=>parseInt(o)).reduce((o,m)=>o+m,0)}).reduce((n,s)=>n+s,0)%10===0?"":"Invalid SIN"}}function I(){return c(/^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,"Invalid postal code")}function c(r,t){return e=>!e||e.match(r)?"":t}function x({invalidMsg:r,minMsg:t,maxMsg:e,min:a,max:n}){return s=>{let i=new Date(0);return typeof s=="string"&&(i=new Date(s)),s.toDateString&&(i=s),i.toString()==="Invalid Date"||i.getTime()===0?r||"Invalid date":i&&a&&i<a?t||`Must be after ${a}`:i&&n&&i>n?e||`Must be before ${n}`:""}}function h({invalidTypeMsg:r,minMsg:t,maxMsg:e,min:a=-Number.MAX_VALUE,max:n=Number.MAX_VALUE}){return s=>{let i=Number.MAX_VALUE;return typeof s=="string"&&(i=parseFloat(s)),typeof s=="number"&&(i=s),isNaN(i)?r||"Must be a numeric value":i>n?e||`Must be less than or equal to ${n}`:i<a?t||`Must be greater than or equal to ${a}`:""}}function $({invalidTypeMsg:r,minMsg:t,maxMsg:e,min:a=-Number.MAX_VALUE,max:n=Number.MAX_VALUE,optional:s}){return i=>s&&`${i}`.length===0?"":typeof i!="string"?r||"Invalid type":i.length>n?e||`Must be less than ${n} characters`:i.length<a?t||`Must be greater than ${a} characters`:""}var d,L,V;class C{constructor(t){y(this,d);u(this,"state");u(this,"_formData");u(this,"_formRef");this.type=t}init(t){if(this._formRef){console.warn("init: form element has already been set");return}this._formRef=t.detail.el,this.state={uuid:crypto.randomUUID(),form:{},history:[],editting:"",status:"not-started"}}initList(t){this._formRef=t.detail.el,this.state=[]}initState(t,e){l(this._formRef,"external::init:state",t),e&&setTimeout(e,200)}updateListState(t){const e=t.detail;Array.isArray(e.data)&&(this.state=e.data)}updateObjectState(t){var a,n;if(Array.isArray(this.state))return;const e=t.detail;e.type==="list"?this.state={...this.state,form:{...((a=this.state)==null?void 0:a.form)||{},[e.id]:e.data}}:this.state={...this.state,form:{...((n=this.state)==null?void 0:n.form)||{},...e.data.form},history:e.data.history}}getStateList(){return this.state?Array.isArray(this.state)?this.state.length===0?[]:this.state.map(t=>Object.values(t.form).filter(e=>{var a;return((a=e==null?void 0:e.data)==null?void 0:a.type)==="details"}).map(e=>{var a;return e.data.type==="details"&&((a=e.data)==null?void 0:a.fieldsets)||{}}).reduce((e,a)=>{for(const[n,s]of Object.entries(a))e[n]=s.value;return e},{})):(console.warn("Utils:getStateList: unable to update the state of a non-multi form type",this.state),[]):[]}continueTo(t){if(!t){console.error("continueTo [name] is undefined");return}console.log("continueTo: TYPE",{type:this.type,state:this.state,formRef:this._formRef,next:t}),l(this._formRef,"external::continue",{next:t})}validate(t,e,a){var o;const{el:n,state:s}=e.detail,i=(o=s==null?void 0:s[t])==null?void 0:o.value;for(const m of a){const b=m(i);if(g(this,d,V).call(this,n,t,b),b)return[!1,""]}return[!0,i]}edit(t){l(this._formRef,"external::alter:state",{index:t,operation:"edit"})}remove(t){l(this._formRef,"external::alter:state",{index:t,operation:"remove"})}clean(){var e;if(Array.isArray(this.state))return;const t=this.state;return(e=this.state)==null?void 0:e.history.reduce((a,n)=>(a[n]=t==null?void 0:t.form[n],a),{})}}d=new WeakSet,L=function(t){var e;Array.isArray(t.data)&&(Array.isArray(this.state)||(this.state={...this.state,form:{...((e=this.state)==null?void 0:e.form)||{},[t.id]:t.data}}))},V=function(t,e,a){t.dispatchEvent(new CustomEvent("msg",{composed:!0,detail:{action:"external::set:error",data:{name:e,msg:a}}}))};function T(r,t,e,a){if(!r){console.error("dispatch element is null");return}r.dispatchEvent(new CustomEvent(t,{composed:!0,bubbles:a==null?void 0:a.bubbles,detail:e}))}function l(r,t,e,a){if(!r){console.error("dispatch element is null");return}r.dispatchEvent(new CustomEvent("msg",{composed:!0,bubbles:a==null?void 0:a.bubbles,detail:{action:t,data:e}}))}exports.FormValidator=S;exports.PublicFormController=C;exports.SINValidator=w;exports.birthDayValidator=E;exports.birthMonthValidator=N;exports.birthYearValidator=_;exports.dateValidator=x;exports.dispatch=T;exports.emailValidator=D;exports.lengthValidator=$;exports.numericValidator=h;exports.phoneNumberValidator=R;exports.postalCodeValidator=I;exports.regexValidator=c;exports.relay=l;exports.requiredValidator=f;

package/index.d.ts

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

package/index.js

@@ -1 +1,332 @@
-
+var M = Object.defineProperty;
+var p = (r) => {
+  throw TypeError(r);
+};
+var v = (r, t, e) => t in r ? M(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e;
+var u = (r, t, e) => v(r, typeof t != "symbol" ? t + "" : t, e), V = (r, t, e) => t.has(r) || p("Cannot " + e);
+var y = (r, t, e) => t.has(r) ? p("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, e);
+var g = (r, t, e) => (V(r, t, "access private method"), e);
+class _ {
+  constructor(t) {
+    u(this, "validators");
+    this.validators = t || {};
+  }
+  add(t, ...e) {
+    this.validators[t] = e;
+  }
+  validate(t) {
+    const e = {};
+    return Object.entries(this.validators).forEach(([a, i]) => {
+      const s = i.map((n) => n(t[a])).find((n) => !!n);
+      s && (e[a] = s);
+    }), e;
+  }
+}
+function N() {
+  return [
+    c("Day is required"),
+    m({
+      min: 1,
+      max: 31,
+      minMsg: "Day must be between 1 and 31",
+      maxMsg: "Day must be between 1 and 31"
+    })
+  ];
+}
+function R() {
+  return [
+    c("Month is required"),
+    m({
+      min: 0,
+      max: 11,
+      minMsg: "Month must be between Jan and Dec",
+      maxMsg: "Month must be between Jan and Dec"
+    })
+  ];
+}
+function w() {
+  const r = (/* @__PURE__ */ new Date()).getFullYear();
+  return [
+    c("Year is required"),
+    m({
+      min: 1900,
+      max: r,
+      minMsg: "Year must be greater than 1900",
+      maxMsg: `Year must be less than ${r}`
+    })
+  ];
+}
+function c(r) {
+  return (t) => (r = r || "Required", typeof t == "number" && !isNaN(t) || t ? "" : r);
+}
+function D(r) {
+  const t = new RegExp(/^\+?[\d-() ]{10,18}$/);
+  return h(t, r || "Invalid phone number");
+}
+function I(r) {
+  const t = new RegExp(
+    /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
+  );
+  return h(t, r || "Invalid email address");
+}
+function x() {
+  return (r) => {
+    if (!r) return "";
+    const t = "121212121".split("").map((i) => parseInt(i)), e = r.replace(/\D/g, "");
+    return e.length !== 9 ? "SIN must contain 9 numbers" : e.split("").map((i) => parseInt(i)).map((i, s) => {
+      const n = i * t[s];
+      return n < 10 ? n : `${n}`.split("").map((o) => parseInt(o)).reduce((o, d) => o + d, 0);
+    }).reduce((i, s) => i + s, 0) % 10 === 0 ? "" : "Invalid SIN";
+  };
+}
+function $() {
+  return h(
+    /^[ABCEGHJ-NPRSTVXY]\d[ABCEGHJ-NPRSTV-Z][ -]?\d[ABCEGHJ-NPRSTV-Z]\d$/i,
+    "Invalid postal code"
+  );
+}
+function h(r, t) {
+  return (e) => !e || e.match(r) ? "" : t;
+}
+function L({
+  invalidMsg: r,
+  minMsg: t,
+  maxMsg: e,
+  min: a,
+  max: i
+}) {
+  return (s) => {
+    let n = /* @__PURE__ */ new Date(0);
+    return typeof s == "string" && (n = new Date(s)), s.toDateString && (n = s), n.toString() === "Invalid Date" || n.getTime() === 0 ? r || "Invalid date" : n && a && n < a ? t || `Must be after ${a}` : n && i && n > i ? e || `Must be before ${i}` : "";
+  };
+}
+function m({
+  invalidTypeMsg: r,
+  minMsg: t,
+  maxMsg: e,
+  min: a = -Number.MAX_VALUE,
+  max: i = Number.MAX_VALUE
+}) {
+  return (s) => {
+    let n = Number.MAX_VALUE;
+    return typeof s == "string" && (n = parseFloat(s)), typeof s == "number" && (n = s), isNaN(n) ? r || "Must be a numeric value" : n > i ? e || `Must be less than or equal to ${i}` : n < a ? t || `Must be greater than or equal to ${a}` : "";
+  };
+}
+function T({
+  invalidTypeMsg: r,
+  minMsg: t,
+  maxMsg: e,
+  min: a = -Number.MAX_VALUE,
+  max: i = Number.MAX_VALUE,
+  optional: s
+}) {
+  return (n) => s && `${n}`.length === 0 ? "" : typeof n != "string" ? r || "Invalid type" : n.length > i ? e || `Must be less than ${i} characters` : n.length < a ? t || `Must be greater than ${a} characters` : "";
+}
+var f, E, A;
+class C {
+  constructor(t) {
+    y(this, f);
+    u(this, "state");
+    u(this, "_formData");
+    u(this, "_formRef");
+    this.type = t;
+  }
+  // Obtain reference to the form element
+  init(t) {
+    if (this._formRef) {
+      console.warn("init: form element has already been set");
+      return;
+    }
+    this._formRef = t.detail.el, this.state = {
+      uuid: crypto.randomUUID(),
+      form: {},
+      history: [],
+      editting: "",
+      status: "not-started"
+    };
+  }
+  initList(t) {
+    this._formRef = t.detail.el, this.state = [];
+  }
+  // Public method to allow for the initialization of the state
+  initState(t, e) {
+    l(this._formRef, "external::init:state", t), e && setTimeout(e, 200);
+  }
+  updateListState(t) {
+    const e = t.detail;
+    Array.isArray(e.data) && (this.state = e.data);
+  }
+  updateObjectState(t) {
+    var a, i;
+    if (Array.isArray(this.state))
+      return;
+    const e = t.detail;
+    e.type === "list" ? this.state = {
+      ...this.state,
+      form: { ...((a = this.state) == null ? void 0 : a.form) || {}, [e.id]: e.data }
+      // currentFieldset: newState.currentFieldset,
+      // history: detail.data.,
+    } : this.state = {
+      ...this.state,
+      form: { ...((i = this.state) == null ? void 0 : i.form) || {}, ...e.data.form },
+      // currentFieldset: newState.currentFieldset,
+      history: e.data.history
+    };
+  }
+  getStateList() {
+    return this.state ? Array.isArray(this.state) ? this.state.length === 0 ? [] : this.state.map((t) => Object.values(t.form).filter((e) => {
+      var a;
+      return ((a = e == null ? void 0 : e.data) == null ? void 0 : a.type) === "details";
+    }).map((e) => {
+      var a;
+      return e.data.type === "details" && ((a = e.data) == null ? void 0 : a.fieldsets) || {};
+    }).reduce(
+      (e, a) => {
+        for (const [i, s] of Object.entries(a))
+          e[i] = s.value;
+        return e;
+      },
+      {}
+    )) : (console.warn(
+      "Utils:getStateList: unable to update the state of a non-multi form type",
+      this.state
+    ), []) : [];
+  }
+  // getStateItems(group: string): Record<string, FieldsetItemState>[] {
+  //   if (Array.isArray(this.state)) {
+  //     console.error(
+  //       "Utils:getStateItems: unable to update the state of a multi form type",
+  //     );
+  //     return [];
+  //   }
+  //   if (!this.state) {
+  //     console.error("Utils:getStateItems: state has not yet been set");
+  //     return [];
+  //   }
+  //   console.debug("Utils:getStateItems", this.state, { group });
+  //   return (this.state.form[group]?.data ?? []) as Record<string, FieldsetItemState>[];
+  // }
+  // Public method to allow for the retrieval of the state value
+  // getStateValue(group: string, key: string): string {
+  //   if (Array.isArray(this.state)) {
+  //     console.error("getStateValue: unable to update the state of a multi form type");
+  //     return "";
+  //   }
+  //   if (!this.state) {
+  //     console.error("getStateValue: state has not yet been set");
+  //     return "";
+  //   }
+  //   const data = this.state.form[group].data as Record<string, FieldsetItemState>[];
+  //   // @ts-expect-error "ignore"
+  //   return (data as Record<string, string>)[key]?.value ?? "";
+  // }
+  // Public method to allow for the continuing to the next page
+  continueTo(t) {
+    if (!t) {
+      console.error("continueTo [name] is undefined");
+      return;
+    }
+    console.log("continueTo: TYPE", {
+      type: this.type,
+      state: this.state,
+      formRef: this._formRef,
+      next: t
+    }), l(this._formRef, "external::continue", { next: t });
+  }
+  // Public method to perform validation and send the appropriate messages to the form elements
+  validate(t, e, a) {
+    var o;
+    const { el: i, state: s } = e.detail, n = (o = s == null ? void 0 : s[t]) == null ? void 0 : o.value;
+    for (const d of a) {
+      const b = d(n);
+      if (g(this, f, A).call(this, i, t, b), b)
+        return [!1, ""];
+    }
+    return [!0, n];
+  }
+  edit(t) {
+    l(this._formRef, "external::alter:state", { index: t, operation: "edit" });
+  }
+  remove(t) {
+    l(this._formRef, "external::alter:state", { index: t, operation: "remove" });
+  }
+  // removes any data collected that doesn't correspond with the final history path
+  clean() {
+    var e;
+    if (Array.isArray(this.state))
+      return;
+    const t = this.state;
+    return (e = this.state) == null ? void 0 : e.history.reduce((a, i) => (a[i] = t == null ? void 0 : t.form[i], a), {});
+  }
+}
+f = new WeakSet(), E = function(t) {
+  var e;
+  Array.isArray(t.data) && (Array.isArray(this.state) || (this.state = {
+    ...this.state,
+    form: {
+      ...((e = this.state) == null ? void 0 : e.form) || {},
+      [t.id]: t.data
+    }
+  }));
+}, // Private method to dispatch the error message to the form element
+A = function(t, e, a) {
+  t.dispatchEvent(
+    new CustomEvent("msg", {
+      composed: !0,
+      detail: {
+        action: "external::set:error",
+        data: {
+          name: e,
+          msg: a
+        }
+      }
+    })
+  );
+};
+function U(r, t, e, a) {
+  if (!r) {
+    console.error("dispatch element is null");
+    return;
+  }
+  r.dispatchEvent(
+    new CustomEvent(t, {
+      composed: !0,
+      bubbles: a == null ? void 0 : a.bubbles,
+      detail: e
+    })
+  );
+}
+function l(r, t, e, a) {
+  if (!r) {
+    console.error("dispatch element is null");
+    return;
+  }
+  r.dispatchEvent(
+    new CustomEvent("msg", {
+      composed: !0,
+      bubbles: a == null ? void 0 : a.bubbles,
+      detail: {
+        action: t,
+        data: e
+      }
+    })
+  );
+}
+export {
+  _ as FormValidator,
+  C as PublicFormController,
+  x as SINValidator,
+  N as birthDayValidator,
+  R as birthMonthValidator,
+  w as birthYearValidator,
+  L as dateValidator,
+  U as dispatch,
+  I as emailValidator,
+  T as lengthValidator,
+  m as numericValidator,
+  D as phoneNumberValidator,
+  $ as postalCodeValidator,
+  h as regexValidator,
+  l as relay,
+  c as requiredValidator
+};

package/lib/common.d.ts

@@ -123,7 +123,7 @@ export interface GoabSkeletonProps extends Margins {
 export type GoabSkeletonType = "image" | "text" | "title" | "text-small" | "avatar" | "header" | "paragraph" | "thumbnail" | "card" | "profile" | "article";
 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;
@@ -132,7 +132,7 @@ export interface GoabRadioGroup extends Margins {
     error?: boolean;
     ariaLabel?: string;
 }
-export interface GoabRadioItem {
+export interface GoabRadioItemProps {
     value?: string;
     label?: string;
     name?: string;

package/lib/public-form-controller.d.ts

@@ -0,0 +1,50 @@
+import { FieldsetItemState, FieldValidator } from './validators';
+
+export type FormStatus = "not-started" | "incomplete" | "complete";
+export type AppState<T> = {
+    uuid: string;
+    form: Record<string, Fieldset<T>>;
+    history: string[];
+    editting: string;
+    lastModified?: Date;
+    status: FormStatus;
+    currentFieldset?: {
+        id: T;
+        dispatchType: "change" | "continue";
+    };
+};
+export type Fieldset<T> = {
+    heading: string;
+    data: {
+        type: "details";
+        fieldsets: Record<string, FieldsetItemState>;
+    } | {
+        type: "list";
+        items: AppState<T>[];
+    };
+};
+export declare class PublicFormController<T> {
+    #private;
+    private type;
+    state?: AppState<T> | AppState<T>[];
+    _formData?: Record<string, string>;
+    _formRef?: HTMLElement;
+    constructor(type: "details" | "list");
+    init(e: Event): void;
+    initList(e: Event): void;
+    initState(state?: string | AppState<T> | AppState<T>[], callback?: () => void): void;
+    updateListState(e: Event): void;
+    updateObjectState(e: Event): void;
+    getStateList(): Record<string, string>[];
+    continueTo(next: T | undefined): void;
+    validate(field: string, e: Event, validators: FieldValidator[]): [boolean, string];
+    edit(index: number): void;
+    remove(index: number): void;
+    clean(): Record<string, unknown> | undefined;
+}
+export declare function dispatch<T>(el: HTMLElement | Element | null | undefined, eventName: string, detail?: T, opts?: {
+    bubbles?: boolean;
+}): void;
+export declare function relay<T>(el: HTMLElement | Element | null | undefined, eventName: string, data?: T, opts?: {
+    bubbles?: boolean;
+}): void;

package/lib/validators.d.ts

@@ -0,0 +1,48 @@
+export type FieldsetItemState = {
+    name: string;
+    label: string;
+    value: string;
+};
+export type FieldValidator = (value: unknown) => string;
+export type FieldsetState = Record<string, FieldsetItemState>;
+export declare class FormValidator {
+    private readonly validators;
+    constructor(validators?: Record<string, FieldValidator[]>);
+    add(fieldName: string, ...validators: FieldValidator[]): void;
+    validate(data: Record<string, string>): Record<string, string>;
+}
+export declare function birthDayValidator(): FieldValidator[];
+export declare function birthMonthValidator(): FieldValidator[];
+export declare function birthYearValidator(): FieldValidator[];
+export declare function requiredValidator(msg?: string): FieldValidator;
+export declare function phoneNumberValidator(msg?: string): FieldValidator;
+export declare function emailValidator(msg?: string): FieldValidator;
+export declare function SINValidator(): FieldValidator;
+export declare function postalCodeValidator(): FieldValidator;
+export declare function regexValidator(regex: RegExp, msg: string): FieldValidator;
+interface DateValidatorOptions {
+    invalidMsg?: string;
+    minMsg?: string;
+    maxMsg?: string;
+    min?: Date;
+    max?: Date;
+}
+export declare function dateValidator({ invalidMsg, minMsg, maxMsg, min, max, }: DateValidatorOptions): FieldValidator;
+interface NumericValidatorOptions {
+    invalidTypeMsg?: string;
+    minMsg?: string;
+    maxMsg?: string;
+    min?: number;
+    max?: number;
+}
+export declare function numericValidator({ invalidTypeMsg, minMsg, maxMsg, min, max, }: NumericValidatorOptions): FieldValidator;
+interface LengthValidatorOptions {
+    invalidTypeMsg?: string;
+    minMsg?: string;
+    maxMsg?: string;
+    max?: number;
+    min?: number;
+    optional?: boolean;
+}
+export declare function lengthValidator({ invalidTypeMsg, minMsg, maxMsg, min, max, optional, }: LengthValidatorOptions): FieldValidator;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@abgov/ui-components-common",
-  "version": "1.0.0",
+  "version": "1.1.0-alpha.1",
   "bugs": {
     "url": "https://github.com/GovAlta/ui-components/issues"
   },
@@ -21,5 +21,6 @@
   "module": "./index.js",
   "publishConfig": {
     "access": "public"
-  }
+  },
+  "semantic-release": "semantic-release"
 }