feat: turn into up-to-date CRA template

.eslintignore

@@ -0,0 +1 @@
+template/src/.eslintrc.js

.eslintrc.js

@@ -6,9 +6,13 @@ module.exports = require('@sumup/foundry/eslint')(
     openSource: true,
   },
   {
+    rules: {
+      'react/jsx-uses-react': 'off',
+      'react/react-in-jsx-scope': 'off',
+    },
     overrides: [
       {
-        files: ['files/**/*.js'],
+        files: ['template/**/*.js'],
         rules: {
           'notice/notice': 'off',
           'import/no-unresolved': 'off',

README.md

@@ -1,44 +1,44 @@
 <div align="center">
-<h1>⚛️ create-sumup-react-app ⚛️</h1>
+<h1>⚛️ @sumup/cra-template ⚛️</h1>
 
-The easiest way to get started writing a React app with SumUp's standard frontend toolchain.
+A [create-react-app template](https://create-react-app.dev/docs/custom-templates) for JavaScript React apps with SumUp's frontend stack.
 
 </div>
 
 ## Table of Contents <!-- omit in toc -->
 
-- [💻 Prerequisites](#%f0%9f%92%bb-prerequisites)
-- [✨ Setting up a new SumUp React project](#%e2%9c%a8-setting-up-a-new-sumup-react-project)
-- [🛠 Development workflow](#%f0%9f%9b%a0-development-workflow)
+- [💻 Prerequisites](#-prerequisites)
+- [✨ Setting up a new JavaScript SumUp React project](#-setting-up-a-new-javascript-sumup-react-project)
+- [🛠 Development workflow](#-development-workflow)
   - [Firing up the tools](#firing-up-the-tools)
   - [Adding a new component](#adding-a-new-component)
   - [Linting your code](#linting-your-code)
   - [Writing tests](#writing-tests)
-- [📖 Useful resources](#%f0%9f%93%96-useful-resources)
-- [💁‍♀ Tips](#%f0%9f%92%81%e2%80%8d%e2%99%80-tips)
+- [📖 Useful resources](#-useful-resources)
+- [💁‍♀ Tips](#-tips)
   - [Setting up Foundry's ESLint in your editor](#setting-up-foundrys-eslint-in-your-editor)
     - [Visual Studio Code](#visual-studio-code)
-- [⚠️ Troubleshooting](#%e2%9a%a0%ef%b8%8f-troubleshooting)
+- [⚠️ Troubleshooting](#️-troubleshooting)
   - [Debug mode](#debug-mode)
-  - [Engine node is incompatible](#engine-node-is-incompatible)
-  - [Error watching file for changes](#error-watching-file-for-changes)
+  - [Broken build due to ESLint version](#broken-build-due-to-eslint-version)
 - [Code of conduct (CoC)](#code-of-conduct-coc)
   - [Maintainers](#maintainers)
 - [About SumUp](#about-sumup)
 
 ## 💻 Prerequisites
 
-- You should have **[Node.js](https://nodejs.org/)** installed at a version equal or above **`v9.10.0`**. If you cannot do that, see the [Troubleshooting](#troubleshooting) section for ways around this requirement.
-- At the moment this project reqires **[`yarn`](https://yarnpkg.com/)** 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.
+- You should have **[Node.js](https://nodejs.org/)** installed at a version equal or above **`v14.0.0`**. If you cannot do that, see the [Troubleshooting](#troubleshooting) section for ways around this requirement.
+- At the moment this project reqires **[`yarn`](https://classic.yarnpkg.com/)** (classic) 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://classic.yarnpkg.com/en/docs/install).
 
-## ✨ Setting up a new SumUp React project
+## ✨ Setting up a new JavaScript SumUp React project
 
 1. Open your terminal.
 2. Navigate to the directory you would like to place your project in.
-3. Run `yarn create @sumup/sumup-react-app my-app`, where `my-app` is the name of your project.
+3. Run `yarn create react-app --template @sumup`, where `my-app` is the name of your project.
 
-This will create the folder `my-app` and initialize a new project inside. The project will be based on [`create-react-app`](https://github.com/facebook/create-react-app) and will use the SumUp's [`Circuit UI`](https://circuit.sumup.com/) component library and [Foundry](https://github.com/sumup/foundry) toolkit.
+This will create the folder `my-app` and initialize a new project inside. The project will be based on [`create-react-app`](https://github.com/facebook/create-react-app) and will use SumUp's [`Circuit UI`](https://circuit.sumup.com/) component library and [Foundry](https://github.com/sumup/foundry) toolkit.
+
+> **Optional**: CRA will use React version `^17.0.0` with the new JSX runtime. You can remove any synthetic default React import statements from the codebase (i.e. `import React from 'react'`). If you do, make sure you disable the corresponding ESLint rules in `.eslintrc.js`, by providing overrides to Foundry in [a second argument](https://github.com/sumup-oss/foundry/blob/main/src/configs/eslint/config.ts#L341). See the [React team's blog post](https://reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html#eslint) covering the new runtime for details about the ESLint rules.
 
 ## 🛠 Development workflow
 
@@ -50,92 +50,53 @@ To create a production build of your app, run `yarn build`. `react-scripts` will
 
 ### Adding a new component
 
-We try making adding new components as easy as possible. Run `yarn create-component YourComponentName` to launch the plop CLI exposed and configured by Foundry.
+We try making adding new components as easy as possible. Run `yarn create:component YourComponentName` to launch the plop CLI exposed and configured by Foundry.
 
 <div align="center">
 
-![A GIF of how to use the create-component script.](https://github.com/sumup/create-sumup-react-app/blob/master/.github/create-component.gif?raw=true 'Using create-component')
+![A GIF of how to use the create-component script.](./github/create-component.gif 'Using create-component')
 
 </div>
 
 ### Linting your code
 
-A linter is a tool that checks your code for:
+A linter is a tool that checks your code for
 
 - problems that will cause it to break when run, or
 - code style that violates a given set of rules the project is following.
 
-Linting serves as a first line of defence against evil bugs on production.​ Your project will be set up to use a version of the popular [ESLint](https://eslint.org) linter for JavaScript provided by Foundry. You can lint your code and apply automatic fixes by running `yarn lint`. Usually, your editor is able to integrate with ESLint. Check your options and refer to the [Tips](#setting-up-foundry-s-eslint-in-your-editor) section for details on how to make this work with Foundry.
+Linting serves as a first line of defence against evil bugs on production.​ Your project will be set up to use a version of the popular [ESLint](https://eslint.org) linter for JavaScript provided by Foundry. You can lint your code and apply automatic fixes by running `yarn lint`. Usually, your editor is able to integrate with ESLint.
 
 ### Writing tests
 
 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.
 
+For component tests we export a custom `render` method for `testing-library/react` from `src/test-utils.js`. The custom render method ensures components are wrapped in a `ThemeProvider` with the Circuit UI theme. Components created with the `create:component` script will have a `*.spec.js` file with the local `render` method imported. The import should look something like this. The [Testing Library docs for React](https://testing-library.com/docs/react-testing-library/setup#custom-render) contain more details on how to add more React providers for your tests.
+
+```js
+import { render } from '../../test-utils';
+```
+
 ## 📖 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://create-react-app.dev/docs/documentation-intro) for `create-react-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`.
-
-## 💁‍♀ Tips
-
-### Setting up Foundry's ESLint in your editor
-
-The great strength of using a toolkit like Foundry is that you as a user do not have to care about developer dependencies like ESLint. Foundry manages and runs them for you via its `run` command. This, however, becomes a bit tricky when you want your text editor or IDE to run ESLint on your code as you edit it. To get this working, you need to tell your editor where to look for ESLint dependencies.
-
-Your mileage may vary depending on your text editor, but we try to keep a list of instructions here.
-
-#### Visual Studio Code
-
-The ESLint extension for VSCode has a `nodePath` setting. It allows you to add additional paths where the plugin should look when resolving dependencies. By setting it to the default path of Foundry in a project's `node_modules`, you will make VSCode work with Foundry's version of ESLint. Put the following line in your `settings.json`.
-
-```json
-"eslint.nodePath": "node_modules/@sumup/foundry/node_modules",
-```
-
-Don't worry, this won't break ESLint for other projects. It just gives VSCode another relative path where it can look for ESLint.
+- The [README](https://testing-library.com/docs/react-testing-library/intro/) for`react-testing-library`.
 
 ## ⚠️ Troubleshooting
 
 ### Debug mode
 
-`create-sumup-react-app` has a debug mode. To output verbose logging to your console, add the `--debug` flag when creating your app. For example:
-
-```
-yarn create @sumup/sumup-react-app my-debugging-app --debug
-```
-
-### Engine node is incompatible
-
-```
-error [email protected]: The engine "node" is incompatible with this module. Expected version "^6.14.0 || ^8.10.0 || >=9.10.0".
-error Found incompatible module
-```
-
-Use a version of node that is compatible with ESLint. If you cannot install it globally, you may try [nvm](https://github.com/creationix/nvm), [nodenv](https://www.google.com/url?sa=t&rct=j&q=&esrc=s&source=web&cd=1&ved=2ahUKEwinuL3IndneAhVLmbQKHRrJCAQQFjAAegQIBhAC&url=https%3A%2F%2Fgithub.com%2Fnodenv%2Fnodenv&usg=AOvVaw0v5LLFjnmygM4rB0ahbDrx), or similar tools.
-
-### Error watching file for changes
+`create-react-app` has a debug mode. To output verbose logging to your console, add the `--debug` flag when creating your app. For example:
 
 ```
-2017-05-02 09:49 node[8980] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
-2017-05-02 09:49 node[8980] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
-2017-05-02 09:49 node[8980] (FSEvents.framework) FSEventStreamStart: register_with_server: ERROR: f2d_register_rpc() => (null) (-22)
-events.js:163
-      throw er; // Unhandled 'error' event
-      ^
-
-Error: Error watching file for changes: EMFILE
-    at exports._errnoException (util.js:1050:11)
-    at FSEvent.FSWatcher._handle.onchange (fs.js:1376:11)
-error Command failed with exit code 1.
+yarn create @sumup/create-app my-debugging-app --debug
 ```
 
-Make sure you have watchman installed. On macOS and Homebrew as your package manager, you can install it with the following line.
+### Broken build due to ESLint version
 
-```bash
-brew install watchman
-```
+Because we depend on `create-react-app@latest` there is a chance that the shipped ESLint version in `react-scripts` is different from the one shipped with Foundry. Both projects are toolkits. When the build for your application fails, try to create your app with a version of CRA that ships the same version of ESLint as the Foundry's canary channel.
 
 ## Code of conduct (CoC)
 
@@ -165,5 +126,5 @@ If you feel another member of the community violated our CoC or you are experien
         </g>
     </g>
 </svg>
- 
-It is our mission to make easy and fast card payments a reality across the *entire* world. You can pay with SumUp in more than 30 countries, already. Our engineers work in Berlin, Cologne, Sofia and Sāo Paulo. They write code in JavaScript, Swift, Ruby, Go, Java, Erlang, Elixir and more. Want to come work with us? [Head to our careers page](https://sumup.com/careers) to find out more.
+
+It is our mission to make easy and fast card payments a reality across the _entire_ world. You can pay with SumUp in more than 30 countries, already. Our engineers work in Berlin, Cologne, Sofia and Sāo Paulo. They write code in JavaScript, Swift, Ruby, Go, Java, Erlang, Elixir and more. Want to come work with us? [Head to our careers page](https://sumup.com/careers) to find out more.

lint-staged.config.js

@@ -13,4 +13,15 @@
  * limitations under the License.
  */
 
-module.exports = require('@sumup/foundry/lint-staged')();
+module.exports = require('@sumup/foundry/lint-staged')(
+  {
+    language: 'JavaScript',
+  },
+  {
+    // Necessary noop, because configs are merged not replaced.
+    '*.(js|jsx|json|ts|tsx)': [],
+    '*.(js|jsx|ts|tsx)': [
+      'foundry run eslint --fix --no-eslintrc --config .eslintrc.js',
+    ],
+  },
+);