@bloom-housing/ui-components 7.1.0 → 7.2.0

package/src/sections/GridSection.stories.tsx

@@ -0,0 +1,337 @@
+import React from "react"
+import { useForm } from "react-hook-form"
+import { MinimalTable } from "../tables/MinimalTable"
+import { ViewItem } from "../blocks/ViewItem"
+import { GridSection, GridCell } from "./GridSection"
+import { Field } from "../forms/Field"
+import { Button } from "../actions/Button"
+import { AppearanceStyleType } from "../global/AppearanceTypes"
+import { mockData, mockHeaders } from "../tables/StandardTable.stories"
+
+export default {
+  title: "Sections/Grid Section",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const DefaultThreeColumns = () => (
+  <GridSection title="Section Title" subtitle="Subsection Title">
+    <GridCell>
+      <ViewItem label="First Name" children="Lisa" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Middle Name" children="S" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Last Name" children="Jones" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Date of Birth" children="01/01/1985" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Email" children="lisa@gmail.com" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Phone" children="111-222-3333" helper="Cell" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Second Phone" children="111-222-3333" helper="Work" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Perferred Contact" children="Phone" />
+    </GridCell>
+  </GridSection>
+)
+
+export const TwoColumns = () => (
+  <GridSection title="Section Title" columns={2}>
+    <GridCell>
+      <ViewItem label="First Name" children="Lisa" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Middle Name" children="S" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Last Name" children="Jones" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Date of Birth" children="01/01/1985" />
+    </GridCell>
+  </GridSection>
+)
+
+export const FourColumnsEdit = () => (
+  <GridSection
+    title="Very Long Section Title That Wraps on Mobile"
+    subtitle="Subsection Title"
+    columns={4}
+    tinted={true}
+    inset={true}
+  >
+    <GridCell>
+      <ViewItem label="First Name" children="Lisa" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Middle Name" children="S" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Last Name" children="Jones" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Date of Birth" children="01/01/1985" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Email" children="lisa@gmail.com" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Phone" children="111-222-3333" helper="Cell" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Second Phone" children="111-222-3333" helper="Work" />
+    </GridCell>
+
+    <GridCell>
+      <ViewItem label="Perferred Contact" children="Phone" />
+    </GridCell>
+  </GridSection>
+)
+
+export const FourColumnsFields = () => {
+  const { register } = useForm()
+
+  return (
+    <GridSection title="Section Title" columns={4}>
+      <Field label="Alpha" placeholder="Enter text" name="label1" register={register} />
+
+      <Field label="Beta" placeholder="Enter text" name="label2" register={register} />
+
+      <Field label="Gamma" placeholder="Enter text" name="label3" register={register} />
+
+      <Field label="Delta" placeholder="Enter text" name="label4" register={register} />
+
+      <Field label="Epsilon" placeholder="Enter text" name="label5" register={register} />
+
+      <Field label="Zeta" placeholder="Enter text" name="label6" register={register} />
+
+      <Field label="Eta" placeholder="Enter text" name="label7" register={register} />
+
+      <Field label="Theta" placeholder="Enter text" name="label8" register={register} />
+    </GridSection>
+  )
+}
+
+export const Address = () => (
+  <GridSection title="Section Title" tinted={true} inset={true} grid={false} className="gap-y-4">
+    <GridSection subtitle="Residence Address" columns={4}>
+      <GridCell span={3}>
+        <ViewItem label="Street Address" children="112 Springfield St." />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Apt Unit #" children="1" />
+      </GridCell>
+
+      <GridCell span={2}>
+        <ViewItem label="City" children="Oakland" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="State" children="CA" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Zip" children="94577" />
+      </GridCell>
+    </GridSection>
+
+    <GridSection subtitle="Work Address" columns={4}>
+      <GridCell span={3}>
+        <ViewItem label="Street Address" children="112 Springfield St." />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Apt Unit #" children="1" />
+      </GridCell>
+
+      <GridCell span={2}>
+        <ViewItem label="City" children="Oakland" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="State" children="CA" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Zip" children="94577" />
+      </GridCell>
+    </GridSection>
+  </GridSection>
+)
+
+export const AddressFields = () => {
+  const { register } = useForm()
+
+  return (
+    <GridSection title="Section Title" grid={false} className="mt-8">
+      <GridSection title="My Group" columns={6}>
+        <GridCell span={4}>
+          <Field
+            label="Street Address"
+            placeholder="Enter text"
+            name="label1"
+            register={register}
+          />
+        </GridCell>
+
+        <GridCell span={2}>
+          <Field label="Address 2" placeholder="Enter text" name="label2" register={register} />
+        </GridCell>
+
+        <GridCell span={2}>
+          <Field label="City" placeholder="Enter text" name="label3" register={register} />
+        </GridCell>
+
+        <Field label="State" placeholder="Enter text" name="label4" register={register} />
+
+        <Field label="Zip" placeholder="Enter text" name="label5" register={register} />
+      </GridSection>
+    </GridSection>
+  )
+}
+
+export const GridSectionSingleColumn = () => (
+  <GridSection tinted={true} grid={false} inset={true}>
+    <GridSection subtitle="My Group" columns={1} className="md:gap-y-2">
+      <GridCell>
+        <ViewItem label="First Name" children="Lisa" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Middle Name" children="S" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Last Name" children="Jones" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Date of Birth" children="01/01/1985" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Email" children="lisa@gmail.com" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Phone" children="111-222-3333" helper="Cell" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Second Phone" children="111-222-3333" helper="Work" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Preferred Contact" children="Phone" />
+      </GridCell>
+    </GridSection>
+  </GridSection>
+)
+
+export const GridSectionSingleColumnWarn = () => (
+  <GridSection grid={false}>
+    <ViewItem label="Application Number" children="APP-0001002002" />
+
+    <GridSection grid={false} tinted={true}>
+      <div className="my-4 p-4">
+        <fieldset>
+          <legend className="field-note mb-4 text-gray-750">
+            Confirm this application is valid:
+          </legend>
+          <div className="field-group--inline">
+            <div className="field ">
+              <input type="radio" id="testvalidappkeep" name="testvalidapp" value="keep" />
+              <label className="font-semibold" htmlFor="testvalidappkeep">
+                Keep
+              </label>
+            </div>
+            <div className="field ">
+              <input type="radio" id="testvalidappremove" name="testvalidapp" value="remove" />
+              <label className="font-semibold" htmlFor="testvalidappremove">
+                Remove
+              </label>
+            </div>
+          </div>
+        </fieldset>
+      </div>
+    </GridSection>
+
+    <GridSection subtitle="My Group" columns={1} inset={true} tinted={true} className="md:gap-y-4">
+      <GridCell>
+        <ViewItem label="First Name" children="Lisa" flagged={true} />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Middle Name" children="S" flagged={true} />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Last Name" children="Jones" flagged={true} />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Date of Birth" children="01/01/1985" flagged={true} />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Email" children="lisa@gmail.com" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Phone" children="111-222-3333" helper="Cell" />
+      </GridCell>
+
+      <GridCell>
+        <ViewItem label="Second Phone" children="111-222-3333" helper="Work" />
+      </GridCell>
+
+      <ViewItem label="Preferred Contact" children="Phone" />
+    </GridSection>
+  </GridSection>
+)
+
+export const GridSectionTable = () => (
+  <GridSection title="Section Title" grid={false} tinted={true} inset={true}>
+    <MinimalTable headers={mockHeaders} data={mockData} />
+  </GridSection>
+)
+
+export const ButtonGrid = () => (
+  <GridSection columns={2} tightSpacing={true}>
+    <GridCell>
+      <Button fullWidth={true}>I'm a Button!</Button>
+    </GridCell>
+    <GridCell>
+      <Button fullWidth={true}>Another Button</Button>
+    </GridCell>
+    <GridCell span={2}>
+      <Button styleType={AppearanceStyleType.primary} fullWidth={true}>
+        I'm a Button!
+      </Button>
+    </GridCell>
+  </GridSection>
+)

package/src/sections/InfoCardGrid.stories.tsx

@@ -0,0 +1,55 @@
+import React from "react"
+
+import { InfoCard } from "../blocks/InfoCard"
+import { InfoCardGrid } from "./InfoCardGrid"
+import { ExpandableText } from "../actions/ExpandableText"
+
+export default {
+  title: "Sections/Info Card Grid",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+}
+
+export const ThreeCards = () => (
+  <InfoCardGrid
+    title="Rentals"
+    subtitle="Other rental housing funded by the City, as well as lists developed each month by community nonprofit agencies."
+  >
+    <InfoCard
+      title="My Card"
+      externalHref="http://google.com"
+      className="is-normal-primary-lighter"
+    >
+      {`
+Paragraph content
+
+----
+
+More content
+      `}
+    </InfoCard>
+    <InfoCard
+      title="My Card"
+      externalHref="http://google.com"
+      className="is-normal-primary-lighter"
+    >
+      {`
+#### Header 4
+
+* A list
+* of items
+      `}
+    </InfoCard>
+
+    <InfoCard
+      title="My Card"
+      externalHref="http://google.com"
+      className="is-normal-primary-lighter"
+    >
+      <ExpandableText buttonClassName="ml-4" strings={{ readMore: "More", readLess: "Less" }}>
+        {`
+Text within _another_ component…
+      `}
+      </ExpandableText>
+    </InfoCard>
+  </InfoCardGrid>
+)

package/src/sections/ResponsiveContentList.stories.tsx

@@ -0,0 +1,38 @@
+import * as React from "react"
+
+import {
+  ResponsiveContentList,
+  ResponsiveContentItem,
+  ResponsiveContentItemHeader,
+  ResponsiveContentItemBody,
+} from "./ResponsiveContentList"
+
+export default {
+  title: "Sections/Responsive Content List",
+}
+
+export const withContentItems = () => (
+  <ResponsiveContentList>
+    <ResponsiveContentItem>
+      <ResponsiveContentItemHeader>
+        <h3 className="md:text-black font-sans uppercase md:normal-case md:font-serif md:text-2xl">
+          Item 1 Header
+        </h3>
+      </ResponsiveContentItemHeader>
+      <ResponsiveContentItemBody>
+        <p>Item 1 Content</p>
+      </ResponsiveContentItemBody>
+    </ResponsiveContentItem>
+
+    <ResponsiveContentItem>
+      <ResponsiveContentItemHeader>
+        <h3 className="md:text-black font-sans uppercase md:normal-case md:font-serif md:text-2xl">
+          Item 2 Header
+        </h3>
+      </ResponsiveContentItemHeader>
+      <ResponsiveContentItemBody>
+        <p>Item 2 Content</p>
+      </ResponsiveContentItemBody>
+    </ResponsiveContentItem>
+  </ResponsiveContentList>
+)

package/src/tables/AgPagination.tsx

@@ -1,19 +1,19 @@
-import React from "react"
-import { Button, t } from "@bloom-housing/ui-components"
+import React from "react";
+import { Button, t } from "../..";
 
 type AgPaginationProps = {
-  totalItems: number
-  totalPages: number
-  currentPage: number
-  itemsPerPage: number
-  quantityLabel?: string
-  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
-  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>
-  onPageChange?: (page: number) => void
-  onPerPageChange?: (size: number) => void
-}
+  totalItems: number;
+  totalPages: number;
+  currentPage: number;
+  itemsPerPage: number;
+  quantityLabel?: string;
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>;
+  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>;
+  onPageChange?: (page: number) => void;
+  onPerPageChange?: (size: number) => void;
+};
 
-const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100]
+const AG_PER_PAGE_OPTIONS = [8, 25, 50, 100];
 
 const AgPagination = ({
   totalItems,
@@ -27,19 +27,19 @@ const AgPagination = ({
   onPerPageChange,
 }: AgPaginationProps) => {
   const onNextClick = () => {
-    setCurrentPage(currentPage + 1)
-    onPageChange && onPageChange(currentPage)
-  }
+    setCurrentPage(currentPage + 1);
+    onPageChange && onPageChange(currentPage);
+  };
 
   const onPrevClick = () => {
-    setCurrentPage(currentPage - 1)
-    onPageChange && onPageChange(currentPage)
-  }
+    setCurrentPage(currentPage - 1);
+    onPageChange && onPageChange(currentPage);
+  };
 
   const onRowLimitChange = (size: string) => {
-    setItemsPerPage(parseInt(size))
-    onPerPageChange && onPerPageChange(itemsPerPage)
-  }
+    setItemsPerPage(parseInt(size));
+    onPerPageChange && onPerPageChange(itemsPerPage);
+  };
 
   return (
     <div className="data-pager flex flex-col md:flex-row">
@@ -58,7 +58,9 @@ const AgPagination = ({
           <span className="field-label" id="lbTotalPages">
             {totalItems}
           </span>
-          {quantityLabel && <span className="field-label">{quantityLabel}</span>}
+          {quantityLabel && (
+            <span className="field-label">{quantityLabel}</span>
+          )}
         </div>
 
         <div className="flex mt-5 md:mt-0 md:items-center">
@@ -97,12 +99,12 @@ const AgPagination = ({
               {Array(totalPages)
                 .fill(totalPages)
                 .map((_, i) => {
-                  const value = i + 1
+                  const value = i + 1;
                   return (
                     <option key={value} value={value}>
                       {value}
                     </option>
-                  )
+                  );
                 })}
             </select>
           </div>
@@ -131,7 +133,7 @@ const AgPagination = ({
         </Button>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS }
+export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS };

package/src/tables/AgTable.stories.tsx

@@ -0,0 +1,75 @@
+import React from "react"
+
+import { AgTable, useAgTable } from "./AgTable"
+
+const agTableMockColumns = [
+  {
+    headerName: "Name",
+    field: "name",
+  },
+  {
+    headerName: "Value",
+    field: "value",
+  },
+]
+
+const agTableMockData = Array.from({ length: 10 }).map((_, index) => ({
+  name: `${index + 1} row`,
+  value: `${index + 1}`,
+}))
+
+const getTableMockData = (page: number, perPage: number, search: string) => {
+  // in story works by name only
+  if (search) {
+    return agTableMockData.filter((item) => item.name.includes(search))
+  }
+
+  if (page === 1) return agTableMockData.slice(0, perPage)
+  if (page === 2) return agTableMockData.slice(perPage, agTableMockData.length)
+
+  return agTableMockData
+}
+
+export default {
+  title: "Tables/AgTable",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  component: AgTable,
+}
+
+export const Default = () => {
+  const tableOptions = useAgTable()
+  const tableItems = getTableMockData(
+    tableOptions.pagination.currentPage,
+    tableOptions.pagination.itemsPerPage,
+    tableOptions.filter.filterValue
+  )
+
+  return (
+    <AgTable
+      id="test-table"
+      pagination={{
+        perPage: tableOptions.pagination.itemsPerPage,
+        setPerPage: tableOptions.pagination.setItemsPerPage,
+        currentPage: tableOptions.pagination.currentPage,
+        setCurrentPage: tableOptions.pagination.setCurrentPage,
+      }}
+      config={{
+        columns: agTableMockColumns,
+        totalItemsLabel: "Total items",
+      }}
+      data={{
+        items: tableItems,
+        loading: false,
+        totalItems: agTableMockData.length,
+        totalPages: Math.ceil(agTableMockData.length / tableOptions.pagination.itemsPerPage),
+      }}
+      search={{
+        setSearch: tableOptions.filter.setFilterValue,
+      }}
+      sort={{
+        setSort: tableOptions.sort.setSortOptions,
+      }}
+      headerContent={<div className="flex-row">right content</div>}
+    />
+  )
+}

package/src/tables/CategoryTable.stories.tsx

@@ -0,0 +1,78 @@
+import React from "react"
+
+import { CategoryTable } from "./CategoryTable"
+import { TableHeaders } from "./StandardTable"
+
+export default {
+  title: "Tables/CategoryTable",
+  decorators: [(storyFn: any) => <div style={{ padding: "1rem" }}>{storyFn()}</div>],
+  component: CategoryTable,
+}
+
+const responsiveTableRows = [
+  {
+    units: { cellText: "Studio", cellSubText: "23 available" },
+    income: { cellText: "Up to $6,854", cellSubText: "per month" },
+    rent: { cellText: "30%", cellSubText: "income" },
+  },
+  {
+    units: { cellText: "1 BR", cellSubText: "3 available" },
+    income: { cellText: "$2,194 to $6,854", cellSubText: "per month" },
+    rent: { cellText: "$1,295", cellSubText: "income" },
+  },
+]
+
+const responsiveTableHeaders: TableHeaders = {
+  units: { name: "t.unitType" },
+  income: { name: "t.income" },
+  rent: { name: "t.rent" },
+}
+
+const longerRows = [
+  {
+    units: { cellText: "Studio", cellSubText: "Waitlist (Listahan ng mga Naghihintay)" },
+    income: { cellText: "$3,638 hanggang $6,216", cellSubText: "kada buwan" },
+    rent: { cellText: "$1,819", cellSubText: " kada buwan" },
+  },
+  {
+    units: { cellText: "Studio", cellSubText: "Waitlist (Listahan ng mga Naghihintay)" },
+    income: { cellText: "$3,638 hanggang $6,216", cellSubText: "kada buwan" },
+    rent: { cellText: "$1,819", cellSubText: " kada buwan" },
+  },
+]
+
+const longerHeaders: TableHeaders = {
+  units: { name: "MGA UNIT" },
+  income: { name: "HANAY NG KITA (INCOME RANGE)" },
+  rent: { name: "UPA" },
+}
+
+export const Basic = () => (
+  <CategoryTable
+    categoryData={[
+      {
+        header: "Header 1",
+        tableData: { stackedData: responsiveTableRows, headers: responsiveTableHeaders },
+      },
+      {
+        header: "Header 2",
+        tableData: { stackedData: responsiveTableRows, headers: responsiveTableHeaders },
+      },
+    ]}
+  />
+)
+
+export const LongerStrings = () => (
+  <CategoryTable
+    categoryData={[
+      {
+        header: "Header 1 but it's a long string",
+        tableData: { stackedData: longerRows, headers: longerHeaders },
+      },
+      {
+        header: "Header 2 but it's a long string",
+        tableData: { stackedData: longerRows, headers: longerHeaders },
+      },
+    ]}
+  />
+)