playbook_ui 11.15.0 → 11.16.0.pre.alpha.paginationrails1

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx

@@ -0,0 +1,111 @@
+import React, { useState, useEffect } from "react";
+import classnames from "classnames";
+
+import { globalProps } from "../utilities/globalProps";
+import { buildAriaProps, buildDataProps } from "../utilities/props";
+
+import HighchartsReact from "highcharts-react-official";
+import Highcharts from "highcharts";
+import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
+import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
+import mapColors from "../pb_dashboard/pbChartsColorsHelper";
+import treemap from 'highcharts/modules/treemap'
+
+type TreemapChartProps = {
+  chartData: {
+    name: string;
+    parent?: string | number;
+    value: number;
+    color?: string;
+    id?: string | number;
+  }[];
+  className?: string;
+  colors: string[];
+  dark?: boolean;
+  drillable: boolean;
+  grouped: boolean;
+  height?: string;
+  id: number | string;
+  title?: string;
+  tooltipHtml: string;
+  type?: string;
+  aria?: { [key: string]: string };
+  data?: { [key: string]: string };
+};
+
+const TreemapChart = ({
+  aria = {},
+  data = {},
+  chartData,
+  colors,
+  dark = false,
+  drillable = false,
+  grouped = false,
+  height,
+  id,
+  title = "",
+  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
+  type = "treemap",
+  ...props
+}: TreemapChartProps) => {
+  const ariaProps = buildAriaProps(aria);
+  const dataProps = buildDataProps(data);
+  const setupTheme = () => {
+    dark
+      ? Highcharts.setOptions(highchartsDarkTheme)
+      : Highcharts.setOptions(highchartsTheme);
+  };  
+  treemap(Highcharts)
+  setupTheme();  
+
+  const staticOptions = {
+    title: {
+      text: title,
+    },
+    chart: {
+      height: height,
+      type: type,
+    },
+    credits: false,
+    series: [
+      {
+        data: chartData,
+      },
+    ],
+    plotOptions: {
+      treemap: {
+        tooltip: {
+          pointFormat: tooltipHtml,
+        },
+        allowTraversingTree: drillable,
+        colorByPoint: !grouped,
+        colors:
+          colors !== undefined && colors.length > 0
+            ? mapColors(colors)
+            : highchartsTheme.colors,
+      },
+    },
+  };
+
+  const [options, setOptions] = useState({});
+
+  useEffect(() => {
+    
+    setOptions({ ...staticOptions });
+  }, [chartData]);
+
+  return (
+    <HighchartsReact
+      containerProps={{
+        className: classnames(globalProps(props), "pb_treemap_chart"),
+        id: id,
+        ...ariaProps,
+        ...dataProps,
+      }}
+      highcharts={Highcharts}
+      options={options}
+    />
+  );
+};
+
+export default TreemapChart;

data/app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_tooltip.jsx

@@ -39,7 +39,7 @@ const TreemapChartTooltip = (props) => (
         chartData={chartData}
         id="treemap-tooltip"
         title="Favored Pizza Toppings"
-        tooltipHtml={"<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>"}
+        tooltipHtml= '<p>Custom tooltip for {point.name} <br/>with value: {point.value}</p>'
         {...props}
     />
   </div>

data/app/pb_kits/playbook/playbook-doc.js

@@ -60,6 +60,7 @@ import * as MultipleUsers from 'pb_multiple_users/docs'
 import * as MultipleUsersStacked from 'pb_multiple_users_stacked/docs'
 import * as Nav from 'pb_nav/docs'
 import * as OnlineStatus from 'pb_online_status/docs'
+import * as Pagination from 'pb_pagination/docs'
 import * as Passphrase from 'pb_passphrase/docs'
 import * as PbReactPopover from 'pb_popover/docs'
 import * as Person from 'pb_person/docs'
@@ -157,6 +158,7 @@ WebpackerReact.setup({
   ...MultipleUsersStacked,
   ...Nav,
   ...OnlineStatus,
+  ...Pagination,
   ...Passphrase,
   ...PbReactPopover,
   ...Person,

data/app/pb_kits/playbook/playbook-rails-react-bindings.js

@@ -4,11 +4,13 @@ import WebpackerReact from 'webpacker-react'
 import ujs from 'webpacker-react/ujs'
 
 import BarGraph from './pb_bar_graph/_bar_graph'
+import CircleChart from './pb_circle_chart/_circle_chart'
 import Dialog from './pb_dialog/_dialog'
 import DialogBody from './pb_dialog/child_kits/_dialog_body'
 import DialogFooter from './pb_dialog/child_kits/_dialog_footer'
 import DialogHeader from './pb_dialog/child_kits/_dialog_header'
 import DistributionBar from './pb_distribution_bar/_distribution_bar'
+import Gauge from './pb_gauge/_gauge'
 import Legend from './pb_legend/_legend'
 import LineGraph from './pb_line_graph/_line_graph'
 import Passphrase from './pb_passphrase/_passphrase'
@@ -18,6 +20,7 @@ import Typeahead from './pb_typeahead/_typeahead'
 
 WebpackerReact.registerComponents({
   BarGraph,
+  CircleChart,
   Dialog,
   DialogBody,
   DialogFooter,
@@ -29,6 +32,7 @@ WebpackerReact.registerComponents({
   RichTextEditor,
   TreemapChart,
   Typeahead,
+  Gauge,
 })
 
 ujs.setup(

data/app/pb_kits/playbook/playbook-rails.js

@@ -1,7 +1,3 @@
-// Charts
-import pbChart from './plugins/pb_chart'
-window.pbChart = pbChart
-
 // Forms
 import './pb_form/pb_form_validation'
 

data/lib/playbook/kit_base.rb

@@ -19,6 +19,7 @@ require "playbook/flex"
 require "playbook/flex_grow"
 require "playbook/flex_shrink"
 require "playbook/order"
+require "playbook/pagination_renderer"
 
 module Playbook
   class KitBase < ViewComponent::Base
@@ -43,6 +44,7 @@ module Playbook
     include Playbook::FlexGrow
     include Playbook::FlexShrink
     include Playbook::Order
+    include Playbook::Pagination
 
     prop :id
     prop :data, type: Playbook::Props::Hash, default: {}

data/lib/playbook/pagination_renderer.rb

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+
+require "will_paginate/view_helpers/action_view"
+
+module Playbook
+  module Pagination
+    class Rails < WillPaginate::ActionView::LinkRenderer
+      def container_attributes
+        { class: "pb_pagination" }
+      end
+
+      def page_number(page)
+        if page == current_page
+          tag("li", tag("span", page), class: "active")
+        else
+          tag("li", link(page, page, rel: rel_value(page)))
+        end
+      end
+
+      def previous_or_next_page(page, text, classname)
+        if page
+          tag("li", link(text, page), class: classname)
+        else
+          tag("li", tag("span", text), class: "%s disabled")
+        end
+      end
+
+      def gap; end
+
+      def previous_page
+        num = @collection.current_page > 1 && @collection.current_page - 1
+        previous_or_next_page(num, "<i class='far fa-chevron-left fa-xs'></i>", "prev")
+      end
+
+      def next_page
+        num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
+        previous_or_next_page(num, "<i class='far fa-chevron-right fa-xs'></i>", "next")
+      end
+    end
+  end
+end

data/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.14.0"
-  VERSION = "11.15.0"
+  PREVIOUS_VERSION = "11.16.0"
+  VERSION = "11.16.0.pre.alpha.paginationrails1"
 end

data/lib/playbook.rb

@@ -12,6 +12,7 @@ require "playbook/pb_doc_helper"
 require "playbook/kit_base"
 require "playbook/kit_resolver"
 require "playbook/markdown"
+require "playbook/pagination_renderer"
 
 module Playbook
   ROOT_PATH = Pathname.new(File.join(__dir__, ".."))

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.15.0
+  version: 11.16.0.pre.alpha.paginationrails1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-12-19 00:00:00.000000000 Z
+date: 2023-01-04 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -269,6 +269,20 @@ dependencies:
     - - '='
       - !ruby/object:Gem::Version
         version: 1.2018.9
+- !ruby/object:Gem::Dependency
+  name: will_paginate
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '3.3'
 description: Playbook Design System. Built for Nitro, but powering all.
 email:
 - nitroux@powerhrg.com
@@ -361,8 +375,8 @@ files:
 - app/pb_kits/playbook/pb_badge/docs/_description.md
 - app/pb_kits/playbook/pb_badge/docs/example.yml
 - app/pb_kits/playbook/pb_badge/docs/index.js
-- app/pb_kits/playbook/pb_bar_graph/_bar_graph.jsx
 - app/pb_kits/playbook/pb_bar_graph/_bar_graph.scss
+- app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx
 - app/pb_kits/playbook/pb_bar_graph/barGraphSettings.js
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.html.erb
 - app/pb_kits/playbook/pb_bar_graph/bar_graph.rb
@@ -540,8 +554,9 @@ files:
 - app/pb_kits/playbook/pb_checkbox/docs/_description.md
 - app/pb_kits/playbook/pb_checkbox/docs/example.yml
 - app/pb_kits/playbook/pb_checkbox/docs/index.js
-- app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx
+- app/pb_kits/playbook/pb_circle_chart/ChartsTypes.ts
 - app/pb_kits/playbook/pb_circle_chart/_circle_chart.scss
+- app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.html.erb
 - app/pb_kits/playbook/pb_circle_chart/circle_chart.rb
 - app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb
@@ -638,8 +653,10 @@ files:
 - app/pb_kits/playbook/pb_currency/docs/example.yml
 - app/pb_kits/playbook/pb_currency/docs/index.js
 - app/pb_kits/playbook/pb_dashboard/commonSettings.js
-- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js
-- app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.js
+- app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts
+- app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts
+- app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts
+- app/pb_kits/playbook/pb_dashboard/themeTypes.ts
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss
 - app/pb_kits/playbook/pb_dashboard_value/_dashboard_value_mixins.scss
@@ -1033,8 +1050,8 @@ files:
 - app/pb_kits/playbook/pb_form_pill/docs/index.js
 - app/pb_kits/playbook/pb_form_pill/form_pill.html.erb
 - app/pb_kits/playbook/pb_form_pill/form_pill.rb
-- app/pb_kits/playbook/pb_gauge/_gauge.jsx
 - app/pb_kits/playbook/pb_gauge/_gauge.scss
+- app/pb_kits/playbook/pb_gauge/_gauge.tsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.html.erb
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.jsx
 - app/pb_kits/playbook/pb_gauge/docs/_gauge_colors.md
@@ -1311,8 +1328,8 @@ files:
 - app/pb_kits/playbook/pb_lightbox/hooks/useWindowSize.ts
 - app/pb_kits/playbook/pb_lightbox/lightbox.scss
 - app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx
-- app/pb_kits/playbook/pb_line_graph/_line_graph.jsx
 - app/pb_kits/playbook/pb_line_graph/_line_graph.scss
+- app/pb_kits/playbook/pb_line_graph/_line_graph.tsx
 - app/pb_kits/playbook/pb_line_graph/docs/_description.md
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.html.erb
 - app/pb_kits/playbook/pb_line_graph/docs/_line_graph_colors.jsx
@@ -1460,6 +1477,15 @@ files:
 - app/pb_kits/playbook/pb_online_status/docs/index.js
 - app/pb_kits/playbook/pb_online_status/online_status.html.erb
 - app/pb_kits/playbook/pb_online_status/online_status.rb
+- app/pb_kits/playbook/pb_pagination/_pagination.scss
+- app/pb_kits/playbook/pb_pagination/_pagination.tsx
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb
+- app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx
+- app/pb_kits/playbook/pb_pagination/docs/example.yml
+- app/pb_kits/playbook/pb_pagination/docs/index.js
+- app/pb_kits/playbook/pb_pagination/pagination.html.erb
+- app/pb_kits/playbook/pb_pagination/pagination.rb
+- app/pb_kits/playbook/pb_pagination/pagination.test.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.jsx
 - app/pb_kits/playbook/pb_passphrase/_passphrase.scss
 - app/pb_kits/playbook/pb_passphrase/docs/_passphrase_breached.html.erb
@@ -2097,7 +2123,7 @@ files:
 - app/pb_kits/playbook/pb_tooltip/tooltip.html.erb
 - app/pb_kits/playbook/pb_tooltip/tooltip.rb
 - app/pb_kits/playbook/pb_tooltip/tooltip.test.jsx
-- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx
+- app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx
 - app/pb_kits/playbook/pb_treemap_chart/docs/_description.md
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.html.erb
 - app/pb_kits/playbook/pb_treemap_chart/docs/_treemap_chart_colors.jsx
@@ -2223,7 +2249,6 @@ files:
 - app/pb_kits/playbook/playbook-doc.js
 - app/pb_kits/playbook/playbook-rails-react-bindings.js
 - app/pb_kits/playbook/playbook-rails.js
-- app/pb_kits/playbook/plugins/pb_chart.js
 - app/pb_kits/playbook/tokens/_animation-curves.scss
 - app/pb_kits/playbook/tokens/_border_radius.scss
 - app/pb_kits/playbook/tokens/_colors.scss
@@ -2321,6 +2346,7 @@ files:
 - lib/playbook/markdown/template_handler.rb
 - lib/playbook/number_spacing.rb
 - lib/playbook/order.rb
+- lib/playbook/pagination_renderer.rb
 - lib/playbook/pb_doc_helper.rb
 - lib/playbook/pb_forms_helper.rb
 - lib/playbook/pb_kit_helper.rb
@@ -2359,9 +2385,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key:

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

@@ -1,111 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-import pbChart from '../plugins/pb_chart'
-
-type BarGraphProps = {
-  align?: "left" | "right" | "center",
-  axisTitle: string,
-  dark?: Boolean,
-  xAxisCategories: array,
-  yAxisMin: number,
-  yAxisMax: number,
-  chartData: array<{
-    name: string,
-    data: array<number>,
-  }>,
-  className?: string,
-  id: number,
-  pointStart: number,
-  subTitle?: string,
-  title: string,
-  type?: string,
-  legend?: boolean,
-  toggleLegendClick?: boolean,
-  height?: string,
-  colors: array,
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-}
-
-export default class BarGraph extends React.Component<BarGraphProps> {
-  static defaultProps = {
-    align: "center",
-    className: 'pb_bar_graph',
-    dark: false,
-    type: 'column',
-    legend: false,
-    toggleLegendClick: true,
-    layout: "horizontal",
-    verticalAlign: "bottom",
-    x: 0,
-    y: 0,
-  }
-
-  componentDidMount() {
-    const {
-      align,
-      axisTitle,
-      dark,
-      xAxisCategories,
-      yAxisMin,
-      yAxisMax,
-      className,
-      chartData,
-      id,
-      pointStart,
-      subTitle,
-      title,
-      type,
-      legend,
-      height,
-      toggleLegendClick,
-      colors  = [],
-      layout,
-      verticalAlign,
-      x,
-      y,
-    } = this.props
-
-    new pbChart(`.${className}`, {
-      align,
-      axisTitle: axisTitle,
-      dark,
-      chartData: chartData,
-      colors: colors,
-      id: id,
-      pointStart: pointStart,
-      subtitle: subTitle,
-      type,
-      title: title,
-      xAxisCategories: xAxisCategories,
-      yAxisMin: yAxisMin,
-      yAxisMax: yAxisMax,
-      legend,
-      toggleLegendClick: toggleLegendClick,
-      height: height,
-      layout,
-      verticalAlign,
-      x,
-      y,
-    })
-  }
-
-  props: BarGraphProps
-
-  render() {
-    const { className, id } = this.props
-
-    return (
-      <div
-          className={classnames(globalProps(this.props), className)}
-          id={id}
-      />
-    )
-  }
-}

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx

@@ -1,151 +0,0 @@
-/* @flow */
-
-import React, { useEffect, useRef } from 'react'
-import classnames from 'classnames'
-import Highcharts from 'highcharts'
-
-import { globalProps } from '../utilities/globalProps'
-import { buildAriaProps, buildDataProps } from '../utilities/props'
-
-import pbChart from '../plugins/pb_chart'
-type CircleChartProps = {
-  align?: "left" | "right" | "center",
-  aria: Object,
-  chartData?: array,
-  children: Node,
-  className?: string,
-  colors: array,
-  dark?: Boolean,
-  data?: Object,
-  dataLabelHtml: string,
-  dataLabels: boolean,
-  headerFormat: string,
-  height?: string,
-  id?: string,
-  innerSize: "sm" | "md" | "lg" | "none",
-  legend: boolean,
-  maxPointSize: number,
-  minPointSize: number,
-  rounded: boolean,
-  startAngle: number,
-  style: string,
-  title: string,
-  tooltipHtml: string,
-  useHtml: boolean,
-  zMin: number,
-  layout?: "horizontal" | "vertical" | "proximate",
-  verticalAlign?: "top" | "middle" | "bottom",
-  x?: number,
-  y?: number,
-}
-
-const CircleChart = (props: CircleChartProps) => {
-  const {
-    align = 'center',
-    aria = {},
-    chartData = [{}],
-    children,
-    className,
-    colors = [],
-    dark = false,
-    data = {},
-    dataLabelHtml = '<div>{point.name}</div>',
-    dataLabels = false,
-    headerFormat = null,
-    height,
-    id,
-    innerSize = 'md',
-    legend = false,
-    maxPointSize = null,
-    minPointSize = null,
-    rounded = false,
-    startAngle = null,
-    style = 'pie',
-    title = '',
-    tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-      '<b>{point.y}</b>',
-    useHtml = false,
-    zMin = null,
-    layout = 'horizontal',
-    verticalAlign = 'bottom',
-    x = 0,
-    y = 0,
-  } = props
-
-  const ariaProps = buildAriaProps(aria)
-  const dataProps = buildDataProps(data)
-  const innerSizes = { sm: '35%', md: '50%', lg: '85%', none: '0%' }
-  const innerSizeFormat = (size) => innerSizes[size]
-  const roundedBorderWidth = rounded ? 20 : null
-  const roundedBorderColor = rounded ? null : ''
-
-  // Runs first time component Renders
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj) => {
-      obj.y = obj.value
-      delete obj.value
-      return obj
-    })
-
-    new pbChart('.selector', {
-      align,
-      id,
-      colors,
-      borderColor: roundedBorderColor,
-      borderWidth: roundedBorderWidth,
-      chartData: formattedChartData,
-      dark,
-      title,
-      type: style,
-      showInLegend: legend,
-      dataLabelHtml,
-      dataLabels,
-      headerFormat,
-      height: height,
-      tooltipHtml,
-      useHTML: useHtml,
-      minPointSize,
-      maxPointSize,
-      innerSize: innerSizeFormat(innerSize),
-      zMin,
-      startAngle,
-      layout,
-      verticalAlign,
-      x,
-      y,
-    })
-  }, [])
-
-  const componentDidMount = useRef(false)
-
-  // Doesn't run the first time but runs every subsequent render
-  useEffect(() => {
-    if (componentDidMount.current) {
-      Highcharts.charts.forEach((chart) => {
-        if (chart && chart.renderTo.id === id) {
-          const updatedValueArray = chartData.map((obj) => {
-            return obj.value
-          })
-          chart.series[0].setData(updatedValueArray)
-        }
-      })
-    } else {
-      componentDidMount.current = true
-    }
-  }, [chartData])
-  return (
-    <div id={`wrapper-circle-chart-${id}`}>
-      <div
-          id={id}
-          {...ariaProps}
-          {...dataProps}
-          className={classnames('pb_circle_chart', globalProps(props), className)}
-      />
-      <If condition={children}>
-        <div className="pb-circle-chart-block">{children}</div>
-      </If>
-    </div>
-  )
-}
-
-export default CircleChart