@sumup/create-sumup-next-app
Advanced tools
Comparing version 1.0.0 to 1.1.0
@@ -12,3 +12,3 @@ module.exports = { | ||
moduleFileExtensions: ['js'], | ||
setupTestFrameworkScriptFile: '<rootDir>/jest.setup.js', | ||
setupFilesAfterEnv: ['<rootDir>/jest.setup.js'], | ||
moduleNameMapper: { | ||
@@ -15,0 +15,0 @@ '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': |
@@ -11,6 +11,5 @@ /* global expect */ | ||
import { renderToStaticMarkup } from 'react-dom/server'; | ||
import { createMatchers, createSerializer } from 'jest-emotion'; | ||
import { createSerializer } from 'jest-emotion'; | ||
import { axe, toHaveNoViolations } from 'jest-axe'; | ||
import { render } from 'react-testing-library'; | ||
import * as emotion from 'emotion'; | ||
import { ThemeProvider } from 'emotion-theming'; | ||
@@ -37,10 +36,2 @@ import { theme } from '@sumup/circuit-ui'; | ||
/** | ||
* These matchers help you test agains specific style rules | ||
* in a test. | ||
* | ||
* https://github.com/emotion-js/emotion/tree/master/packages/jest-emotion#tohavestylerule | ||
* */ | ||
expect.extend(createMatchers(emotion)); | ||
/** | ||
* The serializer will make sure emotion generated styles | ||
@@ -51,2 +42,8 @@ * show up in snapshots. | ||
* */ | ||
expect.addSnapshotSerializer(createSerializer(emotion)); | ||
expect.addSnapshotSerializer( | ||
createSerializer({ | ||
classNameReplacer(className, index) { | ||
return `circuit-${index}`; | ||
} | ||
}) | ||
); |
@@ -1,2 +0,3 @@ | ||
const withTM = require('@weco/next-plugin-transpile-modules'); | ||
const withPlugins = require('next-compose-plugins'); | ||
const withTM = require('next-transpile-modules'); | ||
const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer'); | ||
@@ -6,35 +7,31 @@ | ||
module.exports = withTM({ | ||
transpileModules: ['@sumup/circuit-ui'], | ||
webpack: (config, { defaultLoaders }) => { | ||
// Fixes npm packages that depend on `fs` module | ||
config.node = { | ||
fs: 'empty' | ||
}; | ||
module.exports = withPlugins( | ||
[[withTM, { transpileModules: ['@sumup/circuit-ui'] }]], | ||
{ | ||
webpack: config => { | ||
// Fixes npm packages that depend on `fs` module | ||
// eslint-disable-next-line no-param-reassign | ||
config.node = { | ||
fs: 'empty' | ||
}; | ||
config.module.rules.push({ | ||
test: /\.svg$/, | ||
use: [ | ||
{ loader: 'babel-loader' }, | ||
{ | ||
loader: 'react-svg-loader', | ||
options: { | ||
es5: true | ||
} | ||
} | ||
] | ||
}); | ||
// eslint-disable-next-line no-param-reassign | ||
config.resolve.alias = { | ||
...config.resolve.alias, | ||
'@sumup/circuit-ui': require.resolve('@sumup/circuit-ui/lib/es') | ||
}; | ||
if (ANALYZE) { | ||
config.plugins.push( | ||
new BundleAnalyzerPlugin({ | ||
analyzerMode: 'server', | ||
analyzerPort: 8889, | ||
openAnalyzer: true | ||
}) | ||
); | ||
if (ANALYZE) { | ||
config.plugins.push( | ||
new BundleAnalyzerPlugin({ | ||
analyzerMode: 'server', | ||
analyzerPort: 8889, | ||
openAnalyzer: true | ||
}) | ||
); | ||
} | ||
return config; | ||
} | ||
return config; | ||
} | ||
}); | ||
); |
@@ -9,14 +9,14 @@ import express from 'express'; | ||
app.prepare().then(() => { | ||
const server = express(); | ||
const server = express(); | ||
server.get('*', (req, res) => handle(req, res)); | ||
server.get('*', (req, res) => handle(req, res)); | ||
server.listen(port, err => { | ||
if (err) { | ||
throw err; | ||
} | ||
// eslint-disable-next-line no-console | ||
console.log(`> Ready on http://localhost:${port}`); | ||
}); | ||
server.listen(port, err => { | ||
if (err) { | ||
throw err; | ||
} | ||
// eslint-disable-next-line no-console | ||
console.log(`> Ready on http://localhost:${port}`); | ||
app.prepare(); | ||
}); |
import React from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import Link from 'next/link'; | ||
import styled, { css } from 'react-emotion'; | ||
import styled from '@emotion/styled'; | ||
import { css } from '@emotion/core'; | ||
import { sharedPropTypes } from '@sumup/circuit-ui'; | ||
@@ -12,3 +13,3 @@ | ||
&:visited { | ||
color: #551a8b; | ||
color: ${theme.colors.v700}; | ||
} | ||
@@ -28,5 +29,3 @@ | ||
export const A = styled('a')` | ||
${baseStyles}; | ||
`; | ||
export const A = styled('a')(baseStyles); | ||
@@ -38,3 +37,3 @@ /** | ||
return ( | ||
<Link {...otherProps}> | ||
<Link {...otherProps} passHref> | ||
<A {...{ title, className, id }}>{children}</A> | ||
@@ -41,0 +40,0 @@ </Link> |
@@ -1,2 +0,2 @@ | ||
import styled from 'react-emotion'; | ||
import styled from '@emotion/styled'; | ||
@@ -3,0 +3,0 @@ const Container = styled('section')` |
@@ -1,7 +0,9 @@ | ||
import styled, { css } from 'react-emotion'; | ||
import React from 'react'; | ||
import styled from '@emotion/styled'; | ||
import { css } from '@emotion/core'; | ||
import LogoIcon from './logo.svg'; | ||
const Logo = styled(LogoIcon)` | ||
${({ theme }) => css` | ||
const Logo = styled(LogoIcon)( | ||
({ theme }) => css` | ||
display: block; | ||
@@ -11,5 +13,5 @@ fill: ${theme.colors.white}; | ||
margin-top: ${theme.spacings.peta}; | ||
`}; | ||
`; | ||
` | ||
); | ||
export default Logo; |
@@ -1,45 +0,35 @@ | ||
import React from 'react'; | ||
import React, { Fragment } from 'react'; | ||
import App, { Container } from 'next/app'; | ||
import { hydrate, css } from 'react-emotion'; | ||
import { injectGlobalStyles, theme } from '@sumup/circuit-ui'; | ||
import Head from 'next/head'; | ||
import { ThemeProvider } from 'emotion-theming'; | ||
import { GlobalStyles, theme } from '@sumup/circuit-ui'; | ||
const { standard } = theme; | ||
// Adds server generated styles to emotion cache. | ||
// '__NEXT_DATA__.ids' is set in '_document.js' | ||
if (typeof window !== 'undefined') { | ||
// eslint-disable-next-line no-underscore-dangle | ||
hydrate(window.__NEXT_DATA__.ids); | ||
} | ||
const customGlobalStyles = ` | ||
const customStyles = ` | ||
body { | ||
background-color: ${standard.colors.n100}; | ||
} | ||
`; | ||
}`; | ||
injectGlobalStyles({ theme: standard, custom: customGlobalStyles }); | ||
export default class MyApp extends App { | ||
static async getInitialProps({ Component, router, ctx }) { | ||
let pageProps = {}; | ||
if (Component.getInitialProps) { | ||
pageProps = await Component.getInitialProps(ctx); | ||
} | ||
return { pageProps }; | ||
} | ||
export default class CustomApp extends App { | ||
render() { | ||
const { Component, pageProps } = this.props; | ||
return ( | ||
<Container> | ||
<ThemeProvider theme={standard}> | ||
<Component {...pageProps} /> | ||
</ThemeProvider> | ||
</Container> | ||
<Fragment> | ||
<Head> | ||
<link | ||
rel="shortcut icon" | ||
href="/static/favicon.ico" | ||
type="image/x-icon" | ||
/> | ||
</Head> | ||
<Container> | ||
<ThemeProvider theme={standard}> | ||
<GlobalStyles custom={customStyles} /> | ||
<Component {...pageProps} /> | ||
</ThemeProvider> | ||
</Container> | ||
</Fragment> | ||
); | ||
} | ||
} |
@@ -1,2 +0,3 @@ | ||
import React from 'react'; | ||
import React, { Fragment } from 'react'; | ||
import Head from 'next/head'; | ||
import { Card, Heading, List, Text } from '@sumup/circuit-ui'; | ||
@@ -8,37 +9,44 @@ | ||
const title = 'Welcome to SumUp Next.js'; | ||
const Page = () => ( | ||
<Container> | ||
<Logo /> | ||
<Card> | ||
<Heading size={Heading.KILO}>Welcome to SumUp Next.js</Heading> | ||
<Text> | ||
This is a{' '} | ||
<Anchor href="https://github.com/zeit/next.js">Next.js</Anchor>-based | ||
project featuring some SumUp-specific customizations: | ||
</Text> | ||
<List size={List.MEGA}> | ||
<li>Circuit UI integration</li> | ||
<li>Emotion support (incl. babel plugin)</li> | ||
<li>Lodash support (incl. babel plugin)</li> | ||
<li> | ||
SumUp ESLint and Prettier configuration provided by{' '} | ||
<Anchor href="https://github.com/sumup/foundry">Foundry</Anchor> | ||
</li> | ||
</List> | ||
<Text size={Text.GIGA} style={{ textAlign: 'center' }}> | ||
Now go and build things! | ||
<br /> | ||
</Text> | ||
<Text | ||
size={Text.GIGA} | ||
style={{ textAlign: 'center', transform: 'scale3d(1.5, 1.5, 1)' }} | ||
> | ||
<span role="img" aria-label="Emojis for building things"> | ||
🔨👩🏽💻👨🏼💻🚀 | ||
</span> | ||
</Text> | ||
</Card> | ||
</Container> | ||
<Fragment> | ||
<Head> | ||
<title>{title}</title> | ||
</Head> | ||
<Container> | ||
<Logo /> | ||
<Card> | ||
<Heading size={Heading.KILO}>{title}</Heading> | ||
<Text> | ||
This is a{' '} | ||
<Anchor href="https://github.com/zeit/next.js">Next.js</Anchor>-based | ||
project featuring some SumUp-specific customizations: | ||
</Text> | ||
<List size={List.MEGA}> | ||
<li>Circuit UI integration</li> | ||
<li>Emotion support (incl. babel plugin)</li> | ||
<li>Lodash support (incl. babel plugin)</li> | ||
<li> | ||
SumUp ESLint and Prettier configuration provided by{' '} | ||
<Anchor href="https://github.com/sumup/foundry">Foundry</Anchor> | ||
</li> | ||
</List> | ||
<Text size={Text.GIGA} style={{ textAlign: 'center' }}> | ||
Now go and build things! | ||
<br /> | ||
</Text> | ||
<Text | ||
size={Text.GIGA} | ||
style={{ textAlign: 'center', transform: 'scale3d(1.5, 1.5, 1)' }} | ||
> | ||
<span role="img" aria-label="Emojis for building things"> | ||
🔨👩🏽💻👨🏼💻🚀 | ||
</span> | ||
</Text> | ||
</Card> | ||
</Container> | ||
</Fragment> | ||
); | ||
export default Page; |
14
main.js
@@ -26,8 +26,7 @@ import { resolve } from 'path'; | ||
// Our beautiful component library 💄 | ||
'@sumup/circuit-ui', | ||
'@sumup/circuit-ui@beta', | ||
// CSS-in-JS 🚀 | ||
'react-emotion', | ||
'emotion', | ||
'@emotion/core', | ||
'@emotion/styled', | ||
'emotion-theming', | ||
'emotion-server', | ||
// Tools 🛠 | ||
@@ -54,7 +53,8 @@ 'lodash', | ||
'babel-plugin-lodash', | ||
'babel-plugin-inline-react-svg', | ||
'babel-jest', | ||
'babel-core@7.0.0-bridge.0', | ||
'react-svg-loader', | ||
'webpack-bundle-analyzer', | ||
'@weco/next-plugin-transpile-modules' | ||
'next-transpile-modules', | ||
'next-compose-plugins', | ||
'webpack-bundle-analyzer' | ||
]; | ||
@@ -61,0 +61,0 @@ |
{ | ||
"name": "@sumup/create-sumup-next-app", | ||
"version": "1.0.0", | ||
"version": "1.1.0", | ||
"description": "Creates a fresh NextJS application preconfigured with SumUp's Circuit UI and Foundry", | ||
@@ -32,4 +32,4 @@ "keywords": [ | ||
"devDependencies": { | ||
"@sumup/foundry": "^0.0.13" | ||
"@sumup/foundry": "^1.1.4" | ||
} | ||
} |
@@ -12,3 +12,2 @@ <div align="center"> | ||
- At the moment this project reqires **`yarn`** to be installed on your system. Yarn is a package manager for JavaScript. You can read how to install the Yarn CLI in [their documentation](https://yarnpkg.com/en/docs/install). | ||
- You will need **`npx`** installed. You can run `yarn global add npx` or `npm install -g npx` to make that happen. | ||
@@ -27,3 +26,3 @@ ## ✨ Setting up a new SumUp Next.js project | ||
Run `yarn start` to start the development build. The app should automatically open in your browser. Changes you make to `src/App.js` should be visible on the page almost immediately. | ||
Run `yarn dev` to start the development build. The app should automatically open in your browser. Changes you make to `src/App.js` should be visible on the page almost immediately. | ||
@@ -30,0 +29,0 @@ To create a production build of your app, run `yarn build`. `Next.js` will create an optimized production build of your application inside the `build` folder of your project. It will also provide you with additional details on what to do with them. |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
75672
30
647
127