playbook_ui 13.16.0.pre.alpha.PLAY12002127 → 13.16.0.pre.alpha.fonttest1972

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

@@ -1,288 +0,0 @@
-# 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

@@ -1,95 +0,0 @@
-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

@@ -1,51 +0,0 @@
-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

@@ -1,5 +0,0 @@
-//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

@@ -1,63 +0,0 @@
-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

@@ -1,8 +0,0 @@
-// 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

@@ -1,8 +0,0 @@
-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

@@ -1,98 +0,0 @@
-@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;
-    }
-  }
-}