chore: Adjust Travis CI to work again

.nvmrc

@@ -1 +1 @@
-16.20.2
+18.20.3

.travis.yml

@@ -7,23 +7,38 @@ env:
   global:
     - PR_TITLE=$(curl https://github.com/${TRAVIS_REPO_SLUG}/pull/${TRAVIS_PULL_REQUEST} 2> /dev/null | grep "title" | head -1)
 stages:
+  - Install
   - Prebuild
   - Build
   - Docs
   - Test
   - Screenshots - Create
   - Screenshots - Upload
   - Deploy
+install: true
 jobs:
   include:
+    - name: 'Install node_modules'
+      stage: 'Install'
+      script: yarn install --frozen-lockfile
+      workspaces:
+        create:
+          name: modules
+          paths:
+            - ./node_modules
     - name: 'Lint'
       stage: 'Prebuild'
       script: yarn lint
       if: commit_message =~ /^((?!\[only argos\]).)*$/ # skipped if commit message contains "[only argos]"
+      workspaces:
+        use:
+          - modules
     - name: 'Generate Sprite and Palette'
       stage: 'Prebuild'
       script: yarn makeSpriteAndPalette
       workspaces:
+        use:
+          - modules
         create:
           name: sprite-palette-binaries
           paths:
@@ -35,6 +50,7 @@ jobs:
         - yarn build
       workspaces:
         use:
+          - modules
           - sprite-palette-binaries
         create:
           name: js-binaries
@@ -45,6 +61,8 @@ jobs:
       script:
         - yarn build:css:all
       workspaces:
+        use:
+          - modules
         create:
           name: css-binaries
           paths:
@@ -56,6 +74,7 @@ jobs:
         - yarn build:doc:kss
       workspaces:
         use:
+          - modules
           - sprite-palette-binaries
           - js-binaries
           - css-binaries
@@ -69,6 +88,7 @@ jobs:
         - yarn test:noSnapshots
       workspaces:
         use:
+          - modules
           - sprite-palette-binaries
           - js-binaries
           - css-binaries
@@ -79,6 +99,7 @@ jobs:
         - yarn test:snapshots
       workspaces:
         use:
+          - modules
           - sprite-palette-binaries
           - js-binaries
           - css-binaries
@@ -89,81 +110,89 @@ jobs:
         - yarn bundlemon
       workspaces:
         use:
+          - modules
           - sprite-palette-binaries
           - js-binaries
           - css-binaries
       if: commit_message =~ /^((?!\[only argos\]).)*$/  # skipped if commit message contains "[only argos]"
-    # - name: '[Argos] Create desktop screenshots'
-    #   stage: 'Screenshots - Create'
-    #   script: |
-    #     if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
-    #       mkdir ./screenshots
-    #       yarn add puppeteer@"21.11.0" --dev --exact --no-lockfile
-    #       yarn screenshots --mode react --viewport desktop --screenshot-dir ./screenshots/reactDesktop
-    #     fi
-    #   workspaces:
-    #     use:
-    #       - sprite-palette-binaries
-    #       - js-binaries
-    #       - css-binaries
-    #       - docs-binaries
-    #     create:
-    #       name: screenshots-desktop-binaries
-    #       paths:
-    #         - ./screenshots
-    # - name: '[Argos] Create mobile screenshots'
-    #   stage: 'Screenshots - Create'
-    #   script: |
-    #     if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
-    #       mkdir ./screenshots
-    #       yarn add puppeteer@"21.11.0" --dev --exact --no-lockfile
-    #       yarn screenshots --mode react --viewport 300x600 --screenshot-dir ./screenshots/reactMobile
-    #     fi
-    #   workspaces:
-    #     use:
-    #       - sprite-palette-binaries
-    #       - js-binaries
-    #       - css-binaries
-    #       - docs-binaries
-    #     create:
-    #       name: screenshots-mobile-binaries
-    #       paths:
-    #         - ./screenshots
-    # - name: '[Argos] Create kss screenshots'
-    #   stage: 'Screenshots - Create'
-    #   script: |
-    #     if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
-    #       mkdir ./screenshots
-    #       yarn add puppeteer@"21.11.0" --dev --exact --no-lockfile
-    #       yarn screenshots --mode kss --screenshot-dir ./screenshots/kss
-    #     fi
-    #   workspaces:
-    #     use:
-    #       - sprite-palette-binaries
-    #       - js-binaries
-    #       - css-binaries
-    #       - docs-binaries
-    #     create:
-    #       name: screenshots-kss-binaries
-    #       paths:
-    #         - ./screenshots
-    # - name: '[Argos] Upload all screenshots'
-    #   stage: 'Screenshots - Upload'
-    #   script: |
-    #     if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
-    #       yarn argos:upload --parallel screenshots/reactDesktop/ --token $ARGOS_TOKEN  --parallel-total 3 --parallel-nonce $TRAVIS_BUILD_ID --ignore ''
-    #       yarn argos:upload --parallel screenshots/reactMobile/ --token $ARGOS_TOKEN  --parallel-total 3 --parallel-nonce $TRAVIS_BUILD_ID --ignore ''
-    #       yarn argos:upload --parallel screenshots/kss/ --token $ARGOS_TOKEN  --parallel-total 3 --parallel-nonce $TRAVIS_BUILD_ID --ignore ''
-    #     fi
-    #   workspaces:
-    #     use:
-    #       - sprite-palette-binaries
-    #       - js-binaries
-    #       - css-binaries
-    #       - docs-binaries
-    #       - screenshots-desktop-binaries
-    #       - screenshots-mobile-binaries
-    #       - screenshots-kss-binaries
+    - name: '[Argos] Create desktop screenshots'
+      stage: 'Screenshots - Create'
+      addons:
+        chrome: stable
+      script: |
+        if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
+          mkdir ./screenshots
+          yarn screenshots --mode react --viewport desktop --screenshot-dir ./screenshots/reactDesktop
+        fi
+      workspaces:
+        use:
+          - modules
+          - sprite-palette-binaries
+          - js-binaries
+          - css-binaries
+          - docs-binaries
+        create:
+          name: screenshots-desktop-binaries
+          paths:
+            - ./screenshots
+    - name: '[Argos] Create mobile screenshots'
+      stage: 'Screenshots - Create'
+      addons:
+        chrome: stable
+      script: |
+        if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
+          mkdir ./screenshots
+          yarn screenshots --mode react --viewport 300x600 --screenshot-dir ./screenshots/reactMobile
+        fi
+      workspaces:
+        use:
+          - modules
+          - sprite-palette-binaries
+          - js-binaries
+          - css-binaries
+          - docs-binaries
+        create:
+          name: screenshots-mobile-binaries
+          paths:
+            - ./screenshots
+    - name: '[Argos] Create kss screenshots'
+      stage: 'Screenshots - Create'
+      addons:
+        chrome: stable
+      script: |
+        if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
+          mkdir ./screenshots
+          yarn screenshots --mode kss --screenshot-dir ./screenshots/kss
+        fi
+      workspaces:
+        use:
+          - modules
+          - sprite-palette-binaries
+          - js-binaries
+          - css-binaries
+          - docs-binaries
+        create:
+          name: screenshots-kss-binaries
+          paths:
+            - ./screenshots
+    - name: '[Argos] Upload all screenshots'
+      stage: 'Screenshots - Upload'
+      script: |
+        if [[ "${PR_TITLE}" != *"[skip argos]"* ]]; then
+          yarn argos:upload --parallel screenshots/reactDesktop/ --token $ARGOS_TOKEN  --parallel-total 3 --parallel-nonce $TRAVIS_BUILD_ID --ignore ''
+          yarn argos:upload --parallel screenshots/reactMobile/ --token $ARGOS_TOKEN  --parallel-total 3 --parallel-nonce $TRAVIS_BUILD_ID --ignore ''
+          yarn argos:upload --parallel screenshots/kss/ --token $ARGOS_TOKEN  --parallel-total 3 --parallel-nonce $TRAVIS_BUILD_ID --ignore ''
+        fi
+      workspaces:
+        use:
+          - modules
+          - sprite-palette-binaries
+          - js-binaries
+          - css-binaries
+          - docs-binaries
+          - screenshots-desktop-binaries
+          - screenshots-mobile-binaries
+          - screenshots-kss-binaries
     - name: 'Deploy'
       stage: 'Deploy'
       script: 'true'
@@ -177,6 +206,8 @@ jobs:
       deploy:
         provider: script
         skip-cleanup: true
-        script: yarn deploy:doc -- --username cozycloud --email [email protected] --repo https://cozy-bot:[email protected]/cozy/cozy-ui.git && yarn semantic-release
+        script: |
+          yarn deploy:doc -- --username cozycloud --email [email protected] --repo https://cozy-bot:[email protected]/cozy/cozy-ui.git
+          yarn semantic-release
         on:
           branch: master

docs/dev.md

@@ -19,9 +19,10 @@ remark -o --use remark-jscodeshift=allowNoLang:true,transform:\"codemods/transfo
 * Screenshot the new one inside screenshots
 * Run pixelmatch-server, which shows screenshots side by side like on Argos (you need the `pixelmatch` binary to be available)
 
+You have to change `executablePath` value of `prepareBrowser` function to match your OS configuration.
+
 ```bash
 # Screenshot all the components
-yarn add puppeteer@"21.11.0" -DE
 yarn build:all
 mkdir ./screenshots
 yarn screenshots

package.json

@@ -25,8 +25,8 @@
     "build:css:kss": "env CSSMODULES=false yarn run stylus-build -o build/styleguide/app.css stylus/cozy-ui/build.styl",
     "build:doc": "npm-run-all 'build:doc:*'",
     "build:doc:config": "copyfiles -u 1 docs/*.md docs/_config.yml build",
-    "build:doc:kss": "kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage stylus/styleguide.md --css app.css",
-    "build:doc:react": "styleguidist build --config docs/styleguide.config.js",
+    "build:doc:kss": "NODE_OPTIONS=--openssl-legacy-provider kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage stylus/styleguide.md --css app.css",
+    "build:doc:react": "NODE_OPTIONS=--openssl-legacy-provider styleguidist build --config docs/styleguide.config.js",
     "build:types": "tsc -p tsconfig-build.json",
     "build:all": "yarn makeSpriteAndPalette && yarn build && yarn build:css:all && yarn build:doc",
     "build:js": "env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx,.md,.styl,.json,.snap react/ --out-dir transpiled/react --copy-files --no-copy-ignored --verbose",
@@ -127,6 +127,7 @@
     "postcss-loader": "2.1.6",
     "pretty": "2.0.0",
     "prop-types": "15.7.2",
+    "puppeteer-core": "22.15.0",
     "react": "16.12.0",
     "react-dom": "16.12.0",
     "react-hot-loader": "^4.3.11",

scripts/screenshots.js

@@ -8,7 +8,7 @@ const { readConfig, parseViewportArgument } = require('./screenshots/helpers')
 
 let puppeteer
 try {
-  puppeteer = require('puppeteer')
+  puppeteer = require('puppeteer-core')
 } catch (e) {
   console.error(e)
   console.log(

scripts/screenshots/prepares.js

@@ -33,7 +33,10 @@ const prepareFS = async options => {
  * Returns { browser, page }
  */
 const prepareBrowser = async (puppeteer, options) => {
-  const browser = await puppeteer.launch({ headless: 'new' })
+  const browser = await puppeteer.launch({
+    headless: 'new',
+    executablePath: `/usr/bin/google-chrome` // could be `/Applications/Chrome.app/Contents/MacOS/Chrome` on MacOS
+  })
   const page = await browser.newPage()
   // Put Argos in user agent
   await page.setUserAgent(