playbook_ui 13.11.1.pre.alpha.play900startratingasinput1530 → 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: df86d3fc38841c918052adf36873f880d5293678f7ec63f40a18242ad42ffc26
-  data.tar.gz: a6a51837f8e237cd0bbbe8c74d4ad73f76049014786542e4272aae671a2b7513
+  metadata.gz: 4a59ab1213c1c17a6ab6bfa775d7ac7edf06972be95d950e479f16b8cafc4216
+  data.tar.gz: cb50f83ac242358db6b9e951ba8d7fa7bfee32ff78c02eef0b0829ed5e97a0d7
 SHA512:
-  metadata.gz: bb6e551893a8425a04a43cf5c6638174d3f393ab8f072b0b74140e367c47a44631b97f98f813ceee5f64e5a3159fc010f97e6eaffb3669693621b94028498d25
-  data.tar.gz: bd45046d0b924b1733071de1712c996716398edccb243b8c27e8d683863498b7ab882b4fc334785f144528d43a87ffadc2b70b0cbc41a4e0559cdbae30522d88
+  metadata.gz: 53af5b80de72a1f40570fd93a05f1a5282d9c79cfa04b007ecfc7e04ee31bfaa27d2202467edaf02ca50ea05173faccc0fb5b2207e16cf936957eaf8bd4b3338
+  data.tar.gz: 287e8051ab76bba6451b8c76ba3df6d95d1d7cfd4f4de33ae82b5745345294903e40fd74510c1b740b40395d6193f5c2c24c285980b116873a381917fdd146f7

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

@@ -3,7 +3,6 @@ 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";
@@ -11,32 +10,31 @@ import mapColors from "../pb_dashboard/pbChartsColorsHelper";
 import classnames from "classnames";
 
 type BarGraphProps = {
-  align?: "left" | "right" | "center";
-  axisTitle: string;
-  dark?: boolean;
-  xAxisCategories: [];
-  yAxisMin: number;
-  yAxisMax: number;
-  chartData: { name: string; data: number[] }[];
-  className?: string;
-  id: any;
-  pointStart: number | any;
-  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 };
+  align?: "left" | "right" | "center",
+  axisTitle: string,
+  dark?: boolean,
+  xAxisCategories: [],
+  yAxisMin: number,
+  yAxisMax: number,
+  chartData: { name: string, data: number[] }[],
+  className?: string,
+  id: any,
+  pointStart: number | any,
+  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 BarGraph = ({
   aria = {},
   data = {},
@@ -65,12 +63,6 @@ const BarGraph = ({
 }: BarGraphProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
   const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
 
   const staticOptions = {
     title: {
@@ -123,12 +115,24 @@ const BarGraph = ({
   }
 
   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),
@@ -136,7 +140,7 @@ const BarGraph = ({
           ...ariaProps,
           ...dataProps,
         }}
-        highcharts={Highcharts}
+        highcharts={window.Highcharts}
         options={options}
     />
   );

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_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_section_separator/docs/_section_separator_children_swift.md

@@ -0,0 +1,14 @@
+
+![section-separator-children](https://github.com/powerhome/playbook/assets/92755007/acd6a8eb-d034-4efd-b2e6-afabe739e678)
+
+```swift
+
+PBSectionSeparator(variant: .dashed) {
+  PBCard(alignment: .center, borderRadius: BorderRadius.rounded, padding: Spacing.xxSmall, width: 70) {
+    Text("Today")
+      .pbFont(.caption)
+      .frame(maxWidth: .infinity, alignment: .center)
+  }
+}
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_dashed_swift.md

@@ -0,0 +1,7 @@
+![section-separator-dashed](https://github.com/powerhome/playbook/assets/92755007/e4f01870-3d90-4655-9136-5c7565711e1f)
+
+```swift
+
+PBSectionSeparator(variant: .dashed)
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_line_swift.md

@@ -0,0 +1,8 @@
+
+![section-separator-default](https://github.com/powerhome/playbook/assets/92755007/2560d5e2-f345-42d2-bad9-2a2e031b3e08)
+
+```swift
+
+PBSectionSeparator()
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_props_swift.md

@@ -0,0 +1,8 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **text** | `String` | Adds text to the Section Separator | `nil` |  |
+| **orientation** | `Orientation` | Changes the orientation | `.horizontal` | `.horizontal` `.vertical` |
+| **variant** | `Variant` | Changes the style of the Section Separator | `.card` | `.dashed` `.card` |
+| **dividerOpacity** | `CGFloat` | Adjusts the opacity of the divider | `1` |  |
+| **margin** | `CGFloat` | Adds margin between text and the divider | `Spacing.xSmall` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_text_swift.md

@@ -0,0 +1,7 @@
+![section-separator-text](https://github.com/powerhome/playbook/assets/92755007/4b481a7d-d001-43b6-b779-cfdc6fffc15f)
+
+```swift
+
+PBSectionSeparator("Text separator")
+
+```

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_vertical_swift.md

@@ -0,0 +1,18 @@
+![section-separator-verticle](https://github.com/powerhome/playbook/assets/92755007/21ca54a5-6b8a-459f-91ad-4e9b68258f68)
+
+```swift
+
+let loremIpsum: some View = Text(
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+)
+
+HStack(spacing: Spacing.none) {
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+  PBSectionSeparator(orientation: .vertical)
+  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididt labore et dolore"
+}
+.frame(maxWidth: .infinity)
+.frame(height: 120, alignment: .center)
+.listRowSeparator(.hidden)
+
+```

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

@@ -13,3 +13,11 @@ examples:
   - section_separator_text: Text Separator
   - section_separator_vertical: Vertical
   - section_separator_children: Children
+
+  swift:
+  - section_separator_line_swift: Line Separator
+  - section_separator_dashed_swift: Dashed Separator
+  - section_separator_text_swift: Text Separator
+  - section_separator_vertical_swift: Vertical
+  - section_separator_children_swift: Children
+  - section_separator_props_swift: ""