Image for post
Image for post

Announcing Storybook 3.4

Polymer, Image/Vue/Angular Storyshots, Multi-Hierarchy, & more!

Michael Shilman
Apr 25, 2018 · 6 min read

🎁 Polymer support

Image for post
Image for post
Storybook ❤ polymer! Get it going in your project in 2 minutes flat.
npm i -g @storybook/cli
cd my-polymer-project
getstorybook
npm run storybook

📸 Image snapshots

Image for post
Image for post
Visual differencing as implemented in Storyshots image snapshotting.
import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';

initStoryshots({ suite: 'Image storyshots', test: imageSnapshot() });

✨ StoryShots for Vue/Angular

import path from 'path';
import initStoryshots from '@storybook/addon-storyshots';
initStoryshots({
framework: 'vue',
configPath: path.join(__dirname, '.storybook'),
});

🌿 Multiple story hierarchies

Image for post
Image for post
Group your stories into visual sections in Storybook 3.4, as demonstrated here in Lonely Planet’s Backpack UI.
import { setOptions } from '@storybook/addon-options';setOptions({
hierarchySeparator: /\//,
hierarchyRootSeparator: /\|/,
});
storiesOf('Group1|path/to/component1')
.add('one', () => ...)
.add('another', () => ...)
storiesOf('Group1|path/to/component2')
.add(...)
storiesOf('Group2|component3')
.add(...)

📄 Storysource addon

Image for post
Image for post
yarn add --dev @storybook/addon-storysource
import '@storybook/addon-storysource/register';
module.exports = {
module: {
rules: [
{
test: /\.stories\.jsx?$/,
loaders: [require.resolve('@storybook/addon-storysource/loader')],
enforce: 'pre',
},
],
},
};

💥 And more!


📈 Onwards and upwards

Image for post
Image for post
Growth of monthly npm downloads across our supported frameworks, annotated with package release dates.
@9034725985 @aaronfullerton @abrahamgnz @adrukh @alexandermikuta @alfredo-delgado@alterx @anescobar1991 @arty-name @aseeto @avol-io @aymeric-duchein @benbakhar @chentsulin @christiandavis @clehnert-psl @cliedeman @cshell7 @danawhite @dangreenisrael @danielduan @davidkwan95@dependencies-bot @derekshull @dfdeagle47 @ersel @felipedeboni @fredyc @getsetbro @godban @gongreg @guylivni @hswolff @hypnosphi @igor-dv @javidjamae @jayandcatchfire @jdonor @jeffcarey @jonrimmer@juristr @kazupon @kevinsuttle @kiwka @kn0ll @kt3k @lachlanjc @m10l @markelog @matissjanis @mehandes @meros @metronom72 @mloughry @mnicole @mshaaban088 @mynnx @nblackburn @ndelangen @outspaced @pascalduez @paul42 @playfulcorgi @preya @primigenus @psimyn @punitgr @quramy @rhalff @richardbray @seberik @sec0ndhand @shilman @simon360 @sixmen @superol3g @sw-yx @telichkin @theneva@thomasbertet @tmeasday @tniezg @tsiq-swyx @vcarl @wuweiweiwu @x1c0 @yjcxy12 @zajn

🙌 Get it Now

npm i -g @storybook/cli
cd my-vue-react-rn-angular-or-polymer-project
getstorybook
npm run storybook

Storybook

The UI development environment you'll ♥️ to use.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store