lookbook 0.2.0 → 0.2.1
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +23 -39
- data/lib/lookbook/preview.rb +3 -1
- data/lib/lookbook/version.rb +1 -1
- metadata +1 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 7f1b2263fb0949354da2aab14aeea2e2c0052810b6eb316249d9796718413614
|
|
4
|
+
data.tar.gz: 7423d9845627d153a1c46f1adc3fa4a14ed708d97f80a664b67c0e9cc0018528
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b821396d726636b7c633535543c1c4e718181b65809b85ae5b4ffee857914cb6910f554d28c0cced233d0e8419b60545b4115bda573d6b15b473fdf6c9d0fe24
|
|
7
|
+
data.tar.gz: 902e85067b97aa9371e9708aca1c14c2f73d928603755f63357e1644e7b078e515a2e979cdedfef0e37b206f930e9ac21f7ab15aeb138d2f8e3adc86f0dd1441
|
data/README.md
CHANGED
|
@@ -9,23 +9,22 @@
|
|
|
9
9
|
|
|
10
10
|
Lookbook gives [ViewComponent](http://viewcomponent.org/)-based projects a _ready-to-go_ development UI for navigating, inspecting and interacting with component previews.
|
|
11
11
|
|
|
12
|
-
It uses (and extends) the native [ViewComponent preview functionality](https://viewcomponent.org/guide/previews.html)
|
|
12
|
+
It uses (and extends) the native [ViewComponent preview functionality](https://viewcomponent.org/guide/previews.html), so you don't need to learn a new DSL or create any extra files to get up and running.
|
|
13
13
|
|
|
14
14
|
Lookbook uses [RDoc/Yard-style comment tags](https://rubydoc.info/gems/yard/file/docs/Tags.md) to extend the capabilities of ViewComponent's previews whilst maintaining compatability with the standard preview class format, so you can add or remove Lookbook at any time without having to rework your code.
|
|
15
15
|
|
|
16
|
-
> ⚠️ **PLEASE NOTE!** Lookbook is very much a **work in progress** at the moment. There may be breaking changes on point-releases before a 1.0 version is ready. ⚠️
|
|
17
|
-
|
|
18
16
|
|
|
19
17
|
|
|
20
18
|
### Features
|
|
21
19
|
|
|
22
|
-
-
|
|
23
|
-
-
|
|
24
|
-
-
|
|
25
|
-
-
|
|
26
|
-
-
|
|
27
|
-
-
|
|
28
|
-
-
|
|
20
|
+
- Tree-style navigation menu
|
|
21
|
+
- Live nav search/filter
|
|
22
|
+
- Resizable preview window for responsive testing
|
|
23
|
+
- Highlighted preview source code and HTML output
|
|
24
|
+
- Add notes via comments in the preview file (markdown supported)
|
|
25
|
+
- Auto-updating UI when component or preview files are updated
|
|
26
|
+
- Supports 'hidden' previews and examples
|
|
27
|
+
- Works with standard the ViewComponent preview system
|
|
29
28
|
|
|
30
29
|
## Lookbook demo
|
|
31
30
|
|
|
@@ -35,19 +34,21 @@ The [demo app repo](https://github.com/allmarkedup/lookbook-demo) contains instr
|
|
|
35
34
|
|
|
36
35
|
## Installing
|
|
37
36
|
|
|
38
|
-
Lookbook is
|
|
39
|
-
|
|
40
|
-
If you wish to play with it in it's current state you can include it directly from Github using the instructions below.
|
|
37
|
+
> ⚠️ **Please note:** Lookbook is still in the early stages of development and has not yet been well tested across a wide range of Rails/ViewComponent versions and setups. If you run into any problems please [open an issue](issues) with as much detail as possible. Thanks! ⚠️
|
|
41
38
|
|
|
42
39
|
### 1. Add as a dependency
|
|
43
40
|
|
|
44
41
|
In your `Gemfile` add:
|
|
45
42
|
|
|
46
43
|
```ruby
|
|
47
|
-
gem "lookbook"
|
|
44
|
+
gem "lookbook"
|
|
48
45
|
```
|
|
49
46
|
|
|
50
|
-
|
|
47
|
+
or
|
|
48
|
+
|
|
49
|
+
```bash
|
|
50
|
+
gem install lookbook
|
|
51
|
+
```
|
|
51
52
|
|
|
52
53
|
### 2. Mount the Lookbook engine
|
|
53
54
|
|
|
@@ -55,7 +56,6 @@ You then need to mount the Lookbook engine (at a path of your choosing) in your
|
|
|
55
56
|
|
|
56
57
|
```ruby
|
|
57
58
|
Rails.application.routes.draw do
|
|
58
|
-
# any other routes...
|
|
59
59
|
if Rails.env.development?
|
|
60
60
|
mount Lookbook::Engine, at: "/lookbook"
|
|
61
61
|
end
|
|
@@ -64,7 +64,7 @@ end
|
|
|
64
64
|
|
|
65
65
|
The `at` property determines the root URL that the Lookbook UI will be served at.
|
|
66
66
|
|
|
67
|
-
> If you would like to expose the Lookbook UI in production as well as in development, just remove the `if Rails.env.development?`
|
|
67
|
+
> If you would like to expose the Lookbook UI in production as well as in development, just remove the `if Rails.env.development?` condition from around the mount statement.
|
|
68
68
|
|
|
69
69
|
Then you can start your app as normal and navigate to `http://localhost:3000/lookbook` (or whatever mount path you specified) to view your component previews in the Lookbook UI.
|
|
70
70
|
|
|
@@ -72,7 +72,7 @@ Then you can start your app as normal and navigate to `http://localhost:3000/loo
|
|
|
72
72
|
|
|
73
73
|
You don't need to do anything special to create ViewComponent previews for Lookbook.
|
|
74
74
|
|
|
75
|
-
Lookbook will use the [ViewComponent configuration options](https://viewcomponent.org/api.html#configuration) for your project to find and render your components so you don't need to configure anything separately (unless you want to tweak the behaviour or look of Lookbook itself).
|
|
75
|
+
Lookbook will use the [ViewComponent configuration options](https://viewcomponent.org/api.html#configuration) for your project to find and render your components so you don't need to configure anything separately (unless you want to tweak the behaviour or look of Lookbook itself, of course).
|
|
76
76
|
|
|
77
77
|
> If you are new to ViewComponent development, checkout the [ViewComponent docs](https://viewcomponent.org/guide/) on how to get started developing your components and creating previews.
|
|
78
78
|
|
|
@@ -95,7 +95,7 @@ class MyClass
|
|
|
95
95
|
end
|
|
96
96
|
```
|
|
97
97
|
|
|
98
|
-
Some tags can also require additional arguments. Further
|
|
98
|
+
Some tags can also require additional arguments. Further information on the tags Lookbook uses are detailed in the docs below.
|
|
99
99
|
|
|
100
100
|
### 📝 Adding notes to previews
|
|
101
101
|
|
|
@@ -126,7 +126,7 @@ end
|
|
|
126
126
|
|
|
127
127
|
### 👀 Navigation customisation
|
|
128
128
|
|
|
129
|
-
Lookbook generates a nested navigation menu based on the file structure of your component preview directories. This can be customised in a number of ways.
|
|
129
|
+
Lookbook generates a nested navigation menu based on the file structure of your component preview directory (or directories). This can be customised in a number of ways.
|
|
130
130
|
|
|
131
131
|
#### Preview and example labels
|
|
132
132
|
|
|
@@ -150,9 +150,9 @@ In the example above, the preview and example would be displayed like this:
|
|
|
150
150
|
|
|
151
151
|
#### Excluding previews and/or examples from the navigation
|
|
152
152
|
|
|
153
|
-
Sometimes you may want a preview or an individual example
|
|
153
|
+
Sometimes you may want to temporarily hide a preview or an individual example from the Lookbook UI. This means that the preview or example will not show up in the navigation, but will still be accessible via it's URL. You can use the `@hidden` comment tag to manage this.
|
|
154
154
|
|
|
155
|
-
To **hide an entire preview**
|
|
155
|
+
To **hide an entire preview** include the `@hidden` tag in a class comment:
|
|
156
156
|
|
|
157
157
|
```ruby
|
|
158
158
|
# @hidden
|
|
@@ -161,7 +161,7 @@ class MyComponentPreview < ViewComponent::Preview
|
|
|
161
161
|
end
|
|
162
162
|
```
|
|
163
163
|
|
|
164
|
-
To **hide an individual example
|
|
164
|
+
To **hide an individual example** include the `@hidden` tag in the appropriate method comment:
|
|
165
165
|
|
|
166
166
|
```ruby
|
|
167
167
|
class MyComponentPreview < ViewComponent::Preview
|
|
@@ -186,20 +186,6 @@ class MyComponentPreview < ViewComponent::Preview
|
|
|
186
186
|
end
|
|
187
187
|
```
|
|
188
188
|
|
|
189
|
-
### 🔦 Viewing source code and rendered HTML output
|
|
190
|
-
|
|
191
|
-
Lookbook displays the source code of the current preview (or the contents of preview template, if one is being used), right underneath the rendered preview itself:
|
|
192
|
-
|
|
193
|
-
<img src=".github/assets/preview_source.png" width="400">
|
|
194
|
-
|
|
195
|
-
You can also inspect the HTML output of the rendered preview (without any of the layout cruft):
|
|
196
|
-
|
|
197
|
-
<img src=".github/assets/preview_output.png" width="400">
|
|
198
|
-
|
|
199
|
-
All code panels have a 'copy-to-clipboard' button at the top right of the panel, just click it to copy the un-highlighted code to your clipboard.
|
|
200
|
-
|
|
201
|
-
<img src=".github/assets/copy_to_clipboard.png" width="400">
|
|
202
|
-
|
|
203
189
|
## Configuration
|
|
204
190
|
|
|
205
191
|
Lookbook uses ViewComponent's configuration options for anything to do with previews, paths and general setup, so you won't need to duplicate any settings.
|
|
@@ -226,8 +212,6 @@ config.lookbook.listen_paths << Rails.root.join('app/other/directory')
|
|
|
226
212
|
|
|
227
213
|
Lookbook is very much a small hobby/side project at the moment. I'd love to hear from anyone who is interested in contributing but I'm terrible at replying to emails or messages, so don't be surprised if I take forever to get back to you. It's not personal 😜
|
|
228
214
|
|
|
229
|
-
However, I'm a frontend developer - not a Rails dev - so any thoughts, advice or PRs on how to improve the codebase will be always much appreciated. 🍻
|
|
230
|
-
|
|
231
215
|
### Developing on a local version of Lookbook
|
|
232
216
|
|
|
233
217
|
The quickest way to get a development version of Lookbook up and running is to use the [lookbook-demo](https://github.com/allmarkedup/lookbook-demo) app and link it to a local version of the Lookbook gem:
|
data/lib/lookbook/preview.rb
CHANGED
|
@@ -17,7 +17,9 @@ module Lookbook
|
|
|
17
17
|
|
|
18
18
|
def lookbook_examples
|
|
19
19
|
return @lookbook_examples if @lookbook_examples.present?
|
|
20
|
-
|
|
20
|
+
public_methods = public_instance_methods(false)
|
|
21
|
+
public_method_objects = code_object.meths.filter { |m| public_methods.include?(m.name) }
|
|
22
|
+
examples = public_method_objects.map { |m| PreviewExample.new(m.name.to_s, self) }
|
|
21
23
|
examples.reject!(&:hidden?)
|
|
22
24
|
@lookbook_examples ||= Lookbook.config.sort_examples ? examples.sort_by(&:label) : examples
|
|
23
25
|
end
|
data/lib/lookbook/version.rb
CHANGED