playbook_ui 13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21365 → 13.10.0.pre.alpha.PLAY1051removinghighchartsdependency1465

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

@@ -3,8 +3,6 @@ import classnames from "classnames";
 import HighchartsReact from "highcharts-react-official";
 import highchartsMore from "highcharts/highcharts-more";
 
-import Highcharts from "highcharts";
-
 import { highchartsTheme } from "../pb_dashboard/pbChartsLightTheme";
 import { highchartsDarkTheme } from "../pb_dashboard/pbChartsDarkTheme";
 import mapColors from "../pb_dashboard/pbChartsColorsHelper";
@@ -12,35 +10,35 @@ import { globalProps } from "../utilities/globalProps";
 import { buildAriaProps, buildDataProps } from "../utilities/props";
 
 type CircleChartProps = {
-  align?: "left" | "right" | "center";
-  aria: { [key: string]: string };
-  chartData?: [];
-  children?: Node;
-  className?: string;
-  colors?: string[];
-  dark?: Boolean;
-  data?: Object;
-  dataLabelHtml?: string;
-  dataLabels?: boolean;
-  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;
-  borderColor?: string;
-  borderWidth?: number;
+  align?: "left" | "right" | "center",
+  aria: { [key: string]: string },
+  chartData?: [],
+  children?: Node,
+  className?: string,
+  colors?: string[],
+  dark?: Boolean,
+  data?: Object,
+  dataLabelHtml?: string,
+  dataLabels?: boolean,
+  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,
+  borderColor?: string,
+  borderWidth?: number,
 };
 
 // Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
@@ -90,29 +88,11 @@ const CircleChart = ({
 }: CircleChartProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  highchartsMore(Highcharts);
-
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  Highcharts.setOptions({
-    tooltip: {
-      headerFormat: null,
-      pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
-      useHTML: useHtml,
-    },
-  });
-
   const innerSizes = { sm: "35%", md: "50%", lg: "85%", none: "0%" };
-  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") =>
-    innerSizes[size];
-
+  const innerSizeFormat = (size: "sm" | "md" | "lg" | "none") => innerSizes[size];
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -169,26 +149,50 @@ const CircleChart = ({
       credits: false,
     };
     setOptions({ ...staticOptions });
-  }, [chartData]);
 
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        highchartsMore(window.Highcharts);
+
+        window.Highcharts.setOptions({
+          tooltip: {
+            headerFormat: null,
+            pointFormat: tooltipHtml ? tooltipHtml : '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' + "<b>{point.y}</b>",
+            useHTML: useHtml,
+          },
+        });
+
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
+  }, [chartData]);
 
   return (
     <>
       {children ? (
         <div id={`wrapper-circle-chart-${id}`}>
-          <HighchartsReact
-            containerProps={{
-              className: classnames("pb_circle_chart", globalProps(props)),
-              id: id,
-              ...ariaProps,
-              ...dataProps,
-            }}
-            highcharts={Highcharts}
-            options={options}
-          />
+          {
+            isHighchartsLoaded &&
+            <HighchartsReact
+              containerProps={{
+                className: classnames("pb_circle_chart", globalProps(props)),
+                id: id,
+                ...ariaProps,
+                ...dataProps,
+              }}
+              highcharts={window.Highcharts}
+              options={options}
+            />
+          }
           <div className="pb-circle-chart-block">{children}</div>
         </div>
       ) : (
+        isHighchartsLoaded &&
         <HighchartsReact
           containerProps={{
             className: classnames("pb_circle_chart", globalProps(props)),
@@ -196,7 +200,7 @@ const CircleChart = ({
             ...ariaProps,
             ...dataProps,
           }}
-          highcharts={Highcharts}
+          highcharts={window.Highcharts}
           options={options}
         />
       )}

data/app/pb_kits/playbook/pb_gauge/_gauge.tsx

@@ -1,7 +1,6 @@
 import React, { useState, useEffect } from "react";
 import classnames from "classnames";
 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";
@@ -14,26 +13,26 @@ import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
 import { globalProps } from "../utilities/globalProps";
 
 type GaugeProps = {
-  aria: { [key: string]: string };
-  className?: string;
-  chartData?: { name: string; value: number[] | number }[];
-  dark?: Boolean;
-  data?: { [key: string]: string };
-  disableAnimation?: boolean;
-  fullCircle?: boolean;
-  height?: string;
-  id?: string;
-  max?: number;
-  min?: number;
-  prefix?: string;
-  showLabels?: boolean;
-  style?: string;
-  suffix?: string;
-  title?: string;
-  tooltipHtml?: string;
-  colors: string[];
-  minorTickInterval: any;
-  circumference: number[];
+  aria: { [key: string]: string },
+  className?: string,
+  chartData?: { name: string, value: number[] | number }[],
+  dark?: Boolean,
+  data?: { [key: string]: string },
+  disableAnimation?: boolean,
+  fullCircle?: boolean,
+  height?: string,
+  id?: string,
+  max?: number,
+  min?: number,
+  prefix?: string,
+  showLabels?: boolean,
+  style?: string,
+  suffix?: string,
+  title?: string,
+  tooltipHtml?: string,
+  colors: string[],
+  minorTickInterval: any,
+  circumference: number[],
 };
 
 const Gauge = ({
@@ -62,28 +61,13 @@ const Gauge = ({
 }: GaugeProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  highchartsMore(Highcharts);
-  solidGauge(Highcharts);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  //set tooltip directly to prevent being overriden by Highcharts defaults
-  Highcharts.setOptions({
-    tooltip: {
-      pointFormat: tooltipHtml,
-      followPointer: true,
-    },
-  });
 
   const css = buildCss({
     pb_gauge_kit: true,
   });
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     const formattedChartData = chartData.map((obj: any) => {
@@ -174,18 +158,45 @@ const Gauge = ({
 
     setOptions({ ...staticOptions });
 
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        
+        const gaugeInterval = setInterval(() => {
+          if (document.querySelector(".prefix")) {
+            clearInterval(gaugeInterval)
+            document.querySelectorAll(".prefix").forEach((prefix) => {
+              prefix.setAttribute("y", "28");
+            });
+            document
+              .querySelectorAll(".fix")
+              .forEach((fix) => fix.setAttribute("y", "38"));
+          }
+        }, 0)
+
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        
+        highchartsMore(window.Highcharts);
+        solidGauge(window.Highcharts);
+      
+        //set tooltip directly to prevent being overriden by window.Highcharts defaults
+        window.Highcharts.setOptions({
+          tooltip: {
+            pointFormat: tooltipHtml,
+            followPointer: true,
+          },
+        });
+
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
 
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(css, globalProps(props)),
@@ -193,7 +204,7 @@ const Gauge = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_props.md

@@ -0,0 +1,6 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Icon** | `PlaybookGenericIcon` | Sets the kit's Icon |  |  |
+| **Size** | `PBIcon.IconSize` | Changes the size of the Circle Icon | `.x1` |  `xSmall` `small` `large` `x1` `x2` `x3` `x4` `x5` `x6` `x7` `x8` `x9` `x10` |
+| **Color** | `Color` | Changes color of the Icon and background | `.status(.neutral)` | `Color` |

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_color_swift.md

@@ -0,0 +1,16 @@
+![icon-circle-colors](https://github.com/powerhome/playbook/assets/92755007/d6507900-98e9-49fb-acfb-a238bef08d1b)
+
+```swift
+
+VStack(spacing: Spacing.small) {
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data1))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data2))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data3))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data4))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data5))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data6))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data7))
+  PBIconCircle(FontAwesome.rocket, size: .small, color: Color.data(.data8))
+}
+
+```

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_defaul_swift.md

@@ -0,0 +1,7 @@
+![icon-circle-default](https://github.com/powerhome/playbook/assets/92755007/d5de652d-ff9e-4b54-b55e-a3bf58d7cb23)
+
+```swift
+
+PBIconCircle(FontAwesome.rocket)
+
+```

data/app/pb_kits/playbook/pb_icon_circle/docs/_icon_circle_sizes_swift.md

@@ -0,0 +1,11 @@
+![circle-icon-sizes](https://github.com/powerhome/playbook/assets/92755007/2a474df1-5712-4c2a-9d6b-fb740ae949f2)
+
+```swift
+
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBIconCircle(FontAwesome.rocket, size: .small)
+  PBIconCircle(FontAwesome.rocket, size: .x1)
+  PBIconCircle(FontAwesome.rocket, size: .large)
+}
+
+```

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

@@ -12,3 +12,10 @@ examples:
   - icon_circle_sizes: Size
   - icon_circle_color: Color
   - icon_circle_emoji: With Emoji
+
+  swift:
+  - icon_circle_defaul_swift: Default
+  - icon_circle_sizes_swift: Size
+  - icon_circle_color_swift: Color
+  - icon_circle_color_props: "" 
+  

data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx

@@ -4,39 +4,38 @@ 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";
 
 type LineGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle?: string;
-  dark?: Boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  className?: string;
+  align?: "left" | "right" | "center",
+  axisTitle?: string,
+  dark?: Boolean,
+  xAxisCategories: [],
+  yAxisMin: number,
+  yAxisMax: number,
+  className?: string,
   chartData: {
-    name: string;
-    data: number[];
-  }[];
-  gradient?: boolean;
-  id: string;
-  pointStart: number;
-  subTitle?: string;
-  title: string;
-  type?: string;
-  legend?: boolean;
-  toggleLegendClick?: boolean;
-  height?: string;
-  colors: string[];
-  layout?: "horizontal" | "vertical" | "proximate";
-  verticalAlign?: "top" | "middle" | "bottom";
-  x?: number;
-  y?: number;
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
+    name: string,
+    data: number[],
+  }[],
+  gradient?: boolean,
+  id: string,
+  pointStart: number,
+  subTitle?: string,
+  title: string,
+  type?: string,
+  legend?: boolean,
+  toggleLegendClick?: boolean,
+  height?: string,
+  colors: string[],
+  layout?: "horizontal" | "vertical" | "proximate",
+  verticalAlign?: "top" | "middle" | "bottom",
+  x?: number,
+  y?: number,
+  aria?: { [key: string]: string },
+  data?: { [key: string]: string },
 };
 
 const LineGraph = ({
@@ -68,12 +67,6 @@ const LineGraph = ({
 }: LineGraphProps) => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
 
   const staticOptions = {
     title: {
@@ -126,12 +119,24 @@ const LineGraph = ({
   }
 
   const [options, setOptions] = useState({});
+  const [isHighchartsLoaded, setIsHighchartsLoaded] = useState(false);
 
   useEffect(() => {
     setOptions({ ...staticOptions });
+
+    const interval = setInterval(() => {
+      if (window.Highcharts) {
+        clearInterval(interval)
+        dark
+          ? window.Highcharts.setOptions(highchartsDarkTheme)
+          : window.Highcharts.setOptions(highchartsTheme)
+        setIsHighchartsLoaded(true)
+      }
+    }, 0)
   }, [chartData]);
 
   return (
+    isHighchartsLoaded &&
     <HighchartsReact
       containerProps={{
         className: classnames(globalProps(props), className),
@@ -139,7 +144,7 @@ const LineGraph = ({
         ...ariaProps,
         ...dataProps,
       }}
-      highcharts={Highcharts}
+      highcharts={window.Highcharts}
       options={options}
     />
   );

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -4,7 +4,6 @@ import { globalProps, GlobalProps } from "../utilities/globalProps"
 import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props"
 import Checkbox from "../pb_checkbox/_checkbox"
 import Radio from "../pb_radio/_radio"
-import Body from "../pb_body/_body"
 import Icon from "../pb_icon/_icon"
 import FormPill from "../pb_form_pill/_form_pill"
 import CircleIconButton from "../pb_circle_icon_button/_circle_icon_button"
@@ -32,7 +31,6 @@ type MultiLevelSelectProps = {
   treeData?: { [key: string]: string }[]
   onSelect?: (prop: { [key: string]: any }) => void
   selectedIds?: string[]
-  // ultimateChildrenOnly?: boolean
   variant?: "multi" | "single"
 } & GlobalProps
 
@@ -49,7 +47,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
     treeData,
     onSelect = () => null,
     selectedIds,
-    // ultimateChildrenOnly = false,
     variant = "multi"
   } = props
 
@@ -349,26 +346,25 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                     data-name={item.id}
                 >
                   <div className="dropdown_item_checkbox_row">
-                    {item.children && item.children.length > 0
-                    ?
-                      <div
-                          key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
-                      >
-                        <CircleIconButton
-                            icon={
-                              isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
-                            }
-                            onClick={(event: any) =>
-                              handleToggleClick(item.id, event)
-                            }
-                            variant="link"
-                        />
-                      </div>
-                    : null}
+                    <div
+                        key={isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"}
+                    >
+                      <CircleIconButton
+                          className={
+                            item.children && item.children.length > 0
+                              ? ""
+                              : "toggle_icon"
+                          }
+                          icon={
+                            isTreeRowExpanded(item) ? "chevron-down" : "chevron-right"
+                          }
+                          onClick={(event: any) =>
+                            handleToggleClick(item.id, event)
+                          }
+                          variant="link"
+                      />
+                    </div>
                     { variant === "single" ? (
-                      item.hideRadio ? (
-                        <Body>{item.label}</Body>
-                      ) :
                       <Radio
                           checked={item.checked}
                           id={`${item.id}-${item.label}`}
@@ -377,7 +373,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
                           onChange={(e: React.ChangeEvent<HTMLInputElement>) => (
                             handleRadioButtonClick(e)
                           )}
-                          padding='xs'
                           type="radio"
                           value={item.label}
                       />
@@ -534,4 +529,4 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
   )
 }
 
-export default MultiLevelSelect
+export default MultiLevelSelect

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_selected_ids.html.erb

@@ -73,3 +73,4 @@
     selected_ids:["110","102"],
     tree_data: treeData,
 }) %>
+