From e287cd752e5b484ff550f86bf2abd9fabf0c5444 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Sat, 20 Jun 2020 04:27:17 +0200 Subject: [PATCH 01/29] chore(release): prepare next release prepare next release - v0.0.13 --- SECURITY.md | 3 ++- docs/public | 2 +- package.json | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/SECURITY.md b/SECURITY.md index 004c0c8..b20627d 100644 --- a/SECURITY.md +++ b/SECURITY.md @@ -5,7 +5,8 @@ ​ | Version | Supported | | ------- | ------------------ | -| 0.0.12 | :white_check_mark: | +| 0.0.13 | :white_check_mark: | +| 0.0.12 | :x: | | 0.0.11 | :x: | | 0.0.10 | :x: | | 0.0.9 | :x: | diff --git a/docs/public b/docs/public index dfae89d..c73faa0 160000 --- a/docs/public +++ b/docs/public @@ -1 +1 @@ -Subproject commit dfae89d3517f0f685af08135b4d94540e3e51abd +Subproject commit c73faa03968f5a2d3c42a320c76e6ffa71bca114 diff --git a/package.json b/package.json index 8a7b375..5e2ec8d 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ts-react-playground", - "version": "0.0.12", + "version": "0.0.13", "description": "TypeScript React Playground", "scripts": { "start": "webpack-dev-server --open --progress --config webpack.config.js", From 2eae49fdf7ee08ec715127d82b275e28b3c9afb9 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Sat, 20 Jun 2020 04:36:03 +0200 Subject: [PATCH 02/29] build(e2e): add screenshots add 0.0.13 screenshots --- e2e/screenshots | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/e2e/screenshots b/e2e/screenshots index 00f1a1f..4d0c64a 160000 --- a/e2e/screenshots +++ b/e2e/screenshots @@ -1 +1 @@ -Subproject commit 00f1a1f1db40ef4c43d3b737791928fbd6db0f91 +Subproject commit 4d0c64a65f549b7b69b0994d594fcb8db387b35e From b9ff2b9c0018b5ff461d698a9ebe0a7585df6fea Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 22 Jun 2020 05:48:29 +0000 Subject: [PATCH 03/29] npm: bump @babel/core from 7.10.2 to 7.10.3 Bumps [@babel/core](https://github.com/babel/babel/tree/HEAD/packages/babel-core) from 7.10.2 to 7.10.3. - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.10.3/packages/babel-core) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5e2ec8d..bae10c2 100644 --- a/package.json +++ b/package.json @@ -212,7 +212,7 @@ }, "homepage": "https://gregoranders.github.io/ts-react-playground/", "devDependencies": { - "@babel/core": "7.10.2", + "@babel/core": "7.10.3", "@devexpress/dx-react-chart": "2.6.4", "@devexpress/dx-react-chart-material-ui": "2.6.4", "@devexpress/dx-react-core": "2.6.4", From 2735dac36f216be7ace93c25c779b989adf5aa36 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 22 Jun 2020 05:55:09 +0000 Subject: [PATCH 04/29] npm: bump gsap from 3.3.3 to 3.3.4 Bumps [gsap](https://github.com/greensock/GSAP) from 3.3.3 to 3.3.4. - [Release notes](https://github.com/greensock/GSAP/releases) - [Commits](https://github.com/greensock/GSAP/compare/3.3.3...3.3.4) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5e2ec8d..77f898e 100644 --- a/package.json +++ b/package.json @@ -307,7 +307,7 @@ "favicons": "6.1.0", "file-loader": "6.0.0", "generate-changelog": "1.8.0", - "gsap": "3.3.3", + "gsap": "3.3.4", "html-webpack-plugin": "4.3.0", "husky": "4.2.5", "idb": "5.0.4", From c86b929ee19d66c95fcd50cf76b525e5f873efe6 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 22 Jun 2020 06:01:18 +0000 Subject: [PATCH 05/29] npm: bump rollup from 2.17.1 to 2.18.0 Bumps [rollup](https://github.com/rollup/rollup) from 2.17.1 to 2.18.0. - [Release notes](https://github.com/rollup/rollup/releases) - [Changelog](https://github.com/rollup/rollup/blob/master/CHANGELOG.md) - [Commits](https://github.com/rollup/rollup/compare/v2.17.1...v2.18.0) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 5e2ec8d..eca2779 100644 --- a/package.json +++ b/package.json @@ -343,7 +343,7 @@ "recharts": "1.8.5", "recoil": "0.0.10", "rimraf": "3.0.2", - "rollup": "2.17.1", + "rollup": "2.18.0", "sass-loader": "8.0.2", "source-map": "0.7.3", "ts-jest": "26.1.0", From 33ff247313e57d46441a6055ba5361da9f77789e Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Mon, 22 Jun 2020 20:22:18 +0200 Subject: [PATCH 06/29] refactor(vscode): refactor configuration --- .vscode/extensions.json | 17 +++++++++ .vscode/react.code-snippets | 65 -------------------------------- .vscode/settings.json | 18 ++------- .vscode/workspace.code-workspace | 19 +--------- 4 files changed, 21 insertions(+), 98 deletions(-) create mode 100644 .vscode/extensions.json delete mode 100644 .vscode/react.code-snippets diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..9600a64 --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,17 @@ +{ + "recommendations": [ + "coenraads.bracket-pair-colorizer", + "msjsdiag.debugger-for-chrome", + "editorconfig.editorconfig", + "dsznajder.es7-react-js-snippets", + "dbaeumer.vscode-eslint", + "orta.vscode-jest", + "pkief.material-icon-theme", + "marlosirapuan.nord-deep", + "eg2.vscode-npm-script", + "esbenp.prettier-vscode", + "rvest.vs-code-prettier-eslint", + "pflannery.vscode-versionlens", + "visualstudioexptteam.vscodeintellicode" + ] +} diff --git a/.vscode/react.code-snippets b/.vscode/react.code-snippets deleted file mode 100644 index 5997758..0000000 --- a/.vscode/react.code-snippets +++ /dev/null @@ -1,65 +0,0 @@ -{ - // Place your ts-covid19-pure.git workspace snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and - // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope - // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is - // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: - // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. - // Placeholders with the same ids are connected. - // Example: - // "Print to console": { - // "scope": "javascript,typescript", - // "prefix": "log", - // "body": [ - // "console.log('$1');", - // "$2" - // ], - // "description": "Log output to console" - // } - "qwer": { - "prefix": "qwer", - "body": [ - "import React, { FunctionComponent, memo, useContext, useEffect, useState } from 'react';", - "import { string as IsString } from 'prop-types';", - "", - "import { Context } from 'context';", - "", - "type Props = {", - " prop?: string;", - "};", - "", - "export const $1: FunctionComponent = ({ prop }) => {", - " const { theme } = useContext(Context);", - " const [state, setState] = useState(false);", - "", - " useEffect(() => {", - " setState(true);", - " return () => {", - " setState(false);", - " };", - " }, [setState]);", - "", - " return (", - " <>", - "
", - " {theme} - {prop} - {state ? 'mounted' : 'not mounted'}", - "
", - " ", - " );", - "};", - "", - "$1.displayName = '$1';", - "", - "$1.defaultProps = {", - " prop: 'default',", - "};", - "", - "$1.propTypes = {", - " prop: IsString,", - "};", - "", - "export default memo($1);", - "" - ], - "description": "React FunctionComponent with Props, prop-types, memo, useContent, useEffect and useState" - } -} diff --git a/.vscode/settings.json b/.vscode/settings.json index 9a2014f..32818cc 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -4,24 +4,12 @@ }, "eslint.validate": ["javascript", "javascriptreact", "typescript", "typescriptreact"], "editor.formatOnSave": true, - "[javascript]": { - "editor.formatOnSave": false - }, - "[javascriptreact]": { - "editor.formatOnSave": false - }, - "[typescript]": { - "editor.formatOnSave": false - }, - "[typescriptreact]": { - "editor.formatOnSave": false - }, "editor.tabSize": 2, "editor.wordWrapColumn": 120, "editor.minimap.enabled": false, "jest.pathToJest": "npm test --", "jest.coverageFormatter": "GutterFormatter", - "jest.enableInlineErrorMessages": false, - "jest.restartJestOnSnapshotUpdate": false, - "jest.showCoverageOnLoad": false + "jest.enableInlineErrorMessages": true, + "jest.restartJestOnSnapshotUpdate": true, + "jest.showCoverageOnLoad": true } diff --git a/.vscode/workspace.code-workspace b/.vscode/workspace.code-workspace index 53b2778..551fb2c 100644 --- a/.vscode/workspace.code-workspace +++ b/.vscode/workspace.code-workspace @@ -3,22 +3,5 @@ { "path": "../" } - ], - "extensions": { - "recommendations": [ - "coenraads.bracket-pair-colorizer", - "msjsdiag.debugger-for-chrome", - "editorconfig.editorconfig", - "dsznajder.es7-react-js-snippets", - "dbaeumer.vscode-eslint", - "orta.vscode-jest", - "pkief.material-icon-theme", - "marlosirapuan.nord-deep", - "eg2.vscode-npm-script", - "esbenp.prettier-vscode", - "rvest.vs-code-prettier-eslint", - "pflannery.vscode-versionlens", - "visualstudioexptteam.vscodeintellicode" - ] - } + ] } From b83155dd552bc6f8809ba115d255c4c1407f89bb Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Mon, 22 Jun 2020 22:17:17 +0200 Subject: [PATCH 07/29] fix(test): fix test --- src/script/loading.spec.tsx | 18 +----------------- src/script/testUtils.tsx | 4 +++- 2 files changed, 4 insertions(+), 18 deletions(-) diff --git a/src/script/loading.spec.tsx b/src/script/loading.spec.tsx index feaac19..5335a39 100644 --- a/src/script/loading.spec.tsx +++ b/src/script/loading.spec.tsx @@ -23,23 +23,7 @@ describe(`${TestSubject.Loading.displayName}`, () => { const testSubject = mount(); stepForwardInTime(10); expect(testSubject.find('h1').text()).toBe('·'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('··'); - stepForwardInTime(9); + stepForwardInTime(9 * 2); expect(testSubject.find('h1').text()).toBe('···'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('····'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('·····'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('····'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('···'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('··'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('·'); - stepForwardInTime(9); - expect(testSubject.find('h1').text()).toBe('··'); }); }); diff --git a/src/script/testUtils.tsx b/src/script/testUtils.tsx index ee8ce14..a66f0d9 100644 --- a/src/script/testUtils.tsx +++ b/src/script/testUtils.tsx @@ -2,13 +2,15 @@ jest.useFakeTimers(); import React from 'react'; import TestRenderer from 'react-test-renderer'; +import { act } from 'react-dom/test-utils'; import 'jest-enzyme'; import { RecoilRoot } from 'recoil'; -const { act, create } = TestRenderer; import { mount, render } from 'enzyme'; +const { create } = TestRenderer; + export { RecoilRoot, act, create, mount, render }; export default React; From 15dfc3c30f0a322caf8b5a8e1617e1dc7f2bc927 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Tue, 23 Jun 2020 02:09:32 +0200 Subject: [PATCH 08/29] refactor(test): add fetch mock to tests --- jestSetupAfterEnv.js | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) create mode 100644 jestSetupAfterEnv.js diff --git a/jestSetupAfterEnv.js b/jestSetupAfterEnv.js new file mode 100644 index 0000000..5f3f096 --- /dev/null +++ b/jestSetupAfterEnv.js @@ -0,0 +1,8 @@ +window.fetch = jest.fn().mockImplementation(() => { + return Promise.resolve({ + text: () => Promise.resolve(), + json: () => Promise.resolve(), + }); +}); + +fetch = window.fetch; diff --git a/package.json b/package.json index 9121863..de59d09 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "prebuild:webpack": "rimraf ./dist", "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.config.js", "pretest": "rimraf ./test", - "test": "jest --runInBand --env=enzyme --setupFilesAfterEnv=jest-enzyme --reporters=jest-html-reporter jest-spec-reporter jest-junit --coverage --collectCoverage true --coverageDirectory ../test/coverage --rootDir ./src", + "test": "jest --runInBand --env=enzyme --setupFilesAfterEnv=jest-enzyme ../jestSetupAfterEnv.js --reporters=jest-html-reporter jest-spec-reporter jest-junit --coverage --collectCoverage true --coverageDirectory ../test/coverage --rootDir ./src", "test:update": "npm run test -- -u", "watch-test": "npm run test -- --watch", "e2e:serve": "webpack-dev-server --config ./e2e/webpack.config.js --quiet true --liveReload false --inline false", From 3bd3b787ad3a7395f6b1e43bd01ee5f97e2cc31d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Jun 2020 05:47:48 +0000 Subject: [PATCH 09/29] npm: bump ts-jest from 26.1.0 to 26.1.1 Bumps [ts-jest](https://github.com/kulshekhar/ts-jest) from 26.1.0 to 26.1.1. - [Release notes](https://github.com/kulshekhar/ts-jest/releases) - [Changelog](https://github.com/kulshekhar/ts-jest/blob/master/CHANGELOG.md) - [Commits](https://github.com/kulshekhar/ts-jest/compare/v26.1.0...v26.1.1) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de59d09..232925a 100644 --- a/package.json +++ b/package.json @@ -346,7 +346,7 @@ "rollup": "2.18.0", "sass-loader": "8.0.2", "source-map": "0.7.3", - "ts-jest": "26.1.0", + "ts-jest": "26.1.1", "ts-loader": "7.0.5", "ts-node": "8.10.2", "typescript": "3.9.5", From 8727e3aebdebc9e5af7cfc006f3deebd87777190 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Jun 2020 05:55:13 +0000 Subject: [PATCH 10/29] npm: bump @typescript-eslint/eslint-plugin from 3.3.0 to 3.4.0 Bumps [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/eslint-plugin) from 3.3.0 to 3.4.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v3.4.0/packages/eslint-plugin) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de59d09..001944e 100644 --- a/package.json +++ b/package.json @@ -273,7 +273,7 @@ "@types/recoil": "0.0.1", "@types/scheduler": "0.16.1", "@types/storybook__addon-info": "5.2.1", - "@typescript-eslint/eslint-plugin": "3.3.0", + "@typescript-eslint/eslint-plugin": "3.4.0", "@typescript-eslint/parser": "3.3.0", "@zeit/ncc": "0.22.3", "babel-loader": "8.1.0", From 9d969c4d22498ec4941b778f1507bc1bc0dd8857 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Jun 2020 06:03:14 +0000 Subject: [PATCH 11/29] npm: bump @typescript-eslint/parser from 3.3.0 to 3.4.0 Bumps [@typescript-eslint/parser](https://github.com/typescript-eslint/typescript-eslint/tree/HEAD/packages/parser) from 3.3.0 to 3.4.0. - [Release notes](https://github.com/typescript-eslint/typescript-eslint/releases) - [Changelog](https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/parser/CHANGELOG.md) - [Commits](https://github.com/typescript-eslint/typescript-eslint/commits/v3.4.0/packages/parser) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de59d09..b33676f 100644 --- a/package.json +++ b/package.json @@ -274,7 +274,7 @@ "@types/scheduler": "0.16.1", "@types/storybook__addon-info": "5.2.1", "@typescript-eslint/eslint-plugin": "3.3.0", - "@typescript-eslint/parser": "3.3.0", + "@typescript-eslint/parser": "3.4.0", "@zeit/ncc": "0.22.3", "babel-loader": "8.1.0", "breakpoint-sass": "2.7.1", From 4715f69e3a0806bbfb1d38202863c1443ee7cabd Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Jun 2020 06:22:57 +0000 Subject: [PATCH 12/29] npm: bump jest-junit from 10.0.0 to 11.0.1 Bumps [jest-junit](https://github.com/jest-community/jest-junit) from 10.0.0 to 11.0.1. - [Release notes](https://github.com/jest-community/jest-junit/releases) - [Commits](https://github.com/jest-community/jest-junit/compare/v10.0.0...v11.0.1) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de59d09..6cdeae6 100644 --- a/package.json +++ b/package.json @@ -318,7 +318,7 @@ "jest-enzyme": "7.1.2", "jest-html-reporter": "3.1.3", "jest-image-snapshot": "4.0.2", - "jest-junit": "10.0.0", + "jest-junit": "11.0.1", "jest-puppeteer": "4.4.0", "jest-spec-reporter": "1.0.14", "lint-staged": "10.2.11", From ca37df6cd556b7f01af052de584093f089a71ea2 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 23 Jun 2020 06:26:19 +0000 Subject: [PATCH 13/29] npm: bump @rollup/plugin-node-resolve from 8.0.1 to 8.1.0 Bumps [@rollup/plugin-node-resolve](https://github.com/rollup/plugins) from 8.0.1 to 8.1.0. - [Release notes](https://github.com/rollup/plugins/releases) - [Commits](https://github.com/rollup/plugins/compare/node-resolve-v8.0.1...node-resolve-v8.1.0) Signed-off-by: dependabot[bot] --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index de59d09..285128a 100644 --- a/package.json +++ b/package.json @@ -228,7 +228,7 @@ "@rollup/plugin-commonjs": "13.0.0", "@rollup/plugin-html": "0.2.0", "@rollup/plugin-json": "4.1.0", - "@rollup/plugin-node-resolve": "8.0.1", + "@rollup/plugin-node-resolve": "8.1.0", "@rollup/plugin-replace": "2.3.3", "@rollup/plugin-typescript": "4.1.2", "@storybook/addon-a11y": "5.3.19", From 354f13cac8fc9511d988f1fe303f6bf34e068ad0 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Tue, 23 Jun 2020 12:54:21 +0200 Subject: [PATCH 14/29] refactor(test): refactor and fix tests --- package.json | 1 + .../__snapshots__/loading.spec.tsx.snap | 7 +- .../components/atoms/button/index.spec.tsx | 30 +++++-- src/script/components/atoms/button/index.tsx | 36 ++++---- src/script/components/layout/index.spec.tsx | 2 +- src/script/components/layout/index.tsx | 6 +- .../users/__snapshots__/index.spec.tsx.snap | 4 +- .../components/organisms/users/index.spec.tsx | 4 +- .../components/organisms/users/index.tsx | 2 +- .../home/__snapshots__/index.spec.tsx.snap | 4 +- .../components/pages/home/index.spec.tsx | 2 +- src/script/loading.spec.tsx | 88 ++++++++++++++++--- src/script/loading.tsx | 49 ++++------- src/script/testUtils.tsx | 4 +- 14 files changed, 154 insertions(+), 85 deletions(-) diff --git a/package.json b/package.json index de59d09..1b16ddb 100644 --- a/package.json +++ b/package.json @@ -166,6 +166,7 @@ }, "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": [ diff --git a/src/script/__snapshots__/loading.spec.tsx.snap b/src/script/__snapshots__/loading.spec.tsx.snap index 5b0c244..d6cc7c5 100644 --- a/src/script/__snapshots__/loading.spec.tsx.snap +++ b/src/script/__snapshots__/loading.spec.tsx.snap @@ -1,11 +1,10 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Loading snapshot 1`] = ` +exports[`Loading should match default 1`] = `
-

{ expect(testSubject.text()).toBe('Button'); }); - it('click', () => { - const testSubject = mount(); - expect(testSubject.text()).toBe('Button'); - expect(OnClick.mock.calls.length).toEqual(0); - act(() => { - testSubject.find('button').simulate('click'); + describe('click', () => { + const spy = jest.spyOn(console, 'log').mockImplementation(); + + afterEach(() => spy.mockRestore()); + + it('should invoke default onClick handler [console.log(event)]', () => { + const testSubject = mount(Test); + expect(testSubject.text()).toBe('Test'); + + act(() => { + testSubject.find('button').simulate('click'); + }); + expect(spy).toBeCalledTimes(1); + }); + + it('should invoke provided onClick handler', () => { + const testSubject = mount(); + expect(testSubject.text()).toBe('Button'); + expect(OnClick.mock.calls.length).toEqual(0); + act(() => { + testSubject.find('button').simulate('click'); + }); + expect(OnClick).toBeCalledTimes(1); }); - expect(OnClick.mock.calls.length).toEqual(1); }); }); diff --git a/src/script/components/atoms/button/index.tsx b/src/script/components/atoms/button/index.tsx index 84d4267..01c5c21 100644 --- a/src/script/components/atoms/button/index.tsx +++ b/src/script/components/atoms/button/index.tsx @@ -1,34 +1,41 @@ -import React, { FunctionComponent, memo } from 'react'; -import { any as IsAny, bool as IsBoolean, func as IsFunction } from 'prop-types'; +import React, { memo } from 'react'; +import { + array as IsArray, + bool as IsBoolean, + func as IsFunction, + number as IsNumber, + oneOfType as IsOneOfType, + string as IsString, +} from 'prop-types'; -type OnClick = (e?: React.MouseEvent) => void; +type Props = Readonly; -type Props = { +const defaultProps = { /** * disabled property of HTML button * * @default: false */ - disabled?: boolean; + disabled: false, /** * onClick handler * - * @type (e?: React.MouseEvent) => void + * @type (e: React.MouseEvent) => void */ - onClick: OnClick; + onClick: (e: React.MouseEvent) => console.log(e), /** * HTML button content * - * @type string | React.ReactNode + * @type string * @default Button */ - children?: string | React.ReactNode; + children: 'Button', }; /** * HTML Button */ -export const Button: FunctionComponent = ({ children, disabled, onClick }) => { +export const Button = ({ children, disabled, onClick }: Props) => { return ( , diff --git a/src/script/components/organisms/users/index.spec.tsx b/src/script/components/organisms/users/index.spec.tsx index ecb7811..ef04888 100644 --- a/src/script/components/organisms/users/index.spec.tsx +++ b/src/script/components/organisms/users/index.spec.tsx @@ -25,7 +25,7 @@ describe(`${TestSubject.UsersModelView.displayName}`, () => { , ); - expect(testSubject.text()).toBe('Generate Users [0]'); + expect(testSubject.text()).toBe('Generate Users'); }); it('mount', () => { @@ -37,6 +37,6 @@ describe(`${TestSubject.UsersModelView.displayName}`, () => { act(() => { testSubject.find('button').simulate('click'); }); - expect(testSubject.text()).toContain('Generate Users [15]'); + expect(testSubject.text()).toContain('Generate Users'); }); }); diff --git a/src/script/components/organisms/users/index.tsx b/src/script/components/organisms/users/index.tsx index c20759a..350ea85 100644 --- a/src/script/components/organisms/users/index.tsx +++ b/src/script/components/organisms/users/index.tsx @@ -15,7 +15,7 @@ export const UsersModelView: FunctionComponent = () => { return ( <> - +
diff --git a/src/script/components/pages/home/__snapshots__/index.spec.tsx.snap b/src/script/components/pages/home/__snapshots__/index.spec.tsx.snap index 63f4cda..698eec9 100644 --- a/src/script/components/pages/home/__snapshots__/index.spec.tsx.snap +++ b/src/script/components/pages/home/__snapshots__/index.spec.tsx.snap @@ -6,9 +6,7 @@ Array [ disabled={false} onClick={[Function]} > - Generate Users [ - 0 - ] + Generate Users ,
diff --git a/src/script/components/pages/home/index.spec.tsx b/src/script/components/pages/home/index.spec.tsx index 5f8e560..f806550 100644 --- a/src/script/components/pages/home/index.spec.tsx +++ b/src/script/components/pages/home/index.spec.tsx @@ -25,6 +25,6 @@ describe(`${TestSubject.HomePage.displayName}`, () => { , ); - expect(testSubject.text()).toBe('Generate Users [0]'); + expect(testSubject.text()).toBe('Generate Users'); }); }); diff --git a/src/script/loading.spec.tsx b/src/script/loading.spec.tsx index 5335a39..da10456 100644 --- a/src/script/loading.spec.tsx +++ b/src/script/loading.spec.tsx @@ -1,29 +1,97 @@ -import React, { act, create, mount } from '@app/testUtils'; +import React, { act, create, memo, mount } from '@app/testUtils'; import * as TestSubject from '@app/loading'; describe(`${TestSubject.Loading.displayName}`, () => { - it('exports default', () => { + it('should export component', () => { + expect(TestSubject.Loading).toBeDefined(); + }); + + it('should export default', () => { expect(TestSubject.default).toBeDefined(); }); - const TestComponent = TestSubject.default; + it('should export memoized component as default', () => { + expect(TestSubject.default).toStrictEqual(memo(TestSubject.Loading)); + }); - it('snapshot', (): void => { + it('should match default', (): void => { const snapshot = create(); expect(snapshot).toMatchSnapshot(); }); - it('mount', () => { + const TestComponent = TestSubject.default; + + it('should have default props', () => { + const testSubject = mount(); + + act(() => { + testSubject.update(); + }); + + expect(testSubject).toHaveProp('type', 'loading'); + expect(testSubject).toHaveProp('indicator', '·'); + expect(testSubject).toHaveProp('timeout', 300); + }); + + it('should use provided `className`', () => { + const testSubject = mount(); + expect(testSubject).toHaveProp('type', 'test'); + }); + + it('should use provided `timeout`', () => { + const testSubject = mount(); + expect(testSubject).toHaveProp('timeout', 123); + }); + + it('should use provided `indicator`', () => { + const testSubject = mount(); + expect(testSubject).toHaveProp('indicator', 'a'); + }); + + it('should add default indicator each time custom timeout passes', () => { + const stepForwardInTime = (steps = 10) => { + act(() => { + jest.advanceTimersToNextTimer(steps); + testSubject.update(); + }); + }; + const testSubject = mount(); + expect(testSubject.find('span').text()).toBe(''); + stepForwardInTime(2); + expect(testSubject.find('span').text()).toBe('·'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('··'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('···'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('····'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('·····'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('····'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('···'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('··'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('·'); + stepForwardInTime(1); + expect(testSubject.find('span').text()).toBe('··'); + }); + + it('should add custom indicator each time custom default timeout passes', () => { const stepForwardInTime = (steps = 10) => { act(() => { jest.advanceTimersToNextTimer(steps); + testSubject.update(); }); }; - const testSubject = mount(); - stepForwardInTime(10); - expect(testSubject.find('h1').text()).toBe('·'); - stepForwardInTime(9 * 2); - expect(testSubject.find('h1').text()).toBe('···'); + const testSubject = mount(); + expect(testSubject.find('span').text()).toBe(''); + stepForwardInTime(6); + expect(testSubject.find('span').text()).toBe('b'); + stepForwardInTime(3); + expect(testSubject.find('span').text()).toBe('bb'); }); }); diff --git a/src/script/loading.tsx b/src/script/loading.tsx index 43a7c35..6d0504e 100644 --- a/src/script/loading.tsx +++ b/src/script/loading.tsx @@ -1,38 +1,25 @@ -import React, { FunctionComponent, memo, useEffect, useState } from 'react'; -import { number as IsNumber, oneOf as IsOneOf } from 'prop-types'; +import React, { memo, useEffect, useState } from 'react'; +import { number as IsNumber, string as IsString } from 'prop-types'; -// // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -// export const importWithDelay = (name: string, timeout = 10000) => { -// // eslint-disable-next-line @typescript-eslint/no-explicit-any -// return new Promise<{ default: React.LazyExoticComponent> }>((resolve, reject) => { -// import(name) -// .then((mod) => { -// setTimeout(() => { -// resolve(mod); -// }, timeout); -// }) -// .catch(reject); -// }); -// }; +type Props = Readonly; -type LoadingType = 'bootstrap' | 'spinner'; +type Factor = 1 | -1; -type Props = { - timeout?: number; - type?: LoadingType; +const defaultProps = { + indicator: '·', + timeout: 300, + type: 'loading', }; -type Factor = 1 | -1; - -const dots = (count: number) => { +const progress = (count: number, indicator: string) => { let dots = ''; for (let idx = 0; idx < count; idx++) { - dots += '·'; + dots += indicator; } return dots; }; -export const Loading: FunctionComponent = ({ timeout, type }) => { +export const Loading = ({ indicator, timeout, type }: Props) => { const [stage, setStage] = useState(0); const [mode, setMode] = useState(1); @@ -53,22 +40,20 @@ export const Loading: FunctionComponent = ({ timeout, type }) => { }); return ( -
-

+
+
); }; Loading.displayName = 'Loading'; -Loading.defaultProps = { - timeout: 300, - type: 'bootstrap', -}; +Loading.defaultProps = { ...defaultProps }; Loading.propTypes = { - timeout: IsNumber, - type: IsOneOf(['bootstrap', 'spinner']), + indicator: IsString.isRequired, + timeout: IsNumber.isRequired, + type: IsString.isRequired, }; export default memo(Loading); diff --git a/src/script/testUtils.tsx b/src/script/testUtils.tsx index a66f0d9..ca0a79f 100644 --- a/src/script/testUtils.tsx +++ b/src/script/testUtils.tsx @@ -1,6 +1,6 @@ jest.useFakeTimers(); -import React from 'react'; +import React, { memo } from 'react'; import TestRenderer from 'react-test-renderer'; import { act } from 'react-dom/test-utils'; @@ -11,6 +11,6 @@ import { mount, render } from 'enzyme'; const { create } = TestRenderer; -export { RecoilRoot, act, create, mount, render }; +export { RecoilRoot, act, create, memo, mount, render }; export default React; From 840c4a5027f47dfe65b5fcc7f08a84150926ea47 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Tue, 23 Jun 2020 13:19:36 +0200 Subject: [PATCH 15/29] fix(e2e): fix e2e test due to test refactoring --- e2e/journey.spec.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/e2e/journey.spec.ts b/e2e/journey.spec.ts index d59aa09..b27f278 100644 --- a/e2e/journey.spec.ts +++ b/e2e/journey.spec.ts @@ -55,7 +55,7 @@ describe('index', () => { const button = await page.$('button'); expect(button).toBeTruthy(); const html = await page.evaluate((h2) => h2.innerHTML, button); - expect(html).toBe('Generate Users [0]'); + expect(html).toBe('Generate Users'); const image = await page.screenshot(); expect(image).toMatchImageSnapshot(); }, @@ -76,7 +76,7 @@ describe('index', () => { let list = await page.$$('dl'); expect(list).toHaveLength(15); const html = await page.evaluate((h2) => h2.innerHTML, button); - expect(html).toBe('Generate Users [15]'); + expect(html).toBe('Generate Users'); const after = await page.screenshot(); expect(after).toMatchImageSnapshot(); list = await page.$$('dl'); From 94fc59f18f0f7be5637dc4726a3fc9c6a83754c3 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Tue, 23 Jun 2020 13:28:58 +0200 Subject: [PATCH 16/29] chore(dependencies): update dependencies --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index d803a77..fc0476a 100644 --- a/package.json +++ b/package.json @@ -231,7 +231,7 @@ "@rollup/plugin-json": "4.1.0", "@rollup/plugin-node-resolve": "8.1.0", "@rollup/plugin-replace": "2.3.3", - "@rollup/plugin-typescript": "4.1.2", + "@rollup/plugin-typescript": "5.0.0", "@storybook/addon-a11y": "5.3.19", "@storybook/addon-actions": "5.3.19", "@storybook/addon-backgrounds": "5.3.19", @@ -298,7 +298,7 @@ "enzyme": "3.11.0", "enzyme-adapter-react-16": "1.15.2", "es-module-shims": "0.4.7", - "eslint": "7.3.0", + "eslint": "7.3.1", "eslint-config-prettier": "6.11.0", "eslint-plugin-prettier": "3.1.4", "eslint-plugin-react": "7.20.0", From b73cc2aacd2838aecfca60a302d81630aa334a18 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Tue, 23 Jun 2020 15:35:03 +0200 Subject: [PATCH 17/29] build(webpack): refactor webpack config --- webpack.config.js | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/webpack.config.js b/webpack.config.js index 91bb9cf..449210b 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -14,7 +14,7 @@ const plugins = [ new CleanPlugin(), new HtmlWebpackPlugin({ filename: 'index.html', - title: 'TypeScript React Redux Webpack Demo', + title: 'TypeScript React Playground', template: path.join('./public', 'webpack.html'), }), new MiniCssExtractPlugin({ @@ -97,13 +97,6 @@ module.exports = { }, module: { rules: [ - // { - // test: /\.tsx?$/, - // loader: './test', - // options: { - // tsConfig: path.resolve('src/script/tsConfig.json'), - // }, - // }, { test: /\.tsx?$/, loader: 'ts-loader', From aa9f7e2c9a41ea55f2733ec227d841b23c30bca5 Mon Sep 17 00:00:00 2001 From: Gregor Anders Date: Tue, 23 Jun 2020 20:26:45 +0200 Subject: [PATCH 18/29] refactor(script): remove FunctionComponent usage [see](https://medium.com/@martin_hotell/10-typescript-pro-tips-patterns-with-or-without-react-5799488d6680) --- e2e/index.spec.ts | 4 +-- src/script/application.tsx | 8 ++--- src/script/components/atoms/navLink/index.tsx | 32 +++++++++---------- .../components/atoms/themeSwitch/index.tsx | 4 +-- src/script/components/atoms/user/index.tsx | 16 +++++----- src/script/components/layout/index.tsx | 8 ++--- .../components/molecules/users/index.tsx | 16 +++++----- .../components/organisms/footer/index.tsx | 14 ++++---- .../components/organisms/header/index.tsx | 4 +-- .../components/organisms/main/index.tsx | 4 +-- src/script/components/organisms/nav/index.tsx | 4 +-- .../components/organisms/users/index.tsx | 4 +-- src/script/components/pages/about/index.tsx | 4 +-- src/script/components/pages/home/index.tsx | 4 +-- src/script/components/pages/index/index.tsx | 4 +-- .../components/pages/materialui/index.tsx | 4 +-- src/script/theme.tsx | 17 ++++------ 17 files changed, 74 insertions(+), 77 deletions(-) diff --git a/e2e/index.spec.ts b/e2e/index.spec.ts index 0ff4447..33b3bbf 100644 --- a/e2e/index.spec.ts +++ b/e2e/index.spec.ts @@ -3,7 +3,7 @@ import { customDiffDir, customSnapshotsDir, mkdir, timeout, url } from './setup' declare const browser: Browser; -describe('Index', () => { +describe.skip('Index', () => { beforeAll(async () => { mkdir(customSnapshotsDir); mkdir(customDiffDir); @@ -12,7 +12,7 @@ describe('Index', () => { Object.keys(devices).forEach((key) => { const device = devices[key]; - xtest( + test.skip( `${device.name}`, async () => { const page = await browser.newPage(); diff --git a/src/script/application.tsx b/src/script/application.tsx index d68bcf2..6bcec8e 100644 --- a/src/script/application.tsx +++ b/src/script/application.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, lazy, memo, StrictMode, Suspense } from 'react'; +import React, { StrictMode, Suspense, lazy, memo } from 'react'; import { BrowserRouter, Redirect, Route, Switch } from 'react-router-dom'; import { RecoilRoot } from 'recoil'; import { string as IsString } from 'prop-types'; @@ -15,11 +15,11 @@ const AboutPage = lazy(() => import('@pages/about')); const ThemeProvider = lazy(() => import('@app/theme')); -type Props = { +type Props = Readonly<{ basename: string; -}; +}>; -export const Application: FunctionComponent = ({ basename }) => { +export const Application = ({ basename }: Props) => { return ( }> diff --git a/src/script/components/atoms/navLink/index.tsx b/src/script/components/atoms/navLink/index.tsx index 52cfcad..852904b 100644 --- a/src/script/components/atoms/navLink/index.tsx +++ b/src/script/components/atoms/navLink/index.tsx @@ -1,41 +1,41 @@ -import React, { FunctionComponent, memo } from 'react'; import clsx from 'clsx'; -import { NavLink as ReactNavLink, NavLinkProps } from 'react-router-dom'; -import { string as IsString, element as IsElement, oneOfType as IsOneOfType } from 'prop-types'; +import React, { memo } from 'react'; +import { NavLink as ReactNavLink } from 'react-router-dom'; +import { element as IsElement, oneOfType as IsOneOfType, string as IsString } from 'prop-types'; -type Props = NavLinkProps & { +type Props = Readonly; + +const defaultProps = { /** - * Children + * CSS class * - * @type React.ReactNode + * @type string */ - children: string | React.ReactElement; + className: '', }; -export const NavLink: FunctionComponent = (props) => { +export const NavLink = ({ className, to, children }: Props) => { const classes = { 'w3-bar-item': true, 'w3-button': true, 'w3-mobile': true, 'w3-hover-theme': true, - } as Record; + } as Record; - if (props.className && props.className.length) { - classes[props.className] = true; + if (className && className.length) { + classes[className] = true; } return ( - - {props.children} + + {children} ); }; NavLink.displayName = 'NavLink'; -NavLink.defaultProps = { - children: <>NavLink, -}; +NavLink.defaultProps = defaultProps; NavLink.propTypes = { children: IsOneOfType([IsString, IsElement]).isRequired, diff --git a/src/script/components/atoms/themeSwitch/index.tsx b/src/script/components/atoms/themeSwitch/index.tsx index 1489bb8..50fd08f 100644 --- a/src/script/components/atoms/themeSwitch/index.tsx +++ b/src/script/components/atoms/themeSwitch/index.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, memo } from 'react'; +import React, { memo } from 'react'; import { useRecoilState } from 'recoil'; import { Switch } from '@material-ui/core'; @@ -10,7 +10,7 @@ import ThemeAtom, { Theme, storeTheme } from '@models/theme'; * * Switches between dark and light theme. */ -export const ThemeSwitch: FunctionComponent = () => { +export const ThemeSwitch = () => { const [theme, setThemeAtom] = useRecoilState(ThemeAtom); const setTheme = (theme: Theme) => { diff --git a/src/script/components/atoms/user/index.tsx b/src/script/components/atoms/user/index.tsx index 15e3f0b..938782e 100644 --- a/src/script/components/atoms/user/index.tsx +++ b/src/script/components/atoms/user/index.tsx @@ -1,14 +1,16 @@ -import React, { FunctionComponent, memo } from 'react'; +import React, { memo } from 'react'; -import { DefaultUser, User, UserPropTypes } from '@models/user'; +import { DefaultUser, UserPropTypes } from '@models/user'; -type Props = { +type Props = Readonly; + +const defaultProps = { /** * User * * @type User */ - user: User; + user: DefaultUser, }; /** @@ -18,7 +20,7 @@ type Props = { * * @param {User} user */ -export const UserView: FunctionComponent = ({ user }: Props) => { +export const UserView = ({ user }: Props) => { return (
First Name
@@ -33,9 +35,7 @@ export const UserView: FunctionComponent = ({ user }: Props) => { UserView.displayName = 'UserView'; -UserView.defaultProps = { - user: DefaultUser, -}; +UserView.defaultProps = defaultProps; UserView.propTypes = { user: UserPropTypes.isRequired, diff --git a/src/script/components/layout/index.tsx b/src/script/components/layout/index.tsx index 2968f46..55a5be3 100644 --- a/src/script/components/layout/index.tsx +++ b/src/script/components/layout/index.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, Suspense, memo } from 'react'; +import React, { Suspense, memo } from 'react'; import { element as IsElement, string as IsString, oneOfType as OneOfType } from 'prop-types'; import Loading from '@app/loading'; @@ -8,16 +8,16 @@ import Nav from '@organisms/nav'; import Main from '@organisms/main'; import Footer from '@organisms/footer'; -type Props = { +type Props = Readonly<{ /** * Children * * @type React.ReactNode */ children: React.ReactNode; -}; +}>; -export const Layout: FunctionComponent = ({ children }) => { +export const Layout = ({ children }: Props) => { return ( <>
diff --git a/src/script/components/molecules/users/index.tsx b/src/script/components/molecules/users/index.tsx index 53f098d..4359bb4 100644 --- a/src/script/components/molecules/users/index.tsx +++ b/src/script/components/molecules/users/index.tsx @@ -1,19 +1,21 @@ -import React, { FunctionComponent, memo } from 'react'; +import React, { memo } from 'react'; import { arrayOf as IsArrayOf } from 'prop-types'; -import { DefaultUser, User, UserPropTypes } from '@models/user'; +import { DefaultUser, UserPropTypes } from '@models/user'; import UserView from '@atoms/user'; -type Props = { +type Props = Readonly; + +const defaultProps = { /** * Users * * @type User[] */ - users: User[]; + users: [DefaultUser], }; -export const UsersView: FunctionComponent = ({ users }) => { +export const UsersView = ({ users }: Props) => { return ( <> {users.map((user, index) => ( @@ -25,9 +27,7 @@ export const UsersView: FunctionComponent = ({ users }) => { UsersView.displayName = 'UsersView'; -UsersView.defaultProps = { - users: [DefaultUser], -}; +UsersView.defaultProps = defaultProps; UsersView.propTypes = { users: IsArrayOf(UserPropTypes.isRequired).isRequired, diff --git a/src/script/components/organisms/footer/index.tsx b/src/script/components/organisms/footer/index.tsx index d93472e..ba354b7 100644 --- a/src/script/components/organisms/footer/index.tsx +++ b/src/script/components/organisms/footer/index.tsx @@ -1,19 +1,19 @@ -import React, { FunctionComponent, memo } from 'react'; +import React, { memo } from 'react'; import { number as IsNumber } from 'prop-types'; -type Props = { - year?: number; +type Props = Readonly; + +const defaultProps = { + year: new Date().getUTCFullYear(), }; -export const Footer: FunctionComponent = ({ year }) => { +export const Footer = ({ year }: Props) => { return
© {year} by Gregor Anders
; }; Footer.displayName = 'Footer'; -Footer.defaultProps = { - year: new Date().getUTCFullYear(), -}; +Footer.defaultProps = defaultProps; Footer.propTypes = { year: IsNumber.isRequired, diff --git a/src/script/components/organisms/header/index.tsx b/src/script/components/organisms/header/index.tsx index 87b2591..fd07bfc 100644 --- a/src/script/components/organisms/header/index.tsx +++ b/src/script/components/organisms/header/index.tsx @@ -1,7 +1,7 @@ -import React, { FunctionComponent, memo } from 'react'; +import React, { memo } from 'react'; import { Link } from 'react-router-dom'; -export const Header: FunctionComponent = () => { +export const Header = () => { return (

diff --git a/src/script/components/organisms/main/index.tsx b/src/script/components/organisms/main/index.tsx index ac18dd7..385d7ea 100644 --- a/src/script/components/organisms/main/index.tsx +++ b/src/script/components/organisms/main/index.tsx @@ -1,4 +1,4 @@ -import React, { FunctionComponent, memo } from 'react'; +import React, { memo } from 'react'; import { element as IsElement, oneOfType as IsOneOfType, string as IsString } from 'prop-types'; type Props = { @@ -10,7 +10,7 @@ type Props = { children: React.ReactNode; }; -export const Main: FunctionComponent = ({ children }) => { +export const Main = ({ children }: Props) => { return
{children}
; }; diff --git a/src/script/components/organisms/nav/index.tsx b/src/script/components/organisms/nav/index.tsx index 71f1119..3164c19 100644 --- a/src/script/components/organisms/nav/index.tsx +++ b/src/script/components/organisms/nav/index.tsx @@ -1,8 +1,8 @@ -import React, { FunctionComponent, memo } from 'react'; +import React, { memo } from 'react'; import NavLink from '@atoms/navLink'; -export const Nav: FunctionComponent = () => { +export const Nav = () => { return (