Link Search Menu Expand Document

Constructor

Sotries configure arguments passed to the component’s constructor with constructor.

Given a header class that looks like the following:

class HeaderComponent < ViewComponent::Base
  def initialize(tag, bold:)
    @tag = tag
    @bold = bold
  end
end

To render a HeaderComponent, use the constructor method.

class HeaderComponentStories < ViewComponent::Storybook::Stories
  story(:h1) do
    constructor("h1", bold: false)
  end
end

constructor supports positional and keyword arguments as well as optional arguments with default values.

Controls

constructor arguments also support controls making the values dynamicaly configurable in Storybook:

class HeaderComponentStories < ViewComponent::Storybook::Stories
  story(:h1) do
    constructor(text("h1"), bold: boolean(false))
  end
end

The list of Control options is described in Controls

Validation

ViewComponent Storybook validates that the constructor arguments match allowed arguments of the component constructor throwing a ViewComponent::Storybook::StoryConfig::ValidationError if there is a mismatch.

Each of these examples result in an validation exception:

class HeaderComponentStories < ViewComponent::Storybook::Stories
  story(:not_enough_positional_args) do
    constructor(bold: false)
  end

  story(:too_many_positional_args) do
    constructor("h1", "p", bold: false)
  end

  story(:missing_kwargs) do
    constructor("h1")
  end

  story(:extra_kwargs) do
    constructor("h1", bold: false, size: "2em")
  end
end

To view documentation for controls DSL (deprecated) see legacy_controls_dsl.