add addon background to monorepo

addons/background/README.md

@@ -0,0 +1,55 @@
+# addon-backgrounds
+
+[![Build Status](https://travis-ci.org/storybooks/addon-backgrounds.svg?branch=travis)](https://travis-ci.org/storybooks/addon-backgrounds)
+
+![React Storybook Screenshot](./.storybook/backgrounds.gif)
+
+### Getting Started
+
+```sh
+npm i --save @storybook/addon-backgrounds
+```
+
+Then create a file called `addons.js` in your storybook config.
+
+Add following content to it:
+
+```js
+import '@storybook/addon-backgrounds/register';
+```
+
+Then write your stories like this:
+
+```js
+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:
+
+```bash
+$ npm install # install node deps
+```
+
+To run the project locally, run:
+
+```bash
+$ npm run storybook # for storybook testing
+# (coming soon) $ npm run test-watch # for testing
+```
+
+To test the project run:
+
+```bash
+$ npm test
+```

addons/background/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@storybook/addon-backgrounds",
+  "version": "3.2.14",
+  "description": "A storybook addon to show different backgrounds for your preview",
+  "keywords": [
+    "addon",
+    "background",
+    "react",
+    "storybook"
+  ],
+  "homepage": "https://storybook.js.org",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "license": "MIT",
+  "author": "jbaxleyiii",
+  "main": "dist/index.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "prop-types": "^15.6.0"
+  },
+  "peerDependencies": {
+    "@storybook/addons": "^3.2.14",
+    "react": "*"
+  }
+}

addons/background/register.js

@@ -0,0 +1 @@
+require('./dist/register');

addons/background/src/BackgroundPanel.js

@@ -0,0 +1,125 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import addons from '@storybook/addons';
+import EventEmitter from 'events';
+
+import Swatch from './Swatch';
+
+const style = {
+  font: {
+    fontFamily:
+      "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
+    fontSize: '14px',
+  },
+};
+
+const defaultBackground = {
+  name: 'default',
+  value: 'transparent',
+};
+
+const instructionsHtml = `
+import { storiesOf } from "@storybook/react";
+import backgrounds from "@storybook/addon-backgrounds";
+
+storiesOf("First Component", module)
+  .addDecorator(backgrounds([
+    { name: "twitter", value: "#00aced" },
+    { name: "facebook", value: "#3b5998" },
+  ]))
+  .add("First Button", () => <button>Click me</button>);
+`.trim();
+
+const Instructions = () => (
+  <div style={Object.assign({ padding: '20px' }, style.font)}>
+    <h5 style={{ fontSize: '16px' }}>Setup Instructions</h5>
+    <p>
+      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.
+    </p>
+    <p>Below is an example of how to add the background decorator to your story definition.</p>
+    <pre
+      style={{
+        padding: '30px',
+        display: 'block',
+        background: 'rgba(19,19,19,0.9)',
+        color: 'rgba(255,255,255,0.95)',
+        marginTop: '15px',
+        lineHeight: '1.75em',
+      }}
+    >
+      <code>{instructionsHtml}</code>
+    </pre>
+  </div>
+);
+
+export default class BackgroundPanel extends Component {
+  constructor(props) {
+    super(props);
+
+    const { channel, api } = props;
+
+    // A channel is explicitly passed in for testing
+    if (channel) {
+      this.channel = channel;
+    } else {
+      this.channel = addons.getChannel();
+    }
+
+    this.state = { backgrounds: [] };
+
+    this.channel.on('background-set', backgrounds => {
+      this.setState({ backgrounds });
+      const currentBackground = api.getQueryParam('background');
+
+      if (currentBackground) {
+        this.setBackgroundInPreview(currentBackground);
+      } else if (backgrounds.filter(x => x.default).length) {
+        const defaultBgs = backgrounds.filter(x => x.default);
+        this.setBackgroundInPreview(defaultBgs[0].value);
+      }
+    });
+
+    this.channel.on('background-unset', () => {
+      this.setState({ backgrounds: [] });
+      api.setQueryParams({ background: null });
+    });
+  }
+
+  setBackgroundInPreview = background => this.channel.emit('background', background);
+
+  setBackgroundFromSwatch = background => {
+    this.setBackgroundInPreview(background);
+    this.props.api.setQueryParams({ background });
+  };
+
+  render() {
+    const backgrounds = [...this.state.backgrounds];
+
+    if (!backgrounds.length) return <Instructions />;
+
+    const hasDefault = backgrounds.filter(x => x.default).length;
+    if (!hasDefault) backgrounds.push(defaultBackground);
+
+    return (
+      <div style={{ display: 'inline-block', padding: '15px' }}>
+        {backgrounds.map(({ value, name }) => (
+          <div key={`${name} ${value}`} style={{ display: 'inline-block', padding: '5px' }}>
+            <Swatch value={value} name={name} setBackground={this.setBackgroundFromSwatch} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+}
+BackgroundPanel.propTypes = {
+  api: PropTypes.shape({
+    getQueryParam: PropTypes.func,
+    setQueryParams: PropTypes.func,
+  }).isRequired,
+  channel: PropTypes.instanceOf(EventEmitter),
+};
+BackgroundPanel.defaultProps = {
+  channel: undefined,
+};

addons/background/src/Swatch.js

@@ -0,0 +1,65 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+const style = {
+  swatches: {
+    backgroundColor: '#fff',
+    textAlign: 'center',
+    padding: '0',
+    border: '1px solid rgba(0,0,0,0.1)',
+    borderRadius: '4px',
+    cursor: 'pointer',
+    display: 'inline-block',
+    width: '175px',
+    verticalAlign: 'top',
+    wordWrap: 'break-word',
+  },
+  swatch: {
+    height: '80px',
+    borderRadius: '4px 4px 0 0',
+    transition: 'opacity 0.25s ease-in-out',
+    borderBottom: '1px solid rgba(0,0,0,0.1)',
+  },
+  listStyle: { listStyle: 'none' },
+  pushBottom: { marginBottom: '10px' },
+  pushLeft: { marginLeft: '10px' },
+  soft: { paddingLeft: '10px', paddingRight: '10px' },
+  hard: { padding: '0' },
+  flush: { margin: '0' },
+  font: {
+    fontFamily:
+      "-apple-system, '.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
+    fontSize: '14px',
+    wordBreak: 'break-word',
+  },
+};
+
+const Swatch = ({ name, value, setBackground }) => (
+  <button
+    style={Object.assign({}, style.swatches, style.listStyle, style.hard)}
+    onClick={() => setBackground(value)}
+    // Prevent focusing on mousedown
+    onMouseDown={event => event.preventDefault()}
+  >
+    <div
+      style={Object.assign({}, style.swatch, {
+        background: value,
+        backgroundSize: 'cover',
+        backgroundPosition: 'center',
+      })}
+    />
+    <div style={Object.assign({}, style.listStyle, style.soft)}>
+      <h4 style={Object.assign({ float: 'left', fontWeight: 'bold' }, style.font)}>{name}:</h4>
+      <h4 style={Object.assign({ float: 'right', fontWeight: 'normal' }, style.font)}>
+        <em>{value}</em>
+      </h4>
+    </div>
+  </button>
+);
+Swatch.propTypes = {
+  name: PropTypes.string.isRequired,
+  value: PropTypes.string.isRequired,
+  setBackground: PropTypes.func.isRequired,
+};
+
+export default Swatch;