migrate vite app to webpack-based CRA app and add types for scss modules

Author: marianapatcosta

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "arrowParens": "avoid",
+  "singleQuote": true,
+  "printWidth": 100
+}

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

README.md

@@ -0,0 +1,39 @@
+# JS Slot Machine
+
+JS Slot Machine is a Progressive web app with a regular slot machine game that has the logos of main JS-related tools as symbols.
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn install`
+
+Installs all the dependencies required to run and develop this application.
+
+### `yarn dev`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+### `yarn build`
+
+Build a production-ready application.
+
+### `yarn lint`
+
+Run linter command.
+
+### `yarn gen-scss-types`
+
+Runs typed-scss-modules and generates types for scss modules, keeping the namespace using BEM css methodology
+
+### `yarn gen-scss-types`
+
+Runs typed-scss-modules and generates types for scss modules, keeping the namespace using BEM css methodology
+
+### `yarn test:unit`
+
+Launches the unit test runner in the interactive watch mode.
+### `yarn test:unit-coverage`
+
+Launches the unit test runner in the interactive watch mode and shows tets coverage report.

craco.config.js

@@ -0,0 +1,39 @@
+const path = require(`path`);
+
+module.exports = {
+  webpack: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+  },
+  style: {
+    sass: {
+      loaderOptions: {
+        additionalData: `
+          @import "@/assets/styles/_index.scss";
+        `,
+      },
+    },
+  },
+  jest: {
+    preset: 'ts-jest',
+    collectCoverageFrom: ['src/**/*.ts', 'src/**/*.tsx', '!src/index.tsx'],
+    coverageReporters: ['text'],
+    moduleNameMapper: {
+      '^@/(.+)': '<rootDir>/src/$1',
+      '\\.(css|scss)$': '<rootDir>/__mocks__/style-mock.ts',
+      '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+        '<rootDir>/__mocks__/file-mock.ts',
+      i18next: '<rootDir>/__mocks__/i18next-mock.ts',
+      'react-i18next': '<rootDir>/__mocks__/react-i18next-mock.ts',
+      nanoid: '<rootDir>/__mocks__/nanoid-mock.ts',
+    },
+    transform: {
+      '^.+\\.ts?$': 'ts-jest',
+    },
+    configure: {
+      roots: ['<rootDir>/src'],
+      testMatch: ['<rootDir>/spec/**/*.{spec,test}.{js,jsx,ts,tsx}'],
+    },
+  }
+};

package.json

@@ -1,20 +1,20 @@
 {
-  "name": "js-slots-webpack",
+  "name": "js-slot-machine",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
-    "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^13.3.0",
-    "@testing-library/user-event": "^13.5.0",
-    "@types/jest": "^27.5.2",
-    "@types/node": "^17.0.40",
-    "@types/react": "^18.0.12",
-    "@types/react-dom": "^18.0.5",
+    "craco": "^0.0.3",
+    "gsap": "^3.10.4",
+    "i18next": "^21.8.8",
+    "nanoid": "^3.3.4",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-i18next": "^11.17.0",
+    "react-redux": "^8.0.2",
     "react-scripts": "5.0.1",
+    "react-transition-group": "^4.4.2",
+    "redux": "^4.2.0",
     "typescript": "^4.7.3",
-    "web-vitals": "^2.1.4",
     "workbox-background-sync": "^6.5.3",
     "workbox-broadcast-update": "^6.5.3",
     "workbox-cacheable-response": "^6.5.3",
@@ -29,9 +29,12 @@
     "workbox-streams": "^6.5.3"
   },
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
+    "start": "craco start",
+    "build": "craco build",
+    "lint": "eslint --max-warnings=0 src",
+    "test:unit": "craco test",
+    "test:unit-coverage": "yarn test:unit -- --env=jsdom --coverage",
+    "gen-scss-types": "typed-scss-modules src --additionalData \"@import './assets/styles/_index.scss';\" --nameFormat none --exportType default",
     "eject": "react-scripts eject"
   },
   "eslintConfig": {
@@ -51,5 +54,32 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^17.0.40",
+    "@types/react": "^18.0.12",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-transition-group": "^4.4.4",
+    "sass": "^1.52.2",
+    "ts-jest": "^28.0.4",
+    "typed-scss-modules": "^6.5.0"
+  },
+  "cracoConfig": "craco.config.js",
+  "jest": {
+    "collectCoverageFrom": [
+      "src/**/*.ts",
+      "src/**/*.tsx",
+      "!src/index.tsx"
+    ],
+    "coverageReporters": [
+      "text"
+    ],
+    "moduleNameMapper": {
+      "^@/(.+)": "<rootDir>/src/$1"
+    }
   }
 }