0.0.15 Release

.eslintrc.json

@@ -0,0 +1,45 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "plugin:react-hooks/recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jest/recommended",
+    "plugin:unicorn/recommended",
+    "plugin:prettier/recommended",
+    "prettier/@typescript-eslint"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true
+    }
+  },
+  "rules": {
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "sort-imports": [
+      "error",
+      {
+        "ignoreCase": false,
+        "ignoreDeclarationSort": true,
+        "ignoreMemberSort": false,
+        "memberSyntaxSortOrder": ["none", "all", "multiple", "single"]
+      }
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        "patterns": ["@material-ui/*/*/*", "!@material-ui/core/test-utils/*"]
+      }
+    ]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

README.md

@@ -1,4 +1,4 @@
-# ts-react-playground - [TypeScript](http://www.typescriptlang.org/) [React](https://reactjs.org/) Playground
+# [<img src="./typescript.svg" />](http://www.typescriptlang.org/) [<img src="./react.svg" />](https://reactjs.org/) Playground
 
 #### [Storybook](https://gregoranders.github.io/ts-react-playground-docs)
 

SECURITY.md

@@ -5,7 +5,8 @@
 ​
 | Version | Supported |
 | ------- | ------------------ |
-| 0.0.14 | :white_check_mark: |
+| 0.0.15 | :white_check_mark: |
+| 0.0.14 | :x: |
 | 0.0.13 | :x: |
 | 0.0.12 | :x: |
 | 0.0.11 | :x: |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ts-react-playground",
-  "version": "0.0.14",
+  "version": "0.0.15",
   "description": "TypeScript React Playground",
   "scripts": {
     "start": "webpack-dev-server --open --progress --config webpack.config.js",
@@ -32,25 +32,25 @@
     "prefavicon": "rimraf ./public/assets ./public/favicon.html",
     "favicon": "ts-node --project ./scripts/tsconfig.json ./scripts/favicon.ts",
     "prevendor": "rimraf ./public/vendor ./public/es-module-shims.js",
-    "vendor": "rimraf ./public/vendor && npm run vendor:base && npm run vendor:faker && npm run vendor:fontawesome && npm run vendor:react && npm run vendor:recharts && npm run vendor:esmoduleshims && npm run vendor:materialui",
-    "vendor:base": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-base.config.js",
-    "vendor:faker": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-faker.config.js",
-    "vendor:fontawesome": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-fontawesome.config.js",
-    "vendor:react": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-react.config.js",
-    "vendor:recharts": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-recharts.config.js",
+    "vendor": "npm run vendor:base && npm run vendor:faker && npm run vendor:fontawesome && npm run vendor:react && npm run vendor:recharts && npm run vendor:esmoduleshims && npm run vendor:materialui",
+    "vendor:base": "rollup -c ./src/vendor/rollup-base.config.js",
+    "vendor:faker": "rollup -c ./src/vendor/rollup-faker.config.js",
+    "vendor:fontawesome": "rollup -c ./src/vendor/rollup-fontawesome.config.js",
+    "vendor:react": "rollup -c ./src/vendor/rollup-react.config.js",
+    "vendor:recharts": "rollup -c ./src/vendor/rollup-recharts.config.js",
     "vendor:esmoduleshims": "tsc --project ./src/vendor/es-module-shims",
     "vendor:materialui": "npm run vendor:materialui-base && npm run vendor:materialui-icons && npm run vendor:mdi-material-ui && npm run vendor:devexpress",
-    "vendor:materialui-base": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-materialui.config.js",
-    "vendor:materialui-icons": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-materialui-icons.config.js",
-    "vendor:mdi-material-ui": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-mdi-material-ui.config.js",
-    "vendor:devexpress": "cross-env NODE_ENV=production rollup -c ./src/vendor/rollup-devexpress.config.js",
+    "vendor:materialui-base": "rollup -c ./src/vendor/rollup-materialui.config.js",
+    "vendor:materialui-icons": "rollup -c ./src/vendor/rollup-materialui-icons.config.js",
+    "vendor:mdi-material-ui": "rollup -c ./src/vendor/rollup-mdi-material-ui.config.js",
+    "vendor:devexpress": "rollup -c ./src/vendor/rollup-devexpress.config.js",
     "preserviceWorker": "rimraf ./public/serviceWorker.js",
     "serviceWorker": "tsc --project ./src/service --outFile ./public/serviceWorker.js",
     "postserviceWorker": "workbox injectManifest workbox-config.js",
     "prewatch-serviceWorker": "npm run serviceWorker",
     "watch-serviceWorker": "tsc --watch --project ./src/service --outFile ./public/serviceWorker.js",
     "predocker:build": "npm run build",
-    "docker:build": "cross-env NODE_ENV=production docker-compose build --force-rm --no-cache --parallel --pull",
+    "docker:build": "docker-compose build --force-rm --no-cache --parallel --pull",
     "docker:up": "docker-compose up -d",
     "docker:down": "docker-compose down",
     "codeclimate": "docker run --interactive --tty --rm --env CODECLIMATE_CODE=\"$PWD\" --volume \"$PWD\":/code --volume /var/run/docker.sock:/var/run/docker.sock --volume /tmp/cc:/tmp/cc codeclimate/codeclimate analyze",
@@ -99,7 +99,7 @@
       "**/script/**/*.ts",
       "!**/script/index.tsx",
       "!**/script/application.tsx",
-      "!**/script/testUtils.tsx"
+      "!**/script/test-utils.tsx"
     ],
     "coverageReporters": [
       "lcovonly",
@@ -148,57 +148,6 @@
   "jest-junit": {
     "outputDirectory": "./test"
   },
-  "eslintConfig": {
-    "parser": "@typescript-eslint/parser",
-    "extends": [
-      "plugin:react-hooks/recommended",
-      "plugin:react/recommended",
-      "plugin:@typescript-eslint/recommended",
-      "plugin:prettier/recommended",
-      "prettier/@typescript-eslint"
-    ],
-    "parserOptions": {
-      "ecmaVersion": 2020,
-      "sourceType": "module",
-      "ecmaFeatures": {
-        "jsx": true
-      }
-    },
-    "rules": {
-      "@typescript-eslint/explicit-function-return-type": "off",
-      "@typescript-eslint/explicit-module-boundary-types": "off",
-      "react-hooks/rules-of-hooks": "error",
-      "react-hooks/exhaustive-deps": "warn",
-      "sort-imports": [
-        "error",
-        {
-          "ignoreCase": false,
-          "ignoreDeclarationSort": true,
-          "ignoreMemberSort": false,
-          "memberSyntaxSortOrder": [
-            "none",
-            "all",
-            "multiple",
-            "single"
-          ]
-        }
-      ],
-      "no-restricted-imports": [
-        "error",
-        {
-          "patterns": [
-            "@material-ui/*/*/*",
-            "!@material-ui/core/test-utils/*"
-          ]
-        }
-      ]
-    },
-    "settings": {
-      "react": {
-        "version": "detect"
-      }
-    }
-  },
   "prettier": {
     "semi": true,
     "trailingComma": "all",
@@ -301,9 +250,11 @@
     "es-module-shims": "0.4.7",
     "eslint": "7.3.1",
     "eslint-config-prettier": "6.11.0",
+    "eslint-plugin-jest": "23.17.1",
     "eslint-plugin-prettier": "3.1.4",
     "eslint-plugin-react": "7.20.0",
     "eslint-plugin-react-hooks": "4.0.4",
+    "eslint-plugin-unicorn": "20.1.0",
     "express": "4.17.1",
     "faker": "4.1.0",
     "favicons": "6.1.0",

src/script/application.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount } from '@app/testUtils';
+import React, { mount } from '@app/test-utils';
 
 import * as TestSubject from '@app/application';
 

src/script/components/atoms/button/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { act, create, mount } from '@app/testUtils';
+import React, { act, create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@atoms/button';
 

src/script/components/atoms/button/index.tsx

@@ -20,9 +20,9 @@ const defaultProps = {
   /**
    * onClick handler
    *
-   * @type (e: React.MouseEvent<HTMLButtonElement>) => void
+   * @type (event: React.MouseEvent<HTMLButtonElement>) => void
    */
-  onClick: (e: React.MouseEvent<HTMLButtonElement>) => console.log(e),
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => console.log(event),
   /**
    * HTML button content
    *
@@ -39,8 +39,8 @@ export const Button = ({ children, disabled, onClick }: Props) => {
   return (
     <button
       disabled={disabled}
-      onClick={(e) => {
-        onClick(e);
+      onClick={(event) => {
+        onClick(event);
       }}
     >
       {children}

src/script/components/atoms/navLink/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { create, mount } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import { MemoryRouter } from 'react-router-dom';
 

src/script/components/atoms/navLink/index.tsx

@@ -22,7 +22,7 @@ export const NavLink = ({ className, to, children }: Props) => {
     'w3-hover-theme': true,
   } as Record<string, boolean>;
 
-  if (className && className.length) {
+  if (className && className.length > 0) {
     classes[className] = true;
   }
 

src/script/components/atoms/themeSwitch/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { RecoilRoot, create, mount } from '@app/testUtils';
+import React, { RecoilRoot, create, mount } from '@app/test-utils';
 
 import { Switch } from '@material-ui/core';
 
@@ -68,6 +68,7 @@ describe(`${TestSubject.ThemeSwitch.displayName}`, () => {
           <TestComponent />
         </RecoilRoot>,
       );
+      // eslint-disable-next-line unicorn/no-fn-reference-in-iterator
       expect(testSubject.find(Switch)).toHaveProp('checked', false);
     });
 
@@ -81,6 +82,7 @@ describe(`${TestSubject.ThemeSwitch.displayName}`, () => {
           <TestComponent />
         </RecoilRoot>,
       );
+      // eslint-disable-next-line unicorn/no-fn-reference-in-iterator
       expect(testSubject.find(Switch)).toHaveProp('checked', true);
     });
   });

src/script/components/atoms/user/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import { DefaultUser } from '@models/user';
 

src/script/components/layout/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { create, mount } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import { MemoryRouter } from 'react-router-dom';
 

src/script/components/molecules/users/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { create, mount } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import { DefaultUser } from '@models/user';
 

src/script/components/organisms/footer/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@organisms/footer';
 

src/script/components/organisms/header/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import { MemoryRouter } from 'react-router-dom';
 

src/script/components/organisms/main/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@organisms/main';
 
@@ -33,7 +33,7 @@ describe(`${TestSubject.Main.displayName}`, () => {
       expect(testSubject.text()).toBe('test');
     });
 
-    it('string', () => {
+    it('element', () => {
       const testSubject = mount(
         <TestComponent>
           <span>test</span>

src/script/components/organisms/nav/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import { MemoryRouter } from 'react-router-dom';
 

src/script/components/organisms/users/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { RecoilRoot, act, create, mount } from '@app/testUtils';
+import React, { RecoilRoot, act, create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@organisms/users';
 
@@ -28,7 +28,7 @@ describe(`${TestSubject.UsersModelView.displayName}`, () => {
     expect(testSubject.text()).toBe('Generate Users');
   });
 
-  it('mount', () => {
+  it('click', () => {
     const testSubject = mount(
       <RecoilRoot>
         <TestComponent />

src/script/components/pages/about/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@pages/about';
 

src/script/components/pages/home/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { RecoilRoot, create, mount } from '@app/testUtils';
+import React, { RecoilRoot, create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@pages/home';
 

src/script/components/pages/index/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create } from '@app/testUtils';
+import React, { create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@pages/index';
 

src/script/components/pages/materialui/index.spec.tsx

@@ -1,4 +1,4 @@
-import React, { mount, create, RecoilRoot } from '@app/testUtils';
+import React, { RecoilRoot, create, mount } from '@app/test-utils';
 
 import * as TestSubject from '@pages/materialui';
 

src/script/index.tsx

@@ -3,11 +3,11 @@ import { render } from 'react-dom';
 import { Workbox } from 'workbox-window';
 
 const basename = (() => {
-  const el = document.head.querySelector('base');
-  if (el) {
-    const attr = el.getAttribute('href');
-    if (attr) {
-      return attr;
+  const element = document.head.querySelector('base');
+  if (element) {
+    const attribute = element.getAttribute('href');
+    if (attribute) {
+      return attribute;
     }
   }
   return '/';
@@ -25,12 +25,12 @@ const registerServiceWorker = async (base: string) => {
 };
 
 export const bootstrap = async (serviceWorker = true): Promise<void> => {
-  const el = document.querySelector('#app');
-  if (!el) {
-    throw Error('Missing element `#app`');
+  const element = document.querySelector('#app');
+  if (!element) {
+    throw new Error('Missing element `#app`');
   }
 
-  render(<Application basename={basename} />, el);
+  render(<Application basename={basename} />, element);
 
   if (serviceWorker) {
     await registerServiceWorker(basename);

src/script/loading.spec.tsx

@@ -1,4 +1,4 @@
-import React, { act, create, memo, mount } from '@app/testUtils';
+import React, { act, create, memo, mount } from '@app/test-utils';
 
 import * as TestSubject from '@app/loading';