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

package/src/forms/Textarea.scss

@@ -0,0 +1,40 @@
+@import "../global/mixins.scss";
+
+.textarea {
+  @apply border;
+  @apply border-gray-500;
+  @apply p-2;
+  @apply text-gray-900;
+  @apply bg-gray-200;
+  font-size: 1rem;
+}
+
+.textarea-resize-off {
+  resize: none;
+}
+
+.textarea-disabled {
+  @apply bg-gray-400;
+}
+
+.textarea-error {
+  @apply border;
+  @apply border-alert;
+}
+
+.textarea-error-message {
+  @apply text-xs;
+  @apply text-alert;
+  @apply block;
+}
+
+.textarea-label {
+  @apply block;
+  @apply pb-2;
+  @apply text-tiny;
+  @apply text-gray-800;
+}
+
+.textarea-label-error {
+  @apply text-alert;
+}

package/src/forms/Textarea.tsx

@@ -0,0 +1,64 @@
+import * as React from "react"
+import "./Textarea.scss"
+import { t } from "../helpers/translator"
+import { UseFormMethods } from "react-hook-form"
+
+type WrapOptions = "soft" | "hard"
+
+export interface TextareaProps {
+  cols?: number
+  defaultValue?: string
+  disabled?: boolean
+  errorMessage?: string
+  fullWidth?: boolean
+  id?: string
+  label: string
+  maxLength?: number
+  name: string
+  note?: string
+  placeholder?: string
+  register?: UseFormMethods["register"]
+  resize?: boolean
+  rows?: number
+  wrap?: WrapOptions
+  readerOnly?: boolean
+  inputProps?: Record<string, unknown>
+}
+
+export const Textarea = (props: TextareaProps) => {
+  const textareaClassnames = ["textarea"]
+  if (props.disabled) textareaClassnames.push("textarea-disabled")
+  if (props.errorMessage) textareaClassnames.push("textarea-error")
+  if (props.resize === false) textareaClassnames.push("textarea-resize-off")
+  if (props.fullWidth) textareaClassnames.push("w-full")
+  const labelClassnames = ["textarea-label"]
+  if (props.errorMessage) labelClassnames.push("textarea-label-error")
+  if (props.readerOnly) labelClassnames.push("sr-only")
+
+  const inputProps = { ...props.inputProps }
+
+  return (
+    <div>
+      <label className={labelClassnames.join(" ")} htmlFor={props.id ?? props.name}>
+        {props.label}
+      </label>
+      <textarea
+        className={textareaClassnames.join(" ")}
+        cols={props.cols ?? 40}
+        disabled={props.disabled}
+        defaultValue={props.defaultValue}
+        id={props.id ?? props.name}
+        maxLength={props.maxLength ?? 150}
+        name={props.name}
+        placeholder={props.placeholder ?? t("t.description")}
+        ref={props.register}
+        rows={props.rows ?? 4}
+        wrap={props.wrap ?? "soft"}
+        title={props.label}
+        {...inputProps}
+      />
+      {props.note && <p className="field-note font-normal mb-2">{props.note}</p>}
+      {props.errorMessage && <span className="textarea-error-message">{props.errorMessage}</span>}
+    </div>
+  )
+}

package/src/forms/TimeField.tsx

@@ -0,0 +1,176 @@
+import React, { useState, useEffect } from "react"
+import moment from "moment"
+import { t } from "../helpers/translator"
+import { ErrorMessage } from "../notifications/ErrorMessage"
+import { Field } from "./Field"
+import { Select } from "../forms/Select"
+import { UseFormMethods } from "react-hook-form"
+
+export type TimeFieldPeriod = "am" | "pm"
+
+export type TimeFieldValues = {
+  hours: string
+  minutes: string
+  seconds: string
+  period: TimeFieldPeriod
+}
+
+export type TimeFieldProps = {
+  defaultValues?: TimeFieldValues
+  disabled?: boolean
+  error?: boolean
+  id?: string
+  label: string
+  labelClass?: string
+  name?: string
+  readerOnly?: boolean
+  register: UseFormMethods["register"]
+  required?: boolean
+  watch: UseFormMethods["watch"]
+  seconds?: boolean
+}
+
+export const formatDateToTimeField = (date: Date) => {
+  const dateObj = moment(date)
+
+  return {
+    hours: dateObj.format("hh"),
+    minutes: dateObj.format("mm"),
+    seconds: dateObj.format("ss"),
+    period: new Date(date).getHours() >= 12 ? "pm" : "am",
+  }
+}
+
+const TimeField = ({
+  required = false,
+  error,
+  register,
+  watch,
+  name,
+  id,
+  label,
+  labelClass,
+  readerOnly,
+  seconds,
+  defaultValues,
+  disabled,
+}: TimeFieldProps) => {
+  const fieldName = (baseName: string) => {
+    return [name, baseName].filter((item) => item).join(".")
+  }
+
+  // it prevents partial fill, all fields should be filled or nothing
+  const [innerRequiredRule, setInnerRequiredRule] = useState(false)
+
+  const hoursField = watch(fieldName("hours"))
+  const minutesField = watch(fieldName("minutes"))
+  const secondsField = watch(fieldName("seconds"))
+
+  useEffect(() => {
+    const someFieldsFilled = hoursField || minutesField || secondsField
+    setInnerRequiredRule(someFieldsFilled)
+  }, [hoursField, minutesField, secondsField])
+
+  const labelClasses = ["field-label", labelClass]
+  if (readerOnly) labelClasses.push("sr-only")
+
+  return (
+    <fieldset id={id}>
+      <legend className={labelClasses.join(" ")}>{label}</legend>
+      <div className="field-group--date">
+        <Field
+          name={fieldName("hours")}
+          label={t("t.hour")}
+          defaultValue={defaultValues?.hours ?? ""}
+          readerOnly={true}
+          placeholder="HH"
+          error={error}
+          validation={{
+            required: required || innerRequiredRule,
+            validate: {
+              hourRange: (value: string) => {
+                if (!required && !value?.length) return true
+
+                return parseInt(value) > 0 && parseInt(value) <= 12
+              },
+            },
+          }}
+          inputProps={{ maxLength: 2 }}
+          register={register}
+          describedBy={`${id}-error`}
+          disabled={disabled}
+        />
+
+        <Field
+          name={fieldName("minutes")}
+          label={t("t.minutes")}
+          defaultValue={defaultValues?.minutes ?? ""}
+          readerOnly={true}
+          placeholder="MM"
+          error={error}
+          validation={{
+            required: required || innerRequiredRule,
+            validate: {
+              minutesRange: (value: string) => {
+                if (!required && !value?.length) return true
+
+                return parseInt(value) >= 0 && parseInt(value) <= 59
+              },
+            },
+          }}
+          inputProps={{ maxLength: 2 }}
+          register={register}
+          describedBy={`${id}-error`}
+          disabled={disabled}
+        />
+
+        {seconds && (
+          <Field
+            label={t("t.seconds")}
+            defaultValue={defaultValues?.seconds ?? ""}
+            name={fieldName("seconds")}
+            readerOnly={true}
+            placeholder="SS"
+            error={error}
+            validation={{
+              required: required || innerRequiredRule,
+              validate: {
+                secondsRange: (value: string) => {
+                  if (!required && !value?.length) return true
+
+                  return parseInt(value) >= 0 && parseInt(value) <= 59
+                },
+              },
+            }}
+            inputProps={{ maxLength: 2 }}
+            register={register}
+            describedBy={`${id}-error`}
+            disabled={disabled}
+          />
+        )}
+
+        <Select
+          name={fieldName("period")}
+          id={fieldName("period")}
+          labelClassName="sr-only"
+          label={t("t.time")}
+          register={register}
+          options={["am", "pm"]}
+          keyPrefix="t"
+          defaultValue={defaultValues?.period || ""}
+          error={error}
+          describedBy={`${id}-error`}
+          disabled={disabled}
+        />
+      </div>
+
+      <div id={`${id}-error`} className="field error">
+        <ErrorMessage id={"time-field-error"} error={error}>
+          {t("errors.timeError")}
+        </ErrorMessage>
+      </div>
+    </fieldset>
+  )
+}
+
+export { TimeField as default, TimeField }

package/src/global/AppearanceTypes.ts

@@ -0,0 +1,46 @@
+export enum AppearanceStyleType {
+  primary = "is-primary",
+  secondary = "is-secondary",
+  success = "is-success",
+  alert = "is-alert",
+  warning = "is-warning",
+  info = "is-info",
+  accentCool = "is-accent-cool",
+  accentWarm = "is-accent-warm",
+  closed = "is-closed",
+}
+
+export enum AppearanceSizeType {
+  small = "is-small",
+  normal = "is-normal",
+  big = "is-big",
+}
+
+export enum AppearanceBorderType {
+  borderless = "is-borderless",
+  normal = "",
+  outlined = "is-outlined",
+}
+
+export enum AppearanceShadeType {
+  light = "is-light-mode",
+  dark = "is-dark-mode",
+}
+
+export interface AppearanceProps {
+  styleType?: AppearanceStyleType
+  border?: AppearanceBorderType
+  size?: AppearanceSizeType
+  shade?: AppearanceShadeType
+  normalCase?: boolean
+}
+
+export const classNamesForAppearanceTypes = (props: AppearanceProps) => {
+  const classNames = []
+  if (props.styleType) classNames.push(props.styleType)
+  if (props.border) classNames.push(props.border)
+  if (props.size) classNames.push(props.size)
+  if (props.shade) classNames.push(props.shade)
+  if (props.normalCase) classNames.push("is-normal-case")
+  return classNames
+}

package/src/global/ApplicationStatusType.ts

@@ -0,0 +1,6 @@
+export enum ApplicationStatusType {
+  Open,
+  Closed,
+  PreLottery,
+  PostLottery,
+}

package/src/global/accordion.scss

@@ -0,0 +1,4 @@
+.accordion__panel {
+  @apply p-4;
+  @apply border-b;
+}

package/src/global/blocks.scss

@@ -0,0 +1,137 @@
+// Box
+.box,
+.block {
+  @apply text-sm;
+  @apply text-gray-700;
+  @apply rounded;
+}
+
+details.disclosure {
+  @apply relative;
+  min-height: 3em;
+
+  &[open] {
+    @apply mb-16;
+  }
+
+  & > summary {
+    @apply text-primary;
+    @apply absolute;
+    @apply list-none;
+    @apply outline-none;
+    @apply cursor-pointer;
+    @apply bottom-0;
+    @apply pr-1;
+    @apply pb-2;
+    @include has-toggle;
+  }
+
+  &[open] > summary {
+    bottom: -3em;
+
+    &:after {
+      transform: rotate(0deg) translateY(2px);
+    }
+  }
+
+  & > summary::-webkit-details-marker {
+    @apply hidden;
+  }
+
+  p {
+    @apply my-4;
+  }
+}
+
+.listing-detail-panel {
+  @screen md {
+    @apply ml-16;
+    @apply p-8;
+    @apply pt-0;
+    @apply pl-0;
+  }
+}
+
+.aside-block {
+  @apply border-gray-400;
+  @apply p-5;
+  @apply pb-2;
+  @apply -mx-4;
+
+  &.is-tinted {
+    @apply bg-primary-lighter;
+    @apply border-t;
+  }
+  &:not(.is-tinted) + &.is-tinted {
+    @apply mt-3;
+  }
+
+  &.is-tinted,
+  &:last-of-type {
+    @apply pb-5;
+  }
+
+  @screen md {
+    @apply border-b;
+    @apply pb-5;
+    @apply mx-0;
+
+    &.is-tinted {
+      @apply mt-0;
+    }
+
+    &:not(.is-tinted) + &.is-tinted {
+      @apply border-t-0;
+      @apply mt-0;
+    }
+  }
+}
+
+.aside-block__divider {
+  @apply -mx-5;
+  @apply mt-6;
+  @apply mb-2;
+  @apply border-t;
+  @apply border-gray-400;
+  @apply text-center;
+}
+
+.aside-block__conjunction {
+  @apply relative;
+  @apply -top;
+  @apply px-1;
+  @apply uppercase;
+  @apply text-primary-dark;
+  @apply font-semibold;
+}
+
+.notice-block {
+  @apply flex;
+  @apply flex-row;
+  @apply flex-wrap;
+  @apply max-w-5xl;
+  @apply m-auto;
+  @apply mt-5;
+  @apply mb-12;
+  @apply text-center;
+  @apply p-4;
+  @apply bg-primary-lighter;
+}
+
+$shadow-left-slight: -3px 0px 3px -1px rgba(0, 0, 0, 0.1);
+
+.shadow-left {
+  box-shadow: $shadow-left-slight;
+}
+.md\:shadow-left {
+  @screen md {
+    box-shadow: $shadow-left-slight;
+  }
+}
+
+// temp global style until status bar component
+.status-bar__status {
+  .tag.is-pill {
+    @apply block;
+  }
+}