@muban/storybook-addon-source
A storybook addon for Muban to view the source of your components in 4 panels.
Getting started
Install this package in your project:
yarn add @muban/storybook-addon-source
# or
npm i -S @muban/storybook-addon-sourceIn your project that uses storybook, add the addon to the config:
// .storybook/main.js
module.exports = {
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [
'@storybook/addon-essentials',
'@storybook/addon-links',
'@storybook/addon-storysource',
'@muban/storybook-addon-source', // add this to the list
],
};In your story files, make sure to export the hbs component and the source data parameter.
export default {
title: 'My Component',
component: require('./my-component'), // you can omit the .hbs extension
parameters: {
source: {
data: require('./data/data.yaml'), // point to the most extensive data file
},
},
};Then you should see 4 new panels in Storybook, for each of the source types:
-
template- your hbs file -
style- the scss file linked in your hbs -
script- the ts file linked in your hbs -
data- the data object