initial commit

.babelrc

@@ -0,0 +1,8 @@
+{
+  "optional": [
+    "es7.objectRestSpread"
+  ],
+  "ignore": [
+    "node_modules"
+  ]
+}

.eslintrc

@@ -0,0 +1,5 @@
+{
+  "parser": "babel-eslint",
+  "extends": ["standard", "standard-react"],
+  "env": { "browser": true, "node": true }
+}

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+lib

.npmignore

@@ -0,0 +1,3 @@
+src
+test
+webpack.config.js

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/)

index.js

@@ -0,0 +1 @@
+module.exports = require('./lib')

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"
+  }
+}

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
+}

src/index.js

@@ -0,0 +1,2 @@
+export { default as GridContainer } from './container'
+export { default as GridItem } from './item'

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
+}

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')
+})

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>

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
+}