playbook_ui 13.15.0 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fd6f86769005f1cf4bd5400be7f925bf38d3e16560fbec5da24158c969873663
-  data.tar.gz: 5c879bd8ecc90a4e2d02adbab1d208f81098708f949e60ece5c95eb2875bd81e
+  metadata.gz: 7de4a52108e01951e999ec72a392167e7ca613eedc6b2460454cea0fb265fcf8
+  data.tar.gz: 33e05379b7d7004b6943995d1710a1b91a844942710e2c8ca62dbc6e6bbbda0c
 SHA512:
-  metadata.gz: 3d4bfff63b93a145834de3cfe80f3ecfa04f3d29ef10e7194fe2ad9149111a61efaeb70557b289db0fe499b1297e150ef0008af6f712289f45a84eaa83eab120
-  data.tar.gz: 94718a4b5a91761a32365bcb149b47c4e2aaea0a58fbc9860773117069875627018e92ea69626de9556d064fa50fde854107eee264e86bbede4d5bf0e14054da
+  metadata.gz: 4e8d2d44b46b465a9d3cf4e954d0621abfc2da9cef8b9004f1d5e7e535f37bc57b8f4d54c46e26a2a4a79721c7e36e991ba9902170740b6ffe76f27a6becf207
+  data.tar.gz: 9e2878d9346444289f740ae5f3804c871e02d7c49f6283351768e68ffbfd0f19d6215eba7ee897cdb947ca332a2d802cd40ce8d5f118ff07b176707c0a1c9add

data/app/pb_kits/playbook/_playbook.scss

@@ -1,16 +1,17 @@
+
+
+@import 'pb_advanced_table/advanced_table';
+@import 'pb_avatar/avatar';
+@import 'pb_avatar_action_button/avatar_action_button';
 @import 'pb_background/background';
+@import 'pb_badge/badge';
+@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
 @import 'pb_button_toolbar/button_toolbar';
 @import 'pb_caption/caption';
 @import 'pb_card/card';
-@import 'pb_detail/detail';
-@import 'pb_title/title';
-@import 'pb_avatar/avatar';
-@import 'pb_avatar_action_button/avatar_action_button';
-@import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_checkbox/checkbox';
 @import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
@@ -20,21 +21,22 @@
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
 @import 'pb_date_picker/date_picker';
-@import 'pb_date_time/date_time';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';
+@import 'pb_date_time/date_time';
 @import 'pb_date_time_stacked/date_time_stacked';
 @import 'pb_date_year_stacked/date_year_stacked';
+@import 'pb_detail/detail';
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';
 @import 'pb_fixed_confirmation_toast/fixed_confirmation_toast';
+@import 'pb_flex/flex';
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_flex/flex';
 @import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
@@ -55,6 +57,7 @@
 @import 'pb_map/map';
 @import 'pb_map/pb_map_button_mixin';
 @import 'pb_message/message';
+@import 'pb_multi_level_select/multi_level_select';
 @import 'pb_multiple_users/multiple_users';
 @import 'pb_multiple_users_stacked/multiple_users_stacked';
 @import 'pb_nav/nav';
@@ -85,9 +88,11 @@
 @import 'pb_text_input/text_input';
 @import 'pb_textarea/textarea';
 @import 'pb_time/time';
-@import 'pb_timeline/timeline';
 @import 'pb_time_range_inline/time_range_inline';
+@import 'pb_time_stacked/time_stacked';
+@import 'pb_timeline/timeline';
 @import 'pb_timestamp/timestamp';
+@import 'pb_title/title';
 @import 'pb_title_count/title_count';
 @import 'pb_title_detail/title_detail';
 @import 'pb_toggle/toggle';
@@ -96,7 +101,6 @@
 @import 'pb_typeahead/typeahead';
 @import 'pb_user/user';
 @import 'pb_user_badge/user_badge';
-@import 'pb_time_stacked/time_stacked';
 @import 'pb_walkthrough/walkthrough';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import './utilities/mixins';
@@ -115,5 +119,3 @@
 @import './utilities/text_align';
 @import './utilities/overflow';
 @import './utilities/truncate';
-
-@import 'pb_multi_level_select/multi_level_select';

data/app/pb_kits/playbook/index.js

@@ -4,6 +4,7 @@ import 'lazysizes/plugins/attrchange/ls.attrchange'
 import 'lazysizes'
 
 // vvv React Component JSX Imports from the React Kits vvv
+export { default as AdvancedTable} from './pb_advanced_table/_advanced_table'
 export { default as Avatar } from './pb_avatar/_avatar'
 export { default as AvatarActionButton } from './pb_avatar_action_button/_avatar_action_button'
 export { default as Background } from './pb_background/_background'
@@ -59,8 +60,8 @@ export { default as LineGraph } from './pb_line_graph/_line_graph'
 export { default as List } from './pb_list/_list'
 export { default as ListItem } from './pb_list/_list_item'
 export { default as LoadingInline } from './pb_loading_inline/_loading_inline'
-export { default as Map} from './pb_map/_map'
 export { default as MapCustomButton } from './pb_map/_map_custom_button'
+export { default as Map} from './pb_map/_map'
 export { default as Message } from './pb_message/_message'
 export { default as MultiLevelSelect} from './pb_multi_level_select/_multi_level_select'
 export { default as MultipleUsers } from './pb_multiple_users/_multiple_users'

data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+
+//CollapsibleTrail component
+const CollapsibleTrail = ({ leftOffset }: { leftOffset: number }) => {
+  const style: { [key: string]: string | number } = {
+    position: "absolute",
+    left: `${leftOffset}rem`,
+    top: 0,
+    bottom: 0,
+    width: "2px",
+    backgroundColor: "#E4E8F0",
+  }
+
+  return <div style={style} />
+}
+
+// Updated function to render multiple trails depending on depth
+export const renderCollapsibleTrail = (currentDepth: number) => {
+  const lines = []
+  for (let i = 1; i <= currentDepth; i++) {
+    // Calculate leftOffset with additional 0.4rem for each depth level above 1
+    const additionalOffset = i > 1 ? (i - 1) * 0.4 : 0
+    const leftOffset = i * 1.6 + additionalOffset
+    lines.push(<CollapsibleTrail key={i} 
+        leftOffset={leftOffset} 
+               />
+              )
+  }
+  return lines
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx

@@ -0,0 +1,59 @@
+import React, { useContext } from "react";
+
+import Flex from "../../pb_flex/_flex";
+import FlexItem from "../../pb_flex/_flex_item";
+import Icon from "../../pb_icon/_icon";
+import { GlobalProps } from "../../utilities/globalProps";
+
+import { Getter, Row } from "@tanstack/react-table";
+import { DataType } from "../Utilities/types";
+import AdvancedTableContext from "../Context/AdvancedTableContext";
+
+interface CustomCellProps {
+  getValue?: Getter<string>;
+  onRowToggleClick?: (arg: Row<DataType>) => void;
+  row: Row<DataType>;
+  value?: string;
+} 
+
+export const CustomCell = ({
+  getValue,
+  onRowToggleClick,
+  row,
+  value,
+}: CustomCellProps & GlobalProps) => {
+  const { setExpanded, expanded } = useContext(AdvancedTableContext);
+  const RowWithoutChildren = row.originalSubRows === undefined;
+
+  const handleOnExpand = (row: Row<DataType>) => {
+    onRowToggleClick && onRowToggleClick(row);
+    setExpanded({ ...expanded, [row.id]: !row.getIsExpanded() });
+  };
+
+  return (
+    <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+      <Flex alignItems="center" 
+          columnGap="xs"
+          orientation="row"
+      >
+        {!RowWithoutChildren ? (
+          <button
+              className="gray-icon expand-toggle-icon"
+              onClick={() => handleOnExpand(row)}
+          >
+            {row.getIsExpanded() ? (
+              <Icon icon="circle-play" 
+                  rotation={90}
+              />
+            ) : (
+              <Icon icon="circle-play" />
+            )}
+          </button>
+        ) : null}
+        <FlexItem paddingLeft={!RowWithoutChildren ? "none" : "xs"}>
+          {row.depth === 0 ? getValue() : value}
+        </FlexItem>
+      </Flex>
+    </div>
+  );
+};

data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx

@@ -0,0 +1,5 @@
+import React from "react"
+
+export const LoadingCell = () => {
+  return <div className="loading-cell" />
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import Icon from "../../pb_icon/_icon"
+import { Header } from "@tanstack/react-table"
+import { DataType } from "../Utilities/types"
+import { displayIcon } from "../Utilities/IconHelpers"
+
+type SortIconButtonProps = {
+  header: Header<DataType, unknown>
+  sortIcon?: string | string[]
+}
+export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
+
+  return (
+    <>
+      {header.column.getIsSorted() === "desc" ? (
+        <div className="year-sort-icon" 
+            key={displayIcon(sortIcon)[0]}
+        >
+          <Icon icon={displayIcon(sortIcon)[0]} />
+        </div>
+      ) : (
+        <div className="year-sort-icon" 
+            key={displayIcon(sortIcon)[1]}
+        >
+          <Icon icon={displayIcon(sortIcon)[1]} />
+        </div>
+      )}
+    </>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+import Flex from "../../pb_flex/_flex"
+import Caption from "../../pb_caption/_caption"
+import { Row, Table } from "@tanstack/react-table"
+
+import { ToggleIconButton } from "./ToggleIconButton"
+import { renderCollapsibleTrail } from "./CollapsibleTrail"
+
+import { isChrome } from "../Utilities/BrowserCheck"
+import { DataType } from "../Utilities/types"
+import { GlobalProps } from "../../utilities/globalProps"
+
+interface SubRowHeaderRowProps {
+  collapsibleTrail?: boolean
+  enableToggleExpansion?: "all" | "header"
+  onClick: (row: Row<DataType>) => void
+  row: Row<DataType>
+  subRowHeaders?: string[]
+  table: Table<DataType>
+}
+
+export const SubRowHeaderRow = ({
+  collapsibleTrail,
+  enableToggleExpansion,
+  onClick,
+  row,
+  subRowHeaders,
+  table,
+}: SubRowHeaderRowProps & GlobalProps) => {
+  const numberOfColumns = table.getAllFlatColumns().length
+
+  return (
+    <tr className="custom-row bg-silver">
+      <td
+          className={`custom-row-first-column ${
+          isChrome() ? "chrome-styles" : ""
+          }`}
+          colSpan={1}
+      >
+        {collapsibleTrail && row.depth > 0 && renderCollapsibleTrail(row.depth)}
+        <div style={{ paddingLeft: `${row.depth * 2}rem` }}>
+          <Flex align="center" 
+              columnGap="xs"
+          >
+            {enableToggleExpansion === "all" && row.getCanExpand() ? (
+              <ToggleIconButton onClick={onClick} 
+                  row={row}
+              />
+            ) : null}
+            <Caption
+                marginLeft={row.getCanExpand() ? "none" : "xs"}
+                text={subRowHeaders[row.depth - 1]}
+            />
+          </Flex>
+        </div>
+      </td>
+
+      <td colSpan={numberOfColumns - 1} />
+    </tr>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx

@@ -0,0 +1,128 @@
+import React, { useContext } from "react"
+import classnames from "classnames";
+import Flex from "../../pb_flex/_flex"
+import { flexRender, Header } from "@tanstack/react-table"
+
+import { SortIconButton } from "./SortIconButton"
+import { ToggleIconButton } from "./ToggleIconButton"
+import { isChrome } from "../Utilities/BrowserCheck"
+import { DataType } from "../Utilities/types"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { GlobalProps } from "../../utilities/globalProps"
+
+type TableHeaderCellProps = {
+  enableSorting?: boolean
+  enableToggleExpansion?: "all" | "header"
+  handleExpandOrCollapse?: () => void
+  header?: Header<DataType, unknown>
+  headerChildren?: React.ReactNode | React.ReactNode[]
+  headerId?: string
+  loading?: boolean
+  sortIcon?: string | string[]
+} & GlobalProps
+
+export const TableHeaderCell = ({
+  enableSorting,
+  enableToggleExpansion,
+  handleExpandOrCollapse,
+  header,
+  headerChildren,
+  headerId,
+  loading,
+  sortIcon,
+}: TableHeaderCellProps) => {
+  const { sortControl } = useContext(AdvancedTableContext)
+
+  const toggleSortButton = (event: React.SyntheticEvent) => {
+    if (sortControl) {
+      const sortIsDesc = header.column.getIsSorted() === "desc"
+      sortIsDesc
+        ? sortControl.onChange({ desc: true })
+        : sortControl.onChange({ desc: false })
+    } else {
+      header.column.getToggleSortingHandler()(event)
+    }
+  }
+
+const cellClassName = classnames("table-header-cells", 
+  `${isChrome() ? "chrome-styles" : ""}`, 
+  `${enableSorting ? "table-header-cells-active" : ""}`
+);
+
+const cellId = `${loading ? 
+    `loading-${header.id}${headerId ? `-${headerId}` : ""}`
+    : `${header.id}${headerId ? `-${headerId}` : ""}`
+}`;
+
+  return (
+    <th
+        align="right"
+        className={cellClassName}
+        id={cellId}
+        key={`${header.id}-header`}
+    >
+      {header.isPlaceholder ? null : headerChildren && header.index === 0 ? (
+        <Flex alignItems="center">
+          {headerChildren}
+          <div>
+            {flexRender(header.column.columnDef.header, header.getContext())}
+          </div>
+        </Flex>
+      ) : (
+        <Flex
+            alignItems="center"
+            justify={header.index === 0 && enableSorting ? "between" : header.index === 0 && !enableSorting ? "start" : "end"}
+            paddingLeft={loading ? "sm" : "none"}
+        >
+          {header.index === 0 &&
+            !loading &&
+            (enableToggleExpansion === "all" || "header") && (
+              <ToggleIconButton onClick={handleExpandOrCollapse} />
+            )}
+
+          {header.index === 0 &&
+            loading &&
+            (enableToggleExpansion === "all" || "header") && (
+              <div className="loading-toggle-icon header-toggle-icon" />
+            )}
+
+          <Flex
+              className={`${header.index === 0 &&
+                enableSorting &&
+                "header-sort-button pb_th_link"}`}
+              cursor={header.index === 0 && enableSorting ? "pointer" : "default"}
+              {...(header.index === 0 &&
+                enableSorting && {
+                  htmlOptions: {
+                    onClick: (event: React.MouseEvent) => toggleSortButton(event),
+                    onKeyDown: (event: React.KeyboardEvent) => {
+                      if (event.key === "Enter") {
+                        toggleSortButton(event)
+                      }
+                    },
+                    tabIndex: 0,
+                  },
+                })}
+              justify={header.index === 0 && enableSorting ? "between" : "none"}
+              paddingLeft={enableSorting ? "xxs" : "xs"}
+          >
+            <div>
+              {flexRender(header.column.columnDef.header, header.getContext())}
+            </div>
+
+            {header.index === 0 &&
+              header.column.getCanSort() &&
+              enableSorting &&
+              (loading ? (
+                <div className="loading-toggle-icon header-sort-icon" />
+              ) : (
+                <SortIconButton header={header} 
+                    sortIcon={sortIcon} 
+                />
+              ))}
+          </Flex>
+        </Flex>
+      )}
+    </th>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx

@@ -0,0 +1,28 @@
+import React, { useContext } from "react"
+import Icon from "../../pb_icon/_icon"
+import { Row } from "@tanstack/react-table"
+import AdvancedTableContext from "../Context/AdvancedTableContext"
+import { DataType } from "../Utilities/types"
+import { displayIcon } from "../Utilities/IconHelpers"
+
+interface ToggleIconButtonProps {
+  onClick: (row: Row<DataType>) => void
+  row?: Row<DataType>
+}
+
+export const ToggleIconButton = ({ row, onClick }: ToggleIconButtonProps) => {
+  const { toggleExpansionIcon } = useContext(AdvancedTableContext)
+  return (
+    <button
+        className="gray-icon time-period-toggle-icon"
+        key={displayIcon(toggleExpansionIcon)[0]}
+        onClick={() => onClick(row)}
+    >
+      <Icon
+          cursor="pointer"
+          fixedWidth
+          icon={displayIcon(toggleExpansionIcon)[0]}
+      />
+    </button>
+  )
+}

data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx

@@ -0,0 +1,5 @@
+import { createContext } from "react"
+
+const AdvancedTableContext = createContext<any>({})
+
+export default AdvancedTableContext

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

@@ -0,0 +1,133 @@
+# 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:
+
+```
+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: [
+        //similar to chldren above
+    ]
+  },
+  {
+    year: "2023",
+    quarter: null,
+    month: null,
+    day: null,
+    newEnrollments: "10",
+    scheduledMeetings: "15",
+    attendanceRate: "65%",
+    completedClasses: "4",
+    classCompletionRate: "49%",
+    graduatedStudents: "29",
+    children: [
+      //similar to children above
+    ],
+  },
+];
+
+```