diff --git a/addons/ondevice-backgrounds/README.md b/addons/ondevice-backgrounds/README.md index 1b022e5ff1..66ddf2c158 100644 --- a/addons/ondevice-backgrounds/README.md +++ b/addons/ondevice-backgrounds/README.md @@ -2,8 +2,6 @@ Storybook Backgrounds Addon for react-native can be used to change background colors of your stories right from the device. -Storybook Backgrounds Addon Demo - ## Installation ```sh @@ -12,41 +10,16 @@ yarn add -D @storybook/addon-ondevice-backgrounds ## Configuration -Create a file called `rn-addons.js` in your storybook config. - -Add following content to it: - -```js -import '@storybook/addon-ondevice-backgrounds/register'; -``` - -Then import `rn-addons.js` next to your `getStorybookUI` call. +Then, add following content to `.storybook/main.js`: ```js -import './rn-addons'; +module.exports = { + addons: ['@storybook/addon-ondevice-backgrounds'], +}; ``` ## Usage -react-native users will have to import `storiesOf` from `@storybook/react-native` and are required to add the `withBackgrounds` decorator. - -Then write your stories like this: - -```js -import React from 'react'; -import { storiesOf } from '@storybook/react-native'; -import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; - -addDecorator(withBackgrounds); - -storiesOf('Button', module) - .addParameters({ - backgrounds: [ - { name: 'dark', value: '#222222' }, - { name: 'light', value: '#eeeeee', default: true }, - ], - }) - .add('with text', () => Click me); -``` +See the [example of using the Backgrounds addon with Component Story Format](../../examples/native/components/BackgroundExample/BackgroundCsf.stories.tsx). You can also run the [react-native app](../../examples/native) to see it in action. -See [web backgrounds addon](../backgrounds#usage) for detailed usage and the [crna-kitchen-sink app](../../examples/crna-kitchen-sink) for more examples. +The [web backgrounds addon documentation](https://storybook.js.org/docs/react/essentials/backgrounds) may also be useful, but the examples there have not been tested with React-Native Storybook. diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx index 4829d78b5f..80382bad1c 100644 --- a/addons/ondevice-backgrounds/src/BackgroundPanel.tsx +++ b/addons/ondevice-backgrounds/src/BackgroundPanel.tsx @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import { View, Text, StyleSheet } from 'react-native'; -import Events from '@storybook/core-events'; import { AddonStore } from '@storybook/addons'; import { API } from '@storybook/api'; import { StoryStore } from '@storybook/client-api'; @@ -10,33 +9,51 @@ import BackgroundEvents, { PARAM_KEY } from './constants'; import { Background } from './index'; const codeSample = ` -import { storiesOf } from '@storybook/react-native'; +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react-native'; import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; +import { Text, StyleSheet } from 'react-native'; -addDecorator(withBackgrounds); +const Background = () => ( + Change background color via Addons -> Background +); + +const styles = StyleSheet.create({ + text: { color: 'black' }, +}); -storiesOf('First Component', module) - .addParameters({ +const BackgroundMeta: ComponentMeta = { + title: 'Background CSF', + component: Background, + decorators: [withBackgrounds], + parameters: { backgrounds: [ { name: 'warm', value: 'hotpink', default: true }, { name: 'cool', value: 'deepskyblue' }, ], - }) - .add("First Button", () => ); + }, +}; + +export default BackgroundMeta; + +type BackgroundStory = ComponentStory; + +export const Basic: BackgroundStory = () => ; `.trim(); const Instructions = () => ( - Setup Instructions - + Setup Instructions + Please add the background decorator definition to your story. The background decorate accepts an array of items, which should include a name for your color (preferably the css class name) and the corresponding color / image value. - - Below is an example of how to add the background decorator to your story definition. + + Below is an example of how to add the background decorator to your story definition. Long + press the example to copy it. - {codeSample} + {codeSample} ); @@ -53,32 +70,20 @@ interface BackgroundPanelState { } export default class BackgroundPanel extends Component { - componentDidMount() { - this.props.channel.on(Events.SELECT_STORY, this.onStorySelected); - } - - componentWillUnmount() { - this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected); - } - setBackgroundFromSwatch = (background: string) => { this.props.channel.emit(BackgroundEvents.UPDATE_BACKGROUND, background); }; - onStorySelected = (selection: Selection) => { - this.setState({ selection }); - }; - render() { const { active, api } = this.props; - if (!active || !this.state) { + if (!active) { return null; } - const story = api - .store() - .getStoryAndParameters(this.state.selection.kind, this.state.selection.name); + const store = api.store(); + const storyId = store.getSelection().storyId; + const story = store.fromId(storyId); const backgrounds: Background[] = story.parameters[PARAM_KEY]; return ( @@ -99,4 +104,5 @@ export default class BackgroundPanel extends Component ( @@ -8,9 +8,17 @@ export const decorators = [ ), + withBackgrounds, ]; -export const parameters = { my_param: 'anything' }; +export const parameters = { + my_param: 'anything', + backgrounds: [ + { name: 'plain', value: 'white', default: true }, + { name: 'warm', value: 'hotpink' }, + { name: 'cool', value: 'deepskyblue' }, + ], +}; const styles = StyleSheet.create({ - container: { padding: 8 }, + container: { padding: 8, flex: 1 }, }); diff --git a/examples/native/components/BackgroundExample/Background.stories.tsx b/examples/native/components/BackgroundExample/Background.stories.tsx new file mode 100644 index 0000000000..92a281b24f --- /dev/null +++ b/examples/native/components/BackgroundExample/Background.stories.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import { addDecorator, storiesOf } from '@storybook/react-native'; +import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; +import { Text } from 'react-native'; + +// Remember to also include '@storybook/addon-ondevice-backgrounds' in your addons config: see /examples/native/.storybook/main.js +addDecorator(withBackgrounds); + +storiesOf('Background StoriesOf', module) + .addParameters({ + backgrounds: [ + { name: 'warm', value: 'hotpink', default: true }, + { name: 'cool', value: 'deepskyblue' }, + ], + }) + .add('Basic', () => Change background color via Addons -> Background); diff --git a/examples/native/components/BackgroundExample/BackgroundCsf.stories.tsx b/examples/native/components/BackgroundExample/BackgroundCsf.stories.tsx new file mode 100644 index 0000000000..799c3b6ab6 --- /dev/null +++ b/examples/native/components/BackgroundExample/BackgroundCsf.stories.tsx @@ -0,0 +1,30 @@ +import React from 'react'; +import { ComponentStory, ComponentMeta } from '@storybook/react-native'; +import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds'; +import { Text, StyleSheet } from 'react-native'; + +const Background = () => ( + Change background color via Addons -> Background +); + +const styles = StyleSheet.create({ + text: { color: 'black' }, +}); + +const BackgroundMeta: ComponentMeta = { + title: 'Background CSF', + component: Background, + decorators: [withBackgrounds], + parameters: { + backgrounds: [ + { name: 'warm', value: 'hotpink', default: true }, + { name: 'cool', value: 'deepskyblue' }, + ], + }, +}; + +export default BackgroundMeta; + +type BackgroundStory = ComponentStory; + +export const Basic: BackgroundStory = () => ; diff --git a/examples/native/package.json b/examples/native/package.json index 1658bdd6b8..27a56716e5 100644 --- a/examples/native/package.json +++ b/examples/native/package.json @@ -32,6 +32,7 @@ "@react-native-community/slider": "^3.0.3", "@storybook/addon-actions": "^6.3.1", "@storybook/addon-links": "^6.3.1", + "@storybook/addon-ondevice-backgrounds": "^6.0.0-alpha.0", "@storybook/addon-ondevice-controls": "^6.0.0-alpha.0", "@storybook/addons": "^6.3.1", "@storybook/react-native": "^6.0.0-alpha.0",