@bloom-housing/ui-components 7.0.6 → 7.0.8-alpha.0

package/src/page_components/sign-in/FormSignInErrorBox.tsx

@@ -1,25 +1,31 @@
-import React from "react"
-import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NetworkStatus } from "./FormSignIn"
+import React from "react";
+import { t, AlertBox, SiteAlert, AlertNotice, ErrorMessage } from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NetworkStatus } from "./FormSignIn";
 
 export type FormSignInErrorBoxProps = {
-  errors: FormSignInErrorBoxControl["errors"]
-  networkStatus: NetworkStatus
-  errorMessageId: string
-}
+  errors: FormSignInErrorBoxControl["errors"];
+  networkStatus: NetworkStatus;
+  errorMessageId: string;
+};
 
 export type FormSignInErrorBoxControl = {
-  errors: UseFormMethods["errors"]
-  control: UseFormMethods["control"]
-}
+  errors: UseFormMethods["errors"];
+  control: UseFormMethods["control"];
+};
 
-const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignInErrorBoxProps) => {
+const FormSignInErrorBox = ({
+  networkStatus,
+  errors,
+  errorMessageId,
+}: FormSignInErrorBoxProps) => {
   return (
     <div className="border-b">
       {Object.entries(errors).length > 0 && !networkStatus.content && (
         <AlertBox type="alert" inverted closeable>
-          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+          {errors.authentication
+            ? errors.authentication.message
+            : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
@@ -29,7 +35,11 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
           error={!!networkStatus.content}
           className="block mt-0 leading-normal text-alert"
         >
-          <AlertBox type={"alert"} inverted onClose={() => networkStatus.reset()}>
+          <AlertBox
+            type={"alert"}
+            inverted
+            onClose={() => networkStatus.reset()}
+          >
             {networkStatus.content.title}
           </AlertBox>
 
@@ -41,7 +51,11 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
 
       {networkStatus.type === "success" && (
         <>
-          <AlertBox type="success" inverted onClose={() => networkStatus.reset()}>
+          <AlertBox
+            type="success"
+            inverted
+            onClose={() => networkStatus.reset()}
+          >
             {networkStatus.content?.title}
           </AlertBox>
 
@@ -53,7 +67,7 @@ const FormSignInErrorBox = ({ networkStatus, errors, errorMessageId }: FormSignI
 
       <SiteAlert type="notice" dismissable />
     </div>
-  )
-}
+  );
+};
 
-export { FormSignInErrorBox as default, FormSignInErrorBox }
+export { FormSignInErrorBox as default, FormSignInErrorBox };

package/src/page_components/sign-in/FormSignInMFACode.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,8 +9,8 @@ import {
   t,
   SiteAlert,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import { NetworkStatus, FormSignInControl } from "./FormSignIn"
+} from "../../..";
+import { NetworkStatus, FormSignInControl } from "./FormSignIn";
 
 export enum RequestType {
   email = "email",
@@ -18,18 +18,18 @@ export enum RequestType {
 }
 
 export type FormSignInMFACodeProps = {
-  control: FormSignInControl
-  onSubmit: (data: FormSignInMFACodeValues) => void
-  networkError: NetworkStatus
-  mfaType: RequestType
-  allowPhoneNumberEdit: boolean
-  phoneNumber: string
-  goBackToPhone: () => void
-}
+  control: FormSignInControl;
+  onSubmit: (data: FormSignInMFACodeValues) => void;
+  networkError: NetworkStatus;
+  mfaType: RequestType;
+  allowPhoneNumberEdit: boolean;
+  phoneNumber: string;
+  goBackToPhone: () => void;
+};
 
 export type FormSignInMFACodeValues = {
-  mfaCode: string
-}
+  mfaCode: string;
+};
 
 const FormSignInMFACode = ({
   onSubmit,
@@ -41,10 +41,10 @@ const FormSignInMFACode = ({
   goBackToPhone,
 }: FormSignInMFACodeProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
+    window.scrollTo(0, 0);
+  };
 
-  let note
+  let note;
   if (allowPhoneNumberEdit) {
     note = (
       <>
@@ -58,14 +58,16 @@ const FormSignInMFACode = ({
           {t("nav.signInMFA.editPhoneNumber")}{" "}
         </Button>
       </>
-    )
+    );
   }
 
   return (
     <FormCard>
       <div className="form-card__lead text-center">
         <Icon size="2xl" symbol="profile" className="form-card__header-icon" />
-        <h2 className="form-card__title is-borderless">{t("nav.signInMFA.verifyTitle")}</h2>
+        <h2 className="form-card__title is-borderless">
+          {t("nav.signInMFA.verifyTitle")}
+        </h2>
         <p className="form-card__sub-title">
           {mfaType === RequestType.sms
             ? t("nav.signInMFA.haveSentCodeToPhone")
@@ -80,7 +82,11 @@ const FormSignInMFACode = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in-mfa"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="mfaCode"
@@ -93,14 +99,17 @@ const FormSignInMFACode = ({
             note={note}
           />
           <div className="text-center mt-10">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="verify-and-sign-in">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="verify-and-sign-in"
+            >
               {t("nav.signInMFA.signIn")}
             </Button>
           </div>
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignInMFACode as default, FormSignInMFACode }
+export { FormSignInMFACode as default, FormSignInMFACode };

package/src/page_components/sign-in/FormSignInMFAType.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,24 +9,24 @@ import {
   t,
   SiteAlert,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NetworkStatus } from "./FormSignIn"
+} from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NetworkStatus } from "./FormSignIn";
 
 export type FormSignInMFAProps = {
-  control: FormSignInMFAControl
-  onSubmit: (data: unknown) => void
-  networkError: NetworkStatus
-  emailOnClick: () => void
-  smsOnClick: () => void
-}
+  control: FormSignInMFAControl;
+  onSubmit: (data: unknown) => void;
+  networkError: NetworkStatus;
+  emailOnClick: () => void;
+  smsOnClick: () => void;
+};
 
 export type FormSignInMFAControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  register: UseFormMethods["register"]
-  setValue: UseFormMethods["setValue"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  register: UseFormMethods["register"];
+  setValue: UseFormMethods["setValue"];
+};
 
 const FormSignInMFAType = ({
   onSubmit,
@@ -36,8 +36,8 @@ const FormSignInMFAType = ({
   smsOnClick,
 }: FormSignInMFAProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
+    window.scrollTo(0, 0);
+  };
 
   return (
     <FormCard>
@@ -58,7 +58,11 @@ const FormSignInMFAType = ({
 
       <SiteAlert type="notice" dismissable />
       <div className="form-card__group pt-0">
-        <Form id="sign-in-mfa" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in-mfa"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="mfaType"
@@ -92,7 +96,7 @@ const FormSignInMFAType = ({
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignInMFAType as default, FormSignInMFAType }
+export { FormSignInMFAType as default, FormSignInMFAType };

package/src/page_components/sign-in/FormTerms.tsx

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -8,29 +8,31 @@ import {
   Icon,
   MarkdownSection,
   t,
-} from "@bloom-housing/ui-components"
-import Markdown from "markdown-to-jsx"
-import { useForm } from "react-hook-form"
+} from "../../..";
+import Markdown from "markdown-to-jsx";
+import { useForm } from "react-hook-form";
 
 type FormTermsInValues = {
-  agree: boolean
-}
+  agree: boolean;
+};
 
 export type FormTermsProps = {
-  onSubmit: () => void
-  terms?: string
-}
+  onSubmit: () => void;
+  terms?: string;
+};
 
 const FormTerms = (props: FormTermsProps) => {
   // eslint-disable-next-line @typescript-eslint/unbound-method
-  const { handleSubmit, register, errors } = useForm<FormTermsInValues>()
+  const { handleSubmit, register, errors } = useForm<FormTermsInValues>();
 
   return (
     <Form id="terms" className="mt-10" onSubmit={handleSubmit(props.onSubmit)}>
       <FormCard>
         <div className="form-card__lead text-center">
           <Icon size="2xl" symbol="settings" />
-          <h2 className="form-card__title">{t(`authentication.terms.reviewToc`)}</h2>
+          <h2 className="form-card__title">
+            {t(`authentication.terms.reviewToc`)}
+          </h2>
           <p className="field-note mt-4 text-center">
             {t(`authentication.terms.youMustAcceptToc`)}
           </p>
@@ -38,7 +40,9 @@ const FormTerms = (props: FormTermsProps) => {
           <div className="overflow-y-auto max-h-96 mt-5 pr-4 text-left">
             {props.terms && (
               <MarkdownSection padding={false} fullwidth={true}>
-                <Markdown options={{ disableParsingRawHTML: false }}>{props.terms}</Markdown>
+                <Markdown options={{ disableParsingRawHTML: false }}>
+                  {props.terms}
+                </Markdown>
               </MarkdownSection>
             )}
           </div>
@@ -63,14 +67,17 @@ const FormTerms = (props: FormTermsProps) => {
 
         <div className="form-card__pager">
           <div className="form-card__pager-row primary">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="form-submit">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="form-submit"
+            >
               {t("t.submit")}
             </Button>
           </div>
         </div>
       </FormCard>
     </Form>
-  )
-}
+  );
+};
 
-export { FormTerms as default, FormTerms }
+export { FormTerms as default, FormTerms };

package/src/page_components/sign-in/ResendConfirmationModal.tsx

@@ -7,21 +7,21 @@ import {
   Field,
   emailRegex,
   AppearanceSizeType,
-} from "@bloom-housing/ui-components"
-import React, { useEffect, useMemo } from "react"
-import { useForm } from "react-hook-form"
+} from "../../..";
+import React, { useEffect, useMemo } from "react";
+import { useForm } from "react-hook-form";
 
 export type ResendConfirmationModalProps = {
-  isOpen: boolean
-  initialEmailValue: string
-  onClose: () => void
-  onSubmit: (email: string) => void
-  loading: boolean
-}
+  isOpen: boolean;
+  initialEmailValue: string;
+  onClose: () => void;
+  onSubmit: (email: string) => void;
+  loading: boolean;
+};
 
 export type ResendConfirmationModalForm = {
-  onSubmit: (email: string) => void
-}
+  onSubmit: (email: string) => void;
+};
 
 const ResendConfirmationModal = ({
   isOpen,
@@ -35,23 +35,23 @@ const ResendConfirmationModal = ({
     defaultValues: useMemo(() => {
       return {
         emailResend: initialEmailValue,
-      }
+      };
     }, [initialEmailValue]),
-  })
+  });
 
   useEffect(() => {
     reset({
       emailResend: initialEmailValue,
-    })
-  }, [initialEmailValue, reset])
+    });
+  }, [initialEmailValue, reset]);
 
   const onFormSubmit = async () => {
-    const isValid = await trigger()
-    if (!isValid) return
+    const isValid = await trigger();
+    if (!isValid) return;
 
-    const { emailResend } = getValues()
-    onSubmit(emailResend)
-  }
+    const { emailResend } = getValues();
+    onSubmit(emailResend);
+  };
 
   return (
     <Modal
@@ -59,8 +59,8 @@ const ResendConfirmationModal = ({
       title={t("authentication.signIn.yourAccountIsNotConfirmed")}
       ariaDescription={t("authentication.createAccount.linkExpired")}
       onClose={() => {
-        onClose()
-        window.scrollTo(0, 0)
+        onClose();
+        window.scrollTo(0, 0);
       }}
       actions={[
         <Button
@@ -76,8 +76,8 @@ const ResendConfirmationModal = ({
           type="button"
           styleType={AppearanceStyleType.alert}
           onClick={() => {
-            onClose()
-            window.scrollTo(0, 0)
+            onClose();
+            window.scrollTo(0, 0);
           }}
           size={AppearanceSizeType.small}
         >
@@ -100,10 +100,12 @@ const ResendConfirmationModal = ({
           />
         </Form>
 
-        <p className="pt-4">{t("authentication.createAccount.resendEmailInfo")}</p>
+        <p className="pt-4">
+          {t("authentication.createAccount.resendEmailInfo")}
+        </p>
       </>
     </Modal>
-  )
-}
+  );
+};
 
-export { ResendConfirmationModal as default, ResendConfirmationModal }
+export { ResendConfirmationModal as default, ResendConfirmationModal };

package/src/tables/AgPagination.tsx

@@ -1,19 +1,19 @@
-import React from "react"
-import { Button, t } from "@bloom-housing/ui-components"
+import React from "react";
+import { Button, t } from "../..";
 
 type AgPaginationProps = {
-  totalItems: number
-  totalPages: number
-  currentPage: number
-  itemsPerPage: number
-  quantityLabel?: string
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
-  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>
-  onPageChange?: (page: number) => void
-  onPerPageChange?: (size: number) => void
-}
+  totalItems: number;
+  totalPages: number;
+  currentPage: number;
+  itemsPerPage: number;
+  quantityLabel?: string;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>;
+  onPageChange?: (page: number) => void;
+  onPerPageChange?: (size: number) => void;
+};
 
-const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100]
+const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100];
 
 const AgPagination = ({
   totalItems,
@@ -27,19 +27,19 @@ const AgPagination = ({
   onPerPageChange,
 }: AgPaginationProps) => {
   const onNextClick = () => {
-    setCurrentPage(currentPage + 1)
-    onPageChange && onPageChange(currentPage)
-  }
+    setCurrentPage(currentPage + 1);
+    onPageChange && onPageChange(currentPage);
+  };
 
   const onPrevClick = () => {
-    setCurrentPage(currentPage - 1)
-    onPageChange && onPageChange(currentPage)
-  }
+    setCurrentPage(currentPage - 1);
+    onPageChange && onPageChange(currentPage);
+  };
 
   const onRowLimitChange = (size: string) => {
-    setItemsPerPage(parseInt(size))
-    onPerPageChange && onPerPageChange(itemsPerPage)
-  }
+    setItemsPerPage(parseInt(size));
+    onPerPageChange && onPerPageChange(itemsPerPage);
+  };
 
   return (
     <div className="data-pager flex flex-col md:flex-row">
@@ -58,7 +58,9 @@ const AgPagination = ({
           <span className="field-label" id="lbTotalPages">
             {totalItems}
           </span>
-          {quantityLabel && <span className="field-label">{quantityLabel}</span>}
+          {quantityLabel && (
+            <span className="field-label">{quantityLabel}</span>
+          )}
         </div>
 
         <div className="flex mt-5 md:mt-0 md:items-center">
@@ -97,12 +99,12 @@ const AgPagination = ({
               {Array(totalPages)
                 .fill(totalPages)
                 .map((_, i) => {
-                  const value = i + 1
+                  const value = i + 1;
                   return (
                     <option key={value} value={value}>
                       {value}
                     </option>
-                  )
+                  );
                 })}
             </select>
           </div>
@@ -131,7 +133,7 @@ const AgPagination = ({
         </Button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS }
+export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS };

package/tsconfig.json

@@ -1,5 +1,4 @@
 {
-  "extends": "../tsconfig.json" /* TODO: is this worth connecting? */,
   "compilerOptions": {
     "outDir": "build/lib",
     "module": "esnext",