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..bcdd0f1 --- /dev/null +++ b/examples/jss/src/components/app/app.js @@ -0,0 +1,28 @@ +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 = { + container: { + margin: '0 auto', + width: '100%', + '@media screen and (min-width: 360px)': { + maxWidth: '400px', + }, + '@media screen and (min-width: 600px)': { + maxWidth: '600px', + }, + }, +}; + +const App = ({ sheet: { classes } }) => ( +
+ +
+); + +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..83e82f0 --- /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: { classes } }) => ( +
+

+ + + +

+); + +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..fbd1ba3 --- /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..18c5824 --- /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/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 new file mode 100644 index 0000000..598c9ee --- /dev/null +++ b/examples/jss/src/index.js @@ -0,0 +1,14 @@ +import React from 'react'; +import { render } from 'react-dom'; +import jss from 'jss'; +import preset from 'jss-preset-default'; + +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(); + +render(, document.getElementById('example-root'));