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

package/src/helpers/address.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import Markdown from "markdown-to-jsx"
+
+export interface Address {
+  city?: string
+  latitude?: number
+  longitude?: number
+  placeName?: string
+  state?: string
+  street2?: string
+  street?: string
+  zipCode?: string
+}
+
+interface AddressProps {
+  address: Address
+}
+
+export const OneLineAddress = (props: AddressProps) => {
+  if (!props.address) return null
+
+  return (
+    <>
+      {props.address.street},{` `}
+      {props.address.city}, {props.address.state} {props.address.zipCode}
+    </>
+  )
+}
+
+export const MultiLineAddress = (props: AddressProps) => {
+  if (!props.address) return null
+
+  return (
+    <>
+      {props.address.placeName && (
+        <>
+          {props.address.placeName}
+          <br />
+        </>
+      )}
+      <Markdown children={props.address.street || ""} />
+      <br />
+      {props.address.city}, {props.address.state} {props.address.zipCode}
+    </>
+  )
+}

package/src/helpers/blankApplication.ts

@@ -0,0 +1,108 @@
+import {
+  ApplicationStatus,
+  ApplicationSubmissionType,
+  Language,
+  ApplicationPreference,
+} from "@bloom-housing/backend-core/types"
+
+export const blankApplication = () => {
+  return {
+    loaded: false,
+    autofilled: false,
+    completedSections: 0,
+    submissionType: ApplicationSubmissionType.electronical,
+    language: Language.en,
+    acceptedTerms: false,
+    status: ApplicationStatus.submitted,
+    applicant: {
+      orderId: undefined,
+      firstName: "",
+      middleName: "",
+      lastName: "",
+      birthMonth: "",
+      birthDay: "",
+      birthYear: "",
+      emailAddress: null,
+      noEmail: false,
+      phoneNumber: "",
+      phoneNumberType: "",
+      noPhone: false,
+      workInRegion: null,
+      address: {
+        street: "",
+        street2: "",
+        city: "",
+        state: "",
+        zipCode: "",
+        county: "",
+        latitude: null,
+        longitude: null,
+      },
+      workAddress: {
+        street: "",
+        street2: "",
+        city: "",
+        state: "",
+        zipCode: "",
+        county: "",
+        latitude: null,
+        longitude: null,
+      },
+    },
+    additionalPhone: false,
+    additionalPhoneNumber: "",
+    additionalPhoneNumberType: "",
+    contactPreferences: [],
+    householdSize: 0,
+    housingStatus: "",
+    sendMailToMailingAddress: false,
+    mailingAddress: {
+      street: "",
+      street2: "",
+      city: "",
+      state: "",
+      zipCode: "",
+    },
+    alternateAddress: {
+      street: "",
+      street2: "",
+      city: "",
+      state: "",
+      zipCode: "",
+    },
+    alternateContact: {
+      type: "",
+      otherType: "",
+      firstName: "",
+      lastName: "",
+      agency: "",
+      phoneNumber: "",
+      emailAddress: null,
+      mailingAddress: {
+        street: "",
+        city: "",
+        state: "",
+        zipCode: "",
+      },
+    },
+    accessibility: {
+      mobility: null,
+      vision: null,
+      hearing: null,
+    },
+    incomeVouchers: null,
+    income: null,
+    incomePeriod: null,
+    householdMembers: [],
+    preferredUnit: [],
+    demographics: {
+      ethnicity: "",
+      race: "",
+      gender: "",
+      sexualOrientation: "",
+      howDidYouHear: [],
+    },
+    preferences: [] as ApplicationPreference[],
+    confirmationId: "",
+  }
+}

package/src/helpers/capitalize.tsx

@@ -0,0 +1,7 @@
+export const capitalize = (str: string): string => {
+  if (str.toString().length > 0) {
+    return str[0].toUpperCase() + str.slice(1)
+  } else {
+    return ""
+  }
+}

package/src/helpers/dateToString.ts

@@ -0,0 +1,11 @@
+import moment from "moment"
+
+export const dateToString = (submissionDate: Date) => {
+  if (!submissionDate) return null
+  const formattedSubmissionDate = moment(new Date(submissionDate)).utc()
+  const month = formattedSubmissionDate.format("MMMM")
+  const day = formattedSubmissionDate.format("DD")
+  const year = formattedSubmissionDate.format("YYYY")
+
+  return `${month} ${day}, ${year}`
+}

package/src/helpers/debounce.ts

@@ -0,0 +1,12 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+export function debounce<F extends (...params: any[]) => void>(fn: F, delay: number) {
+  let timeoutID: number | null = null
+  return function (this: any, ...args: any[]) {
+    if (timeoutID) {
+      clearTimeout(timeoutID)
+    }
+
+    timeoutID = window.setTimeout(() => fn.apply(this, args), delay)
+  } as F
+}
+/* eslint-enable @typescript-eslint/no-explicit-any */

package/src/helpers/formOptions.tsx

@@ -0,0 +1,229 @@
+import * as React from "react"
+import { t } from "./translator"
+import { Language } from "@bloom-housing/backend-core/types"
+
+export interface SelectOption {
+  value: string
+  label: string
+}
+
+interface FormOptionsProps {
+  options: (string | SelectOption)[]
+  keyPrefix?: string
+}
+
+interface FieldGroupItem {
+  id: string
+  checked?: boolean
+}
+
+export const contactPreferencesKeys: FieldGroupItem[] = [
+  {
+    id: "email",
+  },
+  {
+    id: "phone",
+  },
+  {
+    id: "letter",
+  },
+  {
+    id: "text",
+  },
+]
+
+export const relationshipKeys = [
+  "",
+  "spouse",
+  "registeredDomesticPartner",
+  "parent",
+  "child",
+  "sibling",
+  "cousin",
+  "aunt",
+  "uncle",
+  "nephew",
+  "niece",
+  "grandparent",
+  "greatGrandparent",
+  "inLaw",
+  "friend",
+  "other",
+]
+
+export const altContactRelationshipKeys = [
+  "familyMember",
+  "friend",
+  "caseManager",
+  "other",
+  "noContact",
+]
+
+export const stateKeys = [
+  "",
+  "AL",
+  "AK",
+  "AZ",
+  "AR",
+  "CA",
+  "CO",
+  "CT",
+  "DE",
+  "DC",
+  "FL",
+  "GA",
+  "HI",
+  "ID",
+  "IL",
+  "IN",
+  "IA",
+  "KS",
+  "KY",
+  "LA",
+  "ME",
+  "MD",
+  "MA",
+  "MI",
+  "MN",
+  "MS",
+  "MO",
+  "MT",
+  "NE",
+  "NV",
+  "NH",
+  "NJ",
+  "NM",
+  "NY",
+  "NC",
+  "ND",
+  "OH",
+  "OK",
+  "OR",
+  "PA",
+  "RI",
+  "SC",
+  "SD",
+  "TN",
+  "TX",
+  "UT",
+  "VT",
+  "VA",
+  "WA",
+  "WV",
+  "WI",
+  "WY",
+]
+
+export const ethnicityKeys = ["hispanicLatino", "notHispanicLatino"]
+
+export const raceKeys = [
+  "americanIndianAlaskanNative",
+  "asian",
+  "blackAfricanAmerican",
+  "nativeHawaiianOtherPacificIslander",
+  "white",
+  "americanIndianAlaskanNativeAndBlackAfricanAmerican",
+  "americanIndianAlaskanNativeAndWhite",
+  "asianAndWhite",
+  "blackAfricanAmericanAndWhite",
+  "otherMutliracial",
+]
+
+export const genderKeys = [
+  "female",
+  "male",
+  "genderqueerGenderNon-Binary",
+  "transFemale",
+  "transMale",
+  "notListed",
+]
+
+export const sexualOrientation = [
+  "bisexual",
+  "gayLesbianSameGenderLoving",
+  "questioningUnsure",
+  "straightHeterosexual",
+  "notListed",
+]
+
+export const howDidYouHear: FieldGroupItem[] = [
+  {
+    id: "alamedaCountyHCDWebsite",
+  },
+  {
+    id: "developerWebsite",
+  },
+  {
+    id: "flyer",
+  },
+  {
+    id: "emailAlert",
+  },
+  {
+    id: "friend",
+  },
+  {
+    id: "housingCounselor",
+  },
+  {
+    id: "radioAd",
+  },
+  {
+    id: "busAd",
+  },
+  {
+    id: "other",
+  },
+]
+
+export const phoneNumberKeys = ["work", "home", "cell"]
+
+export const preferredUnit: FieldGroupItem[] = [
+  {
+    id: "studio",
+  },
+  {
+    id: "oneBedroom",
+  },
+  {
+    id: "twoBedroom",
+  },
+  {
+    id: "threeBedroom",
+  },
+  {
+    id: "moreThanThreeBedroom",
+  },
+]
+
+export const bedroomKeys = ["studio", "oneBdrm", "twoBdrm", "threeBdrm"]
+
+export const applicationLanguageKeys = [Language.en, Language.es, Language.zh, Language.vi]
+
+export const numberOptions = (end: number, start = 1): SelectOption[] => {
+  const nums = []
+  for (let i = start; i <= end; i++) {
+    nums.push({ label: i.toString(), value: i.toString() })
+  }
+
+  return nums
+}
+
+export const FormOptions = (props: FormOptionsProps) => {
+  const options = props.options.map((option: string | SelectOption) => {
+    if (option == "" || option["value"] == "") {
+      return (
+        <option value="" key="select-one">
+          {t("t.selectOne")}
+        </option>
+      )
+    } else {
+      return (
+        <option value={option["value"] || option} key={option["value"] || option}>
+          {option["label"] || t(`${props.keyPrefix}.${option as string}`)}
+        </option>
+      )
+    }
+  })
+  return <>{options}</>
+}

package/src/helpers/formatYesNoLabel.ts

@@ -0,0 +1,9 @@
+import { t } from "./translator"
+
+export const formatYesNoLabel = (value: boolean | null) => {
+  if (value === null || typeof value == "undefined") return t("t.n/a")
+  if (value) return t("t.yes")
+  if (!value) return t("t.no")
+
+  return t("t.n/a")
+}

package/src/helpers/getTranslationWithArguments.ts

@@ -0,0 +1,14 @@
+import { t } from "./translator"
+
+// translationKey must be in the format `key*argumentName:argumentValue*argumentName:argumentValue`
+// any number of arguments can be passed, returns a fully translated string
+export const getTranslationWithArguments = (translationKey: string) => {
+  if (translationKey.indexOf("*") >= 0) {
+    const [key, ...stringArguments] = translationKey.split("*")
+    const argumentsObject = stringArguments.reduce((obj, arg) => {
+      const [key, value] = arg.split(":")
+      return { ...obj, [key]: value }
+    }, {})
+    return t(key, argumentsObject)
+  } else return t(translationKey)
+}