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

package/src/page_components/listing/ListingDetailHeader.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import { Icon } from "../../icons/Icon"
+
+export interface ListingDetailHeaderProps {
+  imageAlt: string
+  imageSrc: string
+  subtitle: string
+  title: string
+  children?: React.ReactNode
+  hideHeader?: boolean
+  desktopClass?: string
+}
+
+const ListingDetailHeader = (props: ListingDetailHeaderProps) => (
+  <header className={props.hideHeader ? "detail-header md:hidden" : "detail-header"}>
+    <img alt={props.imageAlt} className="detail-header__image " src={props.imageSrc} />
+    <hgroup className="detail-header__hgroup">
+      <h2 className="detail-header__title">{props.title}</h2>
+      <span className="detail-header__subtitle">{props.subtitle}</span>
+      <Icon symbol="arrowDown" size="medium" />
+    </hgroup>
+  </header>
+)
+
+export { ListingDetailHeader as default, ListingDetailHeader }

package/src/page_components/listing/ListingDetails.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import {
+  ResponsiveContentList,
+  ResponsiveContentItem,
+  ResponsiveContentItemHeader,
+  ResponsiveContentItemBody,
+} from "../../sections/ResponsiveContentList"
+import { ListingDetailHeader, ListingDetailHeaderProps } from "./ListingDetailHeader"
+
+export const ListingDetails = (props: any) => (
+  <div className="w-full md:w-2/3 md:pr-8 md:pt-8">
+    <ResponsiveContentList>{props.children}</ResponsiveContentList>
+  </div>
+)
+
+export const ListingDetailItem = (props: ListingDetailHeaderProps) => (
+  <ResponsiveContentItem desktopClass={props.desktopClass}>
+    <ResponsiveContentItemHeader>
+      <ListingDetailHeader
+        title={props.title}
+        subtitle={props.subtitle}
+        imageSrc={props.imageSrc}
+        imageAlt={props.imageAlt}
+        hideHeader={props.hideHeader}
+      />
+    </ResponsiveContentItemHeader>
+    <ResponsiveContentItemBody>{props.children}</ResponsiveContentItemBody>
+  </ResponsiveContentItem>
+)

package/src/page_components/listing/ListingMap.scss

@@ -0,0 +1,36 @@
+.pin {
+  @apply absolute;
+  width: 30px;
+  height: 30px;
+  border-radius: 50% 50% 50% 0;
+  background: #89849b;
+  transform: rotate(-45deg);
+  left: 50%;
+  top: 50%;
+  margin: -20px 0 0 -20px;
+  animation-name: bounce;
+  animation-fill-mode: both;
+  animation-duration: 1s;
+
+  &:after {
+    @apply absolute;
+    @apply rounded-full;
+    content: "";
+    width: 14px;
+    height: 14px;
+    margin: 8px 0 0 8px;
+    background: #2f2f2f;
+  }
+}
+
+.addressPopup {
+  @apply bg-white;
+  @apply p-4;
+  @apply shadow-md;
+  @apply inline-block;
+  @apply float-left;
+  @apply relative;
+  left: 15px;
+  top: 15px;
+  z-index: 1;
+}

package/src/page_components/listing/ListingMap.tsx

@@ -0,0 +1,138 @@
+import React, { useState, useCallback, useEffect } from "react"
+import "mapbox-gl/dist/mapbox-gl.css"
+import MapGL, { Marker } from "react-map-gl"
+
+import "./ListingMap.scss"
+import { MultiLineAddress, Address } from "../../helpers/address"
+
+export interface ListingMapProps {
+  address?: Address
+  listingName?: string
+  enableCustomPinPositioning?: boolean
+  setCustomMapPositionChosen?: (customMapPosition: boolean) => void
+  setLatLong?: (latLong: LatitudeLongitude) => void
+}
+
+export interface LatitudeLongitude {
+  latitude: number
+  longitude: number
+}
+
+export interface Viewport {
+  width: string | number
+  height: string | number
+  latitude?: number
+  longitude?: number
+  zoom: number
+}
+
+const isValidLatitude = (latitude: number) => {
+  return latitude >= -90 && latitude <= 90
+}
+
+const isValidLongitude = (longitude: number) => {
+  return longitude >= -180 && longitude <= 180
+}
+
+const ListingMap = (props: ListingMapProps) => {
+  const [marker, setMarker] = useState({
+    latitude: props.address?.latitude,
+    longitude: props.address?.longitude,
+  })
+
+  const [viewport, setViewport] = useState({
+    latitude: marker.latitude,
+    longitude: marker.longitude,
+    width: "100%",
+    height: 400,
+    zoom: 13,
+  } as Viewport)
+
+  const onViewportChange = (viewport: Viewport) => {
+    // width and height need to be set here to work properly with
+    // the responsive wrappers
+    const newViewport = { ...viewport }
+    newViewport.width = "100%"
+    newViewport.height = 400
+    setViewport(newViewport)
+  }
+
+  useEffect(() => {
+    onViewportChange({
+      ...viewport,
+      latitude: props.address?.latitude,
+      longitude: props.address?.longitude,
+    })
+    setMarker({
+      latitude: props.address?.latitude,
+      longitude: props.address?.longitude,
+    })
+  }, [props.address?.latitude, props.address?.longitude, props.enableCustomPinPositioning])
+
+  const onMarkerDragEnd = useCallback((event) => {
+    if (props.setLatLong) {
+      props.setLatLong({
+        latitude: event.lngLat[1],
+        longitude: event.lngLat[0],
+      })
+    }
+    if (props.setCustomMapPositionChosen) {
+      props.setCustomMapPositionChosen(true)
+    }
+    setMarker({
+      latitude: event.lngLat[1],
+      longitude: event.lngLat[0],
+    })
+  }, [])
+
+  if (
+    !props.address ||
+    !props.address.latitude ||
+    !props.address.longitude ||
+    !viewport.latitude ||
+    !viewport.longitude
+  )
+    return null
+
+  return (
+    <div className="listing-map">
+      <div className="addressPopup">
+        {props.listingName && <h3 className="text-caps-tiny">{props.listingName}</h3>}
+        <MultiLineAddress address={props.address} />
+      </div>
+      {(process.env.mapBoxToken || process.env.MAPBOX_TOKEN) && (
+        <MapGL
+          mapboxApiAccessToken={process.env.mapBoxToken || process.env.MAPBOX_TOKEN}
+          mapStyle="mapbox://styles/mapbox/streets-v11"
+          scrollZoom={false}
+          onViewportChange={onViewportChange}
+          {...viewport}
+        >
+          {marker.latitude &&
+            marker.longitude &&
+            isValidLatitude(marker.latitude) &&
+            isValidLongitude(marker.longitude) && (
+              <>
+                {props.enableCustomPinPositioning ? (
+                  <Marker
+                    latitude={marker.latitude}
+                    longitude={marker.longitude}
+                    offsetTop={-20}
+                    draggable={true}
+                    onDragEnd={onMarkerDragEnd}
+                  >
+                    <div className="pin"></div>
+                  </Marker>
+                ) : (
+                  <Marker latitude={marker.latitude} longitude={marker.longitude} offsetTop={-20}>
+                    <div className="pin"></div>
+                  </Marker>
+                )}
+              </>
+            )}
+        </MapGL>
+      )}
+    </div>
+  )
+}
+export { ListingMap as default, ListingMap }

package/src/page_components/listing/ListingsGroup.scss

@@ -0,0 +1,65 @@
+.listings-group {
+  @apply border-t;
+  @apply border-gray-450;
+  @apply mb-5;
+}
+
+.listings-group__header {
+  @apply flex;
+  @apply flex-row;
+  @apply flex-wrap;
+  @apply max-w-5xl;
+  @apply m-auto;
+  @apply mt-6;
+  @apply mb-8;
+  @apply p-3;
+}
+
+.listings-group__icon {
+  @apply hidden;
+  @apply pt-2;
+  @apply pr-5;
+
+  @screen md {
+    @apply inline-block;
+  }
+}
+
+.listings-group__header-group {
+  @apply w-full;
+  @apply flex;
+  @apply items-center;
+  @apply mb-4;
+
+  @screen md {
+    @apply w-7/12;
+    @apply mb-0;
+  }
+}
+
+.listings-group__button {
+  @apply w-full;
+  @apply flex;
+  @apply items-center;
+
+  @screen md {
+    @apply w-4/12;
+  }
+}
+
+.listings-group__title {
+  @apply uppercase;
+  @apply font-alt-sans;
+  @apply font-black;
+  @apply my-1;
+  @apply tracking-widest;
+  @apply border-b-4;
+  @apply border-gray-600;
+  @apply pb-1;
+
+  @screen md {
+    @apply px-4;
+    @apply border-b-0;
+    @apply border-l-4;
+  }
+}

package/src/page_components/listing/ListingsGroup.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react"
+import { Button } from "../../actions/Button"
+import { Icon } from "../../icons/Icon"
+import "./ListingsGroup.scss"
+
+export interface ListingsGroupProps {
+  children?: React.ReactNode
+  listingsCount: number
+  header: string
+  info?: string
+  showButtonText: string
+  hideButtonText: string
+}
+
+const ListingsGroup = (props: ListingsGroupProps) => {
+  const [showListings, setShowListings] = useState(false)
+  const toggleListings = () => setShowListings(!showListings)
+
+  let buttonText
+
+  const listingsCount = ` (${props.listingsCount})`
+  if (showListings) {
+    buttonText = props.hideButtonText + listingsCount
+  } else {
+    buttonText = props.showButtonText + listingsCount
+  }
+
+  return (
+    <div className="listings-group">
+      <div className="listings-group__header">
+        <div className="listings-group__icon">
+          <Icon size="xlarge" symbol="clock" />
+        </div>
+        <div className="listings-group__header-group">
+          <h2 className="listings-group__title">{props.header}</h2>
+          {props.info && <div className="px-4 my-2">{props.info}</div>}
+        </div>
+        <div className="listings-group__button">
+          <Button className="w-full" onClick={() => toggleListings()}>
+            {buttonText}
+          </Button>
+        </div>
+      </div>
+      {showListings && props.children}
+    </div>
+  )
+}
+
+export { ListingsGroup as default, ListingsGroup }

package/src/page_components/listing/UnitTables.tsx

@@ -0,0 +1,111 @@
+import * as React from "react"
+import { nanoid } from "nanoid"
+import { MinMax, UnitSummary, Unit } from "@bloom-housing/backend-core/types"
+
+import { StandardTable } from "../../tables/StandardTable"
+import { t } from "../../helpers/translator"
+import { numberOrdinal } from "../../helpers/numberOrdinal"
+
+const formatRange = (range: MinMax, ordinalize?: boolean) => {
+  let min: string | number = range.min
+  let max: string | number = range.max
+
+  if (ordinalize) {
+    min = numberOrdinal(min)
+    max = numberOrdinal(max)
+  }
+
+  if (min == max) {
+    return min
+  } else {
+    return `${min} - ${max}`
+  }
+}
+
+const unitsLabel = (units: Unit[]): string => {
+  const label = units.length > 1 ? t("t.units") : t("t.unit")
+  return `${units.length} ${label}`
+}
+
+interface UnitTablesProps {
+  units: Unit[]
+  unitSummaries: UnitSummary[]
+  disableAccordion?: boolean
+}
+
+const UnitTables = (props: UnitTablesProps) => {
+  const unitSummaries = props.unitSummaries || []
+
+  const unitsHeaders = {
+    number: "t.unit",
+    sqFeet: "t.area",
+    numBathrooms: "listings.bath",
+    floor: "t.floor",
+  }
+
+  const toggleTable = (event: React.MouseEvent) => {
+    if (!props.disableAccordion) {
+      event.currentTarget.parentElement?.querySelector(".unit-table")?.classList?.toggle("hidden")
+    }
+  }
+
+  const buttonClasses = ["w-full", "text-left"]
+  if (props.disableAccordion) buttonClasses.push("cursor-default")
+
+  return (
+    <>
+      {unitSummaries.map((unitSummary: UnitSummary) => {
+        const uniqKey = process.env.NODE_ENV === "test" ? "" : nanoid()
+        const units = props.units.filter(
+          (unit: Unit) => unit.unitType?.name == unitSummary.unitType.name
+        )
+        const unitsFormatted = [] as Array<Record<string, React.ReactNode>>
+        let floorSection
+        units.forEach((unit: Unit) => {
+          unitsFormatted.push({
+            number: unit.number,
+            sqFeet: (
+              <>
+                <strong>{unit.sqFeet}</strong> {t("t.sqFeet")}
+              </>
+            ),
+            numBathrooms: <strong>{unit.numBathrooms}</strong>,
+            floor: <strong>{unit.floor}</strong>,
+          })
+        })
+
+        let areaRangeSection
+        if (unitSummary.areaRange?.min || unitSummary.areaRange?.max) {
+          areaRangeSection = `, ${formatRange(unitSummary.areaRange)} ${t("t.squareFeet")}`
+        }
+
+        if (unitSummary.floorRange && unitSummary.floorRange.min) {
+          floorSection = `, ${formatRange(unitSummary.floorRange, true)} 
+              ${
+                unitSummary.floorRange.max > unitSummary.floorRange.min
+                  ? t("t.floors")
+                  : t("t.floor")
+              }`
+        }
+
+        return (
+          <div key={uniqKey} className="mb-4">
+            <button onClick={toggleTable} className={buttonClasses.join(" ")}>
+              <h3 className="toggle-header">
+                <strong>{t("listings.unitTypes." + unitSummary.unitType.name)}</strong>:&nbsp;
+                {unitsLabel(units)}
+                {areaRangeSection}
+                {floorSection}
+              </h3>
+            </button>
+            <div className="unit-table hidden">
+              <StandardTable headers={unitsHeaders} data={unitsFormatted} />
+            </div>
+          </div>
+        )
+      })}
+    </>
+  )
+}
+
+export { UnitTables as default, UnitTables }