Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Create preview for components #52

Open
3 tasks
Tracked by #5
nicolas-brousse opened this issue Sep 9, 2021 · 4 comments · May be fixed by #55
Open
3 tasks
Tracked by #5

Create preview for components #52

nicolas-brousse opened this issue Sep 9, 2021 · 4 comments · May be fixed by #55
Labels
enhancement New feature or request
Milestone

Comments

@nicolas-brousse
Copy link
Member

nicolas-brousse commented Sep 9, 2021

  • Add previews for each component
  • In engine, add previews path to config.view_component.preview_paths config (https://viewcomponent.org/guide/previews.html)
  • Extra: have a light fake app that load previews and use lookbook gem
@nicolas-brousse nicolas-brousse added this to the v0.2 milestone Sep 9, 2021
@nicolas-brousse nicolas-brousse added the enhancement New feature or request label Sep 9, 2021
@nicolas-brousse nicolas-brousse linked a pull request Sep 11, 2021 that will close this issue
3 tasks
@Spone
Copy link
Collaborator

Spone commented Sep 16, 2021

When it's ready, do you think we should host the lookbook publicly somewhere? It would help documenting the available components.

@Spone Spone modified the milestones: v0.2, v0.3 Sep 16, 2021
@Spone Spone mentioned this issue Sep 16, 2021
25 tasks
@dlupu
Copy link

dlupu commented Jan 11, 2022

Hi guys,

Thanks for the great work you are doing!

I was wondering if you managed to create previews using Lookbook for the form components.
All form components require a form to be passed as argument, but I cannot figure out how to do this in Lookbook.

Thank you in advance for your feedback.
D

@nicolas-brousse
Copy link
Member Author

Hi @dlupu,

On one of my project I did the following to preview a form component with lookbook.

# spec/components/previews/form/preview.rb

require "view_component/form/test_helpers"

# @hidden
class Form::Preview < ViewComponent::Preview
  include ViewComponent::Form::TestHelpers

  protected

  def form_builder(object_name = nil, object = nil, options = {})
    My::FormBuilder.new(object_name, object, template, options)
  end

  def template
    lookup_context = ActionView::LookupContext.new(ActionController::Base.view_paths)

    ActionView::Base.new(lookup_context, {}, ActionController::Base.new)
  end
end

And for example to test TextAreaComponent I did:

class Form::TextAreaComponentPreview < Form::Preview
  layout "small_container"

  # Form components are used the same way than basic rails forms.
  #
  # ```erb
  # <%= form_with model: @user do |f| %>
  #   <%= f.text_area :name %>
  # <% end %>
  # ```
  #
  # See [https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-text_area](https://api.rubyonrails.org/classes/ActionView/Helpers/FormBuilder.html#method-i-text_area).
  def basic(method: :comment)
    render Form::TextAreaComponent.new(form_builder, nil, method)
  end
end

@boardfish
Copy link
Contributor

It could also be worth considering rendering via form helpers if that's an option, e.g.:

<%= fields do |f| %>
  <%= f.text_area :name %>
<% end %>

Setting the default form builder for previews might get interesting, though.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants