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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0b24f939f35f3d16ce328396ff94b12b78932b9afac25ebce2073542297192c7
-  data.tar.gz: c5e52a1f37921f1db1510bc55257c68b6c5d32985d5ef6a3e73cae3f68a87689
+  metadata.gz: c72234133b0283ebe8474358ad92eede36295609498c2780f4673e8b1534193e
+  data.tar.gz: b44d188793f168af643425de2883eb81efeeb3f9a0a04fd7af76a60b21c5b2c6
 SHA512:
-  metadata.gz: d573285bc38cdf6004b43d8ef798f73a6959143c2c514e3d42ccea9f5af28e6d5b41a11370f73e3add73de50a89e1842905117bcc5a873896bbe2d3129b19e58
-  data.tar.gz: 5f1777c205cb0bab90ac8d62af0ea5e4d2521f5f4755ddc90d40d9c82a2d853693fd51099ad384cccd758221020e1f423114a11d750f3d8f09d583e480639224
+  metadata.gz: a38b30f0ed86046de9ea6b21d3e80f45b51c32577ddcf5a205e519b5838e7c2448f5eb6295275fa7730e6d380cfbf527d4004db2a51607b1bacf68f2be2d1a2f
+  data.tar.gz: a0136098d09bec449774ae8f54c950ec5005b03b3bb509b2fefc65e1df7ab0b411aaa221a3e98dcde033bd02c3753d59774e2b43dd894d43ecaf88615bf47f33

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_button/docs/_button_circle_swift.md

@@ -0,0 +1,28 @@
+![button-circles](https://github.com/powerhome/playbook/assets/92755007/c8f98358-5369-475d-9287-67f2aa54f35c)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBButton(
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.plus, size: .x1),
+    action: {}
+  )
+  PBButton(
+    variant: .secondary,
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.pen, size: .x1),
+    action: {}
+  )
+  PBButton(
+    variant: .disabled,
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.times, size: .x1)
+  )
+  PBButton(
+    variant: .link,
+    shape: .circle,
+    icon: PBIcon.fontAwesome(.user, size: .x1),
+    action: {}
+  )
+ }
+```

data/app/pb_kits/playbook/pb_button/docs/_button_default_swift.md

@@ -0,0 +1,23 @@
+![button-default](https://github.com/powerhome/playbook/assets/92755007/28a19644-8963-4b13-9eb7-c8fef8a047cc)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+   PBButton(
+     title: "Button Primary",
+     action: {}
+    )
+    PBButton(
+      variant: .secondary,
+      title: "Button Secondary",
+      action: {})
+    PBButton(
+      variant: .link,
+      title: "Button Link",
+      action: {}
+    )
+    PBButton(
+      variant: .disabled,
+      title: "Button Disabled"
+    )
+ }
+```

data/app/pb_kits/playbook/pb_button/docs/_button_full_width_swift.md

@@ -0,0 +1,9 @@
+![button-full-width](https://github.com/powerhome/playbook/assets/92755007/7818e026-e27c-4485-9d14-337fe5c0f99f)
+
+```swift
+PBButton(
+  fullWidth: true,
+  title: "Full Width",
+  action: {}
+ )
+```

data/app/pb_kits/playbook/pb_button/docs/_button_icon_options_swift.md

@@ -0,0 +1,18 @@
+![button-icon-positions](https://github.com/powerhome/playbook/assets/92755007/c0b257c5-ca29-4ecb-83f8-85d631bb8613)
+
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBButton(
+    title: "Button with Icon on Left",
+    icon: PBIcon.fontAwesome(.user, size: .x1),
+    action: {}
+  )
+  PBButton(
+    title: "Button with Icon on Right",
+    icon: PBIcon.fontAwesome(.user, size: .x1),
+    iconPosition: .right,
+    action: {}
+  )
+ }
+```

data/app/pb_kits/playbook/pb_button/docs/_button_props_swift.md

@@ -0,0 +1,11 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Full Width** | `Bool` | Sets Button to full width | `false` | `true` `false` |
+| **Variant** | `PBButtonVariant` | Changes the color of the Button | ` .primary` | `.primary` `.secondary` `.link` `.disabled` |
+| **Size** | `Size` | Adjusts Button size | `.medium` | `.small` `.medium` `.large` |
+| **Shape** | `Shape` | Changes the shape of the Button  | `.primary` | `.primary` `.circle` |
+| **Title** | `String` | Sets Button text | `nil` |  |
+| **Icon** | `PBIcon` | Adds an icon to the Button | `nil` |  |
+| **Icon Position** | `IconPosition` | Adjusts the icon's position | `.left` | `.left` `.right` |
+| **Action** | `(() -> Void)` | Adds an action for the Button to perform | `{}` |  |

data/app/pb_kits/playbook/pb_button/docs/_button_size_swift.md

@@ -0,0 +1,20 @@
+![button-sizes](https://github.com/powerhome/playbook/assets/92755007/79bfe9e4-c09a-4d5e-bbb2-cf9ae8aa2895)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBButton(
+    size: .small,
+    title: "Button sm",
+    action: {}
+  )
+  PBButton(
+    title: "Button md",
+    action: {}
+  )
+  PBButton(
+    size: .large,
+    title: "Button lg",
+    action: {}
+  )
+ }
+```

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

@@ -25,3 +25,11 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
+
+  swift:
+  - button_default_swift: Button Variants
+  - button_full_width_swift: Button Full Width
+  - button_icon_options_swift: Button Icon Options
+  - button_circle_swift: Circle Button
+  - button_size_swift: Button Size
+  - button_props_swift: ""

data/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md

@@ -0,0 +1,29 @@
+![card-background-colors](https://github.com/powerhome/playbook/assets/92755007/9b9a6519-0f79-4d8c-a58a-ea5799f9e679)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBCard {
+    Text(text).pbFont(.body)
+  }
+
+  PBCard(backgroundColor: .background(.light)) {
+    Text("Light").pbFont(.body, color: .text(.light))
+  }
+        
+  PBCard(backgroundColor: .background(.dark)) {
+    Text("Dark").pbFont(.body, color: .text(.light))
+  }
+
+  PBCard(backgroundColor: .product(.product1, category: .background)) {
+    Text("Product 1 Background").pbFont(.body, color: .white)
+  }
+
+  PBCard(backgroundColor: .product(.product7, category: .highlight)) {
+    Text("Product 7 Highlight").pbFont(.body, color: .white)
+  }
+
+  PBCard(backgroundColor: .product(.product2, category: .highlight)) {
+    Text("Product 2 Highlight").pbFont(.body, color: .white)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md

@@ -0,0 +1,7 @@
+![card-no-border](https://github.com/powerhome/playbook/assets/92755007/a4f3e9e1-6770-425f-b882-dded98863917)
+
+```swift
+PBCard(border: false) {
+  Text(text).pbFont(.body)
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md

@@ -0,0 +1,33 @@
+![card-border-radius](https://github.com/powerhome/playbook/assets/92755007/c2c0965f-7c4f-4e7b-8c94-f187c724939d)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(borderRadius: BorderRadius.none) {
+    Text("None").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.xSmall) {
+    Text("X Small").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.small) {
+    Text("Small").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.medium) {
+    Text("Medium").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.large) {
+    Text("Large").pbFont(.body)
+  }
+
+   PBCard(borderRadius: BorderRadius.xLarge) {
+    Text("X Large").pbFont(.body)
+  }
+
+   PBCard(borderRadius: BorderRadius.rounded) {
+    Text("Rounded").pbFont(.body)
+  }
+ }
+ ``````

data/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md

@@ -0,0 +1,33 @@
+![card-header](https://github.com/powerhome/playbook/assets/92755007/a8fd21a1-89cb-4ec2-97f6-d6427f1264c2)
+
+```swift
+Stack(spacing: Spacing.small) {
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .category(.category1)) {
+      Text("Category 1").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .category(.category3)) {
+      Text("Category 3").pbFont(.body, color: .black).padding(Spacing.small)
+    }
+    Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .product(.product2, category: .background)) {
+      Text("Product 2 Background").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .product(.product6, category: .background)) {
+      Text("Product 6 Background").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+}
+```

data/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md

@@ -0,0 +1,17 @@
+![card-highlight](https://github.com/powerhome/playbook/assets/92755007/aba8c811-e21a-4aee-8d2d-64789989875d)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(highlight: .side(.product(.product6, category: .highlight))) {
+    Text("Side Position & Product 6 Highlight Color").pbFont(.body)
+  }
+
+  PBCard(highlight: .top(.status(.warning))) {
+    Text("Top Position & Warning Color").pbFont(.body)
+  }
+
+  PBCard(highlight: .side(.category(.category2))) {
+    Text("Side Position & Category 2 Color").pbFont(.body)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md

@@ -0,0 +1,7 @@
+![card-default](https://github.com/powerhome/playbook/assets/92755007/2209c5d4-806f-4a54-98f4-4ed864b7fad2)
+
+```swift
+PBCard {
+  Text("Card Content").pbFont(.body)
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md

@@ -0,0 +1,33 @@
+![card-padding](https://github.com/powerhome/playbook/assets/92755007/b5f56638-2307-46fb-ac28-c4225cf3e051)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(padding: Spacing.none) {
+    Text("None").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xxSmall) {
+    Text("XX Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xSmall) {
+    Text("X Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.small) {
+    Text("Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.medium) {
+    Text("Medium").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.large) {
+    Text("Large").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xLarge) {
+    Text("X Large").pbFont(.body)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Background Color** | `Color` | Changes background color | `.card` | `Color` |
+| **Border** | `Bool` | Adds border around the Card |  `true` | `true` `false` |
+| **Border Radius** | `CGFloat` | Specifies the roundness of the Card | `BorderRadius.medium` | `BorderRadius.none` `BorderRadius.xSmall` `BorderRadius.small` `BorderRadius.medium` `BorderRadius.large` `BorderRadius.xLarge` `BorderRadius.rounded` |
+| **Highlight** | `Highlight` | Adds a border accent color | `.none` | `Color` |
+| **Padding** | `CGFloat` | Applies padding between text and border | `Spacing.medium` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Style** | `PBCardStyle` | Specifies the color of the border | `.default` | `.default` `.selected` `.error` `.inline` |
+| **Shadow** | `Shadow` | Applies shadow | `nil` | `Shadow.deep` `Shadow.deeper` `Shadow.deepest` `Shadow.none` |

data/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md

@@ -0,0 +1,11 @@
+![card-separator](https://github.com/powerhome/playbook/assets/92755007/5988d360-d603-4a11-b928-16fe57dc1aea)
+
+```swift
+PBCard(padding: Spacing.none) {
+  Text("Header").pbFont(.body).padding(Spacing.small)
+  PBSectionSeparator()
+  Text(loremIpsum).pbFont(.body).padding(Spacing.small)
+  PBSectionSeparator()
+  Text("Footer").pbFont(.body).padding(Spacing.small)
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md

@@ -0,0 +1,21 @@
+![card-shadow](https://github.com/powerhome/playbook/assets/92755007/7dd7edc1-a2b1-4e91-b271-9c897c9ededd)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(shadow: Shadow.deep) {
+    Text("Deep").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.deeper) {
+    Text("Deeper").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.deepest) {
+    Text("Deepest").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.none) {
+    Text("None").pbFont(.body)
+  }
+ }
+```

data/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md

@@ -0,0 +1,17 @@
+![card-styles](https://github.com/powerhome/playbook/assets/92755007/b6ea347b-6a7b-46e8-b4ce-213727587499)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBCard {
+    Text("Card Context").pbFont(.body)
+  }
+
+  PBCard(style: .selected()) {
+    Text("Card Context").pbFont(.body)
+  }
+  
+  PBCard(style: .error) {
+    Text("Card Context").pbFont(.body)
+  }
+ }
+```

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

@@ -25,3 +25,15 @@ examples:
   - card_separator: Separator Card
   - card_border_none: No Border
   - card_border_radius: Border Radius
+  swift:
+  - card_light_swift: Default
+  - card_background_swift: Card Backgrounds
+  - card_highlight_swift: Highlight Cards
+  - card_header_swift: Header Cards
+  - card_padding_swift: Padding Size
+  - card_shadow_swift: Shadow Size
+  - card_separator_swift: Separator Card
+  - card_border_none_swift: No Border
+  - card_border_radius_swift: Border Radius
+  - card_styles_swift: Styles
+  - card_props_swift: ""

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default_swift.md

@@ -0,0 +1,10 @@
+![checkbox-default](https://github.com/powerhome/playbook/assets/92755007/dc3af1fb-8786-4002-ac64-3111b5b8c476)
+
+```swift
+
+  PBCheckbox(checked: false, text: "Unchecked", action: {})
+    .padding(.bottom, Spacing.small)
+
+  PBCheckbox(checked: true, text: "Checked", action: {})
+  
+```

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_error_swift.md

@@ -0,0 +1,12 @@
+![checkbox-error](https://github.com/powerhome/playbook/assets/92755007/6466de7f-fbfb-418b-8c5a-74d07a0c4f63)
+
+```swift
+
+PBCheckbox(
+  checked: false,
+  checkboxType: .error,
+  text: "Error",
+  action: {}
+)
+
+```

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate_swift.md

@@ -0,0 +1,12 @@
+![checkbox-indeterminate](https://github.com/powerhome/playbook/assets/92755007/eacd6976-bd00-41a9-aca1-75ce23b6a58c)
+
+```swift
+
+PBCheckbox(
+  checked: true,
+  checkboxType: .indeterminate,
+  text: "Indeterminate",
+  action: {}
+)
+
+```

data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_props_swift.md

@@ -0,0 +1,7 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Checked** | `Bool` | Adds a check to the Checkbox | `false` | `true` `false` |
+| **Checkbox Type** | `CheckboxType` | Changes the style of the Checkbox | `default` | `default` `error` `indeterminate` |
+| **Text** | `String` | Adds a text label | `nil` | | 
+| **Action** | `(() -> Void)` | Adds an action | `{}` |  |

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

@@ -13,3 +13,10 @@ examples:
   - checkbox_custom: Custom Checkbox
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
+
+  swift:
+    - checkbox_default_swift: Default
+    - checkbox_error_swift: Default w/ Error
+    - checkbox_indeterminate_swift: Indeterminate Checkbox
+    - checkbox_props_swift: ""
+