playbook_ui_docs 16.5.0 → 16.6.0.pre.alpha.RTEPOC15805

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -0,0 +1,403 @@
+{
+  "structureModes": {
+    "default": "implicit",
+    "modes": {
+      "implicit": {
+        "label": "Default",
+        "template": "<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}\n{{props}}\n/>",
+        "propTargets": {
+          "collapsibleTrail": "props",
+          "subRowHeaders": "props"
+        }
+      },
+      "explicit": {
+        "label": "Subcomponent Structure",
+        "template": "<AdvancedTable\n  columnDefinitions={columnDefinitions}\n  tableData={tableData}{{props}}\n>\n  <AdvancedTable.Header{{AdvancedTable.Header.props}} />\n  <AdvancedTable.Body\n{{AdvancedTable.Body.props}}\n  />\n</AdvancedTable>"
+      }
+    }
+  },
+  "propTargets": {
+    "enableSorting": "AdvancedTable.Header.props",
+    "sortIcon": "AdvancedTable.Header.props",
+    "collapsibleTrail": "AdvancedTable.Body.props",
+    "subRowHeaders": "AdvancedTable.Body.props"
+  },
+  "dataPresets": {
+    "presets": {
+      "default": {
+        "label": "Default",
+        "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
+        "tableDataFile": "advanced_table_mock_data.json"
+      },
+      "flat_no_subrows": {
+        "label": "Flat rows (no sub-rows)",
+        "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
+        "tableDataFile": "advanced_table_mock_data_no_subrows.json"
+      },
+      "pagination": {
+        "label": "Pagination Example",
+        "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
+        "tableDataFile": "advanced_table_pagination_mock_data.json"
+      },
+      "with_ids": {
+        "label": "Data with row IDs",
+        "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
+        "tableDataFile": "advanced_table_mock_data_with_id.json"
+      },
+      "inline_loading": {
+        "label": "Inline row loading",
+        "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
+        "tableDataFile": "advanced_table_mock_data_inline_loading.json"
+      },
+      "grouped_headers": {
+        "label": "Grouped headers (nested columns)",
+        "columnDefinitionsFile": "advanced_table_column_definitions_grouped_simple.json",
+        "tableDataFile": "advanced_table_mock_data.json"
+      },
+      "grouped_headers_double_nested": {
+        "label": "Grouped headers (double nested columns)",
+        "columnDefinitionsFile": "advanced_table_column_definitions_grouped_triple.json",
+        "tableDataFile": "advanced_table_mock_data.json"
+      },
+      "with_ids_standard": {
+        "label": "Column definitions with IDs",
+        "columnDefinitionsFile": "advanced_table_column_definitions_with_ids.json",
+        "tableDataFile": "advanced_table_mock_data.json"
+      },
+      "column_sort": {
+        "label": "Column Definitions with Sorting",
+        "columnDefinitionsFile": "advanced_table_column_definitions_standard_sort.json",
+        "tableDataFile": "advanced_table_mock_data.json"
+      },
+      "column_styling": {
+        "label": "Column Styling",
+        "columnDefinitionsFile": "advanced_table_column_definitions_styling.json",
+        "tableDataFile": "advanced_table_mock_data.json"
+      }
+    }
+  },
+  "hiddenProps": [
+    "sortControl",
+    "fullScreenControl",
+    "expandedControl",
+    "allowFullScreen"
+  ],
+  "requiredProps": {
+    "columnDefinitionsFile": "advanced_table_column_definitions_standard.json",
+    "tableDataFile": "advanced_table_mock_data.json"
+  },
+  "propSyncOnEnable": {
+    "pagination": { "dataPreset": "pagination" },
+    "paginationProps": { "dataPreset": "pagination" },
+    "inlineRowLoading": { "dataPreset": "inline_loading" },
+    "selectableRows": { "dataPreset": "with_ids" },
+    "onRowSelectionChange": { "dataPreset": "with_ids" },
+    "enableSorting": { "structureMode": "explicit" },
+    "sortIcon": { "structureMode": "explicit" },
+    "collapsibleTrail": { "structureMode": "explicit" },
+    "subRowHeaders": { "structureMode": "explicit" },
+    "columnVisibilityControl": { "dataPreset": "with_ids_standard" },
+    "rowStyling": { "dataPreset": "with_ids" }
+  },
+  "children": {
+    "editable": false,
+    "default": ""
+  },
+  "defaults": {
+    "collapsibleTrail": true,
+    "columnVisibilityControl": {
+      "default": true
+    },
+    "tableProps": {
+      "container": false
+    },
+    "rowStyling": [{ "rowId": "1", "backgroundColor": "#0056CF", "fontColor": "#FFFFFF", "expandButtonColor": "#FFFFFF" }],
+    "expandByDepth": [
+      {
+        "depth": 0,
+        "label": "Year"
+      },
+      {
+        "depth": 1,
+        "label": "Quarter"
+      },
+      {
+        "depth": 2,
+        "label": "Month"
+      }
+    ]
+  },
+  "groups": [
+    {
+      "name": "Core Data",
+      "props": ["columnDefinitions", "tableData"]
+    },
+    {
+      "name": "Sorting",
+      "props": [
+        "enableSorting",
+        "enableSortingRemoval",
+        "sortParentOnly",
+        "customSort",
+        "onCustomSortClick",
+        "sortIcon"
+      ]
+    },
+    {
+      "name": "Pagination & Loading",
+      "props": [
+        "pagination",
+        "paginationProps",
+        "loading",
+        "inlineRowLoading",
+        "initialLoadingRowsCount"
+      ]
+    },
+    {
+      "name": "Expansion Controls",
+      "props": [
+        "enableToggleExpansion",
+        "expandByDepth",
+        "onExpandByDepthClick",
+        "cascadeCollapse",
+        "pinnedRows",
+        "onRowToggleClick",
+        "onToggleExpansionClick",
+        "persistToggleExpansionButton",
+        "toggleExpansionIcon"
+      ]
+    },
+    {
+      "name": "Column Configuration",
+      "props": ["columnVisibilityControl", "columnGroupBorderColor"]
+    },
+    {
+      "name": "Table engine",
+      "props": ["tableOptions", "tableProps"]
+    },
+    {
+      "name": "Layout",
+      "props": [
+        "responsive",
+        "scrollBarNone",
+        "stickyLeftColumn",
+        "virtualizedRows"
+      ]
+    },
+    {
+      "name": "Styling",
+      "props": ["rowStyling"]
+    },
+    {
+      "name": "Selection & Actions",
+      "props": [
+        "selectableRows",
+        "showActionsBar",
+        "actions",
+        "onRowSelectionChange"
+      ]
+    },
+    {
+      "name": "AdvancedTable.Body",
+      "props": ["collapsibleTrail", "subRowHeaders"]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "dataPreset": "default",
+      "props": {}
+    },
+    {
+      "name": "With Sorting",
+      "dataPreset": "default",
+      "props": {
+        "enableSorting": true
+      }
+    },
+    {
+      "name": "With Pagination",
+      "props": {
+        "pagination": true
+      }
+    },
+    {
+      "name": "Selectable Rows",
+      "props": {
+        "selectableRows": true,
+        "showActionsBar": true
+      }
+    },
+    {
+      "name": "Subrow Headers",
+      "structureMode": "explicit",
+      "dataPreset": "default",
+      "props": {
+        "subRowHeaders": ["Quarter", "Month", "Day"]
+      }
+    },
+    {
+      "name": "Loading State",
+      "dataPreset": "default",
+      "props": {
+        "loading": true,
+        "initialLoadingRowsCount": 5
+      }
+    },
+    {
+      "name": "Sorting by Column",
+      "structureMode": "explicit",
+      "dataPreset": "column_sort",
+      "props": {
+        "enableSorting": true
+      }
+    },
+    {
+      "name": "Column Styling",
+      "structureMode": "explicit",
+      "dataPreset": "column_styling",
+      "props": {}
+    }
+  ],
+  "conditionals": {
+    "paginationProps": {
+      "requires": {
+        "pagination": true
+      }
+    },
+    "initialLoadingRowsCount": {
+      "requires": {
+        "loading": true
+      }
+    },
+    "onRowSelectionChange": {
+      "requires": {
+        "selectableRows": true
+      }
+    },
+    "showActionsBar": {
+      "requires": {
+        "selectableRows": true
+      }
+    },
+    "actions": {
+      "requires": {
+        "selectableRows": true,
+        "showActionsBar": true
+      }
+    },
+    "enableSorting": {
+      "structureMode": "explicit"
+    },
+    "sortIcon": {
+      "structureMode": "explicit",
+      "requires": {
+        "enableSorting": true
+      }
+    },
+    "collapsibleTrail": {
+      "structureMode": "explicit"
+    },
+    "subRowHeaders": {
+      "structureMode": "explicit"
+    },
+    "onExpandByDepthClick": {
+      "requires": "expandByDepth"
+    },
+    "onCustomSortClick": {
+      "requires": {
+        "customSort": true
+      }
+    },
+    "fullScreenControl": {
+      "requires": {
+        "allowFullScreen": true
+      }
+    },
+    "enableSortingRemoval": {
+      "requires": {
+        "enableSorting": true
+      }
+    },
+    "sortControl": {
+      "requires": {
+        "enableSorting": true
+      }
+    },
+    "customSort": {
+      "requires": {
+        "enableSorting": true
+      }
+    },
+    "sortParentOnly": {
+      "requires": {
+        "enableSorting": true
+      }
+    }
+  },
+  "hints": {
+    "sorting_info": {
+      "when": {
+        "enableSortingRemoval": true
+      },
+      "message": "Click column headers to sort. Click again to remove sorting.",
+      "type": "info"
+    },
+    "header_sorting_info": {
+      "when": {
+        "enableSorting": true
+      },
+      "message": "Header sorting UI is only applied in \"Subcomponent Structure\" mode (explicit Header and Body). For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.",
+      "type": "info"
+    },
+    "pagination_info": {
+      "when": {
+        "pagination": true
+      },
+      "message": "Use paginationProps to customize page size and appearance.",
+      "type": "info"
+    },
+    "selectable_info": {
+      "when": {
+        "selectableRows": true
+      },
+      "message": "Use onRowSelectionChange to handle selection changes. showActionsBar controls the action bar visibility.",
+      "type": "info"
+    },
+    "loading_info": {
+      "when": {
+        "loading": true
+      },
+      "message": "Use state to control the loading state.",
+      "type": "info"
+    },
+    "column_sort_info": {
+      "when": {
+        "columnDefinitions": {
+          "enableSort": true
+        }
+      },
+      "message": "For sorting by column, pass columnDefinitions with enableSort: true to the columnDefinitions array. Click 'sorting by column' to see an example.",
+      "type": "info"
+    },
+    "custom_sort_info": {
+      "when": {
+        "customSort": true
+      },
+      "message": "Use customSort to implement custom sorting logic. The customSort prop must be used in conjunction with the subRowHeaders prop. The customSort DOES NOT handle the sort logic, this must be handled on the frontend using the callback provided.",
+      "type": "info"
+    },
+    "cascade_collapse_info": {
+      "when": {
+        "cascadeCollapse": true
+      },
+      "message": "When cascadeCollapse is true, collapsing any parent row itself or by using the toggle expansion buttons in any header or subheader row also collapses all descendants and clears their expansion state. Re-expanding then shows only direct children until the user expands deeper levels again.",
+      "type": "info"
+    },
+    "column_styling_info": {
+      "presetName": "Column Styling",
+      "message": "This sample uses columnStyling on column definitions. You can style headers and cells for the whole table or per column.",
+      "type": "info"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_grouped_simple.json

@@ -0,0 +1,41 @@
+[
+  {
+    "accessor": "year",
+    "label": "Year",
+    "cellAccessors": ["quarter", "month", "day"]
+  },
+  {
+    "label": "Enrollment Data",
+    "columns": [
+      {
+        "accessor": "newEnrollments",
+        "label": "New Enrollments"
+      },
+      {
+        "accessor": "scheduledMeetings",
+        "label": "Scheduled Meetings"
+      }
+    ]
+  },
+  {
+    "label": "Performance Data",
+    "columns": [
+      {
+        "accessor": "attendanceRate",
+        "label": "Attendance Rate"
+      },
+      {
+        "accessor": "completedClasses",
+        "label": "Completed Classes"
+      },
+      {
+        "accessor": "classCompletionRate",
+        "label": "Class Completion Rate"
+      },
+      {
+        "accessor": "graduatedStudents",
+        "label": "Graduated Students"
+      }
+    ]
+  }
+]

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_grouped_triple.json

@@ -0,0 +1,56 @@
+[
+  {
+    "accessor": "year",
+    "label": "Year",
+    "cellAccessors": ["quarter", "month", "day"]
+  },
+  {
+    "label": "Enrollment Data",
+    "columns": [
+      {
+        "label": "Enrollment Stats",
+        "columns": [
+          {
+            "accessor": "newEnrollments",
+            "label": "New Enrollments"
+          },
+          {
+            "accessor": "scheduledMeetings",
+            "label": "Scheduled Meetings"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "label": "Performance Data",
+    "columns": [
+      {
+        "label": "Completion Metrics",
+        "columns": [
+          {
+            "accessor": "completedClasses",
+            "label": "Completed Classes"
+          },
+          {
+            "accessor": "classCompletionRate",
+            "label": "Class Completion Rate"
+          }
+        ]
+      },
+      {
+        "label": "Attendance",
+        "columns": [
+          {
+            "accessor": "attendanceRate",
+            "label": "Attendance Rate"
+          },
+          {
+            "accessor": "scheduledMeetings",
+            "label": "Scheduled Meetings"
+          }
+        ]
+      }
+    ]
+  }
+]

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_standard.json

@@ -0,0 +1,31 @@
+[
+  {
+    "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"
+  }
+]

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_standard_sort.json

@@ -0,0 +1,37 @@
+[
+  {
+    "accessor": "year",
+    "label": "Year",
+    "cellAccessors": ["quarter", "month", "day"]
+  },
+  {
+    "accessor": "newEnrollments",
+    "label": "New Enrollments",
+    "enableSort": true
+  },
+  {
+    "accessor": "scheduledMeetings",
+    "label": "Scheduled Meetings",
+    "enableSort": true
+  },
+  {
+    "accessor": "attendanceRate",
+    "label": "Attendance Rate",
+    "enableSort": true
+  },
+  {
+    "accessor": "completedClasses",
+    "label": "Completed Classes",
+    "enableSort": true
+  },
+  {
+    "accessor": "classCompletionRate",
+    "label": "Class Completion Rate",
+    "enableSort": true
+  },
+  {
+    "accessor": "graduatedStudents",
+    "label": "Graduated Students",
+    "enableSort": true
+  }
+]

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_styling.json

@@ -0,0 +1,44 @@
+[
+  {
+    "accessor": "year",
+    "label": "Year",
+    "cellAccessors": ["quarter", "month", "day"]
+  },
+  {
+    "accessor": "newEnrollments",
+    "label": "New Enrollments",
+    "columnStyling": {
+      "cellBackgroundColor": "#00C4D7",
+      "headerBackgroundColor": "#00C4D7"
+    }
+  },
+  {
+    "accessor": "scheduledMeetings",
+    "label": "Scheduled Meetings",
+    "columnStyling": {
+      "cellBackgroundColor": "#F9BB00"
+    }
+  },
+  {
+    "accessor": "attendanceRate",
+    "label": "Attendance Rate",
+    "columnStyling": {
+      "cellBackgroundColor": "#0056CF",
+      "headerBackgroundColor": "#0056CF",
+      "fontColor": "#FFFFFF",
+      "headerFontColor": "#FFFFFF"
+    }
+  },
+  {
+    "accessor": "completedClasses",
+    "label": "Completed Classes"
+  },
+  {
+    "accessor": "classCompletionRate",
+    "label": "Class Completion Rate"
+  },
+  {
+    "accessor": "graduatedStudents",
+    "label": "Graduated Students"
+  }
+]

data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_column_definitions_with_ids.json

@@ -0,0 +1,38 @@
+[
+  {
+    "accessor": "year",
+    "label": "Year",
+    "id": "year",
+    "cellAccessors": ["quarter", "month", "day"]
+  },
+  {
+    "accessor": "newEnrollments",
+    "label": "New Enrollments",
+    "id": "newEnrollments"
+  },
+  {
+    "accessor": "scheduledMeetings",
+    "label": "Scheduled Meetings",
+    "id": "scheduledMeetings"
+  },
+  {
+    "accessor": "attendanceRate",
+    "label": "Attendance Rate",
+    "id": "attendanceRate"
+  },
+  {
+    "accessor": "completedClasses",
+    "label": "Completed Classes",
+    "id": "completedClasses"
+  },
+  {
+    "accessor": "classCompletionRate",
+    "label": "Class Completion Rate",
+    "id": "classCompletionRate"
+  },
+  {
+    "accessor": "graduatedStudents",
+    "label": "Graduated Students",
+    "id": "graduatedStudents"
+  }
+]