From 3b5704c4d87b78e01a5503f95207376119eec57d Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Tue, 23 May 2017 18:42:25 +0200 Subject: [PATCH 01/14] chore(package): update node-fetch to version 1.7.0 (#2049) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5f07facb..8a54cec9 100644 --- a/package.json +++ b/package.json @@ -119,7 +119,7 @@ "husky": "0.13.3", "jest-cli": "20.0.2", "lint-staged": "^3.4.0", - "node-fetch": "1.6.3", + "node-fetch": "1.7.0", "node-notifier": "5.1.2", "nyc": "10.3.2", "react": "15.5.3", From 1723d9defd79d51604418bade83bfcb84658b114 Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Thu, 25 May 2017 18:30:39 +0200 Subject: [PATCH 02/14] chore(package): update jest-cli to version 20.0.4 (#2057) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 8a54cec9..4037d78b 100644 --- a/package.json +++ b/package.json @@ -117,7 +117,7 @@ "fly-esnext": "2.0.1", "fly-watch": "1.1.1", "husky": "0.13.3", - "jest-cli": "20.0.2", + "jest-cli": "20.0.4", "lint-staged": "^3.4.0", "node-fetch": "1.7.0", "node-notifier": "5.1.2", From 8b90e6f148bcad498eaf5b299e2963e340b7873f Mon Sep 17 00:00:00 2001 From: RasmusErik Voel Jensen Date: Thu, 25 May 2017 18:32:17 +0200 Subject: [PATCH 03/14] example: with react-toolbox (#2047) * example with react-toolbox * JavaScript standard --- examples/with-react-toolbox/README.md | 27 +++++++++++++++ examples/with-react-toolbox/package.json | 35 ++++++++++++++++++++ examples/with-react-toolbox/pages/index.js | 16 +++++++++ examples/with-react-toolbox/static/theme.css | 1 + examples/with-react-toolbox/static/theme.js | 1 + 5 files changed, 80 insertions(+) create mode 100644 examples/with-react-toolbox/README.md create mode 100644 examples/with-react-toolbox/package.json create mode 100644 examples/with-react-toolbox/pages/index.js create mode 100644 examples/with-react-toolbox/static/theme.css create mode 100644 examples/with-react-toolbox/static/theme.js diff --git a/examples/with-react-toolbox/README.md b/examples/with-react-toolbox/README.md new file mode 100644 index 00000000..c0a02453 --- /dev/null +++ b/examples/with-react-toolbox/README.md @@ -0,0 +1,27 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-react-toolbox) + +# With react-toolbox example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-react-toolbox +cd with-react-toolbox +``` + +Install it and run: + +```bash +yarn +yarn dev +``` + +Notice that `yarn toolbox` (or `npm run toolbox`) should be rerun every time the `"reactToolbox"` configuration in `package.json` is changed, in order to update `static/theme.js` and `static/theme.css`. The `"reactToolbox"` configuration includes styling, and the list of react-toolbox components to include. + +## The idea behind the example + +This is a simple example of getting react-toolbox up and running, using [react-toolbox-themr](https://github.com/react-toolbox/react-toolbox-themr). + +For actual use, you probably also want to add Roboto Font, and Material Design Icons. See diff --git a/examples/with-react-toolbox/package.json b/examples/with-react-toolbox/package.json new file mode 100644 index 00000000..2957e31c --- /dev/null +++ b/examples/with-react-toolbox/package.json @@ -0,0 +1,35 @@ +{ + "name": "with-react-toolbox", + "version": "0.0.1", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start", + "toolbox": "react-toolbox-themr" + }, + "dependencies": { + "classnames": "^2.2.5", + "next": "latest", + "react": "^15.5.4", + "react-addons-css-transition-group": "^15.5.2", + "react-dom": "^15.5.4", + "react-toolbox": "^2.0.0-beta.8" + }, + "devDependencies": { + "react-toolbox-themr": "^1.0.2" + }, + "reactToolbox": { + "include": [ + "BUTTON", + "DATE_PICKER" + ], + "customProperties": { + "animation-duration": "0.3s", + "color-accent": "var(--palette-pink-a200)", + "color-accent-dark": "var(--palette-pink-700)", + "color-primary-contrast": "var(--color-dark-contrast)", + "color-accent-contrast": "var(--color-dark-contrast)" + }, + "output": "static" + } +} diff --git a/examples/with-react-toolbox/pages/index.js b/examples/with-react-toolbox/pages/index.js new file mode 100644 index 00000000..0c099a5a --- /dev/null +++ b/examples/with-react-toolbox/pages/index.js @@ -0,0 +1,16 @@ +import ThemeProvider from 'react-toolbox/lib/ThemeProvider' +import theme from '../static/theme' +import Head from 'next/head' + +import Button from 'react-toolbox/lib/button/Button' + +export default () => ( +
+ + + + + + +
+) diff --git a/examples/with-react-toolbox/static/theme.css b/examples/with-react-toolbox/static/theme.css new file mode 100644 index 00000000..d5064105 --- /dev/null +++ b/examples/with-react-toolbox/static/theme.css @@ -0,0 +1 @@ +._2Agdx{-ms-flex-line-pack:center;align-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:0;cursor:pointer;display:inline-block;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;font-size:14px;font-weight:500;height:36px;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;letter-spacing:0;line-height:36px;outline:0;padding:0;position:relative;text-align:center;text-decoration:none;text-transform:uppercase;transition:box-shadow .2s cubic-bezier(.4,0,1,1),background-color .2s cubic-bezier(.4,0,.2,1),color .2s cubic-bezier(.4,0,.2,1);white-space:nowrap;box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}._2Agdx *,._2Agdx ::after,._2Agdx ::before{box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-touch-callout:none}._2Agdx>input{height:.1px;margin:0;opacity:0;overflow:hidden;padding:0;position:absolute;width:.1px;z-index:0}._2Agdx::-moz-focus-inner{border:0}._2Agdx>span:not([data-react-toolbox=tooltip]){display:inline-block;line-height:36px;vertical-align:middle}._2Agdx>svg{display:inline-block;fill:currentColor;font-size:120%;height:36px;vertical-align:top;width:1em}._2Agdx>*{pointer-events:none}._2Agdx>._3AVBi{overflow:hidden}._2Agdx[disabled]{color:rgba(0,0,0,.26);cursor:auto;pointer-events:none}._2GH_L{border-radius:2px;min-width:90px;padding:0 12px}._2GH_L ._3aBSX{font-size:120%;margin-right:6px;vertical-align:middle}._2GH_L>svg{margin-right:5px}._1ZxqC[disabled]{background-color:rgba(0,0,0,.12);box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}._1ZxqC:active{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}._1ZxqC:focus:not(:active){box-shadow:0 0 8px rgba(0,0,0,.18),0 8px 16px rgba(0,0,0,.36)}._221ic{box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12)}._1jWAQ{background:0 0}._3IRMZ{border-radius:50%;box-shadow:0 1px 1.5px 0 rgba(0,0,0,.12),0 1px 1px 0 rgba(0,0,0,.24);font-size:24px;height:56px;width:56px}._3IRMZ ._3aBSX:not([data-react-toolbox=tooltip]){line-height:56px}._3IRMZ>._3AVBi{border-radius:50%}._3IRMZ._2DCN-{font-size:17.77778px;height:40px;width:40px}._3IRMZ._2DCN- ._3aBSX{line-height:40px}.hC5Z2{background:0 0;border-radius:50%;vertical-align:middle;width:36px}.hC5Z2 svg,.hC5Z2>._3aBSX{font-size:20px;line-height:36px;vertical-align:top}.hC5Z2>._3AVBi{border-radius:50%}._3tTAW:not([disabled])._221ic,._3tTAW:not([disabled])._3IRMZ{background:#3f51b5;color:#fff}._3tTAW:not([disabled])._1jWAQ,._3tTAW:not([disabled]).hC5Z2{color:#3f51b5}._3tTAW:not([disabled])._1jWAQ:focus:not(:active),._3tTAW:not([disabled]).hC5Z2:focus:not(:active){background:rgba(63,81,181,.2)}._3tTAW:not([disabled])._1jWAQ:hover{background:rgba(63,81,181,.2)}._2wp6F:not([disabled])._221ic,._2wp6F:not([disabled])._3IRMZ{background:#ff4081;color:#fff}._2wp6F:not([disabled])._1jWAQ,._2wp6F:not([disabled]).hC5Z2{color:#ff4081}._2wp6F:not([disabled])._1jWAQ:focus:not(:active),._2wp6F:not([disabled]).hC5Z2:focus:not(:active){background:rgba(255,64,129,.2)}._2wp6F:not([disabled])._1jWAQ:hover{background:rgba(255,64,129,.2)}._2CPs4:not([disabled])._221ic,._2CPs4:not([disabled])._3IRMZ{background-color:#fff;color:#212121}._2CPs4:not([disabled])._1jWAQ,._2CPs4:not([disabled]).hC5Z2{color:#212121}._2CPs4:not([disabled])._1jWAQ:focus:not(:active),._2CPs4:not([disabled]).hC5Z2:focus:not(:active){background:rgba(33,33,33,.2)}._2CPs4:not([disabled])._1jWAQ:hover{background:rgba(33,33,33,.2)}._2CPs4:not([disabled])._2SPZr._221ic,._2CPs4:not([disabled])._2SPZr._3IRMZ{background-color:#212121;color:#fff}._2CPs4:not([disabled])._2SPZr._1jWAQ,._2CPs4:not([disabled])._2SPZr.hC5Z2{color:#fff}._2CPs4:not([disabled])._2SPZr._1jWAQ:focus:not(:active),._2CPs4:not([disabled])._2SPZr.hC5Z2:focus:not(:active){background:rgba(33,33,33,.2)}._2CPs4:not([disabled])._2SPZr._1jWAQ:hover{background:rgba(33,33,33,.2)}._2CPs4._2SPZr[disabled]{background-color:rgba(0,0,0,.08);color:rgba(0,0,0,.54)}._16N7o{bottom:0;left:0;pointer-events:none;position:absolute;right:0;top:0;z-index:1}._3SV_u{background-color:currentColor;border-radius:50%;left:50%;pointer-events:none;position:absolute;top:50%;-webkit-transform-origin:50% 50%;transform-origin:50% 50%;transition-duration:.8s;z-index:100}._3SV_u._2OZWa{opacity:.3;transition-property:none}._3SV_u._3O2Ue{opacity:.3;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform}._3SV_u:not(._3O2Ue):not(._2OZWa){opacity:0;transition-property:opacity,-webkit-transform;transition-property:opacity,transform;transition-property:opacity,transform,-webkit-transform}._2ISvI:not(.Cf3yF)>.x7MhN{cursor:pointer}._2vLUd{background-color:#3f51b5;color:#fff;cursor:pointer;padding:16px 20px}._1VWY-{display:inline-block;font-size:14px;transition:opacity,font-size .3s cubic-bezier(.4,0,.2,1)}._3K2Ws{display:block;font-size:34px;font-weight:400;font-weight:500;line-height:40px;margin:0;text-transform:capitalize;transition:opacity .3s cubic-bezier(.4,0,.2,1)}._1t-4v{padding:10px 5px 0}._2OzvT ._3K2Ws{opacity:.6}._2OzvT ._1VWY-{font-size:16px}._2DDdC ._1VWY-{opacity:.6}._3fCV6{width:330px}._3fCV6>[role=body]{padding:0}._3fCV6>[role=navigation]>._2hL6u{color:#3f51b5}._3fCV6>[role=navigation]>._2hL6u:hover{background:rgba(63,81,181,.2)}._3fCV6>[role=navigation]>._2hL6u:focus:not(:active){background:rgba(63,81,181,.2)}._1X9ls{background:#fff;font-size:14px;height:312px;line-height:36px;overflow:hidden;position:relative;text-align:center}._1X9ls .Nv9Bc,._1X9ls ._3iPkS{cursor:pointer;height:36px;opacity:.7;position:absolute;top:0;z-index:100}._1X9ls .Nv9Bc>span,._1X9ls ._3iPkS>span{vertical-align:top}._1X9ls .Nv9Bc{left:0}._1X9ls ._3iPkS{right:0}._2ESpD{display:inline-block;font-weight:500;line-height:36px}.zEdgW{font-size:18px;height:100%;list-style:none;margin:0;overflow-y:auto;padding:0}.zEdgW>li{cursor:pointer;line-height:2.4}.zEdgW>li._1pjXb{color:#3f51b5;font-size:2.4;font-weight:500}.PcByv{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:13px;height:36px;line-height:36px;opacity:.5}.PcByv>span{-webkit-box-flex:0;-ms-flex:0 0 14.28571%;flex:0 0 14.28571%}._1qh3T{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;font-size:13px}._2qF_L{-webkit-box-flex:0;-ms-flex:0 0 14.28571%;flex:0 0 14.28571%;padding:2px 0}._2qF_L>span{border-radius:50%;display:inline-block;height:36px;line-height:36px;width:36px}._2qF_L:hover:not(._1pjXb):not(.Cf3yF)>span{background:rgba(63,81,181,.21);color:#fff}._2qF_L._1pjXb>span{background:#3f51b5;color:#fff}._2qF_L:hover:not(.Cf3yF)>span{cursor:pointer}._2qF_L.Cf3yF{opacity:.25}._1hSm5{background-color:#fff}.Rk89h,._1nam4{position:absolute}._2bZap,.m5B3T{transition-duration:350ms;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;transition-timing-function:ease-in-out}.Rk89h{opacity:0;-webkit-transform:translateX(100%);transform:translateX(100%)}.Rk89h.m5B3T{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}._1nam4{opacity:1;-webkit-transform:translateX(0);transform:translateX(0)}._1nam4._2bZap{opacity:0;-webkit-transform:translateX(-100%);transform:translateX(-100%)}._2WGqM,.bGml_{position:absolute;transition-duration:.35s;transition-property:opacity,-webkit-transform;transition-property:transform,opacity;transition-property:transform,opacity,-webkit-transform;transition-timing-function:ease-in-out}.bGml_{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.bGml_._3Ghls{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}._2WGqM{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}._2WGqM._2WLHG{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.lFVgC{padding:20px 0;position:relative;box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}.lFVgC *,.lFVgC ::after,.lFVgC ::before{box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-touch-callout:none}.lFVgC._1nKdf{margin-left:68px}._3ga1V{color:rgba(0,0,0,.26);display:block;font-size:24px!important;height:48px;left:-68px;line-height:48px!important;position:absolute;text-align:center;top:16px;transition:color .3s cubic-bezier(.4,0,.2,1);width:48px}._4bZUj{background-color:transparent;border-bottom:1px solid rgba(0,0,0,.12);border-left:0;border-right:0;border-top:0;color:#212121;display:block;font-size:16px;outline:0;padding:8px 0;width:100%}._4bZUj:focus:not([disabled]):not([readonly])~._3FySS::after,._4bZUj:focus:not([disabled]):not([readonly])~._3FySS::before{width:50%}._4bZUj:focus:not([disabled]):not([readonly])~._34120:not(.GRQEP){color:#3f51b5}._4bZUj:focus:not([disabled]):not([readonly])~._34120>._2G0aY{color:#de3226}._4bZUj:focus:not([disabled]):not([readonly])~.bMyi_{display:block;opacity:1}._4bZUj:focus:not([disabled]):not([readonly])~._3ga1V{color:#3f51b5}._4bZUj:focus:not([disabled]):not([readonly])._34NWn~.bMyi_{opacity:0}._4bZUj._34NWn~._34120:not(.GRQEP),._4bZUj:focus:not([disabled]):not([readonly])~._34120:not(.GRQEP),._4bZUj[type=date]~._34120:not(.GRQEP),._4bZUj[type=time]~._34120:not(.GRQEP){font-size:12px;top:6px}._4bZUj._34NWn~._34120.GRQEP,._4bZUj._34NWn~.bMyi_{display:none}._34120{color:rgba(0,0,0,.26);font-size:16px;left:0;line-height:16px;pointer-events:none;position:absolute;top:32px;transition-duration:.3s;transition-property:top,font-size,color;transition-timing-function:cubic-bezier(.4,0,.2,1)}._34120.GRQEP~.bMyi_{display:none}.bMyi_{color:rgba(0,0,0,.26);font-size:16px;left:0;line-height:16px;opacity:1;pointer-events:none;position:absolute;top:32px;transition-duration:.3s;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1)}._3FySS{display:block;position:relative;width:100%}._3FySS::after,._3FySS::before{background-color:#3f51b5;bottom:0;content:'';height:2px;position:absolute;transition-duration:.2s;transition-property:width,background-color;transition-timing-function:cubic-bezier(.4,0,.2,1);width:0}._3FySS::before{left:50%}._3FySS::after{right:50%}._1oTuT,._2k5Jz{color:#de3226;font-size:12px;line-height:20px;margin-bottom:-20px}._1oTuT{color:rgba(0,0,0,.26);position:absolute;right:0}._3ZfJq>._4bZUj{border-bottom-style:dotted;color:rgba(0,0,0,.26)}._2s74E{padding-bottom:0}._2s74E>._4bZUj{border-bottom-color:#de3226;margin-top:1px}._2s74E>._1oTuT,._2s74E>._34120{color:#de3226}._2s74E>._34120>._2G0aY{color:#de3226}._2gAMv{display:none}._3nrqp{-webkit-box-align:center;-ms-flex-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex;height:100vh;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:fixed;top:0;width:100vw;z-index:200;box-sizing:border-box;font-family:Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%}._3nrqp *,._3nrqp ::after,._3nrqp ::before{box-sizing:border-box;-webkit-font-smoothing:antialiased;font-smoothing:antialiased;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;text-size-adjust:100%;-webkit-touch-callout:none}._3lw90{background-color:#fff;border-radius:2px;box-shadow:0 19px 60px rgba(0,0,0,.3),0 15px 20px rgba(0,0,0,.22);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;max-height:96vh;max-width:96vw;opacity:0;overflow:hidden;-webkit-transform:translateY(-40px);transform:translateY(-40px);transition:opacity .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1);transition:opacity .3s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.4,0,.2,1),-webkit-transform .3s cubic-bezier(.4,0,.2,1);transition-delay:60ms}._3lw90._3ea_1{opacity:1;-webkit-transform:translateY(0);transform:translateY(0)}._38VTT{width:30vw}@media screen and (max-width:720px){._38VTT{width:50vw}}@media screen and (max-width:600px){._38VTT{width:75vw}}._1K3iz{width:50vw}@media screen and (max-width:600px){._1K3iz{width:96vw}}._10LcP{width:96vw}._3tLXQ{width:96vw}@media screen and (max-width:600px){._3tLXQ{border-radius:0;max-height:100vh;max-width:100vw;min-height:100vh;width:100vw}}._2J-aP{color:#000;-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;font-size:20px;font-weight:500;letter-spacing:.02em;line-height:1;margin:0 0 16px}._1Ivuq{color:#757575;-webkit-box-flex:2;-ms-flex-positive:2;flex-grow:2;padding:24px}._1Ivuq p{font-size:14px;font-weight:400;letter-spacing:0;line-height:24px;margin:0}.wgwdj{-webkit-box-flex:0;-ms-flex-positive:0;flex-grow:0;padding:8px;text-align:right}._22_c6{margin-left:8px;min-width:0;padding-left:8px;padding-right:8px}._2LA9x{background-color:#000;bottom:0;height:100vh;left:0;opacity:0;pointer-events:none;position:fixed;top:0;transition:opacity .3s cubic-bezier(.4,0,.2,1);width:100vw}._2LA9x._1mb5R{opacity:.6;pointer-events:all} \ No newline at end of file diff --git a/examples/with-react-toolbox/static/theme.js b/examples/with-react-toolbox/static/theme.js new file mode 100644 index 00000000..781cce7e --- /dev/null +++ b/examples/with-react-toolbox/static/theme.js @@ -0,0 +1 @@ +module.exports = {'RTButton': {'button': '_2Agdx', 'rippleWrapper': '_3AVBi', 'squared': '_2GH_L', 'icon': '_3aBSX', 'solid': '_1ZxqC', 'raised': '_221ic _2Agdx _2GH_L _1ZxqC', 'flat': '_1jWAQ _2Agdx _2GH_L', 'floating': '_3IRMZ _2Agdx _1ZxqC', 'mini': '_2DCN-', 'toggle': 'hC5Z2 _2Agdx', 'primary': '_3tTAW', 'accent': '_2wp6F', 'neutral': '_2CPs4', 'inverse': '_2SPZr'}, 'RTRipple': {'rippleWrapper': '_16N7o', 'ripple': '_3SV_u', 'rippleRestarting': '_2OZWa', 'rippleActive': '_3O2Ue'}, 'RTDatePicker': {'input': '_2ISvI', 'disabled': 'Cf3yF', 'inputElement': 'x7MhN', 'header': '_2vLUd', 'year': '_1VWY-', 'date': '_3K2Ws', 'calendarWrapper': '_1t-4v', 'yearsDisplay': '_2OzvT', 'monthsDisplay': '_2DDdC', 'dialog': '_3fCV6', 'button': '_2hL6u', 'calendar': '_1X9ls', 'prev': 'Nv9Bc', 'next': '_3iPkS', 'title': '_2ESpD', 'years': 'zEdgW', 'active': '_1pjXb', 'week': 'PcByv', 'days': '_1qh3T', 'day': '_2qF_L', 'month': '_1hSm5', 'slideRightEnter': 'Rk89h', 'slideRightLeave': '_1nam4', 'slideRightEnterActive': 'm5B3T', 'slideRightLeaveActive': '_2bZap', 'slideLeftEnter': 'bGml_', 'slideLeftLeave': '_2WGqM', 'slideLeftEnterActive': '_3Ghls', 'slideLeftLeaveActive': '_2WLHG'}, 'RTInput': {'input': 'lFVgC', 'withIcon': '_1nKdf', 'icon': '_3ga1V', 'inputElement': '_4bZUj', 'bar': '_3FySS', 'label': '_34120', 'fixed': 'GRQEP', 'required': '_2G0aY', 'hint': 'bMyi_', 'filled': '_34NWn', 'error': '_2k5Jz', 'counter': '_1oTuT', 'disabled': '_3ZfJq', 'errored': '_2s74E', 'hidden': '_2gAMv'}, 'RTDialog': {'wrapper': '_3nrqp', 'dialog': '_3lw90', 'active': '_3ea_1', 'small': '_38VTT', 'normal': '_1K3iz', 'large': '_10LcP', 'fullscreen': '_3tLXQ', 'title': '_2J-aP', 'body': '_1Ivuq', 'navigation': 'wgwdj', 'button': '_22_c6'}, 'RTOverlay': {'overlay': '_2LA9x', 'active': '_1mb5R'}} From e12db8c1c411b21759993f10f331deac23ff1aca Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Thu, 25 May 2017 18:32:34 +0200 Subject: [PATCH 04/14] fix(package): update webpack to version 2.6.0 (#2043) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4037d78b..78e47d96 100644 --- a/package.json +++ b/package.json @@ -92,7 +92,7 @@ "unfetch": "2.1.2", "url": "0.11.0", "uuid": "3.0.1", - "webpack": "2.5.1", + "webpack": "2.6.0", "webpack-dev-middleware": "1.10.2", "webpack-hot-middleware": "2.18.0", "write-file-webpack-plugin": "4.0.2", From c80fdf3d1cd6982f9588df978575911ae2e29646 Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Thu, 25 May 2017 18:33:04 +0200 Subject: [PATCH 05/14] fix(package): update babel-preset-env to version 1.5.1 (#2041) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 78e47d96..1364c775 100644 --- a/package.json +++ b/package.json @@ -56,7 +56,7 @@ "babel-plugin-transform-react-jsx-source": "6.22.0", "babel-plugin-transform-react-remove-prop-types": "0.4.5", "babel-plugin-transform-runtime": "6.22.0", - "babel-preset-env": "1.5.0", + "babel-preset-env": "1.5.1", "babel-preset-react": "6.24.1", "babel-runtime": "6.23.0", "babel-template": "6.24.1", From 15e9573ded8448855591449a733a3e851def1a5b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 25 May 2017 18:36:21 +0200 Subject: [PATCH 06/14] feat: add an example with the next branch of Material-UI (#2036) --- examples/with-material-ui-next/README.md | 29 +++++++++ .../with-material-ui-next/components/App.js | 52 +++++++++++++++ examples/with-material-ui-next/package.json | 13 ++++ .../with-material-ui-next/pages/_document.js | 49 ++++++++++++++ examples/with-material-ui-next/pages/index.js | 64 +++++++++++++++++++ .../styles/createDefaultContext.js | 38 +++++++++++ examples/with-material-ui/pages/index.js | 6 +- 7 files changed, 248 insertions(+), 3 deletions(-) create mode 100644 examples/with-material-ui-next/README.md create mode 100644 examples/with-material-ui-next/components/App.js create mode 100644 examples/with-material-ui-next/package.json create mode 100644 examples/with-material-ui-next/pages/_document.js create mode 100644 examples/with-material-ui-next/pages/index.js create mode 100644 examples/with-material-ui-next/styles/createDefaultContext.js diff --git a/examples/with-material-ui-next/README.md b/examples/with-material-ui-next/README.md new file mode 100644 index 00000000..b821d6a6 --- /dev/null +++ b/examples/with-material-ui-next/README.md @@ -0,0 +1,29 @@ +[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-material-ui-next) +# Material-UI example + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-material-ui-next +cd with-material-ui-next +``` + +Install it and run: + +```bash +npm install +npm run dev +``` + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +## The idea behind the example + +This example features how you use [material-ui](https://github.com/callemall/material-ui) (Material components that implement Google's Material Design) with Next.js. + diff --git a/examples/with-material-ui-next/components/App.js b/examples/with-material-ui-next/components/App.js new file mode 100644 index 00000000..a7026458 --- /dev/null +++ b/examples/with-material-ui-next/components/App.js @@ -0,0 +1,52 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { withStyles, createStyleSheet, MuiThemeProvider } from 'material-ui/styles' +import { getDefaultContext } from '../styles/createDefaultContext' + +const styleSheet = createStyleSheet('App', theme => ({ + '@global': { + html: { + background: theme.palette.background.default, + fontFamily: theme.typography.fontFamily, + WebkitFontSmoothing: 'antialiased', // Antialiasing. + MozOsxFontSmoothing: 'grayscale' // Antialiasing. + }, + body: { + margin: 0 + }, + a: { + color: 'inherit' + } + } +})) + +let AppWrapper = props => props.children + +AppWrapper = withStyles(styleSheet)(AppWrapper) + +class App extends Component { + componentDidMount () { + // Remove the server-side injected CSS. + const jssStyles = document.querySelector('#jss-server-side') + if (jssStyles && jssStyles.parentNode) { + jssStyles.parentNode.removeChild(jssStyles) + } + } + + render () { + const { styleManager, theme } = getDefaultContext() + return ( + + + {this.props.children} + + + ) + } +} + +App.propTypes = { + children: PropTypes.node.isRequired +} + +export default App diff --git a/examples/with-material-ui-next/package.json b/examples/with-material-ui-next/package.json new file mode 100644 index 00000000..0ad199a5 --- /dev/null +++ b/examples/with-material-ui-next/package.json @@ -0,0 +1,13 @@ +{ + "dependencies": { + "material-ui": "next", + "next": "latest", + "react": "^15.5.4", + "react-dom": "^15.5.4" + }, + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + } +} diff --git a/examples/with-material-ui-next/pages/_document.js b/examples/with-material-ui-next/pages/_document.js new file mode 100644 index 00000000..f4039568 --- /dev/null +++ b/examples/with-material-ui-next/pages/_document.js @@ -0,0 +1,49 @@ +import React from 'react' +import Document, { Head, Main, NextScript } from 'next/document' +import { getDefaultContext, setDefaultContext } from '../styles/createDefaultContext' + +export default class MyDocument extends Document { + static async getInitialProps (ctx) { + setDefaultContext() + const page = ctx.renderPage() + const styleContext = getDefaultContext() + return { + ...page, + styles: ( + + ) + } + } + + render () { + const styleContext = getDefaultContext() + return ( + + + My page + + {/* Use minimum-scale=1 to enable GPU rasterization */} + + {/* PWA primary color */} + + + + +
+ + + + ) + } +} diff --git a/examples/with-material-ui-next/pages/index.js b/examples/with-material-ui-next/pages/index.js new file mode 100644 index 00000000..80c0095a --- /dev/null +++ b/examples/with-material-ui-next/pages/index.js @@ -0,0 +1,64 @@ +import React, {Component} from 'react' +import Button from 'material-ui/Button' +import Dialog, { + DialogTitle, + DialogContent, + DialogContentText, + DialogActions +} from 'material-ui/Dialog' +import Typography from 'material-ui/Typography' +import App from '../components/App' + +const styles = { + container: { + textAlign: 'center', + paddingTop: 200 + } +} + +class Index extends Component { + constructor (props) { + super(props) + + this.state = { + open: false + } + } + + handleRequestClose = () => { + this.setState({ + open: false + }) + }; + + handleClick = () => { + this.setState({ + open: true + }) + }; + + render () { + return ( + +
+ + Super Secret Password + + 1-2-3-4-5 + + + + + + Material-UI + example project + +
+ + ) + } +} + +export default Index diff --git a/examples/with-material-ui-next/styles/createDefaultContext.js b/examples/with-material-ui-next/styles/createDefaultContext.js new file mode 100644 index 00000000..0755d36a --- /dev/null +++ b/examples/with-material-ui-next/styles/createDefaultContext.js @@ -0,0 +1,38 @@ +import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider' +import createPalette from 'material-ui/styles/palette' +import createMuiTheme from 'material-ui/styles/theme' +import { purple, green } from 'material-ui/styles/colors' + +const createDefaultContext = () => + MuiThemeProvider.createDefaultContext({ + theme: createMuiTheme({ + palette: createPalette({ + primary: purple, + accent: green + }) + }) + }) + +// Singleton hack as there is no way to pass variables from _document.js to pages yet. +let context = null + +export function setDefaultContext () { + context = createDefaultContext() +} + +export function getDefaultContext () { + // Make sure to create a new store for every server-side request so that data + // isn't shared between connections (which would be bad) + if (!process.browser) { + return context + } + + // Reuse store on the client-side + if (!context) { + context = createDefaultContext() + } + + return context +} + +export default createDefaultContext diff --git a/examples/with-material-ui/pages/index.js b/examples/with-material-ui/pages/index.js index e2ffa6d9..3f9a6be5 100644 --- a/examples/with-material-ui/pages/index.js +++ b/examples/with-material-ui/pages/index.js @@ -27,7 +27,7 @@ const muiTheme = { } } -class Main extends Component { +class Index extends Component { static getInitialProps ({ req }) { // Ensures material-ui renders the correct css prefixes server-side let userAgent @@ -86,7 +86,7 @@ class Main extends Component {

example project

@@ -95,4 +95,4 @@ class Main extends Component { } } -export default Main +export default Index From c443635945bf88d0a7291f1fea285cdd00b158bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jo=C3=A3o=20Carmona?= Date: Thu, 25 May 2017 18:37:10 +0200 Subject: [PATCH 07/14] feat(with-redux): add redux tools to example (#1994) --- examples/with-redux/package.json | 1 + examples/with-redux/store.js | 3 ++- 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/with-redux/package.json b/examples/with-redux/package.json index 03810f25..2885ec60 100644 --- a/examples/with-redux/package.json +++ b/examples/with-redux/package.json @@ -10,6 +10,7 @@ "next": "latest", "next-redux-wrapper": "^1.0.0", "react": "^15.4.2", + "redux-devtools-extension": "^2.13.2", "react-dom": "^15.4.2", "react-redux": "^5.0.1", "redux": "^3.6.0", diff --git a/examples/with-redux/store.js b/examples/with-redux/store.js index 71ab2d5e..ce5abe4d 100644 --- a/examples/with-redux/store.js +++ b/examples/with-redux/store.js @@ -1,4 +1,5 @@ import { createStore, applyMiddleware } from 'redux' +import { composeWithDevTools } from 'redux-devtools-extension' import thunkMiddleware from 'redux-thunk' const exampleInitialState = { @@ -39,5 +40,5 @@ export const addCount = () => dispatch => { } export const initStore = (initialState = exampleInitialState) => { - return createStore(reducer, initialState, applyMiddleware(thunkMiddleware)) + return createStore(reducer, initialState, composeWithDevTools(applyMiddleware(thunkMiddleware))) } From f0c646a3663811f3dd8cbcbae58c5dd75636d85d Mon Sep 17 00:00:00 2001 From: Miles Rausch Date: Sat, 27 May 2017 06:14:21 -0500 Subject: [PATCH 08/14] Correct "yo" to "to" (#2078) --- examples/with-glamor/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-glamor/README.md b/examples/with-glamor/README.md index 798ec168..e358ea09 100644 --- a/examples/with-glamor/README.md +++ b/examples/with-glamor/README.md @@ -26,6 +26,6 @@ now ## The idea behind the example -This example features how yo use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor). +This example features how to use a different styling solution than [styled-jsx](https://github.com/zeit/styled-jsx) that also supports universal styles. That means we can serve the required styles for the first render within the HTML and then load the rest in the client. In this case we are using [glamor](https://github.com/threepointone/glamor). For this purpose we are extending the `` and injecting the server side rendered styles into the ``. From 6fe552601bb043db84c4af641e92daed47c8cf9f Mon Sep 17 00:00:00 2001 From: "greenkeeper[bot]" Date: Sat, 27 May 2017 13:52:09 +0200 Subject: [PATCH 09/14] fix(package): update mitt to version 1.1.2 (#2027) --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 1364c775..d64fc7ae 100644 --- a/package.json +++ b/package.json @@ -75,7 +75,7 @@ "loader-utils": "1.1.0", "md5-file": "3.1.1", "minimist": "1.2.0", - "mitt": "1.1.1", + "mitt": "1.1.2", "mkdirp-then": "1.2.0", "mv": "2.1.1", "mz": "2.6.0", From 98fb1a0df152042fd394e64af5a9a229df68cc22 Mon Sep 17 00:00:00 2001 From: Giuseppe Date: Sat, 27 May 2017 19:46:58 +0200 Subject: [PATCH 10/14] Point to styled-jsx npm package's readme (#2085) As we add new features and update README.md in zeit/styled-jsx people ask questions, typically why doesn't x works. Master shouldn't be the source of truth, better link to the npm package's landing page. --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index 03c96c87..cb998730 100644 --- a/readme.md +++ b/readme.md @@ -146,7 +146,7 @@ export default () => ( ) ``` -Please see the [styled-jsx documentation](https://github.com/zeit/styled-jsx) for more examples. +Please see the [styled-jsx documentation](https://www.npmjs.com/package/styled-jsx) for more examples. #### CSS-in-JS From 9f994631f8d9d8121ad3dec7a4c5c8c6e1298d2b Mon Sep 17 00:00:00 2001 From: Bruno Date: Mon, 29 May 2017 14:36:57 -0300 Subject: [PATCH 11/14] Small code fix (#2099) Using actionType instead of plain string --- examples/with-redux/store.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/with-redux/store.js b/examples/with-redux/store.js index ce5abe4d..8291b0f4 100644 --- a/examples/with-redux/store.js +++ b/examples/with-redux/store.js @@ -32,7 +32,7 @@ export const serverRenderClock = (isServer) => dispatch => { } export const startClock = () => dispatch => { - return setInterval(() => dispatch({ type: 'TICK', light: true, ts: Date.now() }), 800) + return setInterval(() => dispatch({ type: actionTypes.TICK, light: true, ts: Date.now() }), 800) } export const addCount = () => dispatch => { From e1d5c3df55925f0d13efc7fdde6a4599e939dba9 Mon Sep 17 00:00:00 2001 From: Benjamin Hoffman Date: Tue, 30 May 2017 11:50:20 -0700 Subject: [PATCH 12/14] Updates link in Production deployment of readme (#2113) I think I found a typo. Hope this fix matches the author's intended meaning. --- readme.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/readme.md b/readme.md index cb998730..13b8637b 100644 --- a/readme.md +++ b/readme.md @@ -863,7 +863,7 @@ Then run `now` and enjoy! Next.js can be deployed to other hosting solutions too. Please have a look at the ['Deployment'](https://github.com/zeit/next.js/wiki/Deployment) section of the wiki. -Note: we recommend putting `.next`, or your custom dist folder (Please have a look at ['Custom Config'](You can set a custom folder in config https://github.com/zeit/next.js#custom-configuration.)), in `.npmignore` or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next` or your custom dist folder) +Note: we recommend putting `.next`, or your custom dist folder (Please have a look at ['Custom Config'](https://github.com/zeit/next.js#custom-configuration). You can set a custom folder in config, `.npmignore`, or `.gitignore`. Otherwise, use `files` or `now.files` to opt-into a whitelist of files you want to deploy (and obviously exclude `.next` or your custom dist folder). ## Static HTML export From 3a0fe4349c911e49f78c0fb9a424ce3fe4717e94 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 30 May 2017 20:51:52 +0200 Subject: [PATCH 13/14] Fix escape issue (#2115) For instance: ```css .MuiGrid-gutter-xs-8-1393152966 > .MuiGrid-typeItem-3088349198 { font-family: "Roboto", "Helvetica", "Arial", sans-serif; } ``` --- examples/with-material-ui-next/pages/_document.js | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/examples/with-material-ui-next/pages/_document.js b/examples/with-material-ui-next/pages/_document.js index f4039568..1941b5ec 100644 --- a/examples/with-material-ui-next/pages/_document.js +++ b/examples/with-material-ui-next/pages/_document.js @@ -9,11 +9,7 @@ export default class MyDocument extends Document { const styleContext = getDefaultContext() return { ...page, - styles: ( - - ) + styles: