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

package/src/sections/MarkdownSection.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+import "./MarkdownSection.scss"
+
+export interface MarkdownSectionProps {
+  fullwidth?: boolean
+  children: React.ReactNode
+}
+
+export const MarkdownSection = (props: MarkdownSectionProps) => {
+  const contentWidth = props.fullwidth ? "markdown" : "markdown max-w-2xl"
+
+  return (
+    <div className="markdown-section">
+      <div className="markdown-section__inner">
+        <article className={contentWidth}>{props.children}</article>
+      </div>
+    </div>
+  )
+}
+
+export default MarkdownSection

package/src/sections/ResponsiveContentList.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { Desktop, Mobile } from "./ResponsiveWrappers"
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemHeading,
+  AccordionItemButton,
+  AccordionItemPanel,
+} from "react-accessible-accordion"
+
+export interface ResponsiveContentProps {
+  children: React.ReactNode
+  desktopClass?: string
+}
+
+const ResponsiveContentList = (props: ResponsiveContentProps) => (
+  <>
+    <Mobile>
+      <Accordion allowZeroExpanded allowMultipleExpanded>
+        {props.children}
+      </Accordion>
+    </Mobile>
+    <Desktop>
+      <ul className="responsive-content-list">{props.children}</ul>
+    </Desktop>
+  </>
+)
+
+const ResponsiveContentItem = (props: ResponsiveContentProps) => (
+  <>
+    <Mobile>
+      <AccordionItem>{props.children}</AccordionItem>
+    </Mobile>
+    <Desktop>
+      <li className={"responsive-content-item " + (props.desktopClass ? props.desktopClass : "")}>
+        {props.children}
+      </li>
+    </Desktop>
+  </>
+)
+
+const ResponsiveContentItemHeader = (props: ResponsiveContentProps) => (
+  <>
+    <Mobile>
+      <AccordionItemHeading aria-level={2}>
+        <AccordionItemButton>{props.children}</AccordionItemButton>
+      </AccordionItemHeading>
+    </Mobile>
+    <Desktop>{props.children}</Desktop>
+  </>
+)
+
+const ResponsiveContentItemBody = (props: ResponsiveContentProps) => (
+  <>
+    <Mobile>
+      <AccordionItemPanel>{props.children}</AccordionItemPanel>
+    </Mobile>
+    <Desktop>{props.children}</Desktop>
+  </>
+)
+
+export {
+  ResponsiveContentList,
+  ResponsiveContentItem,
+  ResponsiveContentItemHeader,
+  ResponsiveContentItemBody,
+}

package/src/sections/ResponsiveWrappers.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import Media from "react-media"
+import * as tailwindConfig from "../../tailwind.config.js"
+
+export interface ResponsiveWrapperProps {
+  children: React.ReactNode
+}
+
+const mdBreakpoint = parseInt(tailwindConfig.theme.screens.md.replace("px", ""))
+
+const Desktop = (props: ResponsiveWrapperProps) => (
+  <Media render={() => props.children} query={{ minWidth: mdBreakpoint }} defaultMatches={false} />
+)
+
+const Mobile = (props: ResponsiveWrapperProps) => (
+  <Media
+    render={() => props.children}
+    query={{ maxWidth: mdBreakpoint - 1 }}
+    defaultMatches={true}
+  />
+)
+
+export { Desktop, Mobile }

package/src/tables/GroupedTable.tsx

@@ -0,0 +1,86 @@
+import * as React from "react"
+import { nanoid } from "nanoid"
+import { Cell, StandardTableProps } from "./StandardTable"
+
+export interface GroupedTableGroup {
+  header?: string | React.ReactNode
+  className?: string
+  data: Record<string, React.ReactNode>[]
+}
+
+export interface GroupedTableProps extends Omit<StandardTableProps, "data"> {
+  data: GroupedTableGroup[]
+}
+
+export const GroupedTable = (props: GroupedTableProps) => {
+  const { headers, data, cellClassName } = props
+
+  const headerLabels = Object.values(headers).map((col, index) => {
+    const uniqKey = process.env.NODE_ENV === "test" ? `header-${index}` : nanoid()
+    return <th key={uniqKey}>{col}</th>
+  })
+
+  const body: React.ReactNode[] = []
+
+  data.forEach((group: GroupedTableGroup, dataIndex) => {
+    const colSpan = Object.keys(headers).length
+
+    const groupHeader = group.header
+    const groupClassName = group.className
+    const groupData = group.data
+
+    if (groupHeader) {
+      body.push(
+        <tr key={process.env.NODE_ENV === "test" ? "data-header" : nanoid()}>
+          <Cell
+            key={process.env.NODE_ENV === "test" ? "cell-header" : nanoid()}
+            className={groupClassName}
+            colSpan={colSpan}
+          >
+            {groupHeader}
+          </Cell>
+        </tr>
+      )
+    }
+
+    groupData.forEach((row: Record<string, React.ReactNode>, groupDataIndex) => {
+      const rowKey = row["id"]
+        ? `row-${row["id"] as string}`
+        : process.env.NODE_ENV === "test"
+        ? `groupedrow-${dataIndex}-${groupDataIndex}`
+        : nanoid()
+      const cols = Object.keys(headers).map((colKey, colIndex) => {
+        const uniqKey = process.env.NODE_ENV === "test" ? `col-${colIndex}` : nanoid()
+        const header = headers[colKey]
+        const cell = row[colKey]
+        return (
+          <Cell key={uniqKey} headerLabel={header} className={cellClassName}>
+            {cell}
+          </Cell>
+        )
+      })
+
+      body.push(
+        <tr id={rowKey} key={rowKey} className={`group-${groupClassName}`}>
+          {cols}
+        </tr>
+      )
+    })
+  })
+
+  const tableClasses = ["w-full", "text-sm"]
+  if (props.responsiveCollapse) {
+    tableClasses.push("responsive-collapse")
+  }
+
+  return (
+    <div style={{ overflowX: "auto" }}>
+      <table className={tableClasses.join(" ")}>
+        <thead>
+          <tr>{headerLabels}</tr>
+        </thead>
+        <tbody>{body}</tbody>
+      </table>
+    </div>
+  )
+}

package/src/tables/MinimalTable.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { TableHeaders, StandardTable } from "./StandardTable"
+
+interface MinimalTableProps {
+  draggable?: boolean
+  setData?: (data: unknown[]) => void
+  headers: TableHeaders
+  data: Record<string, React.ReactNode>[]
+  flushLeft?: boolean
+  flushRight?: boolean
+  responsiveCollapse?: boolean
+  className?: string
+}
+
+const MinimalTable = (props: MinimalTableProps) => {
+  const tableClasses = ["td-plain", "th-plain", props.className]
+  if (props.flushLeft) tableClasses.push("is-flush-left")
+  if (props.flushRight) tableClasses.push("is-flush-right")
+  return (
+    <StandardTable
+      draggable={props.draggable}
+      setData={props.setData}
+      headers={props.headers}
+      data={props.data}
+      tableClassName={tableClasses.join(" ")}
+      cellClassName="px-5 py-3"
+      responsiveCollapse={props.responsiveCollapse}
+    />
+  )
+}
+
+export { MinimalTable as default, MinimalTable }

package/src/tables/ResponsiveTable.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import { TableHeaders, StandardTable } from "./StandardTable"
+
+interface ResponsiveTableProps {
+  headers: TableHeaders
+  data: Record<string, React.ReactNode>[]
+  className?: string
+}
+
+const ResponsiveTable = (props: ResponsiveTableProps) => {
+  const tableClasses = ["base", props.className]
+
+  return (
+    <StandardTable
+      headers={props.headers}
+      data={props.data}
+      tableClassName={tableClasses.join(" ")}
+      cellClassName="px-5 py-3"
+      responsiveCollapse
+    />
+  )
+}
+
+export { ResponsiveTable as default, ResponsiveTable }

package/src/tables/StandardTable.tsx

@@ -0,0 +1,229 @@
+import React, { useState, useEffect } from "react"
+import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd"
+import { nanoid } from "nanoid"
+import { getTranslationWithArguments } from "../helpers/getTranslationWithArguments"
+import { Icon } from "../icons/Icon"
+import { t } from "../helpers/translator"
+
+export interface TableHeadersOptions {
+  name: string
+  className: string
+}
+export interface TableHeaders {
+  [key: string]: string | TableHeadersOptions
+}
+
+export const Row = (props: { id?: string; className?: string; children: React.ReactNode }) => (
+  <tr id={props.id} className={props.className}>
+    {props.children}
+  </tr>
+)
+
+export const HeaderCell = (props: { children: React.ReactNode; className?: string }) => (
+  <th className={props.className}>{props.children}</th>
+)
+
+export const Cell = (props: {
+  headerLabel?: string | TableHeadersOptions
+  className?: string
+  colSpan?: number
+  children: React.ReactNode
+}) => (
+  <td
+    data-label={props.headerLabel instanceof Object ? props.headerLabel?.name : props.headerLabel}
+    className={props.className || "p-5"}
+    colSpan={props.colSpan}
+  >
+    {props.children}
+  </td>
+)
+
+export const TableThumbnail = (props: { children: React.ReactNode }) => {
+  return <span className="table__thumbnail">{props.children}</span>
+}
+
+export interface StandardTableProps {
+  draggable?: boolean
+  setData?: (data: unknown[]) => void
+  headers: TableHeaders
+  data: StandardTableData
+  tableClassName?: string
+  cellClassName?: string
+  responsiveCollapse?: boolean
+  translateData?: boolean
+}
+
+export type StandardTableData = Record<string, React.ReactNode>[] | undefined
+
+const headerName = (header: string | TableHeadersOptions) => {
+  if (typeof header === "string") {
+    return header
+  } else {
+    return header.name
+  }
+}
+const headerClassName = (header: string | TableHeadersOptions) => {
+  if (typeof header === "string") {
+    return ""
+  } else {
+    return header.className
+  }
+}
+
+export const StandardTable = (props: StandardTableProps) => {
+  const { headers = {}, cellClassName } = props
+
+  const [tableData, setTableData] = useState<StandardTableData>()
+
+  useEffect(() => {
+    setTableData(props.data)
+  }, [props.data])
+
+  const headerLabels = Object.values(headers)?.map((header, index) => {
+    const uniqKey = process.env.NODE_ENV === "test" ? `header-${index}` : nanoid()
+    return (
+      <HeaderCell key={uniqKey} className={headerClassName(header)}>
+        {getTranslationWithArguments(headerName(header))}
+      </HeaderCell>
+    )
+  })
+
+  useEffect(() => {
+    setTableData(props.data)
+  }, [props.data])
+
+  if (props.draggable) {
+    headerLabels.splice(
+      0,
+      0,
+      <th key={"header-draggable"} className={"table__draggable-cell pl-5"}>
+        {t("t.sort")}
+      </th>
+    )
+  }
+
+  const body = tableData?.map((row: Record<string, React.ReactNode>, dataIndex) => {
+    const rowKey = row["id"]
+      ? `row-${row["id"] as string}`
+      : process.env.NODE_ENV === "test"
+      ? `standardrow-${dataIndex}`
+      : nanoid()
+
+    const cols = Object.keys(headers)?.map((colKey, colIndex) => {
+      const uniqKey = process.env.NODE_ENV === "test" ? `standardcol-${colIndex}` : nanoid()
+      const cell = row[colKey]
+
+      const cellClass = [cellClassName, headerClassName(headers[colKey])].join(" ")
+
+      return (
+        <Cell
+          key={uniqKey}
+          headerLabel={getTranslationWithArguments(headerName(headers[colKey]))}
+          className={cellClass !== " " ? cellClass : undefined}
+        >
+          {props.translateData && typeof cell === "string"
+            ? getTranslationWithArguments(cell)
+            : cell}
+        </Cell>
+      )
+    })
+    if (props.draggable) {
+      cols.splice(
+        0,
+        0,
+        <Cell
+          key={`${dataIndex}-draggable`}
+          headerLabel={t("t.sort")}
+          className={`table__draggable-cell pl-5`}
+        >
+          <Icon symbol={"draggable"} size={"medium"} />
+        </Cell>
+      )
+    }
+    return (
+      <React.Fragment key={rowKey}>
+        {props.draggable ? (
+          <Draggable draggableId={rowKey} index={dataIndex} key={rowKey}>
+            {(provided, snapshot) => (
+              <tr
+                key={rowKey}
+                id={rowKey}
+                {...provided.draggableProps}
+                {...provided.dragHandleProps}
+                // eslint-disable-next-line @typescript-eslint/unbound-method
+                ref={provided.innerRef}
+                className={snapshot.isDragging ? "table__is-dragging" : ""}
+              >
+                {cols}
+              </tr>
+            )}
+          </Draggable>
+        ) : (
+          <tr id={rowKey} key={rowKey}>
+            {cols}
+          </tr>
+        )}
+      </React.Fragment>
+    )
+  })
+
+  const tableClasses = ["w-full", "text-sm"]
+  if (props.responsiveCollapse) {
+    tableClasses.push("responsive-collapse")
+  }
+  if (props.tableClassName) {
+    tableClasses.push(props.tableClassName)
+  }
+
+  const reorder = (
+    list: Record<string, React.ReactNode>[] | undefined,
+    startIndex: number,
+    endIndex: number
+  ) => {
+    if (!list) return
+
+    const result = Array.from(list)
+    const [removed] = result.splice(startIndex, 1)
+    result.splice(endIndex, 0, removed)
+    return result
+  }
+
+  const onDragEnd = (result: DropResult) => {
+    if (!result.destination) {
+      return
+    }
+    if (result.destination.index === result.source.index) {
+      return
+    }
+    const reorderedTableData = reorder(tableData, result.source.index, result.destination.index)
+    setTableData(reorderedTableData)
+    if (props.setData && reorderedTableData) {
+      props.setData(reorderedTableData)
+    }
+  }
+
+  return (
+    <div style={{ overflowX: "auto" }}>
+      <table className={tableClasses.join(" ")}>
+        <thead>
+          <tr>{headerLabels}</tr>
+        </thead>
+        {props.draggable ? (
+          <DragDropContext onDragEnd={onDragEnd}>
+            <Droppable droppableId="standard-table">
+              {(provided) => (
+                // eslint-disable-next-line @typescript-eslint/unbound-method
+                <tbody {...provided.droppableProps} ref={provided.innerRef}>
+                  {body}
+                  {provided.placeholder}
+                </tbody>
+              )}
+            </Droppable>
+          </DragDropContext>
+        ) : (
+          <tbody>{body}</tbody>
+        )}
+      </table>
+    </div>
+  )
+}