playbook_ui 13.18.0 → 13.19.0.pre.alpha.PBNTR200addadvancedtablekitdarkmodestyles2346

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

@@ -1,3 +1,3 @@
 the optional `loading` prop takes a boolean value that can be managed using state. If loading is true, the table will display the loading skeleton and once loading is false, the table will render with the data provided. 
 
-By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.
+By default, the inital row count of the loading skeleton is set to 10. If you want more control over this initial row count, the optional `initialLoadingRowCount` prop can be used to pass in a number. __NOTE__: This is only for the first render of the table, subsequent loading skeleton row count logic is handled within the kit itself.

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

@@ -1,3 +1,3 @@
 `subRowHeaders` is an optional prop that if present will add header rows at each level of the nested data. The prop takes an array of strings, each string being the text for each header row. The array of strings must be in the order in which they need to be rendered in the UI according to depth.
 
-`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all' or 'header". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'headeer' by default.
+`enableToggleExpansion` is an additional optional prop that can be used in conjunction with the subRowHeaders prop. `enableToggleExpansion` is a string that can be 'all', 'header" or "none". If set to 'all', the toggle exapansion button will appear in the table header as well as in the subRow headers. If set to 'header' button will only appear in header and NOT in subRow headers. This is set to 'header' by default.

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

@@ -1,3 +1,3 @@
 The Tanstack table consumes the useReactTable hook to create the table. This hook takes an object that can contain any of the functions that the Tanstack table provides. The advancedTable's optional `tableOptions` can be used to pass tanstack options to the kit. 
 
-In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and hoe to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)
+In the above example, we are using the initialState option provided by tanstack that takes sort as one of it's values. Setting it to true for the first column is reversing the sort order on first render of the table. For a complete list of possible options and how to use them, see [here](https://tanstack.com/table/v8/docs/api/core/table#usereacttable--createsolidtable--usevuetable--createsveltetable)

data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data_inline_loading.js

@@ -0,0 +1,200 @@
+export const MOCK_DATA_INLINE_LOADING = [
+    {
+      year: "2021",
+      quarter: null,
+      month: null,
+      day: null,
+      newEnrollments: "20",
+      scheduledMeetings: "10",
+      attendanceRate: "51%",
+      completedClasses: "3",
+      classCompletionRate: "33%",
+      graduatedStudents: "19",
+      children: [],
+    },
+    {
+      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/docs/example.yml

@@ -9,4 +9,5 @@ examples:
   - advanced_table_collapsible_trail: Collapsible Trail
   - advanced_table_table_options: Table Options
   - advanced_table_table_props: Table Props
+  - advanced_table_inline_row_loading: inline Row Loading
 

data/app/pb_kits/playbook/pb_advanced_table/docs/index.js

@@ -7,3 +7,4 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
 export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
 export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
 export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
+export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx

@@ -7,6 +7,7 @@ import Highcharts from "highcharts";
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+import { merge } from 'lodash'
 
 import classnames from "classnames";
 
@@ -19,6 +20,7 @@ type BarGraphProps = {
   yAxisMax: number;
   chartData: { name: string; data: number[] }[];
   className?: string;
+  customOptions?: Partial<Highcharts.Options>;
   id: string;
   pointStart: number;
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -48,6 +50,7 @@ const BarGraph = ({
   className = "pb_bar_graph",
   colors,
   htmlOptions = {},
+  customOptions = {},
   id,
   pointStart,
   subTitle,
@@ -128,7 +131,7 @@ const BarGraph = ({
   const [options, setOptions] = useState({});
 
   useEffect(() => {
-    setOptions({ ...staticOptions });
+    setOptions(merge(staticOptions, customOptions));
   }, [chartData]);
 
   return (

data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb

@@ -9,6 +9,7 @@ module Playbook
       prop :axis_title
       prop :chart_data, type: Playbook::Props::Array,
                         default: []
+      prop :custom_options, default: {}
       prop :orientation, type: Playbook::Props::Enum,
                          values: %w[vertical horizontal],
                          default: "vertical"
@@ -39,7 +40,7 @@ module Playbook
         orientation == "horizontal" ? "bar" : "column"
       end
 
-      def chart_options
+      def standard_options
         {
           align: align,
           id: id,
@@ -65,6 +66,10 @@ module Playbook
         }
       end
 
+      def chart_options
+        standard_options.deep_merge(custom_options)
+      end
+
       def classname
         generate_classname("pb_bar_graph")
       end

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.html.erb

@@ -0,0 +1,49 @@
+<% data = [{
+    name: 'Installation',
+    data: [1475,200,3000,654,656]
+}, {
+    name: 'Manufacturing',
+    data: [4434,524,2320,440,500]
+}, {
+    name: 'Sales & Distribution',
+    data: [3387,743,1344,434,440,]
+}, {
+    name: 'Project Development',
+    data: [3227,878,999,780,1000]
+}, {
+    name: 'Other',
+    data: [1111,677,3245,500,200]
+}] %>
+
+<% custom_options = {
+    customOptions: {
+        subtitle: {
+            text: "Overwritten subtitle",
+            style: {
+                color: "red"
+            }
+        },
+        xAxis: {
+            categories: [
+                '<i class="far fa-apple-whole"></i> Jan',
+                '<i class="far fa-strawberry"></i> Feb',
+                '<i class="far fa-lemon"></i> Mar',
+                '<i class="far fa-pear"></i> Apr',
+                '<i class="far fa-peach"></i> May'
+            ],
+            labels: {
+                useHTML: true,
+            }
+        }
+    }
+} %>
+
+<%= pb_rails("bar_graph", props: {
+    axis_title: 'Number of Employees',
+    chart_data: data,
+    id: "bar-default",
+    y_axis_min: 0,
+    subtitle: 'Subtitle to replace',
+    title: 'Bar Graph with Custom Overrides',
+    custom_options: custom_options
+}) %>

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.jsx

@@ -0,0 +1,68 @@
+import React from 'react'
+
+import BarGraph from '../_bar_graph'
+
+const chartData = [{
+  name: 'Installation',
+  data: [1475, 200, 3000, 654, 656],
+}, {
+  name: 'Manufacturing',
+  data: [4434, 524, 2320, 440, 500],
+}, {
+  name: 'Sales & Distribution',
+  data: [3387, 743, 1344, 434, 440],
+}, {
+  name: 'Project Development',
+  data: [3227, 878, 999, 780, 1000],
+}, {
+  name: 'Other',
+  data: [1111, 677, 3245, 500, 200],
+}]
+
+const barGraphOptions = {
+  subtitle: {
+    text: "Overwritten subtitle",
+    style: {
+      color: "red"
+    }
+  },
+  xAxis: {
+      labels: {
+          useHTML: true,
+          formatter: function() {
+              switch (this.value) {
+                  case 'Jan':
+                      return `<i class="far fa-apple-whole"></i> ${this.value}`
+                  case 'Feb':
+                      return `<i class="far fa-strawberry"></i> ${this.value}`
+                  case 'Mar':
+                      return `<i class="far fa-lemon"></i> ${this.value}`
+                  case 'Apr':
+                      return `<i class="far fa-pear"></i> ${this.value}`
+                  case 'May':
+                      return `<i class="far fa-peach"></i> ${this.value}`
+                  default:
+                      return ''
+              }
+          }
+      }
+  }
+}
+
+const BarGraphCustom = (props) => (
+  <div>
+    <BarGraph
+        axisTitle="Number of Employees"
+        chartData={chartData}
+        customOptions={barGraphOptions}
+        id="bar-custom"
+        subTitle="Subtitle to replace"
+        title="Bar Graph with Custom Overrides"
+        xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May']}
+        yAxisMin={0}
+        {...props}
+    />
+  </div>
+)
+
+export default BarGraphCustom

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -0,0 +1 @@
+See https://api.highcharts.com/highcharts/ for a comprehensive list of available options.

data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml

@@ -8,6 +8,7 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
+  - bar_graph_custom: Custom Overrides
 
 
   react:
@@ -18,3 +19,4 @@ examples:
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides
+  - bar_graph_custom: Custom Overrides

data/app/pb_kits/playbook/pb_bar_graph/docs/index.js

@@ -5,3 +5,4 @@ export { default as BarGraphLegendNonClickable } from './_bar_graph_legend_non_c
 export { default as BarGraphHeight } from './_bar_graph_height.jsx'
 export { default as BarGraphSpline } from './_bar_graph_spline.jsx'
 export { default as BarGraphColors } from './_bar_graph_colors.jsx'
+export { default as BarGraphCustom } from './_bar_graph_custom.jsx'

data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.tsx

@@ -15,7 +15,7 @@ import Flex from '../../pb_flex/_flex'
 import SectionSeparator from '../../pb_section_separator/_section_separator'
 
 export type FilterDoubleProps = {
-  children?: React.ReactChild[] | React.ReactChild, 
+  children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
   onSortChange?: SortingChangeCallback,
   results?: number,
@@ -31,6 +31,7 @@ const FilterDouble = ({
   results,
   children,
   dark,
+  maxHeight,
   minWidth,
   placement,
   ...bgProps
@@ -45,6 +46,7 @@ const FilterDouble = ({
     >
       <FiltersPopover
           dark={dark}
+          maxHeight={maxHeight}
           minWidth={minWidth}
           placement={placement}
       >

data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.tsx

@@ -14,7 +14,7 @@ import SortMenu, {
 } from './SortMenu'
 
 export type FilterSingleProps = {
-  children?: React.ReactChild[] | React.ReactChild, 
+  children?: React.ReactChild[] | React.ReactChild,
   filters?: FilterDescription,
   onSortChange?: SortingChangeCallback,
   results?: number,
@@ -30,6 +30,7 @@ const FilterSingle = ({
   results,
   children,
   dark,
+  maxHeight,
   minWidth,
   placement,
   ...bgProps
@@ -48,6 +49,7 @@ const FilterSingle = ({
           <>
             <FiltersPopover
                 dark={dark}
+                maxHeight={maxHeight}
                 minWidth={minWidth}
                 placement={placement}
             >

data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.tsx

@@ -3,13 +3,14 @@ import React, { ReactNode, useState } from 'react'
 import CircleIconButton from '../../pb_circle_icon_button/_circle_icon_button'
 import PbReactPopover from '../../pb_popover/_popover'
 
-type FiltersPopoverProps = { 
+type FiltersPopoverProps = {
   children?: React.ReactChild[] | React.ReactChild | (({closePopover}: {closePopover: () => void}) =>  ReactNode), 
   dark?: boolean,
+  maxHeight?: string,
   minWidth?: string,
   placement?: "top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end",
 }
-const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
+const FiltersPopover = ({ children, dark, maxHeight, minWidth, placement = "bottom-start" }: FiltersPopoverProps): React.ReactElement => {
   const [hide, updateHide] = useState(true)
   const toggle = () => updateHide(!hide)
 
@@ -26,6 +27,7 @@ const FiltersPopover = ({ children, dark, minWidth, placement = "bottom-start" }
   return (
     <PbReactPopover
         closeOnClick="outside"
+        maxHeight={maxHeight}
         minWidth={minWidth}
         placement={placement}
         reference={filterButton}

data/app/pb_kits/playbook/pb_filter/Filter/index.tsx

@@ -8,7 +8,7 @@ type FilterProps =
       double?: boolean,
     })
 
-const Filter = ({ 
+const Filter = ({
   double = false,
   ...templateProps
   }: FilterProps): React.ReactElement => {

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb

@@ -0,0 +1,42 @@
+<%=
+  pb_rails("filter", props: {
+    max_height: "360px",
+    id: "filter_max_height_rails",
+    position: "top",
+    filters: [
+      { name: "name", value: "John Wick" },
+      { name: "city", value: "San Francisco"}
+    ],
+    sort_menu: [
+      { item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
+      { item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
+      { item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
+    ],
+    template: "default",
+    results: 1,
+  }) do
+%>
+  <%
+   example_collection = [
+      OpenStruct.new(name: "USA", value: 1),
+      OpenStruct.new(name: "Canada", value: 2),
+      OpenStruct.new(name: "Brazil", value: 3),
+      OpenStruct.new(name: "Philippines", value: 4),
+      OpenStruct.new(name: "A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...", value: 5)
+    ]
+  %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.text_field :example_text_field, props: { label: true } %>
+    <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: {max_width: "sm", label: true } %>
+
+    <%= form.actions do |action| %>
+      <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
+      <%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
+    <% end %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.jsx

@@ -0,0 +1,83 @@
+import React from 'react'
+import { Button, Filter, Flex, Select, TextInput } from '../..'
+
+const FilterMaxHeight = (props) => {
+  const options = [
+    { value: 'USA' },
+    { value: 'Canada' },
+    { value: 'Brazil' },
+    { value: 'Philippines' },
+    { value: 'A galaxy far far away, like really far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far far away...' },
+  ]
+  return (
+    <Filter
+        {...props}
+        double
+        filters={{
+          'Full Name': 'John Wick',
+          'City': 'San Francisco',
+        }}
+        maxHeight="360px"
+        minWidth="360px"
+        results={1}
+        sortOptions={{
+          popularity: 'Popularity',
+          // eslint-disable-next-line
+          manager_title: 'Manager\'s Title',
+          // eslint-disable-next-line
+          manager_name: 'Manager\'s Name',
+        }}
+        sortValue={[{ name: 'popularity', dir: 'desc' }]}
+    >
+    {({ closePopover }) => (
+      <form>
+        <Select
+            blankSelection="Select One..."
+            label="Territory"
+            name="location"
+            options={options}
+        />
+        <TextInput
+            label="First Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Middle Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Last Name"
+            placeholder="Enter name"
+            {...props}
+        />
+        <TextInput
+            label="Email"
+            placeholder="Enter email"
+            {...props}
+        />
+        <TextInput
+            label="Address"
+            placeholder="Enter address"
+            {...props}
+        />
+        <Flex
+            spacing="between"
+        >
+          <Button
+              onClick={closePopover}
+              text="Apply"
+          />
+          <Button
+              text="Clear"
+              variant="secondary"
+          />
+        </Flex>
+      </form>
+    )}
+    </Filter>
+  )
+}
+
+export default FilterMaxHeight

data/app/pb_kits/playbook/pb_filter/docs/example.yml

@@ -8,6 +8,7 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement
 
   react:
@@ -18,4 +19,5 @@ examples:
   - filter_only: Filter Only
   - sort_only: Sort Only
   - filter_max_width: Max Width for Popover Inside of Filter
+  - filter_max_height: Max Height for Popover Inside of Filter
   - filter_placement: Filter Placement

data/app/pb_kits/playbook/pb_filter/docs/index.js

@@ -5,4 +5,5 @@ export { default as FilterNoBackground } from './_filter_no_background.jsx'
 export { default as FilterOnly } from './_filter_only.jsx'
 export { default as SortOnly } from './_sort_only.jsx'
 export { default as FilterMaxWidth } from './_filter_max_width.jsx'
+export { default as FilterMaxHeight } from './_filter_max_height.jsx'
 export { default as FilterPlacement } from './_filter_placement.jsx'