From e78eff5dd772599d861098e48bbb3caf83e5ac5e Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 20 Sep 2016 18:03:48 -0400 Subject: [PATCH 1/3] Add JSS example --- examples/.eslintrc | 4 +- examples/jss/package.json | 19 +++ examples/jss/src/components/app/app.js | 29 ++++ examples/jss/src/components/app/index.js | 1 + .../jss/src/components/content/content.js | 39 +++++ examples/jss/src/components/content/index.js | 1 + examples/jss/src/components/footer/footer.js | 136 ++++++++++++++++++ examples/jss/src/components/footer/index.js | 1 + examples/jss/src/components/header/header.js | 65 +++++++++ examples/jss/src/components/header/index.js | 1 + examples/jss/src/components/tweet/index.js | 1 + examples/jss/src/components/tweet/tweet.js | 39 +++++ examples/jss/src/index.js | 41 ++++++ 13 files changed, 376 insertions(+), 1 deletion(-) create mode 100644 examples/jss/package.json create mode 100644 examples/jss/src/components/app/app.js create mode 100644 examples/jss/src/components/app/index.js create mode 100644 examples/jss/src/components/content/content.js create mode 100644 examples/jss/src/components/content/index.js create mode 100644 examples/jss/src/components/footer/footer.js create mode 100644 examples/jss/src/components/footer/index.js create mode 100644 examples/jss/src/components/header/header.js create mode 100644 examples/jss/src/components/header/index.js create mode 100644 examples/jss/src/components/tweet/index.js create mode 100644 examples/jss/src/components/tweet/tweet.js create mode 100644 examples/jss/src/index.js diff --git a/examples/.eslintrc b/examples/.eslintrc index 066b5e5..40ad4e0 100644 --- a/examples/.eslintrc +++ b/examples/.eslintrc @@ -1,6 +1,8 @@ { "extends": "airbnb", - + "rules": { + "react/prop-types": 0 + }, "env": { "browser": true, "mocha": true diff --git a/examples/jss/package.json b/examples/jss/package.json new file mode 100644 index 0000000..dcfc2f3 --- /dev/null +++ b/examples/jss/package.json @@ -0,0 +1,19 @@ +{ + "name": "jss-example", + "version": "1.0.0", + "description": "", + "main": "src/index.js", + "scripts": { + "start": "../node_modules/.bin/webpack-dev-server --config ../webpack.base.babel.js --content-base build" + }, + "author": "Max Stoiber", + "license": "MIT", + "devDependencies": { + "css-loader": "0.25.0", + "jss": "5.5.4", + "jss-preset-default": "0.4.0", + "react-jss": "3.0.1", + "style-loader": "0.13.1" + }, + "dependencies": {} +} diff --git a/examples/jss/src/components/app/app.js b/examples/jss/src/components/app/app.js new file mode 100644 index 0000000..5e68c76 --- /dev/null +++ b/examples/jss/src/components/app/app.js @@ -0,0 +1,29 @@ +import React from 'react'; +import useSheet from 'react-jss'; + +import Tweet from '../tweet'; +import data from '../../../../shared/data/755481795206971392.json'; + +import 'normalize.css'; + +const styles = { + // Local styles + container: { + margin: '0 auto', + width: '100%', + '@media screen and (min-width: 360px)': { + maxWidth: '400px', + }, + '@media screen and (min-width: 600px)': { + maxWidth: '600px', + }, + }, +}; + +const App = (props) => ( +
+ +
+); + +export default useSheet(App, styles); diff --git a/examples/jss/src/components/app/index.js b/examples/jss/src/components/app/index.js new file mode 100644 index 0000000..12e3617 --- /dev/null +++ b/examples/jss/src/components/app/index.js @@ -0,0 +1 @@ +export { default } from './app'; diff --git a/examples/jss/src/components/content/content.js b/examples/jss/src/components/content/content.js new file mode 100644 index 0000000..35cf09f --- /dev/null +++ b/examples/jss/src/components/content/content.js @@ -0,0 +1,39 @@ +import React, { PropTypes } from 'react'; +import useSheet from 'react-jss'; + +const styles = { + text: { + fontSize: '1.25rem', + fontWeight: '300', + lineHeight: '1.5em', + margin: '0', + padding: '.65625rem 0 .98438rem', + }, + media: { + borderRadius: '.35rem', + border: '1px solid #e1e8ed', + color: '#1da1f2', + display: 'block', + margin: '.65625rem 0 1.3125rem', + }, + image: { + display: 'block', + maxWidth: '100%', + }, +}; + +const Content = ({ text, media, sheet }) => ( +
+

+ + + +

+); + +Content.propTypes = { + media: PropTypes.object, + text: PropTypes.string, +}; + +export default useSheet(Content, styles); diff --git a/examples/jss/src/components/content/index.js b/examples/jss/src/components/content/index.js new file mode 100644 index 0000000..3089d80 --- /dev/null +++ b/examples/jss/src/components/content/index.js @@ -0,0 +1 @@ +export { default } from './content'; diff --git a/examples/jss/src/components/footer/footer.js b/examples/jss/src/components/footer/footer.js new file mode 100644 index 0000000..ac03068 --- /dev/null +++ b/examples/jss/src/components/footer/footer.js @@ -0,0 +1,136 @@ +import React, { Component, PropTypes } from 'react'; +import useSheet from 'react-jss'; + +import ReplyIcon from '../../../../shared/assets/reply.svg'; +import RetweetIcon from '../../../../shared/assets/retweet.svg'; +import LikeIcon from '../../../../shared/assets/like.svg'; +import MoreIcon from '../../../../shared/assets/more.svg'; + +const styles = { + '@keyframes liked': { + '50%': { + transform: 'scale(1.2)', + }, + '100%': { + tranform: 'scale(1)', + }, + }, + date: { + paddingBottom: '.98438rem', + color: '#8899a6', + }, + counters: { + borderTop: '1px solid #e1e8ed', + padding: '.98438rem 0', + textTransform: 'uppercase', + }, + value: { + fontWeight: '700', + }, + label: { + color: '#8899a6', + fontSize: '.85rem', + }, + favorite: { + display: 'inline-block', + marginLeft: '1.96875rem', + }, + actions: { + alignItems: 'center', + borderBottom: '1px solid #e1e8ed', + borderTop: '1px solid #e1e8ed', + color: '#8899a6', + display: 'flex', + fontSize: '1.5rem', + height: '3.28125rem', + width: '100%', + }, + icon: { + display: 'flex', + flexGrow: '1', + justifyContent: 'center', + textAlign: 'center', + }, + button: { + display: 'flex', + flexGrow: '1', + justifyContent: 'center', + textAlign: 'center', + background: 'none', + border: 'none', + color: 'inherit', + cursor: 'pointer', + fontSize: 'inherit', + outline: 'none', + }, + liked: { + animationName: 'liked', + animationDuration: '.25s', + color: '#e81c4f', + }, +}; + +class Footer extends Component { + + constructor(props) { + super(props); + + this.state = { + liked: false, + }; + + this.handleClick = this.handleClick.bind(this); + } + + handleClick() { + this.setState({ + liked: !this.state.liked, + }); + } + + render() { + const { createdAt, favoriteCount, retweetCount, sheet } = this.props; + const { liked } = this.state; + + return ( +
+
{createdAt}
+
+ + {retweetCount} + Retweets + + + + {liked ? favoriteCount + 1 : favoriteCount} + + Likes + +
+
+
+ +
+
+ +
+ +
+ +
+
+
+ ); + } + +} + +Footer.propTypes = { + createdAt: PropTypes.string, + favoriteCount: PropTypes.number, + retweetCount: PropTypes.number, +}; + +export default useSheet(Footer, styles); diff --git a/examples/jss/src/components/footer/index.js b/examples/jss/src/components/footer/index.js new file mode 100644 index 0000000..15ebc72 --- /dev/null +++ b/examples/jss/src/components/footer/index.js @@ -0,0 +1 @@ +export { default } from './footer'; diff --git a/examples/jss/src/components/header/header.js b/examples/jss/src/components/header/header.js new file mode 100644 index 0000000..c44c7a8 --- /dev/null +++ b/examples/jss/src/components/header/header.js @@ -0,0 +1,65 @@ +import React, { PropTypes } from 'react'; +import useSheet from 'react-jss'; + +const styles = { + header: { + display: 'flex', + padding: '1rem 0 .65625rem', + }, + profile: { + flex: '1 0 0', + margin: '0 .3rem', + }, + image: { + borderRadius: '.35rem', + display: 'block', + width: '100%', + }, + user: { + flex: '7 0 0', + margin: '0 .3rem', + }, + url: { + display: 'inline-block', + marginTop: '-.15rem', + }, + name: { + color: '#292f33', + fontWeight: '700', + '&:hover': { + textDecoration: 'underline', + }, + }, + screenName: { + color: '#8899a6', + '&:before': { + content: '"\\a"', + whiteSpace: 'pre', + }, + }, +}; + +const Header = ({ name, profileImageUrl, screenName, url, sheet }) => ( +
+
+ + {name} + +
+
+ + {name} + @{screenName} + +
+
+); + +Header.propTypes = { + name: PropTypes.string, + profileImageUrl: PropTypes.string, + screenName: PropTypes.string, + url: PropTypes.string, +}; + +export default useSheet(Header, styles); diff --git a/examples/jss/src/components/header/index.js b/examples/jss/src/components/header/index.js new file mode 100644 index 0000000..77992c5 --- /dev/null +++ b/examples/jss/src/components/header/index.js @@ -0,0 +1 @@ +export { default } from './header'; diff --git a/examples/jss/src/components/tweet/index.js b/examples/jss/src/components/tweet/index.js new file mode 100644 index 0000000..5ec76a7 --- /dev/null +++ b/examples/jss/src/components/tweet/index.js @@ -0,0 +1 @@ +export { default } from './tweet'; diff --git a/examples/jss/src/components/tweet/tweet.js b/examples/jss/src/components/tweet/tweet.js new file mode 100644 index 0000000..11754f9 --- /dev/null +++ b/examples/jss/src/components/tweet/tweet.js @@ -0,0 +1,39 @@ +import React, { PropTypes } from 'react'; +import useSheet from 'react-jss'; + +import Header from '../header'; +import Content from '../content'; +import Footer from '../footer'; +import { transform } from '../../../../shared/utils/text'; + +const styles = { + container: { + padding: '0 .6rem', + }, +}; + +const Tweet = ({ data, sheet }) => ( +
+
+ +
+
+); + +Tweet.propTypes = { + data: PropTypes.object, +}; + +export default useSheet(Tweet, styles); diff --git a/examples/jss/src/index.js b/examples/jss/src/index.js new file mode 100644 index 0000000..b82f513 --- /dev/null +++ b/examples/jss/src/index.js @@ -0,0 +1,41 @@ +import React from 'react'; +import { render } from 'react-dom'; +import jss from 'jss'; +import preset from 'jss-preset-default'; + +jss.setup(preset()); + +const globalStyles = { + // Global styles + html: { + color: '#292f33', + fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', + fontSize: '14px', + lineHeight: '1.3125', + }, + a: { + textDecoration: 'none', + color: '#1da1f2', + }, + svg: { + fill: 'currentColor', + height: '1.25em', + }, + '@media screen and (min-width: 360px)': { + html: { + fontSize: '15px', + }, + }, + '@media screen and (min-width: 600px)': { + html: { + fontSize: '16px', + }, + }, +}; + +// Attach global styles +jss.createStyleSheet(globalStyles, { named: false }).attach(); + +import App from './components/app'; + +render(, document.getElementById('example-root')); From 7f70a382a5c16e76f28dd24220e1f97d5dbd3542 Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 21 Sep 2016 14:42:59 -0400 Subject: [PATCH 2/3] Update with suggestions by @kof --- examples/jss/src/components/app/app.js | 5 ++--- examples/jss/src/components/content/content.js | 12 ++++++------ examples/jss/src/components/footer/footer.js | 6 +++--- examples/jss/src/components/header/header.js | 2 +- 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/examples/jss/src/components/app/app.js b/examples/jss/src/components/app/app.js index 5e68c76..bcdd0f1 100644 --- a/examples/jss/src/components/app/app.js +++ b/examples/jss/src/components/app/app.js @@ -7,7 +7,6 @@ import data from '../../../../shared/data/755481795206971392.json'; import 'normalize.css'; const styles = { - // Local styles container: { margin: '0 auto', width: '100%', @@ -20,8 +19,8 @@ const styles = { }, }; -const App = (props) => ( -
+const App = ({ sheet: { classes } }) => ( +
); diff --git a/examples/jss/src/components/content/content.js b/examples/jss/src/components/content/content.js index 35cf09f..83e82f0 100644 --- a/examples/jss/src/components/content/content.js +++ b/examples/jss/src/components/content/content.js @@ -4,9 +4,9 @@ import useSheet from 'react-jss'; const styles = { text: { fontSize: '1.25rem', - fontWeight: '300', + fontWeight: 300, lineHeight: '1.5em', - margin: '0', + margin: 0, padding: '.65625rem 0 .98438rem', }, media: { @@ -22,11 +22,11 @@ const styles = { }, }; -const Content = ({ text, media, sheet }) => ( +const Content = ({ text, media, sheet: { classes } }) => (
-

- - +

+ +

); diff --git a/examples/jss/src/components/footer/footer.js b/examples/jss/src/components/footer/footer.js index ac03068..fbd1ba3 100644 --- a/examples/jss/src/components/footer/footer.js +++ b/examples/jss/src/components/footer/footer.js @@ -25,7 +25,7 @@ const styles = { textTransform: 'uppercase', }, value: { - fontWeight: '700', + fontWeight: 700, }, label: { color: '#8899a6', @@ -47,13 +47,13 @@ const styles = { }, icon: { display: 'flex', - flexGrow: '1', + flexGrow: 1, justifyContent: 'center', textAlign: 'center', }, button: { display: 'flex', - flexGrow: '1', + flexGrow: 1, justifyContent: 'center', textAlign: 'center', background: 'none', diff --git a/examples/jss/src/components/header/header.js b/examples/jss/src/components/header/header.js index c44c7a8..18c5824 100644 --- a/examples/jss/src/components/header/header.js +++ b/examples/jss/src/components/header/header.js @@ -25,7 +25,7 @@ const styles = { }, name: { color: '#292f33', - fontWeight: '700', + fontWeight: 700, '&:hover': { textDecoration: 'underline', }, From e5437a83d76887880402234ba5905fa83110ef4c Mon Sep 17 00:00:00 2001 From: Max Date: Wed, 21 Sep 2016 14:43:07 -0400 Subject: [PATCH 3/3] Move global styles to separate file --- examples/jss/src/global-styles.js | 27 ++++++++++++++++++++++++ examples/jss/src/index.js | 35 ++++--------------------------- 2 files changed, 31 insertions(+), 31 deletions(-) create mode 100644 examples/jss/src/global-styles.js diff --git a/examples/jss/src/global-styles.js b/examples/jss/src/global-styles.js new file mode 100644 index 0000000..223083b --- /dev/null +++ b/examples/jss/src/global-styles.js @@ -0,0 +1,27 @@ +// Global styles +export default { + html: { + color: '#292f33', + fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', + fontSize: 14, + lineHeight: '1.3125', + }, + a: { + textDecoration: 'none', + color: '#1da1f2', + }, + svg: { + fill: 'currentColor', + height: '1.25em', + }, + '@media screen and (min-width: 360px)': { + html: { + fontSize: 15, + }, + }, + '@media screen and (min-width: 600px)': { + html: { + fontSize: 16, + }, + }, +}; diff --git a/examples/jss/src/index.js b/examples/jss/src/index.js index b82f513..598c9ee 100644 --- a/examples/jss/src/index.js +++ b/examples/jss/src/index.js @@ -3,39 +3,12 @@ import { render } from 'react-dom'; import jss from 'jss'; import preset from 'jss-preset-default'; -jss.setup(preset()); - -const globalStyles = { - // Global styles - html: { - color: '#292f33', - fontFamily: '"Helvetica Neue", Helvetica, Arial, sans-serif', - fontSize: '14px', - lineHeight: '1.3125', - }, - a: { - textDecoration: 'none', - color: '#1da1f2', - }, - svg: { - fill: 'currentColor', - height: '1.25em', - }, - '@media screen and (min-width: 360px)': { - html: { - fontSize: '15px', - }, - }, - '@media screen and (min-width: 600px)': { - html: { - fontSize: '16px', - }, - }, -}; +import App from './components/app'; +import globalStyles from './global-styles'; +// Setup JSS with default preset +jss.setup(preset()); // Attach global styles jss.createStyleSheet(globalStyles, { named: false }).attach(); -import App from './components/app'; - render(, document.getElementById('example-root'));