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.
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
Previews can be organised into sub-directories as required and any organisational structure will be reflected in Lookbook’s navigation.
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 analagous to the concept of a ‘story’ in Storybook.
Lookbook will generate an isolated component preview for each scenario.
Annotations are comments added to preview classes that can be used to customise the preview experience and to provide extra information to end-users.
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.