Merge 59b46a4 into 8784981

.all-contributorsrc

@@ -45,7 +45,7 @@
     {
       "login": "lourensdev",
       "name": "Lourens de Villiers",
-      "avatar_url": "https://avatars.githubusercontent.com/u/5746141?v=4",
+      "avatar_url": "https://avatars.githubusercontent.com/u/5746141",
       "profile": "https://github.com/lourensdev",
       "contributions": [
         "doc"
@@ -54,13 +54,25 @@
     {
       "login": "rejochandran",
       "name": "Rejo Chandran",
-      "avatar_url": "https://avatars.githubusercontent.com/u/4696985?v=4",
+      "avatar_url": "https://avatars.githubusercontent.com/u/4696985",
       "profile": "https://github.com/rejochandran",
       "contributions": [
         "code",
         "doc",
         "test"
       ]
+    },
+    {
+      "login": "qeleb",
+      "name": "Caleb Hoff",
+      "avatar_url": "https://avatars.githubusercontent.com/u/15345696",
+      "profile": "https://github.com/qeleb",
+      "contributions": [
+        "code",
+        "doc",
+        "ideas",
+        "test"
+      ]
     }
   ],
   "contributorsPerLine": 8,

.gitignore

@@ -9,9 +9,19 @@ stats.json
 # misc
 .DS_Store
 npm-debug.log*
+
+# yarn
 yarn-debug.log*
 yarn-error.log*
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
 
+# env
 .env.development.local
 .env.test.local
 .env.production.local

.vscode/settings.json

@@ -15,5 +15,11 @@
   },
   "[html]": {
     "editor.defaultFormatter": "esbenp.prettier-vscode"
-  }
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll": true,
+    "source.fixAll.eslint": true
+  },
+  "editor.formatOnSave": true,
+  "javascript.format.enable": false
 }

CHANGELOG.md

@@ -2,13 +2,13 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
-### [1.2.5](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.2.4...v1.2.5) (2022-06-20)
+## [1.2.5](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.2.4...v1.2.5) (2022-06-20)
 
 ### Internals
 
 - 🔧 bump react to 18.1 ([#170](https://github.com/react-boilerplate/react-boilerplate-cra-template/issues/170)) ([7ef3155](https://github.com/react-boilerplate/react-boilerplate-cra-template/commit/7ef31555a29c273ffd02b55f30f913218d13eb1f))
 
-### [1.2.4](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.2.3...v1.2.4) (2022-04-12)
+## [1.2.4](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.2.3...v1.2.4) (2022-04-12)
 
 ### Bug Fixes
 
@@ -96,15 +96,15 @@ All notable changes to this project will be documented in this file. See [standa
 - 🔧 switched to yarn ([#89](https://github.com/react-boilerplate/react-boilerplate-cra-template/issues/89)) ([2a90e24](https://github.com/react-boilerplate/react-boilerplate-cra-template/commit/2a90e24b8eaf8adcfb6008f20a2fc4a8f83bfa33))
 </details>
 
-### [1.0.2](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.0.1...v1.0.2) (2020-10-27)
+## [1.0.2](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.0.1...v1.0.2) (2020-10-27)
 
 Quick patch for cra v4 bug. No changes
 
 ### Bug Fixes
 
 - CRA v4 bug fix ([#79](https://github.com/react-boilerplate/react-boilerplate-cra-template/issues/79)) ([2cae593](https://github.com/react-boilerplate/react-boilerplate-cra-template/commit/2cae593fbd53ee1e6e4a7f31cf50781c1b1ab6b9))
 
-### [1.0.1](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.0.0...v1.0.1) (2020-07-03)
+## [1.0.1](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v1.0.0...v1.0.1) (2020-07-03)
 
 ### Bug Fixes
 
@@ -168,7 +168,7 @@ Quick patch for cra v4 bug. No changes
 
 </details>
 
-### [0.1.3](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v0.1.2...v0.1.3) (2020-05-05)
+## [0.1.3](https://github.com/react-boilerplate/react-boilerplate-cra-template/compare/v0.1.2...v0.1.3) (2020-05-05)
 
 ### Bug Fixes
 

README.md

@@ -135,7 +135,8 @@ But wait... there's more!
     <td align="center"><a href="https://github.com/receptiryaki"><img src="https://avatars0.githubusercontent.com/u/3495307?s=80" width="80px;" alt=""/><br /><sub><b>Recep Tiryaki</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=receptiryaki" title="Code">💻</a> <a href="#ideas-receptiryaki" title="Ideas, Planning, & Feedback">🤔</a> <a href="#design-receptiryaki" title="Design">🎨</a></td>
     <td align="center"><a href="https://github.com/mogsdad"><img src="https://avatars3.githubusercontent.com/u/1707731?s=80" width="80px;" alt=""/><br /><sub><b>David Bingham</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=mogsdad" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/lourensdev"><img src="https://avatars.githubusercontent.com/u/5746141?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Lourens de Villiers</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=lourensdev" title="Documentation">📖</a></td>
-    <td align="center"><a href="https://github.com/rejochandran"><img src="https://avatars.githubusercontent.com/u/4696985?v=4?s=80" width="80px;" alt=""/><br /><sub><b>Rejo Chandran</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Code">💻</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Documentation">📖</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/rejochandran"><img src="https://avatars.githubusercontent.com/u/4696985?s=80" width="80px;" alt=""/><br /><sub><b>Rejo Chandran</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Code">💻</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Documentation">📖</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=rejochandran" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/qeleb"><img src="https://avatars.githubusercontent.com/u/15345696?s=80" width="80px;" alt=""/><br /><sub><b>Caleb Hoff</b></sub></a><br /><a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=qeleb" title="Code">💻</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=qeleb" title="Documentation">📖</a> <a href="#ideas-qeleb" title="Ideas, Planning, & Feedback">🤔</a> <a href="https://github.com/react-boilerplate/react-boilerplate-cra-template/commits?author=qeleb" title="Tests">⚠️</a></td>
   </tr>
 </table>
 

docs/SUMMARY.md

@@ -7,6 +7,7 @@
 
 - [CLI & Scaffolding](tools/commands.md)
 - [Editor Configuration](tools/editors.md)
+- [Package Managers](tools/package-managers.md)
 
 ## Building Blocks
 

docs/building-blocks/css.md

@@ -65,9 +65,9 @@ import { media } from 'styles/media';
 
 const SomeDiv = styled.div`
   display: flex;
-  ....
-    ${media.medium`
-      display: block
-  `};
+  .... ${media.medium} {
+    display: block;
+  }
 `;
+``;
 ```

docs/building-blocks/testing.md

@@ -51,7 +51,7 @@ function HomePage() {
 
 _Note: This is a [state**ful** (or "smart") component](../understanding-react-boilerplate.md#src-app)_
 
-When rendered normally with the standard `ReactDOMClient.createRoot` function, this will be the HTML output
+When rendered normally with the standard `ReactDOMClient.createRoot().render()` function, this will be the HTML output
 (_Comments added in parallel to compare structures in HTML from JSX source_):
 
 ```html
@@ -177,3 +177,5 @@ describe('<Button />', () => {
 And that's how you unit-test your components and make sure they work correctly!
 
 Be sure to have a look at our example application. It deliberately shows some variations of test implementations with `react-testing-library`.
+
+> For more robust user interaction tests, see [@testing-library/user-event](https://github.com/testing-library/user-event). `fireEvent` dispatches DOM events, but `user-event` should be used to simulate full interactions, which may fire multiple events and do additional checks along the way.

docs/tools/editors.md

@@ -8,11 +8,10 @@ We provide a `.vscode` folder out-of-the-box which includes the **recommended ex
 
 They are highly suggested for the best Developer Experience. Extensions are responsible for:
 
-- Eslint
-- Prettier
-- Chrome debugger
-- Jest
-- Styled Components
+- [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
+- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+- [Styled Components](https://marketplace.visualstudio.com/items?itemName=styled-components.vscode-styled-components)
+- [Jest](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest)
 
 These are the basic building blocks in the boilerplate.
 

docs/tools/package-managers.md

@@ -0,0 +1,59 @@
+# Using a Package Manager
+
+## Switching from NPM to Yarn
+
+While you may be familiar with `npm`, or even use it as your package manager of choice, it is not the recommended package manager for this project. This is because `Yarn` is faster, more reliable, and more extensible than `npm`. If you are not familiar with `Yarn`, you can read more about it [here](https://yarnpkg.com/en).
+
+To download `Yarn` using `npm`, run the following command:
+
+```bash
+npm install -g yarn
+```
+
+This will install `Yarn Classic/v1` globally on your machine.
+
+## Upgrading to Yarn 3
+
+### Why Yarn 3
+
+`Yarn 3` includes a host of benefits over `Yarn Classic/v1`, including:
+
+1. Even **faster** installs
+1. More verbose & readable output
+1. `Yarn version` is stored directly in the repo to keep everyone on the same version
+1. `Yarn plugins` can be added to extend the functionality of `Yarn`
+1. `PnP` (Plug and Play) mode can be used to improve performance and stability (if supported by your project)
+1. Helpful, new commands like `yarn dedupe`, `yarn info`, & more
+
+> Yarn does not use `PnP` by default. If you would like to use `PnP`, you can read more about it [here](https://yarnpkg.com/features/pnp).
+
+> Read more about the differences between `Yarn Classic/v1` and `Yarn 3` [here](https://yarnpkg.com/getting-started/migration).
+
+### Upgrading
+
+To upgrade to `Yarn 3` from `Yarn Classic/v1`, run the following command:
+
+```bash
+yarn set version berry
+yarn install
+```
+
+## Yarn Plugins
+
+Now, you can start getting plugins to extend the functionality of `Yarn 3`.
+
+### Yarn-Typescript Plugin
+
+```bash
+yarn plugin import typescript
+```
+
+This will install the `Yarn-TypeScript` plugin, which automatically adds `@types/` packages into your dependencies when you add a package that doesn't include its own types
+
+### Interactive-Tools
+
+```bash
+yarn plugin import interactive-tools
+```
+
+This will install the `Interactive-Tools` plugin, which includes the `yarn dedupe` & `yarn upgrade-interactive` commands. These commands will help you to remove duplicate packages from your `node_modules` folder, and upgrade your dependencies to the latest versions.

internals/generators/component/index.ts

@@ -10,7 +10,7 @@ import { baseGeneratorPath } from '../paths';
 
 inquirer.registerPrompt('directory', require('inquirer-directory'));
 
-export enum ComponentProptNames {
+export const enum ComponentProptNames {
   componentName = 'componentName',
   path = 'path',
   wantMemo = 'wantMemo',

internals/generators/slice/index.ts

@@ -11,7 +11,7 @@ import { baseGeneratorPath } from '../paths';
 
 inquirer.registerPrompt('directory', require('inquirer-directory'));
 
-export enum SliceProptNames {
+export const enum SliceProptNames {
   'sliceName' = 'sliceName',
   'path' = 'path',
   'wantSaga' = 'wantSaga',

internals/startingTemplate/src/index.tsx

@@ -9,7 +9,7 @@ import 'react-app-polyfill/ie11';
 import 'react-app-polyfill/stable';
 
 import * as React from 'react';
-import * as ReactDOMClient from 'react-dom/client';
+import ReactDOM from 'react-dom/client';
 import { Provider } from 'react-redux';
 
 // Use consistent styling
@@ -28,9 +28,11 @@ import reportWebVitals from 'reportWebVitals';
 import './locales/i18n';
 
 const store = configureAppStore();
-const MOUNT_NODE = document.getElementById('root') as HTMLElement;
+const root = ReactDOM.createRoot(
+  document.getElementById('root') as HTMLElement,
+);
 
-ReactDOMClient.createRoot(MOUNT_NODE!).render(
+root.render(
   <Provider store={store}>
     <HelmetProvider>
       <React.StrictMode>

internals/startingTemplate/src/styles/__tests__/media.test.ts

@@ -3,12 +3,12 @@ import { css } from 'styled-components/macro';
 
 describe('media', () => {
   it('should return media query in css', () => {
-    const mediaQuery = media.small`color:red;`.join('');
+    const mediaQuery = `${media.small()}{color:red;}`;
     const cssVersion = css`
       @media (min-width: ${sizes.small}px) {
         color: red;
       }
     `.join('');
-    expect(mediaQuery).toEqual(cssVersion);
+    expect(mediaQuery).toMatch(cssVersion);
   });
 });

internals/startingTemplate/src/styles/media.ts

@@ -2,18 +2,8 @@
  * Media queries utility
  */
 
-import {
-  css,
-  DefaultTheme,
-  CSSObject,
-  InterpolationFunction,
-  ThemedStyledProps,
-  Interpolation,
-  FlattenInterpolation,
-} from 'styled-components/macro';
-
 /*
- * Taken from https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32914
+ * Inspired by https://github.com/DefinitelyTyped/DefinitelyTyped/issues/32914
  */
 
 // Update your breakpoints if you want
@@ -24,39 +14,21 @@ export const sizes = {
   xlarge: 1920,
 };
 
-// Iterate through the sizes and create a media template
+// Iterate through the sizes and create min-width media queries
 export const media = (Object.keys(sizes) as Array<keyof typeof sizes>).reduce(
-  (acc, label) => {
-    acc[label] = (first: any, ...interpolations: any[]) => css`
-      @media (min-width: ${sizes[label]}px) {
-        ${css(first, ...interpolations)}
-      }
-    `;
-
+  (acc, size) => {
+    acc[size] = () => `@media (min-width:${sizes[size]}px)`;
     return acc;
   },
-  {} as { [key in keyof typeof sizes]: MediaFunction },
+  {} as { [key in keyof typeof sizes]: () => string },
 );
 
-/*
- * @types/styled-component is not working properly as explained in the github issue referenced above.
- * We must overcome this with custom typings, however, this might not work in time as the styled-components update.
- * Be carefull and keep an eye on the issue and the possible improvements
- */
-type MediaFunction = <P extends object>(
-  first:
-    | TemplateStringsArray
-    | CSSObject
-    | InterpolationFunction<ThemedStyledProps<P, DefaultTheme>>,
-  ...interpolations: Array<Interpolation<ThemedStyledProps<P, DefaultTheme>>>
-) => FlattenInterpolation<ThemedStyledProps<P, DefaultTheme>>;
-
 /* Example
 const SomeDiv = styled.div`
   display: flex;
   ....
-  ${media.medium`
+  ${media.medium} {
     display: block
-  `}
+  }
 `;
 */