async-labs · nsalow32 · Aug 25, 2022 · Sep 5, 2022 · Sep 11, 2022
diff --git a/book/1-begin/.eslintrc.js b/book/1-begin/.eslintrc.js
@@ -52,4 +52,4 @@ module.exports = {
  },
  ],
  },
-};
+};
diff --git a/book/1-begin/components/Header.jsx b/book/1-begin/components/Header.jsx
@@ -0,0 +1,23 @@
+import Link from 'next/link';
+
+import Toolbar from '@mui/material/Toolbar';
+import Grid from '@mui/material/Grid';
+
+import { styleToolbar } from './SharedStyles';
+
+const newLocal = '/login';
+const Header = () => (
+ <div>
+ <Toolbar style={styleToolbar}>
+ <Grid container direction="row" justifyContent="spaace-around" align="center">
+ <Grid item xs={12} style={{ textAlign: 'right' }}>
+ <Link href={newLocal}>
+ <a style={{ margin: '0px 20px 0px auto' }}>Log in</a>
+ </Link>
+ </Grid>
+ </Grid>
+ </Toolbar>
+ </div>
+);
+
+export default Header;
diff --git a/book/1-begin/components/SharedStyles.js b/book/1-begin/components/SharedStyles.js
@@ -0,0 +1,55 @@
+const styleBigAvatar = {
+ width: '80px',
+ height: '80px',
+ margin: '0px auto 15px',
+};
+
+const styleRaisedButton = {
+ margin: '15px 15px 30px 15px',
+ font: '15px Muli',
+};
+
+const styleToolbar = {
+ background: '#392034',
+ height: '64px',
+ paddingRight: '20px',
+};
+
+const styleLoginButton = {
+ borderRadius: '2px',
+ textTransform: 'none',
+ font: '16px Mulo',
+ fontWeight: '400',
+ letterSpacing: '0.01em',
+ color: 'white',
+ backgroundColor: '#FFF',
+};
+
+const styleTextField = {
+ font: '15px Muli',
+ color: '#222',
+ fontWeight: '300',
+};
+
+const styleForm = {
+ margin: '7% auto',
+ width: '360px',
+};
+
+const styleGrid = {
+ margin: '0px auto',
+ font: '16px Muli',
+ color: '#222',
+ fontWeight: '300',
+ lineHeight: '1.5em',
+};
+
+module.exports = {
+ styleBigAvatar,
+ styleRaisedButton,
+ styleToolbar,
+ styleLoginButton,
+ styleTextField,
+ styleForm,
+ styleGrid,
+};
diff --git a/book/1-begin/lib/theme.js b/book/1-begin/lib/theme.js
@@ -0,0 +1,15 @@
+import { createTheme } from '@mui/material/styles';
+
+const theme = createTheme({
+ palette: {
+ primary: { main: '#238636' },
+ secondary: { main: '#b62324' },
+ mode: 'light',
+ background: { default: '#fff' },
+ text: {
+ primary: '#222',
+ },
+ },
+});
+
+export { theme };
diff --git a/book/1-begin/package.json b/book/1-begin/package.json
@@ -5,7 +5,9 @@
  "scripts": {
  "dev": "next",
  "build": "next build",
- "start": "next start"
+ "start": "next start",
+ "lint": "eslint '**/*.jsx'"
+
  },
  "dependencies": {
  "@emotion/cache": "^11.7.1",
@@ -17,7 +19,20 @@
  "next": "^12.1.6",
  "prop-types": "^15.7.2",
  "react": "^17.0.2",
- "react-dom": "^17.0.2"
+ "react-dom": "^17.0.2",
+ "yarn": "^1.22.5"
  },
- "devDependencies": {}
-}
+ "devDependencies": {
+ "@babel/core": "^7.16.0",
+ "babel-eslint": "^10.1.0",
+ "eslint": "^7.25.0",
+ "eslint-config-airbnb": "^18.2.1",
+ "eslint-config-prettier": "^6.15.0",
+ "eslint-plugin-import": "^2.22.1",
+ "eslint-plugin-jsx-a11y": "^6.4.1",
+ "eslint-plugin-prettier": "^3.1.4",
+ "eslint-plugin-react": "^7.21.5",
+ "eslint-plugin-react-hooks": "^4.2.0",
+ "prettier": "^2.2.1"
+ }
+}
diff --git a/book/1-begin/pages/_app.jsx b/book/1-begin/pages/_app.jsx
@@ -0,0 +1,42 @@
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
+import App from 'next/app';
+import PropTypes from 'prop-types';
+import React from 'react';
+import Head from 'next/head';
+
+import { theme } from '../lib/theme';
+
+import Header from '../components/Header';
+
+const propTypes = {
+ Component: PropTypes.elementType.isRequired,
+ pageProps: PropTypes.object.isRequired, // eslint-disable-line
+};
+
+class MyApp extends App {
+ render() {
+ const { Component, pageProps } = this.props;
+
+ // console.log(pageProps);
+
+ return (
+ <CacheProvider value={createCache({ key: 'css' })}>
+ <ThemeProvider theme={theme}>
+ <Head>
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ </Head>
+ <CssBaseline />
+ <Header {...pageProps} />
+ <Component {...pageProps} />
+ </ThemeProvider>
+ </CacheProvider>
+ );
+ }
+}
+
+MyApp.propTypes = propTypes;
+
+export default MyApp;
diff --git a/book/1-begin/pages/_document.jsx b/book/1-begin/pages/_document.jsx
@@ -0,0 +1,118 @@
+/* eslint-disable react/no-danger */
+import React from 'react';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
+import PropTypes from 'prop-types';
+
+import createEmotionServer from '@emotion/server/create-instance';
+import createCache from '@emotion/cache';
+
+const propTypes = {
+ styles: PropTypes.arrayOf(
+ PropTypes.string || PropTypes.number || PropTypes.ReactElementLike || React.ReactFragment,
+ ).isRequired,
+};
+
+class MyDocument extends Document {
+ static getInitialProps = async (ctx) => {
+ // Render app and page and get the context of the page with collected side effects.
+ const originalRenderPage = ctx.renderPage;
+
+ // You can consider sharing the same emotion cache between all the SSR requests to speed up performance.
+ // However, be aware that it can have global side effects.
+ const cache = createCache({
+ key: 'css',
+ prepend: true,
+ });
+ const { extractCriticalToChunks } = createEmotionServer(cache);
+
+ ctx.renderPage = () =>
+ originalRenderPage({
+ // eslint-disable-next-line react/display-name
+ enhanceApp: (App) => (props) => <App emotionCache={cache} {...props} />,
+ });
+
+ const initialProps = await Document.getInitialProps(ctx);
+ const chunks = extractCriticalToChunks(initialProps.html);
+
+ const emotionStyleTags = chunks.styles.map((style) => (
+ <style
+ data-emotion={`${style.key} ${style.ids.join(' ')}`}
+ key={style.key}
+ // eslint-disable-next-line react/no-danger
+ dangerouslySetInnerHTML={{ __html: style.css }}
+ />
+ ));
+
+ return {
+ ...initialProps,
+ // Styles fragment is rendered after the app and page rendering finish.
+ styles: [...React.Children.toArray(initialProps.styles), ...emotionStyleTags],
+ };
+ };
+
+ render() {
+ return (
+ <Html lang="en" style={{ height: '100%' }}>
+ <Head>
+ <meta charSet="utf-8" />
+ <meta name="google" content="notranslate" />
+ <meta name="theme-color" content="#1976D2" />
+
+ <link
+ rel="shortcut icon"
+ href="https://storage.googleapis.com/builderbook/favicon32.png"
+ />
+
+ <link
+ rel="stylesheet"
+ href="https://fonts.googleapis.com/css?family=Roboto:300,400:latin"
+ />
+ <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+ <link
+ rel="stylesheet"
+ href="https://storage.googleapis.com/builderbook/nprogress.min.css"
+ />
+ <link rel="stylesheet" href="https://storage.googleapis.com/builderbook/vs.min.css" />
+
+ <style>
+ {`
+ a {
+ font-weight: 400;
+ color: #58a6ff;
+ text-decoration: none;
+ outline: none;
+ }
+ blockquote {
+ padding: 0 1em;
+ color: #555;
+ border-left: 0.25em solid #dfe2e5;
+ }
+ pre {
+ display:block;
+ overflow-x:auto;
+ padding:0.5em;
+ background:#FFF;
+ color: #000;
+ border: 1px solid #ddd;
+ font-size: 14px;
+ }
+ code {
+ font-size: 14px;
+ background: #FFF;
+ }
+ `}
+ </style>
+ {this.props.styles}
+ </Head>
+ <body>
+ <Main />
+ <NextScript />
+ </body>
+ </Html>
+ );
+ }
+}
+
+MyDocument.propTypes = propTypes;
+
+export default MyDocument;
diff --git a/book/1-begin/pages/index.jsx b/book/1-begin/pages/index.jsx
@@ -0,0 +1,16 @@
+import Head from 'next/head';
+import Button from '@mui/material/Button';
+
+const Index = () => (
+ <div style={{ padding: '10px 45px' }}>
+ <Head>
+ <title>Index Page</title>
+ <meta name="description" content="This is the description of the Index page." />
+ </Head>
+
+ <p>Content on Index Page</p>
+ <Button variant="contained">MUI button</Button>
+ </div>
+);
+
+export default Index;
diff --git a/book/1-begin/pages/test.jsx b/book/1-begin/pages/test.jsx
@@ -0,0 +1,7 @@
+foo(
+ reallyLongArg(),
+ reallyReallyLongArg(),
+ omgSoManyParameters(),
+ IShouldRefactorThis(),
+ isThereSeriouslyAnotherOne(),
+);
diff --git a/book/1-begin/test.jsx b/book/1-begin/test.jsx
-Original file line number
+Diff line change
@@ Expand Up / @@ -52,4 +52,4 @@ module.exports = { @@
   },
   ],
   },
- };
+ };