@bloom-housing/ui-components 6.0.1-alpha.0 → 6.0.1-alpha.1

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [6.0.1-alpha.1](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@6.0.1-alpha.0...@bloom-housing/ui-components@6.0.1-alpha.1) (2022-09-28)
+
+
+### Features
+
+* add duplicates v2 feature ([11cd2b3](https://github.com/bloom-housing/bloom/commit/11cd2b3b4d39c69e10ca1c9a8c2c7199b4a08b6b)), closes [#3006](https://github.com/bloom-housing/bloom/issues/3006) [#2961](https://github.com/bloom-housing/bloom/issues/2961) [#3020](https://github.com/bloom-housing/bloom/issues/3020) [#3093](https://github.com/bloom-housing/bloom/issues/3093) [#2974](https://github.com/bloom-housing/bloom/issues/2974) [#2909](https://github.com/bloom-housing/bloom/issues/2909) [#2958](https://github.com/bloom-housing/bloom/issues/2958) [#2904](https://github.com/bloom-housing/bloom/issues/2904) [#2987](https://github.com/bloom-housing/bloom/issues/2987) [#2990](https://github.com/bloom-housing/bloom/issues/2990) [#2989](https://github.com/bloom-housing/bloom/issues/2989) [#2991](https://github.com/bloom-housing/bloom/issues/2991) [#2985](https://github.com/bloom-housing/bloom/issues/2985) [#2994](https://github.com/bloom-housing/bloom/issues/2994) [#2995](https://github.com/bloom-housing/bloom/issues/2995) [#2999](https://github.com/bloom-housing/bloom/issues/2999) [#2950](https://github.com/bloom-housing/bloom/issues/2950) [#2968](https://github.com/bloom-housing/bloom/issues/2968) [#2784](https://github.com/bloom-housing/bloom/issues/2784) [#2988](https://github.com/bloom-housing/bloom/issues/2988) [#3016](https://github.com/bloom-housing/bloom/issues/3016) [#3018](https://github.com/bloom-housing/bloom/issues/3018) [#3017](https://github.com/bloom-housing/bloom/issues/3017) [#3005](https://github.com/bloom-housing/bloom/issues/3005) [#3012](https://github.com/bloom-housing/bloom/issues/3012) [#3014](https://github.com/bloom-housing/bloom/issues/3014) [#3000](https://github.com/bloom-housing/bloom/issues/3000) [#3021](https://github.com/bloom-housing/bloom/issues/3021) [#3027](https://github.com/bloom-housing/bloom/issues/3027) [#3036](https://github.com/bloom-housing/bloom/issues/3036) [#3023](https://github.com/bloom-housing/bloom/issues/3023) [#3040](https://github.com/bloom-housing/bloom/issues/3040) [#3054](https://github.com/bloom-housing/bloom/issues/3054) [#3050](https://github.com/bloom-housing/bloom/issues/3050) [#483](https://github.com/bloom-housing/bloom/issues/483) [#3073](https://github.com/bloom-housing/bloom/issues/3073) [#3070](https://github.com/bloom-housing/bloom/issues/3070) [#3041](https://github.com/bloom-housing/bloom/issues/3041) [#3061](https://github.com/bloom-housing/bloom/issues/3061) [#3077](https://github.com/bloom-housing/bloom/issues/3077) [#3063](https://github.com/bloom-housing/bloom/issues/3063) [#3084](https://github.com/bloom-housing/bloom/issues/3084) [#3088](https://github.com/bloom-housing/bloom/issues/3088) [#2892](https://github.com/bloom-housing/bloom/issues/2892) [#3006](https://github.com/bloom-housing/bloom/issues/3006) [#2961](https://github.com/bloom-housing/bloom/issues/2961) [#3020](https://github.com/bloom-housing/bloom/issues/3020) [#3086](https://github.com/bloom-housing/bloom/issues/3086) [#3102](https://github.com/bloom-housing/bloom/issues/3102) [#3101](https://github.com/bloom-housing/bloom/issues/3101) [#3104](https://github.com/bloom-housing/bloom/issues/3104) [#3105](https://github.com/bloom-housing/bloom/issues/3105)
+
+
+### BREAKING CHANGES
+
+* The preference and program entities have been merged into a single entity called MultiselectQuestion
+
+* chore(release): version
+
+ - @bloom-housing/backend-core@5.1.1-alpha.8
+ - @bloom-housing/shared-helpers@5.1.1-alpha.18
+ - @bloom-housing/partners@5.1.1-alpha.20
+ - @bloom-housing/public@5.1.1-alpha.18
+ - @bloom-housing/ui-components@5.1.1-alpha.11
+
+
+
+
+
 ## [6.0.1-alpha.0](https://github.com/bloom-housing/bloom/compare/@bloom-housing/ui-components@5.1.1-alpha.35...@bloom-housing/ui-components@6.0.1-alpha.0) (2022-09-28)
 
 **Note:** Version bump only for package @bloom-housing/ui-components

package/index.ts

@@ -89,6 +89,7 @@ export * from "./src/navigation/ProgressNav"
 export * from "./src/navigation/TabNav"
 export * from "./src/navigation/Tabs"
 export * from "./src/navigation/Breadcrumbs"
+export * from "./src/navigation/SideNav"
 
 /* Notifications */
 export * from "./src/notifications/AlertBox"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bloom-housing/ui-components",
-  "version": "6.0.1-alpha.0",
+  "version": "6.0.1-alpha.1",
   "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",
@@ -110,5 +110,5 @@
     "ts-jest": "^26.4.1",
     "typesafe-actions": "^5.1.0"
   },
-  "gitHead": "2cfc84763d17fad62ed2675f85a046e05bdf91e2"
+  "gitHead": "413ca224f8c49c4ae69e431cfabe26545fe54159"
 }

package/src/global/vendor/ag_grid.scss

@@ -11,6 +11,12 @@
     )
   );
 
+  --ag-selected-row-background-color: var(--bloom-color-primary-light);
+
+  a {
+    color: var(--bloom-color-primary-dark);
+  }
+
   .ag-row {
     height: ag-param(row-height);
   }
@@ -72,6 +78,15 @@
     @apply border-b-0;
   }
 
+  .ag-pinned-right-header,
+  .ag-cell.ag-cell-first-right-pinned:not(.ag-cell-range-left):not(.ag-cell-range-single-cell) {
+    @apply border-gray-450;
+    @apply border-r-0;
+    @apply border-t-0;
+    @apply border-l-4;
+    @apply border-b-0;
+  }
+
   .ag-row {
     @apply border-t-0;
     @apply border-l-0;
@@ -85,29 +100,48 @@
 
   .ag-body-viewport {
     ::-webkit-scrollbar {
-      // -webkit-appearance: none;
       height: 8px;
-      @apply bg-gray-600;
     }
 
     ::-webkit-scrollbar-thumb {
       border-radius: 8px;
-      @apply bg-gray-600;
+      @apply bg-gray-550;
     }
+  }
 
-    ::-webkit-scrollbar-track {
-      @apply bg-gray-100;
-      -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
-      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
-    }
+  .ag-body-horizontal-scroll {
+    border-bottom: 1px solid var(--bloom-color-gray-500);
+    border-radius: var(--bloom-rounded-md);
   }
 
   .ag-root-wrapper {
     @apply border-b-0;
     @apply rounded-t-md;
-    @apply rounded-b-none;
+    @apply rounded-b-md;
     overflow: visible;
   }
+
+  .ag-layout-auto-height {
+    .ag-center-cols-container,
+    .ag-center-cols-clipper {
+      --table-min-height: 124px;
+      min-height: var(--table-min-height);
+    }
+  }
+
+  .ag-ltr {
+    .ag-selection-checkbox {
+      margin-right: var(--bloom-s6);
+    }
+  }
+
+  .ag-horizontal-right-spacer:not(.ag-scroller-corner) {
+    border: none;
+  }
+
+  .ag-horizontal-left-spacer:not(.ag-scroller-corner) {
+    border: none;
+  }
 }
 
 .data-pager {

package/src/headers/PageHeader.scss

@@ -15,7 +15,7 @@
   border-top: var(--bloom-border-1) solid var(--border-color);
   color: var(--text-color);
 
-  @media (min-width: $screen-sm) {
+  @media (min-width: $screen-md) {
     padding: var(--bloom-s10) 0;
   }
 
@@ -47,6 +47,7 @@
 .page-header__title {
   text-align: center;
   font-family: var(--text-font-family);
+  word-break: break-all;
 
   @media (min-width: $screen-md) {
     font-size: var(--title-font-size);

package/src/navigation/Breadcrumbs.scss

@@ -2,6 +2,7 @@
   ol {
     @apply flex;
     @apply items-center;
+    flex-wrap: wrap;
     line-height: 1.5rem;
   }
 

package/src/navigation/SideNav.scss

@@ -8,9 +8,11 @@
   --selection-parent-accent: var(--bloom-color-gray-450);
   --hover-link-color: var(--bloom-color-primary);
   --hover-background-color: var(--bloom-color-primary-lighter);
+  --background-color: var(--bloom-color-white);
 
   border: var(--border);
   border-radius: var(--border-radius);
+  background-color: var(--background-color);
 
   & > ul {
     & > li:first-child > a {
@@ -70,3 +72,57 @@
     padding-inline-start: calc(var(--current-padding-inline) + var(--current-padding-block));
   }
 }
+
+.side-nav__horizontal {
+  display: flex;
+
+  ul {
+    width: 100%;
+  }
+
+  @media (min-width: $screen-sm) {
+    a {
+      &[aria-current]:not(:focus) {
+        box-shadow: inset 0px -3px 0px 0px var(--hover-link-color);
+      }
+
+      &.has-current-child:not(:focus) {
+        box-shadow: inset 0px 0px -3px 0px var(--selection-parent-accent);
+      }
+    }
+
+    ul {
+      width: auto;
+      display: flex;
+      flex-direction: row;
+      @media (min-width: $screen-md) {
+        flex-direction: row;
+      }
+      @media (max-width: $screen-sm) {
+        flex-direction: column;
+        width: 100%;
+      }
+    }
+
+    li:not(:last-child) {
+      border-right: var(--border);
+      border-bottom: 0px;
+    }
+
+    & > ul {
+      & > li:first-child > a {
+        border-bottom-left-radius: var(--border-radius);
+        border-bottom-right-radius: 0px;
+      }
+
+      & > li:last-child > a {
+        border-bottom-right-radius: var(--border-radius);
+        border-bottom-left-radius: 0px;
+      }
+    }
+  }
+}
+
+.side-nav__count {
+  margin-left: var(--bloom-s4);
+}

package/src/navigation/SideNav.tsx

@@ -11,8 +11,8 @@ export interface SideNavItemProps {
 }
 
 export interface SideNavProps {
-  navItems?: SideNavItemProps[]
   className?: string
+  navItems?: SideNavItemProps[]
 }
 
 const ItemLabel = ({ item }: { item: SideNavItemProps }) => {
@@ -20,7 +20,7 @@ const ItemLabel = ({ item }: { item: SideNavItemProps }) => {
     return (
       <>
         <span>{item.label}</span>
-        <span>{item.count}</span>
+        <span className={"side-nav__count"}>{item.count}</span>
       </>
     )
   } else {

package/src/navigation/Tabs.scss

@@ -10,6 +10,29 @@
   }
 }
 
+.tabs__horizontal {
+  ul {
+    @apply flex;
+    @apply flex-row;
+  }
+
+  .tabs__tab {
+    &:first-of-type {
+      @apply border-l;
+      @apply rounded-tl-lg;
+      @apply rounded-tr-lg;
+      @apply rounded-tr-none;
+      @apply rounded-bl-lg;
+    }
+    &:last-of-type {
+      @apply rounded-tr-lg;
+      @apply rounded-br-lg;
+    }
+
+    border-bottom-color: var(--bloom-color-gray-450);
+  }
+}
+
 .tabs__tab {
   @apply bg-white;
   @apply text-gray-800;
@@ -30,14 +53,10 @@
     @apply border-l;
     @apply rounded-tl-lg;
     @apply rounded-tr-lg;
-    @screen md {
-      @apply rounded-tr-none;
-    }
+    @apply rounded-tr-none;
   }
   &:last-of-type {
-    @screen md {
-      @apply rounded-tr-lg;
-    }
+    @apply rounded-tr-lg;
   }
   &:hover {
     border-bottom-color: map-get($tailwind-gray, 400);

package/src/page_components/NavigationHeader.tsx

@@ -17,12 +17,12 @@ type NavigationHeaderTabs = {
   flagsQty?: number
   listingLabel: string
   applicationsLabel: string
-  flagsLabel: string
 }
 
 type NavigationHeaderTabsElement = {
   label: string
   path: string
+  activePaths: string[]
   content: React.ReactNode | undefined
 }
 
@@ -42,23 +42,23 @@ const NavigationHeader = ({
       {
         label: tabs?.listingLabel || "",
         path: `/listings/${listingId}`,
+        activePaths: [`/listings/${listingId}`],
         content: undefined,
       },
       {
         label: tabs?.applicationsLabel || "",
         path: `/listings/${listingId}/applications`,
+        activePaths: [
+          `/listings/${listingId}/applications`,
+          `/listings/${listingId}/applications/pending`,
+          `/listings/${listingId}/applications/pending?type=name_dob`,
+          `/listings/${listingId}/applications/pending?type=email`,
+          `/listings/${listingId}/applications/resolved`,
+        ],
         content: undefined,
       },
     ]
 
-    if (process.env.showDuplicates && typeof tabs?.flagsQty === "number") {
-      elements.push({
-        label: tabs.flagsLabel,
-        path: `/listings/${listingId}/flags`,
-        content: <>{tabs.flagsQty}</>,
-      })
-    }
-
     return elements
   }, [tabs, listingId])
 
@@ -69,7 +69,7 @@ const NavigationHeader = ({
           <TabNavItem
             key={tab.path}
             tagContent={tab?.content}
-            current={tab.path === currentPath}
+            current={tab.activePaths.includes(currentPath)}
             href={tab.path}
             tagSize={AppearanceSizeType.small}
           >

package/src/tables/AgTable.tsx

@@ -1,7 +1,14 @@
 import React, { useState, useCallback, useEffect, useRef } from "react"
 import { useForm } from "react-hook-form"
 import { AgGridReact } from "ag-grid-react"
-import { GridOptions, ColumnState, ColumnApi, ColDef, ColGroupDef } from "ag-grid-community"
+import {
+  GridOptions,
+  ColumnState,
+  ColumnApi,
+  ColDef,
+  ColGroupDef,
+  GridApi,
+} from "ag-grid-community"
 import { AgPagination, AG_PER_PAGE_OPTIONS } from "./AgPagination"
 import { LoadingOverlay } from "../overlays/LoadingOverlay"
 import { Field } from "../forms/Field"
@@ -15,11 +22,12 @@ export interface ColumnOrder {
 }
 
 export interface AgTableProps {
-  id: string
   config: AgTableConfig
   data: AgTableData
-  pagination: AgTablePagination
+  id: string
+  pagination?: AgTablePagination
   search: AgTableSearch
+  selectConfig?: AgTableSelectConfig
   sort?: AgTableSort
   headerContent?: React.ReactNode
   className?: string
@@ -36,11 +44,17 @@ export interface AgTablePagination {
   setCurrentPage: React.Dispatch<React.SetStateAction<number>>
 }
 
+export interface AgTableSelectConfig {
+  setGridApi: React.Dispatch<React.SetStateAction<GridApi | null>>
+  updateSelectedValues: () => void
+}
+
 export interface AgTableConfig {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   gridComponents?: { [p: string]: any }
   columns: (ColDef | ColGroupDef)[]
   totalItemsLabel: string
+  rowSelection?: boolean
 }
 
 export interface AgTableData {
@@ -53,6 +67,7 @@ export interface AgTableData {
 
 export interface AgTableSearch {
   setSearch: React.Dispatch<React.SetStateAction<string>>
+  showSearch?: boolean
 }
 
 export interface AgTableSort {
@@ -85,14 +100,15 @@ export const useAgTable = () => {
 }
 
 const AgTable = ({
-  id,
   className,
+  config: { gridComponents, columns, totalItemsLabel, rowSelection },
+  data,
+  headerContent,
+  id,
+  selectConfig,
   pagination,
-  search: { setSearch },
+  search: { setSearch, showSearch = true },
   sort: { setSort } = {},
-  headerContent,
-  data,
-  config: { gridComponents, columns, totalItemsLabel },
   strings,
 }: AgTableProps) => {
   // local storage key with column state
@@ -148,7 +164,7 @@ const AgTable = ({
   const debounceFilter = useRef(
     debounce((value: string) => {
       setSearch(value)
-      pagination.setCurrentPage(1)
+      pagination?.setCurrentPage(1)
     }, 500)
   )
   useEffect(() => {
@@ -184,12 +200,15 @@ const AgTable = ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const onGridReady = (params: any) => {
     setGridColumnApi(params.columnApi)
+    if (selectConfig?.setGridApi) {
+      selectConfig.setGridApi(params.api)
+    }
   }
 
   return (
     <div className={`ag-theme-alpine ag-theme-bloom ${className || ""}`}>
       <div className="flex justify-between flex-col md:flex-row">
-        <div className="flex flex-wrap">
+        <div className={`flex flex-wrap ${showSearch ? "mb-5" : "hidden"}`}>
           <div className="md:mr-5 w-full md:w-56">
             <Field
               dataTestId="ag-search-input"
@@ -200,7 +219,7 @@ const AgTable = ({
               placeholder={strings?.filter ?? t("t.filter")}
             />
           </div>
-          <div className="w-full md:w-auto mt-2 mb-2 md:mb-0">
+          <div className="w-full md:w-auto mt-2 md:mt-0 mb-2 md:mb-0">
             {!validSearch && (
               <AlertBox type="notice">
                 {strings?.searchError ?? t("applications.table.searchError")}
@@ -211,8 +230,7 @@ const AgTable = ({
 
         {headerContent}
       </div>
-
-      <div className="applications-table mt-5">
+      <div className="applications-table">
         <LoadingOverlay isLoading={data.loading}>
           <div>
             <AgGridReact
@@ -227,19 +245,25 @@ const AgTable = ({
               suppressPaginationPanel={true}
               paginationPageSize={AG_PER_PAGE_OPTIONS[0]}
               suppressScrollOnNewData={true}
+              rowSelection={rowSelection ? "multiple" : undefined}
+              rowMultiSelectWithClick={rowSelection}
+              onRowDataChanged={selectConfig?.updateSelectedValues ?? undefined}
+              onFirstDataRendered={selectConfig?.updateSelectedValues ?? undefined}
             ></AgGridReact>
           </div>
         </LoadingOverlay>
 
-        <AgPagination
-          totalItems={data.totalItems}
-          totalPages={data.totalPages}
-          currentPage={pagination.currentPage}
-          itemsPerPage={pagination.perPage}
-          quantityLabel={totalItemsLabel}
-          setCurrentPage={pagination.setCurrentPage}
-          setItemsPerPage={pagination.setPerPage}
-        />
+        {pagination && (
+          <AgPagination
+            totalItems={data.totalItems}
+            totalPages={data.totalPages}
+            currentPage={pagination.currentPage}
+            itemsPerPage={pagination.perPage}
+            quantityLabel={totalItemsLabel}
+            setCurrentPage={pagination.setCurrentPage}
+            setItemsPerPage={pagination.setPerPage}
+          />
+        )}
       </div>
     </div>
   )