playbook_ui 13.16.0.pre.alpha.PLAY11642006 → 13.16.0.pre.alpha.PLAY12002127

data/app/pb_kits/playbook/pb_advanced_table/README.md

@@ -0,0 +1,288 @@
+# Advanced Table Kit Data Structure
+
+The AdvancedTable Kit's `tableData` prop consumes the data that will render the table and as such has a specific structure. It must be an array of objects, where the key/value pairs will become the values rendered within each column. If children are present, they must also take the form of an array of objects. The kit will automatically render `children` as subRows.
+
+Here is the data structure being used within the kits doc examples:
+
+```
+const MOCK_DATA = [
+  {
+    year: "2021",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "20",
+    scheduledMeetings: "10",
+    attendanceRate: "51%",
+    completedClasses: "3",
+    classCompletionRate: "33%",
+    graduatedStudents: "19",
+    children: [
+      {
+        year: "2021",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2021",
+                quarter: "Q1",
+                month: "January",
+                day: "20",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2021",
+            quarter: "Q1",
+            month: "February",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "February",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2022",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "25",
+    scheduledMeetings: "17",
+    attendanceRate: "75%",
+    completedClasses: "5",
+    classCompletionRate: "45%",
+    graduatedStudents: "32",
+    children: [
+      {
+        year: "2022",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "January",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "15",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2022",
+                quarter: "Q1",
+                month: "January",
+                day: "25",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2022",
+            quarter: "Q1",
+            month: "May",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2011",
+                quarter: "Q1",
+                month: "May",
+                day: "2",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "10",
+    scheduledMeetings: "15",
+    attendanceRate: "65%",
+    completedClasses: "4",
+    classCompletionRate: "49%",
+    graduatedStudents: "29",
+    children: [
+      {
+        year: "2023",
+        quarter: "Q1",
+        month: null,
+        day: null,
+        newEnrollments: "2",
+        scheduledMeetings: "35",
+        attendanceRate: "32%",
+        completedClasses: "15",
+        classCompletionRate: "52%",
+        graduatedStudents: "36",
+        children: [
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "March",
+            day: null,
+            newEnrollments: "16",
+            scheduledMeetings: "20",
+            attendanceRate: "11%",
+            completedClasses: "13",
+            classCompletionRate: "47%",
+            graduatedStudents: "28",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "10",
+                newEnrollments: "34",
+                scheduledMeetings: "28",
+                attendanceRate: "97%",
+                completedClasses: "20",
+                classCompletionRate: "15%",
+                graduatedStudents: "17",
+              },
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "March",
+                day: "11",
+                newEnrollments: "43",
+                scheduledMeetings: "23",
+                attendanceRate: "66%",
+                completedClasses: "26",
+                classCompletionRate: "47%",
+                graduatedStudents: "9",
+              },
+            ],
+          },
+          {
+            year: "2023",
+            quarter: "Q1",
+            month: "April",
+            day: null,
+            newEnrollments: "20",
+            scheduledMeetings: "41",
+            attendanceRate: "95%",
+            completedClasses: "26",
+            classCompletionRate: "83%",
+            graduatedStudents: "43",
+            children: [
+              {
+                year: "2023",
+                quarter: "Q1",
+                month: "April",
+                day: "15",
+                newEnrollments: "19",
+                scheduledMeetings: "35",
+                attendanceRate: "69%",
+                completedClasses: "8",
+                classCompletionRate: "75%",
+                graduatedStudents: "23",
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+
+```

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx

@@ -0,0 +1,95 @@
+import React, { useContext } from "react"
+import LoadingInline from "../../pb_loading_inline/_loading_inline"
+import { flexRender, Row } from "@tanstack/react-table"
+
+import { SubRowHeaderRow } from "../Components/SubRowHeaderRow"
+import { LoadingCell } from "../Components/LoadingCell"
+import { renderCollapsibleTrail } from "../Components/CollapsibleTrail"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { isChrome } from "../Utilities/BrowserCheck"
+import { DataType } from "../Utilities/types"
+
+type TableBodyProps = {
+  collapsibleTrail?: boolean
+  subRowHeaders?: string[]
+}
+
+export const TableBody = ({
+  collapsibleTrail = true,
+  subRowHeaders,
+}: TableBodyProps) => {
+  const {
+    enableToggleExpansion,
+    handleExpandOrCollapse,
+    loading,
+    table,
+  } = useContext(AdvancedTableContext)
+  return (
+    <>
+      <tbody>
+        {table.getRowModel().rows.map((row: Row<DataType>) => {
+          const isExpandable = row.getIsExpanded()
+          const isFirstChildofSubrow = row.depth > 0 && row.index === 0
+          const rowHasNoChildren = !row.original.children?.length
+          const numberOfColumns = table.getAllFlatColumns().length
+
+          return (
+            <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
+              {isFirstChildofSubrow && subRowHeaders && (
+                <SubRowHeaderRow
+                    collapsibleTrail={collapsibleTrail}
+                    enableToggleExpansion={enableToggleExpansion}
+                    onClick={handleExpandOrCollapse}
+                    row={row}
+                    subRowHeaders={subRowHeaders}
+                    table={table}
+                />
+              )}
+
+              <tr
+                  className={`${isExpandable ? "bg-silver" : "bg-white"} ${
+                    row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
+                  }`}
+                  id={`${row.index}-${row.id}-${row.depth}-row`}
+              >
+                {row.getVisibleCells().map((cell, i) => (
+                  <td
+                      align="right"
+                      className={`${cell.id}-cell position_relative ${
+                      isChrome() ? "chrome-styles" : ""
+                      }`}
+                      key={`${cell.id}-data`}
+                  >
+                    {collapsibleTrail &&
+                      i === 0 &&
+                      row.depth > 0 &&
+                      renderCollapsibleTrail(row.depth)}
+                    <span id={`${cell.id}-span`}>
+                      {loading ? (
+                        <LoadingCell />
+                      ) : (
+                        flexRender(
+                          cell.column.columnDef.cell,
+                          cell.getContext()
+                        )
+                      )}
+                    </span>
+                  </td>
+                ))}
+              </tr>
+
+              {/* Display LoadingInline if Row Data is querying and there are no children already */}
+              {isExpandable && rowHasNoChildren && row.depth === 0 ? (
+                <tr key={`${row.id}-row`}>
+                  <td colSpan={numberOfColumns}>
+                    <LoadingInline />
+                  </td>
+                </tr>
+              ) : null}
+            </React.Fragment>
+          )
+        })}
+      </tbody>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx

@@ -0,0 +1,51 @@
+import React, { useContext } from "react"
+import { HeaderGroup } from "@tanstack/react-table"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { TableHeaderCell } from "../Components/TableHeaderCell"
+import { DataType } from "../Utilities/types"
+
+type TableHeaderProps = {
+  children?: React.ReactNode | React.ReactNode[]
+  enableSorting?: boolean
+  headerId?: string
+  sortIcon?: string | string[]
+}
+
+export const TableHeader = ({
+  children,
+  enableSorting = false,
+  headerId,
+  sortIcon = ["arrow-up-short-wide", "arrow-down-short-wide"],
+}: TableHeaderProps) => {
+  const {
+    enableToggleExpansion,
+    handleExpandOrCollapse,
+    loading,
+    table,
+  } = useContext(AdvancedTableContext)
+
+  return (
+    <>
+      <thead>
+        {/* Get the header groups (only one in this example) */}
+        {table.getHeaderGroups().map((headerGroup: HeaderGroup<DataType>) => (
+          <tr key={`${headerGroup.id}-headerGroup`}>
+            {headerGroup.headers.map(header => (
+              <TableHeaderCell
+                  enableSorting={enableSorting}
+                  enableToggleExpansion={enableToggleExpansion}
+                  handleExpandOrCollapse={handleExpandOrCollapse}
+                  header={header}
+                  headerChildren={children}
+                  headerId={headerId}
+                  key={`${header.id}-header`}
+                  loading={loading}
+                  sortIcon={sortIcon}
+              />
+            ))}
+          </tr>
+        ))}
+      </thead>
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx

@@ -0,0 +1,5 @@
+//Checking browser. Using this to add classname and css for browser specific issues with table borders
+export const isChrome = () => {
+  const userAgent = navigator.userAgent.toLowerCase()
+  return userAgent.includes("chrome") && !userAgent.includes("edg")
+}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx

@@ -0,0 +1,63 @@
+import { RowModel } from "@tanstack/react-table"
+import { DataType, ExpandedStateObject } from "./types"
+
+const filterExpandableRows = (expandedState: Record<string, boolean>) => {
+  for (const expandedRow in expandedState) {
+    if (expandedState[expandedRow] === false) {
+      delete expandedState[expandedRow]
+    }
+  }
+  return expandedState
+}
+
+export const updateExpandAndCollapseState = (
+  tableRows: RowModel<DataType>,
+  expanded: Record<string, boolean>,
+  targetParent: string
+) => {
+  const updateExpandedRows: Record<string, boolean> = {}
+  const rows = tableRows.flatRows
+  // Variable checks if all rows in a section have same expansion state or not
+  let isExpansionConsistent = true
+  const areRowsExpanded = new Set<boolean>()
+
+  // Update isExpansionConsistent variable
+  for (const row of rows) {
+    if (
+      row.getCanExpand() &&
+      (targetParent === undefined
+        ? row.depth === 0
+        : targetParent === row.parentId)
+    ) {
+      areRowsExpanded.add(row.getIsExpanded())
+      if (areRowsExpanded.size > 1) {
+        isExpansionConsistent = false
+        break
+      }
+    }
+  }
+
+  // The if statement runs only for row depth 0, the else statement for the rest
+  if (targetParent === undefined) {
+    rows.forEach(row => {
+      if (row.depth === 0) {
+        updateExpandedRows[row.id] = !isExpansionConsistent
+          ? true
+          : !row.getIsExpanded()
+      }
+    })
+  } else {
+    for (const row of rows) {
+      if (row.getCanExpand() && targetParent === row.parentId) {
+        updateExpandedRows[row.id] = !isExpansionConsistent
+          ? true
+          : !row.getIsExpanded()
+      }
+    }
+  }
+
+  return filterExpandableRows({
+    ...(expanded as ExpandedStateObject),
+    ...updateExpandedRows,
+  })
+}

data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx

@@ -0,0 +1,8 @@
+// Logic for handling icons related props to allow for string OR array of strings
+export const displayIcon = (icon: string | string[]) => {
+    if (typeof icon === "string") {
+      return [icon, icon]
+    }
+    return icon
+  }
+  

data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts

@@ -0,0 +1,8 @@
+import { ExpandedState } from "@tanstack/react-table"
+
+export type ExpandedStateObject = Extract<
+  ExpandedState,
+  Record<string, boolean>
+>
+
+export type DataType = { [key: string]: any }

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -0,0 +1,98 @@
+@import "../tokens/colors";
+@import "../tokens/opacity";
+@import "../tokens/border_radius";
+@import "../tokens/spacing";
+@import "./scss_partials/loading";
+@import "./scss_partials/pseudo_states";
+
+.pb_advanced_table {
+  $border-color: 1px solid $border_light !important;
+
+  [id$="-span"] {
+    word-wrap: normal;
+  }
+
+  .bg-silver {
+    background-color: lighten($silver, $opacity_7);
+  }
+
+  .bg-white {
+    background-color: $white;
+  }
+
+  .full-width {
+    width: 100%;
+  }
+
+  .table-header-cells:first-child {
+    min-width: 180px;
+  }
+
+  .table-header-cells-active:first-child {
+    color: $primary !important;
+  }
+
+  // Icons
+  .button-icon {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: none;
+    border: none;
+  }
+
+  .gray-icon {
+    color: $text_lt_light;
+    @extend %primary-color-pseudo;
+  }
+
+  .sort-button-icon {
+    @extend .button-icon;
+    padding: 2px;
+  }
+
+  .toggle-all-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    padding: 2px 0;
+
+    &:focus-visible {
+      border-radius: $border_rad_lighter;
+    }
+  }
+
+  .expand-toggle-icon {
+    @extend .button-icon;
+    @extend %primary-color-pseudo;
+    position: relative;
+    bottom: 1px;
+    width: 18px;
+    height: 18px;
+    border-radius: 50%;
+  }
+
+  .header-sort-button {
+    @extend %primary-color-pseudo;
+    width: 100%;
+
+    &:focus-visible {
+      border-radius: $border_rad_heavier;
+    }
+  }
+
+  // Vertical separator
+  .table-header-cells:first-child,
+  td:first-child {
+    box-shadow: 1px 0px 0px 0px #e4e8f0 !important;
+  }
+
+  .chrome-styles:first-child {
+    border-right: $border-color;
+  }
+
+  .table-card {
+    .chrome-styles:first-child {
+      border-right: $transparent !important;
+    }
+  }
+}