Merge pull request #25 from storybooks/add-addonoptions-repo

Add addonoptions repo

packages/addon-options/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["es2015", "stage-0", "react"]
+}

packages/addon-options/.scripts/npm-prepublish.js

@@ -0,0 +1,6 @@
+var path = require('path');
+var shell = require('shelljs');
+var babel = ['node_modules', '.bin', 'babel'].join(path.sep);
+
+shell.rm('-rf', 'dist')
+shell.exec(babel + ' --ignore __tests__ src --out-dir dist')

packages/addon-options/.storybook/addons.js

@@ -0,0 +1,6 @@
+// Uncomment to register defaults
+// import '@kadira/storybook/addons';
+
+// Use the line below to register this addon
+// import '@kadira/storybook-addon-hello/register';
+import '../register';

packages/addon-options/.storybook/config.js

@@ -0,0 +1,14 @@
+import * as storybook from '@kadira/storybook';
+import { setOptions } from '../preview';
+
+setOptions({
+  name: 'CUSTOM-OPTIONS',
+  url: 'https://github.com/kadirahq/storybook-addon-options',
+  // goFullScreen: false,
+  // showLeftPanel: true,
+  showDownPanel: false,
+  // showSearchBox: false,
+  // downPanelInRight: false,
+});
+
+storybook.configure(() => require('./stories'), module);

packages/addon-options/.storybook/stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { storiesOf } from '@kadira/storybook';
+
+storiesOf('Hello', module)
+  .add('Hello World', () => (
+    <pre>Hello World</pre>
+  ))
+  .add('Hello Earth', () => (
+    <pre>Hello Earth</pre>
+  ));

packages/addon-options/CHANGELOG.md

@@ -0,0 +1,16 @@
+## Changelog
+
+### v1.0.2
+13 Mar 2017
+
+* Add typescript typings
+
+### v1.0.1
+26 Sep 2016
+
+* Update dev dependencies
+
+### v1.0.0
+23 Sep 2016
+
+* First stable release

packages/addon-options/README.md

@@ -0,0 +1,39 @@
+# Storybook UI Options Addon
+
+The Options addon can be used to set configure the Storybook UI. This addon works with both [React Storybook](https://github.com/kadirahq/react-storybook) and [React Native Storybook](https://github.com/kadirahq/react-native-storybook).
+
+![](docs/screenshot.png)
+
+## Getting Started
+
+First, install the addon
+
+```shell
+npm install -D @kadira/storybook-addon-options
+```
+
+Add this line to your `addons.js` file (create this file inside your storybook config directory if needed).
+
+```js
+import '@kadira/storybook-addon-options/register';
+```
+
+Import and use the `setOptions` function in your config.js file.
+
+```js
+import * as storybook from '@kadira/storybook';
+import { setOptions } from '@kadira/storybook-addon-options';
+
+setOptions({
+  name: 'CUSTOM-OPTIONS',
+  url: 'https://github.com/kadirahq/storybook-addon-options',
+  goFullScreen: false,
+  showLeftPanel: false,
+  showDownPanel: false,
+  showSearchBox: false,
+  downPanelInRight: false,
+  sortStoriesByKind: false,
+});
+
+storybook.configure(() => require('./stories'), module);
+```

packages/addon-options/manager.js

@@ -0,0 +1,2 @@
+const manager = require('./dist/manager');
+manager.init();

packages/addon-options/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@kadira/storybook-addon-options",
+  "version": "1.0.2",
+  "description": "Options addon for storybook",
+  "main": "preview.js",
+  "scripts": {
+    "deploy-storybook": "storybook-to-ghpages",
+    "prepublish": "node .scripts/npm-prepublish.js",
+    "storybook": "start-storybook -p 9001",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kadirahq/storybook-addon-options.git"
+  },
+  "keywords": [
+    "storybook"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/kadirahq/storybook-addon-options/issues"
+  },
+  "homepage": "https://github.com/kadirahq/storybook-addon-options#readme",
+  "devDependencies": {
+    "@kadira/storybook": "^2.19.0",
+    "@kadira/storybook-addons": "^1.5.0",
+    "@kadira/storybook-deployer": "^1.2.0",
+    "@kadira/storybook-ui": "^3.5.0",
+    "babel-cli": "^6.14.0",
+    "babel-preset-es2015": "^6.14.0",
+    "babel-preset-react": "^6.11.1",
+    "babel-preset-stage-0": "^6.5.0",
+    "react": "^15.3.1",
+    "react-dom": "^15.3.1",
+    "shelljs": "^0.7.4"
+  },
+  "peerDependencies": {
+    "@kadira/storybook-addons": "^1.5.0",
+    "react": "^0.14.7 || ^15.0.0",
+    "react-dom": "^0.14.7 || ^15.0.0"
+  },
+  "typings": "./storybook-addon-options.d.ts"
+}

packages/addon-options/preview.js

@@ -0,0 +1,3 @@
+const preview = require('./dist/preview');
+exports.setOptions = preview.setOptions;
+preview.init();

packages/addon-options/register.js

@@ -0,0 +1,3 @@
+// NOTE: loading addons using this file is deprecated!
+// please use manager.js and preview.js files instead
+require('./manager');

packages/addon-options/src/manager/index.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import addons from '@kadira/storybook-addons';
+import { ADDON_ID, EVENT_ID } from '../shared';
+
+// init function will be executed once when the storybook loads for the
+// first time. This is a good place to add channel listeners and panels.
+export function init() {
+  addons.register(ADDON_ID, api => {
+    const channel = addons.getChannel();
+    channel.on(EVENT_ID, data => {
+      api.setOptions(data.options);
+    });
+  });
+}

packages/addon-options/src/preview/index.js

@@ -0,0 +1,15 @@
+import addons from '@kadira/storybook-addons';
+import { EVENT_ID } from '../shared';
+
+// init function will be executed once when the storybook loads for the
+// first time. This is a good place to add global listeners on channel.
+export function init() {
+  // NOTE nothing to do here
+}
+
+// setOptions function will send Storybook UI options when the channel is
+// ready. If called before, options will be cached until it can be sent.
+export function setOptions(options) {
+  const channel = addons.getChannel();
+  channel.emit(EVENT_ID, { options });
+}

packages/addon-options/src/shared/index.js

@@ -0,0 +1,3 @@
+// addons, panels and events get unique names using a prefix
+export const ADDON_ID = 'kadirahq/storybook-addon-options';
+export const EVENT_ID = `${ADDON_ID}/options-event`;

packages/addon-options/storybook-addon-options.d.ts

@@ -0,0 +1,12 @@
+interface Options {
+  name?: string;
+  url?: string;
+  goFullScreen?: boolean;
+  showLeftPanel?: boolean;
+  showDownPanel?: boolean;
+  showSearchBox?: boolean;
+  downPanelInRight?: boolean;
+  sortStoriesByKind?: boolean;
+}
+
+export function setOptions(options: Options): void;