From 738a6544857f50887857c2be01027e4576b6cc41 Mon Sep 17 00:00:00 2001 From: Alex Alexeev Date: Tue, 1 Aug 2017 17:44:07 +0200 Subject: [PATCH] MUI setup with react-jss --- components/City.js | 22 +++- components/Location.js | 26 +++- components/LocationsList.js | 48 +++++-- components/withRoot.js | 69 ++++++++++ package.json | 3 + pages/_document.js | 57 +++++++++ pages/index.js | 5 +- styles/context.js | 49 +++++++ yarn.lock | 248 +++++++++++++++++++++++++++++++++++- 9 files changed, 501 insertions(+), 26 deletions(-) create mode 100644 components/withRoot.js create mode 100644 pages/_document.js create mode 100644 styles/context.js diff --git a/components/City.js b/components/City.js index d88f89d..f1ccc19 100644 --- a/components/City.js +++ b/components/City.js @@ -1,16 +1,24 @@ import { createFragmentContainer, graphql } from 'react-relay'; +import Typography from 'material-ui/Typography'; +import List, { ListItem, ListItemIcon, ListItemText } from 'material-ui/List'; + +const styles = { + subItem: { + marginLeft: '10px' + } +}; const City = ({ data }) => { if (!data) return null; return ( - + + ); }; @@ -21,5 +29,5 @@ export default createFragmentContainer( name slug } - `, + ` ); diff --git a/components/Location.js b/components/Location.js index b96f489..33db985 100644 --- a/components/Location.js +++ b/components/Location.js @@ -1,12 +1,28 @@ import { createFragmentContainer, graphql } from 'react-relay'; +import Card, { CardActions, CardContent } from 'material-ui/Card'; +import Typography from 'material-ui/Typography'; +import Button from 'material-ui/Button'; import City from './City'; const Location = ({ data }) => { return ( -
  • - {data.name} - -
    • + + + + {data.name} + + + + + + + +
    + + + ); }; @@ -20,5 +36,5 @@ export default createFragmentContainer( ...City } } - `, + ` ); diff --git a/components/LocationsList.js b/components/LocationsList.js index 3ace27f..e608e65 100644 --- a/components/LocationsList.js +++ b/components/LocationsList.js @@ -1,15 +1,47 @@ import { createFragmentContainer, graphql } from 'react-relay'; +import Typography from 'material-ui/Typography'; +import List from 'material-ui/List'; +import Paper from 'material-ui/Paper'; +import Divider from 'material-ui/Divider'; +import InboxIcon from 'material-ui-icons/Inbox'; +import DraftsIcon from 'material-ui-icons/Drafts'; +import Button from 'material-ui/Button'; import Location from './Location'; +const styles = { + header: { + textAlign: 'center', + padding: '10px 0 5px 0' + }, + container: { + margin: '100px auto 0 auto', + maxWidth: 400 + }, + list: { + width: '100%' + } +}; + const LocationsList = ({ data }) => { return ( -
    - Loaded: {data.allLocations.edges.length} -
      - {data.allLocations.edges.map(({ node, cursor }) => - , - )} -
    +
    +
    + + + Locations + + + Loaded: {data.allLocations.edges.length} + + +
    +
    + + {data.allLocations.edges.map(({ node, cursor }) => + + )} + +
    ); }; @@ -27,5 +59,5 @@ export default createFragmentContainer( } } } - `, + ` ); diff --git a/components/withRoot.js b/components/withRoot.js new file mode 100644 index 0000000..468e6d9 --- /dev/null +++ b/components/withRoot.js @@ -0,0 +1,69 @@ +import React, { Component } from 'react'; +import { JssProvider } from 'react-jss'; +import { + withStyles, + createStyleSheet, + MuiThemeProvider +} from 'material-ui/styles'; +import { getContext } from '../styles/context'; + +// Apply some reset +const styleSheet = createStyleSheet(theme => ({ + '@global': { + html: { + background: theme.palette.background.default, + WebkitFontSmoothing: 'antialiased', // Antialiasing. + MozOsxFontSmoothing: 'grayscale' // Antialiasing. + }, + body: { + margin: 0 + } + } +})); + +let AppWrapper = props => props.children; + +AppWrapper = withStyles(styleSheet)(AppWrapper); + +function withRoot(BaseComponent) { + class WithRoot extends Component { + static getInitialProps(ctx) { + if (BaseComponent.getInitialProps) { + return BaseComponent.getInitialProps(ctx); + } + + return {}; + } + + componentDidMount() { + // Remove the server-side injected CSS. + const jssStyles = document.querySelector('#jss-server-side'); + if (jssStyles && jssStyles.parentNode) { + jssStyles.parentNode.removeChild(jssStyles); + } + } + + render() { + const context = getContext(); + + return ( + + + + + + + + ); + } + } + + WithRoot.displayName = `withRoot(${BaseComponent.displayName})`; + + return WithRoot; +} + +export default withRoot; diff --git a/package.json b/package.json index 8e3e46a..cf7f3bf 100644 --- a/package.json +++ b/package.json @@ -1,8 +1,11 @@ { "dependencies": { + "material-ui": "next", + "material-ui-icons": "^1.0.0-alpha.19", "next": "beta", "react": "^15.6.1", "react-dom": "^15.6.1", + "react-jss": "^7.0.2", "react-relay": "^1.1.0" }, "devDependencies": { diff --git a/pages/_document.js b/pages/_document.js new file mode 100644 index 0000000..e198584 --- /dev/null +++ b/pages/_document.js @@ -0,0 +1,57 @@ +import React from 'react'; +import Document, { Head, Main, NextScript } from 'next/document'; +import { getContext, setContext } from '../styles/context'; + +export default class MyDocument extends Document { + static async getInitialProps(ctx) { + // Reset the context for handling a new request. + setContext(); + const page = ctx.renderPage(); + // Get the context with the collected side effects. + const context = getContext(); + return { + ...page, + styles: ( +