playbook_ui_docs 14.15.0.pre.rc.4 → 14.16.0.pre.alpha.PBNTR881advancedtablefullscreen6929

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 77648dd1225c8141955ca7c0b992f35bc779088583a8ab014815ac545bff64cb
-  data.tar.gz: 254bc3bd1ced9a86a96824f06b7a1fd5ae900c88eb02a4e3aa074923533fe60d
+  metadata.gz: 630e3b382df0be94083216d7c14a0d676c861920e0fa2e907e677ad107386571
+  data.tar.gz: cba9f953eb2f33b6efad702f05bae942e02a59a4e46885c772e3c8c6ac060797
 SHA512:
-  metadata.gz: 700d666345c9527ab81d2ed8cd6ff0cfa8a558687e8b71c6dccf4f66387351a2f32aa998b55b8d2efd95c36ea821c9a16041395dc2309e13984eb4ea5c837ac2
-  data.tar.gz: 87d5dbb6372a57f3efdc03784d96194d90d47fed001850bba0d34fe1e8864ae3c18fb3b7721b9299260873600fb6ac4ecc2ea0a6087a1e9c1e05bcb4fd5de4b9
+  metadata.gz: e14ae80708867494840a17cf4106119f6ed1c99984723f8ab119ae17d92599520070e68bf27f65468921514f86b1a542a72d9e0306f9c07dd45d941623b0d85c
+  data.tar.gz: 923b4b666668c9fb361e73f19dd8b13f226b158b662021ccde64dea6510f85dd0ae07e038b6b91f38ff08bef67dab58090952aefb054c27356fcba6480c0f271

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_collapsible_trail.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCollapsibleTrail = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_custom_cell.jsx

@@ -1,5 +1,7 @@
 import React from "react"
-import { AdvancedTable, Pill } from "playbook-ui"
+import AdvancedTable from "../../pb_advanced_table/_advanced_table"
+import Pill from "../../pb_pill/_pill"
+
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableColumnHeadersCustomCell = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_multiple.jsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AdvancedTable } from "playbook-ui";
+import AdvancedTable from '../../pb_advanced_table/_advanced_table';
 import MOCK_DATA from "./advanced_table_mock_data.json";
 
 const AdvancedTableColumnHeadersMultiple = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx

@@ -1,5 +1,12 @@
 import React from "react"
-import { AdvancedTable, Pill, Body, Flex, Detail, Caption, Badge, Title } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Pill from "../../pb_pill/_pill"
+import Body from "../../pb_body/_body"
+import Flex from "../../pb_flex/_flex"
+import Detail from "../../pb_detail/_detail"
+import Caption from "../../pb_caption/_caption"
+import Badge from "../../pb_badge/_badge"
+import Title from "../../pb_title/_title"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableCustomCell = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableDefault = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_expanded_control.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableExpandedControl = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.jsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react"
+import { AdvancedTable, Button, Flex } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
+
+const AdvancedTableFullscreen = (props) => {
+  const [fullscreenToggleSmall, setFullscreenToggleSmall] = useState(null)
+  const [fullscreenToggleLarge, setFullscreenToggleLarge] = useState(null)
+
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  const tableProps = {
+    sticky: true
+  }
+
+  return (
+    <div>
+      <Flex justify="end">
+          <Button
+              marginBottom="sm"
+              onClick={() => fullscreenToggleSmall?.()}
+              text="Fullscreen Small Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleSmall(() => toggleFullscreen)}
+          tableData={MOCK_DATA}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+      <Flex justify="end">
+          <Button
+              marginY="sm"
+              onClick={() => fullscreenToggleLarge?.()}
+              text="Fullscreen Large Table"
+              variant="secondary"
+          />
+      </Flex>
+      <AdvancedTable
+          allowFullScreen
+          columnDefinitions={columnDefinitions}
+          fullScreenControl={({ toggleFullscreen }) => setFullscreenToggleLarge(() => toggleFullscreen)}
+          responsive="none"
+          tableData={PAGINATION_MOCK_DATA}
+          tableProps={tableProps}
+          {...props}
+      >
+          <AdvancedTable.Header enableSorting />
+          <AdvancedTable.Body />
+      </AdvancedTable>
+    </div>
+  )
+}
+
+export default AdvancedTableFullscreen

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_fullscreen.md

@@ -0,0 +1,3 @@
+Trigger Fullscreen mode with the `allowFullScreen`and `fullScreenControl` props.  `allowFullScreen` is a boolean that enables Fullscreen functionality for an Advanced Table. `fullScreenControl` is a callback function that receives an object containing the table's internal `toggleFullscreen` function, allowing you to store and trigger Fullscreen from the parent component. An external trigger (like a button) must be used to activate Fullscreen mode.
+
+Exit Fullscreen mode by clicking the minimize top-right-corner icon or by pressing the "Escape" keyboard key.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_infinite_scroll.jsx

@@ -0,0 +1,50 @@
+import React from "react"
+import { AdvancedTable } from "playbook-ui"
+import MOCK_DATA from "./advanced_table_mock_data_infinite_scroll.json"
+
+const AdvancedTableInfiniteScroll = (props) => {
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          virtualizedRows
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableInfiniteScroll

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.jsx

@@ -0,0 +1,102 @@
+import React, { useState } from "react";
+import { AdvancedTable, TextInput, Body } from "playbook-ui";
+import MOCK_DATA from "./advanced_table_mock_data.json";
+
+const AdvancedTableInlineEditing = (props) => {
+  const [editedValues, setEditedValues] = useState({});
+
+  const EditableCell = ({ rowId, originalValue, onSave }) => {
+    const [localValue, setLocalValue] = useState(originalValue);
+
+    const handleChange = (e) => setLocalValue(e.target.value);
+
+    const handleBlur = () => {
+      originalValue !== localValue && onSave(rowId, localValue);
+    };
+
+    return (
+      <TextInput inline
+          marginBottom="none"
+          {...props}
+      >
+        <input 
+            onBlur={handleBlur} 
+            onChange={handleChange} 
+            onKeyDown={(e) => e.key === 'Enter' && handleBlur()}
+            value={localValue} 
+        />
+      </TextInput>
+    );
+  };
+
+  const columnDefinitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+      editable: true,
+      customRenderer: (row) => {
+        return (
+          <EditableCell
+              onSave={(id, val) => {
+                setEditedValues((prev) => ({ ...prev, [id]: val }));
+              }}
+              originalValue={
+                editedValues[row.id] ?? row.original.scheduledMeetings
+              }
+              rowId={row.id}
+          />
+        );
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ];
+
+  return (
+    <div className="App">
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+      {
+        editedValues && Object.keys(editedValues).length > 0 && (
+          <>
+            <Body 
+                marginTop="md"
+                {...props}
+            >
+              Edited Values by Row Id:
+            </Body>
+            <pre style={{color: 'white'}}>{JSON.stringify(editedValues, null, 2)}</pre>
+          </>
+        )
+      }
+    </div>
+  );
+};
+
+export default AdvancedTableInlineEditing;

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_editing.md

@@ -0,0 +1,4 @@
+Inline Cell Editing can be achieved with a combination of our `TextInput` kit and the `customRenderer` method available through columnDefinitions. 
+
+Hover over any cell within the 'Scheduled Meetings' column to see the TextInput and type in to change values. Values can be saved by clicking away from the TextInput or by hitting 'Enter'.
+See the code snippet below to see how this was achieved. Devs must manage state themselves as shown.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_inline_row_loading.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import { MOCK_DATA_INLINE_LOADING } from "./_mock_data_inline_loading"
 
 const AdvancedTableInlineRowLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_loading.jsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
-import { Button } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import Button from "../../pb_button/_button"
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableLoading = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_no_subrows.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableNoSubrows = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 
 const AdvancedTablePagination = (props) => {
@@ -40,7 +40,6 @@ const AdvancedTablePagination = (props) => {
       <AdvancedTable
           columnDefinitions={columnDefinitions}
           pagination
-          responsive="none"
           tableData={PAGINATION_MOCK_DATA}
           {...props}
       />

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import PAGINATION_MOCK_DATA from "./advanced_table_pagination_mock_data.json"
 
 const AdvancedTablePaginationWithProps = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import Title from '../../pb_title/_title'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.html.erb

@@ -0,0 +1,39 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+  ] 
+
+  subrow_headers = ["Quarter", "Month", "Day"]
+%>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, selectable_rows: true }) do %>
+  <%= pb_rails("advanced_table/table_header", props: { column_definitions: column_definitions, selectable_rows: true }) %>
+  <%= pb_rails("advanced_table/table_body", props: { id: "selectable_rows", table_data: @table_data_with_id, column_definitions: column_definitions, subrow_headers: subrow_headers, enable_toggle_expansion: "all", selectable_rows: true }) %>
+<% end %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_with_id.json"
 
 const AdvancedTableSelectableRows = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_actions.jsx

@@ -1,5 +1,7 @@
 import React, {useState} from "react"
-import { AdvancedTable, CircleIconButton, Flex } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
+import CircleIconButton from "../../pb_circle_icon_button/_circle_icon_button"
+import Flex from "../../pb_flex/_flex"
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableSelectableRowsActions = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_header.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableSelectableRowsHeader = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.html.erb

@@ -0,0 +1,33 @@
+<% column_definitions = [
+    {
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+    },
+    {
+      accessor: "newEnrollments",
+      label: "New Enrollments",
+    },
+    {
+      accessor: "scheduledMeetings",
+      label: "Scheduled Meetings",
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    }
+] %>
+
+<%= pb_rails("advanced_table", props: { id: "selectable_rows_no_subrows", table_data: @table_data_no_subrows, column_definitions: column_definitions, selectable_rows: true, enable_toggle_expansion: "none", }) %>

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data_no_subrows.json"
 
 const AdvancedTableSelectableRowsNoSubrows = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_no_subrows_rails.md

@@ -0,0 +1 @@
+`selectable_rows` can also be used with tables without nested row data. Set `enable_toggle_expansion: none` to adjust the Advanced Table styling to fit a table without subrows.

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_selectable_rows_rails.md

@@ -0,0 +1,6 @@
+`selectable_rows` is a boolean prop that if present will add checkboxes to all rows that will allow for selecting rows. 
+
+When a parent row is clicked, it will check all nested children rows, Children rows can be manually checked or unchecked as well. 
+
+__ALERT TO DEVS__: UPDATE THIS PARAGRAPH IN THE FOLLOW UP STORY WHEN CHECKBOX FUNCTIONALITY IS SET PLEASE
+The `onRowSelectionChange` prop returns an array of ids of all Rows that have been selected. Open the console on this example and check and uncheck checkboxes to see this is action! __NOTE__: Each object within the `tableData`Array must contain a unique id in order to attach an id to all Rows for this to function. 

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSort = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSortControl = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_subrow_headers.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableSubrowHeaders = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_options.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableOptions = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTableProps = (props) => {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_table_props_sticky_header.jsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { AdvancedTable } from "playbook-ui"
+import AdvancedTable from '../../pb_advanced_table/_advanced_table'
 import MOCK_DATA from "./advanced_table_mock_data.json"
 
 const AdvancedTableTablePropsStickyHeader = (props) => {