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

package/src/forms/Field.tsx

@@ -0,0 +1,115 @@
+import React, { useMemo } from "react"
+import { ErrorMessage } from "../notifications/ErrorMessage"
+import { UseFormMethods } from "react-hook-form"
+
+export interface FieldProps {
+  error?: boolean
+  errorMessage?: string
+  className?: string
+  controlClassName?: string
+  caps?: boolean
+  primary?: boolean
+  readerOnly?: boolean
+  type?: string
+  id?: string
+  name: string
+  note?: string
+  label?: string
+  defaultValue?: string | number
+  onDrop?: (e: any) => boolean
+  onPaste?: (e: any) => boolean
+  placeholder?: string
+  register?: UseFormMethods["register"]
+  validation?: Record<string, any>
+  disabled?: boolean
+  prepend?: string
+  inputProps?: Record<string, unknown>
+  describedBy?: string
+  getValues?: UseFormMethods["getValues"]
+  setValue?: UseFormMethods["setValue"]
+}
+
+const Field = (props: FieldProps) => {
+  const classes = ["field"]
+  if (props.error) {
+    classes.push("error")
+  }
+
+  if (props.className) {
+    classes.push(props.className)
+  }
+
+  const controlClasses = ["control"]
+  if (props.controlClassName) {
+    controlClasses.push(props.controlClassName)
+  }
+
+  const formatValue = () => {
+    if (props.getValues && props.setValue) {
+      const currencyValue = props.getValues(props.name)
+      const numericIncome = parseFloat(currencyValue)
+      if (!isNaN(numericIncome)) {
+        props.setValue(props.name, numericIncome.toFixed(2))
+      }
+    }
+  }
+
+  let inputProps = { ...props.inputProps }
+  if (props.type === "currency") inputProps = { ...inputProps, step: 0.01, onBlur: formatValue }
+
+  const type = (props.type === "currency" && "number") || props.type || "text"
+  const isRadioOrCheckbox = ["radio", "checkbox"].includes(type)
+
+  const label = useMemo(() => {
+    const labelClasses = ["label"]
+    if (props.caps) labelClasses.push("field-label--caps")
+    if (props.primary) labelClasses.push("text-primary")
+    if (props.readerOnly) labelClasses.push("sr-only")
+
+    return (
+      <label className={labelClasses.join(" ")} htmlFor={props.id || props.name}>
+        {props.label}
+      </label>
+    )
+  }, [props.caps, props.primary, props.readerOnly, props.id, props.name, props.label])
+
+  const idOrName = props.id || props.name
+
+  let note = <></>
+  if (props.note) {
+    note = <p className="field-note mb-4">{props.note}</p>
+  }
+
+  return (
+    <div className={classes.join(" ")}>
+      {!isRadioOrCheckbox && label}
+      {note}
+      <div className={controlClasses.join(" ")}>
+        {props.prepend && <span className="prepend">{props.prepend}</span>}
+        <input
+          aria-describedby={props.describedBy ? props.describedBy : `${idOrName}-error`}
+          aria-invalid={!!props.error || false}
+          className="input"
+          type={type}
+          id={idOrName}
+          name={props.name}
+          defaultValue={props.defaultValue}
+          placeholder={props.placeholder}
+          ref={props.register && props.register(props.validation)}
+          disabled={props.disabled}
+          onPaste={props.onPaste}
+          onDrop={props.onDrop}
+          {...inputProps}
+        />
+        {isRadioOrCheckbox && label}
+      </div>
+      {props.errorMessage && (
+        <ErrorMessage id={`${idOrName}-error`} error={props.error}>
+          {props.errorMessage}
+        </ErrorMessage>
+      )}
+    </div>
+  )
+}
+
+export { Field as default, Field }

package/src/forms/FieldGroup.tsx

@@ -0,0 +1,82 @@
+import React from "react"
+import { ErrorMessage } from "../notifications/ErrorMessage"
+import { UseFormMethods } from "react-hook-form"
+
+interface FieldSingle {
+  id: string
+  label: string
+  value?: string
+  defaultChecked?: boolean
+  note?: string
+}
+
+interface FieldGroupProps {
+  error?: boolean
+  errorMessage?: string
+  name: string
+  type?: string
+  groupLabel?: string
+  fields?: FieldSingle[]
+  groupNote?: string
+  register: UseFormMethods["register"]
+  validation?: Record<string, unknown>
+  fieldGroupClassName?: string
+  fieldClassName?: string
+  fieldLabelClassName?: string
+}
+
+const FieldGroup = ({
+  name,
+  groupLabel,
+  fields,
+  type = "checkbox",
+  validation = {},
+  error,
+  errorMessage,
+  groupNote,
+  register,
+  fieldGroupClassName,
+  fieldClassName,
+  fieldLabelClassName,
+}: FieldGroupProps) => {
+  // Always align two-option radio groups side by side
+  if (fields?.length === 2) {
+    fieldGroupClassName = `${fieldGroupClassName} flex`
+    fieldClassName = `${fieldClassName} flex-initial mr-4`
+  }
+  return (
+    <>
+      {groupLabel && <label className="field-label--caps">{groupLabel}</label>}
+      {groupNote && <p className="field-note mb-4">{groupNote}</p>}
+
+      <div className={`field ${error && "error"} ${fieldGroupClassName || ""}`}>
+        {fields?.map((item) => (
+          <div className={`field ${fieldClassName || ""}`} key={item.id}>
+            <input
+              aria-describedby={`${name}-error`}
+              aria-invalid={!!error || false}
+              type={type}
+              id={item.id}
+              defaultValue={item.value || item.id}
+              name={name}
+              defaultChecked={item.defaultChecked || false}
+              ref={register(validation)}
+            />
+            <label htmlFor={item.id} className={`font-semibold ${fieldLabelClassName}`}>
+              {item.label}
+            </label>
+            {item.note && <span className={"field-note font-normal"}>{item.note}</span>}
+          </div>
+        ))}
+
+        {error && errorMessage && (
+          <ErrorMessage id={`${name}-error`} error={error}>
+            {errorMessage}
+          </ErrorMessage>
+        )}
+      </div>
+    </>
+  )
+}
+
+export { FieldGroup as default, FieldGroup }

package/src/forms/Form.tsx

@@ -0,0 +1,22 @@
+import React from "react"
+
+interface FormProps {
+  children: React.ReactNode
+  id?: string
+  className?: string
+  onSubmit: () => unknown
+}
+
+const Form = ({ id, children, className, onSubmit }: FormProps) => {
+  function onKeyPress(e: React.KeyboardEvent<HTMLElement>) {
+    return e.key === "Enter" && !(e.target instanceof HTMLButtonElement) && e.preventDefault()
+  }
+
+  return (
+    <form id={id} className={className} onSubmit={onSubmit} onKeyPress={onKeyPress} noValidate>
+      {children}
+    </form>
+  )
+}
+
+export { Form as default, Form }

package/src/forms/HouseholdMemberForm.tsx

@@ -0,0 +1,41 @@
+import React from "react"
+import { t } from "../helpers/translator"
+import { Icon, IconFillColors } from "../icons/Icon"
+import { ViewItem } from "../blocks/ViewItem"
+
+export interface HouseholdMemberFormProps {
+  editMember?: (memberId: number | undefined) => void
+  editMode?: boolean
+  memberFirstName: string
+  memberId?: number
+  memberLastName: string
+  subtitle: string
+}
+
+const HouseholdMemberForm = (props: HouseholdMemberFormProps) => {
+  const editMode = props.editMode !== false && props.editMember // undefined should default to true
+
+  return (
+    <ViewItem helper={props.subtitle} className="pb-4 border-b text-left">
+      {props.memberFirstName} {props.memberLastName}
+      {editMode ? (
+        <button
+          id="edit-member"
+          className="edit-link"
+          onClick={() => props.editMember && props.editMember(props.memberId)}
+        >
+          {t("t.edit")}
+        </button>
+      ) : (
+        <Icon
+          className="ml-2 absolute top-0 right-0"
+          size="medium"
+          symbol="lock"
+          fill={IconFillColors.primary}
+        />
+      )}
+    </ViewItem>
+  )
+}
+
+export { HouseholdMemberForm as default, HouseholdMemberForm }

package/src/forms/HouseholdSizeField.tsx

@@ -0,0 +1,74 @@
+import React from "react"
+import { t } from "../helpers/translator"
+import { ErrorMessage } from "../notifications/ErrorMessage"
+import { AlertBox, AlertNotice } from "../notifications"
+import { UseFormMethods } from "react-hook-form"
+
+export interface HouseholdSizeFieldProps {
+  assistanceUrl: string
+  clearErrors: () => void
+  error: any
+  householdSize: number
+  householdSizeMax: number
+  householdSizeMin: number
+  register: UseFormMethods["register"]
+  validate: boolean
+}
+
+const HouseholdSizeField = (props: HouseholdSizeFieldProps) => {
+  const {
+    householdSize,
+    householdSizeMax,
+    householdSizeMin,
+    validate,
+    register,
+    clearErrors,
+    error,
+    assistanceUrl,
+  } = props
+
+  return (
+    <>
+      {householdSizeMax && validate && (
+        <>
+          <span className="hidden">
+            <input
+              className="invisible"
+              type="number"
+              id="householdSize"
+              name="householdSize"
+              defaultValue={householdSize}
+              ref={
+                householdSizeMax
+                  ? register({
+                      min: {
+                        value: householdSizeMin || 0,
+                        message: t("errors.householdTooSmall"),
+                      },
+                      max: {
+                        value: householdSizeMax,
+                        message: t("errors.householdTooBig"),
+                      },
+                    })
+                  : register
+              }
+            />
+          </span>
+          <ErrorMessage id={"householdsize-error"} error={error}>
+            <AlertBox type="alert" inverted onClose={() => clearErrors()}>
+              {t("application.household.dontQualifyHeader")}
+            </AlertBox>
+            <AlertNotice title={error?.message} type="alert" inverted>
+              <p className="mb-2">{t("application.household.dontQualifyInfo")}</p>
+              <p>
+                <a href={assistanceUrl}>{t("nav.getAssistance")}</a>
+              </p>
+            </AlertNotice>
+          </ErrorMessage>
+        </>
+      )}
+    </>
+  )
+}
+
+export { HouseholdSizeField as default, HouseholdSizeField }

package/src/forms/PhoneField.tsx

@@ -0,0 +1,69 @@
+import React from "react"
+import { ErrorMessage } from "../notifications/ErrorMessage"
+import { PhoneMask } from "./PhoneMask"
+import { Controller } from "react-hook-form"
+
+export const PhoneField = (props: {
+  error?: boolean
+  errorMessage?: string
+  controlClassName?: string
+  id?: string
+  name: string
+  label?: string
+  caps?: boolean
+  readerOnly?: boolean
+  placeholder?: string
+  defaultValue?: string
+  control?: any
+  disabled?: boolean
+  required?: boolean
+  mask?: (args: any) => JSX.Element
+}) => {
+  const labelClasses = ["label"]
+  if (props.caps) labelClasses.push("field-label--caps")
+  if (props.readerOnly) labelClasses.push("sr-only")
+  /**
+   * we need to handle two different use cases,
+   * 1. supplying the render function
+   * 2. allowing for "as"
+   * So shared props below with two different Controller renders
+   */
+  const controllerProps = {
+    className: "input",
+    id: props.id,
+    name: props.name,
+    placeholder: props.placeholder,
+    defaultValue: props.defaultValue || "",
+    disabled: props.disabled,
+    control: props.control,
+    rules: {
+      validate: {
+        inputTel: (v: string) => {
+          if (!props.required && !v?.length) return true
+
+          const dropdown = document.querySelector<HTMLInputElement>(
+            "#" + props.name.replace(".", "\\.")
+          )
+          if (!dropdown || dropdown.disabled) return true
+          return v?.match(/\d/g)?.length == 10 ? true : false
+        },
+      },
+    },
+  }
+
+  return (
+    <div className={"field " + (props.error ? "error" : "")}>
+      {props.label && <label className={labelClasses.join(" ")}>{props.label}</label>}
+      <div className={props.controlClassName}>
+        {props.mask ? (
+          <Controller {...controllerProps} render={props.mask} />
+        ) : (
+          <Controller {...controllerProps} as={PhoneMask} />
+        )}
+        <ErrorMessage id={`${props.id}-error`} error={props.error}>
+          {props.errorMessage}
+        </ErrorMessage>
+      </div>
+    </div>
+  )
+}

package/src/forms/PhoneMask.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import MaskedInput from "react-text-mask"
+
+export const PhoneMask = (props: any) => {
+  const { value, onChange, name, disabled, placeholder } = props
+
+  return (
+    <MaskedInput
+      mask={["(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/]}
+      className="input"
+      type="tel"
+      placeholder={placeholder || "(555) 555-5555"}
+      guide={false}
+      id={name}
+      value={value}
+      name={name}
+      disabled={disabled}
+      onChange={(e: any) => {
+        e.persist()
+        onChange(e)
+      }}
+    />
+  )
+}

package/src/forms/Select.tsx

@@ -0,0 +1,80 @@
+import React from "react"
+import { ErrorMessage } from "../notifications/ErrorMessage"
+import { FormOptions, SelectOption } from "../helpers/formOptions"
+import { UseFormMethods } from "react-hook-form"
+
+interface SelectProps {
+  error?: boolean
+  errorMessage?: string
+  controlClassName?: string
+  labelClassName?: string
+  type?: string
+  id?: string
+  name: string
+  label?: string
+  defaultValue?: string
+  placeholder?: string
+  register?: UseFormMethods["register"]
+  validation?: Record<string, unknown>
+  disabled?: boolean
+  options: (string | SelectOption)[]
+  keyPrefix?: string
+  describedBy?: string
+  inputProps?: Record<string, unknown>
+  noDefault?: boolean
+}
+
+export const Select = ({
+  error,
+  errorMessage,
+  controlClassName,
+  labelClassName,
+  id,
+  name,
+  label,
+  placeholder,
+  register,
+  validation,
+  disabled,
+  options,
+  keyPrefix,
+  describedBy,
+  inputProps,
+  noDefault = false,
+}: SelectProps) => {
+  if (noDefault === false) {
+    inputProps = inputProps ? { ...inputProps } : {}
+    inputProps.defaultValue = ""
+  }
+  return (
+    <div className={"field " + (error ? "error" : "")}>
+      <label className={labelClassName} htmlFor={id}>
+        {label}
+      </label>
+      <div className={controlClassName}>
+        <select
+          className="input"
+          id={id || name}
+          name={name}
+          aria-describedby={describedBy ? describedBy : `${id}-error`}
+          aria-invalid={!!error || false}
+          ref={register && register(validation)}
+          disabled={disabled}
+          {...inputProps}
+        >
+          {placeholder && (
+            <option value="" disabled>
+              {placeholder}
+            </option>
+          )}
+          <FormOptions options={options} keyPrefix={keyPrefix} />
+        </select>
+      </div>
+      {error && errorMessage && (
+        <ErrorMessage id={`${id}-error`} error={error}>
+          {errorMessage}
+        </ErrorMessage>
+      )}
+    </div>
+  )
+}