playbook_ui 11.16.0.pre.alpha.pagination.rails1 → 11.16.0

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

@@ -1,41 +0,0 @@
-
-
-/* @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

@@ -1,28 +0,0 @@
-<% @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

@@ -1,12 +0,0 @@
-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

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

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

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

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

@@ -1,7 +0,0 @@
-<%= 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

@@ -1,14 +0,0 @@
-# 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
-        data.paginate(page: params[:page], per_page: 1)
-      end
-    end
-  end
-end

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

@@ -1,17 +0,0 @@
-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()
-})

data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.jsx

@@ -1,79 +0,0 @@
-/* @flow */
-
-import React from 'react'
-import classnames from 'classnames'
-
-import { globalProps } from '../utilities/globalProps'
-import pbChart from '../plugins/pb_chart'
-
-type TreemapChartProps = {
-  chartData: array<{
-    name: string,
-    parent?: string | number,
-    value: number,
-    color?: string,
-    id?: string | number,
-  }>,
-  className?: string,
-  colors: array,
-  dark?: boolean,
-  drillable: boolean,
-  grouped: boolean,
-  height?: string,
-  id: number,
-  title: string,
-  tooltipHtml: string,
-  type?: string,
-}
-
-export default class TreemapChart extends React.Component<TreemapChartProps> {
-  static defaultProps = {
-    className: 'pb_treemap_chart',
-    dark: false,
-    drillable: false,
-    grouped: false,
-    type: 'treemap',
-  }
-
-  componentDidMount() {
-    const {
-      chartData,
-      className,
-      colors  = [],
-      dark,
-      drillable,
-      grouped,
-      height,
-      id,
-      title = "",
-      tooltipHtml = '<span style="font-weight: bold; color:{point.color};">&#9679; </span>{point.name}: <b>{point.value}</b>',
-      type,
-    } = this.props
-
-    new pbChart(`.${className}`, {
-      chartData: chartData,
-      colors: colors,
-      dark,
-      drillable,
-      grouped,
-      height: height,
-      id: id,
-      title: title,
-      tooltipHtml,
-      type,
-    })
-  }
-
-  props: TreemapChartProps
-
-  render() {
-    const { className, id } = this.props
-
-    return (
-      <div
-          className={classnames(globalProps(this.props), className)}
-          id={id}
-      />
-    )
-  }
-}

data/app/pb_kits/playbook/plugins/pb_chart.js

@@ -1,322 +0,0 @@
-import Highcharts from 'highcharts'
-
-import { highchartsTheme } from '../pb_dashboard/pbChartsLightTheme'
-import { highchartsDarkTheme } from '../pb_dashboard/pbChartsDarkTheme'
-import colors from '../tokens/exports/_colors.scss'
-
-import pie from 'highcharts/modules/variable-pie'
-import highchartsMore from 'highcharts/highcharts-more'
-import solidGauge from 'highcharts/modules/solid-gauge'
-import treemap from 'highcharts/modules/treemap'
-
-pie(Highcharts)
-
-// Map Data Color String Props to our SCSS Variables
-
-const mapColors = (array) => {
-  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
-}
-
-// Adjust Circle Chart Block Kit Dimensions to Match the Chart for Centering
-const alignBlockElement = (event) => {
-  const itemToMove = document.querySelector(`#wrapper-circle-chart-${event.target.renderTo.id} .pb-circle-chart-block`)
-  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)
-  }
-}
-
-class pbChart {
-  defaults = {
-    callbackInitializeBefore: () => {},
-    callbackInitializeAfter: () => {},
-    callbackRefreshBefore: () => {},
-    callbackRefreshAfter: () => {},
-    callbackDestroyBefore: () => {},
-    callbackDestroyAfter: () => {},
-    property: 'Value',
-  }
-
-  extendDefaults(defaults, options) {
-    for (const property in options) {
-      if (Object.prototype.hasOwnProperty.call(options, property)) {
-        defaults[property] = options[property]
-      }
-    }
-    return defaults
-  }
-
-  constructor(element, options) {
-    this.element = element
-    this.options = options
-    this.settings = this.extendDefaults(this.defaults, options)
-
-    if (this.options.type == 'variablepie' || this.options.type ==  'pie'){
-      this.setupPieChart(options)
-    } else if (this.options.type == 'gauge') {
-      this.setupGauge(options)
-    } else if (this.options.type == 'treemap') {
-      this.setupTreemap(options)
-    } else {
-      this.setupChart(options)
-    }
-  }
-
-  setupTheme() {
-    this.options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
-  }
-
-  setupGauge(options) {
-    highchartsMore(Highcharts)
-    solidGauge(Highcharts)
-    this.setupTheme()
-
-    Highcharts.chart(this.defaults.id, {
-      chart: {
-        events: {
-          load() {
-            setTimeout(this.reflow.bind(this), 0)
-          },
-        },
-        type: this.defaults.style,
-        height: this.defaults.height,
-      },
-      title: {
-        text: this.defaults.title,
-      },
-      yAxis: {
-        min: this.defaults.min,
-        max: this.defaults.max,
-        lineWidth: 0,
-        tickWidth: 0,
-        minorTickInterval: null,
-        tickAmount: 2,
-        tickPositions: [this.defaults.min, this.defaults.max],
-        labels: {
-          y: 26,
-          enabled: this.defaults.showLabels,
-        },
-      },
-      credits: false,
-      series: [
-        {
-          data: this.defaults.chartData,
-        },
-      ],
-      pane: {
-        center: ['50%', '50%'],
-        size: '90%',
-        startAngle: this.defaults.circumference[0],
-        endAngle: this.defaults.circumference[1],
-        background: {
-          borderWidth: 20,
-          innerRadius: '90%',
-          outerRadius: '90%',
-          shape: 'arc',
-          className: 'gauge-pane',
-        },
-      },
-      tooltip: {
-        headerFormat: '',
-        pointFormat: this.defaults.tooltipHtml,
-        followPointer: true,
-      },
-      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          animation: !this.defaults.disableAnimation,
-        },
-        solidgauge: {
-          borderColor: options.colors !== undefined && options.colors.length === 1 ? mapColors(options.colors).join() : highchartsTheme.colors[0],
-          dataLabels: {
-            format: `<span class="prefix">${this.defaults.prefix}</span>` +
-            '<span class="fix">{y:,f}</span>' +
-            `<span class="suffix">${this.defaults.suffix}</span>`,
-          }        },
-      },
-    },
-    )
-    document.querySelectorAll('.gauge-pane').forEach((pane) => pane.setAttribute('stroke-linejoin', 'round'))
-    if (document.querySelector('.prefix')) {
-      document.querySelectorAll('.prefix').forEach((prefix) => prefix.setAttribute('y', '28'))
-      document.querySelectorAll('.fix').forEach((fix) => fix.setAttribute('y', '38'))
-    }
-  }
-
-  setupPieChart(options) {
-    this.setupTheme()
-    Highcharts.chart(this.defaults.id, {
-      title: {
-        text: this.defaults.title,
-      },
-      chart: {
-        height: this.defaults.height,
-        type: this.defaults.type,
-        events: {
-          render: (event) => alignBlockElement(event),
-          redraw: (event) => alignBlockElement(event),
-        },
-      },
-
-      legend: {
-        align: this.defaults.align,
-        verticalAlign: this.defaults.verticalAlign,
-        layout: this.defaults.layout,
-        x: this.defaults.x,
-        y: this.defaults.y,
-      },
-
-      plotOptions: {
-        pie: {
-          colors: options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-          dataLabels: {
-            enabled: this.defaults.dataLabels,
-            connectorShape: 'straight',
-            connectorWidth: 3,
-            format: this.defaults.dataLabelHtml,
-          },
-          showInLegend: this.defaults.showInLegend,
-        },
-      },
-
-      tooltip: {
-        headerFormat: this.defaults.headerFormat,
-        pointFormat: this.defaults.tooltipHtml,
-        useHTML: this.defaults.useHTML,
-      },
-      series: [{
-        minPointSize: this.defaults.minPointSize,
-        maxPointSize: this.defaults.maxPointSize,
-        innerSize: options.borderWidth == 20 ? '100%' : this.defaults.innerSize,
-        data: this.defaults.chartData,
-        zMin: this.defaults.zMin,
-        startAngle: this.defaults.startAngle,
-        borderWidth: this.defaults.borderWidth,
-        borderColor: options.borderWidth == 20 ? null : this.defaults.innerSize,
-      }],
-      credits: false,
-    })
-  }
-
-  setupTreemap(options) {
-    treemap(Highcharts)
-    this.setupTheme()
-    options.dark ? Highcharts.setOptions(highchartsDarkTheme) :  Highcharts.setOptions(highchartsTheme)
-
-    Highcharts.chart(this.defaults.id, {
-      title: {
-        text: this.defaults.title,
-      },
-      chart: {
-        height: this.defaults.height,
-        type: this.defaults.type,
-      },
-      credits: false,
-      series: [{
-        data: this.defaults.chartData,
-      }],
-      plotOptions: {
-        treemap: {
-          allowTraversingTree: this.defaults.drillable,
-          colorByPoint: !this.defaults.grouped,
-          colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-        },
-      },
-      tooltip: {
-        pointFormat: this.defaults.tooltipHtml,
-        useHTML: true,
-      },
-    })
-  }
-
-  setupChart(options) {
-    this.setupTheme()
-    const configOptions = {
-      title: {
-        text: this.defaults.title,
-      },
-      chart: {
-        height: this.defaults.height,
-        type: this.defaults.type,
-      },
-      subtitle: {
-        text: this.defaults.subtitle,
-      },
-      yAxis: {
-        min: this.defaults.yAxisMin,
-        max: this.defaults.yAxisMax,
-        title: {
-          text: this.defaults.axisTitle,
-        },
-      },
-      xAxis: {
-        categories: this.defaults.xAxisCategories,
-      },
-      legend: {
-        enabled: this.defaults.legend,
-        align: this.defaults.align,
-        verticalAlign: this.defaults.verticalAlign,
-        layout: this.defaults.layout,
-        x: this.defaults.x,
-        y: this.defaults.y,
-      },
-      colors: options.colors !== undefined && options.colors.length > 0 ? mapColors(options.colors) : highchartsTheme.colors,
-      plotOptions: {
-        series: {
-          pointStart: this.defaults.pointStart,
-          dataLabels: {
-            enabled: false,
-          },
-        },
-      },
-      series: this.defaults.chartData,
-      credits: false,
-    }
-
-    if (!this.defaults.toggleLegendClick) {
-      configOptions.plotOptions.series.events = { legendItemClick: () => false }
-    }
-
-    Highcharts.chart(this.defaults.id, configOptions)
-  }
-
-  refresh(silent = false) {
-    if (!silent) {
-      this.settings.callbackRefreshBefore.call()
-    }
-
-    this.this.destroy(silent)
-    this.this.initialize(silent)
-    if (!silent) {
-      this.settings.callbackRefreshAfter.call()
-    }
-  }
-
-  destroy(silent = false) {
-    if (!silent) {
-      this.settings.callbackDestroyBefore.call()
-    }
-    if (!silent) {
-      this.settings.callbackDestroyAfter.call()
-    }
-  }
-
-  refreshSilently() {
-    this.this.refresh(true)
-  }
-
-  destroySilently() {
-    this.this.destroy(true)
-  }
-}
-
-export default pbChart

data/lib/playbook/pagination_renderer.rb

@@ -1,43 +0,0 @@
-# frozen_string_literal: true
-
-require "will_paginate/view_helpers/action_view"
-
-module Playbook
-  module Pagination
-    class Rails < WillPaginate::ActionView::LinkRenderer
-      def container_attributes
-        { class: "pb_pagination pagination" }
-      end
-
-      def page_number(page)
-        if page == current_page
-          tag("li", tag("span", page), class: "active")
-        else
-          tag("li", link(page, page, rel: rel_value(page)))
-        end
-      end
-
-      def previous_or_next_page(page, text, classname)
-        if page
-          tag("li", link(text, page), class: classname)
-        else
-          tag("li", tag("span", text), class: "%s disabled")
-        end
-      end
-
-      def gap
-        tag("li", tag("span", "&hellip;"), class: "disabled")
-      end
-
-      def previous_page
-        num = @collection.current_page > 1 && @collection.current_page - 1
-        previous_or_next_page(num, "<i class='far fa-chevron-left fa-xs'></i>", "prev")
-      end
-
-      def next_page
-        num = @collection.current_page < @collection.total_pages && @collection.current_page + 1
-        previous_or_next_page(num, "<i class='far fa-chevron-right fa-xs'></i>", "next")
-      end
-    end
-  end
-end