playbook_ui 11.16.0.pre.alpha.reactupgrade1 → 11.16.0

data/app/pb_kits/playbook/pb_popover/_popover.jsx

@@ -1,25 +1,19 @@
-/* eslint-disable react/no-multi-comp */
 // @flow
 
-import React, {useEffect} from "react";
-import ReactDOM from "react-dom";
+import React from 'react'
+import ReactDOM from 'react-dom'
 
 import {
   Popper,
   Manager as PopperManager,
   PopperProps,
   Reference as PopperReference,
-} from "react-popper";
+} from 'react-popper'
 
-import {
-  buildAriaProps,
-  buildCss,
-  buildDataProps,
-  noop,
-} from "../utilities/props";
+import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
 
-import classnames from "classnames";
-import { globalProps } from "../utilities/globalProps";
+import classnames from 'classnames'
+import { globalProps } from '../utilities/globalProps'
 
 type PbPopoverProps = {
   aria?: object,
@@ -31,7 +25,7 @@ type PbPopoverProps = {
   reference: PopperReference,
   show?: boolean,
   shouldClosePopover?: () => boolean,
-} & PopperProps;
+} & PopperProps
 
 // Prop enabled default modifiers here
 // https://popper.js.org/docs/v2/modifiers
@@ -40,17 +34,17 @@ const POPOVER_MODIFIERS = {
   offset: {
     //https://popper.js.org/docs/v2/modifiers/offset/
     enabled: true,
-    name: "offset",
+    name: 'offset',
     options: {
       offset: [0, 20],
     },
-    phase: "main",
+    phase: 'main',
   },
-};
+}
 
 const popoverModifiers = ({ modifiers, offset }) => {
-  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers;
-};
+  return offset ? modifiers.concat([POPOVER_MODIFIERS.offset]) : modifiers
+}
 
 const Popover = (props: PbPopoverProps) => {
   const {
@@ -68,14 +62,11 @@ const Popover = (props: PbPopoverProps) => {
     maxWidth,
     minHeight,
     minWidth,
-  } = props;
-
-  const popoverSpacing =
-    globalProps(props).includes("dark") || !globalProps(props)
-      ? "p_sm"
-      : globalProps(props);
-  const overflowHandling = maxHeight || maxWidth ? "overflow_handling" : "";
-  const zIndexStyle = zIndex ? { zIndex: zIndex } : {};
+  } = props
+
+  const popoverSpacing = globalProps(props).includes('dark') || !globalProps(props) ? 'p_sm' : globalProps(props)
+  const overflowHandling = maxHeight || maxWidth ? 'overflow_handling' : ''
+  const zIndexStyle = zIndex ? { zIndex: zIndex } : {}
   const widthHeightStyles = () => {
     return Object.assign(
       {},
@@ -83,15 +74,15 @@ const Popover = (props: PbPopoverProps) => {
       maxWidth ? { maxWidth: maxWidth } : {},
       minHeight ? { minHeight: minHeight } : {},
       minWidth ? { minWidth: minWidth } : {}
-    );
-  };
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
+    )
+  }
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
   const classes = classnames(
-    buildCss("pb_popover_kit"),
+    buildCss('pb_popover_kit'),
     globalProps(props),
     className
-  );
+  )
 
   return (
     <Popper
@@ -108,14 +99,20 @@ const Popover = (props: PbPopoverProps) => {
               data-placement={placement}
               id={id}
               ref={ref}
-              style={Object.assign({}, style, zIndexStyle)}
+              style={Object.assign(
+                {},
+                style,
+                zIndexStyle
+              )}
           >
             <div
-                className={classnames(`${buildCss("pb_popover_tooltip")} show`)}
+                className={classnames(
+                `${buildCss('pb_popover_tooltip')} show`
+              )}
             >
               <div
                   className={classnames(
-                  "pb_popover_body",
+                  'pb_popover_body',
                   popoverSpacing,
                   overflowHandling
                 )}
@@ -125,33 +122,25 @@ const Popover = (props: PbPopoverProps) => {
               </div>
             </div>
           </div>
-        );
+        )
       }}
     </Popper>
-  );
-};
-
-const PbReactPopover = (props: PbPopoverProps) => {
-  const {
-    className,
-    children,
-    modifiers = [],
-    offset = false,
-    placement = "left",
-    portal = "body",
-    reference,
-    referenceElement,
-    show = false,
-    usePortal = true,
-    zIndex,
-    maxHeight,
-    maxWidth,
-    minHeight,
-    minWidth,
-  } = props;
-
-  useEffect(() => {
-    const { closeOnClick, shouldClosePopover = noop } = props
+  )
+}
+
+export default class PbReactPopover extends React.Component<PbPopoverProps> {
+  static defaultProps = {
+    modifiers: [],
+    offset: false,
+    placement: 'left',
+    portal: 'body',
+    show: false,
+    shouldClosePopover: noop,
+    usePortal: true,
+  }
+
+  componentDidMount() {
+    const { closeOnClick, shouldClosePopover } = this.props
 
     if (!closeOnClick) return
 
@@ -162,66 +151,87 @@ const PbReactPopover = (props: PbPopoverProps) => {
         target.closest('.pb_popover_reference_wrapper') !== null
 
       switch (closeOnClick) {
-        case 'outside':
-          if (!targetIsPopover || targetIsReference) {
-            shouldClosePopover(true)
-          }
-          break
-        case 'inside':
-          if (targetIsPopover || targetIsReference) {
-            shouldClosePopover(true)
-          }
-          break
-        case 'any':
+      case 'outside':
+        if (!targetIsPopover || targetIsReference) {
+          shouldClosePopover(true)
+        }
+        break
+      case 'inside':
+        if (targetIsPopover || targetIsReference) {
           shouldClosePopover(true)
-          break
+        }
+        break
+      case 'any':
+        shouldClosePopover(true)
+        break
       }
-    }, { capture: true })
-  }, [])
-
-  const popoverComponent = (
-    <Popover
-        className={className}
-        maxHeight={maxHeight}
-        maxWidth={maxWidth}
-        minHeight={minHeight}
-        minWidth={minWidth}
-        modifiers={modifiers}
-        offset={offset}
-        placement={placement}
-        referenceElement={referenceElement}
-        zIndex={zIndex}
-        {...props}
-    >
-      {children}
-    </Popover>
-  );
-
-  return (
-    <PopperManager>
-      <If condition={reference && !referenceElement}>
-        <PopperReference>
-          {({ ref }) => (
-            <span className="pb_popover_reference_wrapper"
-                ref={ref}
-            >
-              <reference.type {...reference.props} />
-            </span>
-          )}
-        </PopperReference>
-      </If>
-      <If condition={show}>
-        <If condition={usePortal}>
-          {ReactDOM.createPortal(
-            popoverComponent,
-            document.querySelector(portal)
-          )}
-          <Else />
-          {popoverComponent}
+    })
+  }
+
+  props: PbPopoverProps
+
+  render() {
+    const {
+      className,
+      children,
+      modifiers,
+      offset,
+      placement,
+      portal,
+      reference,
+      referenceElement,
+      show,
+      usePortal,
+      zIndex,
+      maxHeight,
+      maxWidth,
+      minHeight,
+      minWidth,
+    } = this.props
+
+    const popoverComponent = (
+      <Popover
+          {...this.props}
+          className={className}
+          maxHeight={maxHeight}
+          maxWidth={maxWidth}
+          minHeight={minHeight}
+          minWidth={minWidth}
+          modifiers={modifiers}
+          offset={offset}
+          placement={placement}
+          referenceElement={referenceElement}
+          zIndex={zIndex}
+      >
+        {children}
+      </Popover>
+    )
+
+    return (
+      <PopperManager>
+        <If condition={reference && !referenceElement}>
+          <PopperReference>
+            {({ ref }) => (
+              <span
+                  className="pb_popover_reference_wrapper"
+                  ref={ref}
+              >
+                <reference.type {...reference.props} />
+              </span>
+            )}
+          </PopperReference>
         </If>
-      </If>
-    </PopperManager>
-  );
-};
-
-export default PbReactPopover;
+        <If condition={show}>
+          <If condition={usePortal}>
+            {ReactDOM.createPortal(
+              popoverComponent,
+              document.querySelector(portal)
+            )}
+            <Else />
+            {popoverComponent}
+          </If>
+        </If>
+      </PopperManager>
+    )
+  }
+}

data/app/pb_kits/playbook/pb_popover/docs/_popover_close.jsx

@@ -31,7 +31,7 @@ const PopoverClose = (props) => {
   }
 
   const handleAnyTogglePopover = () => {
-    setAnyShowPopover(!showAnyPopover)
+    setAnyShowPopover(!showOutsidePopover)
   }
 
   const insidePopoverTrigger = (

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-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/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.15.0"
-  VERSION = "11.16.0.pre.alpha.reactupgrade1"
+  VERSION = "11.16.0"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.16.0.pre.alpha.reactupgrade1
+  version: 11.16.0
 platform: ruby
 authors:
 - Power UX
@@ -361,8 +361,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 +540,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 +639,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 +1036,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 +1314,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
@@ -2097,7 +2100,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 +2226,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
@@ -2359,9 +2361,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
 signing_key: