refactor: migrate webpack configuration to ESM format and enhance build process (#27)

* refactor: migrate webpack configuration to ESM format and enhance build process

- Updated webpack.config.js to use modern ESM syntax and added new plugins for optimization.
- Configured caching, improved source maps, and added support for top-level await.
- Enhanced devServer settings for better development experience.
- Switched from babel-loader to swc-loader for TypeScript compilation.
- Introduced CssMinimizerPlugin for CSS optimization and CompressionPlugin for gzip compression.
- Added dotenv-webpack for environment variable management.
- Created a new .env file for environment variables.

* chore: migrate to pnpm for package management and update workflows

* chore: migrate ESLint configuration from .eslintrc.js to .eslintrc.json

* Refactor tests to remove concurrent execution and update option count in FormField tests; make icons optional in WizardHeaderProps; update Vitest configuration for coverage reporting.

* fix: update timestamp in coverage report footer

* fix: disable watch mode and threads in Vitest configuration

Author: prabhuignoto

.env

@@ -0,0 +1,2 @@
+# Environment variables for react-wizardry
+NODE_ENV=development

.eslintrc.js

@@ -0,0 +1,38 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true
+  },
+  "extends": [
+    "plugin:react/recommended",
+    "standard",
+    "prettier",
+    "plugin:react/jsx-runtime"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": 12,
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "sort-keys-fix"],
+  "rules": {
+    "react/jsx-sort-props": 1,
+    "sort-keys": [
+      "error",
+      "asc",
+      {
+        "caseSensitive": true,
+        "natural": true
+      }
+    ],
+    "sort-keys-fix/sort-keys-fix": "warn"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.eslintrc.json

@@ -5,25 +5,63 @@ on:
     branches: [ master ]
   pull_request:
     branches: [ master ]
+  # Run workflow manually from the Actions tab
+  workflow_dispatch:
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x, 20.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
 
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
 
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
+      run: |
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v3
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install
+
+    - name: Lint
+      run: pnpm run lint
+      
+    - name: Test
+      run: pnpm run test
+      
     - name: Build
-    - run: npm install
-    - run: npm run lint
-    - run: npm run test
+      run: pnpm run build
+      
+    - name: Upload coverage reports to Codecov
+      uses: codecov/codecov-action@v4
+      with:
+        file: ./coverage/coverage-final.json
+        token: ${{ secrets.CODECOV_TOKEN }}
+        slug: prabhuignoto/react-wizardry
+        fail_ci_if_error: false
 

.github/workflows/test-and-lint.yml

@@ -5,24 +5,55 @@ on:
     branches: [ master ]
   pull_request:
     branches: [ master ]
+  # Run workflow manually from the Actions tab
+  workflow_dispatch:
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x, 20.x]
 
     steps:
-    - uses: actions/checkout@v3
+    - uses: actions/checkout@v4
+      with:
+        fetch-depth: 0
 
     - name: Use Node.js ${{ matrix.node-version }}
-      uses: actions/setup-node@v3
+      uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
 
-    - name: Build
+    - name: Install pnpm
+      uses: pnpm/action-setup@v2
+      with:
+        version: 8
+        run_install: false
+
+    - name: Get pnpm store directory
+      shell: bash
       run: |
-        npm install
-        npm run build:prod
+        echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+    - name: Setup pnpm cache
+      uses: actions/cache@v3
+      with:
+        path: ${{ env.STORE_PATH }}
+        key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+        restore-keys: |
+          ${{ runner.os }}-pnpm-store-
+
+    - name: Install dependencies
+      run: pnpm install
+
+    - name: Build with Webpack
+      run: pnpm run build:prod
+      
+    - name: Upload build artifacts
+      uses: actions/upload-artifact@v4
+      with:
+        name: webpack-build-${{ matrix.node-version }}
+        path: dist/
+        retention-days: 7

.github/workflows/webpack.yml

@@ -0,0 +1,4 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
+auto-install-peers=true
+node-linker=hoisted