playbook_ui 13.12.0.pre.alpha.PLAY1051removinghighchartsdependency1551 → 13.12.0.pre.alpha.PLAY1081exporttypes1608

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4a59ab1213c1c17a6ab6bfa775d7ac7edf06972be95d950e479f16b8cafc4216
-  data.tar.gz: cb50f83ac242358db6b9e951ba8d7fa7bfee32ff78c02eef0b0829ed5e97a0d7
+  metadata.gz: f0bc057462f84066058ae751edb8a5800772fabfae7826217c54ecf10e87e78d
+  data.tar.gz: a82a61433089122a5b9844f07b865f933bd8eda322ccf039edbb7661f319ce54
 SHA512:
-  metadata.gz: 53af5b80de72a1f40570fd93a05f1a5282d9c79cfa04b007ecfc7e04ee31bfaa27d2202467edaf02ca50ea05173faccc0fb5b2207e16cf936957eaf8bd4b3338
-  data.tar.gz: 287e8051ab76bba6451b8c76ba3df6d95d1d7cfd4f4de33ae82b5745345294903e40fd74510c1b740b40395d6193f5c2c24c285980b116873a381917fdd146f7
+  metadata.gz: '095fa0bda11e86865f7be0b1f7f24ed36ac48e44b1535bdd3a056afa2189e03dd3d6c02130b615c0475cdcaa1fd58013c6d50dab71a2893b8e16ec6c0e2cdcef'
+  data.tar.gz: d8d7173f5164053988cefc4789d7af043435562c91bab3f6e63d5a3684b9455580af4cb8e05ec124d764a79b31dccd669a491b524b8fd1917a5f366a9b2daca6

data/app/pb_kits/playbook/pb_avatar/_avatar.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+export declare type AvatarProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    dark?: boolean;
+    id?: string;
+    imageAlt?: string;
+    imageUrl?: string;
+    name?: string;
+    size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs";
+    status?: "away" | "offline" | "online";
+} & GlobalProps;
+declare const Avatar: (props: AvatarProps) => React.ReactElement;
+export default Avatar;

data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+declare type AvatarActionButtonProps = {
+    action?: "add" | "remove";
+    aria?: {
+        [key: string]: string;
+    };
+    linkAriaLabel?: string;
+    className?: string;
+    dark?: boolean;
+    data?: Object;
+    id?: string;
+    imageAlt?: string;
+    imageUrl?: string;
+    linkUrl?: string;
+    name?: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    placement?: string;
+    size?: "md" | "lg" | "sm" | "xl" | "xs" | "xxs";
+};
+declare const AvatarActionButton: (props: AvatarActionButtonProps) => JSX.Element;
+export default AvatarActionButton;

data/app/pb_kits/playbook/pb_background/_background.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type BackgroundProps = {
+    alt?: string;
+    aria?: {
+        [key: string]: string;
+    };
+    backgroundColor?: ResponsiveProp<string> | 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'shadow' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21' | 'text_lt_default' | 'text_lt_light' | 'text_lt_lighter' | 'text_dk_default' | 'text_dk_light' | 'text_dk_lighter' | 'card_light' | 'card_dark' | 'data_1' | 'data_2' | 'data_3' | 'data_4' | 'data_5' | 'data_6' | 'data_7' | 'data_8' | 'border_light' | 'border_dark' | 'success_secondary' | 'error_secondary' | 'info_secondary' | 'warning_secondary' | 'neutral_secondary' | 'primary_secondary' | 'success_subtle' | 'warning_subtle' | 'error_subtle' | 'info_subtle' | 'neutral_subtle';
+    backgroundSize?: ResponsiveProp<string> | 'auto' | 'cover' | 'contain';
+    backgroundPosition?: ResponsiveProp<string> | string;
+    backgroundRepeat?: ResponsiveProp<string> | 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit';
+    imageUrl?: ResponsiveProp<string> | string;
+    children?: React.ReactChild[] | React.ReactNode;
+    className?: string;
+    customColor?: string;
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    padding?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div' | 'tr' | 'th' | 'td' | 'thead' | 'col';
+    transition?: 'fade' | 'blur' | 'scale';
+} & GlobalProps;
+declare type ResponsiveProp<T> = T | {
+    xs?: T;
+    sm?: T;
+    md?: T;
+    lg?: T;
+    xl?: T;
+    default?: T;
+};
+declare const Background: (props: BackgroundProps) => JSX.Element;
+export default Background;

data/app/pb_kits/playbook/pb_badge/_badge.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type BadgeProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    closeProps?: {
+        onClick?: React.MouseEventHandler<HTMLSpanElement>;
+        onMouseDown?: React.MouseEventHandler<HTMLSpanElement>;
+        onTouchEnd?: React.TouchEventHandler<HTMLSpanElement>;
+    };
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    removeIcon?: boolean;
+    removeOnClick?: React.MouseEventHandler<HTMLSpanElement>;
+    rounded?: boolean;
+    text?: string;
+    variant?: "error" | "info" | "neutral" | "notification" | "primary" | "success" | "warning";
+} & GlobalProps;
+declare const Badge: (props: BadgeProps) => JSX.Element;
+export default Badge;

data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.d.ts

@@ -0,0 +1,35 @@
+import React from "react";
+declare 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;
+    };
+};
+declare const BarGraph: ({ aria, data, align, axisTitle, dark, chartData, className, colors, id, pointStart, subTitle, type, title, xAxisCategories, yAxisMin, yAxisMax, legend, toggleLegendClick, height, layout, verticalAlign, x, y, ...props }: BarGraphProps) => React.ReactElement;
+export default BarGraph;

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

@@ -3,6 +3,7 @@ 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";
@@ -10,31 +11,32 @@ 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 = {},
@@ -63,6 +65,12 @@ 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: {
@@ -115,24 +123,12 @@ 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),
@@ -140,7 +136,7 @@ const BarGraph = ({
           ...ariaProps,
           ...dataProps,
         }}
-        highcharts={window.Highcharts}
+        highcharts={Highcharts}
         options={options}
     />
   );

data/app/pb_kits/playbook/pb_body/_body.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type BodyProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    children?: React.ReactChild[] | React.ReactChild;
+    color?: 'default' | 'light' | 'lighter' | 'link' | 'error' | 'success';
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    highlightedText?: string[];
+    highlighting?: boolean;
+    id?: string;
+    status?: 'neutral' | 'negative' | 'positive';
+    tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div';
+    text?: string;
+    truncate?: null | '1' | '2' | '3' | '4' | '5';
+    variant?: null | 'link';
+} & GlobalProps;
+declare const Body: (props: BodyProps) => React.ReactElement;
+export default Body;

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.d.ts

@@ -0,0 +1,12 @@
+declare type BreadCrumbItemProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: object;
+    id?: string;
+    component?: "a" | "span";
+    [x: string]: any;
+};
+declare const BreadCrumbItem: (props: BreadCrumbItemProps) => JSX.Element;
+export default BreadCrumbItem;

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type BreadCrumbsProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    className?: string;
+    data?: object;
+    id?: string;
+    text?: string;
+    children?: React.ReactChild[] | React.ReactNode;
+};
+declare const BreadCrumbs: (props: BreadCrumbsProps) => JSX.Element;
+export default BreadCrumbs;

data/app/pb_kits/playbook/pb_button/_button.d.ts

@@ -0,0 +1,37 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type EventHandler = (React.MouseEventHandler<HTMLElement>);
+declare type ButtonPropTypes = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string | string[];
+    count?: number;
+    data?: {
+        [key: string]: string;
+    };
+    disabled?: boolean;
+    fixedWidth?: boolean;
+    form?: string;
+    fullWidth?: boolean;
+    highlight?: boolean;
+    icon?: string;
+    iconRight?: boolean;
+    id?: string;
+    link?: string;
+    loading?: boolean;
+    newWindow?: boolean;
+    onClick?: EventHandler;
+    tabIndex?: number;
+    size?: 'sm' | 'md' | 'lg';
+    target?: string;
+    text?: string;
+    type?: 'inline' | null;
+    htmlType?: 'submit' | 'reset' | 'button' | undefined;
+    value?: string | null;
+    variant?: 'primary' | 'secondary' | 'link' | 'reaction';
+    wrapperClass?: string;
+} & GlobalProps;
+declare const Button: (props: ButtonPropTypes) => JSX.Element;
+export default Button;

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+declare type ButtonToolbarProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    connected?: boolean;
+    data?: object;
+    id?: string;
+    onClick?: React.MouseEventHandler<HTMLSpanElement>;
+    orientation?: "horizontal" | "vertical";
+    text?: string;
+    variant?: "primary" | "secondary";
+};
+declare const ButtonToolbar: (props: ButtonToolbarProps) => JSX.Element;
+export default ButtonToolbar;

data/app/pb_kits/playbook/pb_caption/_caption.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type CaptionProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    color?: "default" | "light" | "lighter" | "success" | "error" | "link";
+    data?: {
+        [key: string]: string;
+    };
+    id?: string;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "span" | "div" | "caption";
+    text?: string;
+    variant?: null | "link";
+} & GlobalProps;
+declare const Caption: (props: CaptionProps) => React.ReactElement;
+export default Caption;

data/app/pb_kits/playbook/pb_card/_card.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors';
+declare type CardPropTypes = {
+    aria?: {
+        [key: string]: string;
+    };
+    background?: BackgroundColors | ProductColors | "none";
+    borderNone?: boolean;
+    borderRadius?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | "rounded";
+    children: React.ReactChild[] | React.ReactChild | number;
+    className?: string;
+    data?: {
+        [key: string]: string;
+    };
+    highlight?: {
+        position?: "side" | "top";
+        color?: string;
+    };
+    length?: number;
+    padding?: string;
+    selected?: boolean;
+    tag?: "div" | "section" | "footer" | "header" | "article" | "aside" | "main" | "nav";
+} & GlobalProps;
+declare type CardHeaderProps = {
+    headerColor?: BackgroundColors | ProductColors | CategoryColors | "none";
+    headerColorStriped?: boolean;
+    children: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    padding?: string;
+} & GlobalProps;
+declare type CardBodyProps = {
+    children: React.ReactChild[] | React.ReactChild | string;
+    className?: string;
+    padding?: string;
+} & GlobalProps;
+declare const Card: {
+    (props: CardPropTypes): JSX.Element;
+    Header: (props: CardHeaderProps) => JSX.Element;
+    Body: (props: CardBodyProps) => JSX.Element;
+};
+export default Card;

data/app/pb_kits/playbook/pb_checkbox/_checkbox.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { GlobalProps } from '../utilities/globalProps';
+declare type CheckboxProps = {
+    aria?: {
+        [key: string]: string;
+    };
+    checked?: boolean;
+    children?: React.ReactChild[] | React.ReactChild;
+    className?: string;
+    dark?: boolean;
+    data?: {
+        [key: string]: string;
+    };
+    error?: boolean;
+    id?: string;
+    indeterminate?: boolean;
+    name?: string;
+    onChange?: (event: React.FormEvent<HTMLInputElement>) => void;
+    tabIndex?: number;
+    text?: string;
+    value?: string;
+} & GlobalProps;
+declare const Checkbox: (props: CheckboxProps) => JSX.Element;
+export default Checkbox;

data/app/pb_kits/playbook/pb_circle_chart/ChartsTypes.d.ts

@@ -0,0 +1,2 @@
+declare module "*.scss";
+declare module "highcharts-react-official";

data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.d.ts

@@ -0,0 +1,35 @@
+declare 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;
+};
+declare const CircleChart: ({ align, aria, rounded, borderColor, borderWidth, chartData, children, className, colors, dark, data, dataLabelHtml, dataLabels, height, id, innerSize, legend, maxPointSize, minPointSize, startAngle, style, title, tooltipHtml, useHtml, zMin, layout, verticalAlign, x, y, ...props }: CircleChartProps) => JSX.Element;
+export default CircleChart;