Nick/refactoring and updates

README.md

@@ -238,3 +238,7 @@
 ### Bombs counter
 
 [Pull request](https://github.com/nickovchinnikov/minesweeper/pull/35/files)
+
+#### Refactoring and update dependencies
+
+[Pull request](https://github.com/nickovchinnikov/minesweeper/pull/40)

babel.config.js

@@ -1,6 +1,13 @@
 module.exports = {
   presets: [
-    '@babel/preset-env',
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+      },
+    ],
     '@babel/preset-typescript',
     '@babel/preset-react',
   ],

package.json

@@ -34,51 +34,52 @@
   },
   "homepage": "https://github.com/nickovchinnikov/minesweeper#readme",
   "devDependencies": {
-    "@babel/core": "^7.15.0",
-    "@babel/preset-env": "^7.15.0",
+    "@babel/core": "^7.15.5",
+    "@babel/preset-env": "^7.15.6",
     "@babel/preset-react": "^7.14.5",
     "@babel/preset-typescript": "^7.15.0",
     "@emotion/jest": "^11.3.0",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/builder-webpack5": "^6.3.6",
-    "@storybook/manager-webpack5": "^6.3.6",
-    "@storybook/react": "^6.3.6",
-    "@stryker-mutator/core": "^5.2.3",
-    "@stryker-mutator/jest-runner": "^5.2.3",
+    "@storybook/addon-actions": "^6.3.8",
+    "@storybook/addon-essentials": "^6.3.8",
+    "@storybook/addon-links": "^6.3.8",
+    "@storybook/builder-webpack5": "^6.3.8",
+    "@storybook/manager-webpack5": "^6.3.8",
+    "@storybook/react": "^6.3.8",
+    "@stryker-mutator/core": "^5.4.0",
+    "@stryker-mutator/jest-runner": "^5.4.0",
     "@testing-library/jest-dom": "^5.14.1",
-    "@testing-library/react": "^12.0.0",
-    "@testing-library/react-hooks": "^7.0.1",
+    "@testing-library/react": "^12.1.0",
+    "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^13.2.1",
-    "@types/jest": "^26.0.24",
-    "@types/react": "^17.0.15",
+    "@types/jest": "^27.0.2",
+    "@types/react": "^17.0.24",
     "@types/react-dom": "^17.0.9",
-    "@typescript-eslint/eslint-plugin": "^4.29.0",
-    "@typescript-eslint/parser": "^4.29.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.2",
+    "@typescript-eslint/parser": "^4.31.2",
     "babel-loader": "^8.2.2",
-    "chromatic": "^5.9.2",
-    "css-loader": "^6.2.0",
+    "chromatic": "^5.10.1",
+    "css-loader": "^6.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.26.0",
     "eslint-plugin-react-hooks": "^4.2.0",
     "html-webpack-plugin": "^5.3.2",
-    "husky": "^7.0.1",
-    "jest": "^27.0.6",
-    "prettier": "^2.3.2",
+    "husky": "^7.0.2",
+    "jest": "^27.2.1",
+    "prettier": "^2.4.1",
     "stryker": "^0.35.1",
     "stryker-cli": "^1.0.2",
-    "style-loader": "^3.2.1",
-    "typescript": "^4.3.5",
+    "style-loader": "^3.3.0",
+    "typescript": "^4.4.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.48.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^3.11.2"
+    "webpack": "^5.53.0",
+    "webpack-bundle-analyzer": "^4.4.2",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.2.1"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.0",
+    "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

src/components/Game/Game.stories.tsx

@@ -1,35 +1,26 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
 
-import { CellState, Field } from '@/helpers/Field';
+import { Field } from '@/helpers/Field';
+import { fieldGenerator } from '@/helpers/__mocks__/Field';
 
 import { Grid } from '@/components/Grid';
 import { Top } from '@/components/Top';
 import { Scoreboard } from '@/components/Scoreboard';
 
 import { GameArea } from './GameArea';
-import { Wrapper, WrapperProps } from './Wrapper';
+import { Wrapper } from './Wrapper';
 import { GameOver } from './GameOver';
 
 export default {
   title: 'Game/Example',
   component: Wrapper,
 } as Meta;
 
-const Template: Story<WrapperProps> = (args) => <Wrapper {...args} />;
+const Template: Story = (args) => <Wrapper {...args} />;
 
 export const GameExample = Template.bind({});
 
-const { empty: e, hidden: h, bomb: b, flag: f } = CellState;
-
-const defautGameField: Field = [
-  [f, f, h, h, h],
-  [b, 3, 1, e, e],
-  [1, 1, h, 1, 1],
-  [1, e, e, 1, b],
-  [2, 1, e, 1, e],
-];
-
 GameExample.args = {
   children: (
     <>
@@ -46,7 +37,7 @@ GameExample.args = {
         />
         <GameOver onClick={() => null} isWin={true} />
         <Grid onClick={() => null} onContextMenu={() => null}>
-          {defautGameField}
+          {fieldGenerator(9) as Field}
         </Grid>
       </GameArea>
     </>

src/components/Game/GameArea.tsx

@@ -1,16 +1,7 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC } from 'react';
 import styled from '@emotion/styled';
 
-export interface GameAreaProps {
-  /**
-   * Game items
-   */
-  children: ReactNode;
-}
-
-export const GameArea: FC<GameAreaProps> = ({ children }) => (
-  <Frame>{children}</Frame>
-);
+export const GameArea: FC = ({ children }) => <Frame>{children}</Frame>;
 
 const Frame = styled.div`
   display: flex;

src/components/Game/Wrapper.tsx

@@ -1,16 +1,7 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC } from 'react';
 import styled from '@emotion/styled';
 
-export interface WrapperProps {
-  /**
-   * Game items
-   */
-  children: ReactNode;
-}
-
-export const Wrapper: FC<WrapperProps> = ({ children }) => (
-  <Frame>{children}</Frame>
-);
+export const Wrapper: FC = ({ children }) => <Frame>{children}</Frame>;
 
 const Frame = styled.div`
   position: relative;

src/components/Grid/Cell.test.tsx

@@ -9,7 +9,7 @@ describe('Cell component check', () => {
   const coords: Coords = [1, 1];
 
   for (let cell = CellState.empty; cell <= CellState.weakFlag; cell++) {
-    it('Cell renders correctly', () => {
+    it('Cell renders correct', () => {
       const props = {
         coords,
         onClick: jest.fn(),
@@ -20,7 +20,7 @@ describe('Cell component check', () => {
 
       expect(asFragment()).toMatchSnapshot();
     });
-    it('Closed Frame renders correctly', () => {
+    it('Closed Frame renders correct', () => {
       const { asFragment } = render(<ClosedFrame mouseDown={true} />);
       expect(asFragment()).toMatchSnapshot();
     });