playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023 → 13.16.0.pre.alpha.PLAY11641991

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "13.16.0"
-  VERSION = "13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023"
+  VERSION = "13.16.0.pre.alpha.PLAY11641991"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023
+  version: 13.16.0.pre.alpha.PLAY11641991
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-01-29 00:00:00.000000000 Z
+date: 2024-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -269,32 +269,6 @@ files:
 - app/pb_kits/playbook/_playbook.scss
 - app/pb_kits/playbook/_reset.scss
 - app/pb_kits/playbook/index.js
-- app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx
-- app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx
-- app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx
-- app/pb_kits/playbook/pb_advanced_table/README.md
-- app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx
-- app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx
-- app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts
-- app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss
-- app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx
-- app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx
-- app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_description.md
-- app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js
-- app/pb_kits/playbook/pb_advanced_table/docs/example.yml
-- app/pb_kits/playbook/pb_advanced_table/docs/index.js
-- app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss
-- app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss
 - app/pb_kits/playbook/pb_avatar/_avatar.scss
 - app/pb_kits/playbook/pb_avatar/_avatar.tsx
 - app/pb_kits/playbook/pb_avatar/avatar.html.erb

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

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

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

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

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

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

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

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

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

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

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

@@ -1,133 +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:
-
-```
-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
-    ],
-  },
-];
-
-```

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>
-    </>
-  )
-}