diff --git a/.eslintrc.json b/.eslintrc.json index 3082e97b..e49b8f7a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,26 +1,27 @@ { - "env": { - "browser": true, - "es6": true, - "jest": true + "env": { + "browser": true, + "es6": true, + "jest": true + }, + "extends": ["airbnb", "prettier"], + "globals": { + "Atomics": "readonly", + "SharedArrayBuffer": "readonly" + }, + "parser": "babel-eslint", + "parserOptions": { + "ecmaFeatures": { + "jsx": true }, - "extends": ["airbnb", "prettier"], - "globals": { - "Atomics": "readonly", - "SharedArrayBuffer": "readonly" - }, - "parser": "babel-eslint", - "parserOptions": { - "ecmaFeatures": { - "jsx": true - }, - "ecmaVersion": 2018, - "sourceType": "module" - }, - "plugins": [ - "react" - ], - "rules": { - "react/prop-types": ["error"] - } + "ecmaVersion": 2018, + "sourceType": "module" + }, + "plugins": ["react"], + "rules": { + "react/prop-types": ["error"], + "react/jsx-props-no-spreading": ["warn"], + "react/forbid-prop-types": ["warn"], + "no-unused-vars": ["warn"] + } } diff --git a/package-lock.json b/package-lock.json index 46e3563e..b5a7886f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "create-amclin-nextjs-app", - "version": "3.5.1", + "version": "3.6.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 65089dde..bce31221 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ ], "coveragePathIgnorePatterns": [ "/build/", + "/default/src/pages/_document.jsx", "/out/", "/.next/", "/node_modules/", diff --git a/templates/default.json b/templates/default.json index 750e0baa..e3bce3bf 100644 --- a/templates/default.json +++ b/templates/default.json @@ -62,6 +62,7 @@ "collectCoverageFrom": ["**/*.{js,jsx,ts,tsx}"], "coveragePathIgnorePatterns": [ "/build/", + "/src/pages/_document.jsx", "/out/", "/.next/", "/node_modules/", diff --git a/templates/default/babelrc b/templates/default/babelrc index bdbe5216..5c76c4c2 100644 --- a/templates/default/babelrc +++ b/templates/default/babelrc @@ -1,3 +1,10 @@ { - "presets": ["@babel/preset-env","next/babel"] + "presets": [ + [ + "next/babel", + { + "preset-env": { "targets": { "node": "current" } } + } + ] + ] } diff --git a/templates/default/eslintrc.json b/templates/default/eslintrc.json index 3cb1d8ff..e49b8f7a 100644 --- a/templates/default/eslintrc.json +++ b/templates/default/eslintrc.json @@ -19,6 +19,9 @@ }, "plugins": ["react"], "rules": { - "react/prop-types": ["error"] + "react/prop-types": ["error"], + "react/jsx-props-no-spreading": ["warn"], + "react/forbid-prop-types": ["warn"], + "no-unused-vars": ["warn"] } } diff --git a/templates/default/src/components/organisms/GlobalHead/GlobalHead.jsx b/templates/default/src/components/organisms/GlobalHead/GlobalHead.jsx deleted file mode 100644 index 9fb23a4c..00000000 --- a/templates/default/src/components/organisms/GlobalHead/GlobalHead.jsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react' -import PropTypes from 'prop-types' -import Head from 'next/head' -import Favicon from '../../molecules/Favicon' -import Manifest from '../../molecules/Manifest' - -const GlobalHead = ({title}) => { - return( - - {title} - - - - ) -} - -GlobalHead.propTypes = { - title: PropTypes.string.isRequired, -}; - -export default GlobalHead diff --git a/templates/default/src/components/organisms/GlobalHead/__snapshots__/GlobalHead.test.jsx.snap b/templates/default/src/components/organisms/GlobalHead/__snapshots__/GlobalHead.test.jsx.snap deleted file mode 100644 index 662a34f0..00000000 --- a/templates/default/src/components/organisms/GlobalHead/__snapshots__/GlobalHead.test.jsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`GlobalHead creates a element suitable for global usage across all pages 1`] = ` - - - mock title for test - - - - -`; diff --git a/templates/default/src/components/organisms/GlobalHead/index.js b/templates/default/src/components/organisms/GlobalHead/index.js deleted file mode 100644 index 81de3119..00000000 --- a/templates/default/src/components/organisms/GlobalHead/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './GlobalHead' diff --git a/templates/default/src/components/organisms/PageTitle/PageTitle.jsx b/templates/default/src/components/organisms/PageTitle/PageTitle.jsx new file mode 100644 index 00000000..cbd1b6b9 --- /dev/null +++ b/templates/default/src/components/organisms/PageTitle/PageTitle.jsx @@ -0,0 +1,17 @@ +import React from 'react' +import PropTypes from 'prop-types' +import Head from 'next/head' + +const PageTitle = ({ title }) => { + return ( + + {title} + + ) +} + +PageTitle.propTypes = { + title: PropTypes.string.isRequired +} + +export default PageTitle diff --git a/templates/default/src/components/organisms/GlobalHead/GlobalHead.test.jsx b/templates/default/src/components/organisms/PageTitle/PageTitle.test.jsx similarity index 52% rename from templates/default/src/components/organisms/GlobalHead/GlobalHead.test.jsx rename to templates/default/src/components/organisms/PageTitle/PageTitle.test.jsx index 6e90bd5c..2f7b5dc0 100644 --- a/templates/default/src/components/organisms/GlobalHead/GlobalHead.test.jsx +++ b/templates/default/src/components/organisms/PageTitle/PageTitle.test.jsx @@ -1,36 +1,30 @@ import React from 'react' import ShallowRenderer from 'react-test-renderer/shallow' -import GlobalHead from '.' +import PageTitle from '.' -describe('GlobalHead', () => { +describe('PageTitle', () => { // Test uses ShallowRenderer.render() instead of TestRenderer.create() - // because encapsulates NextJS which in turn uses + // because encapsulates NextJS which in turn uses // React and Helmet doesn't show up in a normal component render. it('creates a element suitable for global usage across all pages', () => { - const renderer = new ShallowRenderer(); - renderer.render( - - ) + const renderer = new ShallowRenderer() + renderer.render() const result = renderer.getRenderOutput() expect(result).toMatchSnapshot() }) it('populates the specified page title', () => { - const title = "mockTitle" - const renderer = new ShallowRenderer(); - renderer.render( - - ) + const title = 'mockTitle' + const renderer = new ShallowRenderer() + renderer.render() const result = renderer.getRenderOutput() // Expect a React module with a populated expect(result.props.children).toEqual( - expect.arrayContaining([ - expect.objectContaining({ - type: 'title', - props: { - children: title - } - }) - ]) + expect.objectContaining({ + type: 'title', + props: { + children: title + } + }) ) }) }) diff --git a/templates/default/src/components/organisms/PageTitle/__snapshots__/PageTitle.test.jsx.snap b/templates/default/src/components/organisms/PageTitle/__snapshots__/PageTitle.test.jsx.snap new file mode 100644 index 00000000..674f6319 --- /dev/null +++ b/templates/default/src/components/organisms/PageTitle/__snapshots__/PageTitle.test.jsx.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`PageTitle creates a <head> element suitable for global usage across all pages 1`] = ` +<Head> + <title> + mock title for test + + +`; diff --git a/templates/default/src/components/organisms/PageTitle/index.js b/templates/default/src/components/organisms/PageTitle/index.js new file mode 100644 index 00000000..83815777 --- /dev/null +++ b/templates/default/src/components/organisms/PageTitle/index.js @@ -0,0 +1 @@ +export { default } from './PageTitle' diff --git a/templates/default/src/pages/_document.jsx b/templates/default/src/pages/_document.jsx new file mode 100644 index 00000000..ed1b457e --- /dev/null +++ b/templates/default/src/pages/_document.jsx @@ -0,0 +1,37 @@ +/* _document is only rendered on the server side and not on the client side + * Event handlers like onClick can't be added to this file + */ +import React from 'react' +import Document, { Html, Head, Main, NextScript } from 'next/document' +import Flavicon from '../components/molecules/Favicon' +import Manifest from '../components/molecules/Manifest' + +class MyDocument extends Document { + static async getInitialProps(ctx) { + const initialProps = await Document.getInitialProps(ctx) + return { ...initialProps } + } + + render() { + return ( + + + {/* HEADER ELEMENTS THAT GO HERE: + * meta tags, global scripts, global stylesheets, rel links, etc. + * Tracking scripts like Google Analytics (try https://github.com/react-ga/react-ga) + */} + + + + + {/* NOSCRIPT: place them inside a new