playbook_ui 6.1.0.pre.alpha3 → 6.1.0.pre.alpha4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5b5f0ebf353807848145db1debca6c328dc6c22d75a3a9895f36fa6d0dd5a718
-  data.tar.gz: ec48bd6d3874cb9324adb62458aa523c50c3e66a6231e4d7bc3822c76eb2e281
+  metadata.gz: 935fd3d3a764d02be6807cbc6f3271f6771865a0d1c4e33bfc4dd078e3dc93af
+  data.tar.gz: 6cb1089a51ef34a15ea142fb23b8e9c705c647a811bb1f945acfbc47e139228a
 SHA512:
-  metadata.gz: 46fbf75023b2a972d37fa053ae549733887defe7f78475418d58c891839ef1997517091c5b1bebcb413667f986588759612ca8febd50fd3d1197d7ffa7ed3b81
-  data.tar.gz: 90c0f1dda08fdd629c1c36412dff45028934b2d4ac608d5d94836bb6595d541c30c450837087493888c501de987fa14e51469c24ffc427e977bba67a1146b744
+  metadata.gz: 721dab5867c8db09f78c40ea8b7bc3ed070437e9a3241299b9a1a46195a443546eb4526a12807a290b67df2e19bf703dd2b617f11b5be5796ad452f929bc09e6
+  data.tar.gz: 27d738f1736e7f516cb7a4f23d95189d6448628c68cee6ba29f230b656b7058ded78f603fd7d64ee4563bd733163e4165e4197206d72c7b85c4485e4de77e57d

data/app/pb_kits/playbook/_playbook.scss

@@ -15,6 +15,7 @@
 @import 'pb_currency/currency';
 @import 'pb_dashboard_value/dashboard_value';
 @import 'pb_date/date';
+@import 'pb_date_picker/date_picker';
 @import 'pb_date_range_inline/date_range_inline';
 @import 'pb_date_range_stacked/date_range_stacked';
 @import 'pb_date_stacked/date_stacked';

data/app/pb_kits/playbook/data/menu.yml

@@ -26,6 +26,7 @@ kits:
   - fixed_confirmation_toast
   - flex
   - forms:
+    - date_picker
     - file_upload
     - form
     - form_pill

data/app/pb_kits/playbook/index.js

@@ -14,6 +14,7 @@ export Contact from './pb_contact/_contact.jsx'
 export Currency from './pb_currency/_currency.jsx'
 export DashboardValue from './pb_dashboard_value/_dashboard_value.jsx'
 export Date from './pb_date/_date.jsx'
+export DatePicker from './pb_date_picker/_date_picker.jsx'
 export DateRangeInline from './pb_date_range_inline/_date_range_inline.jsx'
 export DateRangeStacked from './pb_date_range_stacked/_date_range_stacked.jsx'
 export DateStacked from './pb_date_stacked/_date_stacked.jsx'
@@ -91,6 +92,7 @@ export dashboardValueSettings from './pb_dashboard_value/dashboardValueSettings'
 
 // Other JS/Plugins
 export pbChart from './plugins/pb_chart.js'
+export datePickerHelper from './pb_date_picker/date_picker_helper.js'
 export PbTypeahead from './pb_typeahead'
 export PbPopover from './pb_popover'
 export PbTable from './pb_table'

data/app/pb_kits/playbook/packs/examples.js

@@ -28,6 +28,7 @@ import * as Contact from 'pb_contact/docs'
 import * as Currency from 'pb_currency/docs'
 import * as DashboardValue from 'pb_dashboard_value/docs'
 import * as Date from 'pb_date/docs'
+import * as DatePicker from 'pb_date_picker/docs'
 import * as DateRangeInline from 'pb_date_range_inline/docs'
 import * as DateRangeStacked from 'pb_date_range_stacked/docs'
 import * as DateStacked from 'pb_date_stacked/docs'
@@ -108,6 +109,7 @@ WebpackerReact.setup({
   ...Currency,
   ...DashboardValue,
   ...Date,
+  ...DatePicker,
   ...DateRangeInline,
   ...DateRangeStacked,
   ...DateStacked,

data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb

@@ -11,6 +11,6 @@
       <%= pb_rails("icon", props: { icon: "check", id: "check_icon", classname: "check_icon", fixed_width: true}) %>
     </span>
     <span class="pb_checkbox_label">
-      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
+      <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark }) %>
     </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -15,11 +15,6 @@ module Playbook
       prop :value
       prop :name
 
-      prop :required, type: Playbook::Props::Boolean,
-                      default: false
-      prop :form_spacing, type: Playbook::Props::Boolean,
-                          default: false
-
       def checked_html
         checked ? "checked='true'" : nil
       end

data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb

@@ -0,0 +1,40 @@
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + " " + object.error_class,
+    data: object.data,
+    id: object.id) do %>
+    <% if !object.hide_label %>
+      <%= pb_rails("caption", props: { text: object.label }) %>
+    <% end %>
+      <div class="input_wrapper">
+        <input
+            autocomplete="off"
+            id="<%= object.picker_id %>"
+            name="<%= object.name %>"
+            <%= object.required ? required="required" : ''%>
+        />
+        <% if object.error %>
+          <%= pb_rails("body", props: { 
+            status: "negative",
+            text: object.error
+          }) %>
+        <% end %>
+      </div>
+
+      <%= javascript_tag do %>
+      document.addEventListener("DOMContentLoaded", () => {
+          datePickerHelper({
+            defaultDate: "<%= object.default_date %>",
+            disableDate: <%=raw object.disable_date %>,
+            disableRange: <%=raw object.disable_range.to_json %>,
+            disableWeekdays: <%=raw object.disable_weekdays %>,
+            format: "<%= object.format %>",
+            maxDate: "<%= object.max_date %>",
+            minDate: "<%= object.min_date %>",
+            mode: "<%= object.mode %>",
+            pickerId: "<%= object.picker_id %>",
+            propModel: "rails"
+          })
+      })
+      <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx

@@ -0,0 +1,105 @@
+/* @flow */
+
+import React, { useEffect } from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps.js'
+// import flatpickr from 'flatpickr'
+import { Body, Caption } from '../'
+import datePickerHelper from './date_picker_helper.js'
+
+type DatePickerProps = {
+  aria?: object,
+  className?: String,
+  data?: object,
+  defaultDate?: String,
+  disableDate?: Array,
+  disableRange?: Array,
+  disableWeekdays?: Array,
+  error?: String,
+  format?: String,
+  hideLabel?: Boolean,
+  id?: String,
+  label?: String,
+  maxDate: String,
+  minDate: String,
+  mode?: String,
+  name: String,
+  pickerId?: String,
+}
+const DatePicker = (props: DatePickerProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    defaultDate = '',
+    disableDate = null,
+    disableRange = null,
+    disableWeekdays = null,
+    error,
+    format = 'm/d/Y',
+    hideLabel = false,
+    id,
+    label = 'Date Picker',
+    maxDate,
+    minDate,
+    mode = 'single',
+    name,
+    pickerId,
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(
+    buildCss('pb_date_picker_kit'),
+    className,
+    globalProps(props),
+    error ? 'error' : null,
+  )
+
+  useEffect(() => {
+    datePickerHelper({
+      defaultDate: defaultDate,
+      disableDate: disableDate,
+      disableRange: disableRange,
+      disableWeekdays: disableWeekdays,
+      format: format,
+      maxDate: maxDate,
+      minDate: minDate,
+      mode: mode,
+      pickerId: pickerId,
+      propModel: 'React',
+    })
+  }, [])
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      {className}
+      <If condition={!hideLabel}>
+        <Caption
+            text={label}
+        />
+      </If>
+      <div className="input_wrapper">
+        <input
+            autoComplete="off"
+            id={pickerId}
+            name={name}
+        />
+        <If condition={error}>
+          <Body
+              status="negative"
+              text={error}
+          />
+        </If>
+      </div>
+    </div>
+  )
+}
+
+export default DatePicker

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -0,0 +1,59 @@
+@import "~flatpickr/dist/flatpickr.css";
+@import "../pb_textarea/textarea_mixin";
+@import "../pb_title/title_mixin";
+@import "../tokens/colors";
+@import "../pb_caption/caption_mixin";
+
+[class^=pb_date_picker_kit] {
+  // input styles
+  [class^=pb_caption_kit] {
+    margin-bottom: $space_xs;
+    display: block;
+  }
+  .input_wrapper {
+    margin-bottom: $space_sm;
+    
+    .flatpickr-wrapper {
+      display: block;
+      input::placeholder {
+        @include pb_body_light;
+      }
+  
+      > input:first-child {
+        @include pb_textarea_light;
+        @include pb_title_4;
+        overflow: hidden;
+      }
+  
+      input:focus, input:-webkit-autofill:focus {
+        @include pb_textarea_focus;
+        -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
+        transition: background-color 5000s ease-in-out 0s;
+      }
+    }
+  }
+
+  &.error {
+    [class^=pb_body_kit] {
+      margin-top: $space_xs / 2;
+    }
+    .flatpickr-wrapper {
+      > input:first-child {
+        border-color: $error;
+      }
+    }
+  }
+}
+
+// date-picker styles
+
+div.flatpickr-weekdays {
+  margin-top: 5px;
+}
+span.flatpickr-weekday {
+  @include caption;
+}
+
+.pb_popover_body {
+  overflow: visible !important;
+}

data/app/pb_kits/playbook/pb_date_picker/date_picker.rb

@@ -0,0 +1,43 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbDatePicker
+    class DatePicker
+      include Playbook::Props
+
+      partial "pb_date_picker/date_picker"
+
+      prop :default_date, type: Playbook::Props::String,
+                          default: ""
+      prop :disable_date, type: Playbook::Props::Array,
+                          default: []
+      prop :disable_range, type: Playbook::Props::Array,
+                           default: []
+      prop :disable_weekdays, type: Playbook::Props::Array,
+                              default: []
+      prop :error, type: Playbook::Props::String
+      prop :format, type: Playbook::Props::String,
+                    default: "m/d/Y"
+      prop :hide_label, type: Playbook::Props::Boolean,
+                        default: false
+      prop :label, type: Playbook::Props::String,
+                   default: "Date Picker"
+      prop :max_date, type: Playbook::Props::String
+      prop :min_date, type: Playbook::Props::String
+      prop :name, type: Playbook::Props::String
+      prop :mode, type: Playbook::Props::String,
+                  default: "single"
+      prop :picker_id, type: Playbook::Props::String
+      prop :required, type: Playbook::Props::Boolean,
+                      default: false
+
+      def classname
+        generate_classname("pb_date_picker_kit")
+      end
+
+      def error_class
+        error ? "error" : ""
+      end
+    end
+  end
+end

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.js

@@ -0,0 +1,91 @@
+import flatpickr from 'flatpickr'
+
+const datePickerHelper = (config) => {
+  const {
+    defaultDate,
+    disableDate,
+    disableRange,
+    disableWeekdays,
+    format,
+    maxDate,
+    minDate,
+    mode,
+    pickerId,
+    propModel,
+  } = config
+
+  const defaultDateGetter = () => {
+    if (defaultDate !== '') {
+      if (propModel === 'rails' && defaultDate.includes('[') == true) {
+        return JSON.parse(defaultDate.replace(/"/g, '"'))
+      } else if (defaultDate === 'blank') {
+        return ''
+      } else {
+        return defaultDate
+      }
+    }
+    if (mode === 'single' && defaultDate === '') {
+      return new Date()
+    } else if (mode === 'range' && defaultDate === '') {
+      const today = new Date()
+      const tomorrow = new Date(today)
+      tomorrow.setDate(tomorrow.getDate() + 1)
+      return [today, tomorrow]
+    }
+  }
+  const disabledParser = () => {
+    if (disableDate && disableDate.length > 0) {
+      return disableDate
+    } else if (disableRange && disableRange.length > 0) {
+      return disableRange
+    } else {
+      return []
+    }
+  }
+
+  flatpickr(`#${pickerId}`, {
+    allowInput: true,
+    dateFormat: format,
+    defaultDate: defaultDateGetter(),
+    disable: disableWeekdays && disableWeekdays.length > 0 ? [
+      (date) => {
+        const weekdayObj = {
+          Sunday: 0,
+          Monday: 1,
+          Tuesday: 2,
+          Wednesday: 3,
+          Thursday: 4,
+          Friday: 5,
+          Saturday: 6,
+        }
+        return (
+          // try to refactor with for loop
+          date.getDay() === weekdayObj[disableWeekdays[0]] ||
+          date.getDay() === weekdayObj[disableWeekdays[1]] ||
+          date.getDay() === weekdayObj[disableWeekdays[2]] ||
+          date.getDay() === weekdayObj[disableWeekdays[3]] ||
+          date.getDay() === weekdayObj[disableWeekdays[4]] ||
+          date.getDay() === weekdayObj[disableWeekdays[5]] ||
+          date.getDay() === weekdayObj[disableWeekdays[6]]
+        )
+      },
+    ] : disabledParser(),
+    maxDate: maxDate,
+    minDate: minDate,
+    mode: mode,
+    static: true,
+  })
+
+  document.querySelector(`#${pickerId}`).addEventListener('input', (e) => {
+    const picker = document.querySelector(`#${pickerId}`)._flatpickr
+    picker.input.setAttribute('value', e.target.value)
+    const variant = picker.config.mode
+    if (variant === 'single' && e.target.value.split('').length === 10) {
+      picker.setDate(e.target.value)
+    } else if (variant === 'range' && e.target.value.split('').length === 24) {
+      picker.setDate(e.target.value)
+    }
+  })
+}
+
+export default datePickerHelper

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb

@@ -0,0 +1 @@
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default" }) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerDefault = () => (
+  <div>
+    <DatePicker
+        pickerId="date-picker-default"
+    />
+  </div>
+)
+
+export default DatePickerDefault

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb

@@ -0,0 +1,24 @@
+<%= pb_rails("date_picker", props: {
+  default_date: "07/31/2020",
+  label: "Default Date String",
+  picker_id: "date-picker-default-date1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: (Date.today + 2).httpdate,
+  label: "Default Date Dynamic",
+  picker_id: "date-picker-default-date2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: [(Date.today).httpdate, (Date.today + 7).httpdate],
+  label: "Default Date Range",
+  mode: "range",
+  picker_id: "date-picker-default-date3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  default_date: "blank",
+  label: "Blank",
+  picker_id: "date-picker-default-date4"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerDefaultDate = () => (
+  <div>
+    <DatePicker
+        defaultDate="07/31/2020"
+        label="Default Date String"
+        pickerId="date-picker-default-date1"
+    />
+    <DatePicker
+        defaultDate={new Date().fp_incr(1)}
+        label="Default Date Dynamic"
+        pickerId="date-picker-default-date2"
+    />
+    <DatePicker
+        defaultDate={[new Date().fp_incr(1), new Date().fp_incr(3)]}
+        label="Default Date Range"
+        mode="range"
+        pickerId="date-picker-default-date3"
+    />
+    <DatePicker
+        defaultDate="blank"
+        label="Blank"
+        pickerId="date-picker-default-date4"
+    />
+  </div>
+)
+
+export default DatePickerDefaultDate

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb

@@ -0,0 +1,43 @@
+<%= pb_rails("date_picker", props: {
+  disable_date: [(Date.today + 1).httpdate],
+  label: "Disable Single Date",
+  picker_id: "single-disabled-date"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_date: [(Date.today + 1).httpdate, (Date.today + 3).httpdate],
+  label: "Disable Multiple Dates",
+  picker_id: "multiple-disabled-dates"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_range: [
+          {
+            from: (Date.today + 1).httpdate,
+            to: (Date.today + 7).httpdate,
+          },
+        ],
+  label: "Disable Single Range",
+  picker_id: "single-date-range"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_range: [
+          {
+            from: (Date.today + 1).httpdate,
+            to: (Date.today + 3).httpdate,
+          },
+          {
+            from: (Date.today + 7).httpdate,
+            to: (Date.today + 14).httpdate,
+          },
+        ],
+  label: "Disable Multiple Ranges",
+  picker_id: "multiple-date-ranges"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  disable_weekdays: ['Sunday', 'Saturday'],
+  label: "Disable Weekdays",
+  picker_id: "disabled-weekdays"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerDisabled = () => (
+  <div>
+    <DatePicker
+        disableDate={[new Date().fp_incr(1)]}
+        label="Disable Single Date"
+        pickerId="single-disabled-date"
+    />
+    <DatePicker
+        disableDate={[new Date().fp_incr(1), new Date().fp_incr(3)]}
+        label="Disable Multiple Dates"
+        pickerId="multiple-disabled-dates"
+    />
+    <DatePicker
+        disableRange={[
+          {
+            from: new Date().fp_incr(1),
+            to: new Date().fp_incr(7),
+          },
+        ]}
+        label="Disable Single Range"
+        pickerId="single-date-range"
+    />
+    <DatePicker
+        disableRange={[
+          {
+            from: new Date().fp_incr(1),
+            to: new Date().fp_incr(3),
+          },
+          {
+            from: new Date().fp_incr(7),
+            to: new Date().fp_incr(14),
+          },
+        ]}
+        label="Disable Multiple Ranges"
+        pickerId="multiple-date-ranges"
+    />
+    <DatePicker
+        disableWeekdays={['Sunday', 'Saturday']}
+        label="Disable Weekdays"
+        pickerId="disabled-weekdays"
+    />
+  </div>
+)
+
+export default DatePickerDisabled

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: { 
+  error: "Invalid date. Please pick a valid date.",
+  picker_id: "date-picker-error"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerError = () => (
+  <div>
+    <DatePicker
+        error="Invalid date. Please pick a valid date."
+        pickerId="date-picker-error"
+    />
+  </div>
+)
+
+export default DatePickerError

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb

@@ -0,0 +1,19 @@
+<%= pb_rails("date_picker", props: {
+  format: "m-d-Y",
+  picker_id: "date-picker-format1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/y",
+  picker_id: "date-picker-format2"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "n-j-y",
+  picker_id: "date-picker-format3"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "Y-d-m",
+  picker_id: "date-picker-format4"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerFormat = () => (
+  <div>
+    <DatePicker
+        format="m-d-Y"
+        pickerId="date-picker-format1"
+    />
+    <DatePicker
+        format="m/d/y"
+        pickerId="date-picker-format2"
+    />
+    <DatePicker
+        format="n-j-y"
+        pickerId="date-picker-format3"
+    />
+    <DatePicker
+        format="Y-d-m"
+        pickerId="date-picker-format4"
+    />
+  </div>
+)
+
+export default DatePickerFormat

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb

@@ -0,0 +1,9 @@
+<%= pb_rails("date_picker", props: {
+  label: "Your Label Here",
+  picker_id: "date-picker-label"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  hide_label: true,
+  picker_id: "date-picker-hide-label"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerLabel = () => (
+  <div>
+    <DatePicker
+        label="Your Label Here"
+        pickerId="date-picker-label"
+    />
+    <DatePicker
+        hideLabel
+        pickerId="date-picker-hide-label"
+    />
+  </div>
+)
+
+export default DatePickerLabel

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb

@@ -0,0 +1,14 @@
+<%= pb_rails("date_picker", props: {
+  label: "Dynamic dates.",
+  max_date: (Date.today + 3).httpdate,
+  min_date: (Date.today - 3).httpdate,
+  picker_id: "date-picker-min-max1"
+}) %>
+
+<%= pb_rails("date_picker", props: {
+  format: "m/d/Y",
+  label: "Absolute formatted dates.",
+  max_date: "10/20/2020",
+  min_date: "10/10/2020",
+  picker_id: "date-picker-min-max2"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerMinMax = () => (
+  <div>
+    <DatePicker
+        label="Dynamic dates using flatpickr increment function."
+        maxDate={new Date().fp_incr(3)}
+        minDate={new Date().fp_incr(-3)}
+        pickerId="date-picker-min-max1"
+    />
+    <DatePicker
+        format="m/d/Y"
+        label="Absolute formatted dates."
+        maxDate="10/20/2020"
+        minDate="10/10/2020"
+        pickerId="date-picker-min-max2"
+    />
+  </div>
+)
+
+export default DatePickerMinMax

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb

@@ -0,0 +1,4 @@
+<%= pb_rails("date_picker", props: {
+  mode: "range",
+  picker_id: "date-picker-range"
+}) %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import { DatePicker } from '../../'
+
+const DatePickerRange = () => (
+  <div>
+    <DatePicker
+        mode="range"
+        pickerId="date-picker-range"
+    />
+  </div>
+)
+
+export default DatePickerRange

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

@@ -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

@@ -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_filter/docs/_filter_default.html.erb

@@ -27,13 +27,10 @@
       OpenStruct.new(name: "Georgia", value: 10),
     ]
   %>
-  <%= pb_rails("form", props: { form_system_options: { scope: :example, 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 } %>
-    <%= pb_rails("caption", props: { text: "Status", margin_bottom: "sm" }) %>
-    <%= form.check_box :example_checkbox, props: { text: "Delivered", margin_right: "md" } %>
-    <%= form.check_box :example_checkbox, props: { text: "Unsubscribed", margin_right: "md" } %>
-    <%= form.check_box :example_checkbox, props: { text: "Failed", margin_right: "md" } %>
+  <%= 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_form/docs/_form_form_with.html.erb

@@ -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,7 +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.check_box :example_checkbox, data: { field1: "value1", field2: "value2" }, props: { text: "Example Checkbox", label: true, value: "test-val" } %>
+  <%= 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

@@ -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,7 +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.check_box :example_checkbox, props: { text: "Example Checkbox", label: true, 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

@@ -14,7 +14,7 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
+    :example_date_picker_field
 
 
     def self.model_name
@@ -50,7 +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.check_box :example_checkbox_field, props: { text: "Example Checkbox", 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

@@ -14,7 +14,7 @@
     :example_text_area,
     :example_select_field,
     :example_collection_select_field,
-    :example_checkbox_field
+    :example_date_picker_field
 
 
     def self.model_name
@@ -50,7 +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.check_box :example_checkbox_field, props: { text: "Example Checkbox", label: true, required: 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

@@ -14,11 +14,10 @@ module Playbook
         prepend(FormFieldBuilder.new(:password_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:url_field, kit_name: "text_input"))
         prepend(FormFieldBuilder.new(:text_area, kit_name: "textarea"))
-        # prepend(FormFieldBuilder.new(:check_box, kit_name: "checkbox"))
         prepend(TypeaheadField)
         prepend(SelectField)
         prepend(CollectionSelectField)
-        prepend(CheckboxField)
+        prepend(DatePickerField)
 
         def actions(&block)
           ActionArea.new(self).wrapper(&block)

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

@@ -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/form_builder/form_field_builder.rb

@@ -12,7 +12,6 @@ module Playbook
             options[:skip_default_ids] = false unless options.key?(:skip_default_ids)
             options[:required] = true if props[:required]
             options[:placeholder] = props[:placeholder] || ""
-            options[:value] = props[:value]
 
             if props.key?(:validation)
               validation = props[:validation]

data/app/pb_kits/playbook/vendor.js

@@ -5,6 +5,10 @@ window.pbChart = pbChart
 // Forms
 import './pb_form/pb_form_validation'
 
+// Date Picker
+import datePickerHelper from './pb_date_picker/date_picker_helper.js'
+window.datePickerHelper = datePickerHelper
+
 // Lazy image loading
 import 'lazysizes'
 
@@ -19,3 +23,5 @@ PbTypeahead.start()
 
 import PbTable from './pb_table'
 PbTable.start()
+
+import 'flatpickr'

data/lib/playbook/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Playbook
-  VERSION = "6.1.0.pre.alpha3"
+  VERSION = "6.1.0.pre.alpha4"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 6.1.0.pre.alpha3
+  version: 6.1.0.pre.alpha4
 platform: ruby
 authors:
 - Power UX
@@ -680,6 +680,29 @@ files:
 - app/pb_kits/playbook/pb_date/docs/_description.md
 - app/pb_kits/playbook/pb_date/docs/example.yml
 - app/pb_kits/playbook/pb_date/docs/index.js
+- app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb
+- app/pb_kits/playbook/pb_date_picker/_date_picker.jsx
+- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
+- app/pb_kits/playbook/pb_date_picker/date_picker.rb
+- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_label.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb
+- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx
+- app/pb_kits/playbook/pb_date_picker/docs/example.yml
+- app/pb_kits/playbook/pb_date_picker/docs/index.js
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.html.erb
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
 - app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
@@ -844,8 +867,8 @@ files:
 - app/pb_kits/playbook/pb_form/form/simple_form_form.rb
 - app/pb_kits/playbook/pb_form/form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/action_area.rb
-- app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb
+- app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_field_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/form_with_form_builder.rb
 - app/pb_kits/playbook/pb_form/form_builder/select_field.rb

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

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-module Playbook
-  module PbForm
-    module FormBuilder
-      module CheckboxField
-        def check_box(name, data: {}, props: {})
-          value = props[:value] ||= 1
-          input = super(name, { required: props[:required], data: data }, value)
-          label_text = name.to_s.gsub("_", " ")
-
-          props[:margin_bottom] = "sm"
-          props[:form_spacing] = true
-
-          # Refactor and dry up, solve adding nil error
-          if props[:label]
-            @template.pb_rails("caption", props: { text: label_text, margin_bottom: "xs" }) +
-              @template.pb_rails("checkbox", props: props) do
-                input
-              end
-          else
-            @template.pb_rails("checkbox", props: props) do
-              input
-            end
-          end
-        end
-      end
-    end
-  end
-end