Components
A component is a discrete, reusable ‘chunk’ of user interface such as a button or alert banner.
Lookbook doesn’t provide its own system for authoring components, but rather provides support for previewing components created using frameworks such as ViewComponent or Phlex, as well as for rendering previews of regular ActionView template partials.
Preview classes
In order to preview a component in Lookbook it needs an associated preview class.
Preview classes are created within the test/components/previews directory and extend the Lookbook::Preview (or ViewComponent::Preview) class.
Previews can be organised into sub-directories as required and any organisational structure will be reflected in Lookbook’s navigation.
Scenarios
Each public method defined in the preview class represents a unique scenario in which the target component is rendered using a particular set of arguments. This is roughly analogous to the concept of a ‘story’ in Storybook.
Lookbook will generate an isolated component preview for each scenario.
Annotations
Annotations are comments added to preview classes that can be used to customise the preview experience and to provide extra information to end-users.
Pages
Lookbook’s Markdown-powered pages system allows for creating long-form documentation that lives alongside (and is tightly integrated with) component previews.
Preview inspector
The preview inspector is Lookbook’s UI for viewing and interacting with component previews and associated information.
The inspector is made up of a number of tabbed panels that can be customised to fit the needs of your project.