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

package/src/config/NavigationContext.tsx

@@ -0,0 +1,54 @@
+import React, { AriaAttributes, createContext, FunctionComponent } from "react"
+import { UrlObject } from "url"
+
+type Url = UrlObject | string
+
+export interface LinkProps {
+  href: string
+  "aria-label"?: string
+  "aria-current"?: AriaAttributes["aria-current"]
+  className?: string
+  tabIndex?: number
+}
+
+export interface GenericRouterOptions {
+  locale?: string
+}
+
+export interface GenericRouter {
+  push: (url: Url, as?: Url, options?: GenericRouterOptions) => void
+  pathname: string
+  asPath: string
+  locale?: string
+}
+
+export interface NavigationContextProps {
+  LinkComponent: FunctionComponent<LinkProps>
+  router: GenericRouter
+}
+
+export const NavigationContext = createContext<NavigationContextProps>({
+  // Replace with an official app solution
+  LinkComponent: (props) => (
+    <a
+      className={props.className}
+      href={props.href}
+      onClick={(e) => {
+        e.preventDefault()
+        alert(`You clicked: ${props.href}`)
+      }}
+      {...(props["aria-label"] ? { "aria-label": props["aria-label"] } : {})}
+      {...(props["aria-current"] ? { "aria-current": props["aria-current"] } : {})}
+    >
+      {props.children}
+    </a>
+  ),
+  router: {
+    push: () => {
+      // no-op
+    },
+    pathname: "",
+    asPath: "",
+    locale: "",
+  },
+})

package/src/config/index.ts

@@ -0,0 +1,2 @@
+export { ConfigProvider, ConfigContext } from "./ConfigContext"
+export * from "./NavigationContext"

package/src/footers/ExygyFooter.tsx

@@ -0,0 +1,12 @@
+import * as React from "react"
+
+const ExygyFooter = () => (
+  <span className="text-sm tracking-wider">
+    made with ❤️ by{" "}
+    <a href="http://exygy.com" target="_blank" aria-label="Opens in new window">
+      exygy
+    </a>
+  </span>
+)
+
+export { ExygyFooter as default, ExygyFooter }

package/src/footers/SiteFooter.scss

@@ -0,0 +1,28 @@
+footer.site-footer {
+  @apply text-gray-500;
+  @apply w-full;
+  @apply bg-gray-800;
+  @apply text-center;
+
+  img {
+    @apply inline;
+    width: 130px;
+    opacity: 0.8;
+  }
+
+  a {
+    @apply text-white;
+  }
+
+  p {
+    @apply mb-5;
+  }
+
+  & > .footer-row:first-of-type {
+    @apply pt-12;
+  }
+
+  & > .footer-row:last-of-type {
+    @apply pt-0;
+  }
+}

package/src/footers/SiteFooter.tsx

@@ -0,0 +1,10 @@
+import * as React from "react"
+import "./SiteFooter.scss"
+
+export interface FooterProps {
+  children: React.ReactNode
+}
+
+const SiteFooter = (props: FooterProps) => <footer className="site-footer">{props.children}</footer>
+
+export { SiteFooter as default, SiteFooter }

package/src/forms/CloudinaryUpload.ts

@@ -0,0 +1,50 @@
+import axios from "axios"
+
+interface CloudinaryUploadProps {
+  file: File
+  onUploadProgress: (progress: number) => void
+  cloudName: string
+  uploadPreset: string
+  tag?: string
+  signature?: string
+  apiKey?: string
+  timestamp?: number
+}
+
+export const CloudinaryUpload = async ({
+  file,
+  onUploadProgress,
+  cloudName,
+  uploadPreset,
+  signature,
+  apiKey,
+  timestamp,
+  tag = "browser_upload",
+}: CloudinaryUploadProps) => {
+  const url = `https://api.cloudinary.com/v1_1/${cloudName}/upload`
+  const data = new FormData()
+  data.append("upload_preset", uploadPreset)
+  data.append("tags", tag)
+  data.append("file", file)
+  if (signature && timestamp && apiKey) {
+    data.append("signature", signature)
+    data.append("timestamp", `${timestamp}`)
+    data.append("api_key", apiKey)
+  }
+
+  if (!cloudName || cloudName == "" || !uploadPreset || uploadPreset == "") {
+    const err = "Please supply a cloud name and upload preset for Cloudinary"
+    alert(err)
+    throw err
+  }
+
+  const response = await axios.request({
+    method: "post",
+    url: url,
+    data: data,
+    onUploadProgress: (p) => {
+      onUploadProgress(parseInt(((p.loaded / p.total) * 100).toFixed(0), 10))
+    },
+  })
+  return response
+}

package/src/forms/DOBField.tsx

@@ -0,0 +1,132 @@
+import React from "react"
+import { t } from "../helpers/translator"
+import { Field } from "./Field"
+import moment from "moment"
+import { UseFormMethods, FieldError, DeepMap } from "react-hook-form"
+
+export type DOBFieldValues = {
+  birthDay: string
+  birthMonth: string
+  birthYear: string
+}
+
+export interface DOBFieldProps {
+  error?: DeepMap<DOBFieldValues, FieldError>
+  errorMessage?: string
+  label: React.ReactNode
+  register: UseFormMethods["register"]
+  watch: UseFormMethods["watch"]
+  defaultDOB?: DOBFieldValues
+  validateAge18?: boolean
+  name?: string
+  id?: string
+  required?: boolean
+  disabled?: boolean
+  readerOnly?: boolean
+}
+
+const DOBField = (props: DOBFieldProps) => {
+  const { defaultDOB, error, register, watch, validateAge18, name, id, errorMessage } = props
+
+  const getFieldName = (baseName: string) => {
+    // Append overall date field name to individual date field name
+    return [name, baseName].filter((item) => item).join(".")
+  }
+
+  const birthDay = watch(getFieldName("birthDay"))
+  const birthMonth = watch(getFieldName("birthMonth"))
+
+  const validateAge = (value: string) => {
+    return (
+      parseInt(value) > 1900 &&
+      moment(`${birthMonth}/${birthDay}/${value}`, "MM/DD/YYYY") < moment().subtract(18, "years")
+    )
+  }
+
+  const labelClasses = ["field-label--caps"]
+  if (props.readerOnly) labelClasses.push("sr-only")
+
+  return (
+    <fieldset id={id}>
+      <legend className={labelClasses.join(" ")}>{props.label}</legend>
+
+      <div className="field-group--date">
+        <Field
+          name={getFieldName("birthMonth")}
+          label={t("t.month")}
+          disabled={props.disabled}
+          readerOnly={true}
+          placeholder="MM"
+          defaultValue={defaultDOB?.birthMonth ? defaultDOB.birthMonth : ""}
+          error={error?.birthMonth !== undefined}
+          validation={{
+            required: props.required,
+            validate: {
+              monthRange: (value: string) => {
+                if (!props.required && !value?.length) return true
+
+                return parseInt(value) > 0 && parseInt(value) <= 12
+              },
+            },
+          }}
+          inputProps={{ maxLength: 2 }}
+          register={register}
+        />
+        <Field
+          name={getFieldName("birthDay")}
+          label={t("t.day")}
+          disabled={props.disabled}
+          readerOnly={true}
+          placeholder="DD"
+          defaultValue={defaultDOB?.birthDay ? defaultDOB.birthDay : ""}
+          error={error?.birthDay !== undefined}
+          validation={{
+            required: props.required,
+            validate: {
+              dayRange: (value: string) => {
+                if (!props.required && !value?.length) return true
+
+                return parseInt(value) > 0 && parseInt(value) <= 31
+              },
+            },
+          }}
+          inputProps={{ maxLength: 2 }}
+          register={register}
+        />
+        <Field
+          name={getFieldName("birthYear")}
+          label={t("t.year")}
+          disabled={props.disabled}
+          readerOnly={true}
+          placeholder="YYYY"
+          defaultValue={defaultDOB?.birthYear ? defaultDOB.birthYear : ""}
+          error={error?.birthYear !== undefined}
+          validation={{
+            required: props.required,
+            validate: {
+              yearRange: (value: string) => {
+                if (props.required && value && parseInt(value) < 1900) return false
+                if (props.required && value && parseInt(value) > moment().year() + 10) return false
+                if (!props.required && !value?.length) return true
+                if (value?.length && validateAge18) return validateAge(value)
+                return true
+              },
+            },
+          }}
+          inputProps={{ maxLength: 4 }}
+          register={register}
+        />
+      </div>
+
+      {(error?.birthMonth || error?.birthDay || error?.birthYear) && (
+        <div className="field error">
+          <span id={`${id}-error`} className="error-message">
+            {errorMessage ? errorMessage : t("errors.dateOfBirthError")}
+          </span>
+        </div>
+      )}
+    </fieldset>
+  )
+}
+
+export { DOBField as default, DOBField }

package/src/forms/DateField.tsx

@@ -0,0 +1,120 @@
+import React from "react"
+import { t } from "../helpers/translator"
+import { Field } from "./Field"
+import moment from "moment"
+import { UseFormMethods, FieldError, DeepMap } from "react-hook-form"
+
+export type DateFieldValues = {
+  day: string
+  month: string
+  year: string
+}
+
+export interface DateFieldProps {
+  defaultDate?: DateFieldValues
+  disabled?: boolean
+  error?: DeepMap<DateFieldValues, FieldError>
+  errorMessage?: string
+  id?: string
+  label: React.ReactNode
+  labelClass?: string
+  name?: string
+  note?: string
+  readerOnly?: boolean
+  register: UseFormMethods["register"]
+  required?: boolean
+  watch: UseFormMethods["watch"]
+}
+
+const DateField = (props: DateFieldProps) => {
+  const { defaultDate, error, register, name, id, errorMessage } = props
+
+  const getFieldName = (baseName: string) => {
+    // Append overall date field name to individual date field name
+    return [name, baseName].filter((item) => item).join(".")
+  }
+
+  const labelClasses = ["field-label", props.labelClass]
+  if (props.readerOnly) labelClasses.push("sr-only")
+
+  return (
+    <fieldset id={id}>
+      <legend className={labelClasses.join(" ")}>{props.label}</legend>
+      <div className="field-group--date">
+        <Field
+          name={getFieldName("month")}
+          label={t("t.month")}
+          disabled={props.disabled}
+          readerOnly={true}
+          placeholder="MM"
+          defaultValue={defaultDate?.month ?? ""}
+          error={error?.month !== undefined}
+          validation={{
+            required: props.required,
+            validate: {
+              monthRange: (value: string) => {
+                if (!props.required && !value?.length) return true
+                return parseInt(value) > 0 && parseInt(value) <= 12
+              },
+            },
+          }}
+          inputProps={{ maxLength: 2 }}
+          register={register}
+        />
+        <Field
+          name={getFieldName("day")}
+          label={t("t.day")}
+          disabled={props.disabled}
+          readerOnly={true}
+          placeholder="DD"
+          defaultValue={defaultDate?.day ?? ""}
+          error={error?.day !== undefined}
+          validation={{
+            required: props.required,
+            validate: {
+              dayRange: (value: string) => {
+                if (!props.required && !value?.length) return true
+                return parseInt(value) > 0 && parseInt(value) <= 31
+              },
+            },
+          }}
+          inputProps={{ maxLength: 2 }}
+          register={register}
+        />
+        <Field
+          name={getFieldName("year")}
+          label={t("t.year")}
+          disabled={props.disabled}
+          readerOnly={true}
+          placeholder="YYYY"
+          defaultValue={defaultDate?.year ?? ""}
+          error={error?.year !== undefined}
+          validation={{
+            required: props.required,
+            validate: {
+              yearRange: (value: string) => {
+                if (props.required && value && parseInt(value) < 1900) return false
+                if (props.required && value && parseInt(value) > moment().year() + 10) return false
+                if (!props.required && !value?.length) return true
+                return true
+              },
+            },
+          }}
+          inputProps={{ maxLength: 4 }}
+          register={register}
+        />
+      </div>
+      {props.note && <p className="field-note mb-2 mt-4">{props.note}</p>}
+
+      {(error?.month || error?.day || error?.year) && (
+        <div className="field error">
+          <span id={`${id}-error`} className="error-message">
+            {errorMessage ? errorMessage : t("errors.dateError")}
+          </span>
+        </div>
+      )}
+    </fieldset>
+  )
+}
+
+export { DateField as default, DateField }

package/src/forms/Dropzone.scss

@@ -0,0 +1,17 @@
+.dropzone {
+  @apply border-2;
+  @apply border-gray-600;
+  @apply border-dashed;
+  @apply text-center;
+  padding: 2.5rem;
+  max-width: 32rem;
+  cursor: pointer;
+
+  &.is-active {
+    @apply bg-accent-cool-light;
+  }
+}
+
+.dropzone__progress {
+  max-width: 250px;
+}

package/src/forms/Dropzone.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from "react"
+import { useDropzone } from "react-dropzone"
+import { t } from "../helpers/translator"
+import "./Dropzone.scss"
+
+interface DropzoneProps {
+  uploader: (file: File) => void
+  id: string
+  label: string
+  helptext?: string
+  accept?: string | string[]
+  progress?: number
+  className?: string
+}
+
+const Dropzone = (props: DropzoneProps) => {
+  const { uploader } = props
+  const classNames = ["field"]
+  if (props.className) classNames.push(props.className)
+
+  const onDrop = useCallback(
+    (acceptedFiles) => {
+      acceptedFiles.forEach((file: File) => uploader(file))
+    },
+    [uploader]
+  )
+  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+    onDrop,
+    accept: props.accept,
+    maxFiles: 1,
+  })
+
+  const dropzoneClasses = ["dropzone", "control"]
+  if (isDragActive) dropzoneClasses.push("is-active")
+
+  // Three states:
+  // * File dropzone by default
+  // * Progress > 0 and < 100 shows a progress bar
+  // * Progress 100 doesn't show progress bar or dropzone
+  return (
+    <div className={classNames.join(" ")}>
+      <label htmlFor={props.id} className="label">
+        {props.label}
+      </label>
+      {props.helptext && <p className="view-item__label mt-2 mb-4">{props.helptext}</p>}
+      {props.progress && props.progress === 100 ? (
+        <></>
+      ) : props.progress && props.progress > 0 ? (
+        <progress className="dropzone__progress" max="100" value={props.progress}></progress>
+      ) : (
+        <div className={dropzoneClasses.join(" ")} {...getRootProps()}>
+          <input id={props.id} {...getInputProps()} />
+          {isDragActive ? (
+            <p>{t("t.dropFilesHere")}</p>
+          ) : (
+            <p>
+              {t("t.dragFilesHere")} {t("t.or")}{" "}
+              <u className="text-primary">{t("t.chooseFromFolder").toLowerCase()}</u>
+            </p>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export { Dropzone as default, Dropzone }