Add splitpane repo

.eslintignore

@@ -1,4 +1,6 @@
 dist
 build
+packages/split-pane/lib
 coverage
 node_modules
+*.bundle.js

.gitignore

@@ -12,3 +12,4 @@ coverage/
 build
 packages/examples/automated-*
 yarn.lock
+packages/split-pane/lib

README.md

@@ -2,7 +2,7 @@
 [![Greenkeeper badge](https://badges.greenkeeper.io/storybooks/storybook.svg)](https://greenkeeper.io/)
 [![Build Status](https://travis-ci.org/storybooks/storybook.svg?branch=master)](https://travis-ci.org/storybooks/storybook)
 [![CodeFactor](https://www.codefactor.io/repository/github/storybooks/storybook/badge)](https://www.codefactor.io/repository/github/storybooks/storybook)
-[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)  
+[![BCH compliance](https://bettercodehub.com/edge/badge/storybooks/storybook)](https://bettercodehub.com/results/storybooks/storybook) [![codecov](https://codecov.io/gh/storybooks/storybook/branch/master/graph/badge.svg)](https://codecov.io/gh/storybooks/storybook)
 [![Storybook Slack](https://storybooks-slackin.herokuapp.com/badge.svg)](https://storybooks-slackin.herokuapp.com/)
 
 Storybook is a development environment for React UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

packages/split-pane/.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": ["es2015", "stage-0", "react"],
+  "plugins": [
+    "add-module-exports",
+    "transform-object-assign"
+  ]
+}

packages/split-pane/.scripts/gh-pages.sh

@@ -0,0 +1,13 @@
+#!/bin/bash
+
+set -e
+
+npm run prepublish
+rm -rf demo
+./node_modules/.bin/build-storybook -o demo
+cd demo
+git init
+git add .
+git commit -m 'Build Storybook'
+git push --force https://github.com/kadirahq/react-split-pane master:gh-pages
+rm -rf .git

packages/split-pane/.storybook/config.js

@@ -0,0 +1,5 @@
+import { configure } from '@kadira/storybook';
+
+configure(function () {
+  require('./stories/SplitPane');
+}, module);

packages/split-pane/.storybook/stories/SplitPane.js

@@ -0,0 +1,147 @@
+import React from 'react';
+import { storiesOf, action } from '@kadira/storybook';
+import Story from 'react-storybook-story';
+import 'react-storybook-story/styles.css';
+
+import SplitPane from '../../';
+import { nomargin, HSplit } from './_utils';
+
+const stories = storiesOf('SplitPane', module)
+  .addDecorator(nomargin);
+
+// ---
+
+stories.add('defaults', function (context) {
+  const info = `
+    Render with default properties.
+  `;
+
+  return (
+    <Story context={context} info={info}>
+      <SplitPane>
+        <div>pane-1</div>
+        <div>pane-2</div>
+      </SplitPane>
+    </Story>
+  );
+});
+
+stories.add('horizontal', function (context) {
+  const info = `
+    Split the container horizontally.
+  `;
+
+  return (
+    <Story context={context} info={info}>
+      <SplitPane split='horizontal'>
+        <div>pane-1</div>
+        <div>pane-2</div>
+      </SplitPane>
+    </Story>
+  );
+});
+
+[
+  { parent: 'horizontal', child: 'horizontal' },
+  { parent: 'horizontal', child: 'vertical' },
+  { parent: 'vertical', child: 'horizontal' },
+  { parent: 'vertical', child: 'vertical' },
+].forEach(splits => {
+  stories.add(`${splits.parent}-${splits.child}`, function (context) {
+    const info = `
+      Nest a ${splits.child} split inside a ${splits.parent} split.
+    `;
+
+    return (
+      <Story context={context} info={info}>
+        <SplitPane split={splits.parent}>
+          <div>pane-1</div>
+            <SplitPane split={splits.child}>
+              <div>pane-1</div>
+              <div>pane-2</div>
+            </SplitPane>
+        </SplitPane>
+      </Story>
+    );
+  });
+});
+
+stories.add('default-size', function (context) {
+  const info = `
+    Split the container with a default size.
+  `;
+
+  return (
+    <Story context={context} info={info}>
+      <SplitPane defaultSize={300}>
+        <div>pane-1</div>
+        <div>pane-2</div>
+      </SplitPane>
+    </Story>
+  );
+});
+
+stories.add('min-max-size', function (context) {
+  const info = `
+    Split the container with a minimum and maximum size limit.
+  `;
+
+  return (
+    <Story context={context} info={info}>
+      <SplitPane minSize={200} maxSize={400}>
+        <div>pane-1</div>
+        <div>pane-2</div>
+      </SplitPane>
+    </Story>
+  );
+});
+
+stories.add('disable-resize', function (context) {
+  const info = `
+    Split the container but do not allow resize.
+  `;
+
+  return (
+    <Story context={context} info={info}>
+      <SplitPane allowResize={false}>
+        <div>pane-1</div>
+        <div>pane-2</div>
+      </SplitPane>
+    </Story>
+  );
+});
+
+stories.add('event handlers', function (context) {
+  const info = `
+    The component supports \`drag-started\`, \`drag-finished\` and \`change\` events.
+  `;
+
+  return (
+    <Story context={context} info={info}>
+      <SplitPane
+        onChange={action('change')}
+        onDragStarted={action('started')}
+        onDragFinished={action('finished')}>
+        <div>pane-1</div>
+        <div>pane-2</div>
+      </SplitPane>
+    </Story>
+  );
+});
+
+stories.add('custom splitter', function (context) {
+  const info = `
+    Use a custom react component for splitter.
+  `;
+
+  return (
+    <Story context={context} propTables={[HSplit]} info={info}>
+      <SplitPane
+        split='horizontal'
+        resizerChildren={<HSplit header="Header" onClose={action('close')} />}>
+        <div>pane-1</div>
+        <div>pane-2</div>
+      </SplitPane>
+    </Story>
+  );
+});

packages/split-pane/.storybook/stories/_utils.js

@@ -0,0 +1,71 @@
+import React, { PropTypes } from 'react';
+
+export function nomargin(storyFn) {
+  const style = {
+    position: 'absolute',
+    overflow: 'auto',
+    top: 0, right: 0, bottom: 0, left: 0,
+  };
+  return <div style={style}>{storyFn()}</div>;
+}
+
+export function content(key) {
+  return (
+    <div key={key} style={{overflow: 'hidden', width: '100%', height: '100%'}}>
+      <p style={{margin: 10}}>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
+    </div>
+  );
+}
+
+export const HSplit = React.createClass({
+  render() {
+    const style = {
+      cursor: 'row-resize',
+      background: '#EEEEEE',
+      borderBottom: 'solid #E0E0E0 1px',
+      borderTop: 'solid #E0E0E0 1px',
+      width: '100%',
+    };
+
+    const headerStyle = {
+      color: '#888',
+      float: 'left',
+      fontFamily: 'sans-serif',
+      fontSize: '11px',
+      letterSpacing: '1px',
+      lineHeight: 1,
+      margin: 0,
+      padding: '8px 10px 8px 10px',
+      textTransform: 'uppercase',
+    };
+
+    const buttonStyle = {
+      background: 'transparent',
+      border: 'none',
+      color: '#888',
+      float: 'right',
+      fontFamily: 'sans-serif',
+      fontSize: '11px',
+      lineHeight: 1,
+      outline: 'none',
+      padding: '8px 15px 8px 10px',
+    };
+
+    const clearFix = {
+      clear: 'both',
+    };
+
+    return (
+      <div style={style}>
+        <h3 style={headerStyle}>{this.props.header}</h3>
+        <button style={buttonStyle} onClick={this.props.onClose}>✕</button>
+        <div style={clearFix}></div>
+      </div>
+    );
+  }
+});
+
+HSplit.propTypes = {
+  header: PropTypes.string.isRequired,
+  onClose: PropTypes.func.isRequired,
+};

packages/split-pane/.storybook/webpack.config.js

@@ -0,0 +1,9 @@
+const path = require('path');
+
+module.exports = {
+  module: {
+    loaders: [
+      { test: /\.css?$/, loaders: ['style', 'raw'], include: path.resolve(__dirname, '../') },
+    ],
+  },
+};

packages/split-pane/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Change Log
+
+## v1.4.0
+03-May-2016
+
+* Remove vendor prefixes to support better SSR support.
+* Also changed some code styles.

packages/split-pane/README.md

@@ -0,0 +1,91 @@
+# React Split Pane
+
+Split-Pane component built with [React](http://facebook.github.io/react), can be split vertically or horizontally.
+
+
+[![Build Status](https://img.shields.io/travis/tomkp/react-split-pane/master.svg?style=flat-square)](https://travis-ci.org/tomkp/react-split-pane)
+[![Coverage Status](https://img.shields.io/coveralls/tomkp/react-split-pane/master.svg?style=flat-square)](https://coveralls.io/r/tomkp/react-split-pane)
+
+
+Check out the [demo](http://react-split-pane.surge.sh/)
+
+
+```html
+   <SplitPane split="vertical" minSize={50} defaultSize={100}>
+       <div></div>
+       <div></div>
+   </SplitPane>
+```
+
+```html
+    <SplitPane split="vertical" minSize={50}>
+        <div></div>
+        <SplitPane split="horizontal">
+            <div></div>
+            <div></div>
+        </SplitPane>
+    </SplitPane>
+```
+
+### Primary pane
+
+By dragging 'draggable' surface you can change size of the first pane.
+The first pane keeps then its size while the second pane is resized by browser window.
+By default it is the left pane for 'vertical' SplitPane and the top pane for 'horizontal' SplitPane.
+If you want to keep size of the second pane and let the first pane to shrink or grow by browser window dimensions,
+set SplitPane prop `primary` to `second`. In case of 'horizontal' SplitPane the height of bottom pane remains the same.
+
+Resizing can be disabled by passing the `enableResizing` prop as `false`. Resizing is enabled by default.
+
+You can also set the size of the pane using the `size` prop. Note that a size set through props ignores the `defaultSize` and `minSize` properties.
+
+In this example right pane keeps its width 200px while user is resizing browser window.
+
+```html
+    <SplitPane split="vertical" defaultSize={200} primary="second">
+        <div></div>
+        <div></div>
+    </SplitPane>
+```
+
+### Persisting Positions
+
+Each SplitPane accepts an onChange function prop.  Used in conjunction with
+defaultSize and a persistence layer, you can ensure that your splitter choices
+survive a refresh of your app.
+
+For example, if you are comfortable with the trade-offs of localStorage, you
+could do something like the following:
+
+```html
+    <SplitPane split="vertical" minSize={50}
+               defaultSize={ localStorage.getItem('splitPos') }
+               onChange={ size => localStorage.setItem('splitPos', size) }>
+        <div></div>
+        <div></div>
+    </SplitPane>
+```
+
+Disclaimer: localStorage has a variety of performance trade-offs.  Browsers such
+as Firefox have now optimized localStorage use so that they will asynchronously
+initiate a read of all saved localStorage data for an origin once they know the
+page will load.  If the data has not fully loaded by the time code accesses
+localStorage, the code will cause the page's main thread to block until the
+database load completes.  When the main thread is blocked, no other JS code will
+run or layout will occur.  In multiprocess browsers and for users with fast
+disk storage, this will be less of a problem.  You *are* likely to get yelled at
+if you use localStorage.
+
+A potentially better idea is to use something like
+https://github.com/mozilla/localForage although hooking it up will be slightly
+more involved.  You are likely to be admired by all for judiciously avoiding
+use of localStorage.
+
+### Resizing callbacks
+
+If you need more control over resizing, SplitPane can notify you about when resizing started
+and when it ended through two callbacks: `onDragStarted` and `onDragFinished`.
+
+### Customise Dividers
+
+By default it gives a 5 pixel wide divider, but you can use your own elements for the divider with the `resizerChildren` property. Check the demo for a custom horizontal divider with a header and a button.

packages/split-pane/cover.js

@@ -0,0 +1,13 @@
+#!/usr/bin/env node
+
+const mochify = require('mochify');
+const istanbul = require('mochify-istanbul');
+
+mochify('./test/*.js', {
+  reporter: 'dot',
+  transform: ['babelify'],
+})
+  .plugin(istanbul, {
+    report: ['lcovonly'],
+  })
+  .bundle();