@sumup/create-sumup-next-app - npm Package Compare versions

Comparing version 1.0.0 to 1.1.0

files/jest.config.js

@@ -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)$':

files/jest.setup.js

@@ -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}`;
+    }
+  })
+);

files/next.config.js

@@ -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;
   }
-});
+);

files/server/app.js

@@ -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();
 });

files/src/components/Anchor/Anchor.js

 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>

files/src/components/Container/Container.js

@@ -1,2 +0,2 @@
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 
@@ -3,0 +3,0 @@ const Container = styled('section')`

files/src/components/Logo/Logo.js

@@ -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;

files/src/pages/_app.js

@@ -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>
     );
   }
 }

files/src/pages/index.js

@@ -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;

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 @@

package.json

 {
   "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"
   }
 }

README.md

@@ -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.

No alert changes

Worsened metrics

Total package byte prevSize

75672

decreased by-1.48%

Number of package files

30

decreased by-3.23%

Lines of code

647

decreased by-5.69%

Number of lines in readme file

127

decreased by-0.78%

No dependency changes