lookbook 1.3.1 → 1.3.4

Sign up to get free protection for your applications and to get access to all the features.
Files changed (51) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/lookbook/css/themes/blue.css +3 -1
  3. data/app/assets/lookbook/css/themes/green.css +66 -0
  4. data/app/assets/lookbook/css/themes/indigo.css +3 -1
  5. data/app/assets/lookbook/css/themes/rose.css +66 -0
  6. data/app/assets/lookbook/css/themes/zinc.css +3 -1
  7. data/app/components/lookbook/base_component.rb +2 -2
  8. data/app/components/lookbook/code/component.css +2 -2
  9. data/app/components/lookbook/code/component.html.erb +2 -1
  10. data/app/components/lookbook/code/component.rb +15 -2
  11. data/app/components/lookbook/code/highlight_github.css +406 -0
  12. data/app/components/lookbook/nav/item/component.html.erb +1 -1
  13. data/app/components/lookbook/params/editor/component.html.erb +2 -2
  14. data/app/components/lookbook/params/field/component.css +3 -3
  15. data/app/components/lookbook/split_layout/component.html.erb +1 -1
  16. data/app/components/lookbook/tag_component.rb +1 -1
  17. data/app/components/lookbook/viewport/component.css +1 -1
  18. data/app/components/lookbook/viewport/component.html.erb +1 -1
  19. data/app/components/lookbook/viewport/component.rb +1 -1
  20. data/app/controllers/concerns/lookbook/targetable_concern.rb +2 -2
  21. data/app/helpers/lookbook/application_helper.rb +1 -1
  22. data/app/views/lookbook/inspector/panels/_notes.html.erb +2 -2
  23. data/app/views/lookbook/inspector/panels/_params.html.erb +1 -1
  24. data/config/app.yml +3 -0
  25. data/lib/lookbook/page.rb +1 -1
  26. data/lib/lookbook/services/code/code_beautifier.rb +1 -1
  27. data/lib/lookbook/services/code/code_highlighter.rb +1 -1
  28. data/lib/lookbook/stores/config_store.rb +5 -1
  29. data/lib/lookbook/stores/panel_store.rb +2 -2
  30. data/lib/lookbook/support/store.rb +1 -1
  31. data/lib/lookbook/tags/position_tag.rb +1 -1
  32. data/lib/lookbook/theme.rb +8 -0
  33. data/lib/lookbook/version.rb +1 -1
  34. data/public/lookbook-assets/css/lookbook.css +426 -315
  35. data/public/lookbook-assets/css/lookbook.css.map +1 -1
  36. data/public/lookbook-assets/css/themes/blue.css +3 -1
  37. data/public/lookbook-assets/css/themes/blue.css.map +1 -1
  38. data/public/lookbook-assets/css/themes/green.css +68 -0
  39. data/public/lookbook-assets/css/themes/green.css.map +1 -0
  40. data/public/lookbook-assets/css/themes/indigo.css +3 -1
  41. data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
  42. data/public/lookbook-assets/css/themes/rose.css +68 -0
  43. data/public/lookbook-assets/css/themes/rose.css.map +1 -0
  44. data/public/lookbook-assets/css/themes/zinc.css +3 -1
  45. data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
  46. data/public/lookbook-assets/js/embed.js +9 -0
  47. data/public/lookbook-assets/js/embed.js.map +1 -1
  48. data/public/lookbook-assets/js/lookbook.js +291 -569
  49. data/public/lookbook-assets/js/lookbook.js.map +1 -1
  50. metadata +9 -3
  51. data/app/components/lookbook/code/highlight_github_light.css +0 -217
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d8d63d345b24ff10434b866d95f6aeb2a98a2b82418aba97efc83638fe560cc7
4
- data.tar.gz: 0e3f8b21606a38b0e4cb8c02f890244c2a8654007cec0840b1a3cc74f9cdc225
3
+ metadata.gz: 4b470e546db75bd013d11e664180acde6ba376e5f81efe0ad21e4fba92489fe5
4
+ data.tar.gz: bf7186410dfeb3506d002e6ab43133b883350e5f7827ab92ff840900a5a28650
5
5
  SHA512:
6
- metadata.gz: 16b46777b9533f0d210f463115eb72b5579ef5d0f74f970d9edec3888c57265168142e8d72e009c6baafe7f50023e4c15706cde0f3fe318bf9f77e9221441852
7
- data.tar.gz: 940ddb7dc5f8370ab18f06a042aaf592c06a1466bf7cec291e80b33ddb91b091a779b73baf13b9a3d011f9ab2195b07ba39e95ae4156c6dda3ccf4431fa35ef5
6
+ metadata.gz: 93556785190aff39487ae217fdc50969c0c5444c02dc9b9579b7184ffa568696b72bdc66ea24600e92fb2b67569b9100aca4417f3082b0d1876e59aa0e12c8c2
7
+ data.tar.gz: 4a218ca0928bfb9c1aa74b9c1a17c5cfae21cfc7ceadbf9cd4354a3d26a65af1eae9087a96782666c85b39cee646ebd6075b857ec5caa43aa547cc1239d68a19
data/app/assets/lookbook/css/themes/blue.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --lookbook-base-900: theme("colors.zinc.900");
23
23
  --lookbook-text: var(--lookbook-base-800);
24
24
  --lookbook-divider: var(--lookbook-base-300);
25
+ --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
25
26
  --lookbook-icon-button-stroke: var(--lookbook-base-400);
26
27
  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
27
28
  --lookbook-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
50
51
  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
51
52
  --lookbook-tabs-border-active: var(--lookbook-accent-400);
52
53
  --lookbook-viewport-handle: var(--lookbook-white);
54
+ --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
53
55
  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
54
56
  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
55
57
  --lookbook-sidebar-bg: var(--lookbook-base-50);
56
58
  --lookbook-page-bg: var(--lookbook-white);
57
59
  --lookbook-drawer-bg: var(--lookbook-base-50);
60
+ --lookbook-params-editor-bg: var(--lookbook-white);
58
61
  --lookbook-header-bg: var(--lookbook-accent-600);
59
62
  --lookbook-header-text: var(--lookbook-white);
60
63
  --lookbook-header-border: var(--lookbook-accent-700);
61
64
  --lookbook-blank-slate-title: var(--lookbook-accent-600);
62
65
  --lookbook-branding-text: var(--lookbook-header-text);
63
- --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
64
66
  }
data/app/assets/lookbook/css/themes/green.css ADDED
@@ -0,0 +1,66 @@
1
+ :root {
2
+ --lookbook-white: theme("colors.white");
3
+ --lookbook-accent-50: theme("colors.green.50");
4
+ --lookbook-accent-100: theme("colors.green.100");
5
+ --lookbook-accent-200: theme("colors.green.200");
6
+ --lookbook-accent-300: theme("colors.green.300");
7
+ --lookbook-accent-400: theme("colors.green.400");
8
+ --lookbook-accent-500: theme("colors.green.500");
9
+ --lookbook-accent-600: theme("colors.green.600");
10
+ --lookbook-accent-700: theme("colors.green.700");
11
+ --lookbook-accent-800: theme("colors.green.800");
12
+ --lookbook-accent-900: theme("colors.green.900");
13
+ --lookbook-base-50: theme("colors.zinc.50");
14
+ --lookbook-base-100: theme("colors.zinc.100");
15
+ --lookbook-base-200: theme("colors.zinc.200");
16
+ --lookbook-base-300: theme("colors.zinc.300");
17
+ --lookbook-base-400: theme("colors.zinc.400");
18
+ --lookbook-base-500: theme("colors.zinc.500");
19
+ --lookbook-base-600: theme("colors.zinc.600");
20
+ --lookbook-base-700: theme("colors.zinc.700");
21
+ --lookbook-base-800: theme("colors.zinc.800");
22
+ --lookbook-base-900: theme("colors.zinc.900");
23
+ --lookbook-text: var(--lookbook-base-800);
24
+ --lookbook-divider: var(--lookbook-base-300);
25
+ --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
26
+ --lookbook-icon-button-stroke: var(--lookbook-base-400);
27
+ --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
28
+ --lookbook-tooltip-bg: var(--lookbook-accent-500);
29
+ --lookbook-tooltip-text: var(--lookbook-white);
30
+ --lookbook-scrollbar: var(--lookbook-base-200);
31
+ --lookbook-scrollbar-hover: var(--lookbook-base-300);
32
+ --lookbook-toolbar-bg: var(--lookbook-white);
33
+ --lookbook-toolbar-divider: var(--lookbook-divider);
34
+ --lookbook-nav-text: var(--lookbook-text);
35
+ --lookbook-nav-toggle: var(--lookbook-base-500);
36
+ --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
37
+ --lookbook-nav-item-hover: var(--lookbook-base-100);
38
+ --lookbook-nav-item-active: var(--lookbook-accent-50);
39
+ --lookbook-input-bg: var(--lookbook-white);
40
+ --lookbook-input-border: var(--lookbook-base-300);
41
+ --lookbook-input-border-focus: var(--lookbook-accent-200);
42
+ --lookbook-input-text: var(--lookbook-base-600);
43
+ --lookbook-input-text-placeholder: var(--lookbook-base-400);
44
+ --lookbook-input-toggle: var(--lookbook-base-300);
45
+ --lookbook-input-toggle-active: var(--lookbook-accent-500);
46
+ --lookbook-prose-bg: var(--lookbook-white);
47
+ --lookbook-prose-text: var(--lookbook-base-600);
48
+ --lookbook-prose-link: var(--lookbook-accent-900);
49
+ --lookbook-tabs-text: var(--lookbook-base-500);
50
+ --lookbook-tabs-text-hover: var(--lookbook-base-700);
51
+ --lookbook-tabs-text-disabled: var(--lookbook-base-300);
52
+ --lookbook-tabs-border-active: var(--lookbook-accent-400);
53
+ --lookbook-viewport-handle: var(--lookbook-white);
54
+ --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
55
+ --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
56
+ --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
57
+ --lookbook-sidebar-bg: var(--lookbook-base-50);
58
+ --lookbook-page-bg: var(--lookbook-white);
59
+ --lookbook-drawer-bg: var(--lookbook-base-50);
60
+ --lookbook-params-editor-bg: var(--lookbook-white);
61
+ --lookbook-header-bg: var(--lookbook-accent-600);
62
+ --lookbook-header-text: var(--lookbook-white);
63
+ --lookbook-header-border: var(--lookbook-accent-700);
64
+ --lookbook-blank-slate-title: var(--lookbook-accent-600);
65
+ --lookbook-branding-text: var(--lookbook-header-text);
66
+ }
data/app/assets/lookbook/css/themes/indigo.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --lookbook-base-900: theme("colors.zinc.900");
23
23
  --lookbook-text: var(--lookbook-base-800);
24
24
  --lookbook-divider: var(--lookbook-base-300);
25
+ --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
25
26
  --lookbook-icon-button-stroke: var(--lookbook-base-400);
26
27
  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
27
28
  --lookbook-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
50
51
  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
51
52
  --lookbook-tabs-border-active: var(--lookbook-accent-400);
52
53
  --lookbook-viewport-handle: var(--lookbook-white);
54
+ --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
53
55
  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
54
56
  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
55
57
  --lookbook-sidebar-bg: var(--lookbook-base-50);
56
58
  --lookbook-page-bg: var(--lookbook-white);
57
59
  --lookbook-drawer-bg: var(--lookbook-base-50);
60
+ --lookbook-params-editor-bg: var(--lookbook-white);
58
61
  --lookbook-header-bg: var(--lookbook-accent-600);
59
62
  --lookbook-header-text: var(--lookbook-white);
60
63
  --lookbook-header-border: var(--lookbook-accent-700);
61
64
  --lookbook-blank-slate-title: var(--lookbook-accent-600);
62
65
  --lookbook-branding-text: var(--lookbook-header-text);
63
- --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
64
66
  }
data/app/assets/lookbook/css/themes/rose.css ADDED
@@ -0,0 +1,66 @@
1
+ :root {
2
+ --lookbook-white: theme("colors.white");
3
+ --lookbook-accent-50: theme("colors.rose.50");
4
+ --lookbook-accent-100: theme("colors.rose.100");
5
+ --lookbook-accent-200: theme("colors.rose.200");
6
+ --lookbook-accent-300: theme("colors.rose.300");
7
+ --lookbook-accent-400: theme("colors.rose.400");
8
+ --lookbook-accent-500: theme("colors.rose.500");
9
+ --lookbook-accent-600: theme("colors.rose.600");
10
+ --lookbook-accent-700: theme("colors.rose.700");
11
+ --lookbook-accent-800: theme("colors.rose.800");
12
+ --lookbook-accent-900: theme("colors.rose.900");
13
+ --lookbook-base-50: theme("colors.zinc.50");
14
+ --lookbook-base-100: theme("colors.zinc.100");
15
+ --lookbook-base-200: theme("colors.zinc.200");
16
+ --lookbook-base-300: theme("colors.zinc.300");
17
+ --lookbook-base-400: theme("colors.zinc.400");
18
+ --lookbook-base-500: theme("colors.zinc.500");
19
+ --lookbook-base-600: theme("colors.zinc.600");
20
+ --lookbook-base-700: theme("colors.zinc.700");
21
+ --lookbook-base-800: theme("colors.zinc.800");
22
+ --lookbook-base-900: theme("colors.zinc.900");
23
+ --lookbook-text: var(--lookbook-base-800);
24
+ --lookbook-divider: var(--lookbook-base-300);
25
+ --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
26
+ --lookbook-icon-button-stroke: var(--lookbook-base-400);
27
+ --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
28
+ --lookbook-tooltip-bg: var(--lookbook-accent-500);
29
+ --lookbook-tooltip-text: var(--lookbook-white);
30
+ --lookbook-scrollbar: var(--lookbook-base-200);
31
+ --lookbook-scrollbar-hover: var(--lookbook-base-300);
32
+ --lookbook-toolbar-bg: var(--lookbook-white);
33
+ --lookbook-toolbar-divider: var(--lookbook-divider);
34
+ --lookbook-nav-text: var(--lookbook-text);
35
+ --lookbook-nav-toggle: var(--lookbook-base-500);
36
+ --lookbook-nav-icon-stroke: var(--lookbook-accent-500);
37
+ --lookbook-nav-item-hover: var(--lookbook-base-100);
38
+ --lookbook-nav-item-active: var(--lookbook-accent-50);
39
+ --lookbook-input-bg: var(--lookbook-white);
40
+ --lookbook-input-border: var(--lookbook-base-300);
41
+ --lookbook-input-border-focus: var(--lookbook-accent-200);
42
+ --lookbook-input-text: var(--lookbook-base-600);
43
+ --lookbook-input-text-placeholder: var(--lookbook-base-400);
44
+ --lookbook-input-toggle: var(--lookbook-base-300);
45
+ --lookbook-input-toggle-active: var(--lookbook-accent-500);
46
+ --lookbook-prose-bg: var(--lookbook-white);
47
+ --lookbook-prose-text: var(--lookbook-base-600);
48
+ --lookbook-prose-link: var(--lookbook-accent-900);
49
+ --lookbook-tabs-text: var(--lookbook-base-500);
50
+ --lookbook-tabs-text-hover: var(--lookbook-base-700);
51
+ --lookbook-tabs-text-disabled: var(--lookbook-base-300);
52
+ --lookbook-tabs-border-active: var(--lookbook-accent-400);
53
+ --lookbook-viewport-handle: var(--lookbook-white);
54
+ --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
55
+ --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
56
+ --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
57
+ --lookbook-sidebar-bg: var(--lookbook-base-50);
58
+ --lookbook-page-bg: var(--lookbook-white);
59
+ --lookbook-drawer-bg: var(--lookbook-base-50);
60
+ --lookbook-params-editor-bg: var(--lookbook-white);
61
+ --lookbook-header-bg: var(--lookbook-accent-600);
62
+ --lookbook-header-text: var(--lookbook-white);
63
+ --lookbook-header-border: var(--lookbook-accent-700);
64
+ --lookbook-blank-slate-title: var(--lookbook-accent-600);
65
+ --lookbook-branding-text: var(--lookbook-header-text);
66
+ }
data/app/assets/lookbook/css/themes/zinc.css CHANGED
@@ -22,6 +22,7 @@
22
22
  --lookbook-base-900: theme("colors.zinc.900");
23
23
  --lookbook-text: var(--lookbook-base-800);
24
24
  --lookbook-divider: var(--lookbook-base-300);
25
+ --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
25
26
  --lookbook-icon-button-stroke: var(--lookbook-base-400);
26
27
  --lookbook-icon-button-stroke-hover: var(--lookbook-accent-600);
27
28
  --lookbook-tooltip-bg: var(--lookbook-accent-500);
@@ -50,15 +51,16 @@
50
51
  --lookbook-tabs-text-disabled: var(--lookbook-base-300);
51
52
  --lookbook-tabs-border-active: var(--lookbook-accent-400);
52
53
  --lookbook-viewport-handle: var(--lookbook-white);
54
+ --lookbook-viewport-handle-hover: var(--lookbook-draggable-hint);
53
55
  --lookbook-viewport-handle-icon-stroke: var(--lookbook-base-300);
54
56
  --lookbook-viewport-handle-icon-stroke-hover: var(--lookbook-base-700);
55
57
  --lookbook-sidebar-bg: var(--lookbook-base-50);
56
58
  --lookbook-page-bg: var(--lookbook-white);
57
59
  --lookbook-drawer-bg: var(--lookbook-base-50);
60
+ --lookbook-params-editor-bg: var(--lookbook-white);
58
61
  --lookbook-header-bg: var(--lookbook-accent-600);
59
62
  --lookbook-header-text: var(--lookbook-white);
60
63
  --lookbook-header-border: var(--lookbook-accent-700);
61
64
  --lookbook-blank-slate-title: var(--lookbook-accent-600);
62
65
  --lookbook-branding-text: var(--lookbook-header-text);
63
- --lookbook-draggable-hint: rgb(224 231 255 / 0.2);
64
66
  }
data/app/components/lookbook/base_component.rb CHANGED
@@ -32,9 +32,9 @@ module Lookbook
32
32
 
33
33
  def alpine_encode(data)
34
34
  if data.is_a? String
35
- "\'#{json_escape data}\'"
35
+ "'#{json_escape data}'"
36
36
  else
37
- json_escape data.to_json.tr("\"", "\'")
37
+ json_escape data.to_json.tr("\"", "'")
38
38
  end
39
39
  end
40
40
 
data/app/components/lookbook/code/component.css CHANGED
@@ -1,4 +1,4 @@
1
- @import "./highlight_github_light.css";
1
+ @import "./highlight_github.css";
2
2
 
3
3
  @layer components {
4
4
  [data-component="code"] {
@@ -25,7 +25,7 @@
25
25
 
26
26
  & .line-numbers {
27
27
  width: min-content;
28
- @apply bg-white border-r border-dashed border-lookbook-divider z-10 h-full p-3 select-none text-gray-400 text-right;
28
+ @apply border-r border-dashed z-10 h-full p-3 select-none text-right;
29
29
  }
30
30
 
31
31
  & .line-number {
data/app/components/lookbook/code/component.html.erb CHANGED
@@ -3,7 +3,8 @@
3
3
  {
4
4
  "numbered": numbered?,
5
5
  "focussed": focussed?,
6
- "h-full": full_height?
6
+ "h-full": full_height?,
7
+ "dark": is_dark?
7
8
  }
8
9
  ] do %>
9
10
  <%= Lookbook::CodeHighlighter.call(source, **@highlight_opts) %>
data/app/components/lookbook/code/component.rb CHANGED
@@ -1,3 +1,5 @@
1
+ require "active_model"
2
+
1
3
  module Lookbook
2
4
  class Code::Component < Lookbook::BaseComponent
3
5
  include Lookbook::OutputHelper
@@ -9,7 +11,8 @@ module Lookbook
9
11
  highlight_lines: [],
10
12
  start_line: 1,
11
13
  wrap: false,
12
- theme: :github_light,
14
+ theme: nil,
15
+ dark: false,
13
16
  full_height: false,
14
17
  **html_attrs
15
18
  )
@@ -23,6 +26,7 @@ module Lookbook
23
26
  @highlight_lines = highlight_lines
24
27
  @wrap = wrap
25
28
  @theme = theme
29
+ @dark = dark
26
30
  @full_height = full_height
27
31
  super(**html_attrs)
28
32
  end
@@ -44,7 +48,16 @@ module Lookbook
44
48
  end
45
49
 
46
50
  def full_height?
47
- @full_height == true
51
+ @full_height
52
+ end
53
+
54
+ def is_dark?
55
+ @dark
56
+ end
57
+
58
+ def before_render
59
+ @theme ||= (config.highlighter_options && config.highlighter_options[:theme]&.to_sym) || :github
60
+ @dark ||= ::ActiveModel::Type::Boolean.new.cast((config.highlighter_options && config.highlighter_options[:dark]) || false)
48
61
  end
49
62
 
50
63
  protected