playbook_ui 12.24.0.pre.alpha.play824733 → 12.24.0.pre.alpha.railsmultilevelimprovements741
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_docs/kit_example.rb +0 -2
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +26 -52
- data/app/pb_kits/playbook/pb_phone_number_input/docs/example.yml +1 -3
- data/app/pb_kits/playbook/pb_phone_number_input/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb +0 -5
- data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js +62 -110
- data/dist/playbook-rails.js +51 -0
- data/lib/playbook/forms/builder/multi_level_select_field.rb +12 -0
- data/lib/playbook/forms/builder.rb +2 -1
- data/lib/playbook/version.rb +1 -1
- data/lib/playbook.rb +1 -2
- metadata +8 -40
- data/app/pb_kits/playbook/pb_docs/kit_api.html.erb +0 -311
- data/app/pb_kits/playbook/pb_docs/kit_api.rb +0 -149
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.html.erb +0 -14
- data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +0 -61
- data/app/pb_kits/playbook/utilities/object.ts +0 -3
- data/lib/playbook/forms/builder/intl_telephone_field.rb +0 -12
- data/lib/playbook/markdown/helper.rb +0 -132
- data/lib/playbook/markdown.rb +0 -3
@@ -1,61 +0,0 @@
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
2
|
-
import { Button, FixedConfirmationToast, PhoneNumberInput } from "../../";
|
3
|
-
|
4
|
-
const PhoneNumberInputValidation = (props) => {
|
5
|
-
const [formErrors, setFormErrors] = useState("");
|
6
|
-
const [showFormErrors, setShowFormErrors] = useState(false);
|
7
|
-
const [phoneNumber, setPhoneNumber] = useState("");
|
8
|
-
const [countryCode, setCountryCode] = useState("af");
|
9
|
-
|
10
|
-
const handleOnValidate = (valid) => {
|
11
|
-
setFormErrors(
|
12
|
-
valid ? "" : "Please correct the fields below and try again."
|
13
|
-
);
|
14
|
-
};
|
15
|
-
|
16
|
-
const handleOnChange = ({ iso2, number }) => {
|
17
|
-
setCountryCode(iso2);
|
18
|
-
setPhoneNumber(number);
|
19
|
-
};
|
20
|
-
|
21
|
-
const handleOnSubmit = (e) => {
|
22
|
-
if (showFormErrors) e.preventDefault()
|
23
|
-
}
|
24
|
-
|
25
|
-
useEffect(() => {
|
26
|
-
setShowFormErrors(formErrors.length > 0);
|
27
|
-
}, [formErrors]);
|
28
|
-
|
29
|
-
return (
|
30
|
-
<form
|
31
|
-
action=""
|
32
|
-
method="get"
|
33
|
-
onSubmit={handleOnSubmit}
|
34
|
-
>
|
35
|
-
{showFormErrors && (
|
36
|
-
<FixedConfirmationToast
|
37
|
-
closeable
|
38
|
-
marginBottom="md"
|
39
|
-
status="error"
|
40
|
-
text={formErrors}
|
41
|
-
/>
|
42
|
-
)}
|
43
|
-
<PhoneNumberInput
|
44
|
-
error="Missing phone number."
|
45
|
-
id="validation"
|
46
|
-
initialCountry={countryCode}
|
47
|
-
onChange={handleOnChange}
|
48
|
-
onValidate={handleOnValidate}
|
49
|
-
required
|
50
|
-
value={phoneNumber}
|
51
|
-
{...props}
|
52
|
-
/>
|
53
|
-
<Button
|
54
|
-
htmlType="submit"
|
55
|
-
text="Save Phone Number"
|
56
|
-
/>
|
57
|
-
</form>
|
58
|
-
);
|
59
|
-
};
|
60
|
-
|
61
|
-
export default PhoneNumberInputValidation;
|
@@ -1,132 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
require "redcarpet"
|
4
|
-
require "rouge"
|
5
|
-
require "rouge/plugins/redcarpet"
|
6
|
-
require "action_view"
|
7
|
-
|
8
|
-
module Playbook
|
9
|
-
module Markdown
|
10
|
-
module Helper
|
11
|
-
def self.call(template, _source)
|
12
|
-
markdown(template.source)
|
13
|
-
end
|
14
|
-
|
15
|
-
def render_markdown(text)
|
16
|
-
# rubocop:disable Security/Eval
|
17
|
-
eval(Playbook::Markdown::Helper.markdown(text))
|
18
|
-
# rubocop:enable Security/Eval
|
19
|
-
end
|
20
|
-
|
21
|
-
def self.markdown(text)
|
22
|
-
options = {
|
23
|
-
filter_html: false,
|
24
|
-
hard_wrap: true,
|
25
|
-
link_attributes: { rel: "nofollow", target: "_blank" },
|
26
|
-
space_after_headers: true,
|
27
|
-
fenced_code_blocks: true,
|
28
|
-
no_styles: false,
|
29
|
-
safe_links_only: true,
|
30
|
-
}
|
31
|
-
|
32
|
-
extensions = {
|
33
|
-
lax_spacing: true,
|
34
|
-
no_intra_emphasis: true,
|
35
|
-
autolink: true,
|
36
|
-
superscript: true,
|
37
|
-
fenced_code_blocks: true,
|
38
|
-
tables: true,
|
39
|
-
disable_indented_code_blocks: false,
|
40
|
-
strikethrough: true,
|
41
|
-
underline: true,
|
42
|
-
highlight: true,
|
43
|
-
footnotes: true,
|
44
|
-
with_toc_data: true,
|
45
|
-
}
|
46
|
-
|
47
|
-
renderer = HTMLBlockCode.new(options)
|
48
|
-
# toc_renderer = Redcarpet::Render::HTML_TOC.new(with_toc_data: true)
|
49
|
-
# @TOC = Redcarpet::Markdown.new(toc_renderer)
|
50
|
-
# puts "TOC: #{@TOC.inspect}"
|
51
|
-
markdown = Redcarpet::Markdown.new(renderer, extensions)
|
52
|
-
"#{markdown.render(text).inspect}.html_safe;"
|
53
|
-
end
|
54
|
-
|
55
|
-
def rouge(text, language)
|
56
|
-
formatter = Rouge::Formatters::HTML.new(scope: ".highlight")
|
57
|
-
lexer = Rouge::Lexer.find(language)
|
58
|
-
formatter.format(lexer.lex(text))
|
59
|
-
end
|
60
|
-
|
61
|
-
class HTML < Redcarpet::Render::HTML
|
62
|
-
include Rouge::Plugins::Redcarpet
|
63
|
-
end
|
64
|
-
|
65
|
-
def rouge_markdown(text)
|
66
|
-
render_options = {
|
67
|
-
filter_html: true,
|
68
|
-
hard_wrap: true,
|
69
|
-
link_attributes: { rel: "nofollow" },
|
70
|
-
}
|
71
|
-
renderer = HTML.new(render_options)
|
72
|
-
|
73
|
-
extensions = {
|
74
|
-
autolink: true,
|
75
|
-
fenced_code_blocks: true,
|
76
|
-
lax_spacing: true,
|
77
|
-
no_intra_emphasis: true,
|
78
|
-
strikethrough: true,
|
79
|
-
superscript: true,
|
80
|
-
}
|
81
|
-
markdown = Redcarpet::Markdown.new(renderer, extensions)
|
82
|
-
markdown.render(text)
|
83
|
-
end
|
84
|
-
end
|
85
|
-
|
86
|
-
class HTMLWithPants < Redcarpet::Render::HTML
|
87
|
-
include Redcarpet::Render::SmartyPants
|
88
|
-
end
|
89
|
-
|
90
|
-
class HTML < Redcarpet::Render::HTML
|
91
|
-
include Rouge::Plugins::Redcarpet
|
92
|
-
end
|
93
|
-
|
94
|
-
class HTMLBlockCode < Redcarpet::Render::HTML
|
95
|
-
include ActionView::Helpers::AssetTagHelper
|
96
|
-
|
97
|
-
# def block_code(code, language)
|
98
|
-
# "\n.nf\n#{normal_text(rouge(code, language))}\n.fi\n"
|
99
|
-
# end
|
100
|
-
|
101
|
-
def table(header, body)
|
102
|
-
"<table class='pb_table table-sm table-responsive-collapse table-card table-collapse-sm'>" \
|
103
|
-
"<thead>#{header}</thead>" \
|
104
|
-
"<tbody>#{body}</tbody>" \
|
105
|
-
"</table>"
|
106
|
-
end
|
107
|
-
|
108
|
-
def header(title, level)
|
109
|
-
@headers ||= []
|
110
|
-
permalink = title.gsub(/\W+/, "-")
|
111
|
-
if @headers.include?(permalink)
|
112
|
-
permalink += "_1"
|
113
|
-
loop do
|
114
|
-
break unless @headers.include?(permalink)
|
115
|
-
|
116
|
-
permalink.gsub!(/_(\d+)$/, "_#{Regexp.last_match(1).to_i + 1}")
|
117
|
-
end
|
118
|
-
end
|
119
|
-
@headers << permalink
|
120
|
-
permalink_markup = %(<a name="#{permalink}" class="markdown-header-anchor" )
|
121
|
-
permalink_markup += %(href="##{permalink}"><span class="far fa-link markdown-header-anchor-icon"></span></a>)
|
122
|
-
%(\n<h#{level} id="#{permalink}">#{title} #{permalink_markup}</h#{level}>\n)
|
123
|
-
end
|
124
|
-
|
125
|
-
def image(link, title, alt_text)
|
126
|
-
return nil if link.nil?
|
127
|
-
|
128
|
-
%(<a href="#{link}" target="_blank">#{image_tag(link, title: title, alt: alt_text, class: 'imageloader lazyload')}</a>)
|
129
|
-
end
|
130
|
-
end
|
131
|
-
end
|
132
|
-
end
|
data/lib/playbook/markdown.rb
DELETED