Merge pull request #699 from blazejkustra/ts/configure-typescript

[TS migration] Setup typescript in expensify-common & Migrate CONST, fastMerge, Device, Logger to Typescript

.eslintignore

@@ -1 +1,4 @@
 *.d.ts
+dist
+node_modules
+*.config.js

.eslintrc.js

@@ -1,11 +1,80 @@
 module.exports = {
     extends: ['expensify', 'prettier'],
-    rules: {
-        // Allow JSX to be written in any file ignoring the extension type
-        'react/jsx-filename-extension': 'off'
-    },
-    plugins: ['jest'],
-    env: {
-        "jest/globals": true
-    }
+    parser: '@typescript-eslint/parser',
+    overrides: [
+        {
+            files: ['*.js', '*.jsx'],
+            settings: {
+                'import/resolver': {
+                    node: {
+                        extensions: ['.js', '.jsx', '.ts', '.tsx'],
+                    },
+                },
+            },
+            rules: {
+                // Allow JSX to be written in any file ignoring the extension type
+                'react/jsx-filename-extension': 'off',
+                'rulesdir/no-api-in-views': 'off',
+                'rulesdir/no-multiple-api-calls': 'off',
+                'rulesdir/prefer-import-module-contents': 'off',
+                'no-constructor-return': 'off',
+                'import/extensions': [
+                    'error',
+                    'ignorePackages',
+                    {
+                        js: 'never',
+                        jsx: 'never',
+                        ts: 'never',
+                        tsx: 'never',
+                    },
+                ],
+            },
+        },
+        {
+            files: ['*.ts', '*.tsx'],
+            extends: [
+                'expensify',
+                'plugin:@typescript-eslint/recommended',
+                'plugin:@typescript-eslint/stylistic',
+                'plugin:import/typescript',
+                'plugin:you-dont-need-lodash-underscore/all',
+                'prettier',
+                'plugin:prettier/recommended',
+            ],
+            plugins: ['react', 'import', '@typescript-eslint'],
+            parserOptions: {
+                project: './tsconfig.json',
+            },
+            rules: {
+                'prefer-regex-literals': 'off',
+                'rulesdir/prefer-underscore-method': 'off',
+                'react/jsx-props-no-spreading': 'off',
+                'react/require-default-props': 'off',
+                'valid-jsdoc': 'off',
+                'es/no-optional-chaining': 'off',
+                'es/no-nullish-coalescing-operators': 'off',
+                'react/jsx-filename-extension': ['error', {extensions: ['.tsx', '.jsx']}],
+                'import/no-unresolved': 'error',
+                'import/consistent-type-specifier-style': ['error', 'prefer-top-level'],
+                'no-use-before-define': 'off',
+                '@typescript-eslint/no-use-before-define': 'off',
+                '@typescript-eslint/no-unused-vars': ['error', {argsIgnorePattern: '^_'}],
+                '@typescript-eslint/consistent-type-imports': ['error', {prefer: 'type-imports'}],
+                '@typescript-eslint/consistent-type-exports': ['error', {fixMixedExportsWithInlineTypeSpecifier: false}],
+                '@typescript-eslint/no-non-null-assertion': 'off',
+                '@typescript-eslint/array-type': ['error', {default: 'array-simple'}],
+                '@typescript-eslint/consistent-type-definitions': 'off',
+                'import/extensions': [
+                    'error',
+                    'ignorePackages',
+                    {
+                        js: 'never',
+                        jsx: 'never',
+                        ts: 'never',
+                        tsx: 'never',
+                    },
+                ],
+            },
+        },
+    ],
 };

.github/workflows/lint.yml

@@ -27,3 +27,12 @@ jobs:
             - run: npm run lint
               env:
                   CI: true
+
+            - name: Verify there's no Prettier diff
+              run: |
+                  npm run prettier -- --loglevel silent
+                  if ! git diff --name-only --exit-code; then
+                    # shellcheck disable=SC2016
+                    echo 'Error: Prettier diff detected! Please run `npm run prettier` and commit the changes.'
+                    exit 1
+                  fi

.github/workflows/publish.yml

@@ -0,0 +1,77 @@
+name: Publish package to npmjs
+
+# This workflow runs when code is pushed to `main` (i.e: when a pull request is merged)
+on:
+    push:
+        branches: [main]
+
+# Ensure that only once instance of this workflow executes at a time.
+# If multiple PRs are merged in quick succession, there will only ever be one publish workflow running and one pending.
+concurrency: ${{ github.workflow }}
+
+jobs:
+    version:
+        runs-on: ubuntu-latest
+
+        # OSBotify will update the version on `main`, so this check is important to prevent an infinite loop
+        if: ${{ github.actor != 'OSBotify' }}
+
+        steps:
+            - uses: actions/checkout@v4
+              with:
+                  ref: main
+                  # The OS_BOTIFY_COMMIT_TOKEN is a personal access token tied to osbotify, which allows him to push to protected branches
+                  token: ${{ secrets.OS_BOTIFY_COMMIT_TOKEN }}
+
+            - name: Decrypt & Import OSBotify GPG key
+              run: |
+                  cd .github
+                  gpg --quiet --batch --yes --decrypt --passphrase="$LARGE_SECRET_PASSPHRASE" --output OSBotify-private-key.asc OSBotify-private-key.asc.gpg
+                  gpg --import OSBotify-private-key.asc
+              env:
+                  LARGE_SECRET_PASSPHRASE: ${{ secrets.LARGE_SECRET_PASSPHRASE }}
+
+            - name: Set up git for OSBotify
+              run: |
+                  git config --global user.signingkey 367811D53E34168C
+                  git config --global commit.gpgsign true
+                  git config --global user.name OSBotify
+                  git config --global user.email [email protected]
+
+            - uses: actions/setup-node@v4
+              with:
+                  node-version-file: '.nvmrc'
+                  registry-url: 'https://registry.npmjs.org'
+
+            - name: Install npm packages
+              run: npm ci
+
+            - name: Update npm version
+              run: npm version patch
+
+            - name: Set new version in GitHub ENV
+              run: echo "NEW_VERSION=$(jq '.version' package.json)" >> $GITHUB_ENV
+
+            - name: Push branch and publish tags
+              run: git push origin main && git push --tags
+
+            - name: Build package
+              run: npm run build
+
+            - name: Publish to npm
+              run: npm publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+            - name: Get merged pull request
+              id: getMergedPullRequest
+              run: |
+                  read -r number < <(gh pr list --search ${{ github.sha }} --state merged --json 'number' | jq -r '.[0] | [.number] | join(" ")')
+                  echo "number=$number" >> "$GITHUB_OUTPUT"
+              env:
+                  GITHUB_TOKEN: ${{ github.token }}
+
+            - name: Comment on merged pull request
+              run: gh pr comment ${{ steps.getMergedPullRequest.outputs.number }} --body "🚀Published to npm in v${{ env.NEW_VERSION }}"
+              env:
+                  GITHUB_TOKEN: ${{ github.token }}

.github/workflows/typecheck.yml

@@ -0,0 +1,24 @@
+name: TypeScript Checks
+
+on:
+    pull_request:
+        types: [opened, synchronize]
+
+jobs:
+    lint:
+        runs-on: ubuntu-latest
+        steps:
+            - uses: actions/checkout@v4
+
+            - name: Setup Node
+              uses: actions/setup-node@v4
+              with:
+                  cache: npm
+                  cache-dependency-path: package-lock.json
+
+            - run: npm ci
+
+            - name: Type check with TypeScript
+              run: npm run typecheck
+              env:
+                  CI: true

.gitignore

@@ -5,3 +5,10 @@ npm-debug.log
 package.json-e
 .DS_Store
 *.swp
+dist
+
+# Decrypted private key we do not want to commit
+.github/OSBotify-private-key.asc
+
+# Published package
+*.tgz

.nvmrc

@@ -0,0 +1 @@
+20.13.0

.prettierignore

@@ -0,0 +1,4 @@
+dist
+package.json
+package-lock.json
+*.html

README.md

@@ -1,14 +1,16 @@
 # `expensify-common`
-This is a collection of JS libraries and components which are used across various Expensify projects. These libraries are provided as-is, and the repos which use them will need to do their own bundling, minifying, and uglifying.
+This is a collection of JS/TS libraries and components which are used across various Expensify projects. These libraries are provided as-is, and the repos which use them will need to do their own bundling, minifying, and uglifying.
 
 # Installation
-1. Clone this repo to a directory of your choosing
-2. Run `npm install` to install all the dependencies
+`expensify-common` is published to [`npm`](https://www.npmjs.com/package/expensify-common)
+
+```shell
+npm install expensify-common
+```
 
 # Development
 * Write all code as ES6.
-* Always lint your code with `npm run grunt watch`
-* Make sure you're using http://editorconfig.org/
+* Always lint your code with `npm run lint`
 
 ## Testing your code while you are developing
 The best way to test your code while you are developing changes is via `npm link`.
@@ -28,7 +30,7 @@ Alternatively, you can edit files directly in a project's `node_modules` then ap
 1. They will review and accept your changes, merge them, then deploy a new version
 
 # Deploying a Change (Expensify Only)
-Once the PR has been merged, update the `package.json` commit hash in any repos with a dependency on the code being changed in expensify-common, don't forget to run a `npm install` so `package-lock.json` is also updated. Be sure to check the repos below to confirm whether or not they are affected by your changes!
+Once the PR has been merged, install the new version of the package with `npm install [email protected]` command. Be sure to check the repos below to confirm whether or not they are affected by your changes!
 - Expensify/Web-Expensify
 - Expensify/Web-Secure
 - Expensify/Mobile-Expensify

babel.config.js

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

lib/API.jsx

@@ -150,6 +150,7 @@ export default function API(network, args) {
      * @param {String} commandName The name of the API command
      */
     function requireParameters(parameterNames, parameters, commandName) {
+        // eslint-disable-next-line rulesdir/prefer-early-return
         parameterNames.forEach((parameterName) => {
             if (!_(parameters).has(parameterName) || parameters[parameterName] === null || parameters[parameterName] === undefined) {
                 const parametersCopy = _.clone(parameters);
@@ -823,7 +824,7 @@ export default function API(network, args) {
              *
              * @returns {APIDeferred}
              */
-            createAdminIssuedVirtualCard: function (parameters) {
+            createAdminIssuedVirtualCard(parameters) {
                 const commandName = 'Card_CreateAdminIssuedVirtualCard';
                 requireParameters(['cardTitle', 'assigneeEmail', 'cardLimit', 'cardLimitType', 'domainName'], parameters, commandName);
                 return performPOSTRequest(commandName, parameters);
@@ -842,7 +843,7 @@ export default function API(network, args) {
              *
              * @returns {APIDeferred}
              */
-            editAdminIssuedVirtualCard: function (parameters) {
+            editAdminIssuedVirtualCard(parameters) {
                 const commandName = 'Card_EditAdminIssuedVirtualCard';
                 requireParameters(['domainName', 'cardID', 'cardTitle', 'assigneeEmail', 'cardLimit', 'cardLimitType'], parameters, commandName);
                 return performPOSTRequest(commandName, parameters);