feat: Reintroduce the backgrounds addon

[lauriharpf]

Issue: #200 (part of the scope of that issue)

What I did

Reintroduced the backgrounds addon as a part of completing #200. Includes both storiesOf and CSF examples of usage.

How to test

Run the React Native examples under examples/native on the iOS and Android emulators. Experiment with the added examples:

• Background StoriesOf: Not sure if we want to keep this, given that storiesOf is apparently going away? However, it can be used to demo that this works with existing stories that use the storiesOf format.
• Background CSF: Same example in the CSF format.

Also check the modified "Backgrounds not configured" text (e.g. open button promise > finally > Addons > Backgrounds).

• Does this need a new example in examples/native? yes, added both CSF & StoriesOf examples
• Does this need an update to the documentation? yes; did a minor update to the @storybook/addon-ondevice-backgrounds README, but we should have much better docs & also confirm/add support for all of the web examples

Screen recording of functionality

background.mp4

Known issue: Reloading on iOS does not work

Edit: Never mind, did some changes in 73e783a to fix this.
Reloading the app (e.g. via the emulator or due to making changes) causes the controls in "Addons => Backgrounds" to disappear on iOS. It works correctly on Android. Don't know what is causing this. Any help in fixing is appreciated. See recording below:

bug.mov

[dannyhw]

Can you add an example of the parameter/decorator to the preview.js file? That would apply a global decorator and parameter.

Not entirely sure how necessary the decorator is but it would be something like this

examples/native/.storybook/preview.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';

export const decorators = [
  (StoryFn) => (
    <View style={styles.container}>
      <StoryFn />
    </View>
  ),
  withBackgrounds,
];
export const parameters = {
  my_param: 'anything',
  backgrounds: [
    { name: 'warm', value: 'hotpink', default: true },
    { name: 'cool', value: 'deepskyblue' },
  ],
};

const styles = StyleSheet.create({
  container: { padding: 8 },
});

[lauriharpf]

Can you add an example of the parameter/decorator to the preview.js file? That would apply a global decorator and parameter.

Thanks, did that 👍 . The only downside of having it globally is that the "backgrounds not configured" functionality (shown in the screen recording at ~0:30) is not visible in examples/native anymore.

[dannyhw]

Can you add an example of the parameter/decorator to the preview.js file? That would apply a global decorator and parameter.

Thanks, did that 👍 . The only downside of having it globally is that the "backgrounds not configured" functionality (shown in the screen recording at ~0:30) is not visible in examples/native anymore.

@lauriharpf ah ok, mostly I just wanted to make sure that decorators/params functionality was working. I think there might be a way to make that message come up though. Perhaps if you replace the backgrounds param with an empty list on one of the stories, not sure though. Either way I think the normal use case is to have this set globally so it's nice to have this example.

[dannyhw]

It's working great, impressive work! 🎉