Stories

Stories are Ruby classes that inherit from ViewComponent::Storybook::Stories. Stories are just an extension of ViewComponent Previews Stories can have one or more story defined as public methods:

# test/components/stories/header_component_stories.rb
class HeaderComponentStories < ViewComponent::Storybook::Stories
  def h1
    render HeaderComponent.new("h1")
  end

  def h2
    render HeaderComponent.new("h2")
  end
end.

Stories Title

By default the stories title derives from the stories class name. The class HeaderComponentStories above will have a title of “Header Component”. Configure a custom title with title:

# test/components/stories/header_component_stories.rb
class HeaderComponentStories < ViewComponent::Storybook::Stories
  title "H1 Headers Stories" 

   def h1
    render HeaderComponent.new("h1")
  end
end

Layout

Components are rendered in the default application layout. The layout for a set of stories is configured with layout:

# test/components/stories/header_component_stories.rb
class HeaderComponentStories < ViewComponent::Storybook::Stories
  layout "desktop"
  
   def h1
    render HeaderComponent.new("h1")
  end
end

Overriding Story Layout

Individual stories can define their own layout that overrides the stories setting:

# test/components/stories/header_component_stories.rb
class HeaderComponentStories < ViewComponent::Storybook::Stories
  layout "desktop"
  
  def h1
    render HeaderComponent.new("h1")
  end

  layout "mobile", only: :mobile_h1

  def mobile_h1
    render HeaderComponent.new("h1")
  end
end

No Layout

Setting layout to false renders the component in isolation:

# test/components/stories/header_component_stories.rb
class HeaderComponentStories < ViewComponent::Storybook::Stories
  layout "desktop"
  
  def h1
    render HeaderComponent.new("h1")
  end

  layout false, only: :no_layout_h1

  def no_layout_h1
    render HeaderComponent.new("h1")
  end
end

Default Story Layout

Stories layout is inherited by Stories classes. Create an AppplicationStories class to define a default stories layout:

# test/components/stories/application_stories.rb
class ApplicationStories < ViewComponent::Storybook::Stories
  layout "stories"

# test/components/stories/header_component_stories.rb
class HeaderComponentStories < ApplicationStories
  def h1
    render HeaderComponent.new("h1")
  end
end