@linkorb/storybook-template-story-loader NPM

storybook-template-story-loader

This addon for storybook allows to load multiple templates. \ It supports twig, handlebar, html, markdown templates.

Adding the package to an existing storybook project

To install addon:

npm install -D storybook-template-story-loader

yarn add -D storybook-template-story-loader

Storybook configuration for templates

Set the addon in the place you configure storybook like this:

import { AddStories, setConfigs } from 'storybook-template-story-loader';

const manifest = require('../public/build/manifest.json'); // twig manifest file

const options = {
  name: 'storybook name',
  manifest,
};

setConfigs(options);

const loadStories = () => {
  const templateData = require.context('../templates', true, /\.json$/);
  const templateTwigs = require.context('../templates', true, /\.twig$/);

  AddStories(templateTwigs, templateData, 'twig');
}

For handlebar template:

const loadStories = () => {
  const templateData = require.context('../src', true, /\.json$/);
  const templateHtml = require.context('../src', true, /\.html$/);
  const templateHandlebars = require.context('../src', true, /\.handlebars$/);

  AddStories(templateHtml);
  AddStories(templateHandlebars, templateData, 'handlebar');
}

const options = {
  name: 'storybook name',
};

setConfigs(options);

configure(loadStories, module);

Global Options

You can pass configuration object to set options.

import { AddStories, setConfigs } from 'storybook-template-story-loader';

const options = {
  ...
};

setConfigs(options);

options

Key	Description	Type	Default
name	name to display in the top left corner	String	''
url	URL for name in top left corner to link to	String	'#'
goFullScreen	show story component as full screen	Boolean	false
showStoriesPanel	display panel that shows a list of stories	Boolean	true
showAddonPanel	display panel that shows addon configurations	Boolean	true
showSearchBox	display floating search box to search through stories	String	false
addonPanelInRight	show addon panel as a vertical panel on the right	String	false
sortStoriesByKind	sorts stories	String	false
hierarchySeparator	regex for finding the hierarchy separator	String	null
hierarchyRootSeparator	regex for finding the hierarchy root separator	String	null
sidebarAnimations	sidebar tree animations	String	true
selectedAddonPanel	id to select an addon panel	String	undefined
enableShortcuts	The order of addons in the "Addon panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook	String	true
manifest	manifest object for twig template	String	{}

Adding stories

To add stories:

import { AddStories } from 'storybook-template-story-loader';

AddStories(templates, data, type);

Templates and data

const templates = require.context('../src', true, /\.html$/);
const data = require.context('../src', true, /\.json$/);

Types

supported types are handlebar, twig, html, md.

Publishing to npm

npm login
npm publish --access public

License

This project is licensed under the MIT License - see the LICENSE.md file for details

@storybook/html @storybook/addon-options @storybook/addon-backgrounds @storybook/addon-knobs @storybook/addon-notes path-parse twig showdown

@everything-registry/sub-chunk-550 @zalastax/nolb-_lin

1.0.0

5 years ago