playbook_ui 6.1.0.pre.alpha2 → 6.2.0

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

@@ -1,41 +0,0 @@
-# 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 :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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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