@bloom-housing/ui-components 2.0.0-pre-tailwind

package/src/helpers/resolveObject.ts

@@ -0,0 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const resolveObject = (path: string, obj: any, separator = ".") => {
+  const properties = Array.isArray(path) ? path : path.split(separator)
+  return properties.reduce((prev, curr) => prev && prev[curr], obj)
+}

package/src/helpers/state.tsx

@@ -0,0 +1,7 @@
+import moment from "moment"
+import { Listing } from "@bloom-housing/backend-core/types"
+
+export const openDateState = (listing: Listing) => {
+  const nowTime = moment()
+  return listing.applicationOpenDate && nowTime < moment(listing.applicationOpenDate)
+}

package/src/helpers/tableSummaries.tsx

@@ -0,0 +1,80 @@
+import * as React from "react"
+import { t } from "./translator"
+import { UnitSummary } from "@bloom-housing/backend-core/types"
+import { GroupedTableGroup } from "../tables/GroupedTable"
+
+export const unitSummariesTable = (summaries: UnitSummary[]) => {
+  const unitSummaries = summaries.map((unitSummary) => {
+    const unitPluralization = unitSummary.totalAvailable == 1 ? t("t.unit") : t("t.units")
+    const minIncome =
+      unitSummary.minIncomeRange.min == unitSummary.minIncomeRange.max ? (
+        <strong>{unitSummary.minIncomeRange.min}</strong>
+      ) : (
+        <>
+          <strong>{unitSummary.minIncomeRange.min}</strong> {t("t.to")}{" "}
+          <strong>{unitSummary.minIncomeRange.max}</strong>
+        </>
+      )
+
+    const getRent = (rentMin: string, rentMax: string, percent = false) => {
+      const unit = percent ? `% ${t("t.income")}` : ` ${t("t.perMonth")}`
+      return rentMin == rentMax ? (
+        <>
+          <strong>{rentMin}</strong>
+          {unit}
+        </>
+      ) : (
+        <>
+          <strong>{rentMin}</strong> {t("t.to")} <strong>{rentMax}</strong>
+          {unit}
+        </>
+      )
+    }
+
+    // Use rent as percent income if available, otherwise use exact rent
+    const rent = unitSummary.rentAsPercentIncomeRange.min
+      ? getRent(
+          unitSummary.rentAsPercentIncomeRange.min.toString(),
+          unitSummary.rentAsPercentIncomeRange.max.toString(),
+          true
+        )
+      : getRent(unitSummary.rentRange.min, unitSummary.rentRange.max)
+
+    return {
+      unitType: <strong>{t(`listings.unitTypes.${unitSummary.unitType.name}`)}</strong>,
+      minimumIncome: (
+        <>
+          {minIncome} {t("t.perMonth")}
+        </>
+      ),
+      rent: <>{rent}</>,
+      availability: (
+        <>
+          {unitSummary.totalAvailable > 0 ? (
+            <>
+              <strong>{unitSummary.totalAvailable}</strong> {unitPluralization}
+            </>
+          ) : (
+            <span className="uppercase">{t("listings.waitlist.label")}</span>
+          )}
+        </>
+      ),
+    }
+  })
+
+  return unitSummaries
+}
+
+export const getSummariesTable = (summaries: UnitSummary[]) => {
+  let groupedUnits = [] as Array<GroupedTableGroup>
+
+  if (summaries?.length > 0) {
+    const unitSummaries = unitSummariesTable(summaries)
+    groupedUnits = [
+      {
+        data: unitSummaries,
+      },
+    ]
+  }
+  return groupedUnits
+}

package/src/helpers/translator.tsx

@@ -0,0 +1,37 @@
+import Polyglot from "node-polyglot"
+
+interface TranslatorConfig {
+  polyglot?: any
+}
+
+const translatorConfig: TranslatorConfig = {}
+;(global as any).Translator = translatorConfig
+
+export const addTranslation = (translationPhrases: any, resetPolyglot = false) => {
+  if (!translatorConfig.polyglot || resetPolyglot) {
+    // Set up the initial Polyglot instance and phrases
+    translatorConfig.polyglot = new Polyglot({
+      phrases: translationPhrases,
+    })
+  } else {
+    // Extend the Polyglot instance with new phrases
+    translatorConfig.polyglot.extend(translationPhrases)
+  }
+}
+
+const t = (phrase: string, options?: any): string => {
+  if (translatorConfig.polyglot) {
+    return translatorConfig.polyglot.t(phrase, options)
+  }
+  return "{{ Missing Translation Phrases }}"
+}
+
+const locale = () => {
+  if (!translatorConfig.polyglot) {
+    return translatorConfig.polyglot()
+  } else {
+    return "en"
+  }
+}
+
+export { t as default, t, locale }

package/src/helpers/useKeyPress.ts

@@ -0,0 +1,17 @@
+import { useEffect } from "react"
+
+function useKeyPress(targetKey: string, callback: () => unknown) {
+  useEffect(() => {
+    function keyUp(e: KeyboardEvent) {
+      if (e.key === targetKey) callback()
+    }
+
+    window.addEventListener("keyup", keyUp)
+
+    return () => {
+      window.removeEventListener("keyup", keyUp)
+    }
+  }, [targetKey, callback])
+}
+
+export default useKeyPress

package/src/helpers/useMutate.ts

@@ -0,0 +1,40 @@
+import { useState } from "react"
+
+const useMutate = <UseMutateResponse>() => {
+  const [data, setData] = useState<UseMutateResponse | undefined>(undefined)
+  const [isSuccess, setSuccess] = useState(false)
+  const [isLoading, setLoading] = useState(false)
+  const [isError, setError] = useState(null)
+
+  const mutate = async (mutateFn: (args?: unknown) => Promise<UseMutateResponse>) => {
+    try {
+      setLoading(true)
+      const response = await mutateFn()
+      setData(response)
+      setSuccess(true)
+      setLoading(false)
+    } catch (err) {
+      setSuccess(false)
+      setLoading(false)
+      setError(err)
+    }
+  }
+
+  const reset = () => {
+    setData(undefined)
+    setSuccess(false)
+    setLoading(false)
+    setError(null)
+  }
+
+  return {
+    mutate,
+    reset,
+    data,
+    isSuccess,
+    isLoading,
+    isError,
+  }
+}
+
+export { useMutate as default, useMutate }

package/src/helpers/useOutsideClick.ts

@@ -0,0 +1,25 @@
+import { useEffect, useCallback, RefObject } from "react"
+
+type OutsideClickProps = {
+  ref: RefObject<Element>
+  callback: () => unknown
+}
+
+export const useOutsideClick = ({ ref, callback }: OutsideClickProps) => {
+  const handleClick = useCallback(
+    (e) => {
+      if (ref?.current && !ref.current.contains(e.target)) {
+        callback()
+      }
+    },
+    [ref, callback]
+  )
+
+  useEffect(() => {
+    document.addEventListener("click", handleClick)
+
+    return () => {
+      document.removeEventListener("click", handleClick)
+    }
+  })
+}

package/src/helpers/validators.ts

@@ -0,0 +1,3 @@
+export const emailRegex = /^(([^<>()[\]\\.,;:\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,}))$/
+export const passwordRegex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]+).{7,}$/
+export const urlRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})$/

package/src/icons/HeaderBadge.scss

@@ -0,0 +1,29 @@
+.header-badge {
+  @apply inline-block;
+  @apply p-4;
+  @apply pt-0;
+  @pply mb-4;
+  @apply border-solid;
+  @apply border-b-4;
+  @apply border-primary;
+
+  @screen md {
+    @apply px-8;
+    @apply pb-4;
+    @apply mb-6;
+  }
+
+  .ui-icon {
+    @apply inline-block;
+  }
+
+  svg {
+    @apply h-10;
+    @apply w-10;
+
+    @screen md {
+      @apply h-12;
+      @apply w-12;
+    }
+  }
+}

package/src/icons/HeaderBadge.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+import "./HeaderBadge.scss"
+
+const HeaderBadge = () => (
+  <span className="header-badge">
+    <svg id="i-application" viewBox="0 0 24 32">
+      <title>application</title>
+      <path fill="#edebda" d="M24.51 7.626l-7.626-7.626h-16.885v31.592h24.51v-23.966z"></path>
+      <path fill="#cec9ae" d="M16.885 0v7.626h7.626l-7.626-7.626z"></path>
+      <path
+        fill="#cec9ae"
+        d="M19.064 11.982h-8.715c-0.301 0-0.544-0.243-0.544-0.544s0.245-0.544 0.544-0.544h8.715c0.301 0 0.544 0.245 0.544 0.544s-0.245 0.544-0.544 0.544z"
+      ></path>
+      <path
+        fill="#13a085"
+        d="M5.992 12.528c-0.139 0-0.28-0.054-0.386-0.16l-1.090-1.090c-0.213-0.213-0.213-0.557 0-0.77s0.557-0.213 0.77 0l0.744 0.744 2.342-1.874c0.235-0.187 0.578-0.15 0.766 0.085s0.15 0.578-0.085 0.766l-2.723 2.179c-0.101 0.080-0.221 0.12-0.341 0.12z"
+      ></path>
+      <path
+        fill="#cec9ae"
+        d="M19.064 17.974h-8.715c-0.301 0-0.544-0.243-0.544-0.544s0.245-0.544 0.544-0.544h8.715c0.301 0 0.544 0.243 0.544 0.544s-0.245 0.544-0.544 0.544z"
+      ></path>
+      <path
+        fill="#13a085"
+        d="M5.992 18.518c-0.139 0-0.28-0.053-0.386-0.16l-1.090-1.090c-0.213-0.213-0.213-0.557 0-0.77s0.557-0.213 0.77 0l0.744 0.744 2.342-1.874c0.235-0.187 0.578-0.15 0.766 0.085s0.15 0.578-0.085 0.766l-2.723 2.179c-0.101 0.080-0.221 0.12-0.341 0.12z"
+      ></path>
+      <path
+        fill="#cec9ae"
+        d="M19.064 23.966h-8.715c-0.301 0-0.544-0.243-0.544-0.544s0.245-0.544 0.544-0.544h8.715c0.301 0 0.544 0.243 0.544 0.544s-0.245 0.544-0.544 0.544z"
+      ></path>
+      <path
+        fill="#13a085"
+        d="M5.992 24.51c-0.139 0-0.28-0.053-0.386-0.16l-1.090-1.090c-0.213-0.213-0.213-0.557 0-0.77s0.557-0.213 0.77 0l0.744 0.744 2.342-1.874c0.235-0.187 0.578-0.15 0.766 0.085s0.15 0.578-0.085 0.766l-2.723 2.179c-0.101 0.080-0.221 0.12-0.341 0.12z"
+      ></path>
+    </svg>
+  </span>
+)
+
+export { HeaderBadge as default, HeaderBadge }

package/src/icons/Icon.scss

@@ -0,0 +1,76 @@
+@keyframes icons-svg-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(359deg);
+  }
+}
+
+.spinner-animation > svg {
+  animation: icons-svg-spin 1s linear infinite;
+}
+
+.ui-icon svg {
+  @apply inline-block;
+  @apply align-middle;
+  @apply w-6;
+  @apply h-6;
+}
+
+.ui-icon svg {
+  margin-top: -3px;
+}
+
+.ui-tiny svg {
+  @apply w-2;
+  @apply h-2;
+}
+
+.ui-small svg {
+  @apply w-3;
+  @apply h-3;
+}
+
+.ui-medium svg {
+  @apply w-4;
+  @apply h-4;
+}
+
+.ui-large svg {
+  @apply w-8;
+  @apply h-8;
+}
+
+.ui-xlarge svg {
+  @apply w-10;
+  @apply h-10;
+}
+
+.ui-2xl svg {
+  @apply w-12;
+  @apply h-12;
+}
+
+.ui-3xl svg {
+  @apply w-16;
+  @apply h-16;
+}
+
+.ui-white svg use {
+  fill: #fff !important;
+}
+
+a svg use {
+  fill: $tailwind-primary;
+}
+
+.bg-alert-light svg use {
+  fill: $tailwind-alert;
+}
+
+.ui-icon {
+  &.is-primary svg use {
+    fill: $tailwind-primary;
+  }
+}

package/src/icons/Icon.tsx

@@ -0,0 +1,145 @@
+import * as React from "react"
+import "./Icon.scss"
+import {
+  Application,
+  ArrowBack,
+  ArrowDown,
+  ArrowForward,
+  Assistance,
+  Asterisk,
+  Bed,
+  Browse,
+  Building,
+  Calendar,
+  Check,
+  Clock,
+  Close,
+  CloseRound,
+  Cross,
+  Down,
+  Download,
+  Draggable,
+  Edit,
+  Eligibility,
+  Eye,
+  Favorite,
+  File,
+  Forward,
+  Globe,
+  Info,
+  Left,
+  Lightbulb,
+  Like,
+  LikeFill,
+  Link,
+  List,
+  Lock,
+  Mail,
+  Map,
+  MapThin,
+  Menu,
+  Oval,
+  Phone,
+  Plus,
+  Polygon,
+  Profile,
+  Question,
+  Result,
+  Right,
+  Search,
+  Settings,
+  Spinner,
+  Star,
+  Ticket,
+  Trash,
+  Warning,
+} from "./Icons"
+
+const IconMap = {
+  application: Application,
+  arrowBack: ArrowBack,
+  arrowForward: ArrowForward,
+  arrowDown: ArrowDown,
+  assistance: Assistance,
+  asterisk: Asterisk,
+  bed: Bed,
+  browse: Browse,
+  building: Building,
+  calendar: Calendar,
+  check: Check,
+  clock: Clock,
+  close: Close,
+  closeRound: CloseRound,
+  cross: Cross,
+  down: Down,
+  download: Download,
+  draggable: Draggable,
+  edit: Edit,
+  eligibility: Eligibility,
+  eye: Eye,
+  favorite: Favorite,
+  file: File,
+  forward: Forward,
+  globe: Globe,
+  info: Info,
+  left: Left,
+  lightbulb: Lightbulb,
+  like: Like,
+  likeFill: LikeFill,
+  link: Link,
+  list: List,
+  lock: Lock,
+  mail: Mail,
+  map: Map,
+  mapThin: MapThin,
+  menu: Menu,
+  oval: Oval,
+  phone: Phone,
+  plus: Plus,
+  polygon: Polygon,
+  profile: Profile,
+  question: Question,
+  result: Result,
+  right: Right,
+  search: Search,
+  settings: Settings,
+  spinner: Spinner,
+  star: Star,
+  ticket: Ticket,
+  trash: Trash,
+  warning: Warning,
+}
+
+export type IconTypes = keyof typeof IconMap
+
+export type IconFill = "white" | "primary"
+
+export const IconFillColors = {
+  white: "#ffffff",
+  black: "#000000",
+  primary: "#0077DA",
+}
+
+export interface IconProps {
+  size: "tiny" | "small" | "medium" | "large" | "xlarge" | "2xl" | "3xl"
+  symbol: IconTypes
+  className?: string
+  fill?: string
+}
+
+const Icon = (props: IconProps) => {
+  const wrapperClasses = ["ui-icon"]
+  wrapperClasses.push(`ui-${props.size}`)
+  if (props.className) wrapperClasses.push(props.className)
+  if (props.symbol == "spinner") wrapperClasses.push("spinner-animation")
+
+  const SpecificIcon = IconMap[props.symbol]
+
+  return (
+    <span className={wrapperClasses.join(" ")}>
+      <SpecificIcon fill={props.fill ? props.fill : undefined} />
+    </span>
+  )
+}
+
+export { Icon as default, Icon }