lookbook 1.0.8 → 1.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (84) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/lookbook/css/lookbook.css +76 -2
  3. data/app/assets/lookbook/js/app.js +20 -2
  4. data/app/{components/lookbook/params_editor/field/component.js → assets/lookbook/js/components/params_input.js} +1 -14
  5. data/app/assets/lookbook/js/lookbook.js +2 -1
  6. data/app/components/lookbook/base_component.rb +2 -3
  7. data/app/components/lookbook/button/component.html.erb +2 -2
  8. data/app/components/lookbook/button/component.rb +6 -1
  9. data/app/components/lookbook/button_group/component.rb +3 -4
  10. data/app/components/lookbook/copy_button/component.html.erb +1 -1
  11. data/app/components/lookbook/debug_menu/component.html.erb +51 -0
  12. data/app/components/lookbook/debug_menu/component.rb +18 -0
  13. data/app/components/lookbook/embed/component.html.erb +3 -3
  14. data/app/components/lookbook/header/component.html.erb +19 -44
  15. data/app/components/lookbook/inspector_panel/component.html.erb +5 -3
  16. data/app/components/lookbook/inspector_panel/component.rb +6 -18
  17. data/app/components/lookbook/nav/component.js +4 -0
  18. data/app/components/lookbook/nav/component.rb +1 -1
  19. data/app/components/lookbook/nav/item/component.html.erb +4 -4
  20. data/app/components/lookbook/nav/item/component.rb +1 -1
  21. data/app/components/lookbook/page_tabs/component.html.erb +4 -4
  22. data/app/components/lookbook/page_tabs/component.rb +1 -1
  23. data/app/components/lookbook/params/editor/component.html.erb +21 -0
  24. data/app/components/lookbook/{params_editor → params/editor}/component.js +1 -1
  25. data/app/components/lookbook/params/editor/component.rb +40 -0
  26. data/app/components/lookbook/params/field/component.css +76 -0
  27. data/app/components/lookbook/params/field/component.html.erb +27 -0
  28. data/app/components/lookbook/params/field/component.js +7 -0
  29. data/app/components/lookbook/params/field/component.rb +101 -0
  30. data/app/components/lookbook/tabs/component.html.erb +2 -2
  31. data/app/components/lookbook/tag_component.rb +1 -0
  32. data/app/components/lookbook/viewport/component.css +1 -1
  33. data/app/components/lookbook/viewport/component.html.erb +11 -0
  34. data/app/controllers/lookbook/previews_controller.rb +1 -1
  35. data/app/helpers/lookbook/component_helper.rb +45 -26
  36. data/app/helpers/lookbook/page_helper.rb +1 -1
  37. data/app/views/layouts/lookbook/application.html.erb +18 -4
  38. data/app/views/layouts/lookbook/page.html.erb +4 -4
  39. data/app/views/layouts/lookbook/shell.html.erb +4 -4
  40. data/app/views/layouts/lookbook/skeleton.html.erb +0 -6
  41. data/app/views/lookbook/error.html.erb +1 -1
  42. data/app/views/lookbook/pages/show.html.erb +2 -2
  43. data/app/views/lookbook/previews/inputs/_color.html.erb +5 -0
  44. data/app/views/lookbook/previews/inputs/_range.html.erb +15 -0
  45. data/app/views/lookbook/previews/inputs/_select.html.erb +5 -0
  46. data/app/views/lookbook/previews/inputs/_text.html.erb +5 -0
  47. data/app/views/lookbook/previews/inputs/_textarea.html.erb +5 -0
  48. data/app/views/lookbook/previews/inputs/_toggle.html.erb +20 -0
  49. data/app/views/lookbook/previews/panels/_content.html.erb +2 -2
  50. data/app/views/lookbook/previews/panels/_notes.html.erb +2 -2
  51. data/app/views/lookbook/previews/panels/_output.html.erb +1 -1
  52. data/app/views/lookbook/previews/panels/_params.html.erb +3 -3
  53. data/app/views/lookbook/previews/panels/_preview.html.erb +1 -1
  54. data/app/views/lookbook/previews/panels/_source.html.erb +2 -2
  55. data/app/views/lookbook/previews/show.html.erb +13 -19
  56. data/lib/lookbook/config.rb +16 -1
  57. data/lib/lookbook/engine.rb +16 -6
  58. data/lib/lookbook/markdown.rb +1 -1
  59. data/lib/lookbook/panels.rb +14 -4
  60. data/lib/lookbook/params.rb +66 -35
  61. data/lib/lookbook/parser.rb +1 -0
  62. data/lib/lookbook/preview.rb +10 -4
  63. data/lib/lookbook/preview_controller.rb +7 -19
  64. data/lib/lookbook/preview_example.rb +1 -1
  65. data/lib/lookbook/source_inspector.rb +10 -4
  66. data/lib/lookbook/tag.rb +13 -3
  67. data/lib/lookbook/tag_options.rb +111 -0
  68. data/lib/lookbook/tags.rb +6 -2
  69. data/lib/lookbook/template_parser.rb +72 -0
  70. data/lib/lookbook/theme.rb +1 -1
  71. data/lib/lookbook/utils.rb +23 -0
  72. data/lib/lookbook/version.rb +1 -1
  73. data/lib/lookbook.rb +2 -0
  74. data/public/lookbook-assets/css/lookbook.css +369 -126
  75. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  76. data/public/lookbook-assets/js/embed.js +13 -13
  77. data/public/lookbook-assets/js/embed.js.map +1 -1
  78. data/public/lookbook-assets/js/lookbook.js +706 -621
  79. data/public/lookbook-assets/js/lookbook.js.map +1 -1
  80. metadata +42 -10
  81. data/app/components/lookbook/params_editor/component.html.erb +0 -3
  82. data/app/components/lookbook/params_editor/component.rb +0 -11
  83. data/app/components/lookbook/params_editor/field/component.html.erb +0 -49
  84. data/app/components/lookbook/params_editor/field/component.rb +0 -44
@@ -0,0 +1,111 @@
1
+ module Lookbook
2
+ class TagOptions
3
+ SYMBOL_MATCH = /(:([a-zA-Z_\d]+))$/
4
+ EVAL_OPTION_MATCH = /(\{\{\s?(.*)\s?\}\})$/
5
+ YAML_HASH_MATCH = /(\{(.*?)\})$/m
6
+ YAML_ARRAY_MATCH = /(\[(.*?)\])$/m
7
+ FILE_PATH_MATCH = /(\S+\.(json|yml))$/
8
+
9
+ MATCHERS = [YAML_ARRAY_MATCH, YAML_HASH_MATCH, SYMBOL_MATCH, EVAL_OPTION_MATCH, FILE_PATH_MATCH]
10
+
11
+ def initialize(options_str, eval_scope: nil, base_dir: nil)
12
+ @options_str = options_str.is_a?(String) ? options_str.strip : ""
13
+ @eval_scope = eval_scope
14
+ @base_dir = base_dir
15
+ end
16
+
17
+ def options
18
+ resolve.is_a?(Hash) ? resolve.symbolize_keys : resolve
19
+ end
20
+
21
+ def resolve
22
+ @resolved_options ||= begin
23
+ if @options_str.present?
24
+ if @options_str.end_with?(".json", ".yml")
25
+ file_path = resolve_file_path
26
+ if file_path
27
+ options_file_content = File.read(file_path)
28
+ else
29
+ raise "Tag options data file not found"
30
+ end
31
+ end
32
+ if file_path&.extname == ".json"
33
+ JSON.parse(options_file_content)
34
+ elsif file_path&.extname == ".yml"
35
+ YAML.safe_load(options_file_content)
36
+ elsif evaluatable?
37
+ evaluate
38
+ else
39
+ YAML.safe_load(@options_str || "{}")
40
+ end
41
+ else
42
+ {}
43
+ end
44
+ rescue => exception
45
+ Lookbook.logger.warn Lookbook::Error.new(exception)
46
+ {}
47
+ end
48
+ end
49
+
50
+ def resolve_file_path
51
+ path = if @options_str.start_with?(".") && @base_dir.present?
52
+ File.expand_path(@options_str, @base_dir)
53
+ else
54
+ Rails.root.join(@options_str)
55
+ end
56
+ Pathname.new path
57
+ end
58
+
59
+ def evaluate
60
+ if Lookbook.config.preview_params_options_eval == true
61
+ if @eval_scope.nil?
62
+ raise "Preview params eval must be scoped to an object"
63
+ else
64
+ @eval_scope.instance_eval(statement)
65
+ end
66
+ else
67
+ raise "The config option `preview_params_options_eval` must be set to `true` before param options can be evaluated at runtime"
68
+ end
69
+ end
70
+
71
+ def self.extract_options(str)
72
+ str ||= ""
73
+ str.strip!
74
+ opts_str = ""
75
+
76
+ MATCHERS.each do |regexp|
77
+ match_data = str.match(regexp)
78
+ unless match_data.nil?
79
+ str.gsub!(regexp, "").strip!
80
+ opts_str = match_data[1]
81
+ break
82
+ end
83
+ end
84
+
85
+ [str, opts_str]
86
+ end
87
+
88
+ def self.resolveable?(str)
89
+ return unless str.is_a?(String)
90
+ str.strip!
91
+ MATCHERS.each do |regexp|
92
+ return true if str.match?(regexp)
93
+ end
94
+ false
95
+ end
96
+
97
+ private
98
+
99
+ def statement
100
+ evaluatable? ? eval_match_data[2].strip : "{}"
101
+ end
102
+
103
+ def evaluatable?
104
+ eval_match_data.present?
105
+ end
106
+
107
+ def eval_match_data
108
+ @eval_match_data ||= @options_str.match(EVAL_OPTION_MATCH) || @options_str.match(SYMBOL_MATCH)
109
+ end
110
+ end
111
+ end
data/lib/lookbook/tags.rb CHANGED
@@ -11,11 +11,15 @@ module Lookbook
11
11
  Lookbook.config.preview_tags[name] = opts
12
12
  end
13
13
 
14
- def self.process_tags(tag_objects)
14
+ def self.process_tags(tag_objects, file: nil, eval_scope: nil)
15
15
  return [] if tag_objects.none?
16
16
  tag_objects.map do |tag_object|
17
17
  opts = Lookbook.config.preview_tags[tag_object.tag_name] || {}
18
- Lookbook::Tag.new(tag_object, opts[:args], **opts.except(:args))
18
+ Lookbook::Tag.new(tag_object,
19
+ opts[:args],
20
+ **opts.except(:args),
21
+ file: file,
22
+ eval_scope: eval_scope)
19
23
  end.compact
20
24
  end
21
25
  end
@@ -0,0 +1,72 @@
1
+ require "css_parser"
2
+
3
+ module Lookbook
4
+ class TemplateParser
5
+ STYLE_TAGS_REGEX = /<style(?:\s[^>]*)?>((?:(?!<\/style>).)*)<\/style>/m
6
+ FRONTMATTER_REGEX = /\A---(.|\n)*?---/
7
+
8
+ def initialize(content)
9
+ @raw_content = content.strip
10
+ @parsed_content = nil
11
+ @styles = nil
12
+ @frontmatter = nil
13
+ end
14
+
15
+ def content
16
+ parse
17
+ @parsed_content.strip.html_safe
18
+ end
19
+
20
+ def styles
21
+ parse
22
+ @styles
23
+ end
24
+
25
+ def frontmatter
26
+ parse
27
+ @frontmatter
28
+ end
29
+
30
+ private
31
+
32
+ def parse
33
+ if @parsed_content.nil?
34
+ @styles = extract_styles(@raw_content)
35
+ content = strip_styles(@raw_content)
36
+
37
+ @frontmatter = extract_frontmatter(content)
38
+ content = strip_frontmatter(content)
39
+
40
+ @parsed_content = content
41
+ end
42
+ end
43
+
44
+ def extract_styles(text)
45
+ styles = []
46
+ css_parser = ::CssParser::Parser.new
47
+ text.scan(STYLE_TAGS_REGEX).flatten.map(&:strip).each do |css|
48
+ css_parser.load_string! css.strip
49
+ end
50
+ css_parser.each_selector do |selector, declarations, specificity|
51
+ styles << "#{selector} { #{declarations} }"
52
+ end
53
+ styles
54
+ end
55
+
56
+ def strip_styles(text)
57
+ text.gsub(STYLE_TAGS_REGEX, "")
58
+ end
59
+
60
+ def extract_frontmatter(text)
61
+ frontmatter = {}
62
+ text.match(FRONTMATTER_REGEX) do |m|
63
+ frontmatter = YAML.safe_load(m[0])
64
+ end
65
+ frontmatter.deep_symbolize_keys
66
+ end
67
+
68
+ def strip_frontmatter(text)
69
+ text.gsub(FRONTMATTER_REGEX, "")
70
+ end
71
+ end
72
+ end
@@ -41,7 +41,7 @@ module Lookbook
41
41
  return @css unless @css.nil?
42
42
  @css ||= if @overrides.present?
43
43
  styles = [":root {"]
44
- styles << @overrides.select { |key| !key.start_with?("favicon") }.map do |key, value|
44
+ styles << @overrides.reject { |key| key.to_s.start_with?("favicon") }.map do |key, value|
45
45
  " --lookbook-#{key.to_s.underscore.tr("_", "-")}: #{value};"
46
46
  end
47
47
  styles.push "}"
@@ -4,6 +4,29 @@ module Lookbook
4
4
 
5
5
  POSITION_PREFIX_REGEX = /^(\d+?)[-_]/
6
6
  FRONTMATTER_REGEX = /\A---(.|\n)*?---/
7
+ ACTION_VIEW_ANNOTATIONS_REGEX = /<!-- (BEGIN|END) (.*) -->/
8
+
9
+ def self.strip_action_view_annotations!(text)
10
+ text&.gsub!(ACTION_VIEW_ANNOTATIONS_REGEX, "")
11
+ end
12
+
13
+ def self.without_action_view_annotations
14
+ original_value = ActionView::Base.annotate_rendered_view_with_filenames
15
+ ActionView::Base.annotate_rendered_view_with_filenames = false
16
+ res = yield
17
+ ActionView::Base.annotate_rendered_view_with_filenames = original_value
18
+ res
19
+ end
20
+
21
+ def self.with_optional_action_view_annotations
22
+ if ActionView::Base.respond_to?(:annotate_rendered_view_with_filenames) && Lookbook.config.preview_disable_action_view_annotations
23
+ without_action_view_annotations do
24
+ yield
25
+ end
26
+ else
27
+ yield
28
+ end
29
+ end
7
30
 
8
31
  protected
9
32
 
@@ -1,3 +1,3 @@
1
1
  module Lookbook
2
- VERSION = "1.0.8"
2
+ VERSION = "1.1.0"
3
3
  end
data/lib/lookbook.rb CHANGED
@@ -10,6 +10,7 @@ module Lookbook
10
10
  autoload :Utils, "lookbook/utils"
11
11
  autoload :Lang, "lookbook/lang"
12
12
  autoload :Params, "lookbook/params"
13
+ autoload :TagOptions, "lookbook/tag_options"
13
14
  autoload :Page, "lookbook/page"
14
15
  autoload :Tag, "lookbook/tag"
15
16
  autoload :PageSection, "lookbook/page_section"
@@ -24,6 +25,7 @@ module Lookbook
24
25
  autoload :PreviewExample, "lookbook/preview_example"
25
26
  autoload :PreviewGroup, "lookbook/preview_group"
26
27
  autoload :SourceInspector, "lookbook/source_inspector"
28
+ autoload :TemplateParser, "lookbook/template_parser"
27
29
  autoload :CodeFormatter, "lookbook/code_formatter"
28
30
  autoload :Markdown, "lookbook/markdown"
29
31
  autoload :Theme, "lookbook/theme"