Copy link to headline:@sit-onyx/storybook-utils
.
Copy link to headline:Changelog
A full changelog can be found here.
Copy link to headline:Installation
Install the npm package with your corresponding package manager:
Copy link to headline:Utilities
Copy link to headline:createPreview
Creates a default Storybook preview configuration for a project that uses onyx. Includes the following features:
- Improved controls (sorting and expanded controls so descriptions etc. are also shown in a single story)
- Setup for dark mode (including docs page). Requires addon
@vueless/storybook-dark-mode(opens in a new tab) (maintenance form of previousstorybook-dark-mode(opens in a new tab)) to be enabled in .storybook/main.ts file - Custom Storybook theme using onyx colors (light and dark mode)
- Configure viewports / breakpoints as defined by onyx
- Logs Vue emits as Storybook actions
- Source code transformer that formats the code snippets with prettier and adds imports for used icons, flags and onyx components
Copy link to headline:withVModelDecorator
Defines a custom decorator that will implement event handlers for all v-models. So the Storybook controls are updated live when the user interacts with the component.
Copy link to headline:createTheme
Creates a custom theme for Storybook that uses onyx colors. See the Storybook Theming docs(opens in a new tab) for further information.
tip
If you are using createPreview(), the custom light and dark theme will already be set up for you.
Copy link to headline:withNativeEventLogging
Allows logging and documentation for the passed native event listeners in Storybook. These will be documented in a extra "Relevant HTML events" section in the Storybook documentation.
Copy link to headline:createActionLoggerWrapper
Wraps the original component and adds Storybook action logging(opens in a new tab). This is useful for slotted child components that emit relevant events.
Returns a wrapped component, which can be used in place of the original component.