Dependencies upgrade and module template sync (#601)

* initial use of npx @metamask/template-sync but removing and adding some missing configurations

* rmeoving publish-docs workflow and references

* auto lint fixes by running lint:fix

* more lint fixes and ignores

* running lint:fix adding fixes to changelog and package.json

* adding incorrectly labelled missing dependencies and unused dependcies to depcheckrc

* updating build-deploy-storybook and yarn.lock file

* adding doc to tsconfig.json

* reverting test coverage so it ignores index files and colors.ts

* removing instance of unused typedoc from depcheckrc

* fixing incorrect storybook build command

* adjusting pr template to align with extension and mobile

* updating build-deploy-storybook workflow as per suggestions

* updating main.yml as per suggestion

* integrating build-deploy-storybook into the main workflow and removing get-release-version as it's not needed as per suggestion

* fixing instance of PUBLISH_DOCS_TOKEN with storybook token

.depcheckrc.json

@@ -0,0 +1,21 @@
+{
+  "ignores": [
+    "@lavamoat/allow-scripts",
+    "@lavamoat/preinstall-always-fail",
+    "@metamask/auto-changelog",
+    "@types/*",
+    "prettier-plugin-packagejson",
+    "ts-node",
+    "@storybook/addon-actions",
+    "@storybook/react-webpack5",
+    "babel-loader",
+    "dependency-tree",
+    "eslint-plugin-node",
+    "sass",
+    "webpack",
+    "@yarnpkg/core",
+    "@yarnpkg/cli",
+    "clipanion",
+    "@yarnpkg/fslib"
+  ]
+}

.eslintrc.js

@@ -1,27 +1,37 @@
 module.exports = {
   root: true,
+
   extends: ['@metamask/eslint-config', 'plugin:storybook/recommended'],
+
   overrides: [
     {
       files: ['*.ts'],
       extends: ['@metamask/eslint-config-typescript'],
     },
+
     {
       files: ['*.js'],
       parserOptions: {
         sourceType: 'script',
       },
       extends: ['@metamask/eslint-config-nodejs'],
     },
+
     {
       files: ['*.test.ts', '*.test.js'],
-      extends: ['@metamask/eslint-config-jest'],
+      extends: [
+        '@metamask/eslint-config-jest',
+        '@metamask/eslint-config-nodejs',
+      ],
     },
   ],
+
   ignorePatterns: [
     '!.eslintrc.js',
     '!.prettierrc.js',
     'dist/',
     'storybook-static/',
+    '.yarn/',
+    'docs/utils/getCSSVariablesFromStylesheet.ts',
   ],
 };

.gitattributes

@@ -1,3 +1,8 @@
 * text=auto
 
 yarn.lock linguist-generated=false
+
+# yarn v3
+# See: https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored
+/.yarn/releases/** binary
+/.yarn/plugins/** binary

.github/CODEOWNERS

@@ -1,4 +1,4 @@
 # Lines starting with '#' are comments.
 # Each line is a file pattern followed by one or more owners.
 
-*                                    @MetaMask/devs
+*                                    @MetaMask/engineering

.github/dependabot.yml

@@ -1,5 +1,5 @@
 # Please see the documentation for all configuration options:
-# https://help.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
 
 version: 2
 updates:

.github/pull_request_template.md

@@ -0,0 +1,48 @@
+## **Description**
+
+<!--
+Write a short description of the changes included in this pull request, also include relevant motivation and context. Have in mind the following questions:
+1. What is the reason for the change?
+2. What is the improvement/solution?
+-->
+
+## **Related issues**
+
+Fixes:
+
+## **Manual testing steps**
+
+1. Go to this page...
+2.
+3.
+
+## **Screenshots/Recordings**
+
+<!-- If applicable, add screenshots and/or recordings to visualize the before and after of your change. -->
+
+### **Before**
+
+<!-- [screenshots/recordings] -->
+
+### **After**
+
+<!-- [screenshots/recordings] -->
+
+## **Pre-merge author checklist**
+
+- [ ] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
+- [ ] I've clearly explained what problem this PR is solving and how it is solved.
+- [ ] I've linked related issues
+- [ ] I've included manual testing steps
+- [ ] I've included screenshots/recordings if applicable
+- [ ] I’ve included tests if applicable
+- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format if applicable
+- [ ] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). Not required for external contributors.
+- [ ] I’ve properly set the pull request status:
+  - [ ] In case it's not yet "ready for review", I've set it to "draft".
+  - [ ] In case it's "ready for review", I've changed it from "draft" to "non-draft".
+
+## **Pre-merge reviewer checklist**
+
+- [ ] I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
+- [ ] I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

.github/workflows/build-deploy-storybook.yml

@@ -1,31 +1,34 @@
 name: Build and Deploy Storybook
 
 on:
-  push:
-    branches:
-      - main
+  workflow_call:
+    secrets:
+      PUBLISH_STORYBOOK_TOKEN:
+        required: true
 
 jobs:
   build-deploy-storybook:
     permissions:
       contents: write
     runs-on: ubuntu-latest
+    environment: github-pages
     steps:
-      - uses: actions/checkout@v2
+      - name: Checkout the repository
+        uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
         with:
-          # We check out the pull request's base branch, which will be
-          # used as the base branch for all git operations.
-          ref: ${{ github.event.pull_request.base.ref }}
-      - name: Get Node.js version
-        id: nvm
-        run: echo ::set-output name=NODE_VERSION::$(cat .nvmrc)
-      - uses: actions/setup-node@v2
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - name: Install npm dependencies
+        run: yarn --immutable
+      - name: Run build script
+        run: yarn build-storybook
+      - name: Deploy to `storybook-static` directory of `gh-pages` branch
+        uses: peaceiris/actions-gh-pages@de7ea6f8efb354206b205ef54722213d99067935
         with:
-          node-version: ${{ steps.nvm.outputs.NODE_VERSION }}
-      - run: yarn
-      - uses: MetaMask/action-publish-gh-pages@v2
-        with:
-          build-command: build-storybook
-          source-directory: storybook-static
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          # This PUBLISH_STORYBOOK_TOKEN needs to be manually set per-repository.
+          # Look in the repository settings under "Environments", and set this token in the github-pages environment.
+          personal_token: ${{ secrets.PUBLISH_STORYBOOK_TOKEN }}
+          publish_dir: ./storybook-static
+          destination_dir: storybook-static

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

@@ -0,0 +1,119 @@
+name: Build, Lint, and Test
+
+on:
+  workflow_call:
+
+jobs:
+  prepare:
+    name: Prepare
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - name: Install Yarn dependencies
+        run: yarn --immutable
+
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+    needs:
+      - prepare
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn --immutable --immutable-cache
+      - run: yarn build
+      - name: Require clean working directory
+        shell: bash
+        run: |
+          if ! git diff --exit-code; then
+            echo "Working tree dirty at end of job"
+            exit 1
+          fi
+
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+    needs:
+      - prepare
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'yarn'
+      - run: yarn --immutable --immutable-cache
+      - run: yarn lint
+      - name: Validate RC changelog
+        if: ${{ startsWith(github.head_ref, 'release/') }}
+        run: yarn lint:changelog --rc
+      - name: Validate changelog
+        if: ${{ !startsWith(github.head_ref, 'release/') }}
+        run: yarn lint:changelog
+      - name: Require clean working directory
+        shell: bash
+        run: |
+          if ! git diff --exit-code; then
+            echo "Working tree dirty at end of job"
+            exit 1
+          fi
+
+  test:
+    name: Test
+    runs-on: ubuntu-latest
+    needs:
+      - prepare
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - run: yarn --immutable --immutable-cache
+      - run: yarn test
+      - name: Require clean working directory
+        shell: bash
+        run: |
+          if ! git diff --exit-code; then
+            echo "Working tree dirty at end of job"
+            exit 1
+          fi
+
+  compatibility-test:
+    name: Compatibility test
+    runs-on: ubuntu-latest
+    needs:
+      - prepare
+    strategy:
+      matrix:
+        node-version: [18.x, 20.x]
+    steps:
+      - uses: actions/checkout@v3
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - run: rm yarn.lock && YARN_ENABLE_IMMUTABLE_INSTALLS=false yarn
+      - run: yarn test
+      - name: Require clean working directory
+        shell: bash
+        run: |
+          git restore yarn.lock
+          if ! git diff --exit-code; then
+            echo "Working tree dirty at end of job"
+            exit 1
+          fi