playbook_ui 11.12.1.pre.alpha.charts1 → 11.12.1.pre.alpha.passphrase1

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

@@ -1,216 +0,0 @@
-import React, { useEffect, useRef, useState } 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";
-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;
-  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
-const alignBlockElement = (event: any) => {
-  const itemToMove = document.querySelector(
-    `#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`
-  ) as HTMLElement;
-  const chartContainer = document.querySelector(`#${event.target.renderTo.id}`);
-  if (itemToMove !== null) {
-    itemToMove.style.height = `${event.target.chartHeight}px`;
-    itemToMove.style.width = `${event.target.chartWidth}px`;
-    chartContainer.firstChild.before(itemToMove);
-  }
-};
-
-const CircleChart = ({
-  align = "center",
-  aria = {},
-  rounded = false,
-  borderColor = rounded ? null : "",
-  borderWidth = rounded ? 20 : null,
-  chartData,
-  children,
-  className,
-  colors = [],
-  dark = false,
-  data = {},
-  dataLabelHtml = "<div>{point.name}</div>",
-  dataLabels = false,
-  height,
-  id,
-  innerSize = "md",
-  legend = false,
-  maxPointSize = null,
-  minPointSize = null,
-  startAngle = null,
-  style = "pie",
-  title,
-  useHtml = false,
-  zMin = null,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  ...props
-}: CircleChartProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  Highcharts.setOptions({
-    tooltip: {
-      headerFormat: null,
-      pointFormat:
-        '<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 componentDidMount = useRef(false);
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      title: {
-        text: title,
-      },
-      chart: {
-        height: height,
-        type: style,
-        events: {
-          render: (event: any) => alignBlockElement(event),
-          redraw: (event: any) => alignBlockElement(event),
-        },
-      },
-
-      legend: {
-        align: align,
-        verticalAlign: verticalAlign,
-        layout: layout,
-        x: x,
-        y: y,
-      },
-      plotOptions: {
-        pie: {
-          colors:
-            colors.length > 0 ? mapColors(colors) : highchartsTheme.colors,
-          dataLabels: {
-            enabled: dataLabels,
-            connectorShape: "straight",
-            connectorWidth: 3,
-            format: dataLabelHtml,
-          },
-          showInLegend: legend,
-        },
-      },
-      series: [
-        {
-          minPointSize: minPointSize,
-          maxPointSize: maxPointSize,
-          innerSize: borderWidth == 20 ? "100%" : innerSizeFormat(innerSize),
-          data: formattedChartData,
-          zMin: zMin,
-          startAngle: startAngle,
-          borderWidth: borderWidth,
-          borderColor: borderColor,
-        },
-      ],
-      credits: false,
-    };
-    setOptions({ ...staticOptions });
-    if (componentDidMount.current) {
-      Highcharts.charts.forEach((chart: any) => {
-        if (chart && chart.renderTo.id === id) {
-          const updatedValueArray = chartData.map((obj: any) => {
-            return obj.value;
-          });
-          chart.series[0].setData(updatedValueArray);
-        }
-      });
-    } else {
-      componentDidMount.current = true;
-    }
-  }, [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}
-          />
-          <div className="pb-circle-chart-block">{children}</div>
-        </div>
-      ) : (
-        <HighchartsReact
-          containerProps={{
-            className: classnames("pb_circle_chart", globalProps(props)),
-            id: id,
-            ...ariaProps,
-            ...dataProps,
-          }}
-          highcharts={Highcharts}
-          options={options}
-        />
-      )}
-    </>
-  );
-};
-
-export default CircleChart;

data/app/pb_kits/playbook/pb_dashboard/pbChartsColorsHelper.ts

@@ -1,16 +0,0 @@
-import colors from "../tokens/exports/_colors.scss";
-
-
-// Map Data Color String Props to our SCSS Variables
-const mapColors = (array: string[]) => {
-    const regex = /(data)\-[1-8]/; //eslint-disable-line
-  
-    const newArray = array.map((item) => {
-      return regex.test(item)
-        ? `${colors[`data_${item[item.length - 1]}`]}`
-        : item;
-    });
-    return newArray;
-  };
-
-  export default mapColors

data/app/pb_kits/playbook/pb_dashboard/themeTypes.ts

@@ -1,16 +0,0 @@
-export type ThemeProps = {
-    lang?: {[key: string]: string}
-    credits?: {[key: string]: boolean}
-    colors?: string[]
-    chart?: {[key: string]: any}
-    title?: {[key: string]: string | {}}
-    subtitle?: {[key: string]: string | {};}
-    xAxis?: {[key: string]: any;}
-    yAxis?: {[key: string]: any;}
-    legend?: {[key: string]: string | {};}
-    labels?: {[key: string]: {};}
-    tooltip?: {[key: string]: any;}
-    pane?: {[key: string]: {};}
-    plotOptions?: {[key: string]: any;}
-    colorKey?: string
-    }

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

@@ -1,213 +0,0 @@
-import React, { useState, useEffect, useRef } 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";
-import highchartsMore from "highcharts/highcharts-more";
-import solidGauge from "highcharts/modules/solid-gauge";
-import defaultColors from "../tokens/exports/_colors.scss";
-import typography from "../tokens/exports/_typography.scss";
-
-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[];
-};
-
-const Gauge = ({
-  aria = {},
-  className,
-  chartData,
-  dark = false,
-  data = {},
-  disableAnimation = false,
-  fullCircle = false,
-  height = null,
-  id,
-  max = 100,
-  min = 0,
-  prefix = "",
-  showLabels = false,
-  style = "solidgauge",
-  suffix = "",
-  title = "",
-  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: ' +
-    "<b>{point.y}</b>",
-  colors = [],
-  minorTickInterval = null,
-  circumference = fullCircle ? [0, 360] : [-100, 100],
-  ...props
-}: 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 componentDidMount = useRef(false);
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    const formattedChartData = chartData.map((obj: any) => {
-      obj.y = obj.value;
-      delete obj.value;
-      return obj;
-    });
-
-    const staticOptions = {
-      chart: {
-        events: {
-          load() {
-            setTimeout(this.reflow.bind(this), 0);
-          },
-        },
-        type: style,
-        height: height,
-      },
-      title: {
-        text: title,
-      },
-      yAxis: {
-        min: min,
-        max: max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: minorTickInterval,
-        tickAmount: 2,
-        tickPositions: [min, max],
-        labels: {
-          y: 26,
-          enabled: showLabels,
-        },
-      },
-      credits: false,
-      series: [
-        {
-          data: formattedChartData,
-        },
-      ],
-      pane: {
-        center: ["50%", "50%"],
-        size: "90%",
-        startAngle: circumference[0],
-        endAngle: circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: "90%",
-          outerRadius: "90%",
-          shape: "arc",
-          className: "gauge-pane",
-        },
-      },
-      colors:
-        colors !== undefined && colors.length > 0
-          ? mapColors(colors)
-          : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          animation: !disableAnimation,
-        },
-        solidgauge: {
-          borderColor:
-            colors !== undefined && colors.length === 1
-              ? mapColors(colors).join()
-              : highchartsTheme.colors[0],
-          borderWidth: 20,
-          radius: 90,
-          innerRadius: "90%",
-          dataLabels: {
-            borderWidth: 0,
-            color: defaultColors.text_lt_default,
-            enabled: true,
-            format:
-              `<span class="prefix">${prefix}</span>` +
-              '<span class="fix">{y:,f}</span>' +
-              `<span class="suffix">${suffix}</span>`,
-            style: {
-              fontFamily: typography.font_family_base,
-              fontWeight: typography.regular,
-              fontSize: typography.heading_2,
-            },
-            y: -26,
-          },
-        },
-      },
-    };
-
-    setOptions({ ...staticOptions });
-
-    if (document.querySelector(".prefix")) {
-      document.querySelectorAll(".prefix").forEach((prefix) => {
-        prefix.setAttribute("y", "28");
-      });
-      document
-        .querySelectorAll(".fix")
-        .forEach((fix) => fix.setAttribute("y", "38"));
-    }
-
-    if (componentDidMount.current) {
-      Highcharts.charts.forEach((chart: any) => {
-        if (chart && chart.renderTo.id === id) {
-          chart.series[0].setData([chartData[0].value]);
-          chart.series[0].data[0].name = chartData[0].name;
-        }
-      });
-    } else {
-      componentDidMount.current = true;
-    }
-  }, [chartData]);
-
-  return (
-    <HighchartsReact
-      containerProps={{
-        className: classnames(css, globalProps(props)),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
-    />
-  );
-};
-
-export default Gauge;

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

@@ -1,148 +0,0 @@
-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";
-
-type LineGraphProps = {
-  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 };
-};
-
-const LineGraph = ({
-  aria = {},
-  data = {},
-  align = "center",
-  className = "pb_bar_graph",
-  dark = false,
-  gradient = false,
-  type = "line",
-  id,
-  legend = false,
-  toggleLegendClick = true,
-  layout = "horizontal",
-  verticalAlign = "bottom",
-  x = 0,
-  y = 0,
-  axisTitle,
-  xAxisCategories,
-  yAxisMin,
-  yAxisMax,
-  chartData,
-  pointStart,
-  subTitle,
-  title,
-  height,
-  colors = [],
-  ...props
-}: LineGraphProps) => {
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data);
-  const setupTheme = () => {
-    dark
-      ? Highcharts.setOptions(highchartsDarkTheme)
-      : Highcharts.setOptions(highchartsTheme);
-  };
-  setupTheme();
-
-  const staticOptions = {
-    title: {
-      text: title,
-    },
-    chart: {
-      height: height,
-      type: type,
-    },
-    subtitle: {
-      text: subTitle,
-    },
-    yAxis: {
-      min: yAxisMin,
-      max: yAxisMax,
-      title: {
-        text: axisTitle,
-      },
-    },
-    xAxis: {
-      categories: xAxisCategories,
-    },
-    legend: {
-      enabled: legend,
-      align: align,
-      verticalAlign: verticalAlign,
-      layout: layout,
-      x: x,
-      y: y,
-    },
-    colors:
-      colors !== undefined && colors.length > 0
-        ? mapColors(colors)
-        : highchartsTheme.colors,
-    plotOptions: {
-      series: {
-        pointStart: pointStart,
-        events: {},
-        dataLabels: {
-          enabled: false,
-        },
-      },
-    },
-    series: chartData,
-    credits: false,
-  };
-
-  if (!toggleLegendClick) {
-    staticOptions.plotOptions.series.events = { legendItemClick: () => false };
-  }
-
-  const [options, setOptions] = useState({});
-
-  useEffect(() => {
-    setOptions({ ...staticOptions });
-  }, [chartData]);
-
-  return (
-    <HighchartsReact
-      containerProps={{
-        className: classnames(globalProps(props), className),
-        id: id,
-        ...ariaProps,
-        ...dataProps,
-      }}
-      highcharts={Highcharts}
-      options={options}
-    />
-  );
-};
-
-export default LineGraph;

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_default.md

@@ -1 +0,0 @@
-Use the `confirmation` prop to only include the label and show/hide icon.

data/app/pb_kits/playbook/pb_passphrase/passwordStrength.js

@@ -1,55 +0,0 @@
-import zxcvbn from 'zxcvbn'
-
-export const zxcvbnPasswordScore = (options) => {
-  const {
-    calculate = zxcvbn,
-    averageThreshold = 2,
-    strongThreshold = 3,
-    minLength = 12,
-  } = options
-
-  return {
-    minLength,
-    averageThreshold,
-    strongThreshold,
-    test: function (password = '', common = false) {
-      const feedbackValues = (str) => {
-        let percent, variant, text
-
-        if (password.length <= 0) {
-          percent = '0'
-          variant = 'negative'
-          text = '\u00A0' //nbsp to keep form from jumping when typing beings
-        } else if (common) {
-          percent = '25'
-          variant = 'negative'
-          text = 'This passphrase is too common'
-        } else if (password.length < this.minLength || str < this.averageThreshold) {
-          percent = '25'
-          variant = 'negative'
-          text = 'Too weak'
-        } else if (str < this.strongThreshold){
-          percent = '50'
-          variant = 'warning'
-          text = 'Almost there, keep going!'
-        } else if (str >= this.strongThreshold) {
-          percent = '100'
-          variant = 'positive'
-          text = 'Success! Strong passphrase'
-        }
-        return { percent, variant, text }
-      }
-
-      const result = calculate(password)
-
-      return (
-        {
-          suggestions: result.feedback.suggestions,
-          warning: result.feedback.warning,
-          strength: result.score,
-          ...feedbackValues(result.score),
-        }
-      )
-    },
-  }
-}