playbook_ui 7.10.0 → 7.11.0.pre.alpha1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/controllers/playbook/application_controller.rb +5 -3
- data/app/helpers/playbook/application_helper.rb +13 -19
- data/app/helpers/playbook/pb_doc_helper.rb +8 -36
- data/app/helpers/playbook/pb_kit_helper.rb +1 -25
- data/app/helpers/playbook/pb_sample_helper.rb +20 -25
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb +23 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.jsx +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.html.erb +8 -8
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb +27 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx +44 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb +4 -4
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_min_max.html.erb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.html.erb +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range.jsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +4 -2
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +1 -0
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +2 -2
- data/app/pb_kits/playbook/pb_filter/_filter.scss +0 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +0 -41
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +35 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx +47 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +7 -9
- data/app/pb_kits/playbook/pb_nav/_item.jsx +3 -0
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.html.erb +6 -0
- data/app/pb_kits/playbook/pb_nav/docs/_new_tab.jsx +34 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_nav/item.rb +5 -2
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +0 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +1 -1
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb +10 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/lib/playbook.rb +6 -17
- data/lib/playbook/engine.rb +0 -3
- data/lib/playbook/markdown/template_handler.rb +45 -0
- data/lib/playbook/props/base.rb +19 -3
- data/lib/playbook/version.rb +1 -1
- metadata +16 -6
- data/app/helpers/playbook/layout_helper.rb +0 -9
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 875a00d88f5cdc23fcad3e3c3cefff43a6ed592326b17da87f8bd3605f499d69
|
4
|
+
data.tar.gz: 67302126b0b27666a56fc59ec4bcdc22fd523dbab3a8c9fb376d18f9fdcb67fd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 5e3ed66b3c3866de080032ed635e3b141486b3e7de8ee0b2f8a96dd588937e407ab6a44af189e2ad949aa5bee02c134e07791dd297e2877369a8db99c2ec5570
|
7
|
+
data.tar.gz: 21aaff84c5f705ac6461287a27878dc34c7286f0290b55cb902f66d736633f73652d1a404c3bd36e427010371b7487fcd41e2e7cfd7934c52c548d003aaa6fec
|
@@ -3,11 +3,13 @@
|
|
3
3
|
module Playbook
|
4
4
|
class ApplicationController < ActionController::Base
|
5
5
|
helper Webpacker::Helper
|
6
|
-
helper Playbook::
|
6
|
+
helper Playbook::ApplicationHelper
|
7
7
|
helper Playbook::PbDocHelper
|
8
8
|
helper Playbook::PbSampleHelper
|
9
9
|
append_view_path Playbook::Engine.root + "app/pb_kits"
|
10
|
-
end
|
11
10
|
|
12
|
-
|
11
|
+
def delete_dark_mode_cookie
|
12
|
+
cookies.delete :dark_mode
|
13
|
+
end
|
14
|
+
end
|
13
15
|
end
|
@@ -1,36 +1,30 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
require "webpacker"
|
4
|
-
require "webpacker/react/railtie" if defined?(Rails)
|
5
|
-
require "webpacker/react/helpers"
|
6
|
-
require "webpacker/react/component"
|
7
|
-
|
8
3
|
module Playbook
|
9
4
|
module ApplicationHelper
|
10
|
-
include ::Webpacker::Helper
|
11
5
|
include ::Webpacker::React::Helpers
|
6
|
+
include ::Playbook::PbKitHelper
|
12
7
|
|
13
8
|
def current_webpacker_instance
|
14
9
|
Playbook.webpacker
|
15
10
|
end
|
16
11
|
|
17
|
-
def
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
12
|
+
def pb_rails(kit, props: {}, &block)
|
13
|
+
super kit, props: dark_mode_props(props), &block
|
14
|
+
end
|
15
|
+
|
16
|
+
def pb_react(kit, props: {}, options: {})
|
17
|
+
react_component kit.camelize, dark_mode_props(props), options
|
23
18
|
end
|
24
19
|
|
20
|
+
private
|
21
|
+
|
25
22
|
def dark_mode_props(props)
|
26
|
-
|
27
|
-
props.merge(dark: dark_mode)
|
28
|
-
elsif cookies[:dark_mode] == "false"
|
29
|
-
props.merge(dark: dark_mode)
|
30
|
-
else
|
31
|
-
props
|
32
|
-
end
|
23
|
+
(props || {}).merge(dark: dark_mode?)
|
33
24
|
end
|
34
25
|
|
26
|
+
def dark_mode?
|
27
|
+
cookies[:dark_mode].eql? "true"
|
28
|
+
end
|
35
29
|
end
|
36
30
|
end
|
@@ -17,53 +17,20 @@ module Playbook
|
|
17
17
|
end
|
18
18
|
end
|
19
19
|
|
20
|
-
def read_file(filename)
|
21
|
-
if File.file?(filename)
|
22
|
-
File.read(filename)
|
23
|
-
else
|
24
|
-
""
|
25
|
-
end
|
26
|
-
end
|
27
|
-
|
28
|
-
def delete_dark_mode_cookie
|
29
|
-
cookies.delete :dark_mode
|
30
|
-
end
|
31
|
-
|
32
|
-
def get_samples(kit)
|
33
|
-
sample_yaml = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/samples.yml")
|
34
|
-
all_samples = []
|
35
|
-
|
36
|
-
sample_yaml.each do |_category, sample|
|
37
|
-
all_samples.push(sample)
|
38
|
-
end
|
39
|
-
|
40
|
-
output = ""
|
41
|
-
samples_using_kit = []
|
42
|
-
all_samples[0].each do |sample|
|
43
|
-
filepath = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.html.erb"
|
44
|
-
output = `grep -l 'pb_rails(\"#{kit}' #{filepath}`
|
45
|
-
samples_using_kit.push(sample) if output.chomp == filepath
|
46
|
-
end
|
47
|
-
samples_using_kit
|
48
|
-
end
|
49
|
-
|
50
20
|
def kit_path(kit)
|
51
21
|
"#{Playbook::Engine.root}/app/pb_kits/playbook/pb_#{kit}"
|
52
22
|
end
|
53
23
|
|
54
24
|
def get_kit_description(kit)
|
55
|
-
|
56
|
-
read_file(filename)
|
25
|
+
read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_description.md"
|
57
26
|
end
|
58
27
|
|
59
28
|
def get_per_sample_descriptions(kit, key)
|
60
|
-
|
61
|
-
read_file(filename)
|
29
|
+
read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_#{key}.md"
|
62
30
|
end
|
63
31
|
|
64
32
|
def get_kit_footer(kit)
|
65
|
-
|
66
|
-
read_file(filename)
|
33
|
+
read_source_file "app/pb_kits/playbook/pb_#{kit}/docs/_footer.md"
|
67
34
|
end
|
68
35
|
|
69
36
|
def pb_kit(kit: "", type: "rails", show_code: true, limit_examples: false)
|
@@ -171,6 +138,11 @@ module Playbook
|
|
171
138
|
(!kit.nil? && @kit == link)
|
172
139
|
end
|
173
140
|
|
141
|
+
def read_source_file(*args)
|
142
|
+
path = Playbook::Engine.root.join(*args)
|
143
|
+
path.exist? ? path.read : ""
|
144
|
+
end
|
145
|
+
|
174
146
|
def format_search_hash(kit)
|
175
147
|
label_value_hash = {
|
176
148
|
label: kit.to_s.titleize,
|
@@ -1,41 +1,17 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
require "webpacker/react/railtie" if defined?(Rails)
|
4
|
-
require "webpacker/react/helpers"
|
5
|
-
require "webpacker/react/component"
|
6
|
-
|
7
3
|
module Playbook
|
8
4
|
module PbKitHelper
|
9
|
-
|
10
5
|
def pb_rails(kit, props: {}, &block)
|
11
6
|
previous = prefix_partial_path_with_controller_namespace
|
12
7
|
self.prefix_partial_path_with_controller_namespace = false
|
13
|
-
kit = build_view_model(kit.to_s,
|
8
|
+
kit = build_view_model(kit.to_s, props, &block)
|
14
9
|
render(partial: kit, as: :object)
|
15
10
|
ensure
|
16
11
|
self.prefix_partial_path_with_controller_namespace = previous
|
17
12
|
end
|
18
13
|
|
19
|
-
def pb_react(kit, props:{dark: react_props}, options: {})
|
20
|
-
::Webpacker::React::Component.new(kit.camelize).render(props, options)
|
21
|
-
end
|
22
|
-
|
23
14
|
private
|
24
|
-
def rails_props(props)
|
25
|
-
if @playbook.nil?
|
26
|
-
props
|
27
|
-
else
|
28
|
-
dark_mode_props(props)
|
29
|
-
end
|
30
|
-
end
|
31
|
-
|
32
|
-
def react_props
|
33
|
-
if @playbook.nil?
|
34
|
-
false
|
35
|
-
else
|
36
|
-
dark_mode
|
37
|
-
end
|
38
|
-
end
|
39
15
|
|
40
16
|
def is_subkit?(kit)
|
41
17
|
kit.match(%r{[/\\]})
|
@@ -2,43 +2,20 @@
|
|
2
2
|
|
3
3
|
module Playbook
|
4
4
|
module PbSampleHelper
|
5
|
-
def has_sample_type?(sample, type)
|
6
|
-
type ||= "rails"
|
7
|
-
if type == "rails"
|
8
|
-
Dir["../../views/playbook/samples/#{sample}/*.html.erb"].empty?
|
9
|
-
elsif type == "react"
|
10
|
-
Dir["../../views/playbook/samples/#{sample}/*.jsx"].empty?
|
11
|
-
end
|
12
|
-
end
|
13
|
-
|
14
5
|
def kits_used(sample)
|
15
6
|
code = get_raw_code(sample, "rails")
|
16
7
|
kits_array = code.scan(/pb_rails\("(\w+)(?:"|\/)/)
|
17
8
|
kits_array.uniq
|
18
9
|
end
|
19
10
|
|
20
|
-
def pb_sample(sample: "", type: "rails")
|
21
|
-
@type = type
|
22
|
-
@sample = sample
|
23
|
-
end
|
24
|
-
|
25
|
-
def read_file(filename)
|
26
|
-
if File.file?(filename)
|
27
|
-
File.read(filename)
|
28
|
-
else
|
29
|
-
""
|
30
|
-
end
|
31
|
-
end
|
32
|
-
|
33
11
|
def get_raw_code(sample, type)
|
34
12
|
if type == "rails"
|
35
13
|
ext = "html.erb"
|
36
14
|
elsif type == "react"
|
37
15
|
ext = "jsx"
|
38
16
|
end
|
39
|
-
|
40
|
-
|
41
|
-
contents
|
17
|
+
|
18
|
+
read_source_file "app/views/playbook/samples", sample, "index.#{ext}"
|
42
19
|
end
|
43
20
|
|
44
21
|
def get_sample_code_content(sample, type)
|
@@ -51,6 +28,24 @@ module Playbook
|
|
51
28
|
raw rouge(code, rouge_type)
|
52
29
|
end
|
53
30
|
|
31
|
+
def get_samples(kit)
|
32
|
+
sample_yaml = YAML.load_file("#{Playbook::Engine.root}/app/pb_kits/playbook/data/samples.yml")
|
33
|
+
all_samples = []
|
34
|
+
|
35
|
+
sample_yaml.each do |_category, sample|
|
36
|
+
all_samples.push(sample)
|
37
|
+
end
|
38
|
+
|
39
|
+
output = ""
|
40
|
+
samples_using_kit = []
|
41
|
+
all_samples[0].each do |sample|
|
42
|
+
filepath = "#{Playbook::Engine.root}/app/views/playbook/samples/#{sample}/index.html.erb"
|
43
|
+
output = `grep -l 'pb_rails(\"#{kit}' #{filepath}`
|
44
|
+
samples_using_kit.push(sample) if output.chomp == filepath
|
45
|
+
end
|
46
|
+
samples_using_kit
|
47
|
+
end
|
48
|
+
|
54
49
|
def render_sample_ui(sample, type)
|
55
50
|
if type == "rails"
|
56
51
|
render template: "playbook/samples/#{sample}/index.html.erb"
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
label: "Unformatted Date Object",
|
3
|
+
default_date: Date.today,
|
4
|
+
picker_id: "date-picker-anti-pattern1"
|
5
|
+
}) %>
|
6
|
+
|
7
|
+
<%= pb_rails("date_picker", props: {
|
8
|
+
label: "Date Object Without Time - Displays Yesterday's Date",
|
9
|
+
default_date: Date.today.to_datetime.utc.iso8601,
|
10
|
+
picker_id: "date-picker-anti-pattern2"
|
11
|
+
}) %>
|
12
|
+
|
13
|
+
<%= pb_rails("date_picker", props: {
|
14
|
+
label: "Unformatted DateTime Object",
|
15
|
+
default_date: DateTime.current,
|
16
|
+
picker_id: "date-picker-anti-pattern3"
|
17
|
+
}) %>
|
18
|
+
|
19
|
+
<%= pb_rails("date_picker", props: {
|
20
|
+
label: "String Conversion Without ISO Formatting",
|
21
|
+
default_date: DateTime.current.utc.to_s,
|
22
|
+
picker_id: "date-picker-anti-pattern5"
|
23
|
+
}) %>
|
@@ -1,17 +1,17 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
|
-
default_date: "07/
|
2
|
+
default_date: "07/25/2020",
|
3
3
|
label: "Default Date String",
|
4
4
|
picker_id: "date-picker-default-date1"
|
5
5
|
}) %>
|
6
6
|
|
7
7
|
<%= pb_rails("date_picker", props: {
|
8
|
-
default_date:
|
8
|
+
default_date: DateTime.current.utc.iso8601,
|
9
9
|
label: "Default Date Dynamic",
|
10
10
|
picker_id: "date-picker-default-date2"
|
11
11
|
}) %>
|
12
12
|
|
13
13
|
<%= pb_rails("date_picker", props: {
|
14
|
-
default_date: [
|
14
|
+
default_date: [DateTime.current.utc.iso8601, (DateTime.current + 7.day).utc.iso8601],
|
15
15
|
label: "Default Date Range",
|
16
16
|
mode: "range",
|
17
17
|
picker_id: "date-picker-default-date3"
|
@@ -20,4 +20,4 @@
|
|
20
20
|
<%= pb_rails("date_picker", props: {
|
21
21
|
label: "Default Behavior",
|
22
22
|
picker_id: "date-picker-default-date4"
|
23
|
-
}) %>
|
23
|
+
}) %>
|
@@ -9,12 +9,12 @@ const DatePickerDefaultDate = () => (
|
|
9
9
|
pickerId="date-picker-default-date1"
|
10
10
|
/>
|
11
11
|
<DatePicker
|
12
|
-
defaultDate={new Date()
|
12
|
+
defaultDate={new Date()}
|
13
13
|
label="Default Date Dynamic"
|
14
14
|
pickerId="date-picker-default-date2"
|
15
15
|
/>
|
16
16
|
<DatePicker
|
17
|
-
defaultDate={[new Date(), new Date().fp_incr(
|
17
|
+
defaultDate={[new Date(), new Date().fp_incr(7)]}
|
18
18
|
label="Default Date Range"
|
19
19
|
mode="range"
|
20
20
|
pickerId="date-picker-default-date3"
|
@@ -1 +1,3 @@
|
|
1
|
-
The `defaultDate`/`default_date` prop has a null or empty string value by default. You can pass
|
1
|
+
The `defaultDate`/`default_date` prop has a null or empty string value by default. You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load. Use Ruby UTC DateTime objects and convert them to ISO date strings with `DateTime.now.utc.iso8601`.
|
2
|
+
|
3
|
+
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
|
@@ -1,11 +1,11 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
|
-
disable_date: [(
|
2
|
+
disable_date: [(DateTime.current + 1.day).utc.iso8601],
|
3
3
|
label: "Disable Single Date",
|
4
4
|
picker_id: "single-disabled-date"
|
5
5
|
}) %>
|
6
6
|
|
7
7
|
<%= pb_rails("date_picker", props: {
|
8
|
-
disable_date: [(
|
8
|
+
disable_date: [(DateTime.current + 1.day).utc.iso8601, (DateTime.current + 2.day).utc.iso8601],
|
9
9
|
label: "Disable Multiple Dates",
|
10
10
|
picker_id: "multiple-disabled-dates"
|
11
11
|
}) %>
|
@@ -13,8 +13,8 @@
|
|
13
13
|
<%= pb_rails("date_picker", props: {
|
14
14
|
disable_range: [
|
15
15
|
{
|
16
|
-
from:
|
17
|
-
to: (
|
16
|
+
from: DateTime.current.utc.iso8601,
|
17
|
+
to: (DateTime.current + 7.day).utc.iso8601,
|
18
18
|
},
|
19
19
|
],
|
20
20
|
label: "Disable Single Range",
|
@@ -24,12 +24,12 @@
|
|
24
24
|
<%= pb_rails("date_picker", props: {
|
25
25
|
disable_range: [
|
26
26
|
{
|
27
|
-
from: (
|
28
|
-
to: (
|
27
|
+
from: (DateTime.current + 1.day).utc.iso8601,
|
28
|
+
to: (DateTime.current + 2.day).utc.iso8601,
|
29
29
|
},
|
30
30
|
{
|
31
|
-
from: (
|
32
|
-
to: (
|
31
|
+
from: (DateTime.current + 7.day).utc.iso8601,
|
32
|
+
to: (DateTime.current + 14.day).utc.iso8601,
|
33
33
|
},
|
34
34
|
],
|
35
35
|
label: "Disable Multiple Ranges",
|
@@ -0,0 +1,27 @@
|
|
1
|
+
<%= pb_rails("button", props: { id: "close-btn", margin_right: "sm", text: "Close" }) %>
|
2
|
+
<%= pb_rails("button", props: { id: "clear-btn", margin_right: "sm", text: "Clear" }) %>
|
3
|
+
<%= pb_rails("button", props: { id: "today-btn", text: "Today" }) %>
|
4
|
+
<%= pb_rails("date_picker", props: {
|
5
|
+
hide_label: true,
|
6
|
+
margin_top: "sm",
|
7
|
+
picker_id: "fp-methods"
|
8
|
+
}) %>
|
9
|
+
|
10
|
+
<%= javascript_tag do %>
|
11
|
+
window.addEventListener("DOMContentLoaded", () => {
|
12
|
+
const fp = document.querySelector("#fp-methods")._flatpickr
|
13
|
+
const closeBtn = document.querySelector("#close-btn")
|
14
|
+
const clearBtn = document.querySelector("#clear-btn")
|
15
|
+
const todayBtn = document.querySelector("#today-btn")
|
16
|
+
|
17
|
+
closeBtn.addEventListener("click", () => {
|
18
|
+
fp.close()
|
19
|
+
})
|
20
|
+
clearBtn.addEventListener("click", () => {
|
21
|
+
fp.clear()
|
22
|
+
})
|
23
|
+
todayBtn.addEventListener("click", () => {
|
24
|
+
fp.setDate(new Date(), true)
|
25
|
+
})
|
26
|
+
})
|
27
|
+
<% end %>
|
@@ -0,0 +1,44 @@
|
|
1
|
+
import React, { useEffect } from 'react'
|
2
|
+
import { Button, DatePicker } from '../../'
|
3
|
+
|
4
|
+
const DatePickerFlatpickrMethods = () => {
|
5
|
+
let fpInstance
|
6
|
+
useEffect(() => {
|
7
|
+
fpInstance = document.querySelector('#fp-methods')._flatpickr
|
8
|
+
}, [])
|
9
|
+
const clickHandlerClear = () => {
|
10
|
+
fpInstance.clear()
|
11
|
+
}
|
12
|
+
const clickHandlerClose = () => {
|
13
|
+
fpInstance.close()
|
14
|
+
}
|
15
|
+
const clickHandlerToday = () => {
|
16
|
+
fpInstance.setDate(new Date(), true)
|
17
|
+
}
|
18
|
+
|
19
|
+
return (
|
20
|
+
<div>
|
21
|
+
<Button
|
22
|
+
marginRight="sm"
|
23
|
+
onClick={clickHandlerClose}
|
24
|
+
text="Close"
|
25
|
+
/>
|
26
|
+
<Button
|
27
|
+
marginRight="sm"
|
28
|
+
onClick={clickHandlerClear}
|
29
|
+
text="Clear"
|
30
|
+
/>
|
31
|
+
<Button
|
32
|
+
onClick={clickHandlerToday}
|
33
|
+
text="Today"
|
34
|
+
/>
|
35
|
+
<DatePicker
|
36
|
+
hideLabel
|
37
|
+
marginTop="sm"
|
38
|
+
pickerId="fp-methods"
|
39
|
+
/>
|
40
|
+
</div>
|
41
|
+
)
|
42
|
+
}
|
43
|
+
|
44
|
+
export default DatePickerFlatpickrMethods
|
@@ -1,23 +1,23 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
|
-
default_date:
|
2
|
+
default_date: DateTime.current.utc.iso8601,
|
3
3
|
format: "m-d-Y",
|
4
4
|
picker_id: "date-picker-format1"
|
5
5
|
}) %>
|
6
6
|
|
7
7
|
<%= pb_rails("date_picker", props: {
|
8
|
-
default_date:
|
8
|
+
default_date: DateTime.current.utc.iso8601,
|
9
9
|
format: "m/d/y",
|
10
10
|
picker_id: "date-picker-format2"
|
11
11
|
}) %>
|
12
12
|
|
13
13
|
<%= pb_rails("date_picker", props: {
|
14
|
-
default_date:
|
14
|
+
default_date: DateTime.current.utc.iso8601,
|
15
15
|
format: "n-j-y",
|
16
16
|
picker_id: "date-picker-format3"
|
17
17
|
}) %>
|
18
18
|
|
19
19
|
<%= pb_rails("date_picker", props: {
|
20
|
-
default_date:
|
20
|
+
default_date: DateTime.current.utc.iso8601,
|
21
21
|
format: "Y-d-m",
|
22
22
|
picker_id: "date-picker-format4"
|
23
23
|
}) %>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<%= pb_rails("date_picker", props: {
|
2
2
|
label: "Dynamic dates",
|
3
|
-
max_date: (
|
4
|
-
min_date: (
|
3
|
+
max_date: (DateTime.current + 1.day).utc.iso8601,
|
4
|
+
min_date: (DateTime.current - 1.day).utc.iso8601,
|
5
5
|
picker_id: "date-picker-min-max1"
|
6
6
|
}) %>
|
7
7
|
|
@@ -1,7 +1,9 @@
|
|
1
|
-
Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below. You can implement additional features and functionality by accessing a flatpickr instance directly. This is done with the following code.
|
1
|
+
Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a vanilla js library. Common date picker use cases and features have been adapted into simple prop based configuration detailed in the docs below. You can implement additional features and functionality by accessing a flatpickr instance directly (demonstrated in the 'flatpickr methods' example below). This is done with the following code.
|
2
2
|
|
3
3
|
`const fpInstance = document.querySelector('#pickerId')._flatpickr`
|
4
4
|
|
5
5
|
`pickerId` is a prop passed to the date picker kit. Flatpickr uses this id to target an input and attach a flatpickr instance to that input.
|
6
6
|
|
7
|
-
To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
|
7
|
+
To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
|
8
|
+
|
9
|
+
The Date Picker works best with Javascript Date Objects or ISO Date strings. If you're programming in js use Date Objects. If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string. For example, `DateTime.now.utc.iso8601`. This ensures that the string passed to the Date Picker kit behaves as expected.
|
@@ -11,8 +11,10 @@ examples:
|
|
11
11
|
- date_picker_disabled: Disabled Dates
|
12
12
|
- date_picker_min_max: Min Max
|
13
13
|
- date_picker_error: Error
|
14
|
+
- date_picker_flatpickr_methods: Flatpickr Methods
|
14
15
|
- date_picker_hooks: Hooks
|
15
16
|
- date_picker_year_range: Year Range
|
17
|
+
- date_picker_anti_patterns: Anti-Patterns
|
16
18
|
|
17
19
|
|
18
20
|
react:
|
@@ -27,6 +29,6 @@ examples:
|
|
27
29
|
- date_picker_disabled: Disabled Dates
|
28
30
|
- date_picker_min_max: Min Max
|
29
31
|
- date_picker_error: Error
|
32
|
+
- date_picker_flatpickr_methods: Flatpickr Methods
|
30
33
|
- date_picker_hooks: Hooks
|
31
34
|
- date_picker_year_range: Year Range
|
32
|
-
|
@@ -10,4 +10,5 @@ export { default as DatePickerDisabled } from './_date_picker_disabled.jsx'
|
|
10
10
|
export { default as DatePickerMinMax } from './_date_picker_min_max.jsx'
|
11
11
|
export { default as DatePickerError } from './_date_picker_error.jsx'
|
12
12
|
export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
|
13
|
+
export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
|
13
14
|
export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
|
@@ -27,7 +27,6 @@ const renderOptions = (options: SortOptions, value: SortValue[], handleChange: (
|
|
27
27
|
return (
|
28
28
|
<ListItem key={`option-${next.name}-${next.dir}`}>
|
29
29
|
<Button
|
30
|
-
icon={directionIcon(next.dir)}
|
31
30
|
onClick={partial(handleChange, next)}
|
32
31
|
text={` ${label}`}
|
33
32
|
variant="link"
|
@@ -56,15 +55,16 @@ const SortMenu = ({ dark, options, value, onChange }: SortMenuProps) => {
|
|
56
55
|
dark={dark}
|
57
56
|
id="sort-button"
|
58
57
|
onClick={toggle}
|
58
|
+
paddingRight="none"
|
59
59
|
variant="link"
|
60
60
|
>
|
61
61
|
{map(value, ({ dir, name }) => (
|
62
62
|
<span key={`current-sort-${name}-${dir}`}>
|
63
|
+
{` ${options[name]}`}
|
63
64
|
<Icon
|
64
65
|
dark={dark}
|
65
66
|
icon={directionIcon(dir)}
|
66
67
|
/>
|
67
|
-
{` ${options[name]}`}
|
68
68
|
</span>
|
69
69
|
))}
|
70
70
|
</Button>
|
@@ -11,47 +11,6 @@ const FilterNoBackground = (props) => {
|
|
11
11
|
]
|
12
12
|
return (
|
13
13
|
<>
|
14
|
-
<Filter
|
15
|
-
{...props}
|
16
|
-
background={false}
|
17
|
-
filters={{
|
18
|
-
'Full Name': 'John Wick',
|
19
|
-
'City': 'Las Vegas',
|
20
|
-
}}
|
21
|
-
results={3}
|
22
|
-
sortOptions={{
|
23
|
-
popularity: 'Popularity',
|
24
|
-
// eslint-disable-next-line
|
25
|
-
manager_title: 'Manager\'s Title',
|
26
|
-
// eslint-disable-next-line
|
27
|
-
manager_name: 'Manager\'s Name',
|
28
|
-
}}
|
29
|
-
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
30
|
-
>
|
31
|
-
<TextInput
|
32
|
-
label="Full Name"
|
33
|
-
placeholder="Enter name"
|
34
|
-
/>
|
35
|
-
|
36
|
-
<Select
|
37
|
-
blankSelection="Select One..."
|
38
|
-
label="Territory"
|
39
|
-
name="location"
|
40
|
-
options={options}
|
41
|
-
/>
|
42
|
-
<Flex
|
43
|
-
spacing="between"
|
44
|
-
>
|
45
|
-
<Button
|
46
|
-
text="Apply"
|
47
|
-
/>
|
48
|
-
<Button
|
49
|
-
text="Clear"
|
50
|
-
variant="secondary"
|
51
|
-
/>
|
52
|
-
</Flex>
|
53
|
-
</Filter>
|
54
|
-
|
55
14
|
<Filter
|
56
15
|
{...props}
|
57
16
|
background={false}
|
@@ -0,0 +1 @@
|
|
1
|
+
To remove the background from a filter, add the prop `background` with a value of `false`.
|
@@ -0,0 +1,35 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
id: "2",
|
4
|
+
filters: [
|
5
|
+
{ name: "name", value: "John Wick" }
|
6
|
+
],
|
7
|
+
results: 546,
|
8
|
+
template: "single"
|
9
|
+
}) do
|
10
|
+
%>
|
11
|
+
<%
|
12
|
+
example_collection = [
|
13
|
+
OpenStruct.new(name: "Alabama", value: 1),
|
14
|
+
OpenStruct.new(name: "Alaska", value: 2),
|
15
|
+
OpenStruct.new(name: "Arizona", value: 3),
|
16
|
+
OpenStruct.new(name: "Arkansas", value: 4),
|
17
|
+
OpenStruct.new(name: "California", value: 5),
|
18
|
+
OpenStruct.new(name: "Colorado", value: 6),
|
19
|
+
OpenStruct.new(name: "Connecticut", value: 7),
|
20
|
+
OpenStruct.new(name: "Delaware", value: 8),
|
21
|
+
OpenStruct.new(name: "Florida", value: 9),
|
22
|
+
OpenStruct.new(name: "Georgia", value: 10),
|
23
|
+
]
|
24
|
+
%>
|
25
|
+
|
26
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
27
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
28
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
29
|
+
|
30
|
+
<%= form.actions do |action| %>
|
31
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
32
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
33
|
+
<% end %>
|
34
|
+
<% end %>
|
35
|
+
<% end %>
|
@@ -0,0 +1,47 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from '../../'
|
3
|
+
|
4
|
+
const FilterNoSort = (props) => {
|
5
|
+
const options = [
|
6
|
+
{ value: 'USA' },
|
7
|
+
{ value: 'Canada' },
|
8
|
+
{ value: 'Brazil' },
|
9
|
+
{ value: 'Philippines' },
|
10
|
+
{ value: 'A Galaxy Far Far Away Like Really Far Away' },
|
11
|
+
]
|
12
|
+
return (
|
13
|
+
<Filter
|
14
|
+
{...props}
|
15
|
+
filters={{
|
16
|
+
'Full Name': 'John Wick',
|
17
|
+
}}
|
18
|
+
results={546}
|
19
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
20
|
+
>
|
21
|
+
<TextInput
|
22
|
+
label="Full Name"
|
23
|
+
placeholder="Enter name"
|
24
|
+
/>
|
25
|
+
|
26
|
+
<Select
|
27
|
+
blankSelection="Select One..."
|
28
|
+
label="Territory"
|
29
|
+
name="location"
|
30
|
+
options={options}
|
31
|
+
/>
|
32
|
+
<Flex
|
33
|
+
spacing="between"
|
34
|
+
>
|
35
|
+
<Button
|
36
|
+
text="Apply"
|
37
|
+
/>
|
38
|
+
<Button
|
39
|
+
text="Clear"
|
40
|
+
variant="secondary"
|
41
|
+
/>
|
42
|
+
</Flex>
|
43
|
+
</Filter>
|
44
|
+
)
|
45
|
+
}
|
46
|
+
|
47
|
+
export default FilterNoSort
|
@@ -4,6 +4,7 @@ examples:
|
|
4
4
|
- filter_default: Default
|
5
5
|
- filter_no_background: No Background
|
6
6
|
- filter_single: Single
|
7
|
+
- filter_no_sort: No Sort
|
7
8
|
- filter_only: Filter Only
|
8
9
|
- sort_only: Sort Only
|
9
10
|
|
@@ -11,5 +12,6 @@ examples:
|
|
11
12
|
- filter_default: Default
|
12
13
|
- filter_no_background: No Background
|
13
14
|
- filter_single: Single
|
15
|
+
- filter_no_sort: No Sort
|
14
16
|
- filter_only: Filter Only
|
15
17
|
- sort_only: Sort Only
|
@@ -1,5 +1,6 @@
|
|
1
1
|
export { default as FilterDefault } from './_filter_default.jsx'
|
2
2
|
export { default as FilterSingle } from './_filter_single.jsx'
|
3
|
+
export { default as FilterNoSort } from './_filter_no_sort.jsx'
|
3
4
|
export { default as FilterNoBackground } from './_filter_no_background.jsx'
|
4
5
|
export { default as FilterOnly } from './_filter_only.jsx'
|
5
6
|
export { default as SortOnly } from './_sort_only.jsx'
|
@@ -1,5 +1,5 @@
|
|
1
1
|
|
2
|
-
<%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
|
2
|
+
<%= pb_rails("flex", props: {orientation: "row", padding_right: "lg", vertical: "center"}) do %>
|
3
3
|
|
4
4
|
<% if (object.template != "sort_only") %>
|
5
5
|
<%= pb_rails("circle_icon_button", props: { variant: "secondary", icon: "filter", id:"filter#{object.id}"}) %>
|
@@ -11,23 +11,24 @@
|
|
11
11
|
<%= pb_rails("caption", props: { text: filter[:name]}) %>
|
12
12
|
<%= pb_rails("title", props: { size: 4, tag:"h4", text: filter[:value]}) %>
|
13
13
|
</div>
|
14
|
-
<% end %>
|
14
|
+
<% end %>
|
15
15
|
<div class="right_gradient"></div>
|
16
16
|
</div>
|
17
17
|
</div>
|
18
18
|
<% end %>
|
19
19
|
|
20
20
|
|
21
|
-
|
22
21
|
<% if (object.template == "single" ) || (object.template == "sort_only") %>
|
23
|
-
<%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
|
24
|
-
|
22
|
+
<%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
|
23
|
+
<% unless object.sort_menu == [{}] %>
|
24
|
+
<%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
|
25
25
|
<% object.sort_menu.each do |item| %>
|
26
26
|
<% if item[:active] == true %>
|
27
27
|
<%= item[:item] %>
|
28
28
|
<%= pb_rails("icon", props: { icon: object.sort_icon(item[:direction]), fixed_width: true }) %>
|
29
29
|
<% end %>
|
30
30
|
<% end %>
|
31
|
+
<% end %>
|
31
32
|
<% end %>
|
32
33
|
<% end %>
|
33
34
|
|
@@ -40,7 +41,7 @@
|
|
40
41
|
<%= pb_rails("title_count", props: {title: "Results:",count: object.results, align:"center"}) %>
|
41
42
|
<%= pb_rails("flex", props: {orientation: "row", vertical: "center"}) do %>
|
42
43
|
<%= pb_rails("caption", props: { text: "sort by:"}) %>
|
43
|
-
<%= pb_rails("button", props: {variant: "link"
|
44
|
+
<%= pb_rails("button", props: {variant: "link", padding_right: "none", id: "sort-button#{object.id}"}) do %>
|
44
45
|
<% object.sort_menu.each do |item| %>
|
45
46
|
<% if item[:active] == true %>
|
46
47
|
<%= item[:item] %>
|
@@ -51,6 +52,3 @@
|
|
51
52
|
<% end %>
|
52
53
|
<% end %>
|
53
54
|
<% end %>
|
54
|
-
|
55
|
-
|
56
|
-
|
@@ -18,6 +18,7 @@ type NavItemProps = {
|
|
18
18
|
imageUrl: String,
|
19
19
|
link: string,
|
20
20
|
onClick?: EventHandler,
|
21
|
+
target?: '_blank' | '_self' | '_parent' | '_top',
|
21
22
|
text: string,
|
22
23
|
}
|
23
24
|
|
@@ -34,6 +35,7 @@ const NavItem = (props: NavItemProps) => {
|
|
34
35
|
imageUrl,
|
35
36
|
link,
|
36
37
|
onClick = () => {},
|
38
|
+
target = '_self',
|
37
39
|
text = '',
|
38
40
|
} = props
|
39
41
|
const Tag = link ? 'a' : 'div'
|
@@ -54,6 +56,7 @@ const NavItem = (props: NavItemProps) => {
|
|
54
56
|
className="pb_nav_list_item_link"
|
55
57
|
href={link}
|
56
58
|
onClick={onClick}
|
59
|
+
target={target}
|
57
60
|
>
|
58
61
|
<If condition={imageUrl}>
|
59
62
|
<div
|
@@ -0,0 +1,6 @@
|
|
1
|
+
<%= pb_rails("nav", props: {title: "Popular Websites", link: "#"}) do %>
|
2
|
+
<%= pb_rails("nav/item", props: { text: "Google", link: "https://www.google.com/", target: "_blank" }) %>
|
3
|
+
<%= pb_rails("nav/item", props: { text: "YouTube", link: "https://www.youtube.com/", target: "_blank" }) %>
|
4
|
+
<%= pb_rails("nav/item", props: { text: "Facebook", link: "https://www.facebook.com/", target: "_blank" }) %>
|
5
|
+
<%= pb_rails("nav/item", props: { text: "Amazon", link: "https://www.amazon.com/", target: "_blank" }) %>
|
6
|
+
<% end %>
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Nav } from '../../'
|
3
|
+
import NavItem from '../_item.jsx'
|
4
|
+
|
5
|
+
const NewTab = () => (
|
6
|
+
<Nav
|
7
|
+
link="#"
|
8
|
+
orientation="vertical"
|
9
|
+
title="Popular Websites"
|
10
|
+
>
|
11
|
+
<NavItem
|
12
|
+
link="https://www.google.com/"
|
13
|
+
target="_blank"
|
14
|
+
text="Google"
|
15
|
+
/>
|
16
|
+
<NavItem
|
17
|
+
link="https://www.youtube.com/"
|
18
|
+
target="_blank"
|
19
|
+
text="YouTube"
|
20
|
+
/>
|
21
|
+
<NavItem
|
22
|
+
link="https://www.facebook.com/"
|
23
|
+
target="_blank"
|
24
|
+
text="Facebook"
|
25
|
+
/>
|
26
|
+
<NavItem
|
27
|
+
link="https://www.amazon.com/"
|
28
|
+
target="_blank"
|
29
|
+
text="Amazon"
|
30
|
+
/>
|
31
|
+
</Nav>
|
32
|
+
)
|
33
|
+
|
34
|
+
export default NewTab
|
@@ -12,6 +12,7 @@ examples:
|
|
12
12
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
13
13
|
- block_nav: Block
|
14
14
|
- block_no_title_nav: Without Title
|
15
|
+
- new_tab: Open in a New Tab
|
15
16
|
|
16
17
|
react:
|
17
18
|
- default_nav: Default
|
@@ -26,4 +27,4 @@ examples:
|
|
26
27
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
27
28
|
- block_nav: Block
|
28
29
|
- block_no_title_nav: Without Title
|
29
|
-
|
30
|
+
- new_tab: Open in a New Tab
|
@@ -10,3 +10,4 @@ export { default as SubtleNoHighlightNav } from './_subtle_no_highlight_nav.jsx'
|
|
10
10
|
export { default as WithIconsNav } from './_with_icons_nav.jsx'
|
11
11
|
export { default as SubtleWithIconsNav } from './_subtle_with_icons_nav.jsx'
|
12
12
|
export { default as WithImgNav } from './_with_img_nav.jsx'
|
13
|
+
export { default as NewTab } from './_new_tab.jsx'
|
@@ -13,7 +13,9 @@ module Playbook
|
|
13
13
|
prop :icon_left
|
14
14
|
prop :icon_right
|
15
15
|
prop :image_url
|
16
|
-
|
16
|
+
prop :target, type: Playbook::Props::Enum,
|
17
|
+
values: %w[_blank _self _parent _top],
|
18
|
+
default: "_self"
|
17
19
|
def classname
|
18
20
|
generate_classname("pb_nav_list_kit_item", active_class)
|
19
21
|
end
|
@@ -30,7 +32,8 @@ module Playbook
|
|
30
32
|
|
31
33
|
def link_options
|
32
34
|
options.merge(
|
33
|
-
href: link
|
35
|
+
href: link,
|
36
|
+
target: target
|
34
37
|
)
|
35
38
|
end
|
36
39
|
|
@@ -0,0 +1,10 @@
|
|
1
|
+
<%= pb_rails("icon_circle", props: { icon: "paper-plane", id: "result-1-sample-email-link" }) %>
|
2
|
+
|
3
|
+
<%= pb_rails("tooltip", props: {
|
4
|
+
trigger_element_id: "result-1-sample-email-link",
|
5
|
+
tooltip_id: "sample-email-tooltip-result-1",
|
6
|
+
position: "top",
|
7
|
+
dark: true
|
8
|
+
}) do %>
|
9
|
+
Send Email
|
10
|
+
<% end %>
|
data/lib/playbook.rb
CHANGED
@@ -1,9 +1,14 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
3
|
require "sassc-rails"
|
4
|
+
require "slim-rails"
|
4
5
|
require "webpacker"
|
6
|
+
require "webpacker/react"
|
7
|
+
|
5
8
|
require "playbook/props"
|
6
|
-
require "playbook/
|
9
|
+
require "playbook/version"
|
10
|
+
require "playbook/markdown/template_handler"
|
11
|
+
require "playbook/engine" if defined?(Rails)
|
7
12
|
|
8
13
|
module Playbook
|
9
14
|
ROOT_PATH = Pathname.new(File.join(__dir__, ".."))
|
@@ -11,22 +16,6 @@ module Playbook
|
|
11
16
|
class ConflictingPropsError < StandardError; end
|
12
17
|
class MissingPropError < StandardError; end
|
13
18
|
|
14
|
-
# @return [Boolean] indication of whether the request is a web view within Nitro Mobile
|
15
|
-
def self.web_page_within_mobile_app?(request)
|
16
|
-
request.user_agent.try(:downcase) =~ /^nitro/
|
17
|
-
end
|
18
|
-
|
19
|
-
# @return [String] the digest value for assets managed by the asset pipeline
|
20
|
-
def self.assets_digest
|
21
|
-
@assets_digest ||= begin
|
22
|
-
if ActionView::Base.respond_to?(:asset_manifest) # Rails 4
|
23
|
-
Digest::MD5.hexdigest(ActionView::Base.assets_manifest.assets.values.sort.join)
|
24
|
-
elsif Rails.configuration.assets.digests.present? # Rails 3
|
25
|
-
Digest::MD5.hexdigest(Rails.configuration.assets.digests.try(:values).sort.join)
|
26
|
-
end
|
27
|
-
end
|
28
|
-
end
|
29
|
-
|
30
19
|
class << self
|
31
20
|
def webpacker
|
32
21
|
@webpacker ||= ::Webpacker::Instance.new(
|
data/lib/playbook/engine.rb
CHANGED
@@ -0,0 +1,45 @@
|
|
1
|
+
require 'redcarpet'
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module Markdown
|
5
|
+
class HTMLWithPants < Redcarpet::Render::HTML
|
6
|
+
include Redcarpet::Render::SmartyPants
|
7
|
+
end
|
8
|
+
|
9
|
+
class TemplateHandler
|
10
|
+
class_attribute :default_format
|
11
|
+
self.default_format = Mime[:html]
|
12
|
+
|
13
|
+
class << self
|
14
|
+
def call(template)
|
15
|
+
compiled_source = erb.call(template)
|
16
|
+
"#{name}.render(begin;#{compiled_source};end)"
|
17
|
+
end
|
18
|
+
|
19
|
+
def render(template)
|
20
|
+
markdown.render(template).html_safe
|
21
|
+
end
|
22
|
+
|
23
|
+
private
|
24
|
+
|
25
|
+
def md_options
|
26
|
+
@md_options ||= {
|
27
|
+
autolink: true,
|
28
|
+
no_intra_emphasis: true,
|
29
|
+
fenced_code_blocks: true,
|
30
|
+
strikethrough: true,
|
31
|
+
tables: true,
|
32
|
+
}
|
33
|
+
end
|
34
|
+
|
35
|
+
def markdown
|
36
|
+
@markdown ||= Redcarpet::Markdown.new(::Playbook::Markdown::HTMLWithPants, md_options)
|
37
|
+
end
|
38
|
+
|
39
|
+
def erb
|
40
|
+
@erb ||= ActionView::Template.registered_template_handler(:erb)
|
41
|
+
end
|
42
|
+
end
|
43
|
+
end
|
44
|
+
end
|
45
|
+
end
|
data/lib/playbook/props/base.rb
CHANGED
@@ -5,10 +5,11 @@ module Playbook
|
|
5
5
|
class Error < StandardError; end
|
6
6
|
|
7
7
|
class Base
|
8
|
-
attr_reader :default, :required, :name, :kit
|
8
|
+
attr_reader :default, :deprecated, :required, :name, :kit
|
9
9
|
|
10
|
-
def initialize(default: nil, required: false, name:, kit:)
|
10
|
+
def initialize(default: nil, deprecated: false, required: false, name:, kit:)
|
11
11
|
@default = default
|
12
|
+
@deprecated = deprecated
|
12
13
|
@required = required
|
13
14
|
@name = name
|
14
15
|
@kit = kit
|
@@ -19,6 +20,8 @@ module Playbook
|
|
19
20
|
end
|
20
21
|
|
21
22
|
def validate!(input_value)
|
23
|
+
warn("#{kit} Kit: The prop '#{name}' is deprecated and will be removed in a future release!") if deprecated #TODO: add some color for pop
|
24
|
+
|
22
25
|
raise(Playbook::Props::Error, "#{kit} prop '#{name}' of type #{inspect.class} is required and needs a value") if required && input_value.nil?
|
23
26
|
|
24
27
|
validate(value(input_value)) ||
|
@@ -28,6 +31,19 @@ module Playbook
|
|
28
31
|
def validate(_value)
|
29
32
|
true
|
30
33
|
end
|
34
|
+
|
35
|
+
private
|
36
|
+
|
37
|
+
def warn(message)
|
38
|
+
log("Prop Warning: #{message}")
|
39
|
+
end
|
40
|
+
|
41
|
+
def log(message)
|
42
|
+
logger = ActiveSupport::Logger.new(STDOUT)
|
43
|
+
log_formatter = ::Logger::Formatter.new
|
44
|
+
@logger ||= ActiveSupport::TaggedLogging.new(logger)
|
45
|
+
@logger.log(0, message)
|
46
|
+
end
|
31
47
|
end
|
32
48
|
end
|
33
|
-
end
|
49
|
+
end
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: playbook_ui
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 7.
|
4
|
+
version: 7.11.0.pre.alpha1
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2020-12-
|
12
|
+
date: 2020-12-17 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -408,7 +408,6 @@ files:
|
|
408
408
|
- app/assets/images/pb.logo.svg
|
409
409
|
- app/controllers/playbook/application_controller.rb
|
410
410
|
- app/helpers/playbook/application_helper.rb
|
411
|
-
- app/helpers/playbook/layout_helper.rb
|
412
411
|
- app/helpers/playbook/pb_doc_helper.rb
|
413
412
|
- app/helpers/playbook/pb_kit_helper.rb
|
414
413
|
- app/helpers/playbook/pb_sample_helper.rb
|
@@ -710,6 +709,7 @@ files:
|
|
710
709
|
- app/pb_kits/playbook/pb_date_picker/_date_picker.scss
|
711
710
|
- app/pb_kits/playbook/pb_date_picker/date_picker.rb
|
712
711
|
- app/pb_kits/playbook/pb_date_picker/date_picker_helper.js
|
712
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_anti_patterns.html.erb
|
713
713
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb
|
714
714
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.jsx
|
715
715
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.html.erb
|
@@ -719,6 +719,8 @@ files:
|
|
719
719
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_disabled.jsx
|
720
720
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.html.erb
|
721
721
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx
|
722
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.html.erb
|
723
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_flatpickr_methods.jsx
|
722
724
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.html.erb
|
723
725
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.jsx
|
724
726
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_format.md
|
@@ -860,6 +862,9 @@ files:
|
|
860
862
|
- app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx
|
861
863
|
- app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb
|
862
864
|
- app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx
|
865
|
+
- app/pb_kits/playbook/pb_filter/docs/_filter_no_background.md
|
866
|
+
- app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb
|
867
|
+
- app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.jsx
|
863
868
|
- app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb
|
864
869
|
- app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx
|
865
870
|
- app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb
|
@@ -1302,6 +1307,8 @@ files:
|
|
1302
1307
|
- app/pb_kits/playbook/pb_nav/docs/_description.md
|
1303
1308
|
- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.html.erb
|
1304
1309
|
- app/pb_kits/playbook/pb_nav/docs/_horizontal_nav.jsx
|
1310
|
+
- app/pb_kits/playbook/pb_nav/docs/_new_tab.html.erb
|
1311
|
+
- app/pb_kits/playbook/pb_nav/docs/_new_tab.jsx
|
1305
1312
|
- app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.html.erb
|
1306
1313
|
- app/pb_kits/playbook/pb_nav/docs/_no_highlight_nav.jsx
|
1307
1314
|
- app/pb_kits/playbook/pb_nav/docs/_subtle_horizontal_nav.html.erb
|
@@ -1878,6 +1885,7 @@ files:
|
|
1878
1885
|
- app/pb_kits/playbook/pb_tooltip/_tooltip.scss
|
1879
1886
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb
|
1880
1887
|
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb
|
1888
|
+
- app/pb_kits/playbook/pb_tooltip/docs/_tooltip_with_icon_circle.html.erb
|
1881
1889
|
- app/pb_kits/playbook/pb_tooltip/docs/example.yml
|
1882
1890
|
- app/pb_kits/playbook/pb_tooltip/index.js
|
1883
1891
|
- app/pb_kits/playbook/pb_tooltip/tooltip.rb
|
@@ -1985,6 +1993,7 @@ files:
|
|
1985
1993
|
- fonts/regular-min.js
|
1986
1994
|
- lib/playbook.rb
|
1987
1995
|
- lib/playbook/engine.rb
|
1996
|
+
- lib/playbook/markdown/template_handler.rb
|
1988
1997
|
- lib/playbook/props.rb
|
1989
1998
|
- lib/playbook/props/array.rb
|
1990
1999
|
- lib/playbook/props/base.rb
|
@@ -2016,11 +2025,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2016
2025
|
version: '0'
|
2017
2026
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2018
2027
|
requirements:
|
2019
|
-
- - "
|
2028
|
+
- - ">"
|
2020
2029
|
- !ruby/object:Gem::Version
|
2021
|
-
version:
|
2030
|
+
version: 1.3.1
|
2022
2031
|
requirements: []
|
2023
|
-
|
2032
|
+
rubyforge_project:
|
2033
|
+
rubygems_version: 2.7.3
|
2024
2034
|
signing_key:
|
2025
2035
|
specification_version: 4
|
2026
2036
|
summary: Playbook Design System
|