Migrate to Vite, Vitest, Add Linter (SkalskiP#262)

* Migrate to Vite, Vitest, Add Linter * Update Testing * Fix Coverage * Update Actions Version * Fix Coverage Test Failed * fix npm lockfile error * Fix StyledTextField * Reconfigure Testing and Coverage * Fix Test and Coverage * Change TextField to Standard * Update Linter to allow object initializer * fix some UI bug * Fix Json Grayed Out * Fix Styled Component * Revert initializer Co-authored-by: telkomdev-rasyid <[email protected]>
PowZone · Jul 23, 2022 · 49bc1cf · 49bc1cf
1 parent d6e03cb
commit 49bc1cf
Show file tree

Hide file tree

Showing 58 changed files with 14,040 additions and 16,468 deletions.
diff --git a/.eslintrc.yml b/.eslintrc.yml
@@ -0,0 +1,32 @@
+extends:
+ - eslint:recommended
+ - plugin:@typescript-eslint/recommended
+ - plugin:react/recommended
+parser: "@typescript-eslint/parser"
+plugins:
+ - "@typescript-eslint"
+rules:
+ "@typescript-eslint/no-inferrable-types": off
+ no-shadow: off
+ "@typescript-eslint/no-shadow":
+ - error
+ no-use-before-define: off
+ "@typescript-eslint/no-use-before-define":
+ - error
+ react/jsx-filename-extension:
+ - warn
+ - extensions:
+ - .tsx
+ complexity:
+ - error
+ - 15
+ no-await-in-loop: warn
+ no-eval: error
+ no-implied-eval: error
+ prefer-promise-reject-errors: warn
+env:
+ browser: true
+settings:
+ react:
+ pragma: React
+ version: detect
diff --git a/.github/workflows/coverage.yml b/.github/workflows/coverage.yml
@@ -9,27 +9,28 @@ jobs:
 
  strategy:
  matrix:
- node-version: [10.x, 12.x, 14.x]
+ node-version: [14, 16]
 
  steps:
  - name: Checkout repository
- uses: actions/checkout@v2
- with:
- fetch-depth: 2
+ uses: actions/checkout@v3
 
  - name: Set up Node.js ${{ matrix.node-version }}
- uses: actions/setup-node@v1
+ uses: actions/setup-node@v3
  with:
  node-version: ${{ matrix.node-version }}
 
+ - name: Update NPM
+ run: npm i -g npm
+
  - name: Install dependencies
  run: npm install
 
  - name: Run the tests
- run: npm test -- --coverage
+ run: npm run test:coverage
 
  - name: Upload coverage to Codecov
- if: ${{ matrix.node-version == '10.x'}}
+ if: ${{ matrix.node-version == '14'}}
  uses: codecov/codecov-action@v1
  with:
  token: ${{ secrets.CODECOV_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -5,7 +5,8 @@
 # CREATE REACT APP
 
 # dependencies
-/node_modules
+/node_modules/
+/dist/
 /.pnp
 .pnp.js
 

diff --git a/.travis.yml b/.travis.yml
@@ -1,10 +1,9 @@
 language: node_js
 node_js:
- - "11"
+ - "14"
 cache:
  directories:
  - node_modules
 script:
- - npm test
  - npm run test:coverage
  - npm run build
diff --git a/public/index.html → index.html b/public/index.html → index.html
@@ -17,41 +17,30 @@
  })(window,document,'script','dataLayer','GTM-5N6WR7G');</script>
 
  <meta charset="utf-8" />
- <link rel="shortcut icon" href="%PUBLIC_URL%/make-sense-ico.png" />
+
+ <link rel="shortcut icon" href="/make-sense-ico.png" />
  <link href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1" />
- <meta name="theme-color" content="#000000" />
+
+ <meta name="theme-color" content="#171717" />
  <!--
  manifest.json provides metadata used when your web app is installed on a
  user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
  -->
- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
- <!--
- Notice the use of %PUBLIC_URL% in the tags above.
- It will be replaced with the URL of the `public` folder during the build.
- Only files inside the `public` folder can be referenced from the HTML.
-
- Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
- work correctly both with client-side routing and a non-root public URL.
- Learn how to configure a non-root public URL by running `npm run build`.
- -->
+ <link rel="manifest" href="/manifest.json" />
  <title>Make Sense</title>
  </head>
  <body>
+ <style>
+ body {
+ background-color: #171717;
+ }
+ </style>
  <noscript>You need to enable JavaScript to run this app.</noscript>
  <noscript>
  <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-5N6WR7G" height="0" width="0" style="display:none;visibility:hidden"></iframe>
  </noscript>
  <div id="root"></div>
- <!--
- This HTML file is a template.
- If you open it directly in the browser, you will see an empty page.
-
- You can add webfonts, meta tags, or analytics to this file.
- The build step will place the bundled scripts into the <body> tag.
-
- To begin the development, run `npm start` or `yarn start`.
- To create a production bundle, use `npm run build` or `yarn build`.
- -->
+ <script type="module" src="/src/index.tsx"></script>
  </body>
 </html>
diff --git a/jest.config.ts b/jest.config.ts
@@ -0,0 +1,36 @@
+import type { Config } from '@jest/types';
+
+// Sync object
+const config: Config.InitialOptions = {
+ rootDir: process.cwd(),
+ moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+ transformIgnorePatterns: [],
+ testEnvironment: 'jsdom',
+ roots: ["<rootDir>/src"],
+ setupFilesAfterEnv: ["<rootDir>/src/configureTest.ts"],
+ transform: {
+ "^.+(t|j)sx?$": [
+ "@swc/jest",
+ {
+ jsc: {
+ transform: {
+ react: {
+ runtime: 'automatic',
+ },
+ },
+ },
+ },
+ ],
+ },
+ "moduleNameMapper": {
+ "\\.(css|scss|less)$": "identity-obj-proxy"
+ },
+ extensionsToTreatAsEsm: [".ts", ".tsx"],
+ collectCoverageFrom: [
+ "**/*.{ts,tsx}",
+ "!**/node_modules/**",
+ "!**/dist/**",
+ "!**/coverage/**",
+ ],
+};
+export default config;