#21 Migrating Volto Heading Block addon to new project-less setup (#22)

* #21 Migrating steps * #21-migration-fixing ci * #21: fix ci * Revert changes in the previous commits * #21:fix cypress test * Try to fix the commented out subtest * fix cypress * fix heading cypress * fix cypress * fix the clssnames in cypress * fix: acceptance test fixed * chore * test * chore * version after new setup * fix: the version and restore files * fix: restore previously changed files * fix: add missing parameters in package.json * fix: include js and jsx files * Fix images in README --------- Co-authored-by: Victor Fernandez de Alba <[email protected]>
kitconcept · Jan 20, 2025 · a2f0d48 · a2f0d48
1 parent c410f6c
commit a2f0d48
Show file tree

Hide file tree

Showing 73 changed files with 31,552 additions and 9,998 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,41 @@
+const fs = require('fs');
+const projectRootPath = __dirname;
+const { AddonRegistry } = require('@plone/registry/addon-registry');
+
+let coreLocation;
+if (fs.existsSync(`${projectRootPath}/core`))
+  coreLocation = `${projectRootPath}/core`;
+else if (fs.existsSync(`${projectRootPath}/../../core`))
+  coreLocation = `${projectRootPath}/../../core`;
+
+const { registry } = AddonRegistry.init(`${coreLocation}/packages/volto`);
+
+// Extends ESlint configuration for adding the aliases to `src` directories in Volto addons
+const addonAliases = Object.keys(registry.packages).map((o) => [
+  o,
+  registry.packages[o].modulePath,
+]);
+
+module.exports = {
+  extends: `${coreLocation}/packages/volto/.eslintrc`,
+  rules: {
+    'import/no-unresolved': 1,
+  },
+  settings: {
+    'import/resolver': {
+      alias: {
+        map: [
+          ['@plone/volto', `${coreLocation}/packages/volto/src`],
+          ['@plone/volto-slate', `${coreLocation}/packages/volto-slate/src`],
+          ['@plone/registry', `${coreLocation}/packages/registry/src`],
+          [
+            '@kitconcept/volto-heading-block',
+            './packages/volto-heading-block/src',
+          ],
+          ...addonAliases,
+        ],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+      },
+    },
+  },
+};
diff --git a/.github/workflows/acceptance.yml b/.github/workflows/acceptance.yml
@@ -1,51 +1,101 @@
 name: Acceptance tests
-on: [push]
+on:
+  push:
+    paths:
+      - "*.js"
+      - "*.json"
+      - "*.yaml"
+      - "cypress/**"
+      - "packages/**"
+      - ".github/workflows/acceptance.yml"
 
 env:
-  ADDON_NAME: "@kitconcept/volto-heading-block"
-  ADDON_PATH: "volto-heading-block"
-  VOLTO_VERSION: "16"
+  NODE_VERSION: 20.x
+  CYPRESS_RETRIES: 2
 
 jobs:
 
   acceptance:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v3
+      - uses: actions/checkout@v4
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
+      - name: Use Node.js ${{ env.NODE_VERSION }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Enable corepack
+        run: corepack enable
 
-      - name: Install Cypress
+      - name: Get pnpm store directory
+        shell: bash
         run: |
-          cd acceptance
-          yarn
-
-      - name: "Cypress: Acceptance tests"
-        uses: cypress-io/github-action@v6
-        env:
-          BABEL_ENV: production
-          CYPRESS_RETRIES: 2
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Cache Cypress Binary
+        id: cache-cypress-binary
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/Cypress
+          key: binary-${{ env.NODE_VERSION }}-${{ hashFiles('pnpm-lock.yaml') }}
+
+      - name: Install dependencies
+        run: make install
+
+      - name: Install Cypress if not in cache
+        if: steps.cache-cypress-binary.outputs.cache-hit != 'true'
+        working-directory: core/packages/volto
+        run: make cypress-install
+
+      - uses: JarvusInnovations/background-action@v1
+        name: Start Servers
         with:
-          parallel: false
-          browser: chrome
-          working-directory: acceptance
-          spec: cypress/tests/*.js
-          install: false
-          start: |
-            docker compose -f ci.yml --profile prod up
-          wait-on: 'npx wait-on --httpTimeout 20000 http-get://localhost:55001/plone http://localhost:3000'
+          run: |
+            make ci-acceptance-backend-start &
+            make acceptance-frontend-prod-start &
+          # your step-level and job-level environment variables are available to your commands as-is
+          # npm install will count towards the wait-for timeout
+          # whenever possible, move unrelated scripts to a different step
+          # to background multiple processes: add & to the end of the command
+
+          wait-on: |
+            http-get://localhost:55001/plone
+            http://localhost:3000
+          # IMPORTANT: to use environment variables in wait-on, you must use this form: ${{ env.VAR }}
+          # See wait-on section below for all resource types and prefixes
+
+          tail: true # true = stderr,stdout
+          # This will allow you to monitor the progress live
+
+          log-output-resume: stderr
+          # Eliminates previosuly output stderr log entries from post-run output
+
+          wait-for: 10m
+
+          log-output: stderr,stdout # same as true
+
+          log-output-if: failure
+
+      - run: make ci-acceptance-test
 
       # Upload Cypress screenshots
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-screenshots-acceptance
           path: acceptance/cypress/screenshots
 
       # Upload Cypress videos
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: cypress-videos-acceptance

diff --git a/.github/workflows/changelog.yml b/.github/workflows/changelog.yml
@@ -3,41 +3,56 @@ on:
   pull_request:
     types: [assigned, opened, synchronize, reopened, labeled, unlabeled]
     branches:
-      - master
+      - main
 
 env:
-  node-version: 18.x
+  NODE_VERSION: 20.x
+  ADDON_NAME: volto-heading-block
 
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
         with:
           # Fetch all history
           fetch-depth: '0'
 
       - name: Install pipx
         run: pip install towncrier
 
-      # node setup
-      - name: Use Node.js ${{ env.node-version }}
-        uses: actions/setup-node@v3
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
-          node-version: ${{ env.node-version }}
-          cache: 'yarn'
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
 
-      # node install
       - name: Install dependencies
-        run: yarn
+        run: |
+          make install
 
       - name: Check for presence of a Change Log fragment (only pull requests)
         run: |
           # Fetch the pull request' base branch so towncrier will be able to
           # compare the current branch with the base branch.
           # Source: https://github.com/actions/checkout/#fetch-all-branches.
-          git fetch --no-tags origin master
-          towncrier check --compare-with origin/master
+          git fetch --no-tags origin ${BASE_BRANCH}
+          towncrier check --dir packages/${ADDON_NAME}
         env:
           BASE_BRANCH: ${{ github.base_ref }}
         if: github.event_name == 'pull_request'
diff --git a/.github/workflows/code.yml b/.github/workflows/code.yml
@@ -1,15 +1,47 @@
 name: Code analysis checks
-on: [push]
+on:
+  push:
+    paths:
+      - "*.js"
+      - "*.json"
+      - "*.yaml"
+      - "packages/**"
+      - ".github/workflows/code.yml"
+
+env:
+  NODE_VERSION: 20.x
+
 jobs:
   codeanalysis:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [18.x]
 
     steps:
       - name: Main checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: make install
 
       - name: Linting
         run: make lint
diff --git a/.github/workflows/i18n.yml b/.github/workflows/i18n.yml
@@ -0,0 +1,47 @@
+name: i18n
+on:
+  push:
+    paths:
+      - "*.js"
+      - "*.json"
+      - "*.yaml"
+      - "packages/**"
+      - ".github/workflows/i18n.yml"
+
+env:
+  NODE_VERSION: 20.x
+
+jobs:
+  unit:
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Main checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: make install
+
+      - name: test i18n command
+        run: make i18n
diff --git a/.github/workflows/storybook.yml b/.github/workflows/storybook.yml
@@ -0,0 +1,57 @@
+name: Storybook
+on:
+  push:
+    paths:
+      - "*.js"
+      - "*.json"
+      - "*.yaml"
+      - "packages/**"
+      - ".github/workflows/storybook.yml"
+
+env:
+  NODE_VERSION: 20.x
+
+permissions:
+  contents: write
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ env.NODE_VERSION }}
+
+      - name: Enable corepack
+        run: corepack enable
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v4
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: make install
+
+      - name: Generate Storybook
+        run: |
+          make storybook-build
+
+      - name: Deploy to GitHub pages
+        uses: JamesIves/github-pages-deploy-action@v4
+        if: ${{ github.ref == 'refs/heads/main' }}
+        with:
+          branch: gh-pages
+          folder: .storybook-build