npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@verkstedt/storybook-store-decorator

v1.2.1

Published

Provide a store decorator for storybookjs

Downloads

153

Readme

Store Decorator for Storybook

Scoped data provider for storybook stories. Add store objects to a global/scoped store and access their props from you're stories components.

installation

npm npm -i storybook-store-decorator

yarn yarn add storybook-store-decorator

usage

populate the store

storeObject must be on object

as a global decorator in .storybook/config.js

import withStoreDecorator from 'storybook-store-decorator'
...

addDecorator(withStoreDecorator({
  props: storeObject, // values for the store
  globalStore: true,  // sets the object as the global default one
  reset: true         // replace the store instead of merge the new values
}))

Using globalStore: true and reset: true will ensure, that oin every start of storybook, we start with an empty store into which ouer storeObject will be inserted.

as a scoped decorator in a [name].stories.js file

import withStoreDecorator from 'storybook-store-decorator'
...

storysOf('myStory', module)
  .addDecorator(withStoreDecorator({
    props: storeObject, // this values will be merged into the current store (the global store)
                        // this changes are available for 'storyA', 'storyB' and 'storyC'
  }))
  .add('storyA', () => <storyA />)
  .addDecorator(withStoreDecorator({
    props: storeObject, // this values will be merged into the current store
                        // (global store + previouse changes)
                        // this changes are just available for 'storyB' and 'storyC'
  }))
  .add('storyB', () => <storyB />)
  .add('storyC', () => <storyC />)

in an individual story:

import { useStoreWith } from 'storybook-store-decorator'
...

storysOf('myStory', module)
  .add('storyA', () => {
    useStoreWith({
      props:  storeObject, // this values will be merged into the current store
                           // this changes are just available for 'storyA'
    })
    return <storyA />
  })
  .add('storyB', () => <storyB />)

modifing the global store

As described before, scoped changes will just last the current story or storysOf() chain. Should you ever want to modify the global store set globalStore: true now you're props will be merged into the global store. Be aware, that this changes will be applyed when the decorator is actually called.

resetting a store

Setting reset: true will clear all entries from the store before merging the new props. The combination globalStore: true and reset: true which is used in the global decorator example ensures, that storybook starts with a clean new shop.

retrive a value from the store

Retrieves a prop from the storeObject

import { getProp } from 'storybook-store-decorator'
...

const prop = getProp('propName')