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

Comparing version 1.1.1 to 1.2.0

files/jest.config.js

 module.exports = {
-  rootDir: '.',
-  roots: ['src', 'server'],
-  testPathIgnorePatterns: ['<rootDir>/src/.next/'],
-  watchPathIgnorePatterns: ['<rootDir>/src/.next/'],
+  testURL: 'http://localhost',
   transform: {
@@ -10,4 +7,3 @@ '^.+\\.js$': '<rootDir>/jest.transform.js',
   },
-  transformIgnorePatterns: ['node_modules/(?!@sumup/circuit-ui/)'],
-  moduleFileExtensions: ['js'],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
@@ -20,3 +16,3 @@ moduleNameMapper: {
   coverageReporters: ['cobertura', 'text-summary', 'html'],
-  collectCoverageFrom: ['src/**/**/*.js', 'server/**/**/*.js', '!**/.next/**']
+  collectCoverageFrom: ['components/**/*.js', 'pages/**/**/*.js']
 };

files/jest.fileTransform.js

@@ -8,5 +8,5 @@ const { basename } = require('path');
       const React = require('react');
-      module.exports = () => React.createElement('div', null, '${name}');
+      module.exports = props => React.createElement('div', props, '${name}');
     `;
   }
 };

files/jest.setup.js

@@ -5,5 +5,5 @@ /* global expect */
  * Add custom Jest matchers for the DOM.
- * https://github.com/gnapse/jest-dom#table-of-contents
+ * https://github.com/testing-library/jest-dom#custom-matchers
  */
-import 'jest-dom/extend-expect';
+import '@testing-library/jest-dom/extend-expect';
 
@@ -14,15 +14,35 @@ import React from 'react';
 import { axe, toHaveNoViolations } from 'jest-axe';
-import { render } from 'react-testing-library';
+import { render, fireEvent, wait, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { ThemeProvider } from 'emotion-theming';
 import { theme } from '@sumup/circuit-ui';
 
-const { standard } = theme;
+const { circuit } = theme;
 
-const renderWithTheme = renderFn => (component, ...rest) =>
-  renderFn(<ThemeProvider theme={standard}>{component}</ThemeProvider>, rest);
+const WithProviders = ({ children }) => (
+  <ThemeProvider theme={circuit}>{children}</ThemeProvider>
+);
 
-global.render = renderWithTheme(render);
-global.renderToHtml = renderWithTheme(renderToStaticMarkup);
+const renderWithProviders = renderFn => (component, ...rest) =>
+  renderFn(<WithProviders>{component}</WithProviders>, rest);
+
 global.axe = axe;
+global.act = act;
+global.wait = wait;
+global.fireEvent = fireEvent;
+global.userEvent = userEvent;
+global.renderToHtml = renderWithProviders(renderToStaticMarkup);
+global.render = (component, options) =>
+  render(component, { wrapper: WithProviders, ...options });
+global.create = (...args) => {
+  const { container } = global.render(...args);
+  return container.children.length > 1
+    ? container.children
+    : container.firstChild;
+};
 
+global.__DEV__ = false;
+global.__PRODUCTION__ = false;
+global.__TEST__ = true;
+
 /**
@@ -29,0 +49,0 @@ * This matchers helps you test for basic accessibility

files/jest.transform.js

 const { createTransformer } = require('babel-jest');
-const baseConfig = require('./src/.babelrc');
+const baseConfig = require('./.babelrc');
 
@@ -4,0 +4,0 @@ const babelConfig = {

files/README.md

@@ -16,8 +16,6 @@ <div align="center">
   - [`yarn start`](#yarn-start)
-  - [`yarn analyze`](#yarn-analyze)
   - [`yarn test:*`](#yarn-test)
   - [`yarn create:*`](#yarn-create)
-- [Custom Server](#custom-server)
 - [Fetching Data](#fetching-data)
-  - [`./src/pages/stars.js`](#srcpagesstarsjs)
+  - [`./pages/stars.js`](#pagesstarsjs)
 - [Styling with Emotion](#styling-with-emotion)
@@ -35,26 +33,23 @@ - [Syntax Highlighting](#syntax-highlighting)
 project-name/
-├─ src/
-│  ├─ components/
-│  │  ├─ Logo/
-│  │  │  ├─ Logo.js
-│  │  │  ├─ Logo.spec.js
-│  │  │  └─ index.js
-│  │  ├─ Container/
-│  │  │  ├─ Container.js
-│  │  │  └─ index.js
-│  │  └─ Logo/
-│  │  │  ├─ index.js
-│  │  │  ├─ Logo.js
-│  │  │  ├─ Logo.spec.js
-│  │  │  └─ logo.svg
-│  ├─ pages/
-│  │  ├─ _app.js
-│  │  ├─ _document.js
+├─ components/
+│  ├─ Logo/
+│  │  ├─ Logo.js
+│  │  ├─ Logo.spec.js
 │  │  └─ index.js
-│  ├─ static/
-│  │  └─ favicon.ico
-│  └─ .babelrc
-├─ server/
-│  ├─ app.js
+│  ├─ Container/
+│  │  ├─ Container.js
+│  │  └─ index.js
+│  └─ Logo/
+│  │  ├─ index.js
+│  │  ├─ Logo.js
+│  │  ├─ Logo.spec.js
+│  │  └─ logo.svg
+├─ pages/
+│  ├─ _app.js
+│  ├─ _document.js
 │  └─ index.js
+├─ public/
+│  └─ favicon.png
+└─ .babelrc.js
+├─ .eslintignore
 ├─ .eslintrc.js
@@ -66,3 +61,2 @@ ├─ .gitignore
 ├─ jest.transform.js
-├─ next.config.js
 ├─ package.json
@@ -74,6 +68,5 @@ ├─ plopfile.js
 
-Routing in Next.js is based on the file system, so `./src/pages/index.js` maps to the `/` route and `./src/pages/about.js` would map to `/about`.
+Routing in Next.js is based on the file system, so `./pages/index.js` maps to the `/` route and `./pages/about.js` would map to `/about`.
 
-The `./static` directory maps to `/static` in the `next` server, so you can put all your
-other static resources like images or fonts in there.
+The `./public` directory maps to the root (`/`) path in the `next` server, so you can put all your other static resources like images or fonts in there.
 
@@ -84,4 +77,4 @@ Out of the box, you get:
 - Hot code reloading
-- Server rendering and indexing of `./src/pages`
-- Static file serving. `./src/static/` is mapped to `/static/`
+- Server rendering and indexing of `./pages`
+- Static file serving. `./public/` is mapped to `/`
 
@@ -99,23 +92,14 @@ Read more about [Next's Routing](https://github.com/zeit/next.js#routing).
 
-The page will reload if you make edits to the client-side code in `./src/`.<br>
-The server will restart if you make edits to the server-side code in `./server/`.<br>
-You will also see any errors in the console. Use the [Chrome DevTools](https://medium.com/@paul_irish/debugging-node-js-nightlies-with-chrome-devtools-7c4a1b95ae27) to debug the server code.
+The page will reload if you make edits to the client-side code. You will also see any errors in the console.
 
 ### `yarn build`
 
-Builds the app for production to the `./src/.next` folder.<br>
-It correctly bundles React in production mode and optimizes the build for the best performance.
+Builds the app for production to the `./.next` folder. It correctly bundles React in production mode and optimizes the build for the best performance.
 
 ### `yarn start`
 
-Starts the application in production mode.<br>
-The application should be compiled with `yarn build` first.
+Starts the application in production mode. The application should be compiled with `yarn build` first.
 
 See the section in Next docs about [deployment](https://github.com/zeit/next.js/wiki/Deployment) for more information.
 
-### `yarn analyze`
-
-Analyze the production bundle with [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer).<br>
-Compiles the application and opens the analyzer on port[`8889`](http://127.0.0.1:8889/).
-
 ### `yarn test:*`
@@ -135,47 +119,2 @@
 
-## Custom Server
-
-The project comes with a minimal [express server](https://expressjs.com/) out of the box. This enables route patterns, redirects, and other custom server logic.
-
-The server code is not transpiled, so you are limited to the syntax and features that your version of Node supports. However, you can use `import` and `export` statements, thanks to the [`esm`](https://www.npmjs.com/package/esm) module loader.
-
-The below example makes `/a` resolve to `./pages/b`, and `/b` resolve to `./pages/a`, and also matches individual `/posts` and forwards their `id` to the Next.js page:
-
-```js
-import express from 'express';
-import next from 'next';
-
-const port = parseInt(process.env.PORT, 10) || 3000;
-const dev = process.env.NODE_ENV !== 'production';
-const app = next({ dev, dir: './src' });
-const handle = app.getRequestHandler();
-
-app.prepare().then(() => {
-  const server = express();
-
-  server.get('/a', (req, res) => {
-    return app.render(req, res, '/b', req.query);
-  });
-
-  server.get('/b', (req, res) => {
-    return app.render(req, res, '/a', req.query);
-  });
-
-  server.get('/posts/:id', (req, res) => {
-    return app.render(req, res, '/posts', { id: req.params.id });
-  });
-
-  server.get('*', (req, res) => {
-    return handle(req, res);
-  });
-
-  server.listen(port, err => {
-    if (err) throw err;
-    console.log(`> Ready on http://localhost:${port}`);
-  });
-});
-```
-
-Read more about [custom server and routing](https://github.com/zeit/next.js#custom-server-and-routing).
-
 ## Fetching Data
@@ -185,3 +124,3 @@
 
-### `./src/pages/stars.js`
+### `./pages/stars.js`
 
@@ -188,0 +127,0 @@ ```jsx

main.js

@@ -20,9 +20,4 @@ import { resolve } from 'path';
 const DEPENDENCIES = [
-  // React and Next.js ️⚛
-  'react',
-  'react-dom',
-  'next',
-  'prop-types',
   // Our beautiful component library 💄
-  '@sumup/circuit-ui@beta',
+  '@sumup/circuit-ui',
   // CSS-in-JS 🚀
@@ -33,6 +28,3 @@ '@emotion/core',
   // Tools 🛠
-  'lodash',
-  // Server 🖥
-  'express',
-  'esm'
+  'lodash'
 ];
@@ -42,10 +34,9 @@ const DEV_DEPENDENCIES = [
   '@sumup/foundry',
-  // Development 🏗
-  'nodemon',
   // Testing 📏
-  'react-testing-library',
-  'react-test-renderer',
+  '@testing-library/react',
+  '@testing-library/react-hooks',
+  '@testing-library/user-event',
+  '@testing-library/jest-dom',
   'jest',
   'jest-emotion',
-  'jest-dom',
   'jest-axe',
@@ -56,7 +47,3 @@ // Loaders and plugins 🔌
   'babel-plugin-inline-react-svg',
-  'babel-jest',
-  'babel-core@7.0.0-bridge.0',
-  'next-transpile-modules',
-  'next-compose-plugins',
-  'webpack-bundle-analyzer'
+  'babel-jest'
 ];
@@ -73,17 +60,7 @@
     {
-      title: 'Initialize project',
-      task: () =>
-        new Listr([
-          {
-            title: 'Create project folder',
-            task: () => createProjectDirectory(APP_NAME)
-          },
-          {
-            title: 'Initialize package.json',
-            task: () => initProject(APP_PATH)
-          }
-        ])
+      title: 'Running Create Next App',
+      task: () => runCreateNextApp(APP_NAME)
     },
     {
-      title: 'Install dependencies',
+      title: 'Install additional dependencies',
       task: () => addDependencies()
@@ -100,4 +77,7 @@ },
           {
-            title: 'Copy starter files',
-            task: () => copyStarterFiles(APP_PATH, FILES_PATH)
+            title: 'Replace Create Next App files',
+            task: async () => {
+              await deleteNextFiles(APP_PATH);
+              return copyCircuitFiles(APP_PATH);
+            }
           },
@@ -148,5 +128,5 @@ {
 
-function createProjectDirectory(appName) {
-  const cmd = 'mkdir';
-  const args = [appName];
+function runCreateNextApp(appName) {
+  const cmd = 'yarn';
+  const args = ['create', 'next-app', appName];
 
@@ -156,9 +136,2 @@ return spawn(cmd, args, { cwd: WORKING_DIR });
 
-function initProject(cwd) {
-  const cmd = 'yarn';
-  const args = ['init', '-y'];
-
-  return spawn(cmd, args, { cwd });
-}
-
 async function addDependencies({
@@ -187,3 +160,5 @@ dependencies = DEPENDENCIES,
     '--plop',
-    'react'
+    'react',
+    '--lint-staged',
+    '--husky'
   ];
@@ -193,5 +168,34 @@ return spawn(cmd, args, { cwd: appPath, ...childProcessOptions });
 
-function copyStarterFiles(appPath = APP_PATH, sourcePath = FILES_PATH) {
+function deleteNextFiles(appPath) {
+  const cmd = 'rm';
+  const filesToDelete = [
+    'components/nav.js',
+    'pages/index.js',
+    'public/favicon.ico'
+  ];
+  const args = ['-rf', ...filesToDelete.map(file => file)];
+  return spawn(cmd, args, { cwd: appPath });
+}
+
+function copyCircuitFiles(appPath, sourcePath = FILES_PATH) {
   const cmd = 'cp';
-  const args = ['-r', `${sourcePath}/.`, appPath];
+  const filesToCopy = [
+    '__mocks__',
+    'components',
+    'pages',
+    'public',
+    '.babelrc.js',
+    '.gitignore',
+    '.eslintignore',
+    'jest.config.js',
+    'jest.setup.js',
+    'jest.fileTransform.js',
+    'jest.transform.js',
+    'README.md'
+  ];
+  const args = [
+    '-r',
+    ...filesToCopy.map(file => resolve(sourcePath, file)),
+    appPath
+  ];
   return spawn(cmd, args, { cwd: appPath });
@@ -205,11 +209,8 @@ }
   const scripts = {
-    lint: 'foundry run eslint src/**/*.js',
-    analyze: 'ANALYZE=true yarn build',
-    dev: 'nodemon --inspect --watch server server/index.js',
-    build: 'next build src',
-    start: 'NODE_ENV=production node server/index.js',
-    'create:component': 'foundry run plop component',
-    'test:ci': 'jest --ci --coverage --testResultsProcessor="jest-junit"',
-    'test:unit': 'jest --coverage',
-    'test:unit:watch': 'jest --watch'
+    lint: 'foundry run eslint "**/*.js"',
+    test: 'jest --watch',
+    'test:ci':
+      'jest --ci --coverage  --reporters=default --reporters=jest-junit',
+    'test:coverage': 'jest --coverage',
+    'create:component': 'foundry run plop component'
   };
@@ -216,0 +217,0 @@ const updatedPackageJson = {

package.json

 {
   "name": "@sumup/create-sumup-next-app",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "description": "Creates a fresh NextJS application preconfigured with SumUp's Circuit UI and Foundry",
@@ -12,3 +12,3 @@ "keywords": [
   "scripts": {
-    "lint": "foundry run eslint ./**/*.js"
+    "lint": "foundry run eslint \"**/*.js\""
   },
@@ -15,0 +15,0 @@ "bin": "bin",

prettier.config.js

@@ -1,1 +0,1 @@
-module.exports = require('@sumup/foundry/prettier').base
+module.exports = require('@sumup/foundry/prettier').base;

README.md

@@ -25,5 +25,5 @@ <div align="center">
 
-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.
+Run `yarn dev` to start the development build. The app should automatically open in your browser. Changes you make to `pages/index.js` should be visible on the page almost immediately.
 
-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.
+To create a production build of your app, run `yarn build`. `Next.js` will create an optimized production build of your application inside the `.next/` folder of your project. It will also provide you with additional details on what to do with them.
 
@@ -51,10 +51,10 @@ ### Adding a new component
 
-Writing tests is great. Tests are the second line of defence against bugs ending up on production. By covering your application in unit and integration tests, you can be sure you did not break anything when, for example, shipping refactored code to production. Your new React project comes with testing built in. By running `yarn test` you will start the test runner, [Jest](https://jestjs.io/en/). As you add tests or make changes to your code, Jest will re-run tests and show you the results. The app will come with `react-testing-library` set up for writing UI tests for your React components. Check out `src/App.spec.js` for examples.
+Writing tests is great. Tests are the second line of defence against bugs ending up on production. By covering your application in unit and integration tests, you can be sure you did not break anything when, for example, shipping refactored code to production. Your new React project comes with testing built in. By running `yarn test` you will start the test runner, [Jest](https://jestjs.io/en/). As you add tests or make changes to your code, Jest will re-run tests and show you the results. The app will come with `react-testing-library` set up for writing UI tests for your React components. Check out `components/Anchor.spec.js` for examples.
 
 ## 📖 Useful resources
 
-- The [docs](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents) for `create-react-app` contain a lot of solutions for common problems when writing a React application.
+- The [docs](https://nextjs.org/docs#setup) for `create-next-app` contain a lot of solutions for common problems when writing a React application.
 - Foundry [docs](https://github.com/sumup/foundry#table-of-contents).
-- Circuit UI [docs](https://circuit.sumup.com/#/) and [storybook](https://circuit.sumup.com/storybook/).
-- The [README](https://github.com/kentcdodds/react-testing-library/blob/master/README.md#what-is-react-testing-library) for`react-testing-library`.
+- Circuit UI [docs](https://circuit.sumup.com/) and [storybook](https://circuit.sumup.com/storybook/).
+- The [README](https://github.com/testing-library/react-testing-library/#readme) for`react-testing-library`.
 
@@ -124,3 +124,3 @@ ## 💁‍♀ Tips
 - [create-react-app](https://github.com/facebook/create-react-app) - Create new React apps with no build configuration.
-- [create-next-app](https://github.com/segmentio/create-next-app) - Create Next.js apps in one command.
+- [create-next-app](https://github.com/zeit/next.js/tree/canary/packages/create-next-app) - Create Next.js apps in one command.
 
@@ -127,0 +127,0 @@ ## 💙 About SumUp

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 3 instances in 1 package

Improved metrics

Number of low supply chain risk alerts

2

decreased by-60%

Worsened metrics

Total package byte prevSize

53034

decreased by-29.92%

Number of package files

27

decreased by-10%

Lines of code

619

decreased by-4.33%

Number of medium supply chain risk alerts

2

increased by100%

No dependency changes