RubyGems - playbook_ui - Versions diffs - 6.0.1 → 6.1.0.pre.alpha1 - Mend

playbook_ui 6.0.1 → 6.1.0.pre.alpha1

Files changed (205) hide show

data/app/pb_kits/playbook/pb_date_picker/docs/example.yml ADDED

@@ -0,0 +1,23 @@
+examples:
+  rails:
+  - date_picker_default: Default
+  - date_picker_default_date: Default Date
+  - date_picker_label: Label
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error
+  react:
+  - date_picker_default: Default
+  - date_picker_default_date: Default Date
+  - date_picker_label: Label
+  - date_picker_range: Range
+  - date_picker_format: Format
+  - date_picker_disabled: Disabled Dates
+  - date_picker_min_max: Min Max
+  - date_picker_error: Error

data/app/pb_kits/playbook/pb_date_picker/docs/index.js ADDED

@@ -0,0 +1,8 @@
+export { default as DatePickerDefault } from './_date_picker_default.jsx'
+export { default as DatePickerDefaultDate } from './_date_picker_default_date.jsx'
+export { default as DatePickerLabel } from './_date_picker_label.jsx'
+export { default as DatePickerRange } from './_date_picker_range.jsx'
+export { default as DatePickerFormat } from './_date_picker_format.jsx'
+export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
+export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
+export { default as DatePickerError } from './_date_picker_error.jsx'

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx CHANGED

@@ -4,7 +4,7 @@ import React from 'react'
 import DateTime from '../pb_kit/dateTime.js'
 import { Body, Icon } from '../'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type DateRangeInlineProps = {
   className?: String,
@@ -27,7 +27,7 @@ const dateTimeIso = (dateValue) => {
 const DateRangeInline = (props: DateRangeInlineProps) => {
   const { endDate, startDate } = props
   return (
-    <div className={classnames('pb_date_range_inline', spacing(props))}>
+    <div className={classnames('pb_date_range_inline', globalProps(props))}>
       <Body
           color="light"
           tag="span"

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.jsx CHANGED

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 import { Body, DateYearStacked, Flex, FlexItem, Icon } from '../'
@@ -18,7 +18,7 @@ type DateRangeStackedProps = {
 const DateRangeStacked = (props: DateRangeStackedProps) => {
   const { className, dark = false, endDate, startDate } = props
-  const css = classnames(className, buildCss('pb_date_range_stacked'), spacing(props))
+  const css = classnames(className, buildCss('pb_date_range_stacked'), globalProps(props))
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.jsx CHANGED

@@ -5,7 +5,7 @@ import classnames from 'classnames'
 import DateTime from '../pb_kit/dateTime.js'
 import { buildCss } from '../utilities/props'
 import { Caption, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type DateStackedProps = {
   align?: "left" | "center" | "right",
@@ -38,7 +38,7 @@ const DateStacked = (props: DateStackedProps) => {
       dark: dark,
       reverse: reverse,
     }),
-    spacing(props)
+    globalProps(props)
   )
   const currentYear = new Date().getFullYear().toString()

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx CHANGED

@@ -2,7 +2,7 @@
 import React from 'react'
 import { DateStacked, Flex, FlexItem, TimeStacked } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type DateTimeStackedProps = {
   data?: String,
@@ -15,7 +15,7 @@ const DateTimeStacked = (props: DateTimeStackedProps) => {
   const { date, dark } = props
   return (
     <Flex
-        className={spacing(props)}
+        className={globalProps(props)}
         orientation="row"
         vertical="center"
     >

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.jsx CHANGED

@@ -4,7 +4,7 @@ import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
 import DateTime from '../pb_kit/dateTime.js'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 import { Body, Title } from '../'
@@ -20,7 +20,7 @@ type DateYearStackedProps = {
 const DateYearStacked = (props: DateYearStackedProps) => {
   const { align = 'left', className, dark = false, date } = props
   const dateTimestamp = new DateTime({ value: date })
-  const css = classnames(className, buildCss('pb_date_year_stacked', align), spacing(props))
+  const css = classnames(className, buildCss('pb_date_year_stacked', align), globalProps(props))
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx CHANGED

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type DistributionBarProps = {
   className?: String,
@@ -37,7 +37,7 @@ const DistributionBar = (props: DistributionBarProps) => {
   const normalizedValues = normalizeCharacters(widths)
   return (
-    <div className={classnames(`pb_distribution_bar_${size}`, spacing(props))}>
+    <div className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}>
       {barValues(normalizedValues)}
     </div>
   )

data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx CHANGED

@@ -4,7 +4,7 @@ import React, { useCallback } from 'react'
 import { useDropzone } from 'react-dropzone'
 import { buildCss, noop } from '../utilities/props'
 import classnames from 'classnames'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 import type { Callback } from '../types.js'
@@ -33,7 +33,7 @@ const FileUpload = (props: FileUploadProps) => {
   return (
     <div
-        className={classnames(buildCss('pb_file_upload_kit', className), spacing(props))}
+        className={classnames(buildCss('pb_file_upload_kit', className), globalProps(props))}
         {...getRootProps()}
     >
       <Card>

data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx CHANGED

@@ -3,7 +3,7 @@
 import React, { Node } from 'react'
 import { Card } from '../../'
 import classnames from 'classnames'
-import { spacing } from '../../utilities/spacing.js'
+import { globalProps } from '../../utilities/globalProps.js'
 type FilterBackgroundProps = {
   background: boolean,
@@ -14,7 +14,7 @@ const FilterBackground = (props: FilterBackgroundProps) => {
   const { background = true, className, children } = props
   return (
-    <div className={classnames(`pb_filter_kit ${className}`, spacing(props))}>
+    <div className={classnames(`pb_filter_kit ${className}`, globalProps(props))}>
       <Choose>
         <When condition={background}>
           <Card padding="none">{children}</Card>

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb CHANGED

@@ -27,9 +27,10 @@
       OpenStruct.new(name: "Georgia", value: 10),
     ]
   %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+  <%= pb_rails("form", props: { form_system_options: { scope: :blahblah, method: :get } }) do |form| %>
     <%= form.text_field :example_text_field, props: { label: true } %>
     <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+    <%= form.date_picker :example_date_picker %>
     <%= form.actions do |action| %>
       <%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.jsx CHANGED

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { Icon, Title } from '../'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 const iconMap = {
   success: 'check',
@@ -25,7 +25,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
   const css = classnames(
     className,
     `pb_fixed_confirmation_toast_kit_${status}`,
-    spacing(props)
+    globalProps(props)
   )
   const icon = iconMap[status]

data/app/pb_kits/playbook/pb_flex/_flex.jsx CHANGED

@@ -3,7 +3,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { spacing as spacingFunc } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type FlexProps = {
   children: Array<React.ReactNode> | React.ReactNode,
   className?: String,
@@ -52,7 +52,7 @@ const Flex = (props: FlexProps) => {
           wrapClass
         ),
         className,
-        spacingFunc(props)
+        globalProps(props)
       )}
     >
       {children}

data/app/pb_kits/playbook/pb_flex/_flex_item.jsx CHANGED

@@ -2,7 +2,7 @@
 import React from 'react'
 import classnames from 'classnames'
 import { buildCss } from '../utilities/props'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type FlexItemPropTypes = {
   children: Array<React.ReactNode> | React.ReactNode,
   fixedSize: String,
@@ -18,7 +18,7 @@ const FlexItem = (props: FlexItemPropTypes) => {
   return (
     <div
-        className={classnames(buildCss('pb_flex_item_kit', growClass), className, spacing(props))}
+        className={classnames(buildCss('pb_flex_item_kit', growClass), className, globalProps(props))}
         style={fixedStyle}
     >
       {children}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED

@@ -13,7 +13,7 @@
   ]
 %>
-<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
+<%= pb_rails("form", props: { form_system_options: { scope: :scope, method: :get } }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true } %>
   <%= form.telephone_field :example_phone_field, props: { label: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
@@ -24,6 +24,7 @@
   <%= form.text_area :example_text_area, props: { label: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
+  <%= form.date_picker :example_date_picker1, props: { default_date: 'blank' } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED

@@ -14,7 +14,7 @@
 %>
 <%= pb_rails("form", props: {
-    form_system_options: { scope: :example, method: :get },
+    form_system_options: { scope: :scope, method: :get },
     validate: true
   }) do |form| %>
   <%= form.text_field :example_text_field, props: { label: true, required: true } %>
@@ -27,6 +27,7 @@
   <%= form.text_area :example_text_area, props: { label: true, required: true } %>
   <%= form.select :example_select, [ ["Yes", 1], ["No", 2] ], props: { label: true, blank_selection: "Select One...", required: true } %>
   <%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true, blank_selection: "Select One...", required: true } %>
+  <%= form.date_picker :example_date_picker2, props: { default_date: 'blank' } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb CHANGED

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_date_picker_field
     def self.model_name
@@ -49,6 +50,7 @@
   <%= form.input :example_text_area, as: :text %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { label: true } %>
+  <%= form.date_picker :example_date_picker_field, props: { default_date: 'blank', } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb CHANGED

@@ -13,7 +13,8 @@
     :example_url_field,
     :example_text_area,
     :example_select_field,
-    :example_collection_select_field
+    :example_collection_select_field,
+    :example_date_picker_field
     def self.model_name
@@ -49,6 +50,7 @@
   <%= form.input :example_text_area, {as: :text, input_html: {props: {required: true}}} %>
   <%= form.select :example_select_field, [["Yes", 1], ["No", 2]], props: { required: true, blank_selection: "Select One...", label: true } %>
   <%= form.collection_select :example_collection_select_field, example_collection, :value, :name, props: { required: true, blank_selection: "Select One...", label: true } %>
+  <%= form.date_picker :example_date_picker_field, props: { default_date: 'blank', required: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/form_builder.rb CHANGED

@@ -17,6 +17,7 @@ module Playbook
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
+        prepend(DatePickerField)
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb ADDED

@@ -0,0 +1,41 @@
+# frozen_string_literal: true
+module Playbook
+  module PbForm
+    module FormBuilder
+      module DatePickerField
+        # def date_field(name, props: {})
+        #   # props[:name] = name
+        #   input = super(name)
+        #   puts name
+        #   puts input
+        #   @template.pb_rails("date_picker", props: props) do
+        #     input
+        #   end
+        # end
+        # def date_picker(name, props: {})
+        #   predicate = name.to_s.split("_")[0]
+        #   html_name = "#{predicate}[#{name}]"
+        #   id = predicate + "_" + name.to_s
+        #   props[:name] = html_name
+        #   props[:picker_id] = id
+        #   @template.pb_rails("date_picker", props: props)
+        # end
+        def date_picker(name, props: {})
+          prefix = @object_name
+          html_attribute_name = "#{prefix}[#{name}]"
+          html_id = "#{prefix}_#{name}"
+          props[:name] = html_attribute_name
+          props[:picker_id] = html_id
+          @template.pb_rails("date_picker", props: props)
+        end
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx CHANGED

@@ -4,7 +4,7 @@ import classnames from 'classnames'
 import Title from '../pb_title/_title.jsx'
 import Icon from '../pb_icon/_icon.jsx'
 import Avatar from '../pb_avatar/_avatar.jsx'
-import { spacing } from '../utilities/spacing.js'
+import { globalProps } from '../utilities/globalProps.js'
 type FormPillProps = {
   className?: String,
@@ -19,7 +19,7 @@ const FormPill = (props: FormPillProps) => {
   const { className, text, name, onClick = () => {}, avatarUrl } = props
   const css = classnames(
     [`pb_form_pill_kit_${'primary'}`, className],
-    spacing(props)
+    globalProps(props)
   )
   return (
     <div className={css}>

data/app/pb_kits/playbook/pb_gauge/_gauge.html.erb ADDED

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

data/app/pb_kits/playbook/pb_gauge/_gauge.jsx ADDED

@@ -0,0 +1,110 @@
+/* @flow */
+import React, { useEffect, useRef } from 'react'
+import { pbChart } from '../'
+import { globalProps } from '../utilities/globalProps'
+import classnames from 'classnames'
+import Highcharts from 'highcharts'
+import {
+  buildAriaProps,
+  buildCss,
+  buildDataProps,
+} from '../utilities/props'
+type GaugeProps = {
+  aria: Object,
+  className?: String,
+  chartData?: Array,
+  data?: Object,
+  disableAnimation: Boolean,
+  fullCircle: Boolean,
+  height: String,
+  id?: String,
+  max: Number,
+  min: Number,
+  prefix: String,
+  showLabels: Boolean,
+  style: String,
+  suffix: String,
+  title: String,
+  tooltipHtml: String,
+}
+const Gauge = (props: GaugeProps) => {
+  const {
+    aria = {},
+    className,
+    chartData = [{ name: 'Name', value: 0 }],
+    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>',
+  } = props
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const css = buildCss({
+    'pb_gauge_kit': true,
+  })
+  // Runs first time component Renders
+  useEffect(() => {
+    const formattedChartData = chartData.map((obj) => {
+      obj.y = obj.value
+      delete obj.value
+      return obj
+    })
+    new pbChart('.selector', {
+      id: id,
+      chartData: formattedChartData,
+      circumference: fullCircle ? [0, 360] : [-100, 100],
+      disableAnimation: disableAnimation,
+      height: height,
+      min: min,
+      max: max,
+      prefix: prefix,
+      title: title,
+      suffix: suffix,
+      showLabels: showLabels,
+      style: style,
+      tooltipHtml: tooltipHtml,
+      type: 'gauge',
+    })
+  }, [])
+  const componentDidMount = useRef(false)
+  // Doesn't run the first time but runs every subsequent render
+  useEffect(() => {
+    if (componentDidMount.current) {
+      Highcharts.charts.forEach((chart) => {
+        if (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 (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classnames(css, className, globalProps(props))}
+        id={id}
+    />
+  )
+}
+export default Gauge