playbook_ui 11.15.0 → 11.16.0.pre.alpha.paginationrails1

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

@@ -0,0 +1,202 @@
+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";
+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 [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"));
+    }
+
+  }, [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_gauge/docs/_gauge_complex.html.erb

@@ -19,7 +19,7 @@
               <%= pb_rails("gauge", props: {
                 chart_data: [{ name: "Name", value: 10 }],
                 disable_animation: true,
-                height: '100%',
+                height: '150',
                 id: "gauge-complex",
                 suffix: "%"
               }) %>

data/app/pb_kits/playbook/pb_gauge/docs/_gauge_complex.jsx

@@ -71,26 +71,26 @@ const GaugeComplex = (props) => (
               orientation="column"
               wrap
           >
-            <Body
-                color="light"
-                text="% Abandoned"
-            />
+              <Body
+                  color="light"
+                  text="% Abandoned"
+               />
             <Flex wrap>
               <FlexItem
                   fixedSize="150px"
                   overflow="hidden"
                   shrink
-              >
+              > 
                 <Gauge
                     chartData={data}
                     disableAnimation
-                    height="100%"
+                    height="150"
                     id="gauge-complex"
                     suffix="%"
                     {...props}
                 />
-              </FlexItem>
-            </Flex>
+               </FlexItem>
+            </Flex>  
           </Flex>
         </Flex>
       </Card>

data/app/pb_kits/playbook/pb_gauge/gauge.html.erb

@@ -1,12 +1,2 @@
-<%= content_tag(:div, "",
-    id: object.id,
-    data: object.data,
-    class: object.classname) %>
-<% content_for :pb_js do %>
-  <%= javascript_tag do %>
-    window.addEventListener('DOMContentLoaded', function() {
-      new pbChart('.selector', <%= object.chart_options %>)
-    })
-  <% end %>
-<% end %>
+<%= react_component('Gauge', object.chart_options) %>
 

data/app/pb_kits/playbook/pb_gauge/gauge.rb

@@ -22,15 +22,10 @@ module Playbook
       prop :max, type: Playbook::Props::Numeric, default: 100
       prop :colors, type: Playbook::Props::Array, default: []
 
-      def chart_data_formatted
-        chart_data.map { |hash| hash[:y] = hash.delete :value }
-        chart_data
-      end
-
       def chart_options
         {
           id: id,
-          chartData: chart_data_formatted,
+          chartData: chart_data,
           circumference: full_circle ? [0, 360] : [-100, 100],
           dark: dark ? "dark" : "",
           disableAnimation: disable_animation,
@@ -43,9 +38,9 @@ module Playbook
           showLabels: show_labels,
           style: style,
           tooltipHtml: tooltip_html,
-          type: "gauge",
+          type: style,
           colors: colors,
-        }.to_json.html_safe
+        }
       end
 
       def classname

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

@@ -0,0 +1,148 @@
+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_pagination/_pagination.scss

@@ -0,0 +1,68 @@
+@import "tokens/colors";
+@import "tokens/typography";
+@import "tokens/border_radius";
+@import "tokens/shadows";
+
+.pb_pagination {
+  display: inline-block;
+  border-radius: $border_rad_light;
+  border: 1px solid $border_light;
+  background-color: $white;
+  padding: 3px 0px 3.6px 0px;
+  li {
+    display: inline;  
+    > a, li > span {
+    padding: 7px 13px;
+    text-decoration: none;
+    margin-left: -1px;
+    border: 0 !important;
+  }}
+  li:first-child > a, li:first-child > span  {
+    padding: 7px 13px;
+    margin-left: .5px;
+    border-right: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  li:last-child > a, li:last-child > span {
+    padding: 7px 13px;
+    margin-right: .5px;
+    border-left: 1px solid $border_light !important;
+    z-index: 2;
+  }
+  a {
+    color: $text_lt_default !important;
+    font-size: $text_small;
+    font-weight: $regular;
+    border: none;
+
+    &:hover {
+      background-color: $active_light;
+      color: $primary !important;
+      border-radius: $border_rad_light;
+    }
+
+    &:focus {
+      outline: 1px solid $primary !important;
+      border-radius: $border_rad_light;
+      outline-offset: -1px;
+    }
+  }
+  .active > span {
+    background-color: $primary !important;
+    border-radius: $border_rad_light;
+    color: #fff;
+    padding: 7px 10px;
+    border: 0 !important;
+    text-decoration: none;
+    font-weight: $bold;
+    font-size: $text_small;
+
+    &:hover {
+      box-shadow: $shadow_deeper;
+    }
+  }
+  .disabled > span {
+    padding: 7px 10px;
+    font-size: $text_small;
+  }
+}

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -0,0 +1,41 @@
+
+
+/* @flow */
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+type PaginationProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  id?: string,
+}
+
+const Pagination = (props: PaginationProps) => {
+  const {
+    aria = {},
+  className,
+  data = {},
+  id,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_pagination'), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+    </div>
+  )
+}
+
+export default Pagination

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.html.erb

@@ -0,0 +1,28 @@
+<% @data = [{
+    first_name: 'Jon',
+    last_name: 'Ron',
+    email: "jon@mail.com",
+    id: 1,
+}, {
+    first_name: 'Sam',
+    last_name: 'Bob',
+    email: "sam@mail.com",
+    id: 2,
+}, {
+    first_name: 'Nick',
+    last_name: 'Jack',
+    email: "nick@mail.com",
+    id: 3,
+}, {
+    first_name: 'Jake',
+    last_name: 'Wade',
+    email: "jon@mail.com",
+    id: 4,
+}, {
+    first_name: 'Blake',
+    last_name: 'Chad',
+    email: "jon@mail.com",
+    id: 5,
+}] %>
+
+<%= pb_rails("pagination", props: { data: @data}) %>

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import Pagination from '../_pagination'
+
+const PaginationDefault = (props) => (
+  <div>
+    <Pagination
+        {...props}
+    />
+  </div>
+)
+
+export default PaginationDefault

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

@@ -0,0 +1,9 @@
+examples:
+  
+  rails:
+  - pagination_default: Default
+  
+  
+  # react:
+  # - pagination_default: Default
+  

data/app/pb_kits/playbook/pb_pagination/docs/index.js

@@ -0,0 +1 @@
+export { default as PaginationDefault } from './_pagination_default.jsx'

data/app/pb_kits/playbook/pb_pagination/pagination.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname,
+    data: object.data,
+    id: object.id) do %>
+     <%= will_paginate object.page_data, renderer: Playbook::Pagination::Rails %>
+<% end %>

data/app/pb_kits/playbook/pb_pagination/pagination.rb

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+require "will_paginate/array"
+module Playbook
+  module PbPagination
+    class Pagination < ::Playbook::KitBase
+      prop :data, type: Playbook::Props::Array,
+                  default: []
+      def page_data
+        new_user_array = []
+        data.each do |user|
+          new_user_array.push(user)
+        end
+        new_user_array.paginate(page: params[:page], per_page: 3)
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_pagination/pagination.test.jsx

@@ -0,0 +1,17 @@
+import { renderKit } from '../utilities/test-utils'
+
+import { Pagination } from '../'
+
+/* See these resources for more testing info:
+  - https://github.com/testing-library/jest-dom#usage for useage and examples
+  - https://jestjs.io/docs/en/using-matchers
+*/
+
+test('generated scaffold test - update me', () => {
+  const props = {
+    data: { testid: 'default' }
+  }
+
+  const kit = renderKit(Pagination , props)
+  expect(kit).toBeInTheDocument()
+})