From 41f3b023dfb5b1bd6304aa70362fafce223fd66c Mon Sep 17 00:00:00 2001 From: Daniel Sanchez Date: Fri, 19 Nov 2021 13:12:25 +0100 Subject: [PATCH 1/9] Add github scripts and action --- .github/workflows/deploy-storybook.yml | 88 +++++++++++++++++++ scripts/github/deploy_pull_request.sh | 34 +++++++ .../github/prepare_production_deployment.sh | 18 ++++ 3 files changed, 140 insertions(+) create mode 100644 .github/workflows/deploy-storybook.yml create mode 100644 scripts/github/deploy_pull_request.sh create mode 100644 scripts/github/prepare_production_deployment.sh diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml new file mode 100644 index 00000000..2d593948 --- /dev/null +++ b/.github/workflows/deploy-storybook.yml @@ -0,0 +1,88 @@ +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 + env: + REACT_APP_RPC_TOKEN: ${{ secrets.REACT_APP_RPC_TOKEN }} + + - 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 }} \ No newline at end of file diff --git a/scripts/github/deploy_pull_request.sh b/scripts/github/deploy_pull_request.sh new file mode 100644 index 00000000..103a5224 --- /dev/null +++ b/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 \ No newline at end of file diff --git a/scripts/github/prepare_production_deployment.sh b/scripts/github/prepare_production_deployment.sh new file mode 100644 index 00000000..8d78056d --- /dev/null +++ b/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 \ No newline at end of file From de309f90c3b311e703218b500865a66b906a8410 Mon Sep 17 00:00:00 2001 From: Daniel Sanchez Date: Fri, 19 Nov 2021 13:53:57 +0100 Subject: [PATCH 2/9] Bump dependencies with minor changes --- .github/workflows/deploy-storybook.yml | 2 - README.md | 4 +- package.json | 18 +- tests/__snapshots__/colors.stories.storyshot | 170 ++-- .../__snapshots__/accordion.stories.storyshot | 74 +- .../__snapshots__/number.stories.storyshot | 6 +- .../Card/__snapshots__/card.stories.storyshot | 30 +- .../__snapshots__/divider.stories.storyshot | 4 +- .../Dot/__snapshots__/dot.stories.storyshot | 8 +- .../FixedDialog.stories.storyshot | 18 +- .../__snapshots__/fixedIcon.stories.storyshot | 46 +- .../Icon/__snapshots__/icon.stories.storyshot | 310 +++--- .../__snapshots__/index.stories.storyshot | 72 +- .../__snapshots__/layout.stories.storyshot | 10 +- .../__snapshots__/table.stories.storyshot | 216 ++-- .../Text/__snapshots__/text.stories.storyshot | 26 +- .../__snapshots__/title.stories.storyshot | 16 +- .../ethHashInfo.stories.storyshot | 230 ++--- .../__snapshots__/index.stories.storyshot | 12 +- .../__snapshots__/loader.stories.storyshot | 10 +- .../__snapshots__/index.stories.storyshot | 4 +- .../__snapshots__/button.stories.storyshot | 98 +- .../buttonLink.stories.storyshot | 18 +- .../__snapshots__/checkbox.stories.storyshot | 2 +- .../__snapshots__/index.stories.storyshot | 12 +- .../__snapshots__/select.stories.storyshot | 2 +- .../__snapshots__/switch.stories.storyshot | 2 +- .../__snapshots__/textField.stories.storyshot | 16 +- .../breadcrumb.stories.storyshot | 78 +- .../__snapshots__/index.stories.storyshot | 10 +- .../Menu/__snapshots__/menu.stories.storyshot | 12 +- .../__snapshots__/stepper.stories.storyshot | 66 +- .../Tab/__snapshots__/tab.stories.storyshot | 78 +- .../__snapshots__/index.stories.storyshot | 8 +- .../__snapshots__/index.stories.storyshot | 12 +- .../genericModal.stories.storyshot | 2 +- .../ManageListModal.stories.storyshot | 2 +- .../__snapshots__/utils.stories.storyshot | 12 +- yarn.lock | 946 +++++++++++++++++- 39 files changed, 1782 insertions(+), 880 deletions(-) diff --git a/.github/workflows/deploy-storybook.yml b/.github/workflows/deploy-storybook.yml index 2d593948..19a9fd46 100644 --- a/.github/workflows/deploy-storybook.yml +++ b/.github/workflows/deploy-storybook.yml @@ -48,8 +48,6 @@ jobs: - name: Build storybook run: yarn build-storybook - env: - REACT_APP_RPC_TOKEN: ${{ secrets.REACT_APP_RPC_TOKEN }} - name: Configure AWS credentials uses: aws-actions/configure-aws-credentials@v1 diff --git a/README.md b/README.md index 1aa20878..96b2b231 100644 --- a/README.md +++ b/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. diff --git a/package.json b/package.json index 7e1b2141..42534296 100644 --- a/package.json +++ b/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,11 +43,11 @@ "@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", + "@types/styled-components": "^5.1.15", "@typescript-eslint/eslint-plugin": "^4.29.2", "@typescript-eslint/parser": "^4.29.2", "awesome-typescript-loader": "^5.2.1", @@ -61,13 +61,13 @@ "file-loader": "^6.2.0", "identity-obj-proxy": "^3.0.0", "jest": "^26.6.3", - "jest-styled-components": "^7.0.5", + "jest-styled-components": "^7.0.6", "prettier": "^2.3.2", "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", + "styled-components": "^5.3.3", "typescript": "^4.0.5", "url-loader": "^4.1.1", "webpack": "4.43.0", diff --git a/tests/__snapshots__/colors.stories.storyshot b/tests/__snapshots__/colors.stories.storyshot index 0e0ae8db..78e55579 100644 --- a/tests/__snapshots__/colors.stories.storyshot +++ b/tests/__snapshots__/colors.stories.storyshot @@ -2,423 +2,423 @@ exports[`Storyshots Utils/Colors Colors Sample 1`] = `

secondary

#001428

text

#001428

primaryHover

#005546

errorHover

#C31717

secondaryHover

#5D6D74

placeHolder

#5D6D74

error

#DB3A3D

primary

#008C73

pending

#E8663D

rinkeby

#E8673C

secondaryLight

#B2B5B2

icon

#B2B5B2

primaryLight

#A1D2CA

warning

#FFC05F

tag

#D4D5D3

separator

#E8E7E6

pendingTagHover

#FBE5C5

errorTooltip

#FFE6EA

inputField

#F0EFEE

background

#F7F5F5

white

#FFFFFF diff --git a/tests/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot b/tests/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot index dfe42499..f543791e 100644 --- a/tests/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot +++ b/tests/dataDisplay/Accordion/__snapshots__/accordion.stories.storyshot @@ -13,12 +13,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` } >

Transaction 1 @@ -131,7 +131,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -143,12 +143,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `

Transaction 2 @@ -261,7 +261,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -273,12 +273,12 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = `

Transaction 3 @@ -391,7 +391,7 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -407,15 +407,15 @@ exports[`Storyshots Data Display/Accordion Compact Accordion 1`] = ` exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 1 @@ -528,7 +528,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -540,12 +540,12 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 2 @@ -658,7 +658,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. @@ -670,12 +670,12 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = `

Transaction 3 @@ -788,7 +788,7 @@ exports[`Storyshots Data Display/Accordion Simple Accordion 1`] = ` className="MuiAccordionDetails-root" >

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. diff --git a/tests/dataDisplay/Amount/__snapshots__/number.stories.storyshot b/tests/dataDisplay/Amount/__snapshots__/number.stories.storyshot index e0e6717a..3429e9af 100644 --- a/tests/dataDisplay/Amount/__snapshots__/number.stories.storyshot +++ b/tests/dataDisplay/Amount/__snapshots__/number.stories.storyshot @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Storyshots Data Display/Amount Currency 1`] = `"€999,999.99"`; +exports[`Storyshots Data Display/Amount Currency 1`] = `"999.999,99 €"`; exports[`Storyshots Data Display/Amount Format Number Function 1`] = ` Array [ @@ -15,6 +15,6 @@ Array [ ] `; -exports[`Storyshots Data Display/Amount Large Number 1`] = `">999T"`; +exports[`Storyshots Data Display/Amount Large Number 1`] = `">999 B"`; -exports[`Storyshots Data Display/Amount Simple Number 1`] = `"1,234,324.2"`; +exports[`Storyshots Data Display/Amount Simple Number 1`] = `"1.234.324,2"`; diff --git a/tests/dataDisplay/Card/__snapshots__/card.stories.storyshot b/tests/dataDisplay/Card/__snapshots__/card.stories.storyshot index 581da9b4..b34447c1 100644 --- a/tests/dataDisplay/Card/__snapshots__/card.stories.storyshot +++ b/tests/dataDisplay/Card/__snapshots__/card.stories.storyshot @@ -2,17 +2,17 @@ exports[`Storyshots Data Display/Card Card Disabled 1`] = `

@@ -20,12 +20,12 @@ exports[`Storyshots Data Display/Card Card Disabled 1`] = `

Some text
,
,
Some content2 @@ -29,7 +29,7 @@ exports[`Storyshots Data Display/Divider Vertical 1`] = ` Some content
Some content2 diff --git a/tests/dataDisplay/Dot/__snapshots__/dot.stories.storyshot b/tests/dataDisplay/Dot/__snapshots__/dot.stories.storyshot index 99794211..74c9a15a 100644 --- a/tests/dataDisplay/Dot/__snapshots__/dot.stories.storyshot +++ b/tests/dataDisplay/Dot/__snapshots__/dot.stories.storyshot @@ -2,11 +2,11 @@ exports[`Storyshots Data Display/Dot Dot With Icon 1`] = `

diff --git a/tests/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot b/tests/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot index ef501007..2224e9a9 100644 --- a/tests/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot +++ b/tests/dataDisplay/FixedDialog/__snapshots__/FixedDialog.stories.storyshot @@ -2,35 +2,35 @@ exports[`Storyshots Data Display/FixedDialog Simple Fixed Dialog 1`] = `

Legal Disclaimer
Some Body

  • Owner 1

    @@ -677,16 +677,16 @@ exports[`Storyshots Ethereum/Eth hash Info With Name 1`] = ` exports[`Storyshots Ethereum/Eth hash Info With Short Address 1`] = `

    @@ -699,37 +699,37 @@ exports[`Storyshots Ethereum/Eth hash Info With Short Address 1`] = ` exports[`Storyshots Ethereum/Eth hash Info With Show And Copy Short Name 1`] = `

    Owner 1

    ,
    ,
    ,
    ,
    ,
    , diff --git a/tests/inputs/Button/__snapshots__/button.stories.storyshot b/tests/inputs/Button/__snapshots__/button.stories.storyshot index cb05aaf0..b5da44ff 100644 --- a/tests/inputs/Button/__snapshots__/button.stories.storyshot +++ b/tests/inputs/Button/__snapshots__/button.stories.storyshot @@ -2,10 +2,10 @@ exports[`Storyshots Inputs/Button Disabled Button 1`] = `
    ,