added docs

docs/BackgroundPanel.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+
+import Swatch from "./Swatch";
+import assign = require("object-assign");
+
+const style = {
+  font: {
+    fontFamily: "-apple-system,'.SFNSText-Regular', 'San Francisco', Roboto, 'Segoe UI', 'Helvetica Neue', 'Lucida Grande', sans-serif",
+    fontSize: "14px",
+  },
+};
+
+export interface BackgroundDetail {
+  name?: string;
+  value: string;
+};
+
+export interface BackgroundPanelProps {
+  channel: NodeJS.EventEmitter;
+}
+
+const defaultBackground: BackgroundDetail = {
+  name: "default",
+  value: "transparent",
+};
+
+const __html = `
+import { storiesOf } from "@kadira/storybook";
+import backgrounds from "react-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();
+
+export default class BackgroundPanel extends React.Component<BackgroundPanelProps, any> {
+
+  state = { backgrounds: [] };
+
+  constructor(props) {
+    super(props);
+    this.props.channel.on("background-set", backgrounds => this.setState({ backgrounds }));
+    this.props.channel.on("background-unset", backgrounds => this.setState({ backgrounds: [] }));
+  }
+
+  render () {
+
+    const { channel } = this.props;
+    const backgrounds: BackgroundDetail[] = [...this.state.backgrounds];
+
+    if (!backgrounds.length) {
+      return (
+        <div style={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 dangerouslySetInnerHTML={{ __html }} /></pre>
+        </div>
+      );
+    }
+
+    // add reset as last option
+    backgrounds.push(defaultBackground);
+    return (
+      <div style={{display: "inline-block", padding: "15px"}}>
+        {backgrounds.map((background, key) => (
+          <div key={key} style={{display: "inline-block", padding: "5px"}}>
+            <Swatch value={background.value} name={background.name} channel={channel} />
+          </div>
+        ))}
+      </div>
+    );
+  }
+};

docs/Swatch.tsx

@@ -0,0 +1,79 @@
+
+import * as React from "react";
+import assign = require("object-assign");
+
+const style = {
+  swatches: {
+    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",
+  },
+};
+
+export interface BackgroundItemProps {
+  value: string;
+  name?: string;
+  channel: NodeJS.EventEmitter;
+}
+
+export default class Swatch extends React.Component<BackgroundItemProps, any> {
+
+  state = { selected: null };
+
+  componentWillMount() {
+    this.setState({ selected: this.props.value });
+  }
+
+  public onBackgroundChange = () => {
+    const { value, channel } = this.props;
+    channel.emit("background", value);
+  }
+
+  render () {
+    return (
+      <div
+        style={assign({}, style.swatches, style.listStyle, style.hard)}
+        onClick={this.onBackgroundChange}
+      >
+        <div
+          style={assign({}, style.swatch, {
+            background: this.props.value,
+            "backgroundSize": "cover",
+            "backgroundPosition": "center",
+          })}
+        >
+        </div>
+        <div style={assign({}, style.listStyle, style.soft)}>
+          <h4 style={assign({ float: "left", fontWeight: "bold" }, style.font)}>
+            {this.props.name}:
+          </h4>
+          <h4 style={assign({ float: "right", fontWeight: "normal" }, style.font)}>
+            <em>{this.props.value}</em>
+          </h4>
+        </div>
+      </div>
+    );
+  }
+}

docs/__tests__/BackgroundPanel.tsx

@@ -0,0 +1,62 @@
+import * as React from "react"; // tslint:disable-line
+const EventEmitter = require("events"); // tslint:disable-line
+import { shallow } from "enzyme";
+import BackgroundPanel from "../BackgroundPanel";
+const TestUtils = require("react-addons-test-utils"); // tslint:disable-line
+
+const backgrounds = [
+  { name: "black", value: "#000000" },
+  { name: "secondary", value: "rgb(123,123,123)" },
+  { name: "tertiary", value: "rgba(123,123,123,.5)" },
+  { name: "An image", value: "url(http://placehold.it/350x150)" },
+];
+
+describe("Background Panel", () => {
+  it("should exist", () => {
+    const SpiedChannel = new EventEmitter();
+    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
+
+    expect(backgroundPanel).toBeDefined;
+  });
+
+  it("should have a default background value of transparent", () => {
+    const SpiedChannel = new EventEmitter();
+    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
+
+    expect(backgroundPanel.state().backgrounds.length).toBe(0);
+  });
+
+  it("should show setup instructions if no colors provided", () => {
+    const SpiedChannel = new EventEmitter();
+    const backgroundPanel = shallow(<BackgroundPanel channel={SpiedChannel}/>);
+
+    expect(backgroundPanel.html().match(/Setup Instructions/gmi).length).toBeGreaterThan(0);
+  });
+
+  // it("should accept colors through channel and render the correct swatches with a default swatch", () => {
+  //   const SpiedChannel = new EventEmitter();
+  //   const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel}/>);
+  //   SpiedChannel.emit("background-set", backgrounds);
+
+  //   expect(backgroundPanel.state.backgrounds[0].name).toBe(backgrounds[0].name);
+  //   expect(backgroundPanel.state.backgrounds[2].value).toBe(backgrounds[2].value);
+
+  //   //check to make sure the default bg was added
+  //   expect(backgroundPanel.state.backgrounds[4].value).toBe("transparent");
+  // });
+
+  it("should pass the event from swatch clicks through the provided channel", () => {
+    const SpiedChannel = new EventEmitter();
+    const backgroundPanel = TestUtils.renderIntoDocument(<BackgroundPanel channel={SpiedChannel}/>);
+    SpiedChannel.emit("background-set", backgrounds);
+
+    const spy = jest.fn();
+    SpiedChannel.on("background", spy);
+
+    TestUtils.Simulate.click(
+      TestUtils.scryRenderedDOMComponentsWithTag(backgroundPanel, "h4")[0] //an h4 is in the swatches
+    );
+
+    expect(spy).toBeCalledWith(backgrounds[0].value);
+  });
+});

docs/__tests__/Swatch.tsx

@@ -0,0 +1,49 @@
+import * as React from "react"; // tslint:disable-line
+const EventEmitter = require("events"); // tslint:disable-line
+import { shallow } from "enzyme";
+import Swatch from "../Swatch";
+const TestUtils = require("react-addons-test-utils");
+
+describe("Swatch", function() {
+  it("should exist", () => {
+    const SpiedChannel = new EventEmitter();
+    const swatch = shallow(<Swatch value="bar" name="foo" channel={SpiedChannel} />);
+
+    expect(swatch).toBeDefined();
+  });
+
+  it("should render the name of the swatch", () => {
+    const SpiedChannel = new EventEmitter();
+
+    const markup = shallow(
+      <Swatch value="bar" name="foo" channel={SpiedChannel} />
+    ).html();
+
+    expect(markup.match(/foo/gmi).length).toBe(1);
+  });
+
+  it("should render the value of the swatch and set it to be the background", () => {
+    const SpiedChannel = new EventEmitter();
+
+    const markup = shallow(
+      <Swatch value="bar" name="foo" channel={SpiedChannel} />
+    ).html();
+
+    expect(markup.match(/background:bar/gmi).length).toBe(1);
+    expect(markup.match(/bar/gmi).length).toBe(2);
+  });
+
+  it("should emit message on click", () => {
+    const SpiedChannel = new EventEmitter();
+    const swatch = TestUtils.renderIntoDocument(<Swatch value="#e6e6e6" name="Gray" channel={SpiedChannel} />);
+
+    const spy = jest.fn();
+    SpiedChannel.on('background', spy);
+
+    TestUtils.Simulate.click(
+      TestUtils.scryRenderedDOMComponentsWithTag(swatch, "div")[0]
+    );
+
+    expect(spy).toBeCalledWith("#e6e6e6");
+  });
+});

docs/iframe.html

@@ -0,0 +1,21 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <script>
+          if (window.parent !== window) {
+            window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+          }
+        </script>
+        <title>React Storybook</title>
+
+      </head>
+      <body>
+        <div id="root"></div>
+        <div id="error-display"></div>
+        <script src="static/preview.bundle.js"></script>
+      </body>
+    </html>
+

docs/index.html

@@ -0,0 +1,43 @@
+
+    <!DOCTYPE html>
+    <html>
+      <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+        <title>React Storybook</title>
+        <style>
+          /*
+            When resizing panels, the drag event breaks if the cursor
+            moves over the iframe. Add the 'dragging' class to the body
+            at drag start and remove it when the drag ends.
+           */
+          .dragging iframe {
+            pointer-events: none;
+          }
+
+          /* Styling the fuzzy search box placeholders */
+          .searchBox::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox::-moz-placeholder { /* Firefox 19+ */
+            color: #ddd;
+            font-size: 16px;
+          }
+
+          .searchBox:focus{
+            border-color: #EEE !important;
+          }
+
+          .btn:hover{
+            background-color: #eee
+          }
+        </style>
+      </head>
+      <body style="margin: 0;">
+        <div id="root"></div>
+        <script src="static/manager.bundle.js"></script>
+      </body>
+    </html>
+

docs/index.story.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"; // tslint:disable-line
+import { storiesOf } from "@kadira/storybook";
+import centered from "@kadira/react-storybook-decorator-centered";
+
+import backgrounds from "./index.tsx";
+
+storiesOf("First Component", module)
+  .addDecorator(centered)
+  .add("First Button", () => <button>Click me</button>)
+  ;
+
+
+storiesOf("Second Component", module)
+  .addDecorator(centered)
+  .addDecorator(backgrounds([
+    { name: "twitter", value: "#00aced" },
+    { name: "facebook", value: "#3b5998" },
+  ]))
+  .add("Second Button", () => <button>Click me</button>)
+  ;