@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/forms/MultiSelectField.stories.tsx

@@ -0,0 +1,150 @@
+import React, { useState } from "react"
+import { BADGES } from "../../.storybook/constants"
+import MultiSelectField, {
+  MultiSelectDataSourceParams,
+  MultiSelectFieldItem,
+} from "./MultiSelectField"
+import { useForm } from "react-hook-form"
+import MultiSelectFieldDocumentation from "./MultiSelectField.docs.mdx"
+
+export default {
+  title: "Forms/MultiSelect Field 🚩",
+  id: "forms/multi-select-field",
+  decorators: [
+    (storyFn: () => JSX.Element) => (
+      <div style={{ padding: "30px", maxWidth: "600px" }}>{storyFn()}</div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      page: MultiSelectFieldDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+const later = (delay: number) => new Promise((resolve) => setTimeout(resolve, delay))
+
+const dataProvider: MultiSelectDataSourceParams<Promise<MultiSelectFieldItem[]>> = async (
+  query,
+  _render,
+  isFirstCall
+) => {
+  if (isFirstCall && query !== "undefined") {
+    return query.split(",").map((item) => {
+      return {
+        value: "item1",
+        label: "Item 1",
+      }
+    })
+  }
+
+  await later(100)
+
+  let customTypeahead =
+    query.toString().length > 0
+      ? [
+          {
+            value: "customitem",
+            label: `You typed: ${query}`,
+          },
+        ]
+      : []
+
+  return [
+    {
+      value: "item1",
+      label: "Item 1",
+    },
+    {
+      value: "item2",
+      label: "Another Item 2",
+    },
+    ...customTypeahead,
+  ]
+}
+
+export const standard = () => {
+  const [formOutput, setFormOutput] = useState("")
+  const { register, handleSubmit, setValue, getValues } = useForm()
+  const onSubmit = (data: Record<string, any>) => setFormOutput(JSON.stringify(data))
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <MultiSelectField
+        dataSource={dataProvider}
+        label="Select one or more items"
+        placeholder="Type to search"
+        id="the-value"
+        name="thevalue"
+        register={register}
+        getValues={getValues}
+        setValue={setValue}
+      />
+      <button type="submit" className="button">
+        View Output
+      </button>
+      <output style={{ display: "block", marginBlockStart: "2rem" }}>{formOutput}</output>
+    </form>
+  )
+}
+
+export const withPreviousSelections = () => {
+  const [formOutput, setFormOutput] = useState("")
+  const { register, handleSubmit, getValues, setValue } = useForm({
+    defaultValues: { nested: { thevalue: "item1" } },
+  })
+  const onSubmit = (data: Record<string, any>) => setFormOutput(JSON.stringify(data))
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <MultiSelectField
+        dataSource={dataProvider}
+        label="Select one or more items"
+        placeholder="Type to search"
+        id="the-value"
+        name="nested.thevalue"
+        register={register}
+        getValues={getValues}
+        setValue={setValue}
+      />
+      <button type="submit" className="button">
+        View Output
+      </button>
+      <output style={{ display: "block", marginBlockStart: "2rem" }}>{formOutput}</output>
+    </form>
+  )
+}
+
+const staticData: MultiSelectFieldItem[] = []
+for (let i = 0; i < 100; i++) {
+  staticData.push({
+    value: `item${i + 1}`,
+    label: `Item ${i + 1} in a long list`,
+  })
+}
+
+export const withStaticData = () => {
+  const [formOutput, setFormOutput] = useState("")
+  const { register, handleSubmit, getValues, setValue } = useForm()
+  const onSubmit = (data: Record<string, any>) => setFormOutput(JSON.stringify(data))
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <MultiSelectField
+        dataSource={staticData}
+        label="Select one or more items"
+        placeholder="Type to search"
+        id="the-value"
+        name="selectedOptions"
+        register={register}
+        getValues={getValues}
+        setValue={setValue}
+      />
+      <button type="submit" className="button">
+        View Output
+      </button>
+      <output style={{ display: "block", marginBlockStart: "2rem" }}>{formOutput}</output>
+    </form>
+  )
+}

package/src/forms/Textarea.stories.tsx

@@ -0,0 +1,29 @@
+import * as React from "react"
+import { Textarea } from "./Textarea"
+
+export default {
+  title: "Forms/Textarea",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const defaultTextarea = () => <Textarea name={"textarea-test"} label={"Label"} />
+
+export const maxLengthCustom = () => (
+  <Textarea name={"textarea-test"} maxLength={10} label={"Label"} />
+)
+
+export const noResize = () => <Textarea name={"textarea-test"} resize={false} label={"Label"} />
+
+export const customSize = () => (
+  <Textarea name={"textarea-test"} resize={false} cols={15} rows={10} label={"Label"} />
+)
+
+export const disabled = () => <Textarea name={"textarea-test"} disabled={true} label={"Label"} />
+
+export const errorMessage = () => (
+  <Textarea name={"textarea-test"} errorMessage={"Error message"} label={"Label"} />
+)
+
+export const placeholder = () => (
+  <Textarea name={"textarea-test"} placeholder={"Custom placeholder"} label={"Label"} />
+)

package/src/forms/TimeField.stories.tsx

@@ -0,0 +1,24 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { TimeField } from "./TimeField"
+
+export default {
+  title: "Forms/Time Field",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const Default = () => {
+  const { register, watch, errors } = useForm({ mode: "onChange" })
+
+  return (
+    <TimeField
+      id="time"
+      label="Time"
+      name="time"
+      required={true}
+      register={register}
+      watch={watch}
+      error={!!errors?.time}
+    />
+  )
+}

package/src/forms/checkbox.stories.tsx

@@ -0,0 +1,13 @@
+import * as React from "react"
+
+export default {
+  title: "Forms/Checkbox",
+  decorators: [(storyFn: () => JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
+}
+
+export const standard = () => (
+  <div className="field">
+    <input type="checkbox" id="remember" name="remember" />
+    <label htmlFor="remember">Remember me</label>
+  </div>
+)

package/src/forms/radio.stories.tsx

@@ -0,0 +1,19 @@
+import * as React from "react"
+
+export default {
+  title: "Forms/Radio",
+  decorators: [(storyFn: () => JSX.Element) => <div style={{ padding: "30px" }}>{storyFn()}</div>],
+}
+
+export const standard = () => (
+  <>
+    <div className="field field--inline">
+      <input type="radio" id="radio1" name="radio" />
+      <label htmlFor="radio1">Radio Button 1</label>
+    </div>
+    <div className="field field--inline">
+      <input type="radio" id="radio2" name="radio" />
+      <label htmlFor="radio2">Radio Button 2</label>
+    </div>
+  </>
+)

package/src/headers/HeadingGroup.stories.tsx

@@ -0,0 +1,49 @@
+import React from "react"
+import { BADGES } from "../../.storybook/constants"
+import HeadingGroup from "./HeadingGroup"
+import HeadingGroupDocumentation from "./HeadingGroup.docs.mdx"
+
+export default {
+  title: "Headers/Heading Group 🚩",
+  id: "headers/heading-group",
+  parameters: {
+    docs: {
+      page: HeadingGroupDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const withContent = () => (
+  <div style={{ maxWidth: "700px" }}>
+    <HeadingGroup
+      headingPriority={2}
+      heading="Household Maximum Income"
+      subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+    />
+  </div>
+)
+
+export const customStyled = () => {
+  const customStyles = `
+    .custom-heading-group {
+      --heading-margin: 2rem;
+      --heading-color: maroon;
+      --subheading-color: forestgreen;
+      --subheading-margin: var(--heading-margin);
+    }
+  `
+  return (
+    <div>
+      <HeadingGroup
+        className="custom-heading-group"
+        headingPriority={2}
+        heading="Household Maximum Income"
+        subheading="To determine your eligibility for this property, choose your household size (include yourself in that calculation)."
+      />
+      <hr className="mb-8" />
+      <p>More content here.</p>
+      <style>{customStyles}</style>
+    </div>
+  )
+}

package/src/headers/Hero.stories.tsx

@@ -0,0 +1,52 @@
+import * as React from "react"
+
+import { Hero } from "./Hero"
+
+export default {
+  title: "Headers/Hero",
+}
+
+export const withListings = () => (
+  <Hero title={<>Say Hello to Your Hero</>} buttonTitle="I am a Button" buttonLink="/listings" />
+)
+
+export const withNoListings = () => (
+  <Hero
+    title={<>Say Hello to Your Hero</>}
+    buttonTitle="I am a Button"
+    buttonLink="/listings"
+    allApplicationsClosed={true}
+  />
+)
+
+export const withBackground = () => (
+  <Hero
+    title={<>Say Hello to Your Hero</>}
+    buttonTitle="Rental Listings"
+    buttonLink="/listings"
+    backgroundImage="/images/banner.png"
+  />
+)
+
+export const withSecondaryButton = () => (
+  <Hero
+    title={<>Say Hello to Your Hero</>}
+    buttonTitle="Rent"
+    buttonLink="/listings"
+    secondaryButtonTitle="Buy"
+    secondaryButtonLink="/listings/for-sale"
+    backgroundImage="/images/banner.png"
+  />
+)
+
+export const withExtraLargeTitleAndSecondaryButton = () => (
+  <Hero
+    backgroundImage="/images/banner.png"
+    buttonLink="/listings"
+    buttonTitle="Rent"
+    extraLargeTitle={true}
+    secondaryButtonLink="/listings/for-sale"
+    secondaryButtonTitle="Buy"
+    title={"Say Hello to Your Hero"}
+  />
+)

package/src/headers/PageHeader.stories.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+import { BADGES } from "../../.storybook/constants"
+import { PageHeader } from "./PageHeader"
+import PageHeaderDocumentation from "./PageHeader.docs.mdx"
+
+export default {
+  title: "Headers/Page Header 🚩",
+  id: "headers/page-header",
+  parameters: {
+    docs: {
+      page: PageHeaderDocumentation,
+    },
+    badges: [BADGES.GEN2],
+  },
+}
+
+export const withTextContent = () => <PageHeader title="Hello World" />
+
+export const withSubtitle = () => <PageHeader title="Hello World" subtitle="Here is a subtitle" />
+
+export const inversed = () => (
+  <PageHeader title="Hello Inverse World" subtitle="Here is a subtitle" inverse />
+)
+
+export const withContent = () => (
+  <PageHeader title="Hello World" subtitle="Here is a subtitle">
+    Here is some content
+  </PageHeader>
+)
+
+export const styleOverrides = () => {
+  const cssVarsOverride = `
+    .page-header-overrides .page-header {
+      --background-color: darkgreen;
+      --border-color: red;
+      --text-color: yellow;
+      --title-font-size: 6rem;
+    }
+  `
+
+  return (
+    <>
+      <div className="page-header-overrides">
+        <PageHeader title="Big Title" subtitle="Here is a subtitle">
+          Here is some contenta
+        </PageHeader>
+        <style>{cssVarsOverride}</style>
+      </div>
+
+      <p className="mt-12 font-semibold">Customized using the following variable overrides:</p>
+
+      <pre>{cssVarsOverride.replace(".page-header-overrides ", "")}</pre>
+    </>
+  )
+}