.":"function"==typeof n?" Instead of passing a class like Foo, pass React.createElement(Foo) or .":null!=n&&void 0!==n.props?" This may be caused by unintentionally loading two independent copies of React.":""):d("39","string"==typeof n?" Instead of passing a string like 'div', pass React.createElement('div') or

.":"function"==typeof n?" Instead of passing a class like Foo, pass React.createElement(Foo) or .":null!=n&&void 0!==n.props?" This may be caused by unintentionally loading two independent copies of React.":""),"production"!==t.env.NODE_ENV?S(!o||!o.tagName||"BODY"!==o.tagName.toUpperCase(),"render(): Rendering components directly into document.body is discouraged, since its children are often manipulated by third-party scripts and browser extensions. This may lead to subtle reconciliation issues. Try rendering into a container element created for your app."):void 0;var u,s=b(B,null,null,null,null,null,n);if(e){var l=N.get(e);u=l._processChildContext(l._context)}else u=x;var f=p(o);if(f){var h=f._currentElement,m=h.props;if(R(m,n)){var v=f._renderedComponent.getPublicInstance(),g=a&&function(){a.call(v)};return H._updateRootComponent(f,s,u,o,g),v}H.unmountComponentAtNode(o)}var y=r(o),E=y&&!!i(y),_=c(o);if("production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?S(!_,"render(...): Replacing React-rendered children with a new root component. If you intended to update the children of this node, you should instead have the existing children update their state and render the new components instead of calling ReactDOM.render."):void 0,!E||y.nextSibling))for(var C=y;C;){if(i(C)){"production"!==t.env.NODE_ENV?S(!1,"render(): Target node has markup rendered by React, but there are unrelated nodes as well. This is most commonly caused by white-space inserted around server-rendered markup."):void 0;break}C=C.nextSibling}var D=E&&!f&&!_,O=H._renderNewRootComponent(s,o,D,u)._renderedComponent.getPublicInstance();return a&&a.call(O),O},render:function(e,t,n){return H._renderSubtreeIntoContainer(null,e,t,n)},unmountComponentAtNode:function(e){"production"!==t.env.NODE_ENV?S(null==v.current,"unmountComponentAtNode(): Render methods should be a pure function of props and state; triggering nested component updates from render is not allowed. If necessary, trigger nested updates in componentDidUpdate. Check the render method of %s.",v.current&&v.current.getName()||"ReactCompositeComponent"):void 0,!e||e.nodeType!==A&&e.nodeType!==U&&e.nodeType!==L?"production"!==t.env.NODE_ENV?k(!1,"unmountComponentAtNode(...): Target container is not a DOM element."):d("40"):void 0;var n=p(e);if(!n){var o=c(e),r=1===e.nodeType&&e.hasAttribute(V);return"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?S(!o,"unmountComponentAtNode(): The node you're attempting to unmount was rendered by React and is not a top-level container. %s",r?"You may have accidentally passed in a React root node instead of its container.":"Instead, have the parent component update its state and rerender in order to remove this component."):void 0),!1}return delete F[n._instance.rootID],w.batchedUpdates(s,n,e,!1),!0},_mountImageIntoNode:function(e,n,i,a,u){if(!n||n.nodeType!==A&&n.nodeType!==U&&n.nodeType!==L?"production"!==t.env.NODE_ENV?k(!1,"mountComponentIntoNode(...): Target container is not valid."):d("41"):void 0,a){var s=r(n);if(D.canReuseMarkup(e,s))return void g.precacheNode(i,s);var c=s.getAttribute(D.CHECKSUM_ATTR_NAME);s.removeAttribute(D.CHECKSUM_ATTR_NAME);var l=s.outerHTML;s.setAttribute(D.CHECKSUM_ATTR_NAME,c);var p=e;if("production"!==t.env.NODE_ENV){var h;n.nodeType===A?(h=document.createElement("div"),h.innerHTML=e,p=h.innerHTML):(h=document.createElement("iframe"),document.body.appendChild(h),h.contentDocument.write(e),p=h.contentDocument.documentElement.outerHTML,document.body.removeChild(h))}var m=o(p,l),v=" (client) "+p.substring(m-20,m+20)+"\n (server) "+l.substring(m-20,m+20);n.nodeType===U?"production"!==t.env.NODE_ENV?k(!1,"You're trying to render a component to the document using server rendering but the checksum was invalid. This usually means you rendered a different component type or props on the client from the one on the server, or your render() methods are impure. React cannot handle this case due to cross-browser quirks by rendering at the document root. You should look for environment dependent code in your components and ensure the props are the same client and server side:\n%s",v):d("42",v):void 0,"production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?S(!1,"React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:\n%s",v):void 0)}if(n.nodeType===U?"production"!==t.env.NODE_ENV?k(!1,"You're trying to render a component to the document but you didn't use server rendering. We can't do this without using server rendering due to cross-browser quirks. See ReactDOMServer.renderToString() for server rendering."):d("43"):void 0,u.useCreateElement){for(;n.lastChild;)n.removeChild(n.lastChild);f.insertTreeBefore(n,e,null)}else P(n,e),g.precacheNode(i,n.firstChild);if("production"!==t.env.NODE_ENV){var y=g.getInstanceFromNode(n.firstChild);0!==y._debugID&&C.debugTool.onHostOperation(y._debugID,"mount",e.toString())}}};e.exports=H}).call(t,n(1))},function(e,t,n){"use strict";var o=n(27),r=o({INSERT_MARKUP:null,MOVE_EXISTING:null,REMOVE_NODE:null,SET_MARKUP:null,TEXT_CONTENT:null});e.exports=r},function(e,t,n){(function(t){"use strict";var o=n(4),r=n(11),i=n(3),a={HOST:0,COMPOSITE:1,EMPTY:2,getType:function(e){return null===e||e===!1?a.EMPTY:r.isValidElement(e)?"function"==typeof e.type?a.COMPOSITE:a.HOST:void("production"!==t.env.NODE_ENV?i(!1,"Unexpected node: %s",e):o("26",e))}};e.exports=a}).call(t,n(1))},function(e,t,n){(function(t){"use strict";function o(e,t){return e===t?0!==e||1/e===1/t:e!==e&&t!==t}function r(e){function n(n,r,i,a,u,s,c){if(a=a||T,s=s||i,"production"!==t.env.NODE_ENV&&c!==N&&"undefined"!=typeof console){var l=a+":"+i;o[l]||("production"!==t.env.NODE_ENV?O(!1,"You are manually calling a React.PropTypes validation function for the `%s` prop on `%s`. This is deprecated and will not work in the next major version. You may be seeing this warning due to a third-party PropTypes library. See https://fb.me/react-warning-dont-call-proptypes for details.",s,a):void 0,o[l]=!0)}if(null==r[i]){var p=_[u];return n?new Error("Required "+p+" `"+s+"` was not specified in "+("`"+a+"`.")):null}return e(r,i,a,u,s)}if("production"!==t.env.NODE_ENV)var o={};var r=n.bind(null,!1);return r.isRequired=n.bind(null,!0),r}function i(e){function t(t,n,o,r,i,a){var u=t[n],s=g(u);if(s!==e){var c=_[r],l=y(u);return new Error("Invalid "+c+" `"+i+"` of type "+("`"+l+"` supplied to `"+o+"`, expected ")+("`"+e+"`."))}return null}return r(t)}function a(){return r(C.thatReturns(null))}function u(e){function t(t,n,o,r,i){if("function"!=typeof e)return new Error("Property `"+i+"` of component `"+o+"` has invalid PropType notation inside arrayOf.");var a=t[n];if(!Array.isArray(a)){var u=_[r],s=g(a);return new Error("Invalid "+u+" `"+i+"` of type "+("`"+s+"` supplied to `"+o+"`, expected an array."))}for(var c=0;c>",w={array:i("array"),bool:i("boolean"),func:i("function"),number:i("number"),object:i("object"),string:i("string"),symbol:i("symbol"),any:a(),arrayOf:u,element:s(),instanceOf:c,node:f(),objectOf:p,oneOf:l,oneOfType:d,shape:h};e.exports=w}).call(t,n(1))},function(e,t){"use strict";e.exports="15.3.0"},function(e,t){"use strict";var n={currentScrollLeft:0,currentScrollTop:0,refreshScrollValues:function(e){n.currentScrollLeft=e.x,n.currentScrollTop=e.y}};e.exports=n},function(e,t,n){(function(t){"use strict";function o(e,n){return null==n?"production"!==t.env.NODE_ENV?i(!1,"accumulateInto(...): Accumulated items must not be null or undefined."):r("30"):void 0,null==e?n:Array.isArray(e)?Array.isArray(n)?(e.push.apply(e,n),e):(e.push(n),e):Array.isArray(n)?[e].concat(n):[e,n]}var r=n(4),i=n(3);e.exports=o}).call(t,n(1))},function(e,t,n){(function(t){"use strict";function o(e,o,p,d,f,h){for(var m in e)if(e.hasOwnProperty(m)){var v;try{"function"!=typeof e[m]?"production"!==t.env.NODE_ENV?s(!1,"%s: %s type `%s` is invalid; it must be a function, usually from React.PropTypes.",d||"React class",a[p],m):i("84",d||"React class",a[p],m):void 0,v=e[m](o,m,d,p,null,u)}catch(g){v=g}if("production"!==t.env.NODE_ENV?c(!v||v instanceof Error,"%s: type specification of %s `%s` is invalid; the type checker function must return `null` or an `Error` but returned a %s. You may have forgotten to pass an argument to the type checker creator (arrayOf, instanceOf, objectOf, oneOf, oneOfType, and shape all require an argument).",d||"React class",a[p],m,typeof v):void 0,v instanceof Error&&!(v.message in l)){l[v.message]=!0;var y="";"production"!==t.env.NODE_ENV&&(r||(r=n(10)),null!==h?y=r.getStackAddendumByID(h):null!==f&&(y=r.getCurrentStackAddendum(f))),"production"!==t.env.NODE_ENV?c(!1,"Failed %s type: %s%s",p,v.message,y):void 0}}}var r,i=n(4),a=n(45),u=n(46),s=n(3),c=n(2);"undefined"!=typeof t&&t.env&&"test"===t.env.NODE_ENV&&(r=n(10));var l={};e.exports=o}).call(t,n(1))},function(e,t){"use strict";function n(e,t,n){Array.isArray(e)?e.forEach(t,n):e&&t.call(n,e)}e.exports=n},function(e,t,n){"use strict";function o(e){for(var t;(t=e._renderedNodeType)===r.COMPOSITE;)e=e._renderedComponent;return t===r.HOST?e._renderedComponent:t===r.EMPTY?null:void 0}var r=n(78);e.exports=o},function(e,t,n){"use strict";function o(){return!i&&r.canUseDOM&&(i="textContent"in document.documentElement?"textContent":"innerText"),i}var r=n(7),i=null;e.exports=o},function(e,t,n){(function(t){"use strict";function o(e){if(e){var t=e.getName();if(t)return" Check the render method of `"+t+"`."}return""}function r(e){var t=e._currentElement;return null==t?"#empty":"string"==typeof t||"number"==typeof t?"#text":"string"==typeof t.type?t.type:e.getName?e.getName()||"Unknown":t.type.displayName||t.type.name||"Unknown"}function i(e){return"function"==typeof e&&"undefined"!=typeof e.prototype&&"function"==typeof e.prototype.mountComponent&&"function"==typeof e.prototype.receiveComponent}function a(e,n){var s;if(null===e||e===!1)s=l.create(a);else if("object"==typeof e){var c=e;!c||"function"!=typeof c.type&&"string"!=typeof c.type?"production"!==t.env.NODE_ENV?f(!1,"Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: %s.%s",null==c.type?c.type:typeof c.type,o(c._owner)):u("130",null==c.type?c.type:typeof c.type,o(c._owner)):void 0,"string"==typeof c.type?s=p.createInternalComponent(c):i(c.type)?(s=new c.type(c),s.getHostNode||(s.getHostNode=s.getNativeNode)):s=new m(c)}else"string"==typeof e||"number"==typeof e?s=p.createInstanceForText(e):"production"!==t.env.NODE_ENV?f(!1,"Encountered invalid React node of type %s",typeof e):u("131",typeof e);if("production"!==t.env.NODE_ENV&&("production"!==t.env.NODE_ENV?h("function"==typeof s.mountComponent&&"function"==typeof s.receiveComponent&&"function"==typeof s.getHostNode&&"function"==typeof s.unmountComponent,"Only React Components can be mounted."):void 0),s._mountIndex=0,s._mountImage=null,"production"!==t.env.NODE_ENV)if(n){var g=v++;s._debugID=g;var y=r(s);d.debugTool.onSetDisplayName(g,y);var E=e&&e._owner;E&&d.debugTool.onSetOwner(g,E._debugID)}else s._debugID=0;return"production"!==t.env.NODE_ENV&&Object.preventExtensions&&Object.preventExtensions(s),s}var u=n(4),s=n(5),c=n(122),l=n(72),p=n(74),d=n(8),f=n(3),h=n(2),m=function(e){this.construct(e)};s(m.prototype,c.Mixin,{_instantiateReactComponent:a});var v=1;e.exports=a}).call(t,n(1))},function(e,t){"use strict";function n(e){var t=e&&e.nodeName&&e.nodeName.toLowerCase();return"input"===t?!!o[e.type]:"textarea"===t}var o={color:!0,date:!0,datetime:!0,"datetime-local":!0,email:!0,month:!0,number:!0,password:!0,range:!0,search:!0,tel:!0,text:!0,time:!0,url:!0,week:!0};e.exports=n},function(e,t,n){"use strict";var o=n(7),r=n(33),i=n(34),a=function(e,t){if(t){var n=e.firstChild;if(n&&n===e.lastChild&&3===n.nodeType)return void(n.nodeValue=t)}e.textContent=t};o.canUseDOM&&("textContent"in document.documentElement||(a=function(e,t){i(e,r(t))})),e.exports=a},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function a(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var u=function(){function e(e,t){for(var n=0;n=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}Object.defineProperty(t,"__esModule",{value:!0});var o=t.width=function(e){return e/12*100+"%"},r=t.createClassName=function(e){return function(t){return"__"+e+t}},i=t.createWidthRule=function(e){return function(t){return function(n){return function(r){if("number"!=typeof r)return"";var i=e[t],a="."+n+"{width:"+o(r)+"}";return i?"@media "+i+"{"+a+"}":a}}}},a=t.createRule=function(e){return function(t){return function(n){return"."+e+"{"+t+":"+n+"}"}}},u=function(e){return function(t){var o=t.align,u=void 0===o?"top":o,s=n(t,["align"]),c=i(e),l=Object.keys(s).map(function(e){var t=s[e];if(!t)return!1;var n=r(e)(t),o=c(e)(n)(t);return{className:n,rule:o}}).filter(function(e){return e!==!1}),p=r("b")("b");l.push({className:p,rule:a(p)("box-sizing")("border-box")});var d=r("d")("ib");l.push({className:d,rule:a(d)("display")("inline-block")});var f=r("a")(u);l.push({className:f,rule:a(f)("vertical-align")(u)});var h=l.reduce(function(e,t){return e+t.rule},""),m=l.reduce(function(e,t){return e+t.className+" "},"").trim();return{css:h,className:m}}};t["default"]=u},function(e,t,n){"use strict";function o(e){return e&&e.__esModule?e:{"default":e}}function r(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function a(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function u(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0}),t.createGrid=void 0;var s=Object.assign||function(e){for(var t=1;t - - diff --git a/entry.js b/entry.js new file mode 100644 index 0000000..7b734fa --- /dev/null +++ b/entry.js @@ -0,0 +1,9 @@ + +import React from 'react' +import ReactDOM from 'react-dom' +import App from './App' + +const div = document.getElementById('app') + +ReactDOM.render(, div) + diff --git a/index.html b/index.html new file mode 100644 index 0000000..0c2729c --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + +

+ diff --git a/package.json b/package.json deleted file mode 100644 index 7d6256d..0000000 --- a/package.json +++ /dev/null @@ -1,51 +0,0 @@ -{ - "name": "react-css-grid", - "version": "2.0.0-0", - "description": "React layout component based on CSS Grid Layout and built with styled-components", - "main": "dist/index.js", - "scripts": { - "prepublish": "babel src -d dist", - "start": "webpack-dev-server", - "build": "webpack -p", - "test": "nyc ava" - }, - "keywords": [ - "react", - "react-component", - "styled-components", - "layout", - "css-grid", - "grid", - "css" - ], - "author": "Brent Jackson", - "license": "MIT", - "dependencies": { - "prop-types": "^15.5.10", - "styled-components": "^2.1.2" - }, - "devDependencies": { - "ava": "^0.22.0", - "babel-cli": "^6.26.0", - "babel-core": "^6.26.0", - "babel-preset-env": "^1.6.0", - "babel-preset-react": "^6.24.1", - "babel-register": "^6.26.0", - "grid-styled": "^2.0.0-10", - "nyc": "^11.1.0", - "react": "^15.6.1", - "react-dom": "^15.6.1", - "react-live": "^1.7.0", - "react-test-renderer": "^15.6.1", - "react-x-ray": "^1.0.0-2", - "refunk": "^1.0.0-2", - "webpack": "^3.5.5", - "webpack-dev-server": "^2.7.1" - }, - "ava": { - "require": [ - "babel-register" - ], - "babel": "inherit" - } -} diff --git a/src/index.js b/src/index.js deleted file mode 100644 index 24fffe0..0000000 --- a/src/index.js +++ /dev/null @@ -1,49 +0,0 @@ -import styled from 'styled-components' -import PropTypes from 'prop-types' - -const px = n => typeof n === 'number' ? n + 'px' : n - -const width = props => ({ - gridTemplateColumns: `repeat(auto-fit, minmax(${px(props.width)}, 1fr))` -}) - -const gap = props => ({ - gridGap: px(props.gap) -}) - -const align = props => props.align ? ({ - alignItems: props.align -}) : null - -const span = props => props.span ? ({ - gridColumn: `span ${props.span}` -}) : null - -const Grid = styled.div([], { - display: 'grid' -}, - width, - gap, - align -) - -Grid.propTypes = { - width: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string - ]).isRequired, - gap: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.string - ]).isRequired, - align: PropTypes.string -} - -Grid.defaultProps = { - width: 320, - gap: 32 -} - -Grid.Item = styled.div([], span) - -export default Grid diff --git a/test.js b/test.js deleted file mode 100644 index 289dbe4..0000000 --- a/test.js +++ /dev/null @@ -1,44 +0,0 @@ -import test from 'ava' -import React from 'react' -import { create as render } from 'react-test-renderer' -import Grid from './src' - -test('renders', t => { - const a = render().toJSON() - t.snapshot(a) -}) - -test('renders with width prop', t => { - const a = render().toJSON() - t.snapshot(a) -}) - -test('renders with string width prop', t => { - const a = render().toJSON() - t.snapshot(a) -}) - -test('renders with gap prop', t => { - const a = render().toJSON() - t.snapshot(a) -}) - -test('renders with string gap prop', t => { - const a = render().toJSON() - t.snapshot(a) -}) - -test('renders with align prop', t => { - const a = render().toJSON() - t.snapshot(a) -}) - -test('Grid.Item renders', t => { - const a = render().toJSON() - t.snapshot(a) -}) - -test('Grid.Item renders with span prop', t => { - const a = render().toJSON() - t.snapshot(a) -}) diff --git a/test.js.md b/test.js.md deleted file mode 100644 index 32a4157..0000000 --- a/test.js.md +++ /dev/null @@ -1,76 +0,0 @@ -# Snapshot report for `test.js` - -The actual snapshot is saved in `test.js.snap`. - -Generated by [AVA](https://ava.li). - -## Grid.Item renders - -> Snapshot 1 - -

- -## Grid.Item renders with span prop - -> Snapshot 1 - -

- -## renders - -> Snapshot 1 - -

- -## renders with align prop - -> Snapshot 1 - -

- -## renders with gap prop - -> Snapshot 1 - -

- -## renders with string gap prop - -> Snapshot 1 - -

- -## renders with string width prop - -> Snapshot 1 - -

- -## renders with width prop - -> Snapshot 1 - -

diff --git a/test.js.snap b/test.js.snap deleted file mode 100644 index c9e8836..0000000 Binary files a/test.js.snap and /dev/null differ diff --git a/webpack.config.js b/webpack.config.js deleted file mode 100644 index 38a12ff..0000000 --- a/webpack.config.js +++ /dev/null @@ -1,37 +0,0 @@ -const path = require('path') -const webpack = require('webpack') - -module.exports = { - entry: './docs/entry.js', - - output: { - path: path.join(__dirname, 'docs'), - filename: 'bundle.js' - }, - - resolve: { - alias: { - 'react-css-grid': path.join(__dirname, 'src') - } - }, - - module: { - rules: [ - { - test: /\.js$/, - exclude: /node_modules/, - loader: 'babel-loader' - } - ] - }, - - plugins: [ - new webpack.DefinePlugin({ - 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) - }) - ], - - devServer: { - contentBase: 'docs/' - } -}

React CSS Grid Demo

sm6 md3

sm6 md3

sm6 md3

sm6 md3