From 80f5c60dd9c0e78ea3eeaa43cdc956ddb61546a5 Mon Sep 17 00:00:00 2001
From: David Manning <dlmanning@me.com>
Date: Thu, 1 Oct 2015 15:37:13 -0700
Subject: [PATCH] initial commit

---
 .babelrc           |   8 +
 .eslintrc          |   5 +
 .gitignore         |   2 +
 .npmignore         |   3 +
 README.md          |  78 +++++++++
 index.js           |   1 +
 package.json       |  33 ++++
 src/container.js   |  25 +++
 src/index.js       |   2 +
 src/item.js        |  34 ++++
 test/dev-server.js |  32 ++++
 test/index.html    |  13 ++
 test/monkey.js     |   9 +
 test/normalize.css | 424 +++++++++++++++++++++++++++++++++++++++++++++
 test/style.css     |   8 +
 test/test.js       |  53 ++++++
 webpack.config.js  |  32 ++++
 17 files changed, 762 insertions(+)
 create mode 100644 .babelrc
 create mode 100644 .eslintrc
 create mode 100644 .gitignore
 create mode 100644 .npmignore
 create mode 100644 README.md
 create mode 100644 index.js
 create mode 100644 package.json
 create mode 100644 src/container.js
 create mode 100644 src/index.js
 create mode 100644 src/item.js
 create mode 100644 test/dev-server.js
 create mode 100644 test/index.html
 create mode 100644 test/monkey.js
 create mode 100644 test/normalize.css
 create mode 100644 test/style.css
 create mode 100644 test/test.js
 create mode 100644 webpack.config.js

diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..b3ec802
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,8 @@
+{
+  "optional": [
+    "es7.objectRestSpread"
+  ],
+  "ignore": [
+    "node_modules"
+  ]
+}
diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..ca66403
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,5 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["standard", "standard-react"],
+  "env": { "browser": true, "node": true }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..9b26ed0
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,2 @@
+node_modules
+lib
\ No newline at end of file
diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..6e92ac0
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,3 @@
+src
+test
+webpack.config.js
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..1533270
--- /dev/null
+++ b/README.md
@@ -0,0 +1,78 @@
+# WARNING: Don't use this unless you know your environment supports CSS Grid Layout!
+
+## react-css-grid-layout
+
+React components for wrapping your other react components in [CSS Grid Layout](http://www.w3.org/TR/css-grid-1/) inline.
+
+### Installation
+
+`npm install react-css-grid-layout`
+
+### Quick Start
+
+Maybe do something like this:
+
+```javascript
+import React from 'react'
+import { GridContainer, GridItem } from '../src'
+
+export default function Layout () {
+  return (
+    <GridContainer rowTemplate='100px 1fr 1fr'
+                   columnTemplate=`300px 25px 300px`
+                   style={{ height: '100%' }}>
+      <GridItem rows='2 / 3' columns='3 / 4'>
+        <p>Content</p>
+      </GridItem>
+      <GridItem rows='1 / 4' columns='1 / 2' style={{ overflowY: 'scroll' }}>
+        <h1>Sidebar</h1>
+      </GridItem>
+    </GridContainer>
+  )
+}
+```
+
+### API
+
+#### `<GridContainer />`
+
+#### props (all optional)
+
+Most of the properties are just one-to-one mappings onto the CSS properties. See [Resources](#resources) for more information on using the spec.
+
+|Component Property | CSS property|
+|-------------------|-------------|
+|`rowTemplate`: *string* | grid-template-rows|
+|`columnTemplate`: *string* | grid-template-columns|
+|`areasTemplate`: *string* | grid-area-templates|
+
+
+`style`: *object*
+
+Will be added to the inline styles of the `<div>` that surrounds your children. Any property you pass will override those set by `react-css-grid-layout`.
+
+#### `<GridItem />`
+
+#### props (all optional)
+
+Most of the properties are just one-to-one mappings onto the CSS properties.
+
+|Component Property | CSS property|
+|-------------------|-------------|
+|`area`: *string* | grid-area   |
+|`rowStart`: *number* | grid-row-start |
+|`rowEnd`: *number* | grid-row-end |
+|`rows`: *string* | grid-row |
+|`columnStart`: *number* | grid-column-start |
+|`columnEnd`: *number* | grid-column-end |
+|`columns`: *string* | grid-column |
+
+`style`: *object*
+
+Will be added to the inline styles of the `<div>` that surrounds your children. Any property you pass will override those set by `react-css-grid-layout`.
+
+### <a name="resources">Resources</a> for information about CSS Grid Layout
+
+* [The Specification](http://www.w3.org/TR/css-grid-1/)
+* [The future of layout with CSS: Grid Layouts](https://hacks.mozilla.org/2015/09/the-future-of-layout-with-css-grid-layouts/)
+* [Grid by Example: simple usage examples for the CSS3 Grid Layout Module](http://gridbyexample.com/)
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..ce914ea
--- /dev/null
+++ b/index.js
@@ -0,0 +1 @@
+module.exports = require('./lib')
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..d0a5e2d
--- /dev/null
+++ b/package.json
@@ -0,0 +1,33 @@
+{
+  "name": "react-css-grid-layout",
+  "version": "1.0.0",
+  "description": "The CSS Grid Layout wrapped in React components",
+  "main": "index.js",
+  "scripts": {
+    "test": "node test/dev-server.js",
+    "prepublish": "babel src --out-dir lib"
+  },
+  "author": "David Manning",
+  "license": "ISC",
+  "dependencies": {},
+  "devDependencies": {
+    "babel": "^5.8.23",
+    "babel-eslint": "^4.1.3",
+    "babel-loader": "^5.3.2",
+    "babel-plugin-react-transform": "^1.1.1",
+    "babel-runtime": "^5.8.25",
+    "ecstatic": "^1.0.1",
+    "eslint": "^1.5.1",
+    "eslint-config-standard": "^4.4.0",
+    "eslint-config-standard-react": "^1.1.0",
+    "eslint-plugin-react": "^3.5.0",
+    "eslint-plugin-standard": "^1.3.1",
+    "express": "^4.13.3",
+    "react": "^0.14.0-rc1",
+    "react-dom": "^0.14.0-rc1",
+    "react-transform-hmr": "^1.0.1",
+    "webpack": "^1.12.2",
+    "webpack-dev-middleware": "^1.2.0",
+    "webpack-hot-middleware": "^2.3.0"
+  }
+}
diff --git a/src/container.js b/src/container.js
new file mode 100644
index 0000000..7f9cf2f
--- /dev/null
+++ b/src/container.js
@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+
+export default class GridContainer extends Component {
+  render () {
+    const { rowTemplate, columnTemplate, areasTemplate } = this.props
+
+    const style = {
+      display: 'grid',
+      gridTemplateRows: rowTemplate,
+      gridTemplateColumns: columnTemplate,
+      gridTemplateAreas: areasTemplate,
+      ...this.props.style
+    }
+
+    return <div style={style}>{this.props.children}</div>
+  }
+}
+
+GridContainer.propTypes = {
+  rowTemplate: React.PropTypes.string,
+  columnTemplate: React.PropTypes.string,
+  areasTemplate: React.PropTypes.string,
+  children: React.PropTypes.node,
+  style: React.PropTypes.object
+}
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 0000000..5ba0aac
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,2 @@
+export { default as GridContainer } from './container'
+export { default as GridItem } from './item'
diff --git a/src/item.js b/src/item.js
new file mode 100644
index 0000000..a31ba3a
--- /dev/null
+++ b/src/item.js
@@ -0,0 +1,34 @@
+import React, { Component } from 'react'
+
+export default class GridItem extends Component {
+  render () {
+    const { rowStart, rowEnd, columnStart, columnEnd } = this.props
+
+    const {
+      columns = `${columnStart} / ${columnEnd}`,
+      rows = `${rowStart} / ${rowEnd}`,
+      area
+    } = this.props
+
+    const style = {
+      gridColumn: columns,
+      gridRow: rows,
+      gridArea: area,
+      ...this.props.style
+    }
+
+    return <div style={style}>{this.props.children}</div>
+  }
+}
+
+GridItem.propTypes = {
+  area: React.PropTypes.string,
+  rowStart: React.PropTypes.number,
+  rowEnd: React.PropTypes.number,
+  columnStart: React.PropTypes.number,
+  columnEnd: React.PropTypes.number,
+  columns: React.PropTypes.string,
+  rows: React.PropTypes.string,
+  children: React.PropTypes.node,
+  style: React.PropTypes.object
+}
diff --git a/test/dev-server.js b/test/dev-server.js
new file mode 100644
index 0000000..5aaaf19
--- /dev/null
+++ b/test/dev-server.js
@@ -0,0 +1,32 @@
+'use strict'
+
+// const path = require('path')
+const express = require('express')
+const webpack = require('webpack')
+const ecstatic = require('ecstatic')
+const config = require('../webpack.config.js')
+
+const app = express()
+const compiler = webpack(config)
+
+app.use(require('webpack-dev-middleware')(compiler, {
+  noInfo: true,
+  publicPath: config.output.publicPath
+}))
+
+app.use(require('webpack-hot-middleware')(compiler))
+
+// app.get('*', function (req, res) {
+//   res.sendFile(path.join(__dirname, 'test', 'index.html'))
+// })
+
+app.use(ecstatic({ root: __dirname, cache: 0 }))
+
+app.listen(8080, 'localhost', function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+
+  console.log('Listening at http://localhost:8080')
+})
diff --git a/test/index.html b/test/index.html
new file mode 100644
index 0000000..5cb8e33
--- /dev/null
+++ b/test/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Test</title>
+    <link rel="stylesheet" href="normalize.css" media="screen" title="no title" charset="utf-8">
+    <link rel="stylesheet" href="style.css" media="screen" title="no title" charset="utf-8">
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="bundle.js" charset="utf-8"></script>
+  </body>
+</html>
diff --git a/test/monkey.js b/test/monkey.js
new file mode 100644
index 0000000..3af24f0
--- /dev/null
+++ b/test/monkey.js
@@ -0,0 +1,9 @@
+import cssProperty from 'react/lib/CSSProperty.js'
+
+cssProperty.isUnitlessNumber = {
+  ...cssProperty.isUnitlessNumber,
+  gridRowStart: true,
+  gridRowEnd: true,
+  gridColumnStart: true,
+  gridColumnEnd: true
+}
diff --git a/test/normalize.css b/test/normalize.css
new file mode 100644
index 0000000..5e5e3c8
--- /dev/null
+++ b/test/normalize.css
@@ -0,0 +1,424 @@
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+
+/**
+ * 1. Set default font family to sans-serif.
+ * 2. Prevent iOS and IE text size adjust after device orientation change,
+ *    without disabling user zoom.
+ */
+
+html {
+  font-family: sans-serif; /* 1 */
+  -ms-text-size-adjust: 100%; /* 2 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+}
+
+/**
+ * Remove default margin.
+ */
+
+body {
+  margin: 0;
+}
+
+/* HTML5 display definitions
+   ========================================================================== */
+
+/**
+ * Correct `block` display not defined for any HTML5 element in IE 8/9.
+ * Correct `block` display not defined for `details` or `summary` in IE 10/11
+ * and Firefox.
+ * Correct `block` display not defined for `main` in IE 11.
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+  display: block;
+}
+
+/**
+ * 1. Correct `inline-block` display not defined in IE 8/9.
+ * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
+ */
+
+audio,
+canvas,
+progress,
+video {
+  display: inline-block; /* 1 */
+  vertical-align: baseline; /* 2 */
+}
+
+/**
+ * Prevent modern browsers from displaying `audio` without controls.
+ * Remove excess height in iOS 5 devices.
+ */
+
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+
+/**
+ * Address `[hidden]` styling not present in IE 8/9/10.
+ * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
+ */
+
+[hidden],
+template {
+  display: none;
+}
+
+/* Links
+   ========================================================================== */
+
+/**
+ * Remove the gray background color from active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * Improve readability of focused elements when they are also in an
+ * active/hover state.
+ */
+
+a:active,
+a:hover {
+  outline: 0;
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
+ */
+
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+
+/**
+ * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
+ */
+
+b,
+strong {
+  font-weight: bold;
+}
+
+/**
+ * Address styling not present in Safari and Chrome.
+ */
+
+dfn {
+  font-style: italic;
+}
+
+/**
+ * Address variable `h1` font-size and margin within `section` and `article`
+ * contexts in Firefox 4+, Safari, and Chrome.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/**
+ * Address styling not present in IE 8/9.
+ */
+
+mark {
+  background: #ff0;
+  color: #000;
+}
+
+/**
+ * Address inconsistent and variable font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` affecting `line-height` in all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sup {
+  top: -0.5em;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove border when inside `a` element in IE 8/9/10.
+ */
+
+img {
+  border: 0;
+}
+
+/**
+ * Correct overflow not hidden in IE 9/10/11.
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * Address margin not present in IE 8/9 and Safari.
+ */
+
+figure {
+  margin: 1em 40px;
+}
+
+/**
+ * Address differences between Firefox and other browsers.
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+}
+
+/**
+ * Contain overflow in all browsers.
+ */
+
+pre {
+  overflow: auto;
+}
+
+/**
+ * Address odd `em`-unit font size rendering in all browsers.
+ */
+
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * Known limitation: by default, Chrome and Safari on OS X allow very limited
+ * styling of `select`, unless a `border` property is set.
+ */
+
+/**
+ * 1. Correct color not being inherited.
+ *    Known issue: affects color of disabled elements.
+ * 2. Correct font properties not being inherited.
+ * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  color: inherit; /* 1 */
+  font: inherit; /* 2 */
+  margin: 0; /* 3 */
+}
+
+/**
+ * Address `overflow` set to `hidden` in IE 8/9/10/11.
+ */
+
+button {
+  overflow: visible;
+}
+
+/**
+ * Address inconsistent `text-transform` inheritance for `button` and `select`.
+ * All other form control elements do not inherit `text-transform` values.
+ * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
+ * Correct `select` style inheritance in Firefox.
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/**
+ * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
+ *    and `video` controls.
+ * 2. Correct inability to style clickable `input` types in iOS.
+ * 3. Improve usability and consistency of cursor style between image-type
+ *    `input` and others.
+ */
+
+button,
+html input[type="button"], /* 1 */
+input[type="reset"],
+input[type="submit"] {
+  -webkit-appearance: button; /* 2 */
+  cursor: pointer; /* 3 */
+}
+
+/**
+ * Re-set default cursor for disabled elements.
+ */
+
+button[disabled],
+html input[disabled] {
+  cursor: default;
+}
+
+/**
+ * Remove inner padding and border in Firefox 4+.
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+
+/**
+ * Address Firefox 4+ setting `line-height` on `input` using `!important` in
+ * the UA stylesheet.
+ */
+
+input {
+  line-height: normal;
+}
+
+/**
+ * It's recommended that you don't attempt to style these elements.
+ * Firefox's implementation doesn't respect box-sizing, padding, or width.
+ *
+ * 1. Address box sizing set to `content-box` in IE 8/9/10.
+ * 2. Remove excess padding in IE 8/9/10.
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Fix the cursor style for Chrome's increment/decrement buttons. For certain
+ * `font-size` values of the `input`, it causes the cursor style of the
+ * decrement button to change from `default` to `text`.
+ */
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
+ * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
+ */
+
+input[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  box-sizing: content-box; /* 2 */
+}
+
+/**
+ * Remove inner padding and search cancel button in Safari and Chrome on OS X.
+ * Safari (but not Chrome) clips the cancel button when the search input has
+ * padding (and `textfield` appearance).
+ */
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * Define consistent border, margin, and padding.
+ */
+
+fieldset {
+  border: 1px solid #c0c0c0;
+  margin: 0 2px;
+  padding: 0.35em 0.625em 0.75em;
+}
+
+/**
+ * 1. Correct `color` not being inherited in IE 8/9/10/11.
+ * 2. Remove padding so people aren't caught out if they zero out fieldsets.
+ */
+
+legend {
+  border: 0; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Remove default vertical scrollbar in IE 8/9/10/11.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * Don't inherit the `font-weight` (applied by a rule above).
+ * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
+ */
+
+optgroup {
+  font-weight: bold;
+}
+
+/* Tables
+   ========================================================================== */
+
+/**
+ * Remove most spacing between table cells.
+ */
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+td,
+th {
+  padding: 0;
+}
diff --git a/test/style.css b/test/style.css
new file mode 100644
index 0000000..1e4c93b
--- /dev/null
+++ b/test/style.css
@@ -0,0 +1,8 @@
+body {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  bottom: 0;
+  overflow: hidden;
+}
diff --git a/test/test.js b/test/test.js
new file mode 100644
index 0000000..d363ac0
--- /dev/null
+++ b/test/test.js
@@ -0,0 +1,53 @@
+import React, { Component } from 'react'
+import { render } from 'react-dom'
+import { GridContainer, GridItem } from '../src'
+
+const lorem =
+`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.`
+
+class Test extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      width: 450
+    }
+  }
+
+  componentDidMount () {
+    setInterval(() => {
+      this.setState({ width: toggle(this.state.width) })
+    }, 1000)
+  }
+
+  render () {
+    const columnTemplate = `${this.state.width}px 25px 300px`
+
+    return (
+      <GridContainer rowTemplate='100px 1fr 1fr'
+                     columnTemplate={columnTemplate}
+                     style={{ height: '100%' }}>
+        <GridItem rows='2 / 3'
+                  columns='3 / 4'>
+          <p>{lorem}</p>
+        </GridItem>
+        <GridItem style={{ overflowY: 'scroll' }}
+                  rows='1 / 4'
+                  columns='1 / 2'>
+          <h1>{lorem}</h1>
+        </GridItem>
+      </GridContainer>
+    )
+  }
+}
+
+render(<Test />, document.getElementById('root'))
+
+function toggle (value) {
+  return value === 450 ? 50 : 450
+}
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..2d919bd
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,32 @@
+var path = require('path')
+var webpack = require('webpack')
+
+module.exports = {
+  entry: {
+    bundle: [
+      'webpack-hot-middleware/client',
+      path.join(__dirname, 'test', 'test.js')
+    ]
+  },
+  output: {
+    path: path.resolve(__dirname, 'build'),
+    filename: '[name].js'
+  },
+  plugins: [
+    new webpack.optimize.OccurenceOrderPlugin(),
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoErrorsPlugin()
+  ],
+  module: {
+    loaders: [
+      {
+        test: /\.js(x)?$/,
+        include: [
+          path.resolve(__dirname, 'src'),
+          path.resolve(__dirname, 'test')
+        ],
+        loaders: ['babel-loader']
+      }
+    ]
+  }
+}