playbook_ui 15.0.0.pre.alpha.play2377bargraphscaffoldnewkit10368 → 15.0.0.pre.alpha.removewebpacker10432

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,65 +0,0 @@
-// Three places in Nitro depend on this function inside the window scope.
-// We will keep this file until we remove this dependency from Nitro.
-const dialogHelper = () => {
-  const openTrigger = document.querySelectorAll("[data-open-dialog]");
-  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
-  const dialogs = document.querySelectorAll(".pb_dialog_rails")
-
-  const loadingButton = document.querySelector('[data-disable-with="Loading"]');
-  if (loadingButton) {
-    loadingButton.addEventListener("click", function() {
-      const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
-      const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
-      let currentClass = okayLoadingButton.className;
-      let cancelClass = cancelButton ? cancelButton.className : "";
-
-      let newClass = currentClass.replace("_enabled", "_disabled_loading");
-      let newCancelClass = cancelClass.replace("_enabled", "_disabled");
-
-      // Disable the buttons
-      okayLoadingButton.disabled = true;
-      if (cancelButton) cancelButton.disabled = true;
-
-      okayLoadingButton.className = newClass;
-      if (cancelButton) cancelButton.className = newCancelClass;
-    });
-  }
-
-
-  openTrigger.forEach((open) => {
-    open.addEventListener("click", () => {
-      var openTriggerData = open.dataset.openDialog;
-      var targetDialog = document.getElementById(openTriggerData)
-      if (targetDialog.open) return;
-      targetDialog.showModal();
-    });
-  });
-
-  closeTrigger.forEach((close) => {
-    close.addEventListener("click", () => {
-      var closeTriggerData = close.dataset.closeDialog;
-      document.getElementById(closeTriggerData).close();
-    });
-  });
-
-  // Close dialog box on outside click
-  dialogs.forEach((dialogElement) => {
-    dialogElement.addEventListener("mousedown", (event) => {
-      const dialogParentDataset = dialogElement.parentElement.dataset
-      if (dialogParentDataset.overlayClick === "overlay_close") return
-
-      const dialogModal = event.target.getBoundingClientRect()
-      const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
-                                        event.clientX > dialogModal.right ||
-                                        event.clientY < dialogModal.top ||
-                                        event.clientY > dialogModal.bottom
-
-      if (clickedOutsideDialogModal) {
-        dialogElement.close()
-        event.stopPropagation()
-      }
-    })
-  })
-};
-
-export default dialogHelper;

data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx

@@ -1,62 +0,0 @@
-import React, { useMemo } from "react"
-import { globalProps } from "../utilities/globalProps";
-import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props";
-import Highcharts from "highcharts"
-import HighchartsReact from "highcharts-react-official"
-
-import pbBarGraphTheme from "./pbBarGraphTheme"
-
-import classnames from "classnames";
-
-type PbBarGraphProps = {
-  
-  options: Record<string, unknown>
-  className?: string
-  aria?: { [key: string]: string };
-  data?: { [key: string]: string };
-  id: string;
-  htmlOptions?: {[key: string]: string | number | boolean | (() => void)};
-}
-
-const PbBarGraph = ({
-  aria = {},
-  data = {},
-  id,
-  htmlOptions = {},
-  options,
-  className = "pb_pb_bar_graph",
-}: PbBarGraphProps): React.ReactElement => {
-
-  const ariaProps = buildAriaProps(aria);
-  const dataProps = buildDataProps(data)
-  const htmlProps = buildHtmlProps(htmlOptions);
-
-  const mergedOptions = useMemo(() => {
-    if (!options || typeof options !== "object") {
-      // eslint-disable-next-line no-console
-      console.error("❌ Invalid options passed to <BarGraph />", options)
-      return {}
-    }
-
-    return Highcharts.merge({}, pbBarGraphTheme, options)
-  }, [options])
-
-  return (
-  
-    <div>
-      <HighchartsReact
-          containerProps={{
-                  className: classnames(globalProps, className),
-                  id: id,
-                  ...ariaProps,
-                  ...dataProps,
-                  ...htmlProps
-                }}
-          highcharts={Highcharts}
-          options={mergedOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraph

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb

@@ -1,35 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: ['#1CA05C', '#FD804C', '#144075', '#00C4D7', '#DA0014'],
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-import colors from '../../tokens/exports/_colors.module.scss'
-
-const chartData = [{
-  name: 'Installation',
-  data: [1475, 200, 3000, 654, 656],
-}, {
-  name: 'Manufacturing',
-  data: [4434, 524, 2320, 440, 500],
-}, {
-  name: 'Sales & Distribution',
-  data: [3387, 743, 1344, 434, 440],
-}, {
-  name: 'Project Development',
-  data: [3227, 878, 999, 780, 1000],
-}, {
-  name: 'Other',
-  data: [1111, 677, 3245, 500, 200],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: "Bar Graph with Custom Data Colors",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-  colors: [colors.data_4, colors.data_5, colors.data_6, colors.data_7, colors.data_8],
-}
-
-const PbBarGraphColors = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphColors

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md

@@ -1 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements. To accomplish this, you can use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md

@@ -1,2 +0,0 @@
-Custom data colors allow for color customization to match the needs of business requirements.
-You can use Playbook's color tokens or use hex values.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb

@@ -1,38 +0,0 @@
-<% chart_data = [{
-    name: 'Installation',
-    data: [1475,200,3000,654,656]
-}, {
-    name: 'Manufacturing',
-    data: [4434,524,2320,440,500]
-}, {
-    name: 'Sales & Distribution',
-    data: [3387,743,1344,434,440,]
-}, {
-    name: 'Project Development',
-    data: [3227,878,999,780,1000]
-}, {
-    name: 'Other',
-    data: [1111,677,3245,500,200]
-}] %>
-
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: 'Solar Employment Growth by Sector, 2010-2016',
-  },
-  subtitle: {
-    text: 'Source: thesolarfoundation.com',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx

@@ -1,51 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-  const chartData = [{
-    name: 'Installation',
-    data: [1475, 200, 3000, 654, 656],
-  }, {
-    name: 'Manufacturing',
-    data: [4434, 524, 2320, 440, 500],
-  }, {
-    name: 'Sales & Distribution',
-    data: [3387, 743, 1344, 434, 440],
-  }, {
-    name: 'Project Development',
-    data: [3227, 878, 999, 780, 1000],
-  }, {
-    name: 'Other',
-    data: [1111, 677, 3245, 500, 200],
-  }]
-
-  const chartOptions = {
-    series: chartData,
-    title: {
-      text: 'Solar Employment Growth by Sector, 2010-2016',
-    },
-    subtitle: {
-      text: 'Source: thesolarfoundation.com',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-  }
-
-const PbBarGraphDefault = (props) => {
-
-  return (
-    <div>
-      <PbBarGraph
-          {...props}
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphDefault

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb

@@ -1,46 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<% chart_options_pixel = {
- chart: {
-    height: "300"
-  },
-  series: chart_data,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  }
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_pixel}) %>
-
-<br /><br />
-
-<% chart_options_percentage = {
- chart: {
-    height: "50%"
-  },
-  series: chart_data,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  }
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options_percentage}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx

@@ -1,62 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const pixelHeightChartOptions = {
-  chart: {
-    height: "300"
-  },
-  series: chartData,
-  title: {
-    text: "Fixed Height (300px)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-const percentageHeightChartOptions = {
-  chart: {
-    height: "50%"
-  },
-  series: chartData,
-  title: {
-    text: "Percentage Height (50%)",
-  },
-  xAxis: {
-    categories: ["Jan", "Feb", "Mar", "Apr", "May"],
-  },
-  yAxis: {
-    title: {
-      text: "Number of Employees",
-    },
-  },
-};
-
-
-
-const PbBarGraphHeight = () => (
-  <div>
-      <PbBarGraph
-          options={pixelHeightChartOptions}
-      />
-
-    <br />
-    <br />
-
-    <PbBarGraph
-        options={percentageHeightChartOptions}
-    />
-  </div>
-)
-
-export default PbBarGraphHeight

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md

@@ -1,3 +0,0 @@
-By default, Highcharts have a height of 400px, but this can be customized. You can override the default by specifying either a percentage or a fixed pixel value.
-
-Using a percentage maintains a consistent aspect ratio across different responsive sizes. For example, setting the height to 50% makes the chart’s height half of its width.

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb

@@ -1,47 +0,0 @@
-<% chart_options = {
-    chart: {
-        type: 'bar'
-    },
-    title: {
-        text: 'Historic World Population by Region',
-        align: 'left'
-    },
-    subtitle: {
-        text: 'Source: <a ' +
-            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
-            'target="_blank">Wikipedia.org</a>',
-        align: 'left'
-    },
-    xAxis: {
-        categories: ['Africa', 'America', 'Asia', 'Europe'],
-        lineWidth: 0
-    },
-    yAxis: {
-        title: {
-            text: '',
-        },
-    },
-    tooltip: {
-        valueSuffix: ' millions'
-    },
-    plotOptions: {
-        bar: {
-            dataLabels: {
-                enabled: true
-            },
-            groupPadding: 0.1
-        }
-    },
-    series: [{
-        name: 'Year 1990',
-        data: [631, 727, 3202, 721]
-    }, {
-        name: 'Year 2000',
-        data: [814, 841, 3714, 726]
-    }, {
-        name: 'Year 2018',
-        data: [1276, 1007, 4561, 746]
-    }],
-} %>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartOptions = {
-    chart: {
-        type: 'bar'
-    },
-    title: {
-        text: 'Historic World Population by Region',
-        align: 'left'
-    },
-    subtitle: {
-        text: 'Source: <a ' +
-            'href="https://en.wikipedia.org/wiki/List_of_continents_and_continental_subregions_by_population"' +
-            'target="_blank">Wikipedia.org</a>',
-        align: 'left'
-    },
-    xAxis: {
-        categories: ['Africa', 'America', 'Asia', 'Europe'],
-        lineWidth: 0
-    },
-    yAxis: {
-        title: {
-            text: '',
-        },
-    },
-    tooltip: {
-        valueSuffix: ' millions'
-    },
-    plotOptions: {
-        bar: {
-            dataLabels: {
-                enabled: true
-            },
-            groupPadding: 0.1
-        }
-    },
-    series: [{
-        name: 'Year 1990',
-        data: [631, 727, 3202, 721]
-    }, {
-        name: 'Year 2000',
-        data: [814, 841, 3714, 726]
-    }, {
-        name: 'Year 2018',
-        data: [1276, 1007, 4561, 746]
-    }],
-}
-
-
-const PbBarGraphHorizontal = () => (
-  <div>
-    <PbBarGraph
-        options={chartOptions}
-    />
-  </div>
-)
-
-export default PbBarGraphHorizontal

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb

@@ -1,25 +0,0 @@
-<% chart_data = [{
-    name: 'Number of Installations',
-    data: [1475,200,3000,654,656]
-}] %>
-
-<% chart_options = {
-  series: chart_data,
-  title: {
-    text: 'Bar Graph with Legend',
-  },
-  xAxis: {
-    categories: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-   legend: {
-        enabled: true
-    },
-}
-%>
-
-<%= pb_rails("pb_bar_graph", props: {options: chart_options}) %>

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const chartOptions = {
-  series: chartData,
-  title: {
-    text: 'Bar Graph with Legend',
-  },
-  xAxis: {
-    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-  },
-  yAxis: {
-    title: {
-      text: 'Number of Employees',
-    },
-  },
-  legend: { enabled: true },
-}
-
-const PbBarGraphLegend = () => {
-  
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-export default PbBarGraphLegend

data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { PbBarGraph } from 'playbook-ui'
-
-
-const chartData = [{
-  name: 'Number of Installations',
-  data: [1475, 200, 3000, 654, 656],
-}]
-
-const chartOptions = {
-    title: {
-      text: 'Bar Graph with Legend Non Clickable',
-    },
-    xAxis: {
-      categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
-    },
-    yAxis: {
-      title: {
-        text: 'Number of Employees',
-      },
-    },
-    legend: {
-      enabled: true,
-      events: {
-        itemClick: function () {
-          return false;
-        }
-      }
-    },
-  series: chartData
-}
-
-const PbBarGraphLegendNonClickable = () => {
-
-  return (
-    <div>
-      <PbBarGraph
-          options={chartOptions}
-      />
-    </div>
-  )
-}
-
-export default PbBarGraphLegendNonClickable