lookbook 1.3.3 → 1.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +11 -11
- data/app/assets/lookbook/css/themes/blue.css +1 -1
- data/app/assets/lookbook/css/themes/green.css +66 -0
- data/app/assets/lookbook/css/themes/indigo.css +1 -1
- data/app/assets/lookbook/css/themes/rose.css +66 -0
- data/app/assets/lookbook/css/themes/zinc.css +1 -1
- data/app/components/lookbook/base_component.rb +2 -2
- data/app/components/lookbook/code/component.rb +2 -2
- data/app/components/lookbook/header/component.html.erb +1 -1
- data/app/components/lookbook/inspector_panel/component.rb +1 -1
- data/app/components/lookbook/nav/component.rb +8 -15
- data/app/components/lookbook/nav/directory/component.html.erb +26 -0
- data/app/components/lookbook/nav/directory/component.rb +4 -0
- data/app/components/lookbook/nav/{item → entity}/component.html.erb +5 -7
- data/app/components/lookbook/nav/entity/component.rb +49 -0
- data/app/components/lookbook/nav/item/component.css +15 -0
- data/app/components/lookbook/nav/item/component.js +4 -0
- data/app/components/lookbook/nav/item/component.rb +13 -56
- data/app/components/lookbook/tag_component.rb +1 -1
- data/app/components/lookbook/viewport/component.rb +1 -1
- data/app/controllers/concerns/lookbook/targetable_concern.rb +13 -38
- data/app/controllers/lookbook/application_controller.rb +9 -7
- data/app/controllers/lookbook/page_controller.rb +2 -2
- data/app/controllers/lookbook/pages_controller.rb +9 -15
- data/app/helpers/lookbook/application_helper.rb +2 -2
- data/app/helpers/lookbook/page_helper.rb +7 -4
- data/app/views/layouts/lookbook/application.html.erb +3 -4
- data/app/views/layouts/lookbook/page.html.erb +2 -2
- data/app/views/layouts/lookbook/shell.html.erb +2 -2
- data/app/views/layouts/lookbook/skeleton.html.erb +7 -7
- data/app/views/lookbook/index.html.erb +3 -3
- data/app/views/lookbook/inspector/panels/_params.html.erb +2 -2
- data/config/languages.yml +41 -0
- data/config/panels.yml +1 -1
- data/config/tags.yml +4 -0
- data/lib/lookbook/engine.rb +65 -43
- data/lib/lookbook/entities/collections/component_collection.rb +4 -0
- data/lib/lookbook/entities/collections/concerns/hierarchical_collection.rb +27 -0
- data/lib/lookbook/entities/collections/entity_collection.rb +66 -0
- data/lib/lookbook/entities/collections/page_collection.rb +30 -0
- data/lib/lookbook/entities/collections/preview_collection.rb +35 -0
- data/lib/lookbook/entities/collections/preview_example_collection.rb +9 -0
- data/lib/lookbook/entities/component.rb +31 -0
- data/lib/lookbook/entities/concerns/annotatable.rb +58 -0
- data/lib/lookbook/entities/concerns/inspectable.rb +44 -0
- data/lib/lookbook/entities/concerns/locatable.rb +73 -0
- data/lib/lookbook/entities/concerns/navigable.rb +27 -0
- data/lib/lookbook/entities/entity.rb +48 -0
- data/lib/lookbook/entities/page.rb +80 -0
- data/lib/lookbook/entities/page_section.rb +43 -0
- data/lib/lookbook/entities/preview.rb +87 -0
- data/lib/lookbook/entities/preview_example.rb +91 -0
- data/lib/lookbook/entities/preview_group.rb +48 -0
- data/lib/lookbook/file_watcher.rb +1 -1
- data/lib/lookbook/lang.rb +12 -35
- data/lib/lookbook/param.rb +2 -2
- data/lib/lookbook/preview_parser.rb +1 -1
- data/lib/lookbook/rendered_example.rb +37 -0
- data/lib/lookbook/services/code/code_beautifier.rb +1 -1
- data/lib/lookbook/services/code/code_highlighter.rb +1 -1
- data/lib/lookbook/services/code/code_indenter.rb +14 -0
- data/lib/lookbook/services/data/resolvers/data_resolver.rb +2 -2
- data/lib/lookbook/services/data/resolvers/method_resolver.rb +1 -1
- data/lib/lookbook/services/entities/entity_tree_builder.rb +45 -0
- data/lib/lookbook/services/position_prefix_parser.rb +16 -0
- data/lib/lookbook/stores/config_store.rb +1 -1
- data/lib/lookbook/stores/panel_store.rb +2 -2
- data/lib/lookbook/support/store.rb +1 -34
- data/lib/lookbook/support/tree_node.rb +83 -0
- data/lib/lookbook/support/utils/path_utils.rb +26 -2
- data/lib/lookbook/support/utils/utils.rb +24 -0
- data/lib/lookbook/tags/component_tag.rb +6 -0
- data/lib/lookbook/tags/custom_tag.rb +2 -0
- data/lib/lookbook/tags/id_tag.rb +1 -1
- data/lib/lookbook/tags/logical_path_tag.rb +3 -0
- data/lib/lookbook/tags/param_tag.rb +2 -0
- data/lib/lookbook/tags/position_tag.rb +1 -1
- data/lib/lookbook/tags/source_tag.rb +7 -0
- data/lib/lookbook/tags/yard_tag.rb +35 -7
- data/lib/lookbook/theme.rb +8 -0
- data/lib/lookbook/version.rb +1 -1
- data/lib/lookbook.rb +11 -7
- data/public/lookbook-assets/css/lookbook.css +55 -125
- data/public/lookbook-assets/css/lookbook.css.map +1 -1
- data/public/lookbook-assets/css/themes/blue.css.map +1 -1
- data/public/lookbook-assets/css/themes/green.css +68 -0
- data/public/lookbook-assets/css/themes/green.css.map +1 -0
- data/public/lookbook-assets/css/themes/indigo.css.map +1 -1
- data/public/lookbook-assets/css/themes/rose.css +68 -0
- data/public/lookbook-assets/css/themes/rose.css.map +1 -0
- data/public/lookbook-assets/css/themes/zinc.css.map +1 -1
- data/public/lookbook-assets/js/embed.js +9 -0
- data/public/lookbook-assets/js/embed.js.map +1 -1
- data/public/lookbook-assets/js/lookbook.js +288 -565
- data/public/lookbook-assets/js/lookbook.js.map +1 -1
- metadata +41 -18
- data/lib/lookbook/collection.rb +0 -161
- data/lib/lookbook/component.rb +0 -34
- data/lib/lookbook/entity.rb +0 -47
- data/lib/lookbook/page.rb +0 -194
- data/lib/lookbook/page_collection.rb +0 -19
- data/lib/lookbook/page_section.rb +0 -29
- data/lib/lookbook/preview.rb +0 -181
- data/lib/lookbook/preview_collection.rb +0 -23
- data/lib/lookbook/preview_example.rb +0 -93
- data/lib/lookbook/preview_group.rb +0 -58
- data/lib/lookbook/source_inspector.rb +0 -76
- data/lib/lookbook/support/utils/attribute_utils.rb +0 -14
- data/lib/lookbook/utils.rb +0 -65
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3a8ca9a9db0798d392083b4470397bf94260811a1f82f8b89dee0e5646fca156
|
4
|
+
data.tar.gz: 24fe83948823edd7387b11ca2ee5628f778a15034173491bfdfd20347d6b1484
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 1463db9307bc67d9224a4a96f21ee404902fe0e266b40b0456c84e551a26b96a779e816f2780b5c1ea30189b8d94e3e5dfc16ab6d2f0b3df3a0e06d8f2705282
|
7
|
+
data.tar.gz: ea867f97d2cb0d532e59c3c62de31405dca1fe29e7f9ade020fe6b7eb2cb3d2b04d16d7b110e3479eaa54316d6df9ba3328594c73c659e37f6c513867325ad54
|
data/README.md
CHANGED
@@ -4,21 +4,21 @@
|
|
4
4
|
A tool to help browse, develop, test & document [ViewComponents](https://viewcomponent.org/) in Ruby on Rails apps.
|
5
5
|
|
6
6
|
[![Gem version](https://img.shields.io/gem/v/lookbook)](https://rubygems.org/gems/lookbook)
|
7
|
-
[![CI status](https://github.com/
|
7
|
+
[![CI status](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml/badge.svg?branch=main)](https://github.com/ViewComponent/lookbook/actions/workflows/ci.yml)
|
8
8
|
<br>
|
9
9
|
|
10
10
|
## Documentation
|
11
11
|
|
12
12
|
✨ **Lookbook guide and API docs**: [lookbook.build](https://lookbook.build)
|
13
13
|
|
14
|
-
> _Looking for pre-v1.0 documentation? [Head over here](https://github.com/
|
14
|
+
> _Looking for pre-v1.0 documentation? [Head over here](https://github.com/ViewComponent/lookbook/tree/0.9.x)._
|
15
15
|
|
16
16
|
|
17
17
|
## Demo
|
18
18
|
|
19
19
|
✨ **Online Demo**: [lookbook-demo-app.herokuapp.com/lookbook](https://lookbook-demo-app.herokuapp.com/lookbook)
|
20
20
|
|
21
|
-
✨ **Demo repo**: [github.com/
|
21
|
+
✨ **Demo repo**: [github.com/ViewComponent/lookbook-demo](https://github.com/ViewComponent/lookbook-demo)
|
22
22
|
|
23
23
|
[![Lookbook UI](.github/assets/lookbook_screenshot_v1.0_beta.png)](https://lookbook-demo-app.herokuapp.com/lookbook/)
|
24
24
|
|
@@ -29,10 +29,10 @@ Lookbook is implemented as an isolated [Rails Engine](https://guides.rubyonrails
|
|
29
29
|
|
30
30
|
This repository contains:
|
31
31
|
|
32
|
-
* The Lookbook source code ([`/app`](https://github.com/
|
33
|
-
* A '[workbench](#workbench)' app used for Lookbook component development ([`/workbench`](https://github.com/
|
34
|
-
* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/
|
35
|
-
* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/
|
32
|
+
* The Lookbook source code ([`/app`](https://github.com/ViewComponent/lookbook/tree/main/app), [`/lib`](https://github.com/ViewComponent/lookbook/tree/main/lib), [`/config`](https://github.com/ViewComponent/lookbook/tree/main/config), etc)
|
33
|
+
* A '[workbench](#workbench)' app used for Lookbook component development ([`/workbench`](https://github.com/ViewComponent/lookbook/tree/main/workbench)).
|
34
|
+
* The Lookbook [documentation site](#docs-site) source code and content ([`/docs`](https://github.com/ViewComponent/lookbook/tree/main/docs)).
|
35
|
+
* A [test suite](#testing) with a 'runable' dummy app ([`/spec`](https://github.com/ViewComponent/lookbook/tree/main/spec)).
|
36
36
|
|
37
37
|
### Workbench
|
38
38
|
|
@@ -69,16 +69,16 @@ The dummy app that the tests are being run against can be viewed by running the
|
|
69
69
|
|
70
70
|
Lookbook is an un-funded open source project and contributions of all types and sizes are most welcome!
|
71
71
|
|
72
|
-
Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/
|
72
|
+
Please take the time to read over the [Contributing](./CONTRIBUTING.md) guide before making your first contribution and if anything isn't clear then [start a discussion](https://github.com/ViewComponent/lookbook/discussions) and we will do our best to help you out.
|
73
73
|
|
74
74
|
## Contributors
|
75
75
|
|
76
76
|
Lookbook was created by [Mark Perkins](https://github.com/allmarkedup) and continues to grow
|
77
|
-
& improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/
|
77
|
+
& improve thanks to the ideas, suggestions and hard work of all of [these excellent humans](https://github.com/ViewComponent/lookbook/graphs/contributors):
|
78
78
|
<br>
|
79
79
|
<br>
|
80
|
-
<a href="https://github.com/
|
81
|
-
<img src="https://contrib.rocks/image?repo=
|
80
|
+
<a href="https://github.com/ViewComponent/lookbook/graphs/contributors">
|
81
|
+
<img src="https://contrib.rocks/image?repo=ViewComponent/lookbook&columns=14" width="800" />
|
82
82
|
</a>
|
83
83
|
|
84
84
|
## License
|
@@ -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
|
+
}
|
@@ -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
|
+
}
|
@@ -54,8 +54,8 @@ module Lookbook
|
|
54
54
|
end
|
55
55
|
|
56
56
|
def before_render
|
57
|
-
@theme ||=
|
58
|
-
@dark ||=
|
57
|
+
@theme ||= Lookbook.config.highlighter_options.fetch(:theme, :github).to_sym
|
58
|
+
@dark ||= !!Lookbook.config.highlighter_options.fetch(:dark, false)
|
59
59
|
end
|
60
60
|
|
61
61
|
protected
|
@@ -25,7 +25,7 @@
|
|
25
25
|
<% menu = lookbook_render :debug_menu,
|
26
26
|
version: Lookbook::VERSION,
|
27
27
|
docs_url: "https://lookbook.build/guide",
|
28
|
-
repo_url: "https://github.com/
|
28
|
+
repo_url: "https://github.com/ViewComponent/lookbook" do %>
|
29
29
|
<%= helpers.pretty_json(Lookbook.debug_data) %>
|
30
30
|
<% end %>
|
31
31
|
<% button.dropdown({}).with_content(menu) %>
|
@@ -3,25 +3,18 @@ module Lookbook
|
|
3
3
|
renders_one :filter, Lookbook::Filter::Component
|
4
4
|
renders_one :toolbar, Lookbook::Toolbar::Component
|
5
5
|
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
@id = id.presence || "#{collection.id}-nav"
|
12
|
-
@collection = collection.as_tree
|
13
|
-
@item_args = {
|
14
|
-
collapse_singles: collapse_singles
|
15
|
-
}
|
6
|
+
attr_reader :id, :tree
|
7
|
+
|
8
|
+
def initialize(tree:, id: nil, **attrs)
|
9
|
+
@id = id
|
10
|
+
@tree = tree
|
16
11
|
super(**attrs, id: id)
|
17
12
|
end
|
18
13
|
|
19
14
|
def items
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
depth: 1,
|
24
|
-
**@item_args
|
15
|
+
tree.map do |node|
|
16
|
+
item_class = (node.type == :directory) ? Nav::Directory::Component : Nav::Entity::Component
|
17
|
+
lookbook_render item_class.new node, nav_id: id
|
25
18
|
end
|
26
19
|
end
|
27
20
|
|
@@ -0,0 +1,26 @@
|
|
1
|
+
<%= render_component_tag :li,
|
2
|
+
id: id,
|
3
|
+
class: "list-none",
|
4
|
+
"x-show": "!filteredOut",
|
5
|
+
data: { "entity-type": :directory },
|
6
|
+
cloak: true do %>
|
7
|
+
<%= lookbook_tag :button,
|
8
|
+
class: "nav-action",
|
9
|
+
style: "padding-left: #{left_pad}px",
|
10
|
+
"x-bind": "bindings.toggle" do %>
|
11
|
+
<div class="nav-action-inner">
|
12
|
+
<%= icon nil,
|
13
|
+
size: 3,
|
14
|
+
class: "nav-toggle-icon",
|
15
|
+
"x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
|
16
|
+
<%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
|
17
|
+
<span class="truncate"><%= label %></span>
|
18
|
+
</div>
|
19
|
+
<% end %>
|
20
|
+
|
21
|
+
<% if children? %>
|
22
|
+
<ul x-ref="items" x-show="open" x-cloak>
|
23
|
+
<%= safe_join(children) %>
|
24
|
+
</ul>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
@@ -2,22 +2,20 @@
|
|
2
2
|
id: id,
|
3
3
|
class: "list-none",
|
4
4
|
"x-show": "!filteredOut",
|
5
|
-
data: {
|
6
|
-
"entity-type": item.type
|
7
|
-
},
|
5
|
+
data: { "entity-type": type },
|
8
6
|
cloak: true do %>
|
9
7
|
<%= lookbook_tag href.present? ? :a : :button,
|
10
8
|
href: href,
|
11
|
-
class: "
|
9
|
+
class: "nav-action",
|
12
10
|
style: "padding-left: #{left_pad}px",
|
13
11
|
"x-bind": "bindings.#{href.present? ? "link" : "toggle"}" do %>
|
14
|
-
<div class="
|
12
|
+
<div class="nav-action-inner">
|
15
13
|
<%= icon nil,
|
16
14
|
size: 3,
|
17
|
-
class: "
|
15
|
+
class: "nav-toggle-icon",
|
18
16
|
"x-effect": "iconName = open ? 'chevron-down' : 'chevron-right'" if children? %>
|
19
17
|
<%= icon nav_icon, size: 3.5, class: "mr-1.5 text-lookbook-nav-icon-stroke" %>
|
20
|
-
<span class="truncate <% if
|
18
|
+
<span class="truncate <% if node.type == :preview %>font-bold<% end %>"><%= label %></span>
|
21
19
|
</div>
|
22
20
|
<% end %>
|
23
21
|
|
@@ -0,0 +1,49 @@
|
|
1
|
+
module Lookbook
|
2
|
+
class Nav::Entity::Component < Nav::Item::Component
|
3
|
+
ICONS = {
|
4
|
+
page: :file,
|
5
|
+
preview: :layers,
|
6
|
+
example: :eye,
|
7
|
+
group: :eye
|
8
|
+
}.freeze
|
9
|
+
|
10
|
+
def nav_icon
|
11
|
+
ICONS[type] || :file
|
12
|
+
end
|
13
|
+
|
14
|
+
def href
|
15
|
+
if collapsed?
|
16
|
+
node.first.url_path
|
17
|
+
elsif type != :preview
|
18
|
+
node.url_path
|
19
|
+
end
|
20
|
+
end
|
21
|
+
|
22
|
+
def children
|
23
|
+
collapsed? ? [] : super
|
24
|
+
end
|
25
|
+
|
26
|
+
def type
|
27
|
+
collapsed? ? :example : node.type
|
28
|
+
end
|
29
|
+
|
30
|
+
def collapsed?
|
31
|
+
node.type == :preview && node.children.one?
|
32
|
+
end
|
33
|
+
|
34
|
+
def search_terms
|
35
|
+
matchers = if collapsed?
|
36
|
+
node.first.search_terms
|
37
|
+
else
|
38
|
+
node.respond_to?(:search_terms) ? Array(node.search_terms) : []
|
39
|
+
end
|
40
|
+
matchers.flatten.map { |m| m.gsub(/\s/, "").downcase }
|
41
|
+
end
|
42
|
+
|
43
|
+
protected
|
44
|
+
|
45
|
+
def alpine_data
|
46
|
+
alpine_encode({id: node.id, matchers: search_terms})
|
47
|
+
end
|
48
|
+
end
|
49
|
+
end
|
@@ -0,0 +1,15 @@
|
|
1
|
+
@layer components {
|
2
|
+
[data-component="nav"] {
|
3
|
+
.nav-action {
|
4
|
+
@apply flex w-full items-center py-1 select-none cursor-pointer text-lookbook-nav-text hover:bg-lookbook-nav-item-hover transition;
|
5
|
+
}
|
6
|
+
|
7
|
+
.nav-action-inner {
|
8
|
+
@apply relative flex items-center w-full;
|
9
|
+
}
|
10
|
+
|
11
|
+
.nav-toggle-icon {
|
12
|
+
@apply mr-1 text-lookbook-nav-toggle absolute -left-4;
|
13
|
+
}
|
14
|
+
}
|
15
|
+
}
|
@@ -1,87 +1,44 @@
|
|
1
1
|
module Lookbook
|
2
2
|
class Nav::Item::Component < Lookbook::BaseComponent
|
3
|
-
|
4
|
-
page: :file,
|
5
|
-
page_collection: :folder,
|
6
|
-
preview_collection: :folder,
|
7
|
-
preview: :layers,
|
8
|
-
example: :eye,
|
9
|
-
group: :eye,
|
10
|
-
collection: :folder
|
11
|
-
}.freeze
|
3
|
+
delegate :label, :depth, to: :node
|
12
4
|
|
13
|
-
|
5
|
+
attr_reader :node, :nav_id
|
14
6
|
|
15
|
-
def initialize(
|
16
|
-
|
17
|
-
nav_id:,
|
18
|
-
depth: 1,
|
19
|
-
collapse_singles: false,
|
20
|
-
**html_attrs
|
21
|
-
)
|
7
|
+
def initialize(node, nav_id:, **html_attrs)
|
8
|
+
@node = node
|
22
9
|
@nav_id = nav_id
|
23
|
-
@item = item
|
24
|
-
@depth = depth
|
25
|
-
@collapse_singles = collapse_singles
|
26
10
|
super(**html_attrs)
|
27
11
|
end
|
28
12
|
|
29
13
|
def id
|
30
|
-
"#{
|
14
|
+
"#{nav_id}-#{node.id}"
|
31
15
|
end
|
32
16
|
|
33
17
|
def left_pad
|
34
|
-
((
|
35
|
-
end
|
36
|
-
|
37
|
-
def href
|
38
|
-
if collapsed?
|
39
|
-
item.url_path
|
40
|
-
elsif !collection?
|
41
|
-
item.url_path
|
42
|
-
end
|
18
|
+
((depth - 1) * 12) + 24
|
43
19
|
end
|
44
20
|
|
45
21
|
def children
|
46
|
-
@children ||=
|
47
|
-
item.non_empty_items.map do |item|
|
48
|
-
lookbook_render Lookbook::Nav::Item::Component.new item,
|
49
|
-
nav_id: @nav_id,
|
50
|
-
depth: (@depth + 1),
|
51
|
-
collapse_singles: @collapse_singles
|
52
|
-
end
|
53
|
-
else
|
54
|
-
[]
|
55
|
-
end
|
56
|
-
end
|
57
|
-
|
58
|
-
def item
|
59
|
-
collapsed? ? @item.first : @item
|
22
|
+
@children ||= node.map { |node| render_item(node) }
|
60
23
|
end
|
61
24
|
|
62
25
|
def nav_icon
|
63
|
-
|
64
|
-
end
|
65
|
-
|
66
|
-
def collection?
|
67
|
-
@item.is_a? Lookbook::Collection
|
26
|
+
:folder
|
68
27
|
end
|
69
28
|
|
70
29
|
def children?
|
71
|
-
children.any?
|
30
|
+
children.any?
|
72
31
|
end
|
73
32
|
|
74
|
-
def
|
75
|
-
|
33
|
+
def render_item(node)
|
34
|
+
item_class = (node.type == :directory) ? Nav::Directory::Component : Nav::Entity::Component
|
35
|
+
lookbook_render item_class.new node, nav_id: nav_id
|
76
36
|
end
|
77
37
|
|
78
38
|
protected
|
79
39
|
|
80
40
|
def alpine_data
|
81
|
-
alpine_encode({
|
82
|
-
id: @item.id,
|
83
|
-
matchers: item.is_a?(Lookbook::Collection) ? nil : item.matchers
|
84
|
-
})
|
41
|
+
alpine_encode({id: node.id, matchers: []})
|
85
42
|
end
|
86
43
|
|
87
44
|
def alpine_component
|
@@ -19,7 +19,7 @@ module Lookbook
|
|
19
19
|
end
|
20
20
|
|
21
21
|
def self.escape_attribute_key
|
22
|
-
@escape_attribute_key ||= Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1") ? :escape_attributes : :escape
|
22
|
+
@escape_attribute_key ||= (Gem::Version.new(Rails.version) < Gem::Version.new("6.1.5.1")) ? :escape_attributes : :escape
|
23
23
|
end
|
24
24
|
end
|
25
25
|
end
|
@@ -14,19 +14,19 @@ module Lookbook
|
|
14
14
|
end
|
15
15
|
|
16
16
|
def lookup_entities
|
17
|
-
@target = Lookbook.previews.
|
17
|
+
@target = Lookbook.previews.find_example_by_path(params[:path])
|
18
18
|
if @target.present?
|
19
19
|
@preview = @target.preview
|
20
|
-
if params[:path] == @preview&.
|
21
|
-
redirect_to lookbook_inspect_path
|
20
|
+
if params[:path] == @preview&.path
|
21
|
+
redirect_to lookbook_inspect_path("#{params[:path]}/#{@preview.default_example.name}", params.permit!)
|
22
22
|
end
|
23
23
|
else
|
24
|
-
@preview = Lookbook.previews.
|
24
|
+
@preview = Lookbook.previews.find_by_path(params[:path])
|
25
25
|
if @preview.present?
|
26
|
-
|
27
|
-
redirect_to lookbook_inspect_path(
|
26
|
+
default_example = @preview.default_example
|
27
|
+
redirect_to lookbook_inspect_path(default_example.path, params.permit!) if default_example
|
28
28
|
else
|
29
|
-
@preview = Lookbook.previews.
|
29
|
+
@preview = Lookbook.previews.find_by_path(path_segments.slice(0, path_segments.size - 1).join("/"))
|
30
30
|
end
|
31
31
|
end
|
32
32
|
end
|
@@ -89,46 +89,21 @@ module Lookbook
|
|
89
89
|
end
|
90
90
|
|
91
91
|
preview_controller.params.permit!
|
92
|
-
@preview_params = preview_controller.params.to_h.select do |key, value|
|
93
|
-
!!@params.find { |param_tag| param_tag.name == key.to_s }
|
94
|
-
end
|
95
92
|
end
|
96
93
|
|
97
94
|
def inspector_data
|
98
95
|
return @inspector_data if @inspector_data.present?
|
99
96
|
|
100
|
-
|
101
|
-
preview_params: @preview_params,
|
102
|
-
path: params[:path]
|
103
|
-
}
|
104
|
-
|
105
|
-
preview = @preview
|
106
|
-
target_examples = @target.type == :group ? @target.examples : [@target]
|
107
|
-
|
108
|
-
examples = target_examples.map do |example|
|
109
|
-
render_args = @preview.render_args(example.name, params: preview_controller.params)
|
110
|
-
has_template = render_args[:template] != "view_components/preview"
|
97
|
+
rendered_examples = @target.examples.map do |example|
|
111
98
|
output = preview_controller.process(:render_example_to_string, @preview, example.name)
|
112
|
-
|
113
|
-
source_lang = has_template ? example.template_lang(render_args[:template]) : example.lang
|
114
|
-
|
115
|
-
example.define_singleton_method(:output, proc { output })
|
116
|
-
example.define_singleton_method(:source, proc { source })
|
117
|
-
example.define_singleton_method(:source_lang, proc { source_lang })
|
118
|
-
example
|
99
|
+
RenderedExample.new(example, output, preview_controller.params)
|
119
100
|
end
|
120
101
|
|
121
|
-
target = @target.type == :group ? @target : examples.find { |e| e.lookup_path == @target.lookup_path }
|
122
|
-
|
123
|
-
params_ref = @params
|
124
|
-
preview.define_singleton_method(:params, proc { params_ref })
|
125
|
-
|
126
102
|
@inspector_data ||= Lookbook::Store.new({
|
127
|
-
context:
|
128
|
-
preview: preview,
|
129
|
-
examples:
|
130
|
-
|
131
|
-
target: target,
|
103
|
+
context: Store.new({params: @params, path: params[:path]}),
|
104
|
+
preview: @preview,
|
105
|
+
examples: rendered_examples,
|
106
|
+
target: @target,
|
132
107
|
data: Lookbook.data,
|
133
108
|
app: Lookbook
|
134
109
|
})
|