Merge pull request #113 from umccr/feature/transfer-to-typescript-yar…

…n-vite

Feature Typescript Yarn Vite transfer

.eslintignore

@@ -0,0 +1 @@
+/**/*.d.ts

.eslintrc.json

@@ -0,0 +1,45 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:prettier/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "globals": {
+    "Atomics": "readonly",
+    "SharedArrayBuffer": "readonly"
+  },
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "ecmaFeatures": {
+      "jsx": true,
+      "restParams": true,
+      "spread": true
+    }
+  },
+  "plugins": ["prettier", "react", "@typescript-eslint"],
+  "rules": {
+    "prettier/prettier": "error",
+    "react/react-in-jsx-scope": "off",
+    "react/jsx-filename-extension": [
+      1,
+      {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    ],
+    "@typescript-eslint/no-explicit-any": "off"
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}

.gitignore

@@ -1,23 +1,24 @@
-
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
+# Logs
+logs
+*.log
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

.pre-commit-config.yaml

@@ -0,0 +1,43 @@
+repos:
+
+  - repo: https://github.com/Yelp/detect-secrets
+    rev: v1.2.0
+    hooks:
+      - id: detect-secrets
+        name: detect secrets
+        args: [ '--baseline', '.secrets.baseline' ]
+        exclude: yarn.lock
+
+  - repo: https://github.com/pre-commit/pre-commit-hooks
+    rev: v4.1.0
+    hooks:
+#      - id: check-added-large-files
+#      - id: check-json
+#      - id: check-yaml
+#      - id: detect-aws-credentials
+      - id: detect-private-key
+      - id: no-commit-to-branch
+        args: [ --branch, main, --branch, master, --pattern, release/.* ]
+
+# TODO re-enable when v2 reach to lint-able state
+#  - repo: local
+#    hooks:
+#      - id: yarn-lint
+#        name: yarn lint
+#        entry: npx yarn lint
+#        language: system
+#        pass_filenames: false
+
+  - repo: local
+    hooks:
+      - id: yarn-audit
+        name: yarn audit
+        entry: npx yarn audit
+        language: system
+        pass_filenames: false
+
+# Hitting a bit too wide
+#  - repo: https://github.com/pre-commit/mirrors-prettier
+#    rev: v2.5.1
+#    hooks:
+#      - id: prettier

.prettierignore

@@ -0,0 +1,23 @@
+# See https://prettier.io/docs/en/ignore.html
+
+# Ignore artifacts:
+build/
+coverage/
+local_ignore/
+bams/
+vcfs/
+htsget/
+
+# Ignore all HTML files:
+*.html
+
+.pre-commit-config.yaml
+buildspec.yml
+docker-compose.yml
+README.md
+start.sh
+
+.yarnrc.yml
+.yarn/
+.local/
+dist/

.prettierrc.json

@@ -0,0 +1,12 @@
+{
+  "arrowParens": "always",
+  "bracketSpacing": true,
+  "bracketSameLine": true,
+  "printWidth": 100,
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "useTabs": false
+}

.secrets.baseline

@@ -0,0 +1,109 @@
+{
+  "version": "1.2.0",
+  "plugins_used": [
+    {
+      "name": "ArtifactoryDetector"
+    },
+    {
+      "name": "AWSKeyDetector"
+    },
+    {
+      "name": "AzureStorageKeyDetector"
+    },
+    {
+      "name": "Base64HighEntropyString",
+      "limit": 4.5
+    },
+    {
+      "name": "BasicAuthDetector"
+    },
+    {
+      "name": "CloudantDetector"
+    },
+    {
+      "name": "GitHubTokenDetector"
+    },
+    {
+      "name": "HexHighEntropyString",
+      "limit": 3.0
+    },
+    {
+      "name": "IbmCloudIamDetector"
+    },
+    {
+      "name": "IbmCosHmacDetector"
+    },
+    {
+      "name": "JwtTokenDetector"
+    },
+    {
+      "name": "KeywordDetector",
+      "keyword_exclude": ""
+    },
+    {
+      "name": "MailchimpDetector"
+    },
+    {
+      "name": "NpmDetector"
+    },
+    {
+      "name": "PrivateKeyDetector"
+    },
+    {
+      "name": "SendGridDetector"
+    },
+    {
+      "name": "SlackDetector"
+    },
+    {
+      "name": "SoftlayerDetector"
+    },
+    {
+      "name": "SquareOAuthDetector"
+    },
+    {
+      "name": "StripeDetector"
+    },
+    {
+      "name": "TwilioKeyDetector"
+    }
+  ],
+  "filters_used": [
+    {
+      "path": "detect_secrets.filters.allowlist.is_line_allowlisted"
+    },
+    {
+      "path": "detect_secrets.filters.common.is_ignored_due_to_verification_policies",
+      "min_level": 2
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_indirect_reference"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_likely_id_string"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_lock_file"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_not_alphanumeric_string"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_potential_uuid"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_prefixed_with_dollar_sign"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_sequential_string"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_swagger_file"
+    },
+    {
+      "path": "detect_secrets.filters.heuristic.is_templated_secret"
+    }
+  ],
+  "results": {},
+  "generated_at": "2022-03-28T00:36:23Z"
+}

README.md

@@ -16,16 +16,51 @@ The directories:
 - _src_ - The react source code.
 
 Prerequisite:  
-The app will need to fetch data from the [data-portal-api](https://github.com/umccr/data-portal-apis). Before running this app, make sure to run the portal-api locally at `localhost:8000` (If it is run on a different port, you can change REACT_APP_DATA_PORTAL_API_DOMAIN variable at get_env.sh)
-
-1. Check Node version, as our project need run with version >= 18
-   `node -v`
-2. Install React dependancy  
-   `npm i`
-3. Fetch ENV variables from AWS Systems Manager Parameter Store. (This will store environment variable needed to the terminal)  
-   `source get_env.sh`
-4. Start the project and will be running at _<http://localhost:3000/>_  
-   `npm start`
+The app will need to fetch data from the [data-portal-api](https://github.com/umccr/data-portal-apis).
+Before running this app, make sure to run the portal-api locally at `localhost:8000` (If it is run on a different port, you can change VITE_DATA_PORTAL_API_DOMAIN variable at get_env.sh)
+
+### TL;DR
+
+```
+node -v
+v18.19.0
+
+npm i -g yarn
+
+(NOTE: yarn should auto resolve to local version from `.yarn` that configure in `package.json` > `packageManager`)
+yarn -v
+1.22.22
+
+yarn install
+
+aws sso login --profile dev && export AWS_PROFILE=dev
+
+yarn start
+
+(CTRL+C to stop the dev server)
+```
+
+### Lint & prettier
+
+- Run lint: `yarn lint`
+- Run prettier check: `yarn prettier`
+- Run prettier fix: `yarn prettier-fix`
+
+### Audit
+
+- Run `yarn audit` for package security vulnerabilities
+- Recommend fixing/updating any package with _direct_ dependencies
+- If vulnerabilities found in transitive dependency, but it has yet to resolve, then list them in `package.json > resolutions` node as [Selective Dependency Resolutions condition explained here](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/).
+
+### Pre-commit Hook
+
+> NOTE: We use [pre-commit](https://github.com/umccr/wiki/blob/master/computing/dev-environment/git-hooks.md). It will guard and enforce static code analysis such as `lint` and any security `audit` via pre-commit hook. You are encouraged to fix those. If you wish to skip this for good reason, you can by-pass [Git pre-commit hooks](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) by using `git commit --no-verify` flag.
+
+```commandline
+git config --unset core.hooksPath
+pre-commit install
+pre-commit run --all-files
+```
 
 ### AWS-CDK Infrastructure
 

buildspec.yml

@@ -4,10 +4,10 @@ phases:
     runtime-versions:
       nodejs: 18
     commands:
-      - npm i
+      - yarn install
   build:
     commands:
       - set -eu
-      - env | grep REACT
-      - npm run build
-      - npm run deploy
+      - env | grep VITE
+      - yarn build
+      - aws s3 rm s3://${VITE_BUCKET_NAME}/ --recursive && aws s3 cp ./dist s3://${VITE_BUCKET_NAME}/ --recursive