storybook-eol / addon-backgrounds

REPO/PACKAGE MOVED - A Storybook addon to customize the background of your preview

addon-backgrounds

Getting Started

npm i --save @storybook/addon-backgrounds

Then create a file called addons.js in your storybook config.

Add following content to it:

import '@storybook/addon-backgrounds/register';

Then write your stories like this:

import React from 'react';
import { storiesOf } from "@storybook/react";
import backgrounds from "@storybook/addon-backgrounds";

storiesOf("Button", module)
  .addDecorator(backgrounds([
    { name: "twitter", value: "#00aced", default: true },
    { name: "facebook", value: "#3b5998" },
  ]))
  .add("with text", () => <button>Click me</button>);

Development

This project is built using typescript and is tested with jest. To get started, clone this repo and run the following command:

$ npm install # install node deps

To run the project locally, run:

$ npm run storybook # for storybook testing
# (coming soon) $ npm run test-watch # for testing

To test the project run:

$ npm test

addon-backgrounds's Issues

Layout issue when background value is too long

Is this project maintained?

I'm not sure if this package is still maintained, Do you need help?

I'm happy to integrate this into the storybook monorepo if you'd like?

There's a 3.0.0 release coming, and I'd like to make sure addons are maintained, we're willing to help where we can!

Can you join us in the storybook slack?
https://storybooks-slackin.herokuapp.com/

That way we can keep you updated on the upcoming 3.0.0 release!

❤️ storybook team

Rename package to @storybooks/addon-backgrounds

Default bg should be the initial one to show

Right now, the default key prevents the default swatch from showing up.

I would think it makes more sense to have default: true make whatever background it is on be the first background to load.

Color resets to the first one when navigating stories

And I see a flash of the background from white to the selected color when I change the story
Is this the normal behaviour or I am missing something?

Thanks!

Storybook 3.0 support

Hey there! Love this Storybook addon. Unfortunately, I'm running into some problems when upgrading to Storybook 3.0.

Here are the errors from my Webpack build:

ERROR in ./~/react-storybook-addon-backgrounds/dist/register.js
Module not found: Error: Can't resolve '@kadira/storybook-addons' in '/Users/mrayzis/projects/mls/ui-packages/packages/react-components/node_modules/react-storybook-addon-backgrounds/dist'
 @ ./~/react-storybook-addon-backgrounds/dist/register.js 3:25-60
 @ ./~/react-storybook-addon-backgrounds/register.js
 @ ./.storybook/addons.js
 @ multi ./.storybook/addons.js ./~/@storybook/react/dist/server/config/polyfills.js ./~/@storybook/react/dist/client/manager/index.js

ERROR in ./~/react-storybook-addon-backgrounds/dist/index.js
Module not found: Error: Can't resolve '@kadira/storybook-addons' in '/Users/mrayzis/projects/mls/ui-packages/packages/react-components/node_modules/react-storybook-addon-backgrounds/dist'
 @ ./~/react-storybook-addon-backgrounds/dist/index.js 8:25-60
 @ ./stories/match-extensions.js
 @ ./stories \.js$
 @ ./.storybook/config.js
 @ multi ./~/@storybook/react/dist/server/config/polyfills.js ./~/@storybook/react/dist/server/config/globals.js (webpack)-hot-middleware/client.js?reload=true ./.storybook/config.js

To fix it, I think you just have to rename the packages from @kadira to their new namespace @storybook as outlined in the migration guide. Thanks!

Refactor into plain JS (remove typescript)

I want to merge this into the main repo, and introducing typescript into the main repo is a bad idea at this point.

Feature request: Improve background transition effect and swatch value output

I love this Storybook addon, and I would like to make a feature request...

I'm using the background addon as follows:

storiesOf('MyComponent', module)
    .addDecorator(backgrounds([
        {
            name: 'Cape Town',
            value: 'url(cape-town.jpg) no-repeat center center',
            default: true,
        },
        { name: 'None', value: 'transparent' },
        { name: 'Light Blue', value: 'lightblue' },
        { name: 'Gray', value: 'lightgray' },
        {
            name: 'Stripey',
            value: 'repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298 10px, #465298 20px )',
        },
    ]))
    .add('MyComponent', () => (
        <MyComponent />
    ));

With the above, I can for set a background image, or pin stripe background image using repeating gradients as a background.

However, with the center center on background, the transition makes switching from background to background rather weird. Maybe transition should be set to background-color only, as it tries to sort of swoop into its location? Perhaps add a param to turn the transition on/off.

Another observation I have made, is that the Swatch panel shows all the CSS for the given swatch item next to the name, so in my example above, for the 'Stripey' background I can see the entire CSS snippet output next to the name, and due to it wrapping, it looks rather ugly.

Take a peek at the attached image.

Move into main repo

Add the current color to the query string.

You can add the current selected color to the queryString.
See: https://getstorybook.io/docs/addons/api#storybookapi-setqueryparams-

Additionally you can save it to browser as well.

React warning

Hi,

When using this addon I get the following warning, is this normal?

Warning: Failed prop type: Invalid prop `context` of type `function` supplied to `Story`, expected `object`.

Not showing Background tab

Hi,
I just install the addon following the instructions on readme but nothing is happening, not even an error.

    "react": "15.0.1",
    "@kadira/storybook": "^2.21.0"
    "react-storybook-addon-backgrounds": "0.0.4",

rename to storybook-addon-backgrounds

Hey there!

Maintainer of storybook here, I find this addon pretty cool, perhaps you'd like it to become part of the core some day?
I'm building a mono-repo which will allow us to to better releases, and I'd welcome your team and repo!

I was hoping you'd be interested and possibly rename the package to storybook-addon-backgrounds. Perhaps one day we could autoload addons which are installed, and a common naming scheme would help with that 👍 .

Would love to see some getting started docs

And send a PR to here once you've a good version of this addon: https://github.com/kadirahq/getstorybook.io/blob/master/src/docs/addons/addon-gallery.js

Provide an way to specify the "default" Background

is it possible to specify the default background to use like:

backgrounds([
  { name: "twitter", value: "#00aced", default: true },
  { name: "facebook", value: "#3b5998" },
])

Support all background properties

Support value still, but also support:

• backgroundImage
• backgroundSize
• etc.

This way we can do things like create a grid:

http://codepen.io/anon/pen/VvPWvv