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

package/CHANGELOG.md

@@ -3,6 +3,19 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 7.0.8-alpha.0 (2022-12-14)
+
+
+### Bug Fixes
+
+* bloom main uic contents ([951d4c7](https://github.com/bloom-housing/ui-components/commit/951d4c78b8a7f82837b12b4983fd0b6e693a9b0d))
+* lerna setup ([1cedf21](https://github.com/bloom-housing/ui-components/commit/1cedf2143199d2d4616c338ed02256a416e9dd68))
+* updated paths + functional storybook ([d2448bc](https://github.com/bloom-housing/ui-components/commit/d2448bc6613d955460df44f50c4a461cba8f09d4))
+
+
+
+
+
 ## [7.0.7](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@7.0.6...@bloom-housing/ui-components@7.0.7) (2022-12-08)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/lerna.json

@@ -0,0 +1,15 @@
+{
+  "version": "independent",
+  "npmClient": "yarn",
+  "useWorkspaces": true,
+  "command": {
+    "publish": {
+      "conventionalCommits": true,
+      "message": "chore(release): publish"
+    },
+    "version": {
+      "conventionalCommits": true,
+      "message": "chore(release): version"
+    }
+  }
+}

package/package.json

@@ -1,9 +1,14 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "7.0.7",
+  "version": "7.0.8-alpha.0",
   "author": "Sean Albert <sean.albert@exygy.com>",
   "description": "Shared user interface components for Bloom affordable housing system",
-  "homepage": "https://github.com/bloom-housing/bloom/tree/master/shared/ui-components",
+  "workspaces": {
+    "packages": [
+      "."
+    ]
+  },
+  "homepage": "https://github.com/bloom-housing/ui-components",
   "main": "index.js",
   "license": "Apache-2.0",
   "private": false,
@@ -17,7 +22,9 @@
     "test": "jest -w 1",
     "test:coverage": "jest -w 1 --coverage --watchAll=false",
     "prettier": "prettier --write \"**/*.tsx\"",
-    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts"
+    "test:a11y": "build-storybook -o ./storybook-static && jest storyshot --testRegex=storyshots.spec.ts",
+    "version": "lerna version --no-commit-hooks --conventional-graduate --include-merged-tags --force-git-tag",
+    "publish":"lerna publish from-package --yes --include-merged-tags --no-verify-access"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -54,6 +61,7 @@
     "dotenv": "^8.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.5.3",
+    "lerna": "6.1.0",
     "mockdate": "^3.0.2",
     "postcss": "^8.3.6",
     "postcss-loader": "^4.3",
@@ -102,6 +110,7 @@
     "react-dom": "^17.0.2",
     "react-dropzone": "^11.3.2",
     "react-focus-lock": "^2.5.2",
+    "react-hook-form": "7.40.0",
     "react-map-gl": "^6.1.16",
     "react-media": "^1.10.0",
     "react-remove-scroll": "2.5.4",
@@ -112,5 +121,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "c138267026cf00b0c6ada2a0e95cdef5062f3977"
+  "gitHead": "ef00e4db1a1bd4608525685ab81632ff4ba970cf"
 }

package/src/helpers/DateFormat.ts

@@ -0,0 +1,11 @@
+import { t } from "../..";
+import dayjs from "dayjs";
+
+function formatDateTime(date: Date, showTime?: boolean) {
+  return (
+    dayjs(date).format("MMMM D, YYYY") +
+    (showTime ? ` ${t("t.at")} ` + dayjs(date).format("h:mmA") : "")
+  );
+}
+
+export { formatDateTime as default, formatDateTime };

package/src/helpers/preferences.tsx

@@ -1,5 +1,5 @@
-import React from "react"
-import { UseFormMethods } from "react-hook-form"
+import React from "react";
+import { UseFormMethods } from "react-hook-form";
 import {
   t,
   GridSection,
@@ -8,17 +8,17 @@ import {
   Field,
   Select,
   resolveObject,
-} from "@bloom-housing/ui-components"
+} from "../..";
 
 type FormAddressProps = {
-  subtitle: string
-  dataKey: string
-  enableMailCheckbox?: boolean
-  register: UseFormMethods["register"]
-  errors?: UseFormMethods["errors"]
-  required?: boolean
-  stateKeys: string[]
-}
+  subtitle: string;
+  dataKey: string;
+  enableMailCheckbox?: boolean;
+  register: UseFormMethods["register"];
+  errors?: UseFormMethods["errors"];
+  required?: boolean;
+  stateKeys: string[];
+};
 
 export const FormAddress = ({
   subtitle,
@@ -121,5 +121,5 @@ export const FormAddress = ({
         )}
       </GridSection>
     </>
-  )
-}
+  );
+};

package/src/page_components/NavigationHeader.tsx

@@ -1,30 +1,30 @@
-import React, { useMemo, useContext } from "react"
-import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "@bloom-housing/ui-components"
-import { NavigationContext } from "../config/NavigationContext"
-import "./NavigationHeader.scss"
+import React, { useMemo, useContext } from "react";
+import { PageHeader, TabNav, TabNavItem, AppearanceSizeType } from "../..";
+import { NavigationContext } from "../config/NavigationContext";
+import "./NavigationHeader.scss";
 
 type NavigationHeaderProps = {
-  className?: string
-  title: React.ReactNode
-  listingId?: string
-  tabs?: NavigationHeaderTabs
-  breadcrumbs?: React.ReactNode
-  children?: React.ReactChild
-}
+  className?: string;
+  title: React.ReactNode;
+  listingId?: string;
+  tabs?: NavigationHeaderTabs;
+  breadcrumbs?: React.ReactNode;
+  children?: React.ReactChild;
+};
 
 type NavigationHeaderTabs = {
-  show?: boolean
-  flagsQty?: number
-  listingLabel: string
-  applicationsLabel: string
-}
+  show?: boolean;
+  flagsQty?: number;
+  listingLabel: string;
+  applicationsLabel: string;
+};
 
 type NavigationHeaderTabsElement = {
-  label: string
-  path: string
-  activePaths: string[]
-  content: React.ReactNode | undefined
-}
+  label: string;
+  path: string;
+  activePaths: string[];
+  content: React.ReactNode | undefined;
+};
 
 const NavigationHeader = ({
   className,
@@ -34,8 +34,8 @@ const NavigationHeader = ({
   children,
   breadcrumbs,
 }: NavigationHeaderProps) => {
-  const navigation = useContext(NavigationContext)
-  const currentPath = navigation.router.asPath
+  const navigation = useContext(NavigationContext);
+  const currentPath = navigation.router.asPath;
 
   const tabNavElements = useMemo(() => {
     const elements: NavigationHeaderTabsElement[] = [
@@ -57,10 +57,10 @@ const NavigationHeader = ({
         ],
         content: undefined,
       },
-    ]
+    ];
 
-    return elements
-  }, [tabs, listingId])
+    return elements;
+  }, [tabs, listingId]);
 
   const tabNavItems = useMemo(() => {
     return (
@@ -77,8 +77,8 @@ const NavigationHeader = ({
           </TabNavItem>
         ))}
       </TabNav>
-    )
-  }, [currentPath, tabNavElements])
+    );
+  }, [currentPath, tabNavElements]);
 
   return (
     <PageHeader
@@ -89,7 +89,7 @@ const NavigationHeader = ({
     >
       {children}
     </PageHeader>
-  )
-}
+  );
+};
 
-export { NavigationHeader as default, NavigationHeader }
+export { NavigationHeader as default, NavigationHeader };

package/src/page_components/forgot-password/FormForgotPassword.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext } from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -12,31 +12,31 @@ import {
   AlertNotice,
   ErrorMessage,
   emailRegex,
-} from "@bloom-housing/ui-components"
-import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn"
-import { NavigationContext } from "../../config/NavigationContext"
-import type { UseFormMethods } from "react-hook-form"
+} from "../../..";
+import { NetworkErrorReset, NetworkStatusContent } from "../sign-in/FormSignIn";
+import { NavigationContext } from "../../config/NavigationContext";
+import type { UseFormMethods } from "react-hook-form";
 
 export type FormForgotPasswordProps = {
-  control: FormForgotPasswordControl
-  onSubmit: (data: FormForgotPasswordValues) => void
-  networkError: FormForgotPasswordNetworkError
-}
+  control: FormForgotPasswordControl;
+  onSubmit: (data: FormForgotPasswordValues) => void;
+  networkError: FormForgotPasswordNetworkError;
+};
 
 export type FormForgotPasswordNetworkError = {
-  error: NetworkStatusContent
-  reset: NetworkErrorReset
-}
+  error: NetworkStatusContent;
+  reset: NetworkErrorReset;
+};
 
 export type FormForgotPasswordControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  register: UseFormMethods["register"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  register: UseFormMethods["register"];
+};
 
 export type FormForgotPasswordValues = {
-  email: string
-}
+  email: string;
+};
 
 const FormForgotPassword = ({
   onSubmit,
@@ -44,26 +44,33 @@ const FormForgotPassword = ({
   control: { errors, register, handleSubmit },
 }: FormForgotPasswordProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
+    window.scrollTo(0, 0);
+  };
 
-  const { router } = useContext(NavigationContext)
+  const { router } = useContext(NavigationContext);
 
   return (
     <FormCard>
       <div className="form-card__lead text-center border-b mx-0">
         <Icon size="2xl" symbol="profile" />
-        <h1 className="form-card__title">{t("authentication.forgotPassword.sendEmail")}</h1>
+        <h1 className="form-card__title">
+          {t("authentication.forgotPassword.sendEmail")}
+        </h1>
       </div>
 
       {Object.entries(errors).length > 0 && !networkError.error && (
         <AlertBox type="alert" inverted closeable>
-          {errors.authentication ? errors.authentication.message : t("errors.errorsToResolve")}
+          {errors.authentication
+            ? errors.authentication.message
+            : t("errors.errorsToResolve")}
         </AlertBox>
       )}
 
       {!!networkError.error?.error && Object.entries(errors).length === 0 && (
-        <ErrorMessage id={"forgotpasswordemail-error"} error={!!networkError.error}>
+        <ErrorMessage
+          id={"forgotpasswordemail-error"}
+          error={!!networkError.error}
+        >
           <AlertBox type="alert" inverted onClose={() => networkError.reset()}>
             {networkError.error.title}
           </AlertBox>
@@ -77,14 +84,20 @@ const FormForgotPassword = ({
       <SiteAlert type="notice" dismissable />
 
       <div className="form-card__group pt-0">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="email"
             label={t("t.email")}
             validation={{ required: true, pattern: emailRegex }}
             error={errors.email}
-            errorMessage={errors.email ? t("authentication.signIn.loginError") : undefined}
+            errorMessage={
+              errors.email ? t("authentication.signIn.loginError") : undefined
+            }
             register={register}
             onChange={() => networkError.reset()}
           />
@@ -103,7 +116,7 @@ const FormForgotPassword = ({
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormForgotPassword as default, FormForgotPassword }
+export { FormForgotPassword as default, FormForgotPassword };

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

@@ -1,4 +1,4 @@
-import React, { useContext } from "react"
+import React, { useContext } from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,47 +9,47 @@ import {
   LinkButton,
   t,
   FormSignInErrorBox,
-} from "@bloom-housing/ui-components"
-import type { UseFormMethods } from "react-hook-form"
-import { NavigationContext } from "../../config/NavigationContext"
-import { AlertTypes } from "../../notifications/alertTypes"
+} from "../../..";
+import type { UseFormMethods } from "react-hook-form";
+import { NavigationContext } from "../../config/NavigationContext";
+import { AlertTypes } from "../../notifications/alertTypes";
 
-export type NetworkErrorDetermineError = (status: number, error: Error) => void
+export type NetworkErrorDetermineError = (status: number, error: Error) => void;
 
-export type NetworkStatusType = AlertTypes
+export type NetworkStatusType = AlertTypes;
 
-export type NetworkErrorReset = () => void
+export type NetworkErrorReset = () => void;
 
 export type NetworkStatusContent = {
-  title: string
-  description: string
-  error?: boolean
-} | null
+  title: string;
+  description: string;
+  error?: boolean;
+} | null;
 
 export type NetworkStatus = {
-  content: NetworkStatusContent
-  type?: NetworkStatusType
-  reset: NetworkErrorReset
-}
+  content: NetworkStatusContent;
+  type?: NetworkStatusType;
+  reset: NetworkErrorReset;
+};
 
 export type FormSignInProps = {
-  control: FormSignInControl
-  onSubmit: (data: FormSignInValues) => void
-  networkStatus: NetworkStatus
-  showRegisterBtn?: boolean
-}
+  control: FormSignInControl;
+  onSubmit: (data: FormSignInValues) => void;
+  networkStatus: NetworkStatus;
+  showRegisterBtn?: boolean;
+};
 
 export type FormSignInControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  register: UseFormMethods["register"]
-  watch: UseFormMethods["watch"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  register: UseFormMethods["register"];
+  watch: UseFormMethods["watch"];
+};
 
 export type FormSignInValues = {
-  email: string
-  password: string
-}
+  email: string;
+  password: string;
+};
 
 const FormSignIn = ({
   onSubmit,
@@ -58,9 +58,9 @@ const FormSignIn = ({
   control: { errors, register, handleSubmit },
 }: FormSignInProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
-  const { LinkComponent } = useContext(NavigationContext)
+    window.scrollTo(0, 0);
+  };
+  const { LinkComponent } = useContext(NavigationContext);
 
   return (
     <FormCard>
@@ -74,7 +74,11 @@ const FormSignIn = ({
         errorMessageId={"main-sign-in"}
       />
       <div className="form-card__group pt-0">
-        <Form id="sign-in" className="mt-10" onSubmit={handleSubmit(onSubmit, onError)}>
+        <Form
+          id="sign-in"
+          className="mt-10"
+          onSubmit={handleSubmit(onSubmit, onError)}
+        >
           <Field
             caps={true}
             name="email"
@@ -105,7 +109,10 @@ const FormSignIn = ({
           />
 
           <div className="text-center mt-6">
-            <Button styleType={AppearanceStyleType.primary} data-test-id="sign-in-button">
+            <Button
+              styleType={AppearanceStyleType.primary}
+              data-test-id="sign-in-button"
+            >
               {t("nav.signIn")}
             </Button>
           </div>
@@ -113,13 +120,17 @@ const FormSignIn = ({
       </div>
       {showRegisterBtn && (
         <div className="form-card__group text-center border-t">
-          <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
+          <h2 className="mb-6">
+            {t("authentication.createAccount.noAccount")}
+          </h2>
 
-          <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>
+          <LinkButton href="/create-account">
+            {t("account.createAccount")}
+          </LinkButton>
         </div>
       )}
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignIn as default, FormSignIn }
+export { FormSignIn as default, FormSignIn };

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

@@ -1,4 +1,4 @@
-import React from "react"
+import React from "react";
 import {
   AppearanceStyleType,
   Button,
@@ -9,26 +9,26 @@ import {
   SiteAlert,
   PhoneField,
   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 FormSignInAddPhoneProps = {
-  control: FormSignInAddPhoneControl
-  onSubmit: (data: FormSignInAddPhoneValues) => void
-  networkError: NetworkStatus
-  phoneNumber: string
-}
+  control: FormSignInAddPhoneControl;
+  onSubmit: (data: FormSignInAddPhoneValues) => void;
+  networkError: NetworkStatus;
+  phoneNumber: string;
+};
 
 export type FormSignInAddPhoneControl = {
-  errors: UseFormMethods["errors"]
-  handleSubmit: UseFormMethods["handleSubmit"]
-  control: UseFormMethods["control"]
-}
+  errors: UseFormMethods["errors"];
+  handleSubmit: UseFormMethods["handleSubmit"];
+  control: UseFormMethods["control"];
+};
 
 export type FormSignInAddPhoneValues = {
-  phoneNumber: string
-}
+  phoneNumber: string;
+};
 
 const FormSignInAddPhone = ({
   onSubmit,
@@ -37,15 +37,19 @@ const FormSignInAddPhone = ({
   phoneNumber,
 }: FormSignInAddPhoneProps) => {
   const onError = () => {
-    window.scrollTo(0, 0)
-  }
-  const { errors, handleSubmit } = control
+    window.scrollTo(0, 0);
+  };
+  const { errors, handleSubmit } = control;
   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.addNumber")}</h2>
-        <p className="form-card__sub-title">{t("nav.signInMFA.addNumberSecondaryTitle")}</p>
+        <h2 className="form-card__title is-borderless">
+          {t("nav.signInMFA.addNumber")}
+        </h2>
+        <p className="form-card__sub-title">
+          {t("nav.signInMFA.addNumberSecondaryTitle")}
+        </p>
       </div>
       <FormSignInErrorBox
         errors={errors}
@@ -55,7 +59,11 @@ const FormSignInAddPhone = ({
 
       <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)}
+        >
           <PhoneField
             label={t("nav.signInMFA.phoneNumber")}
             caps={true}
@@ -81,7 +89,7 @@ const FormSignInAddPhone = ({
         </Form>
       </div>
     </FormCard>
-  )
-}
+  );
+};
 
-export { FormSignInAddPhone as default, FormSignInAddPhone }
+export { FormSignInAddPhone as default, FormSignInAddPhone };