Restore storybook for PR review and version publish

.eslintrc

@@ -1,10 +1,10 @@
 {
   "parser": "@typescript-eslint/parser",
   "extends": [
-    "plugin:react/recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended"
+    "plugin:react/recommended", // React recommended rules plugin
+    "plugin:@typescript-eslint/recommended", // Plugin to use typescript with eslint
+    "prettier", // Add prettier rules to eslint
+    "plugin:prettier/recommended" // Plugin to use prettier rules with eslint
   ],
   "plugins": ["react-hooks"],
   "parserOptions": {

.github/workflows/deploy-storybook.yml

@@ -0,0 +1,86 @@
+name: Deploy storybook
+
+on:
+  # Pull request hook without any config. Launches for every pull request
+  pull_request:
+  # Launches build when release is published
+  release:
+    types: [published]
+
+env:
+  REPO_NAME_ALPHANUMERIC: safereactcomponents
+
+jobs:
+  deploy:
+    name: Deployment
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Cancel Previous Runs
+        uses: styfle/cancel-workflow-action@0.9.1
+        with:
+          access_token: ${{ github.token }}
+
+      - uses: actions/checkout@v2
+
+      - name: Node.js setup
+        uses: actions/setup-node@v2
+        with:
+          node-version: 14
+
+      - uses: actions/cache@v2
+        with:
+          path: '**/node_modules'
+          key: ${{ runner.os }}-modules-${{ hashFiles('**/yarn.lock') }}
+
+      - name: Env dependencies setup
+        run: |
+          sudo apt-get update
+          sudo apt-get -y install python3-pip python3-dev
+          pip install awscli --upgrade --user
+
+      - name: Yarn install
+        run: |
+          mkdir .yarncache
+          yarn install --cache-folder ./.yarncache --frozen-lockfile
+          rm -rf .yarncache
+          yarn cache clean
+
+      - name: Build storybook
+        run: yarn build-storybook
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_DEFAULT_REGION }}
+
+      # Script to deploy Pull Requests
+      - run: bash ./scripts/github/deploy_pull_request.sh
+        if: success() && github.event.number
+        env:
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          PR_NUMBER: ${{ github.event.number }}
+          REVIEW_BUCKET_NAME: ${{ secrets.AWS_REVIEW_BUCKET_NAME }}
+
+      - name: 'PRaul: Comment PR with app URLs'
+        uses: mshick/add-pr-comment@v1
+        with:
+          message: |
+            :books: [Storybook review](${{ env.REVIEW_FEATURE_URL }})
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          repo-token-user-login: 'github-actions[bot]'
+        if: success() && github.event.number
+        env:
+          REVIEW_FEATURE_URL: https://pr${{ github.event.number }}--safereactcomponents.review.gnosisdev.com
+
+
+      # Script to prepare production deployments
+      - run: bash ./scripts/github/prepare_production_deployment.sh
+        if: success() && startsWith(github.ref, 'refs/tags/v')
+        env:
+          PROD_DEPLOYMENT_HOOK_TOKEN: ${{ secrets.PROD_DEPLOYMENT_HOOK_TOKEN }}
+          PROD_DEPLOYMENT_HOOK_URL: ${{ secrets.PROD_DEPLOYMENT_HOOK_URL }}
+          VERSION_TAG: ${{ github.event.release.tag_name }}

.prettierrc

@@ -1,6 +1,6 @@
 {
     "bracketSpacing": true,
-    "jsxBracketSameLine": true,
+    "bracketSameLine": true,
     "printWidth": 80,
     "singleQuote": true,
     "trailingComma": "es5",

.storybook/main.js

@@ -4,5 +4,6 @@ module.exports = {
     "@storybook/addon-actions",
     "@storybook/addon-links",
     "@storybook/addon-docs",
+    "storybook-addon-react-docgen",
   ]
 };

.storybook/webpack.config.js

@@ -1,13 +1,18 @@
 module.exports = ({ config }) => {
   config.module.rules.push({
-    test: /\.(ts|tsx)$/,
+    test: /\.(ts|js)x?$/,
+    exclude: [/node_modules/],
     use: [
       {
-        loader: require.resolve('awesome-typescript-loader')
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [
+            '@babel/preset-env',
+            '@babel/preset-react',
+            '@babel/preset-typescript',
+          ],
+        },
       },
-      {
-        loader: require.resolve('react-docgen-typescript-loader')
-      }
     ]
   });
 

README.md

@@ -24,10 +24,10 @@ As Gnosis Safe allows to integrate third party applications ("Safe Apps"), these
 
 ## Integration
 
-This library makes use of [material-ui - 4.X.X](https://material-ui.com/) and [styled-componentes - 5.X.X]() as `peer dependencies`, this means you must install it in your Safe App. Make sure to provide the same version as the one being used by the current version of this library.
+This library makes use of [material-ui - 4.X.X](https://material-ui.com/) and [styled-components - 5.X.X](https://styled-components.com/) as `peer dependencies`, this means you must install it in your Safe App. Make sure to provide the same version as the one being used by the current version of this library.
 
 
-Once everything is installed, you have to instantiate a [ThemeProvider](https://styled-components.com/docs/api#themeprovider) from [styled-components](http://styled-components.com/).
+Once everything is installed, you have to instantiate a [ThemeProvider](https://styled-components.com/docs/api#themeprovider) from [styled-components](https://styled-components.com/).
 
 This example uses the theme exported by safe-react-components. Here, you can extend this theme to customize it to your needs.
 

babel.config.js

@@ -4,4 +4,5 @@ module.exports = {
     '@babel/preset-typescript',
     '@babel/preset-react',
   ],
+  plugins: ['react-docgen'],
 };

package.json

@@ -28,10 +28,10 @@
     "react-media": "^1.10.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.14.0",
-    "@babel/preset-env": "^7.14.0",
-    "@babel/preset-react": "^7.14.0",
-    "@babel/preset-typescript": "^7.14.0",
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.0",
+    "@babel/preset-react": "^7.16.0",
+    "@babel/preset-typescript": "^7.16.0",
     "@material-ui/core": "^4.12.3",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-docs": "^6.3.12",
@@ -43,32 +43,33 @@
     "@testing-library/react": "^11.2.7",
     "@testing-library/user-event": "^12.2.0",
     "@types/jest": "^26.0.0",
-    "@types/material-ui": "^0.21.9",
-    "@types/node": "^16.6.1",
+    "@types/material-ui": "^0.21.12",
+    "@types/node": "^16.11.9",
     "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.0",
-    "@types/styled-components": "^5.1.12",
-    "@typescript-eslint/eslint-plugin": "^4.29.2",
-    "@typescript-eslint/parser": "^4.29.2",
-    "awesome-typescript-loader": "^5.2.1",
+    "@types/styled-components": "^5.1.15",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
+    "babel-loader": "^8.2.3",
+    "babel-plugin-react-docgen": "^4.2.1",
     "copy-webpack-plugin": "^6.3.0",
     "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-react": "^7.24.0",
-    "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-react": "^7.27.1",
+    "eslint-plugin-react-hooks": "^4.3.0",
     "ethereum-blockies-base64": "^1.0.2",
     "file-loader": "^6.2.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
-    "jest-styled-components": "^7.0.5",
-    "prettier": "^2.3.2",
+    "jest-styled-components": "^7.0.6",
+    "prettier": "^2.4.1",
     "react": "^16.14.0",
-    "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^16.14.0",
     "rimraf": "^3.0.2",
-    "styled-components": "^5.3.0",
-    "typescript": "^4.0.5",
+    "storybook-addon-react-docgen": "^1.2.42",
+    "styled-components": "^5.3.3",
+    "typescript": "^4.5.0",
     "url-loader": "^4.1.1",
     "webpack": "4.43.0",
     "webpack-cli": "^3.3.10",

scripts/github/deploy_pull_request.sh

@@ -0,0 +1,34 @@
+#!/bin/bash
+
+BUILD_DIR='storybook-static'
+
+function deploy_pull_request {
+  REVIEW_ENVIRONMENT_DOMAIN='review.gnosisdev.com'
+
+  # Pull request name with "pr" prefix
+  PULL_REQUEST_NAME="pr$PR_NUMBER"
+
+  # Only alphanumeric characters. Example safe-react-components -> safereactcomponents
+  REVIEW_FEATURE_FOLDER="$REPO_NAME_ALPHANUMERIC/$PULL_REQUEST_NAME"
+
+  aws s3 sync ${BUILD_DIR} s3://${REVIEW_BUCKET_NAME}/${REVIEW_FEATURE_FOLDER} --delete
+}
+
+function publish_pull_request_urls_in_github {
+  REVIEW_FEATURE_URL="https://$PULL_REQUEST_NAME--$REPO_NAME_ALPHANUMERIC.$REVIEW_ENVIRONMENT_DOMAIN"
+
+  # Using the Issues api instead of the PR api
+  # Done so because every PR is an issue, and the issues api allows to post general comments,
+  # while the PR api requires that comments are made to specific files and specific commits
+  GITHUB_PR_COMMENTS=https://api.github.com/repos/${TRAVIS_REPO_SLUG}/issues/${TRAVIS_PULL_REQUEST}/comments
+  curl -H "Authorization: token ${GITHUB_API_TOKEN}" --request POST ${GITHUB_PR_COMMENTS} --data '{"body":"Travis automatic deployment:\r\n '${REVIEW_FEATURE_URL}' \r\n"}'
+}
+
+# Only:
+# - Pull requests
+# - Security env variables are available. PR from forks don't have them.
+if [ -n "$AWS_ACCESS_KEY_ID" ]
+then
+  deploy_pull_request
+  # publish_pull_request_urls_in_github
+fi

scripts/github/prepare_production_deployment.sh

@@ -0,0 +1,18 @@
+#!/bin/bash
+
+set -ev
+
+# Only:
+# - Tagged commits
+# - Security env variables are available.
+if [ -n "$VERSION_TAG" ] && [ -n "$PROD_DEPLOYMENT_HOOK_TOKEN" ] && [ -n "$PROD_DEPLOYMENT_HOOK_URL" ]
+then
+  # Call Devops Releases Handler CI
+  curl --silent --output /dev/null --write-out "%{http_code}" -X POST \
+     -F token="$PROD_DEPLOYMENT_HOOK_TOKEN" \
+     -F ref=master \
+     -F "variables[TRIGGER_RELEASE_COMMIT_TAG]=$VERSION_TAG" \
+      $PROD_DEPLOYMENT_HOOK_URL
+else
+  echo "[ERROR] Production deployment could not be prepared"
+fi

src/colors.stories.tsx

@@ -35,9 +35,9 @@ export const ColorsSample = (): React.ReactElement => {
       if (typeof (theme.colors as Record<string, unknown>)[name] === 'string') {
         acc.push({
           name,
-          code: ((theme.colors as Record<string, unknown>)[
-            name
-          ] as string).toUpperCase(),
+          code: (
+            (theme.colors as Record<string, unknown>)[name] as string
+          ).toUpperCase(),
         });
       }
       return acc;

src/dataDisplay/Amount/index.test.ts

@@ -1,3 +1,4 @@
+/* eslint @typescript-eslint/no-loss-of-precision: 0 */
 import { formatAmount } from '.';
 
 describe('formatAmount', () => {