lookbook 1.0.8 → 1.1.0

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.
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"